@font-face{font-family:'Cinzel';src:url('fonts/cinzel-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--bg:#efe6d2;--panel:#f8f1e1;--ink:#2b2218;--mut:#6f5f48;--acc:#7a2e1d;--acc2:#b3560a;--bd:#cdbd9c;--glow:#e0a23a;--dc:#5865f2;color-scheme:light}
@media(prefers-color-scheme:dark){:root{--bg:#17120d;--panel:#241c14;--ink:#eadfc8;--mut:#a39378;--acc:#e0a23a;--acc2:#e07b1a;--bd:#43362a;--glow:#e0a23a;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:17px/1.6 Georgia,'Times New Roman',serif}
a{color:var(--acc)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:5;background:var(--panel);border-bottom:2px solid var(--bd)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;flex-wrap:wrap}
.logo{font:700 20px Georgia,serif;color:var(--acc);text-decoration:none;white-space:nowrap}
nav.links{display:flex;gap:6px;flex-wrap:wrap}
nav.links a{text-decoration:none;color:var(--ink);padding:6px 10px;border-radius:4px;border:2px solid transparent}
nav.links a:hover,nav.links a.on{border-color:var(--bd)}
.btn{display:inline-block;text-decoration:none;font:700 17px Georgia,serif;padding:12px 22px;border-radius:6px;border:2px solid var(--acc);background:var(--acc);color:var(--bg);min-height:48px}
.btn.alt{background:transparent;color:var(--acc)}
.btn.dc{background:var(--dc);border-color:var(--dc);color:#fff}
.btn.yt{background:#cc1f1a;border-color:#cc1f1a;color:#fff}
.btn.tt{background:#111;border-color:#2a2a2a;color:#fff}
.btn:hover{filter:brightness(1.08)}
.hero{padding:56px 0 40px;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(224,123,26,.22),transparent 60%)}
.hero h1{font:700 clamp(38px,7vw,68px)/1.05 Georgia,serif;margin:12px 0 10px;color:var(--acc);letter-spacing:.5px}
.hero p.tag{font-size:clamp(18px,2.4vw,22px);color:var(--mut);max-width:680px;margin:0 auto 22px}
.badge{display:inline-block;font:700 13px Georgia,serif;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:2px solid var(--acc2);color:var(--acc2)}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.note{font-size:14px;color:var(--mut);margin-top:12px}
section{padding:34px 0}
h2{font:700 28px Georgia,serif;margin:0 0 16px;color:var(--acc)}
h3{margin:0 0 6px;font-size:19px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:var(--panel);border:2px solid var(--bd);border-radius:8px;padding:16px}
.card p{margin:0;color:var(--mut)}
.card .ic{font-size:28px;line-height:1}
.classes{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.classes .card{text-align:center;padding:12px 8px}
.classes b{display:block}
.classes small{color:var(--mut);font-size:13px;line-height:1.35;display:block}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.shots figure:first-child{grid-column:1/-1}
.shots img{width:100%;height:auto;border-radius:8px;border:2px solid var(--bd);display:block}
.shots figure{margin:0}
.shots figcaption{font-size:14px;color:var(--mut);margin-top:4px;text-align:center}
.beta{background:var(--panel);border:2px solid var(--acc2);border-radius:8px;padding:20px}
.beta ul{margin:8px 0 0;padding-left:20px}
footer{border-top:2px solid var(--bd);padding:22px 0 40px;color:var(--mut);font-size:14px;text-align:center}
.page{padding:34px 0}
.page h1{font:700 clamp(28px,8.5vw,40px)/1.15 Georgia,serif;color:var(--acc);margin:0 0 8px;overflow-wrap:anywhere}
.entry{background:var(--panel);border:2px solid var(--bd);border-radius:8px;padding:18px;margin:0 0 14px}
.entry h3{color:var(--acc)}
.entry .date{color:var(--mut);font-size:14px}
.entry .sum{margin:8px 0 2px;font-weight:700;color:var(--ink);font-size:16px}
.entry ul{margin:8px 0 0;padding-left:20px}
details.q{background:var(--panel);border:2px solid var(--bd);border-radius:8px;padding:12px 16px;margin:0 0 10px}
details.q summary{font-weight:700;cursor:pointer}
details.q p{margin:8px 0 0;color:var(--mut)}
@media(max-width:860px){.grid{grid-template-columns:1fr 1fr}.classes{grid-template-columns:repeat(3,1fr)}.shots{grid-template-columns:1fr 1fr}}
@media(max-width:560px){body{font-size:16px}.grid{grid-template-columns:1fr}.classes{grid-template-columns:repeat(2,1fr)}nav.links a{padding:6px 7px}.hero{padding:38px 0 28px}}

/* logo + pixel icons */
.logo{display:inline-flex;align-items:center;gap:8px}
.logo img{width:30px;height:30px}
.px{width:48px;height:48px;image-rendering:pixelated;display:block;margin:0 auto 4px}
/* Ember Vision banner: layered parallax landscape with rising embers */
.ev{position:relative;overflow:hidden;min-height:clamp(460px,72vh,640px);display:flex;align-items:center;padding:48px 0 120px;text-align:center;color:#f5e9d4;
 background:linear-gradient(180deg,#140c24 0%,#2c1430 30%,#5e2128 58%,#b0461a 82%,#e98a2c 100%)}
.ev .sun{position:absolute;left:50%;bottom:16%;width:min(46vw,420px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
 background:radial-gradient(circle,rgba(255,214,120,.95) 0%,rgba(255,150,50,.55) 38%,rgba(255,110,30,0) 70%)}
.ev .lay{position:absolute;left:-2%;width:104%;bottom:0;display:block;will-change:transform}
.ev .l1{height:52%}.ev .l2{height:38%}.ev .l3{height:20%}
.ev .emb{position:absolute;inset:0;pointer-events:none}
.ev .emb i{position:absolute;bottom:-12px;width:4px;height:4px;border-radius:50%;background:#ffc45a;box-shadow:0 0 8px 3px rgba(255,130,30,.75);opacity:0;animation:rise 9s linear infinite}
.ev .emb i:nth-child(1){left:6%;animation-delay:0s;animation-duration:8s}.ev .emb i:nth-child(2){left:14%;animation-delay:3s;animation-duration:11s}
.ev .emb i:nth-child(3){left:23%;animation-delay:6s;animation-duration:9s}.ev .emb i:nth-child(4){left:31%;animation-delay:1.5s;animation-duration:12s}
.ev .emb i:nth-child(5){left:40%;animation-delay:4.5s;animation-duration:8.5s}.ev .emb i:nth-child(6){left:48%;animation-delay:7s;animation-duration:10s}
.ev .emb i:nth-child(7){left:57%;animation-delay:2s;animation-duration:9.5s}.ev .emb i:nth-child(8){left:65%;animation-delay:5.5s;animation-duration:11.5s}
.ev .emb i:nth-child(9){left:73%;animation-delay:.8s;animation-duration:8s}.ev .emb i:nth-child(10){left:81%;animation-delay:3.8s;animation-duration:10.5s}
.ev .emb i:nth-child(11){left:89%;animation-delay:6.5s;animation-duration:9s}.ev .emb i:nth-child(12){left:95%;animation-delay:2.6s;animation-duration:12s}
.ev .emb i:nth-child(odd){width:3px;height:3px}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(18px,-45vh)}85%{opacity:.8}100%{transform:translate(-12px,-85vh);opacity:0}}
.ev .wrap{position:relative;z-index:2;width:100%}
.ev .mark{width:84px;height:84px;filter:drop-shadow(0 0 18px rgba(255,150,40,.7))}
.ev h1{font:700 clamp(40px,7.5vw,72px)/1.05 Georgia,serif;margin:8px 0 10px;color:#ffd27a;letter-spacing:.5px;text-shadow:0 2px 0 #5a1d10,0 0 26px rgba(255,140,40,.55)}
.ev p.tag{font-size:clamp(18px,2.4vw,22px);color:#f3e2c6;max-width:680px;margin:0 auto 22px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.ev .note{color:#f0d9b5;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.ev .badge{border-color:#ffb24a;color:#ffd27a;background:rgba(20,10,20,.35)}
.ev .btn{background:#e0a23a;border-color:#e0a23a;color:#1b0f08}
.ev .btn.dc{background:#5865f2;border-color:#5865f2;color:#fff}
.ev .btn.yt{background:#cc1f1a;border-color:#cc1f1a;color:#fff}
.ev .btn.tt{background:#111;border-color:#2a2a2a;color:#fff}
.ev .evtag{position:absolute;right:12px;bottom:8px;z-index:2;font-size:12px;color:#f3d9b0;opacity:.75;letter-spacing:.5px}
@media(prefers-reduced-motion:reduce){.ev .emb i{animation:none;display:none}.ev .lay{transform:none!important}}
/* announcements */
.ann{background:var(--panel);border:2px solid var(--bd);border-radius:8px;padding:18px;margin:0 0 16px}
.ann.hot{border-color:var(--acc2)}
.ann h3{color:var(--acc);font-size:22px}
.ann .date{color:var(--mut);font-size:14px}
.vote{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:12px 0;max-width:640px}
.vote .card{text-align:center}
.vote .em{font-size:34px;line-height:1.1}
.vote b{display:block;font-size:18px;margin:4px 0}
.vote p{font-size:15px}

@media(max-width:560px){.ev{padding:36px 0 100px}.ev .mark{width:64px;height:64px}}

/* Cinzel headings, like the game */
.logo,h1,h2,.ev h1,.page h1{font-family:'Cinzel',Georgia,serif;letter-spacing:.8px}

/* Ko-fi support block */
.kofi-box{display:flex;gap:18px;align-items:flex-start;background:var(--panel);border:2px solid var(--bd);border-radius:8px;padding:20px}
.kofi-ic{font-size:40px;line-height:1}
.kofi-box h2{margin:0 0 8px}
.kofi-box p{margin:0}
.btn.kofi-btn{background:#ff5e5b;border-color:#ff5e5b;color:#fff}
@media(max-width:560px){.kofi-box{flex-direction:column;gap:8px}}

.card .hbox{height:108px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:6px}
.card img.hspr{image-rendering:pixelated;display:block;margin:0}
/* Round 24: phone screenshots readable one under the other, menu on one line */
@media(max-width:560px){.shots{grid-template-columns:1fr;gap:18px}.shots figure:not(:first-child) img{max-width:320px;margin:0 auto}
 header.top .wrap{gap:2px 8px;padding:4px 12px}nav.links{gap:0;flex-wrap:nowrap;margin:0 -6px}nav.links a{padding:4px 6px;font-size:15px;white-space:nowrap}}
@media(max-width:350px){nav.links a{padding:4px 4px;font-size:14px}}
.ev a.evtag{text-decoration:underline dotted;color:#f3d9b0}
.ev a.evtag:hover{opacity:1}

.ann{scroll-margin-top:80px}

/* Round 30: pixel icons */
img.px{width:1.2em;height:1.2em;vertical-align:-.22em;image-rendering:pixelated;image-rendering:crisp-edges;display:inline-block;margin:0 .04em}
.card .ic img.px{width:32px;height:32px}
.vote .em img.px{width:48px;height:48px}
.kofi-ic img.px{width:48px;height:48px}
details summary{list-style:none}details summary::-webkit-details-marker{display:none}
details summary::before{content:'';display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-2px;background:url(img/px/arr_r.png) center/contain no-repeat;image-rendering:pixelated}
details[open]>summary::before{background-image:url(img/px/arr_d.png)}

/* Round 32b: credit line */
footer .credit{margin-top:8px;font-weight:700;opacity:.85}

/* Round 34: text style */
@font-face{font-family:'Alegreya';src:url('fonts/alegreya-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'Alegreya';src:url('fonts/alegreya-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:'Alegreya';src:url('fonts/alegreya-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:'Pixelify Sans';src:url('fonts/pixelify-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'Pixelify Sans';src:url('fonts/pixelify-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
body,.badge,.entry .sum{font-family:'Alegreya',Georgia,serif;font-variant-numeric:lining-nums}
.logo,h1,h2,.hero h1,.page h1,.ev h1{font-family:'Cinzel',Georgia,serif}
.btn{font-family:'Pixelify Sans',monospace;letter-spacing:.3px}