/* the small base the game was written against */
body{margin:0;font:14px system-ui}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one lit window in the dark. The world fills the whole screen; instruments hang at its edges
   (vitals top-left, a porthole map top-right, the Blaze gauge along the bottom) and the pack slides in from the right.
   A single dark look on purpose: the game is about carrying light through the night. */
:root{
  --night:#0d1630; --soot:#16244a; --slate:#1b2c5a; --rim:#3a5296; --ink:#0a1128;
  --paper:#eef2ff; --dim:#b9c3e6; --lamp:#ffc24a; --flame:#f29a3a; --brass:#ffc24a;
  --heart:#e2504c; --focus:#4f8ef0; --growth:#6fd05a; --tide:#7fdcf0;
  --f-display:var(--qg-round);
  --f-label:var(--qg-round);
  --f-body:var(--qg-body);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--night);color:var(--paper);font-family:var(--f-body);font-size:16px;line-height:1.4;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}

#app{position:relative;width:100%;height:100%;overflow:hidden}
#stage{position:absolute;inset:0;overflow:hidden;background:#000}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}

/* ---------- instruments over the stage ---------- */
#hudo{position:absolute;inset:0;z-index:8;pointer-events:none;font-family:var(--f-label)}
#hudo button,#oMini{pointer-events:auto}
#oVit{position:absolute;left:calc(12px + env(safe-area-inset-left,0px));top:10px;width:min(48%,244px);display:flex;flex-direction:column;gap:4px}
.who{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;white-space:nowrap;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.who b{color:var(--lamp);overflow:hidden;text-overflow:ellipsis;min-width:0}
.bar{position:relative;height:17px;background:var(--ink);border:2px solid var(--ink);box-shadow:0 0 0 1px var(--rim)}
.bar i{position:absolute;inset:0 auto 0 0;width:0;display:block}
.bar em,.bar b{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-style:normal;font-weight:400;text-shadow:1px 1px 0 #000}
.bar em{left:5px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.bar b{right:5px;font-size:10px;color:#fff;font-variant-numeric:tabular-nums}
.bar.hp i{background:linear-gradient(#f0605a,#a82c30)}
.bar.mp i{background:linear-gradient(#62a0f6,#2c5ab8)}
.bar.xp{height:8px}
.bar.xp i{background:linear-gradient(#8fe07a,#3d9a34)}
.bar.dawn{height:16px;width:100%}
.bar.dawn i{background:linear-gradient(90deg,#3b4a9c,#c9668a 55%,#ffcf6a)}
.bar.dawn b{left:0;right:0;justify-content:center;font-size:9px}
.bar.blaze{height:18px}
.bar.blaze i{background:linear-gradient(90deg,#c8401a,#ff8a2a 45%,#ffd060 82%,#fff6d0)}
.bar.blaze b{left:0;right:0;justify-content:center;letter-spacing:.08em;text-transform:uppercase}
#oLeft{display:flex;gap:6px;margin-top:3px}
#oParty{display:flex;flex-direction:column;gap:3px;margin-top:5px;width:70%}
.pm{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px;font-size:9px;color:#9cc4ff;text-shadow:1px 1px 0 #000}
.pm i{display:block;height:6px;background:var(--ink);box-shadow:0 0 0 1px var(--rim)}
.pm b{display:block;height:100%;background:linear-gradient(#8ab8ff,#3a68c8)}
.pm.dead{opacity:.45}
#equip{grid-template-columns:repeat(5,1fr)}
.chip{flex:1 1 0;min-width:0;padding:7px 2px;background:rgba(18,21,42,.8);border:2px solid var(--ink);box-shadow:inset 0 0 0 1px var(--rim);font-family:var(--f-label);font-size:10px;color:var(--paper);text-align:center;white-space:nowrap}
.chip:hover{background:var(--slate)}
.chip kbd{font:inherit;color:var(--dim)}
.chip.on{box-shadow:inset 0 0 0 1px var(--tide);color:var(--tide)}
#oMap{position:absolute;right:calc(12px + env(safe-area-inset-right,0px));top:10px;width:136px;display:flex;flex-direction:column;align-items:center;gap:7px}
#oMini{width:136px;height:136px;border-radius:50%;border:3px solid var(--ink);box-shadow:0 0 0 2px var(--brass),0 0 20px rgba(255,196,77,.2);background:#000;image-rendering:pixelated;opacity:.95}
#blaze{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:min(44%,340px)}
#blaze.full .bar{box-shadow:0 0 0 1px var(--lamp),0 0 16px rgba(255,196,77,.75);animation:hot .7s ease-in-out infinite alternate}
@keyframes hot{to{box-shadow:0 0 0 1px #fff6d0,0 0 26px rgba(255,220,130,.95)}}
#oRight{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));bottom:14px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#oRight .rowp{display:flex;gap:8px;align-items:flex-end}
.ob{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border-radius:50%;border:2px solid rgba(240,231,210,.7);background:rgba(18,21,42,.72);font-family:var(--f-label);font-size:9px;line-height:1.15;color:var(--paper);touch-action:none;overflow:hidden}
.ob:active{background:rgba(57,64,102,.95)}
.ob b{font-size:13px;font-weight:400}
.ob small{font-size:8px;color:var(--dim)}
.ob::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(5,6,11,.74) calc(var(--cd,0)*360deg),transparent 0);pointer-events:none}
.ob.h{border-color:#ff7a70}.ob.h b{color:#ff7a70}
.ob.m{border-color:#7ab0ff}.ob.m b{color:#7ab0ff}
.ob.d{border-color:var(--tide);color:var(--tide)}
.ob.big{width:72px;height:72px;border-width:3px;border-color:var(--lamp);color:var(--lamp);font-size:10px}
.ob.big i{display:block;width:30px;height:30px;background:center/30px 30px no-repeat;image-rendering:pixelated}
.ob.dry{filter:grayscale(.85) brightness(.6)}

#chat{position:absolute;left:calc(14px + env(safe-area-inset-left,0px));bottom:12px;z-index:7;width:min(430px,calc(50% - 190px));display:flex;flex-direction:column;gap:2px;pointer-events:none;font-size:16px;line-height:1.25;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
#chat .ln{transition:opacity 1.8s}
#chat .ln.old{opacity:0}
#chat .keeper{color:#ffd98a}
#chat .boss{color:#ff9a8a}
#chat .event{color:var(--tide)}
#chat .gold{color:var(--lamp)}

#ctxPanel{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);z-index:10;width:236px;max-width:calc(100% - 32px);padding:10px;background:var(--soot);border:3px solid var(--ink);box-shadow:inset 0 0 0 1px var(--brass),0 6px 18px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:8px;font-family:var(--f-label)}
#bagWrap{display:flex;flex-direction:column;gap:6px}
#ctxTitle{font-size:10px;color:var(--lamp);letter-spacing:.08em;text-transform:uppercase}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.slot{position:relative;aspect-ratio:1;max-width:100%;background-color:var(--night);background-repeat:no-repeat;background-position:center;background-size:36px 36px;image-rendering:pixelated;border:2px solid var(--ink);box-shadow:inset 0 0 0 1px var(--rim);touch-action:none}
.slot.has{cursor:grab}
.slot[data-ph]:not(.has)::before{content:attr(data-ph);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;letter-spacing:.04em;color:var(--rim);text-transform:uppercase}
.slot .tier{position:absolute;right:2px;bottom:0;font-size:9px;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;pointer-events:none}
.slot.r1{box-shadow:inset 0 0 0 2px #6cd060}.slot.r2{box-shadow:inset 0 0 0 2px #5c9cff}.slot.r3{box-shadow:inset 0 0 0 2px #b47cf0}.slot.r4{box-shadow:inset 0 0 0 2px #ff9a3c}.slot.r5{box-shadow:inset 0 0 0 2px #ffe070,0 0 9px rgba(255,224,112,.8)}
.slot.bad::after{content:'';position:absolute;inset:0;background:rgba(226,80,76,.32);pointer-events:none}
.slot.up::after{content:'\25B2';position:absolute;left:2px;top:0;font-family:var(--f-label);font-size:9px;color:#8fe07a;text-shadow:1px 1px 0 #000,-1px -1px 0 #000;pointer-events:none}
.btn{display:block;width:100%;padding:9px 10px;background:var(--slate);border:2px solid var(--ink);box-shadow:inset 0 0 0 1px var(--rim),0 3px 0 var(--ink);font-family:var(--f-label);font-size:12px;color:var(--paper);text-align:center}
.btn:hover{background:var(--rim)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px var(--rim),0 1px 0 var(--ink)}
.btn.gold{background:#7a4a10;box-shadow:inset 0 0 0 1px var(--lamp),0 3px 0 var(--ink);color:#fff2cc}
.btn.gold:hover{background:#96601a}
.btn.on{background:#2f6a34;box-shadow:inset 0 0 0 1px var(--growth),0 3px 0 var(--ink)}

/* ---------- the pack: slides in over the right edge ---------- */
#hud{position:absolute;right:0;top:0;bottom:0;z-index:15;width:min(292px,88%);display:flex;flex-direction:column;gap:11px;padding:12px;padding-right:calc(12px + env(safe-area-inset-right,0px));background:linear-gradient(var(--slate),var(--soot));border-left:3px solid var(--ink);box-shadow:inset 2px 0 0 var(--rim),-10px 0 28px rgba(0,0,0,.6);overflow-y:auto;font-family:var(--f-label);transform:translateX(106%);visibility:hidden;transition:transform .16s ease-out,visibility 0s .16s}
#hud.open{transform:none;visibility:visible;transition:transform .16s ease-out,visibility 0s}
.sh-head{display:flex;align-items:center;gap:8px}
.namerow{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;font-size:12px}
.namerow span{white-space:nowrap}
.namerow #hName{color:var(--lamp);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.namerow #hGlow{color:var(--flame);margin-left:auto;white-space:nowrap}
#hudClose{width:auto;padding:6px 10px;font-size:10px}
.lbl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
#stats{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.st{display:flex;justify-content:space-between;align-items:baseline;padding:4px 6px;background:var(--night);border:1px solid var(--rim);font-family:var(--f-label);font-size:10px;color:var(--dim);cursor:help}
.st b{font-size:12px;font-weight:400;color:var(--paper);font-variant-numeric:tabular-nums}
.st b.plus{color:#8fe07a}
.st b.max{color:var(--lamp)}
.hint{margin:5px 0 0;font-family:var(--f-body);font-size:14px;line-height:1.3;color:var(--dim);min-height:1.3em}

#tip{position:fixed;z-index:40;width:250px;max-width:calc(100vw - 16px);padding:10px 12px;background:#0d0f1e;border:2px solid var(--ink);box-shadow:0 0 0 1px var(--rim),0 8px 24px rgba(0,0,0,.6);font-family:var(--f-body);font-size:15px;pointer-events:none}
#tip.act{pointer-events:auto;width:280px}
#tip .tn{font-family:var(--f-label);font-weight:700;font-size:13px;line-height:1.3}
#tip .tt{font-family:var(--f-label);font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin:2px 0 6px}
#tip .tr{display:flex;justify-content:space-between;gap:12px}
#tip .tr span{color:var(--dim)}
#tip .tb{color:#8fe07a}
#tip .tb.neg{color:#ff7a70}
#tip .tx{margin-top:5px;color:#dcd6ea}
#tip .tf{margin-top:6px;color:var(--dim);font-style:italic}
#tip .tu{margin-top:6px;font-family:var(--f-label);font-size:10px;color:var(--dim)}
#tip .tu.bad{color:#ff7a70}
#tip .tc{margin-top:8px;padding-top:6px;border-top:1px solid var(--rim)}
#tip .tc .tt{margin-bottom:3px}
#tip .tc .tr b{font-weight:400}
#tip .ta{display:flex;gap:6px;margin-top:10px}
#tip .ta .btn{padding:10px 4px;font-size:11px}
#ghost{position:fixed;z-index:50;width:44px;height:44px;background-repeat:no-repeat;background-position:center;background-size:36px 36px;image-rendering:pixelated;pointer-events:none}

/* ---------- touch: bigger buttons, lifted clear of the right thumb ---------- */
#app.touch #oRight{bottom:30%}
#app.touch .ob{width:54px;height:54px}
#app.touch .ob.big{width:78px;height:78px}
#app.touch .ob small,#app.touch .chip kbd{display:none}
#app.touch .chip{padding:10px 2px}
#app.touch #oMap{width:96px}
#app.touch #oMini{width:96px;height:96px}
#app.touch #chat{top:148px;bottom:auto;width:min(56%,330px);font-size:13px}
#app.touch #blaze{width:min(42%,300px)}
@media (max-height:480px){
  #oMap{width:84px}
  #oMini,#app.touch #oMini{width:84px;height:84px}
  #app.touch #oMap{width:84px}
  #app.touch #ctxPanel{width:min(372px,calc(100% - 32px))}
  #app.touch #bag{grid-template-columns:repeat(8,1fr)}
  #app.touch #oRight{bottom:24%}
}
@media (max-height:340px){#oRight,#app.touch #oRight{flex-direction:row;align-items:flex-end;bottom:12px}}
@media (max-width:1000px){#chat{width:calc(100% - 200px);bottom:42px}}
@media (prefers-reduced-motion:reduce){#hud,#hud.open{transition:none}#blaze.full .bar{animation:none}#chat .ln{transition:none}.btn:active{transform:none}.cls img{transition:none;animation:none}.logo h1{animation:none}}

/* ---------- full-screen panels ---------- */
.screen{position:absolute;inset:0;z-index:20;overflow:auto;background:radial-gradient(ellipse at 50% 0,rgba(64,44,20,.5),rgba(7,8,15,.86) 60%);-webkit-overflow-scrolling:touch}
.wrap{max-width:1060px;margin:0 auto;padding-block:26px;padding-inline:16px;display:flex;flex-direction:column;gap:16px}
.logo{text-align:center}
.logo .eyebrow{display:block;font-family:var(--f-label);font-size:12px;letter-spacing:.34em;text-indent:.34em;color:var(--dim);text-transform:uppercase}
.logo h1{margin:2px 0 0;font-family:var(--f-display);font-weight:400;font-size:clamp(52px,12.5vw,128px);line-height:1;color:#ffe9b0;text-shadow:0 0 18px rgba(255,170,60,.75),0 0 60px rgba(255,138,42,.45),3px 4px 0 var(--ink);text-wrap:balance}
.logo p{margin:12px auto 0;max-width:62ch;color:#cfc8dc;font-size:17px}
.acct{font-family:var(--f-label);font-size:12px;color:var(--flame);margin-top:10px;min-height:1.4em}
.panel{background:rgba(18,21,42,.94);border:3px solid var(--ink);box-shadow:inset 0 0 0 1px var(--rim);padding:16px;min-width:0}
.panel h2{margin:0 0 12px;font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
/* the roster: eight figures in the dark; only the one you choose is lit */
#classGrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.cls{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 2px 9px;background:transparent;border:0;border-bottom:3px solid transparent;font-family:var(--f-label);font-size:10px;color:var(--dim);min-width:0;overflow-wrap:anywhere}
.cls img{width:72px;height:72px;max-width:100%;image-rendering:pixelated;filter:brightness(.38) saturate(.35);transition:filter .15s;animation:kindle .5s both;animation-delay:calc(.35s + var(--i,0)*.11s)}
@keyframes kindle{from{filter:brightness(.05) saturate(.1)}60%{filter:brightness(.9) saturate(1)}to{filter:brightness(.38) saturate(.35)}}
.logo h1{animation:lamp 6s ease-in-out infinite}
@keyframes lamp{0%,100%{text-shadow:0 0 18px rgba(255,170,60,.75),0 0 60px rgba(255,138,42,.45),3px 4px 0 var(--ink)}50%{text-shadow:0 0 26px rgba(255,190,90,.95),0 0 80px rgba(255,150,50,.6),3px 4px 0 var(--ink)}}
.cls:hover{color:var(--paper)}
.cls:hover img{filter:brightness(.8) saturate(.8)}
.cls.on{color:var(--lamp);border-bottom-color:var(--lamp);background:radial-gradient(ellipse at 50% 62%,rgba(255,196,77,.26),transparent 68%)}
.cls.on img{filter:drop-shadow(0 0 10px rgba(255,196,77,.6))}
.grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.ci-head{display:flex;gap:14px;align-items:center}
.ci-head img{width:108px;height:108px;image-rendering:pixelated;flex:none;filter:drop-shadow(0 0 14px rgba(255,196,77,.45))}
.ci-head h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:44px;color:#ffe9b0;line-height:1}
.ci-head p{margin:6px 0 0;font-family:var(--f-label);font-size:11px;color:var(--dim)}
#ciBlurb{margin:12px 0;font-size:17px;max-width:62ch}
#ciStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;margin-bottom:14px}
.cs{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:6px;font-family:var(--f-label);font-size:10px;color:var(--dim)}
.cs i{display:block;height:8px;background:var(--ink);position:relative}
.cs i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--c,var(--growth))}
.actions{display:flex;flex-direction:column;gap:10px}
.note{margin:10px 0 0;font-size:15px;color:var(--dim)}
.testbox{margin-top:16px;padding-top:14px;border-top:1px solid var(--rim);display:flex;flex-direction:column;gap:10px}
.testbox .note{margin:0}
.keys{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:16px}
.keys dt{font-family:var(--f-label);font-size:11px;color:var(--lamp);white-space:nowrap;align-self:center}
.keys dd{margin:0;color:#dcd6ea}
#ashes{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:16px}
#ashes li{display:flex;gap:10px;align-items:center}
#ashes img{width:36px;height:36px;image-rendering:pixelated;flex:none}
#ashes .who2{flex:1;min-width:0}
#ashes .who2 small{display:block;color:var(--dim);font-size:13px}
#ashes .f{font-family:var(--f-label);font-size:12px;color:var(--flame);white-space:nowrap}
.empty{color:var(--dim);font-size:16px}
.colophon{margin:0;text-align:center;font-size:14px;color:var(--dim)}
.center{min-height:100%;display:flex;align-items:center;justify-content:center;padding-block:24px;padding-inline:16px}
.card{width:min(480px,100%);text-align:center}
.card h2{font-family:var(--f-display);font-weight:400;font-size:40px;letter-spacing:0;text-transform:none;color:#ffe9b0;margin-bottom:10px;line-height:1.05;text-wrap:balance}
.card h2.out{color:#b9b4c8}
.card .tomb{width:108px;height:108px;image-rendering:pixelated;opacity:.9}
.card p{margin:8px 0}
.rows{margin:14px 0;display:flex;flex-direction:column;gap:4px;font-size:16px;text-align:left}
.rows div{display:flex;justify-content:space-between;gap:12px}
.rows span{color:var(--dim)}
.rows .tot{margin-top:6px;padding-top:8px;border-top:1px solid var(--rim);font-family:var(--f-label);color:var(--lamp)}
.rows .tot span{color:var(--lamp)}
.opt{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;align-items:center;margin:14px 0;font-family:var(--f-label);font-size:11px;text-align:left}
.opt .rng{grid-column:1/-1;display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:center}
.opt input[type=range]{width:100%;accent-color:var(--lamp)}
.opt label.ck{display:flex;align-items:center;gap:8px}
.opt input[type=checkbox]{width:18px;height:18px;accent-color:var(--lamp);flex:none}
.sub{margin:14px 0;padding-top:12px;border-top:1px solid var(--rim);text-align:left}
.sub h3,.sub summary{margin:10px 0 6px;font-family:var(--f-label);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lamp)}
.sub summary{cursor:pointer;margin-top:0}
.sub .note{margin:8px 0}
textarea{width:100%;margin:6px 0;padding:8px;background:var(--night);color:var(--paper);border:2px solid var(--ink);box-shadow:inset 0 0 0 1px var(--rim);font:12px/1.4 'Courier New',monospace;resize:vertical;-webkit-user-select:text;user-select:text}
#app{--hs:1}
#hudo,#ctxPanel,#chat,#hud{zoom:var(--hs)}
.tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:5px}
.tg .btn{font-size:9px;padding:7px 3px;box-shadow:inset 0 0 0 1px var(--rim),0 2px 0 var(--ink)}
@media (max-width:900px){#classGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .cls{font-size:8px}
  .cls img{width:54px;height:54px}
  .ci-head img{width:90px;height:90px}
  .ci-head h3{font-size:36px}
}

/* ---------- the studio look: the colours, rounded type and gold buttons of quietgiantgames.fun ---------- */
.mt6{margin-top:6px}
.dim{color:var(--dim)}
.screen{background:radial-gradient(1200px 500px at 70% -10%,rgba(44,63,122,.92) 0%,transparent 60%),linear-gradient(rgba(22,36,74,.94),rgba(13,22,48,.97))}
.logo{padding-top:34px}
.logo h1{font-weight:800;font-size:clamp(40px,8vw,76px);letter-spacing:-1px;color:var(--lamp);text-shadow:none;animation:none}
.logo .eyebrow{font-size:13px;letter-spacing:.14em;text-indent:0;color:var(--dim)}
.logo p{color:var(--dim)}
.panel{background:var(--slate);border:1px solid var(--qg-line);border-radius:18px;box-shadow:none}
.panel h2{font-size:14px;letter-spacing:.04em;color:var(--lamp)}
.btn{border:2px solid var(--qg-line);border-radius:999px;background:rgba(255,255,255,.06);box-shadow:none;font-size:14px;font-weight:700}
.btn:hover{background:rgba(255,255,255,.14);border-color:var(--lamp)}
.btn:active{box-shadow:none}
.btn.gold{border:0;padding:12px 18px;background:linear-gradient(var(--qg-gold),var(--qg-orange));color:#3a1a00;box-shadow:0 6px 20px rgba(242,154,58,.35);font-weight:800;font-size:16px}
.btn.gold:hover{background:linear-gradient(var(--qg-gold),var(--qg-orange));color:#3a1a00}
.btn.gold:active{box-shadow:0 3px 10px rgba(242,154,58,.35)}
.btn.on{background:rgba(98,214,138,.2);border-color:#9df0b8;box-shadow:none}
.chip{border:1px solid var(--qg-line);border-radius:999px;background:rgba(13,22,48,.82);box-shadow:none;font-size:11px;font-weight:700}
.chip:hover{background:var(--slate)}
.cls{font-size:12px;font-weight:700;border-radius:12px 12px 0 0}
.cls.on{background:radial-gradient(ellipse at 50% 62%,rgba(255,194,74,.24),transparent 68%)}
.ci-head h3{font-weight:800;font-size:34px;color:var(--lamp)}
.ci-head p{font-size:13px}
.cs{font-size:12px}
.cs i{border-radius:999px;overflow:hidden}
.keys dt{font-size:13px;font-weight:700}
.colophon{color:var(--dim)}
.who{font-size:13px;font-weight:700}
.bar{border-radius:999px;overflow:hidden;box-shadow:0 0 0 1px var(--qg-line)}
.bar em{font-size:10px;font-weight:700;letter-spacing:.02em}
.bar b{font-size:11px;font-weight:700}
.bar.dawn b,.bar.blaze b{font-size:11px;letter-spacing:0}
.ob{border-color:rgba(238,242,255,.7);background:rgba(13,22,48,.78);font-size:11px;font-weight:700}
.ob b{font-size:14px;font-weight:700}
.ob small{font-size:10px}
#oMini{box-shadow:0 0 0 2px var(--lamp),0 0 20px rgba(255,194,74,.2)}
#ctxPanel{background:var(--slate);border:1px solid rgba(255,194,74,.5);border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
#ctxTitle{font-size:12px;letter-spacing:.02em;text-transform:none}
.slot{border:1px solid var(--qg-line);border-radius:10px;box-shadow:none}
.slot.has{cursor:pointer}
.slot[data-ph]:not(.has)::before{font-size:10px;letter-spacing:0;color:var(--dim)}
#hud{background:linear-gradient(var(--slate),var(--soot));border-left:1px solid var(--qg-line);box-shadow:-10px 0 28px rgba(0,0,0,.5)}
.namerow,.st,.st b{font-size:13px}
.lbl{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--lamp)}
.st{border-color:var(--qg-line);border-radius:10px}
#tip{background:var(--slate);border:1px solid rgba(255,194,74,.5);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#tip .tt,#tip .tu{font-size:12px;letter-spacing:.02em;text-transform:none}
.opt{font-size:13px}
.note{color:var(--dim)}
textarea{border:1px solid var(--qg-line);border-radius:10px;box-shadow:none}
.card h2{font-weight:800;font-size:32px;color:var(--lamp)}
.card h2.out{color:var(--dim)}
.sub h3,.sub summary{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:none}
.tg .btn{font-size:12px;padding:8px 4px;box-shadow:none}

/* the simple version: the menu is one card */
.grid{grid-template-columns:minmax(0,1fr);max-width:620px;margin:0 auto;width:100%}
.ci-head p{font-family:var(--f-body,inherit);font-size:15px;color:var(--dim)}
.ci-head img{width:84px;height:84px}
@media (max-height:480px){.logo{padding-top:6px}.logo .eyebrow,.logo p{display:none}.logo h1{font-size:30px}#classGrid{grid-template-columns:repeat(8,minmax(0,1fr))}.panel h2{display:none}.ci-head img{width:56px;height:56px}.ci-head h3{font-size:22px}.ci-head p{font-size:13px;margin-top:2px}.colophon,.testbox{display:none}#menu .wrap{gap:8px}}
#menu .wrap{padding-bottom:44px}