/* ============================================================================
   Ambrosia: Feast of Olympus — "Olympian dawn"
   Deep aubergine night, marble ivory, ambrosia gold, aegean blue.
   ==========================================================================*/
:root{
  --bg:#120b1a;
  --bg2:#1b1128;
  --bg3:#251636;
  --panel:rgba(255,255,255,.045);
  --panel2:rgba(255,255,255,.075);
  --line:rgba(226,171,74,.24);
  --line2:rgba(255,255,255,.075);
  --gold:#e2ab4a;
  --gold-l:#ffe9a8;
  --gold-d:#a9762a;
  --ivory:#f3ebdd;
  --marble:#cfc3b0;
  --text:#ece3d6;
  --dim:#a99fbb;
  --faint:#7a7191;
  --good:#79c98a;
  --bad:#e0616b;
  --terra:#c3613a;
  --olive:#8b9a4d;
  --under:#6b6bd6;
  --r:16px;
  --meander:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 7h7V3h7v4h7V3h7' fill='none' stroke='%23e2ab4a' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.55 ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  min-height:100vh;
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(226,171,74,.10), transparent 62%),
    radial-gradient(760px 460px at 88% 4%, rgba(107,107,214,.14), transparent 66%),
    radial-gradient(1100px 700px at 50% 110%, rgba(195,97,58,.10), transparent 70%);
  background-attachment:fixed;
}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-weight:600;margin:0}
a{color:var(--gold-l)}

/* ------------------------------------------------------------------ shell */
.app{min-height:100vh;display:flex;flex-direction:column}

.top{
  position:sticky;top:0;z-index:40;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;
  padding:10px 18px 11px;
  background:linear-gradient(180deg,rgba(18,11,26,.96),rgba(18,11,26,.82) 70%,rgba(18,11,26,0));
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line2);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:38px;height:38px;flex:none;filter:drop-shadow(0 0 8px rgba(226,171,74,.4))}
.brand-txt{min-width:0}
h1{
  font-size:clamp(15px,1.55vw,21px);line-height:1.15;letter-spacing:.2px;
  background:linear-gradient(92deg,var(--ivory),var(--gold-l) 42%,var(--gold) 78%,var(--ivory));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-sub{margin:1px 0 0;font-size:11.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}

.counts{text-align:center;min-width:210px}
.count-line{display:flex;align-items:baseline;gap:7px;justify-content:center}
.count-v{
  font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
  color:var(--gold-l);text-shadow:0 0 22px rgba(255,224,140,.28);
}
.count-v.pop{animation:pop .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.09)}100%{transform:scale(1)}}
.count-u{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.count-sub{display:flex;gap:8px;justify-content:center;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.count-sub b{color:var(--text);font-weight:700}
.count-sub .dot{opacity:.4}
.count-bar{margin-top:6px;height:4px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.count-bar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--gold-d),var(--gold) 50%,var(--gold-l));
  box-shadow:0 0 12px rgba(255,224,140,.5);transition:width .2s linear}

.tools{display:flex;gap:6px;justify-content:flex-end}
.tool{
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  border-radius:11px;border:1px solid var(--line2);background:var(--panel);
  color:var(--marble);transition:.16s;
}
.tool svg{width:20px;height:20px}
.tool:hover{border-color:var(--line);color:var(--gold-l);background:var(--panel2);transform:translateY(-1px)}
.tool[aria-pressed="false"] .w1,.tool[aria-pressed="false"] .w2{opacity:.2}

/* ------------------------------------------------------------------ board */
.board{
  flex:1;display:grid;gap:14px;
  grid-template-columns:290px minmax(0,1fr) 352px;
  padding:14px 16px 22px;align-items:start;
}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}
.col-stage{min-width:0}

.card{
  position:relative;border-radius:var(--r);border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  padding:14px 15px 15px;overflow:hidden;
}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background-image:var(--meander);background-repeat:repeat-x;opacity:.5;
}
.card h3{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  margin:0 0 8px;font-family:inherit;font-weight:700;
}

