/* Dosa World site. Blend: the jade ink world of direction B on the deep-brown ground of the 23 Oct site (data-blend="brown", default)
   or on ink-green (data-blend="jade"). Game type (Bai Jamjuree 600, Anuphan, Chakra Petch) and game pieces (Ember Glass panels,
   four-point stars, rarity plates, element rosettes, skill icons). Calm at rest; the one authored moment is the hero loop. */
@font-face{font-family:Anuphan;src:url(/site/fonts/anuphan-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Anuphan;src:url(/site/fonts/anuphan-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bai Jamjuree";src:url(/site/fonts/baijamjuree-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(/site/fonts/chakra-petch-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--bg:#150F0B;--bg2:#1E1510;--bg3:#2A1D14;--glass:rgba(26,18,13,.84);--hair:rgba(228,210,178,.30);--line:rgba(228,210,178,.16);--tx:#F3EDE3;--mute:#C2B29D;--champ:#D8C196;--jade:#5CC49A;--seal:#D8352B;--gold:#ECD08C;--focus:#9ED9B8;--el:#5CC49A;
--disp:"Bai Jamjuree","Noto Sans Thai",system-ui,sans-serif;--ui:Anuphan,"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;--num:"Chakra Petch",Anuphan,system-ui,sans-serif;--r:14px;color-scheme:dark}
html[data-blend=jade]{--bg:#0B0D0C;--bg2:#121614;--bg3:#1A211E;--glass:rgba(11,13,12,.86);--hair:rgba(239,233,218,.26);--line:rgba(239,233,218,.12);--tx:#EFE9DA;--mute:#A9B3AC}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:var(--hair) var(--bg)}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.75 var(--ui);overflow-x:hidden}
img,video,picture,svg{max-width:100%}img,video{height:auto}picture,img,video{display:block}svg{display:inline-block}
a{color:var(--jade)}::selection{background:var(--jade);color:#07130e}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--jade);color:#07130e;padding:10px 16px;border-radius:8px;z-index:60;font-weight:700}.skip:focus{left:8px}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:600;line-height:1.35;text-wrap:balance}
.display{font-size:clamp(32px,4.8vw,52px)}.h2{font-size:clamp(25px,3.2vw,34px)}.h3{font-size:20px}
p{margin:0}.mute{color:var(--mute)}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.center{text-align:center}.px{image-rendering:pixelated}
kbd{font:600 12px/1 var(--num);border:1px solid var(--hair);border-bottom-width:2px;border-radius:5px;padding:4px 7px;background:var(--bg);color:var(--tx);display:inline-block;min-width:1.8em;text-align:center}
.star4{display:inline-block;width:10px;height:10px;background:var(--champ);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);flex:none}
.eg{flex:none;vertical-align:middle}

/* header */
.top{position:fixed;z-index:40;left:50%;top:max(12px,env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(1120px,calc(100% - 24px));display:flex;align-items:center;gap:14px;padding:8px 10px 8px 16px;background:var(--glass);border:1px solid var(--hair);border-radius:999px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tx);font:600 19px/1 var(--disp);white-space:nowrap}.brand img{width:36px;height:36px;border-radius:50%}
.nav{display:flex;gap:2px;margin-left:auto}.nav a{text-decoration:none;color:var(--mute);font-size:16px;padding:8px 12px;border-radius:999px}.nav a:hover,.nav a[aria-current]{color:var(--tx);background:rgba(243,237,227,.07)}
.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:50%;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-left:auto}
.menu-btn i{display:block;width:20px;height:2px;background:var(--tx);border-radius:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;border-radius:999px;text-decoration:none;font:700 18px/1 var(--ui);border:1px solid transparent;cursor:pointer;transition:box-shadow .3s,background .2s}
.btn-jade{background:var(--jade);color:#07130e}.btn-jade:hover{box-shadow:0 0 0 6px rgba(92,196,154,.2),0 0 40px rgba(92,196,154,.4)}
.btn-ghost{border-color:var(--hair);color:var(--tx);background:transparent}.btn-ghost:hover{background:rgba(243,237,227,.08)}
.btn-sm{min-height:42px;padding:0 20px;font-size:16px}.btn-lg{min-height:58px;padding:0 40px;font-size:21px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--seal);box-shadow:0 0 0 2px #07130e;flex:none}
.quiet{font-weight:700;color:var(--tx);text-decoration:none;border-bottom:2px solid var(--jade);padding-bottom:2px}
.cta-row{display:flex;gap:14px 26px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:26px}.cta-row.left{justify-content:flex-start}

/* panels from the game: Ember Glass, hairline, one star ornament */
.glass{position:relative;background:var(--glass);border:1px solid var(--hair);border-radius:12px}
.glass>.star4:first-child{position:absolute;left:10px;top:-5px}
.framed{border:1px solid var(--hair);border-radius:12px;background:#000}

/* hero */
.hero{position:relative;isolation:isolate;min-height:min(100svh,860px);padding:112px 0 64px;display:flex;align-items:center;overflow:hidden}
.hero-short{min-height:min(80svh,640px);justify-content:center;text-align:center}
.hero-bg,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;z-index:-3}.hero-bg img{object-fit:cover;object-position:center 30%}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,var(--bg));z-index:-1;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
.hero-copy .logo{width:min(440px,78vw);height:auto;margin:0 0 6px -10px;filter:drop-shadow(0 0 36px rgba(92,196,154,.25))}.logo-sm{width:min(300px,70vw);margin-inline:auto}
.hero h1{margin:14px 0 10px}.lead{max-width:34em;color:var(--mute);font-size:clamp(17px,1.5vw,19px)}
.hero-screen{padding:8px;animation:rise-in .9s .15s cubic-bezier(.16,1,.3,1) both}
.hero-screen .clip,.hero-screen img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#000}
.hero-cap{font-size:13px;color:var(--mute);padding:6px 4px 0}
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}}
.proof{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}.proof li{font-size:14.5px;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:3px 14px;background:var(--glass)}.proof b{color:var(--tx)}
.moon{position:absolute;z-index:-2;left:68%;top:20%;width:min(900px,130vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(92,196,154,.24),rgba(92,196,154,.06) 60%,transparent);animation:breathe 9s ease-in-out infinite;pointer-events:none}
.moon-sm{top:10%;left:60%;width:min(700px,120vw)}
@keyframes breathe{50%{opacity:.6;transform:translate(-50%,-50%) scale(1.06)}}
.mist{position:absolute;z-index:-1;left:-20%;width:140%;height:34%;background:radial-gradient(40% 60% at 25% 60%,rgba(214,196,170,.13),transparent),radial-gradient(40% 60% at 70% 50%,rgba(214,196,170,.1),transparent);pointer-events:none}
.m1{bottom:8%;animation:flow 38s linear infinite alternate}.m2{bottom:22%;animation:flow 54s linear infinite alternate-reverse;opacity:.7}
@keyframes flow{to{transform:translateX(12%)}}
.motes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.motes i{position:absolute;left:var(--x);bottom:-10px;width:5px;height:5px;border-radius:50%;background:#f3d27a;box-shadow:0 0 10px 3px rgba(243,210,122,.5);opacity:0;animation:rise var(--d) var(--s) linear infinite}
@keyframes rise{10%{opacity:.9}90%{opacity:.45}to{transform:translateY(-82vh) translateX(18px);opacity:0}}

/* inner page head */
.phead{position:relative;isolation:isolate;padding:132px 0 44px;overflow:hidden;background:linear-gradient(var(--bg3),var(--bg) 92%)}
.phead .lead{margin-top:10px}
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--mute);margin-bottom:14px;flex-wrap:wrap}.crumbs a{color:var(--mute)}

/* bands */
.band{padding:76px 0}.band.alt{background:var(--bg2)}
.sec-head{margin-bottom:30px}.sec-lead{color:var(--mute);margin-top:10px;max-width:42em}
.more{margin-top:26px}
.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;counter-reset:s}
.steps li{counter-increment:s;position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px 64px 16px 20px}
.alt .steps li{background:var(--bg)}
.steps li:before{content:counter(s);position:absolute;right:18px;top:8px;font:600 38px/1.2 var(--num);color:rgba(92,196,154,.35)}
.steps b{display:block;font:600 19px/1.5 var(--disp)}.steps span{color:var(--mute);font-size:16px;display:block;margin-top:2px}
.join{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:start}
.code-card{padding:26px;text-align:center}
.code-shape{font:600 clamp(26px,4vw,34px)/1.3 var(--num);letter-spacing:.06em;margin:8px 0 12px}.code-shape span{color:var(--jade)}

/* beats */
.beat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center;padding:34px 0}
.beat+.beat{border-top:1px solid var(--line)}.beat.flip .beat-copy{order:2}
.beat-copy p{color:var(--mute);margin-top:10px}.beat-copy .h3{font-size:clamp(22px,2.6vw,28px)}
.beat-media .clip,.beat-media img.framed{width:100%;aspect-ratio:16/9;object-fit:cover}
.keyline{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;color:var(--mute);font-size:15px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.trio figure{margin:0;min-width:0}.trio .clip{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.trio figcaption{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-size:14px}.trio figcaption b{font:600 16px var(--disp)}.trio small{color:var(--mute);font-size:13px}
.els{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.els li{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:10px 4px}
.els b{font:600 16px var(--disp);margin-top:4px}.els small{color:var(--mute);font-size:13px;line-height:1.4}
.roles{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px}
.roles li{display:flex;gap:12px;align-items:flex-start}.roles span{font-size:15px;color:var(--mute);line-height:1.55}.roles b{display:block;color:var(--tx);font:600 16px var(--disp)}
.together{display:block}
.soon-line{margin-top:10px;color:var(--mute);font-size:15px;text-align:right}
.chip-soon,.chip-live{display:inline-block;font:700 12px/1 var(--ui);letter-spacing:.04em;border-radius:999px;padding:4px 10px;vertical-align:middle}
.chip-soon{border:1px solid var(--champ);color:var(--champ)}.chip-live{background:var(--jade);color:#07130e}

/* hud tour */
.hud-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:24px;align-items:start}
.callouts{position:relative;margin:0}.callouts img,.callouts .clip{width:100%;aspect-ratio:16/9;object-fit:cover}
.co{position:absolute;z-index:2;font-size:12.5px;line-height:1.3;padding:5px 9px;border-radius:8px;background:var(--glass);border:1px solid var(--hair);color:var(--tx);white-space:nowrap}
.hud-pieces{display:grid;gap:14px}
.plate{display:flex;gap:12px;align-items:center;padding:12px}
.pface{width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid var(--champ);background:radial-gradient(circle,color-mix(in srgb,var(--el) 40%,#1a1410),#1a1410);flex:none}.pface img{width:100%;height:100%;object-fit:cover}
.pinfo{display:grid;gap:6px;min-width:0}.pinfo b{font:600 17px var(--disp)}
.hp{display:block;height:6px;border-radius:3px;background:rgba(243,237,227,.14);overflow:hidden}.hp u{display:block;height:100%;width:78%;background:#6df2a2}
.pkeys{display:flex;gap:8px}.pk{position:relative}.pk img{width:40px;height:40px;border-radius:8px}.pk kbd{position:absolute;right:-4px;bottom:-6px;font-size:10px;padding:2px 5px;min-width:0}
.dns{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-top:2px}
.dn{font:600 28px/1 var(--num);color:var(--c);text-shadow:0 2px 0 rgba(0,0,0,.65),0 0 14px color-mix(in srgb,var(--c) 40%,transparent)}.dn.crit{font-size:40px}.dn.heal{font-size:24px}

/* roster */
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.hstrip{grid-template-columns:repeat(4,1fr)}
.hcard{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--tx);background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px 10px 14px;transition:border-color .2s,transform .2s}
.alt .hcard{background:var(--bg)}.hcard:hover{border-color:var(--el);transform:translateY(-3px)}.hcard[hidden]{display:none}
.arch{width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--el) 38%,#1a1410),#1a1410 72%)}
.arch img{width:100%;height:100%;object-fit:cover}
.hcard b{font:600 18px/1.4 var(--disp);margin-top:10px}.hmeta{display:flex;gap:6px;align-items:center;margin-top:4px}.hcard small{color:var(--mute);font-size:13.5px;margin-top:2px}
.rar{display:block;height:auto}
.filters{display:grid;gap:10px;margin-bottom:22px}.fgroup{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--tx);font:400 15px var(--ui);cursor:pointer}
.chip[aria-pressed=true]{background:var(--jade);border-color:var(--jade);color:#07130e;font-weight:700}
.stars{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}

/* who, roadmap, systems, faq */
.who-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.who-list li{padding:6px 24px;border-left:1px solid var(--hair)}.who-list li:first-child{padding-left:0;border-left:0}.who-list b{display:block;font:600 19px var(--disp)}.who-list span{color:var(--mute);font-size:16px}
.rm{display:grid;grid-template-columns:1fr 1fr;gap:18px}.rm .glass{padding:24px}.rm ul{margin:12px 0 0;padding-left:1.1em;color:var(--mute)}.rm li{margin:6px 0}
.note-line{margin-top:20px}
.sys{list-style:none;margin:0;padding:0;display:grid;gap:0}.sys li{padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:8px 40px;align-items:start}.sys li:first-child{border-top:0}
.sys-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.sys p{color:var(--mute)}.sys a{grid-column:2;justify-self:start}
.faq-list{display:grid;gap:10px;max-width:780px}
details{background:var(--bg2);border:1px solid var(--line);border-radius:12px}.alt details{background:var(--bg)}
summary{cursor:pointer;list-style:none;padding:15px 52px 15px 18px;font-weight:700;position:relative;min-height:56px;display:flex;align-items:center}
summary::-webkit-details-marker{display:none}summary:after{content:"+";position:absolute;right:18px;font:600 26px/1 var(--disp);color:var(--jade)}details[open] summary:after{content:"–"}
details p{padding:0 18px 18px;color:var(--mute)}
.cta-band{background:radial-gradient(60% 120% at 50% 0,rgba(92,196,154,.13),transparent),var(--bg)}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.key-group{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:20px}.alt .key-group{background:var(--bg)}
.caps{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}.key-group h3{font-size:19px;margin-bottom:6px}.key-group p{color:var(--mute);font-size:16px}
.fight-shot{margin-top:24px}.fight-shot .clip{width:100%;aspect-ratio:16/9;object-fit:cover}
.build{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:start}.steps-tight{margin-top:18px}
.gear{list-style:none;margin:0;padding:0;display:grid;gap:10px}.gear li{display:flex;gap:12px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px}.gear span{font-size:15px;color:var(--mute)}.gear b{display:block;font:600 17px var(--disp);color:var(--tx)}.gear img{width:56px;height:56px;flex:none}
.road,.beyond{list-style:none;margin:0;padding:0;display:grid;gap:12px}.road{grid-template-columns:repeat(5,1fr)}.beyond{grid-template-columns:repeat(4,1fr);margin-top:12px}
.road li,.beyond li{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}
.road b,.beyond b{font:600 16px/1.45 var(--disp)}.road em,.beyond em{font-style:normal;font-size:13px;color:var(--jade);font-weight:700}.road span,.beyond span{color:var(--mute);font-size:14.5px;line-height:1.6}
.shot{margin:26px 0 0}.shot img{width:100%}.shot figcaption{color:var(--mute);font-size:14px;margin-top:8px}
.invite{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.chain{list-style:none;margin:0;padding:0;display:grid;gap:10px}.chain li{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 18px}.chain b{display:block;font:600 18px var(--disp)}.chain span{color:var(--mute);font-size:15px}

/* hero page */
.hero-page .hpage{padding:116px 0 72px;background:radial-gradient(70% 45% at 70% 0,color-mix(in srgb,var(--el) 14%,transparent),transparent),var(--bg)}
.hp-grid{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:40px;align-items:start;margin-bottom:44px}
.stage{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;max-width:400px;width:100%;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--el) 22%,var(--bg3)),var(--bg3) 70%)}
.stage .halo{position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--el) 40%,transparent),transparent 58%);opacity:.55;transition:opacity .2s}.stage.cast .halo{opacity:1}
.spr{display:block;width:var(--w);max-width:90%;aspect-ratio:var(--ar);background-repeat:no-repeat;background-position:0 0;image-rendering:pixelated;position:relative}.spr[hidden]{display:none}
.stage-name{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:600 20px var(--disp);color:var(--el);text-shadow:0 2px 0 rgba(0,0,0,.6);opacity:0;transition:opacity .2s}.stage-name.on{opacity:1}
.badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.bdg{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px 14px 3px 4px;background:var(--bg2);font-size:15px}.bdg small{color:var(--mute)}.bdg b{font-weight:700}
.hp-body h1 small{font:400 22px var(--ui);color:var(--mute);margin-left:6px}.hp-body .lead{margin-top:8px}.role-line{margin-top:8px;font-size:15px}
.portrait-row{display:flex;gap:20px;align-items:flex-end;margin-top:22px;flex-wrap:wrap}.portrait{width:150px;height:150px;border-radius:12px;border:1px solid var(--hair);object-fit:cover}.turn-img{width:min(300px,100%);image-rendering:pixelated}
.player-wrap{margin-bottom:34px}.player-wrap>.mute{margin:6px 0 16px}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.tabs button{display:flex;gap:10px;align-items:center;text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:8px 10px;color:var(--tx);font:400 14px/1.35 var(--ui);cursor:pointer;min-height:68px;min-width:0}
.tabs button[aria-selected=true]{border-color:var(--el);background:color-mix(in srgb,var(--el) 14%,var(--bg2))}
.tabs .ico{position:relative;flex:none}.tabs img{width:48px;height:48px;border-radius:10px}.tabs kbd{position:absolute;right:-6px;bottom:-7px;font-size:10px;padding:2px 5px;min-width:0}
.tabs small{display:block;color:var(--mute);font-size:12px}.tabs b{font:600 15px/1.35 var(--disp);display:block;overflow-wrap:anywhere}
.player{padding:6px;aspect-ratio:16/9;max-width:860px}.player video{width:100%;height:100%;object-fit:contain;border-radius:8px;background:#000}
.sdesc{margin-top:14px;max-width:46em}.sdesc b{font-family:var(--disp)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px}.pn a{display:block;text-decoration:none;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 18px;color:var(--tx)}.pn a+a{text-align:right}.pn small{display:block;color:var(--mute);font-size:13px}.pn b{font:600 18px var(--disp)}

/* press, contact, prose */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:20px 0}.logo-tile{margin:0;border-radius:12px;padding:20px;display:grid;gap:12px;justify-items:center;text-align:center;font-size:14px}
.tile-dark{background:var(--bg3);border:1px solid var(--line)}.tile-light{background:#EFE6D3;color:#1B1714;border:1px solid #cdbf9f}.tile-light a{color:#1F6A4B}.logo-tile img{width:min(240px,100%)}
.rules{margin:0;padding-left:1.2em;color:var(--mute);display:grid;gap:6px}
.press-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:20px}.press-shots a{display:grid;gap:6px;text-decoration:none;color:var(--mute);font-size:14px}.press-shots img{width:100%;aspect-ratio:16/10;object-fit:cover}
.press-text{max-width:780px}.press-text p{margin:12px 0;color:var(--tx)}.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:20px 0 0}.kv dt{color:var(--mute)}.kv dd{margin:0}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px}.cbox{padding:22px;display:grid;gap:10px;align-content:start;justify-items:start}.cbox p{color:var(--mute);font-size:16px}.mailrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mailrow a{overflow-wrap:anywhere}
.prose{max-width:1080px}.prose>*{max-width:720px}.prose h2{margin:34px 0 8px}.prose p{color:var(--tx);opacity:.9;margin-bottom:12px}.prose a{color:var(--jade)}