/* ------------------------------------------------------------- chapter card */
.act-tag{
  display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);
  color:var(--gold-l);background:rgba(226,171,74,.09);
}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 10px}
.star-row{display:flex;gap:2px}
.star-row i{width:13px;height:13px;display:block;background:rgba(255,255,255,.14);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.star-row i.on{background:linear-gradient(180deg,var(--gold-l),var(--gold));box-shadow:0 0 8px rgba(255,224,140,.6)}
.ch-title{font-size:21px;line-height:1.2;margin:0 0 7px;color:var(--ivory)}
.ch-story{margin:0 0 9px;font-size:13.4px;line-height:1.62;color:var(--dim)}
.ch-reward{
  margin:0 0 11px;font-size:12.6px;line-height:1.5;color:var(--gold-l);
  padding:7px 10px;border-radius:10px;border:1px solid rgba(226,171,74,.22);
  background:rgba(226,171,74,.07);
}
.ch-reward:empty{display:none}
.goal{margin-top:2px}
.goal-top{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint);
  letter-spacing:.05em;text-transform:uppercase}
.goal-top b{color:var(--gold-l);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;font-size:12.5px}
.bar{margin-top:5px;height:9px;border-radius:6px;background:rgba(255,255,255,.07);
  overflow:hidden;border:1px solid var(--line2)}
.bar i{display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--gold-d),var(--gold) 55%,var(--gold-l));
  box-shadow:0 0 14px rgba(255,224,140,.45);transition:width .25s ease}
.goal-foot{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px;color:var(--faint)}
.goal-foot b{color:var(--text);font-variant-numeric:tabular-nums}
.mods{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mods span{
  font-size:11px;padding:3px 8px;border-radius:999px;
  border:1px solid rgba(224,97,107,.4);color:#f0a3a9;background:rgba(224,97,107,.1);
}
.mods span.boon{border-color:rgba(121,201,138,.38);color:#a6e6b4;background:rgba(121,201,138,.1)}

.mini-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.mini-list li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--dim);
  padding-bottom:4px;border-bottom:1px dashed rgba(255,255,255,.06)}
.mini-list li b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:700}

/* ------------------------------------------------------------------ stage */
.stage{
  position:relative;border-radius:20px;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);min-height:min(60vh,560px);flex:1;
  box-shadow:0 22px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.04);
  cursor:pointer;
}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tapzone{
  position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;
  cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;
}
.tapzone:active{background:radial-gradient(circle at 50% 60%,rgba(255,233,168,.07),transparent 60%)}
.stage-top{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:center;
  gap:8px;pointer-events:none;z-index:3}
.buffbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.buff{
  display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  padding:5px 11px;border-radius:999px;background:rgba(12,7,19,.72);
  border:1px solid rgba(255,233,168,.5);color:var(--gold-l);backdrop-filter:blur(4px);
  animation:buffIn .3s ease;
}
.buff.bad{border-color:rgba(224,97,107,.6);color:#ffb6bb}
.buff i{display:block;width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.buff i b{display:block;height:100%;background:currentColor}
@keyframes buffIn{from{transform:translateY(-8px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.stage-hint{
  position:absolute;left:0;right:0;bottom:12px;text-align:center;z-index:3;pointer-events:none;
  font-size:12.5px;color:rgba(255,255,255,.72);transition:opacity .5s;
}
.stage-hint b{color:var(--gold-l)}
.stage-hint.gone{opacity:0}

.momentum{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:10px}
.mo-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mo-bar{height:8px;margin:0}
.mo-bar i{background:linear-gradient(90deg,#6b6bd6,var(--aegean,#4a8fd4) 45%,var(--gold-l));
  transition:width .08s linear}
.mo-x{font-size:12.5px;font-weight:800;color:var(--gold-l);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.momentum.hot .mo-x{color:#fff;text-shadow:0 0 14px rgba(255,224,140,.9)}

/* ------------------------------------------------------------------- shop */
.tabs{display:flex;gap:5px;padding:4px;border-radius:13px;background:var(--panel);border:1px solid var(--line2)}
.tab{
  flex:1;position:relative;padding:8px 6px;border:0;border-radius:10px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--dim);background:transparent;transition:.16s;
}
.tab:hover{color:var(--text)}
.tab.on{background:linear-gradient(180deg,rgba(226,171,74,.24),rgba(226,171,74,.1));
  color:var(--gold-l);box-shadow:inset 0 0 0 1px var(--line)}
.tab-n{
  display:inline-block;min-width:17px;padding:0 4px;margin-left:4px;border-radius:9px;
  font-size:10.5px;font-weight:800;background:rgba(255,255,255,.12);color:var(--text);
}
.tab-n.hot{background:var(--gold);color:#2b1c04}
.pane{display:none}
.pane.on{display:block}
.shop{
  display:grid;gap:7px;max-height:calc(100vh - 210px);overflow-y:auto;padding:2px 3px 2px 1px;
  scrollbar-width:thin;
}
.shop::-webkit-scrollbar{width:8px}
.shop::-webkit-scrollbar-thumb{background:rgba(226,171,74,.3);border-radius:6px}

.row{
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:9px 11px;border-radius:13px;cursor:pointer;
  border:1px solid var(--line2);background:rgba(255,255,255,.028);
  transition:transform .12s,border-color .16s,background .16s;
}
.row:hover{transform:translateX(-2px);border-color:rgba(255,255,255,.16)}
.row.can{border-color:rgba(226,171,74,.42);
  background:linear-gradient(96deg,rgba(226,171,74,.13),rgba(226,171,74,.03))}
.row.can:hover{border-color:var(--gold);box-shadow:0 6px 20px rgba(226,171,74,.14)}
.row.no{opacity:.48}
.row.hit{animation:rowHit .42s ease}
@keyframes rowHit{0%{box-shadow:inset 0 0 0 0 rgba(255,233,168,.6)}45%{box-shadow:inset 0 0 0 3px rgba(255,233,168,.5)}100%{box-shadow:inset 0 0 0 0 rgba(255,233,168,0)}}
.row-ico{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 26%,rgba(255,233,168,.28),rgba(226,171,74,.07) 62%,transparent);
  border:1px solid rgba(226,171,74,.28);color:var(--gold-l);
}
.row-ico svg{width:23px;height:23px}
.row-name{font-weight:650;font-size:13.6px;color:var(--ivory);display:flex;align-items:center;gap:6px}
.row-tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);opacity:.85}
.row-sub{font-size:11.6px;color:var(--dim);margin-top:1px;display:flex;gap:8px;flex-wrap:wrap}
.row-sub em{font-style:normal;color:var(--gold-l);font-variant-numeric:tabular-nums}
.row-right{text-align:right;display:grid;gap:2px;justify-items:end}
.price{font-size:13.4px;font-weight:800;color:var(--gold-l);font-variant-numeric:tabular-nums;white-space:nowrap}
.price.no{color:var(--dim);font-weight:600}
.have{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.pips{display:flex;gap:2px;margin-top:3px}
.pips i{width:5px;height:5px;border-radius:2px;background:rgba(255,255,255,.16)}
.pips i.on{background:var(--gold)}
.locked{font-size:11px;color:var(--faint);font-style:italic}
.empty{padding:22px 10px;text-align:center;font-size:12.5px;color:var(--faint)}

/* -------------------------------------------------------------- records */
.record h3{margin:14px 0 7px}
.record h3:first-child{margin-top:4px}
.rec-spark{font-size:13px;color:var(--dim);margin:0 0 4px}
.rec-spark b{color:var(--gold-l);font-size:16px}
.rec-note{font-size:11.6px;color:var(--faint);margin:0 0 6px}
.ach-count{font-size:11px;color:var(--faint);font-weight:400;letter-spacing:0}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.ach{
  aspect-ratio:1;border-radius:11px;display:grid;place-items:center;cursor:default;
  border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--faint);
  font-size:17px;position:relative;transition:.18s;
}
.ach.on{border-color:rgba(226,171,74,.5);color:var(--gold-l);
  background:radial-gradient(circle at 40% 30%,rgba(255,233,168,.22),rgba(226,171,74,.06))}
.ach:hover{transform:translateY(-2px)}
.rec-actions{margin-top:14px}
.btn{
  padding:9px 18px;border-radius:11px;cursor:pointer;font-weight:700;font-size:13px;
  border:1px solid var(--gold);background:linear-gradient(180deg,var(--gold-l),var(--gold));
  color:#2b1c04;transition:.16s;box-shadow:0 8px 20px rgba(226,171,74,.22);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(226,171,74,.32)}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--marble);box-shadow:none}
.btn.ghost:hover{border-color:var(--line);color:var(--gold-l)}

/* -------------------------------------------------------------- overlays */
.overlay{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;
  background:rgba(8,4,14,.74);backdrop-filter:blur(7px);
}
.ov-card{
  position:relative;width:min(520px,100%);border-radius:20px;padding:26px 26px 22px;
  border:1px solid var(--line);text-align:center;overflow:hidden;
  background:linear-gradient(180deg,#241634,#180f26 70%,#150c20);
  box-shadow:0 30px 90px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.04);
  animation:ovIn .42s cubic-bezier(.2,1.2,.35,1);
}
.ov-card.wide{width:min(680px,100%);text-align:left}
.ov-card.wide .btn{margin-top:16px}
@keyframes ovIn{from{transform:translateY(18px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.ov-rays{
  position:absolute;left:50%;top:-40%;width:180%;aspect-ratio:1;transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg,rgba(255,224,140,.14) 0 3deg,transparent 3deg 12deg);
  animation:spin 34s linear infinite;pointer-events:none;mask-image:radial-gradient(circle,#000 12%,transparent 62%);
}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.ov-kicker{
  display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-bottom:8px;position:relative;
}
.ov-card h2{font-size:26px;margin:0 0 10px;color:var(--ivory);position:relative}
.ov-stars{display:flex;gap:7px;justify-content:center;margin:6px 0 12px;position:relative}
.ov-stars i{width:26px;height:26px;background:rgba(255,255,255,.12);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:starPop .5s cubic-bezier(.2,1.7,.4,1) backwards}
.ov-stars i.on{background:linear-gradient(180deg,var(--gold-l),var(--gold));
  box-shadow:0 0 18px rgba(255,224,140,.7)}
@keyframes starPop{from{transform:scale(0) rotate(-60deg);opacity:0}to{transform:none;opacity:1}}
.ov-reward{position:relative;font-size:13.6px;color:var(--gold-l);margin:0 0 8px;
  padding:9px 12px;border-radius:11px;background:rgba(226,171,74,.09);border:1px solid rgba(226,171,74,.2)}
.ov-time,.ov-next{position:relative;font-size:12.6px;color:var(--dim);margin:0 0 6px}
.ov-card .btn{position:relative;margin-top:8px}
.ov-steps{margin:0 0 12px;padding-left:20px;display:grid;gap:7px}
.ov-steps li{font-size:13.4px;color:var(--dim);line-height:1.55}
.ov-steps b{color:var(--gold-l)}
.ov-note{font-size:12.4px;color:var(--faint);margin:0}
.lore-scroll{max-height:52vh;overflow-y:auto;padding-right:6px;display:grid;gap:10px}
.lore-item{border-left:2px solid var(--line);padding:2px 0 2px 12px}
.lore-item h4{margin:0 0 3px;font-size:13.6px;color:var(--ivory);font-family:inherit;font-weight:700}
.lore-item p{margin:0;font-size:12.6px;color:var(--dim);line-height:1.6}
.lore-item .ls{color:var(--gold);font-size:11px;letter-spacing:.08em}

/* ---------------------------------------------------------------- toasts */
.toasts{position:fixed;right:16px;top:74px;z-index:90;display:grid;gap:8px;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:10px;min-width:210px;
  padding:10px 14px;border-radius:13px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(36,22,52,.96),rgba(24,15,38,.96));
  box-shadow:0 14px 34px rgba(0,0,0,.5);animation:toastIn .34s cubic-bezier(.2,1.3,.4,1);
}
.toast.out{animation:toastOut .3s ease forwards}
.toast-ico{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 30%,rgba(255,233,168,.3),rgba(226,171,74,.08));
  color:var(--gold-l);border:1px solid rgba(226,171,74,.3);font-size:15px}
.toast-t{font-size:12.8px;font-weight:700;color:var(--ivory)}
.toast-d{font-size:11.4px;color:var(--dim)}
@keyframes toastIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateX(24px);opacity:0}}

/* ----------------------------------------------------------------- prose */
.prose{
  max-width:1000px;margin:14px auto 0;padding:34px clamp(16px,4vw,40px) 44px;
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
  border-top:1px solid var(--line2);
}
.prose h2{
  font-size:24px;margin:34px 0 12px;color:var(--ivory);
  padding-bottom:9px;border-bottom:1px solid var(--line2);position:relative;
}
.prose h2:first-child{margin-top:0}
.prose h2::after{content:"";position:absolute;left:0;bottom:-1px;width:88px;height:8px;
  background-image:var(--meander);background-repeat:repeat-x}
.prose h3{font-size:15px;margin:18px 0 5px;color:var(--gold-l);font-family:inherit;font-weight:700}
.prose p{font-size:15px;line-height:1.72;color:#dcd3c6;margin:0 0 14px}
.prose strong{color:var(--ivory)}
.prose code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;font-size:13px}
.prose .howto{margin:0 0 14px;padding-left:22px}
.prose .howto li{font-size:15px;line-height:1.68;color:#dcd3c6;margin:0 0 8px}
.prose .howto b{color:var(--gold-l)}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px;
  scrollbar-width:thin}
.tblwrap .tbl{margin:0;min-width:420px}
.tbl{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:13.8px}
.tbl th,.tbl td{text-align:left;padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.07)}
.tbl th{color:var(--gold-l);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
.tbl tbody tr:hover{background:rgba(255,255,255,.03)}
.tbl td:first-child{color:var(--ivory);font-weight:600}
.faq p{font-size:14.6px;color:#d3cabd}
.prose-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.tag{font-size:11.5px;padding:4px 11px;border-radius:999px;border:1px solid var(--line2);
  color:var(--dim);background:rgba(255,255,255,.03)}
.foot{
  padding:22px clamp(16px,4vw,40px) 40px;text-align:center;font-size:12.4px;color:var(--faint);
  border-top:1px solid var(--line2);
}
.foot p{margin:0 0 6px}

/* --------------------------------------------------------------- mobtabs */
.mobtabs{display:none}

/* ------------------------------------------------------------ responsive */
@media (max-width:1240px){
  .board{grid-template-columns:250px minmax(0,1fr) 320px}
}
@media (max-width:1040px){
  .board{grid-template-columns:230px minmax(0,1fr) 300px}
  .shop{max-height:calc(100vh - 220px)}
}
@media (max-width:940px){
  .top{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:9px 12px 10px}
  .brand-sub{display:none}
  .counts{grid-column:1 / -1;order:3;min-width:0}
  .count-v{font-size:30px}
  .tools{order:2}
  .board{display:block;padding:10px 10px 86px}
  .col{display:none;gap:10px}
  .app[data-mob="play"] .col-stage{display:flex}
  .app[data-mob="chapter"] .col-left{display:flex}
  .app[data-mob="shop"] .col-right,
  .app[data-mob="record"] .col-right{display:flex}
  /* flex:1 would resolve to flex-basis:0 and beat the height below, which
     collapsed the stage to nothing on phones. Auto basis honours the height. */
  .stage{flex:1 1 auto;min-height:min(58vh,520px);height:min(58vh,520px)}
  .shop{max-height:none;overflow:visible}
  .mobtabs{
    display:grid;grid-template-columns:repeat(4,1fr);gap:5px;
    position:fixed;left:10px;right:10px;bottom:10px;z-index:70;
    padding:6px;border-radius:16px;border:1px solid var(--line2);
    background:rgba(18,11,26,.94);backdrop-filter:blur(10px);
    box-shadow:0 12px 34px rgba(0,0,0,.5);
  }
  .mobtabs button{
    padding:9px 4px;border:0;border-radius:11px;background:transparent;cursor:pointer;
    font-size:11.5px;font-weight:700;color:var(--dim);transition:.16s;
  }
  .mobtabs button.on{background:linear-gradient(180deg,rgba(226,171,74,.24),rgba(226,171,74,.08));
    color:var(--gold-l)}
  .toasts{top:auto;bottom:82px;right:10px;left:10px}
}
@media (max-width:520px){
  .prose{padding:24px 14px 36px}
  .prose h2{font-size:20px}
  .tbl{font-size:12.4px}
  .tbl th,.tbl td{padding:7px 7px}
  .ov-card{padding:20px 16px 18px}
  .ov-card h2{font-size:21px}
  .count-v{font-size:26px}
  .ch-title{font-size:19px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ov-rays{display:none}
}