/* critique pass: phrase-safe headline, wide swap beat, HUD legend, one FAQ+roadmap band */
.ph{display:inline-block}
.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}
.beat.wide{grid-template-columns:1fr;gap:22px}.beat.wide .beat-copy{max-width:46em}
.beat.wide .trio{gap:16px}.beat.wide .trio .clip{border-radius:12px}
.together .framed{width:100%}
.legend{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:14.5px;color:var(--mute)}.legend li{display:flex;gap:10px;align-items:flex-start}.legend .star4{margin-top:7px}
.faq-rm{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start}
.rm-one{padding:24px}.rm-one h3{margin-top:4px}.rm-one h3+ul{margin:8px 0 18px;padding-left:1.1em;color:var(--mute)}.rm-one li{margin:5px 0}
.com-line{margin-top:22px;color:var(--mute);font-size:15px}
.mini{margin:0}.mini img{width:100%;border-radius:10px}
@media (max-width:980px){.faq-rm{grid-template-columns:1fr;gap:36px}.legend{grid-template-columns:1fr}.hero-grid{grid-template-columns:1fr}}
@media (max-width:760px){.hero-copy .logo{width:min(300px,62vw);margin-left:-6px}.hero h1{margin-top:8px}}

/* footer, dock */
.foot{border-top:1px solid var(--line);background:var(--bg);padding:44px 0 56px}
.foot-in{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.foot-brand img{width:200px}.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}.foot-nav a{color:var(--mute);text-decoration:none;font-size:15px;padding:6px 2px}.foot-nav a:hover{color:var(--tx)}
.foot-dev{font-size:14px;color:var(--mute)}.foot-fine{font-size:13px;color:#8d8171}
.dock{display:none}

@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:28px}.hud-grid,.beat{grid-template-columns:1fr}.beat.flip .beat-copy{order:0}.sys li{grid-template-columns:1fr}.sys a{grid-column:1}.road{grid-template-columns:1fr 1fr}.beyond{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.join,.invite,.build,.rm{grid-template-columns:1fr;gap:24px}.hp-grid{grid-template-columns:1fr}.tabs{grid-template-columns:repeat(2,1fr)}.tabs button:last-child{grid-column:1/-1}.who-list{grid-template-columns:1fr;gap:14px}.who-list li{padding:0;border:0}.els{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
  .top{border-radius:26px;flex-wrap:wrap;padding:6px 8px 6px 14px;gap:8px}
  .menu-btn{display:flex}.top-play{display:none}
  .nav{display:none;order:5;width:100%;flex-direction:column;padding:6px 0 10px;border-top:1px solid var(--line);margin-left:0}.nav.open{display:flex}.nav a{padding:12px 10px;font-size:17px}
  .hero{padding-top:92px}.band{padding:56px 0}.phead{padding-top:104px}.hero-page .hpage{padding-top:104px}
  .steps li{padding-right:56px}.road,.beyond{grid-template-columns:1fr}
  .hstrip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:12px;margin-inline:calc(max(16px,env(safe-area-inset-left,0px))*-1);padding-inline:max(16px,env(safe-area-inset-left,0px));-webkit-overflow-scrolling:touch}.hstrip .hcard{flex:0 0 150px;scroll-snap-align:start}
  .co{display:none}.roles{grid-template-columns:1fr}.trio{grid-template-columns:1fr}.trio figure{display:grid;grid-template-columns:44% 1fr;gap:12px;align-items:center}.trio figcaption{margin:0}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .hero-bg img{object-position:80% 22%}
  .dock{position:fixed;z-index:45;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr 1.7fr 1fr;gap:6px;align-items:center;padding:8px max(10px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px));background:var(--glass);border-top:1px solid var(--hair);transition:transform .25s}
  .dock[hidden]{display:grid;transform:translateY(110%)}.dock a:not(.btn){display:flex;align-items:center;justify-content:center;min-height:48px;color:var(--tx);text-decoration:none;font-size:14.5px;border-radius:12px}
  .dock-play{min-height:52px;padding:0 10px;font-size:18px}
}
@media (max-width:420px){#hgrid{grid-template-columns:1fr 1fr;gap:12px}.brand span{font-size:17px}.pn{grid-template-columns:1fr}.pn a+a{text-align:left}.els{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motes{display:none}}

/* taste pass: every control answers the pointer, 44px targets, photos zoom inside their frame */
.btn:active{transform:translateY(1px);box-shadow:none}
.hcard .arch img{transition:transform .35s cubic-bezier(.16,1,.3,1)}.hcard:hover .arch img{transform:scale(1.03)}
.chip{min-height:44px}.foot-nav a{display:inline-flex;align-items:center;min-height:44px}
.tabs button:hover{border-color:var(--hair)}.faq-list summary:hover{background:rgba(243,237,227,.04)}

/* Jade Dawn: day grounds from the owner's banner (hero, posters, closing dawn) inside the brown shell (Codex direction, 8 Nov) */
.day{--tx:#241C19;--mute:#4F4338;--hair:rgba(36,28,25,.28);--line:rgba(36,28,25,.16);--jade:#176448;--glass:rgba(255,244,222,.9);color:var(--tx)}
.day .btn-jade{background:#176448;color:#FFF0D2}.day .btn-jade:hover{box-shadow:0 0 0 6px rgba(23,100,72,.18),0 8px 26px rgba(23,100,72,.28)}
.day .quiet{color:var(--tx);border-bottom-color:#176448}.day .proof li{background:rgba(255,240,210,.7);border-color:rgba(36,28,25,.18);color:#4F4338}.day .proof b{color:#241C19}
.day-hero{padding:0;min-height:0;display:block;background:#BDD5BD;overflow:visible;isolation:auto}.day-hero:after{display:none}
.day-hero:before{content:none}
.hero-stage{position:relative;max-width:1672px;margin:0 auto}
.hero-art{display:block;position:static;inset:auto}.hero-art img{position:static;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;z-index:auto}
.hero-logo-m{display:none}
.hero-act{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);width:min(660px,58%);text-align:center;background:var(--glass);border:1px solid rgba(36,28,25,.2);border-radius:16px;padding:14px 22px 16px}
.hero-act h1{font-size:clamp(24px,2.6vw,36px);margin:0}.hero-act .lead{font-size:15.5px;margin:4px auto 0;color:var(--mute);max-width:none}.hero-act .cta-row{margin-top:12px;gap:10px 22px}.hero-act .btn-lg{min-height:52px;font-size:19px}
.hero-proof{padding-block:16px 0;background:#BDD5BD;max-width:none}.hero-proof .proof{justify-content:center;margin:0 0 16px}
.day-hero:after{display:block;content:"";height:96px;background:linear-gradient(#BDD5BD,var(--bg))}
.live{padding-block:56px 64px}.live-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center}.live-copy .mute{margin-top:10px}
.live .hero-screen{animation:none}
.meet{background:linear-gradient(#E9DFC5 0,#E9DFC5 36%,#2A1D14 100%);padding-bottom:84px}.meet .h2{color:#241C19}.meet .sec-lead{color:#4F4338}
.posters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid rgba(36,28,25,.25);background:#BDD5BD;text-decoration:none;color:#FFF0D2}
.pcard>picture img{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pinfo2{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:34px 12px 10px;background:linear-gradient(transparent,rgba(21,15,11,.82))}.pinfo2>b{font:600 20px var(--disp)}.pinfo2 span{display:flex;gap:6px;align-items:center}
.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.sys-art img{width:100%;border-radius:14px;border:1px solid var(--hair)}
.tight-list{margin:0;padding-left:1.1em;display:grid;gap:8px;color:var(--mute)}.tight-list b{color:var(--tx)}
.dawn{position:relative;isolation:isolate;padding:0;min-height:600px;background:#CDDCC2;overflow:hidden}
.dawn-art,.dawn-art img{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.dawn-art img{object-fit:cover;object-position:center bottom}
.dawn:before{content:"";position:absolute;inset:0 0 auto;height:160px;background:linear-gradient(var(--bg2),transparent);z-index:0}
.dawn-in{position:relative;z-index:1;padding-block:100px 280px}.dawn .com-line{color:var(--mute)}.dawn .h2,.dawn .sec-lead{color:#241C19}.dawn .sec-lead{color:#4F4338;margin-inline:auto}
.poster-big{margin:0;width:100%;max-width:400px}.poster-big img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;border:1px solid var(--hair)}
.poster-fallback{width:min(100%,400px);height:auto;aspect-ratio:1;border-radius:16px}
.try-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:16px;align-items:start}.try-grid .player{max-width:none}
@media (max-width:980px){.live-grid,.explore-grid{grid-template-columns:1fr;gap:24px}.posters{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .hero-art img{aspect-ratio:2/3}
  .hero-logo-m{display:block;position:absolute;left:50%;top:29%;width:min(250px,64%);height:auto;transform:translateX(-50%)}
  .hero-act{position:static;transform:none;width:auto;background:#BDD5BD;border:0;border-radius:0;padding:14px 16px 6px;text-align:center}.hero-act .lead{font-size:16px}.hero-act .cta-row{flex-direction:column;align-items:stretch}.hero-act .btn-lg{width:100%}
  .hero-proof{padding-block:6px 0}.live{padding-block:44px}
  .posters{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:10px;margin-inline:calc(max(16px,env(safe-area-inset-left,0px))*-1);padding-inline:max(16px,env(safe-area-inset-left,0px))}.pcard{flex:0 0 66%;scroll-snap-align:start}
  .dawn{min-height:540px}.dawn-in{padding-block:70px 230px}.try-grid{grid-template-columns:1fr}.stage{max-width:260px}
}

/* owner, 8 Nov: "I still like the dark tone, the new one is a bit too bright: blend them". The banner stays the hero but sits in the brown shell:
   its edges melt into the brown ground, the action bar is dark Ember Glass, the poster band and the closing scene are on brown. */
.day-hero{background:var(--bg);color:var(--tx)}
.hero-art img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 11%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 11%,#000 86%,transparent 100%);mask-composite:intersect}
.hero-act{background:rgba(21,15,11,.84);border:1px solid var(--hair);color:var(--tx)}.hero-act .lead{color:var(--mute)}
.hero-act .btn-jade{background:var(--jade);color:#07130e}.hero-act .quiet{color:var(--tx);border-bottom-color:var(--jade)}
.hero-proof{background:var(--bg)}.day-hero:after{display:none}.hero-proof .proof li{background:var(--glass);border-color:var(--line);color:var(--mute)}.hero-proof .proof b{color:var(--tx)}
.live{padding-block:40px 64px}
.meet{background:linear-gradient(var(--bg),var(--bg2));padding-bottom:84px}.meet .h2{color:var(--tx)}.meet .sec-lead{color:var(--mute)}
.pcard{border-color:var(--hair);background:var(--bg3)}
.dawn{background:var(--bg);min-height:0;padding-block:72px 84px;overflow:visible;isolation:auto}.dawn:before{display:none}.dawn-in{padding-block:0}
.dawn .h2{color:var(--tx)}.dawn .sec-lead{color:var(--mute);margin-inline:auto}.dawn .com-line{color:var(--mute)}
.dawn-art{display:block;margin:34px auto 0;max-width:1000px}.dawn-art img{position:static;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:16px;border:1px solid var(--hair);z-index:auto;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
@media (max-width:760px){
  .hero-act{background:var(--bg);padding:6px 16px 6px}.hero-act .lead{color:var(--mute)}
  .hero-art img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 84%,transparent 100%)}
  .hero-proof{padding-block:4px 0}
}
.pcard>picture img{width:100%;aspect-ratio:4/5;object-fit:cover}.pcard .pinfo2 img{width:auto;height:18px;aspect-ratio:auto;transition:none}.pcard:hover .pinfo2 img{transform:none}
.pcard>picture{display:block;overflow:hidden}.pcard:hover>picture img{transform:scale(1.03)}
.dawn-art{position:static;inset:auto;width:auto;height:auto;z-index:auto}

.sys-pic{grid-column:2;margin-top:10px}.sys-pic img{width:100%;border-radius:14px;border:1px solid var(--hair)}
.two-art{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.two-art img{width:100%;border-radius:14px;border:1px solid var(--hair)}
@media (max-width:980px){.sys-pic{grid-column:1}}@media (max-width:760px){.two-art{grid-template-columns:1fr}}

/* owner, 8 Nov: "I secretly like the old dark-brown style, the new one is vivid and good: use the brown tone with the painted background, hero and section on the other parts too".
   The brown night ink painting (the look of the first site) returns as the ground of inner-page heads, hero pages, the live band, the explore band and the footer;
   the Codex mist layer (screen blend, no cut-out) drifts over it. The banner and posters stay the bright accents. */
:root{--night-s:url(/site/img/night-800.webp);--night:url(/site/img/night-1280.webp);--mist:url(/site/img/layer-mist-screen-1600.webp)}
.phead,.live,.hero-page .hpage,.explore,.foot{position:relative;isolation:isolate}
.phead:before,.live:before,.hero-page .hpage:before,.explore:before,.foot:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--night) center top/cover no-repeat;opacity:.5;-webkit-mask-image:linear-gradient(#000 0,#000 35%,transparent 100%);mask-image:linear-gradient(#000 0,#000 35%,transparent 100%);pointer-events:none}
.phead:before{opacity:.62;-webkit-mask-image:linear-gradient(#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(#000 0,#000 55%,transparent 100%)}
.hero-page .hpage:before{height:640px;inset:0 0 auto;opacity:.5}
.live:before{opacity:.38;-webkit-mask-image:linear-gradient(transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 30%,#000 70%,transparent 100%)}
.explore:before{opacity:.34;background-position:center 60%;-webkit-mask-image:linear-gradient(transparent 0,#000 30%,#000 80%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 30%,#000 80%,transparent 100%)}
.foot:before{inset:auto 0 0;height:420px;opacity:.42;background-position:center bottom;-webkit-mask-image:linear-gradient(transparent 0,#000 70%);mask-image:linear-gradient(transparent 0,#000 70%)}
.phead:after,.live:after,.explore:after,.hero-page .hpage:after{content:"";position:absolute;inset:0;z-index:-1;background:var(--mist) center/cover no-repeat;mix-blend-mode:screen;opacity:.22;pointer-events:none;animation:mistdrift 60s ease-in-out infinite alternate}
.hero-page .hpage:after{height:640px;inset:0 0 auto}
@keyframes mistdrift{from{transform:translateX(-2%)}to{transform:translateX(3%)}}
.band.alt.explore{background:transparent}.live{background:transparent}
@media (max-width:760px){.phead:before,.live:before,.hero-page .hpage:before,.explore:before,.foot:before{background-image:var(--night-s)}}
@media (prefers-reduced-motion:reduce){.phead:after,.live:after,.explore:after,.hero-page .hpage:after{animation:none}}

/* owner, 8 Nov: dark-ground logo top-left; no solid box on the hero, a gradient instead; a painted play-button plate; Google's new G on sign-in; the game's coins as decoration; faint floating ornaments over the bands */
.brand img{width:auto;height:46px;border-radius:0}.brand{padding-block:0}
.top{padding-block:6px}
.hero-act{left:0;right:0;bottom:0;transform:none;width:auto;border:0;border-radius:0;padding:110px 16px 20px;background:linear-gradient(to top,rgba(21,15,11,.94) 0,rgba(21,15,11,.78) 38%,rgba(21,15,11,.34) 70%,transparent 100%)}
.hero-act .lead{max-width:44em}
.btn-jade{--bh:52px;height:var(--bh);min-height:0;padding:0 4px;border-style:solid;border-width:0 calc(var(--bh)*.9);border-image:url(/site/img/button-play-900.webp) 0 27% fill/0 calc(var(--bh)*.9) stretch;border-radius:0;background:none;color:#FFF0D2;text-shadow:0 1px 0 rgba(0,45,24,.75),0 0 10px rgba(0,45,24,.55);letter-spacing:.01em;box-shadow:none;transition:filter .2s,transform .15s}
.btn-jade:hover{filter:brightness(1.12) saturate(1.1);box-shadow:none;transform:translateY(-1px)}.btn-jade:active{transform:translateY(1px);filter:brightness(.95)}
.btn-lg.btn-jade{--bh:64px;font-size:21px}.btn-sm.btn-jade{--bh:42px;font-size:16px}.dock-play{--bh:50px}
.hero-act .btn-jade,.day .btn-jade{background:none;color:#FFF0D2}.btn-jade .dot{display:none}
.btn-gsign{--bh:60px;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:var(--bh);padding:0 6px;border-style:solid;border-width:0 calc(var(--bh)*.9);border-image:url(/site/img/button-pale-900.webp) 0 27% fill/0 calc(var(--bh)*.9) stretch;color:#14392b;font:700 19px/1 var(--ui);text-decoration:none;transition:filter .2s,transform .15s}
.btn-gsign:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn-gsign:active{transform:translateY(1px)}.gl{display:inline-block;width:20px;height:20px;vertical-align:-4px;margin-right:8px}.btn-gsign .gl{width:24px;height:24px;margin:0}
.steps b .gl{margin-right:10px}
.coin{width:32px;height:32px;margin-right:2px;flex:none}.sys-head .coin{width:30px;height:30px}
/* floating ornaments */
.band,.phead{position:relative}.band>.wrap,.phead>.wrap{position:relative;z-index:1}
.floaters{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fl{position:absolute;width:var(--s);height:var(--s);opacity:0;background:center/contain no-repeat;animation:fl-float var(--d) var(--o) ease-in-out infinite alternate}
.fl svg{width:100%;height:100%;color:#fff}.fl-star{background:var(--champ);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.fl-mark{border-radius:50%}
@keyframes fl-float{0%{opacity:0;transform:translate3d(0,14px,0) rotate(-6deg)}25%{opacity:.26}75%{opacity:.2}100%{opacity:.04;transform:translate3d(10px,-34px,0) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.floaters{display:none}}
@media (max-width:760px){.brand img{height:40px}.hero-act{padding:6px 16px;background:var(--bg)}.btn-lg.btn-jade{--bh:58px}.cta-row .btn-jade{margin-inline:auto}}
@media (max-width:760px){.hero-act .cta-row{align-items:center}.hero-act .quiet{align-self:center}}

/* round 4 (owner, 8 Nov): Thai name beside the logo, Closed Beta tag, platform badges, the game's current rarity crest, a deeper shadow under poster names, news in the new look */
.brand{gap:10px}.brand-th{font:600 18px/1 var(--disp);color:var(--tx);white-space:nowrap}
.beta-tag{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin:16px auto 0;padding:8px 18px;border-radius:999px;border:1px solid rgba(92,196,154,.55);background:linear-gradient(90deg,rgba(23,100,72,.55),rgba(23,100,72,.25));box-shadow:0 0 28px rgba(92,196,154,.22)}
.beta-tag b{font:600 14px/1 var(--num);letter-spacing:.14em;text-transform:uppercase;color:#d9ffee}.beta-tag span{font-size:14px;color:var(--mute)}
.live-dot{width:10px;height:10px;border-radius:50%;background:#5CE8A6;box-shadow:0 0 0 0 rgba(92,232,166,.6);animation:livepulse 1.8s ease-out infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(92,232,166,.6)}80%,100%{box-shadow:0 0 0 12px rgba(92,232,166,0)}}
.plats{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 18px;padding:0}
.plats li{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 12px;border-radius:14px;border:1px solid var(--line);background:var(--glass)}
.plats span{display:flex;flex-direction:column;line-height:1.25}.plats small{font-size:11.5px;color:var(--mute)}.plats b{font:600 16px var(--disp)}.plats em{font-style:normal;font-size:12.5px;color:var(--jade)}
.plats .on{border-color:rgba(92,196,154,.6)}.plats .on .plat-ico{width:28px;height:28px;color:var(--jade)}
.plats .off{filter:grayscale(1);opacity:.5}.plats .off .plat-ico{width:26px;height:28px}
.hero-proof .plats{margin:0 0 16px}
.hbg-crest{--c1:#effbff;--c2:#a8d9ee;--c3:#6398b8;--k:.42em;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.22em;flex:none;height:1.8em;min-width:2.7em;padding:0 .62em;box-sizing:border-box;font-size:13px;clip-path:polygon(var(--k) 0,calc(100% - var(--k)) 0,100% var(--k),100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,var(--k) 100%,0 calc(100% - var(--k)),0 var(--k));background:linear-gradient(135deg,var(--c1),var(--c2) 50%,var(--c3))}
.hbg-crest:before{content:"";position:absolute;inset:.2em;z-index:-1;--k2:calc(var(--k) - .12em);background:linear-gradient(180deg,color-mix(in srgb,var(--c2) 36%,#16110d),color-mix(in srgb,var(--c3) 20%,#0b0806));clip-path:polygon(var(--k2) 0,calc(100% - var(--k2)) 0,100% var(--k2),100% calc(100% - var(--k2)),calc(100% - var(--k2)) 100%,var(--k2) 100%,0 calc(100% - var(--k2)),0 var(--k2))}
.hbg-crest:after{content:"";position:absolute;left:.55em;right:.55em;top:.22em;height:.3em;z-index:-1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.hbg-crest b{font:700 1em/1 var(--num);letter-spacing:.06em;background:linear-gradient(180deg,#fff 10%,var(--c1) 55%,color-mix(in srgb,var(--c2) 60%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.hbg-crest svg.hbg-star{width:.74em;height:.74em;flex:none;color:var(--c2)}
.hbg-crest.hbg-SSR{--c1:#fff3bb;--c2:#ffb138;--c3:#f56a3e}
.hbg-crest.hbg-TSSR{--c1:#a7f7ff;--c2:#ba8bff;--c3:#ff96be;background:linear-gradient(120deg,#a7f7ff,#79afff 28%,#ba8bff 52%,#ff96be 78%,#ffb879)}
.hbg-crest.hbg-TSSR b{background-image:linear-gradient(90deg,#d9fdff,#d2c2ff 50%,#ffcade)}
.hbg-crest.hbg-TSSR svg.hbg-star:first-child{color:#a7f7ff}.hbg-crest.hbg-TSSR svg.hbg-star:last-child{color:#ff96be}
.pinfo2{padding-top:84px;background:linear-gradient(transparent,rgba(21,15,11,.5) 30%,rgba(21,15,11,.92) 78%)}.pinfo2>b{text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8)}
.hmeta .hbg-crest{font-size:11px}.badges .hbg-crest{font-size:15px}
/* news */
.news-page .hc-journal-intro{padding:132px 0 36px;background:linear-gradient(var(--bg3),var(--bg) 92%)}.news-page .hc-journal-intro .lead{margin-top:10px}
.news-page .hc-news{max-width:1080px;margin:0 auto;padding:36px max(16px,env(safe-area-inset-left,0px)) 72px}
.news-page .hc-news-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:22px}.news-page .hc-news-section-head h2{font-size:clamp(24px,3vw,32px)}.news-page .hc-news-section-head span{color:var(--mute);font-size:15px}
.news-page .hc-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.news-page .hc-news-grid-two{grid-template-columns:repeat(2,1fr)}
.news-page .hc-news-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg2);text-decoration:none;color:var(--tx);transition:border-color .2s,transform .2s}.news-page .hc-news-card:hover{border-color:var(--hair);transform:translateY(-2px)}
.news-page .hc-news-cover img{width:100%;aspect-ratio:16/9;object-fit:cover}.news-page .hc-news-card-copy{padding:16px 18px 20px;display:grid;gap:8px}
.news-page .hc-news-card h2,.news-page .hc-news-card h3{font:600 20px/1.45 var(--disp)}.news-page .hc-news-card p{color:var(--mute);font-size:15.5px}.news-page .hc-featured{margin-bottom:18px}.news-page .hc-featured h2{font-size:clamp(24px,3vw,32px)}
.news-page .hc-news-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:13.5px;color:var(--mute)}.news-page .hc-news-category{color:var(--jade);font-weight:700}.news-page .hc-read{color:var(--jade);font-weight:700;font-size:15px}
.news-page .hc-article-heading{max-width:760px;margin:0 auto;padding:128px max(16px,env(safe-area-inset-left,0px)) 24px;display:grid;gap:12px}.news-page .hc-article-heading h1{font-size:clamp(28px,4vw,42px)}.news-page .hc-article-heading p{color:var(--mute)}
.news-page .hc-back{color:var(--mute);text-decoration:none;font-size:15px}.news-page .hc-back:hover{color:var(--tx)}
.news-page .hc-article-image{display:block;width:min(1040px,calc(100% - 32px));margin:0 auto;border-radius:16px;border:1px solid var(--hair)}
.news-page .hc-article-layout{max-width:1040px;margin:0 auto;padding:40px max(16px,env(safe-area-inset-left,0px)) 56px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px}
.news-page .hc-article-layout aside nav{position:sticky;top:96px;display:grid;gap:8px;font-size:14.5px}.news-page .hc-article-layout aside nav b{color:var(--mute);font-weight:700}.news-page .hc-article-layout aside a{color:var(--tx);text-decoration:none;opacity:.8}
.news-page .hc-article-body{max-width:700px;display:grid;gap:26px}.news-page .hc-article-body h2{font-size:24px;margin-bottom:8px}.news-page .hc-article-body p,.news-page .hc-article-body li{color:#e4dccd}.news-page .hc-article-body ol{padding-left:1.3em;display:grid;gap:6px}
.news-page .hc-article-invite{border:1px solid var(--hair);border-radius:14px;background:var(--glass);padding:24px;display:grid;gap:10px;justify-items:start}
.news-page .hc-related{max-width:1080px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px)) 72px}
@media (max-width:900px){.news-page .hc-news-grid,.news-page .hc-news-grid-two{grid-template-columns:1fr}.news-page .hc-article-layout{grid-template-columns:1fr;gap:24px}.news-page .hc-article-layout aside{display:none}}
@media (max-width:760px){.brand-th{font-size:16px}.beta-tag{padding:8px 14px}.plats{flex-wrap:nowrap;gap:6px}.plats li{padding:6px 8px;gap:6px;min-width:0}.plats b{font-size:13px}.plats small,.plats em{font-size:10.5px}.plats .plat-ico{width:22px!important;height:22px!important}}

.top-discord{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(160deg,#7a86ff,#5865F2 55%,#4650c9);color:#fff;box-shadow:0 2px 10px rgba(88,101,242,.45),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .2s,box-shadow .2s}.top-discord svg{width:22px;height:22px}.top-discord:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(88,101,242,.6),inset 0 1px 0 rgba(255,255,255,.3)}.top-discord:active{transform:translateY(0)}.top-discord:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:760px){.menu-btn{margin-left:0!important}.top-discord{width:36px;height:36px;margin-left:auto}.top-discord svg{width:20px;height:20px}}

/* die-cut heroes floating over the seams between sections */
.seam{position:relative;height:0;z-index:6;pointer-events:none}
.drift{position:absolute;top:0;width:auto;height:var(--h,150px);margin-top:calc(var(--h,150px)*-.5);transform-origin:50% 100%;animation:drift-bob var(--d,6.5s) var(--o,0s) ease-in-out infinite;filter:drop-shadow(0 10px 12px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(255,236,190,.18));will-change:transform}
.seam-r .drift{right:max(10px,calc(50% - 720px))}.seam-l .drift{left:max(10px,calc(50% - 720px));}
@keyframes drift-bob{0%,100%{transform:translateY(7px) rotate(-1.2deg)}50%{transform:translateY(-9px) rotate(1.2deg)}}
@media (max-width:760px){.drift{height:calc(var(--h,150px)*.58)!important;margin-top:calc(var(--h,150px)*-.29)}.seam-r .drift{right:6px}.seam-l .drift{left:6px}}
@media (prefers-reduced-motion:reduce){.drift{animation:none}}

/* standing heroes: no bob, feet on the seam, body overlapping the section above (art overlap, not extra space) */
.seam-stand .drift{animation:none;top:auto;bottom:0;margin-top:0;transform:none;will-change:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}
.seam-stand.seam-r .drift{right:max(0px,calc(50% - 770px))}.seam-stand.seam-l .drift{left:max(-12px,calc(50% - 770px))}
@media (max-width:1180px){.seam-stand .drift{height:calc(var(--h)*.62)!important}}
@media (max-width:760px){.seam-stand .drift{height:calc(var(--h)*.36)!important;margin-top:0}.seam-stand.seam-r .drift{right:4px}.seam-stand.seam-l .drift{left:4px}}

/* friends beat: the town clip with the dungeon plate laid over its lower corner; the two key tiles sit under the copy */
.tg-stage{position:relative;margin-bottom:30px}.tg-stage .clip{display:block;border-radius:14px}
.tg-inset{position:absolute;right:14px;bottom:-30px;width:46%;height:auto;border-radius:10px;border:1px solid var(--hair);box-shadow:0 10px 24px rgba(0,0,0,.55)}
.modes{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.beat-copy .modes{color:var(--tx)}
.modes span{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--glass)}
.modes kbd{font-size:15px}.modes b{font:600 17px var(--disp)}
@media (max-width:980px){.tg-inset{width:52%;right:10px;bottom:-24px}.soon-line{text-align:right}}

.beat.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
@media (max-width:980px){.beat.flip{grid-template-columns:1fr}}

.dock-play{white-space:nowrap}

/* ---- mobile audit fixes (8 Nov): 44px touch targets, solid bars, landscape hero, readable small text ---- */
.top,.dock{background:#1A120D}
.top-discord{width:44px!important;height:44px!important;box-shadow:0 2px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.3)}.top-discord:hover{box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.brand{min-height:44px}
.quiet{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;padding-block:0;position:relative}.quiet:after{content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;background:var(--jade)}.day .quiet:after{background:#176448}
.com-line a,.mailrow a,.cbox a:not(.btn),.crumbs a{display:inline-flex;align-items:center;min-height:44px}.com-line a{padding-inline:4px}.crumbs{margin-bottom:6px;align-items:center}
.foot-nav a{min-width:44px;justify-content:center;padding-inline:6px}.dock a:not(.btn){min-width:44px}
.hmeta .hbg-crest,.pinfo2 .hbg-crest{font-size:12px!important}
.crumbs,.foot-dev{font-size:15px}.hcard small,.trio small,.els small{font-size:14px}
.beta-tag{box-shadow:none}.beat-copy p{text-wrap:pretty}
@media (orientation:landscape) and (max-height:520px){
  .hero-stage{padding-top:0}
  .hero-art img{width:100%;max-width:none;max-height:none;aspect-ratio:1672/941;object-fit:cover}
  .hero-act{position:static;transform:none;width:auto;background:var(--bg);border:0;border-radius:0;padding:4px 24px 14px}
  .hero-act h1{font-size:22px}.hero-act .lead{font-size:14.5px;max-width:46em}.hero-act .cta-row{margin-top:8px}.beta-tag{margin-top:8px}
}

.trio small,.els small,.hcard small{font-size:15px}.legend span,.dock a:not(.btn){font-size:15px}.beta-tag span{font-size:15px}
.plats small,.plats em{font-size:12px!important}.sdesc,.tabs small{font-size:13px}.tabs [role=tab] small{font-size:13px}
.btn-sm.btn-jade{--bh:44px}.crumbs a{min-width:44px}
@media (max-width:760px){.plats small,.plats em{font-size:12px!important}}
@media (max-width:760px){.band{padding:46px 0}.band.meet{padding-bottom:34px}.posters{padding-bottom:4px}}