/* ArcoMage web client - dark fantasy. The painted frame art (no_torches.jpg) is
   the FULL-BLEED background, stretched 100% 100% so its designed boxes land at
   fixed % positions; only the hex board + 3D spellbook + seated numbers overlay
   it. ASCII only. */
:root{
  --ink:#e9e0c8; --gold:#caa14a; --stone:#2a2620; --stone2:#1c1916;
  --line:#5a4a2c; --good:#8fd17a; --bad:#e07a6a; --mana:#5aa0ff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--ink);
  background:#0c0a08;overflow:hidden}
/* full-bleed: stateful SCENE on the left, panel_right + panel HUD docked right.
   --pw = panel width preserving panel.png aspect (379/941) at full viewport height. */
:root{--pw:40.3vh}
#app{position:fixed;inset:0;background:#0c0a08}
/* scene layer swaps by build state (client toggles body.scene-*) */
/* Scene + panel.png are two halves of ONE 16:9 board (1294+379 = 1673 = 16:9), meant to
   tile at the SAME scale. So the scene fits HEIGHT (auto 100%) like the vh-sized panels -
   NOT `cover` (which scaled it 1.48x, cropped the gargoyles, and misaligned the board frame
   against panel.png at 1920x1080). Height-fit + left anchor => scene(1485) + panel(435) = 1920. */
#scene{display:block;position:fixed;inset:0;z-index:0;
  background:url(/assets/scene_moat.png) left center/auto 100% no-repeat}
body.scene-dirt   #scene{background-image:url(/assets/scene_dirt.png)}
body.scene-nomoat #scene{background-image:url(/assets/scene_nomoat.png)}
body.scene-moat   #scene{background-image:url(/assets/scene_moat.png)}
#pright{position:fixed;top:0;right:var(--pw);width:var(--pw);height:100vh;z-index:1;
  background:url(/assets/panel_right.png) center/100% 100% no-repeat;pointer-events:none}
#panel{position:fixed;top:0;right:0;width:var(--pw);height:100vh;z-index:2;
  background:url(/assets/panel.png) center/100% 100% no-repeat;pointer-events:none}
/* panel_right is a mobile-only decorative panel - hide it on desktop (per Trent) */
#pright{display:none!important}

/* ===== hex board: open play area left of the panels ===== */
#stage{position:absolute;left:20%;top:11%;width:42%;height:38%;overflow:visible;z-index:3}
#board{position:absolute;inset:0}
.hexp{fill:url(#hexg);stroke:rgba(214,245,200,.85);stroke-width:1.5;
  stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.crt{font-family:"Trebuchet MS","Segoe UI",sans-serif;font-weight:800;
  paint-order:stroke;stroke:#000;stroke-width:2px;}
.crt.mine{fill:#bfe3ff} .crt.opp{fill:#ffc7b8}
.crtpiece{pointer-events:none}   /* click target is the crt-hit circle drawn on top */
.banner{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:48px;font-weight:900;color:var(--gold);background:rgba(0,0,0,.6);text-shadow:0 3px 10px #000;z-index:20}
.banner[hidden]{display:none}
#bookWrap{bottom:-1%}

/* ===== YOUR readouts seated on panel.png (right edge), z above the panel art ===== */
/* name over the top header parchment band (native y25-144 of 941) */
/* in-panel name removed: the 6 parchment slots are all STATS (comp = no name header;
   the account name still shows top-right). */
#youName{display:none}
/* resources -> the SIX parchment slots (measured native y13-511 of 941 = ~1.4-54.3vh);
   6 equal rows so each bar centers between the divider lines. First row nudged to seat
   in slot 1 (which is a touch taller). icon/label left, bar, value right. */
/* vitals aligned to panel.png's 6 parchment slots: native Y 27..507 of 941 -> top 2.9vh,
   height 51vh (each of the 6 flex rows = 8.5vh = ~80px slot). Measured, not eyeballed. */
#youRes{position:fixed;right:0;width:var(--pw);top:38px;height:51vh;z-index:4;display:flex;flex-direction:column;transform:translateX(10px)}
#youRes .rv{flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 8.5% 0 5%}
#youRes .rv .ic{width:4.9vh;height:4.9vh;flex:0 0 4.9vh;display:flex;align-items:center;justify-content:center}
#youRes .rv .ic svg{width:100%;height:100%;fill:none;stroke:#6b4a1e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#youRes .rv .ic img{width:100%;height:100%;object-fit:contain}
#youRes .rv .vv{font-weight:900;color:#2c2008;font-size:4.2vh;text-shadow:0 1px 0 #efe0b8}
/* SVG placeholder vital bars (real matching art dropped in later) */
#youRes .rv.vbar{justify-content:flex-start;gap:1.5%;padding:0 4.5% 0 1%}
/* stat medallion (Tower/Wall/Moat/HP/Mana/Time) - fixed slot at the left, slightly larger
   than the row so it overlaps the dividers like the comp. transparent, drops onto parchment. */
#youRes .vmed{flex:0 0 auto;height:7.6vh;width:auto;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
/* Time medallion = animated draining hourglass <video>, square slot; still poster behind. */
#youRes .vmed-glass{position:relative;flex:0 0 auto;height:7.6vh;width:7.6vh;display:inline-block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
#youRes .vmed-glass .vmed-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#youRes .vmed-glass .time-glass{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
#youRes .vlab{flex:0 0 23%;font:700 1.55vh Georgia,serif;color:#3a2a12;text-transform:uppercase;letter-spacing:.3px;text-shadow:0 1px 0 #e9d9b0}
/* drawn stat bars: `empty` art is the track, `<bar>_full` overlaid + clip-path drained */
#youRes .vtrack{flex:1;height:3.1vh;position:relative;background:url(/assets/bars/empty.png) no-repeat center/100% 100%;overflow:visible}
/* fill is now a real <img> (not a bg-div): left/top+explicit size instead of inset:0, so it
   never stretches when nudged. object-fit:fill matches the empty-track background-size. */
#youRes .vfill{position:absolute;left:0;top:0;width:100%;height:100%;display:block;object-fit:fill;transition:clip-path .3s ease}
#youRes .rv.vbar .vv{flex:0 0 3.6ch;width:3.6ch;text-align:right;font-weight:900;color:#2c2008;font-size:2.6vh}
#youRes .rv.flash .vv{animation:flashv .6s ease}
@keyframes flashv{0%{color:#8a2c12;transform:scale(1.25)}100%{color:#2c2008;transform:scale(1)}}
/* time vital = the turn clock: no number, so its bar spans the numeric column too;
   turn low (<=10s) glows red and pulses so you feel the pressure. */
#youRes .rv.vbar-time{padding-right:1%}
#youRes .vfill.lowtime{filter:saturate(1.7) hue-rotate(-28deg) drop-shadow(0 0 3px #ff5a3c);animation:lowtimepulse 1s ease-in-out infinite}
@keyframes lowtimepulse{50%{opacity:.62}}
/* worker numbers -> the bottom 2x5 building-medallion grid (native y512-815) */
#youWork{position:fixed;right:0;width:var(--pw);top:54.4vh;height:32.2vh;z-index:4;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,1fr);transform:translateX(10px)}
/* icon in a FIXED slot (flex:0 0) hugging the cell's left inset, label fills the rest -
   so every icon lines up in a column instead of drifting with the label width. */
#youWork .wk{display:flex;align-items:center;justify-content:flex-start;gap:.9vh;color:#e8c878;padding:0 6%}
#youWork .wk img{width:5.1vh;height:5.1vh;flex:0 0 5.1vh;object-fit:contain;filter:drop-shadow(0 1px 2px #000)}
#youWork .wk .b{flex:1;display:flex;flex-direction:column;align-items:flex-start;line-height:1}
#youWork .wk .k{font-size:1.18vh;text-transform:uppercase;letter-spacing:.4px;opacity:.82}
#youWork .wk .v{font-size:2.5vh;font-weight:900;color:#e9d9a8;text-shadow:0 1px 2px #000}
#youWork .wk .k{text-align:left;line-height:1.04}
#youWork .wk.act{cursor:pointer}
#youWork .wk.act:hover{filter:brightness(1.18)}
/* Lightboxes (assign-workers + settings) */
#wkModal,#setModal{position:fixed;inset:0;z-index:50;display:none}
.wkveil{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.wkcard{background:linear-gradient(#2a2016,#1c150d);border:2px solid #8a734a;border-radius:12px;padding:18px 22px;min-width:330px;box-shadow:0 10px 40px rgba(0,0,0,.6);color:#eadfc4;font-family:Georgia,serif}
.wkcard .wkh{font-size:22px;font-weight:900;font-variant:small-caps;color:#f0d99a;margin-bottom:4px;text-align:center}
.wkcard .wksub{font-size:12px;opacity:.85;margin-bottom:14px;text-align:center}
.wkrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(120,95,55,.4)}
.wkrow .wkn{flex:1;font-size:14px}
.wkrow .wkc{min-width:2ch;text-align:center;font-weight:900;font-size:18px;color:#f0d99a}
.wkbtn{width:30px;height:30px;border-radius:6px;border:1px solid #8a734a;background:#3a2c1a;color:#f0d99a;font-size:18px;font-weight:900;cursor:pointer;line-height:1;box-sizing:border-box}
.wkbtn:hover:not([disabled]){background:#4d3a22}
.wkbtn[disabled]{opacity:.3;cursor:default}
.setlink{width:auto;padding:0 14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.wkclose{margin-top:16px;width:100%;padding:10px;border-radius:8px;border:1px solid #8a734a;background:#4d3a22;color:#f0d99a;font-weight:900;font-size:15px;cursor:pointer;font-family:Georgia,serif}
.wkclose:hover{background:#5e4829}
/* Settings modal controls: theme select, volume slider, mute, avatar picker */
.setsel{background:#3a2c1a;color:#f0d99a;border:1px solid #8a734a;border-radius:6px;padding:5px 8px;font-family:Georgia,serif;font-size:14px;cursor:pointer}
.setrange{flex:1;accent-color:#c8a24a;cursor:pointer}
.setval{min-width:3ch;text-align:right;font-weight:900;color:#f0d99a}
.setchk{width:20px;height:20px;accent-color:#c8a24a;cursor:pointer}
.wizgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px;width:100%}
.wizopt{background:#241a10;border:2px solid #5a4830;border-radius:8px;padding:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;overflow:hidden}
.wizopt:hover{border-color:#8a734a}
.wizopt.sel{border-color:#f0d99a;box-shadow:0 0 8px rgba(240,217,154,.5)}
.wizopt img{width:100%;height:56px;object-fit:contain}
.wizopt .wizn{font-size:10px;opacity:.8;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ===== rival: slim strip across the very top-left ===== */
/* rival banner: ornate wood/gold bar to match the player panel (was flat text) */
#oppPanel{position:absolute;left:1%;top:.8%;z-index:8;display:flex;gap:13px;align-items:center;
  background:linear-gradient(#2a2016,#180f07);border:1px solid #8a734a;border-radius:9px;
  padding:5px 15px 6px;font-size:13px;box-shadow:0 3px 11px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,220,150,.13)}
#oppPanel .who{font-weight:900;color:var(--gold);margin-right:5px;letter-spacing:.5px;
  font-variant:small-caps;font-size:15px;text-shadow:0 1px 2px #000}
#oppPanel .stat{display:flex;flex-direction:column;align-items:center;line-height:1.05}
#oppPanel .stat .k{font-size:8px;opacity:.7;text-transform:uppercase;letter-spacing:.4px;color:#c9b088}
#oppPanel .stat .v{font-weight:800;color:#f0e2c0;font-size:14px}
#oppPanel .stat.flash .v{color:var(--good)}
/* turn-timer clock glyph */
#timer{display:flex;align-items:center;gap:4px}
#timer .tclock{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#youPanel{display:none}  /* desktop: replaced by youName/youRes/youWork (mobile re-shows) */

/* ===== controls: small bar, top-center over the wall ===== */
#controls{position:absolute;top:.6%;left:50%;transform:translateX(-50%);z-index:8;
  display:flex;align-items:center;gap:10px;background:rgba(10,8,5,.5);border:1px solid var(--line);
  border-radius:8px;padding:4px 12px}
.btn{background:var(--gold);color:#241c0c;border:none;border-radius:8px;padding:7px 15px;font-weight:800;cursor:pointer}
.btn.ghost{background:#241f18;color:var(--ink);border:1px solid var(--line)}
.turninfo{opacity:.9;font-size:13px;color:var(--ink)}

/* ===== 3D spellbook: floats bottom-center over the lower panel ===== */
#you{position:static}
#bookWrap{position:absolute;left:40%;bottom:1.5%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;z-index:9;
  width:min(52%,760px);height:min(66vh,600px);
  user-select:none;-webkit-user-select:none;-moz-user-select:none}   /* drag-to-flip must not select card text */
.candle{width:40px;align-self:center;height:78%;flex:0 0 40px;
  background:url(/assets/candles.png) center/contain no-repeat;opacity:.9;pointer-events:none;
  animation:flicker 2.4s ease-in-out infinite}
.candle-right{transform:scaleX(-1);animation-delay:-1.1s}
@keyframes flicker{0%,100%{opacity:.82;filter:brightness(1)}45%{opacity:.95;filter:brightness(1.12)}70%{opacity:.78;filter:brightness(.95)}}
/* circle rail: gold-ringed dark-red medallions (I..VIII) down the book's left edge.
   Click = jump to that circle. Empty circles are dimmed + inert. Active circle glows. */
.circle-rail{position:absolute;left:1.5%;top:50%;transform:translateY(-50%);z-index:11;
  display:flex;flex-direction:column;justify-content:center;gap:min(1.1vh,9px);
  height:88%;pointer-events:auto}
.rail-btn{width:min(4.6vh,40px);height:min(4.6vh,40px);flex:0 0 auto;border-radius:50%;
  border:2.5px solid #caa14a;background:radial-gradient(circle at 38% 30%,#8a1636,#3a0713 72%);
  color:#f3dd97;font-family:"Cinzel",Georgia,serif;font-weight:700;font-size:min(2vh,16px);
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.6),inset 0 1px 2px rgba(255,225,150,.4);
  text-shadow:0 1px 1px rgba(0,0,0,.7);transition:transform .12s,filter .12s,box-shadow .12s}
.rail-btn:hover{transform:scale(1.1);filter:brightness(1.18)}
.rail-btn.active{border-color:#ffe4a0;filter:brightness(1.22);
  box-shadow:0 0 11px #e6b84b,inset 0 1px 3px rgba(255,235,160,.55)}
.rail-btn.disabled{opacity:.32;filter:grayscale(.55);cursor:default}
.spellbook{position:relative;aspect-ratio:1/1;height:100%;max-width:calc(100% - 96px);
  background:url(/assets/spellbook_no_pages.png) center/100% 100% no-repeat;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.6))}
.page{position:absolute;top:16.7%;height:60.8%;overflow:hidden;cursor:pointer}
.page-left{left:5.2%;width:43.8%}
.page-right{left:50.9%;width:41.9%}
.flip-page{position:absolute;top:16.7%;height:60.8%;left:50.9%;width:41.9%;
  transform-style:preserve-3d;transform-origin:left center;transition:none;pointer-events:none;display:none;z-index:6}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.flip-back{transform:rotateY(180deg)}
/* parchment card - matches the KorGE desktop spellbook page (real parchment
   texture + gold-framed art well + small-caps plaques + flavor). */
.card-face{width:100%;height:100%;display:flex;flex-direction:column;padding:9% 9% 7%;
  background:url('/assets/book/parchment.png') center/100% 100% no-repeat,linear-gradient(160deg,#e7d3a4,#cdb079);
  background-blend-mode:multiply;color:#2a1d0c;border-radius:3px;
  font-family:Georgia,"Times New Roman",serif}
.cf-title{display:flex;align-items:baseline;gap:3px;font-weight:800;line-height:1;
  border-bottom:1px solid rgba(120,80,30,.4);padding-bottom:3%;margin-bottom:3%}
.cf-drop{font-size:2.3em;color:#7a1f0c;text-shadow:0 1px 0 rgba(255,240,200,.5)}
.cf-rest{font-size:1.12em;color:#45180a;letter-spacing:.02em;padding-top:.15em;
  font-variant:small-caps;font-weight:700}
.cf-meta{display:flex;gap:5px;margin:0 0 4%;font-size:.6em;color:#5a3d1a;flex-wrap:wrap;align-items:center}
.cf-chip{border:1px solid #9a7038;border-radius:2px;padding:1px 6px;background:rgba(255,248,225,.5);
  text-transform:uppercase;letter-spacing:.04em;box-shadow:inset 0 0 4px rgba(160,120,50,.25)}
.cf-cost{margin-left:auto;background:#2a1c10;color:#e8c65a;border-color:#1a1108;font-weight:700}
.cf-art{flex:1;min-height:0;border-radius:2px;margin-bottom:4%;overflow:hidden;position:relative;
  border:3px solid transparent;border-image:linear-gradient(150deg,#e0bd63,#8a6420 55%,#e0bd63) 1;
  background:rgba(70,45,18,.16);box-shadow:inset 0 0 20px rgba(90,55,20,.55),0 1px 2px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center}
.cf-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cf-art-cap{font-size:.62em;color:#6a4a22;text-align:center;padding:8%;font-style:italic}
.cf-rules{font-size:.66em;line-height:1.32;color:#241708;overflow:hidden;
  border-top:1px solid rgba(120,80,30,.3);padding-top:3%}
.cf-flavor{font-size:.6em;font-style:italic;color:#6a3a18;margin-top:3%;overflow:hidden;text-align:center}
.book-hint{position:absolute;bottom:-4px;left:0;right:0;text-align:center;font-size:.66rem;color:#e9dcc0;
  letter-spacing:.03em;pointer-events:none;text-shadow:0 1px 4px #000}

/* mobile card strip (hidden on desktop) */
#handWrap{display:none;align-items:center;gap:6px;padding:8px 8px 4px}
#hand{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;flex:1;padding-bottom:4px}
.card{position:relative;scroll-snap-align:center;flex:0 0 auto;width:120px;min-height:150px;cursor:pointer;
  background:linear-gradient(#efe4c4,#d8c79a);color:#241c0c;border:2px solid #8a6d2e;border-radius:10px;
  padding:8px;display:flex;flex-direction:column;gap:4px;transition:transform .12s, box-shadow .12s}
.card:hover{transform:translateY(-6px);box-shadow:0 10px 20px rgba(0,0,0,.5)}
.card .nm{font-weight:800;font-size:13px;line-height:1.1}
.card .cost{align-self:flex-end;background:#3a2c5a;color:#cbb6ff;border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;margin-top:-2px}
.card .ty{font-size:10px;text-transform:uppercase;letter-spacing:.4px;opacity:.7}
.card .rules{font-size:10.5px;line-height:1.25;flex:1;overflow:hidden}
.navbtn{display:none;background:#241f18;color:var(--gold);border:1px solid var(--line);border-radius:8px;
  width:34px;height:60px;font-size:22px;cursor:pointer;flex:0 0 auto}

#logbox{position:absolute;left:1%;bottom:1%;width:210px;max-height:26vh;overflow:auto;
  background:rgba(8,7,5,.72);border:1px solid var(--line);border-radius:8px;padding:8px;font-size:11px;z-index:7}
#log div{padding:2px 0;border-bottom:1px solid rgba(90,74,44,.3)}

/* ---- CHAT box: sits in the empty right half of the center wood panel ---- */
#chatbox{position:absolute;left:64.5%;width:20.5%;top:56%;height:40%;z-index:8;
  display:flex;flex-direction:column;box-sizing:border-box;
  background:rgba(20,13,6,.66);border:1px solid rgba(170,128,64,.65);border-radius:9px;
  box-shadow:0 4px 16px rgba(0,0,0,.55);padding:7px 8px}
.chat-title{color:#e9d27a;font:800 12px Georgia,serif;letter-spacing:2px;text-align:center;
  padding:1px 0 6px;border-bottom:1px solid rgba(170,128,64,.4)}
#chatlog{flex:1;overflow-y:auto;padding:6px 3px;font-size:12.5px;line-height:1.36;color:#e8dcc0;scrollbar-width:thin}
#chatlog .cm{margin:3px 0;word-wrap:break-word;overflow-wrap:anywhere}
#chatlog .cm .who{font-weight:800;margin-right:4px}
#chatlog .cm.you .who{color:#7fd0ff}
#chatlog .cm.gpt .who{color:#ff9a6a}
#chatlog .cm.sys{color:#9a8f78;font-style:italic;font-size:11.5px}
#chatform{display:flex;gap:5px;padding-top:6px;border-top:1px solid rgba(170,128,64,.4)}
#chatinput{flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid rgba(170,128,64,.5);
  border-radius:6px;color:#f0e6cf;padding:6px 8px;font-size:12.5px;outline:none}
#chatinput:focus{border-color:#e9d27a}
#chatinput::placeholder{color:#8a7d63}
#chatsend{background:#5a3f1e;color:#e9d27a;border:1px solid #8a6a30;border-radius:6px;
  padding:6px 10px;font-weight:700;cursor:pointer;font-size:12px;white-space:nowrap}
#chatsend:hover{background:#6d4d26}
.toast{position:fixed;left:50%;bottom:46%;transform:translateX(-50%);background:#3a1c18;color:#ffd0c8;
  border:1px solid #7a3a2a;border-radius:8px;padding:8px 14px;z-index:21}

/* turn-timer pill */
#timer{position:absolute;top:.6%;right:18%;z-index:8;background:rgba(10,8,5,.6);border:1px solid var(--line);
  border-radius:8px;padding:4px 10px;font-weight:800;color:var(--gold);min-width:48px;text-align:center}
#timer.low{color:#ff8a6a;border-color:#7a3a2a;animation:pulse .8s infinite alternate}
@keyframes pulse{from{opacity:.7}to{opacity:1}}

/* mobile-only sections hidden on desktop */
#mobIcons,#mobScene{display:none}
/* ===== mobile: 4 stacked full-width sections (spellbook / board / icon panel /
   scene), each ~a screen, page scrolls. Flex `order` puts the spellbook first.
   Desktop frame is untouched; sections 3-4 are pure CSS backgrounds. ===== */
@media (max-width:640px){
  html,body{height:auto!important;min-height:100%;overflow:visible!important;overflow-x:hidden!important;background:#0c0a08}
  #app{position:static!important;inset:auto!important;width:100%;max-width:100%;height:auto!important;
    display:flex!important;flex-direction:column;overflow-x:hidden;background:#0c0a08}
  #scene,#pright,#panel,#youName,#youRes,#youWork,#bookWrap,#banner,#logbox,#timer,#chatbox{display:none!important}
  #acct{position:fixed!important;top:6px;right:10px;z-index:40}

  /* SECTION 1: SPELLBOOK -> #you over the mobile_center leather */
  #you{order:1;position:relative!important;display:block!important;width:100%;max-width:100%;margin:0;
    overflow:hidden;aspect-ratio:378/941;background:url(/assets/mobile_center.png) top center/100% 100% no-repeat}
  #youPanel{display:flex!important;flex-wrap:wrap;justify-content:center;gap:5px;
    position:absolute;left:3%;right:3%;top:5.2%;z-index:4}
  #youPanel .stat{display:flex;align-items:center;gap:3px;background:#1a1206d9;border:1px solid #7a5a2a;
    border-radius:6px;padding:2px 5px}
  #youPanel .stat .k{opacity:.7;text-transform:uppercase;font-size:8px}
  #youPanel .stat .v{font-weight:800;font-size:12px;color:var(--gold)}
  #handWrap{display:flex!important;position:absolute;left:8%;right:8%;top:11%;bottom:7%;align-items:stretch;padding:0;gap:0}
  #hand{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;flex:1;min-width:0;gap:0;align-items:stretch;scrollbar-width:none}
  #hand::-webkit-scrollbar{display:none}
  #hand .card{scroll-snap-align:center;flex:0 0 100%;width:100%;min-height:0;margin:0;
    background:linear-gradient(#efe4c4,#d8c79a);border:3px solid #8a6d2e;border-radius:14px;
    box-shadow:0 10px 26px #000b;padding:18px;display:flex;flex-direction:column;gap:9px}
  #hand .card .nm{font-size:26px}#hand .card .rules{font-size:16px}#hand .card .ty{font-size:13px}
  #hand .card .cost{width:34px;height:34px;font-size:17px}
  .navbtn{display:flex!important;position:absolute;top:50%;transform:translateY(-50%);z-index:6;
    width:40px;height:40px;border-radius:50%;background:rgba(20,14,6,.62);border:1px solid #b98a3a;
    color:var(--gold);font-size:26px;line-height:1;padding-bottom:3px;
    align-items:center;justify-content:center;text-shadow:0 2px 4px #000;box-shadow:0 2px 6px #000a}
  #handPrev{left:1%}#handNext{right:1%}

  /* SECTION 2: BOARD */
  #oppPanel{order:2;position:static!important;display:flex!important;flex-wrap:wrap;justify-content:center;
    gap:6px;width:100%;margin:0;border-radius:0;border-width:1px 0;padding:6px 8px;background:#12100c}
  #controls{order:3;position:static!important;left:auto!important;top:auto!important;transform:none!important;
    display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px;background:#16130f}
  #controls .turninfo{flex-basis:100%;text-align:center}
  #stage{order:4;position:static!important;left:auto!important;top:auto!important;width:100%!important;
    height:60vw!important;min-height:230px;margin:0;overflow:visible;background:#16130f;padding-bottom:12px;
    border-bottom:2px solid #5a4a2c}
  #board{position:relative!important;inset:auto!important;width:100%;height:100%}

  /* SECTION 3: ICON PANEL (static designed panel) */
  #mobIcons{order:5;display:block;width:100%;aspect-ratio:379/941;
    background:url(/assets/panel_complete.png) top center/100% 100% no-repeat}
  /* SECTION 4: SCENE */
  #mobScene{order:6;display:block;width:100%;aspect-ratio:608/941;
    background:url(/assets/mobile.png) top center/100% 100% no-repeat}
}


/* account chip (top-right) */
#acct{position:fixed;top:6px;right:12px;z-index:40;display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--ink);font-family:"Trebuchet MS","Segoe UI",sans-serif}
#acct .acct-name{font-weight:800;color:var(--gold);max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px #000}
#acct .acct-btn{background:transparent;border-style:solid;border-width:11px 22px;
  border-image:url("/assets/button.png") 16 34 fill stretch;color:#2a1a0a;font-size:14px;
  padding:3px 11px;text-decoration:none;font-weight:800;white-space:nowrap;line-height:1}
#acct .acct-btn:hover{filter:brightness(1.07);color:#2a1a0a}

/* ---- targeting highlights (player-driven Target.ask* picks) ---- */
.targeting #board polygon{cursor:pointer}
#board polygon.legal-hex{stroke:#ffd84a;stroke-width:2.4;
  filter:drop-shadow(0 0 4px #ffce3a);animation:legalPulse 1s ease-in-out infinite}
/* reachable hexes for a transformed (moving) wizard - teal "walk here", distinct from target-yellow */
#board polygon.move-hex{stroke:#5fe0a0;stroke-width:2.2;cursor:pointer;
  filter:drop-shadow(0 0 4px #3fd08a);animation:legalPulse 1s ease-in-out infinite}
/* tactical move/attack preview: path paint (green under max, orange at max, red beyond),
   the enemy strike target, and the selected creature's tile. */
#board polygon.mv-green {fill:rgba(70,220,130,.42);stroke:#3fd08a;stroke-width:2.2}
#board polygon.mv-orange{fill:rgba(255,170,40,.48);stroke:#ff9a2e;stroke-width:2.4}
#board polygon.mv-red   {fill:rgba(200,50,40,.42);stroke:#c0392b;stroke-width:2.2}
#board polygon.mv-atk   {fill:rgba(230,40,30,.6);stroke:#ff3b2e;stroke-width:2.8;
  filter:drop-shadow(0 0 5px #ff3b2e);animation:legalPulse .8s ease-in-out infinite}
#board polygon.mv-sel   {stroke:#ffd84a;stroke-width:3;fill:rgba(255,210,70,.16);
  filter:drop-shadow(0 0 6px #ffce3a)}
/* floating creature inspection panel (click a creature to open) */
#creatureCard{position:fixed;left:24px;bottom:24px;z-index:60;width:224px;text-align:center;
  background:linear-gradient(160deg,rgba(42,30,14,.97),rgba(22,16,8,.98));
  border:1px solid #b08a3e;border-radius:12px;padding:14px 14px 12px;color:#e8dcc4;
  font-family:Georgia,serif;box-shadow:0 10px 30px rgba(0,0,0,.6)}
#creatureCard[hidden]{display:none}
#creatureCard .cc-x{position:absolute;top:3px;right:8px;background:none;border:none;color:#b3a884;font-size:20px;cursor:pointer;line-height:1}
#creatureCard .cc-head{display:flex;align-items:center;justify-content:center;gap:8px}
#creatureCard .cc-side{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 1px 2px #000)}
#creatureCard .cc-name{font-size:17px;font-weight:800;color:#ff9a3d;font-variant:small-caps}
#creatureCard .cc-name em{font-size:12px;color:#c0392b;font-variant:normal}
#creatureCard .cc-big{width:100px;height:100px;object-fit:contain;margin:6px auto 2px;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
#creatureCard .cc-type{font-size:12px;color:#b3a884;font-style:italic;margin-bottom:4px}
#creatureCard .cc-stats{font-size:14px;margin:5px 0}
#creatureCard .cc-atk{color:#ff7a4d;font-weight:800}
#creatureCard .cc-def{color:#7fd0ff;font-weight:800}
#creatureCard .cc-chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:8px}
#creatureCard .cc-chip{font-size:11px;background:rgba(255,248,225,.14);border:1px solid #8a6d2e;border-radius:10px;padding:1px 7px;text-transform:capitalize}
#board circle.crt-hit{fill:transparent}
.targeting #board circle.crt-hit{cursor:pointer}
#board circle.legal-cr{stroke:#ffd84a;stroke-width:2.6;fill:rgba(255,210,70,.14);
  animation:legalPulse 1s ease-in-out infinite}
@keyframes legalPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* the Nexus (two impassable central altar tiles): solid rock - dimmed, no fill, not clickable */
#board polygon.blocked-hex{fill:rgba(20,12,8,.34);stroke:rgba(60,40,24,.55);stroke-width:1.2;
  stroke-dasharray:4 3;pointer-events:none}
/* a Magic-Locked card in hand: greyed with a padlock badge */
.card.locked{filter:grayscale(.7);cursor:not-allowed}
.card .lockbadge{position:absolute;top:5px;left:6px;color:#e9d27a;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));pointer-events:none}
/* "a spell of yours is trapped" warning - count only, never which card */
.traphud{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:40;
  background:rgba(70,14,14,.92);color:#ffd9d0;border:1px solid #a6413a;border-radius:8px;
  padding:6px 14px;font-weight:800;font-size:13px;letter-spacing:.4px;
  box-shadow:0 3px 12px rgba(0,0,0,.5)}
.traphud[hidden]{display:none}

/* ---- dev console (admin/debug; backtick toggles) ---- */
#devcon{position:fixed;left:0;bottom:0;z-index:9999;width:540px;max-width:62vw;height:7.6em;
  margin:0;padding:4px 9px;background:#000;color:#3a9bff;opacity:.93;overflow:hidden;
  font:12px/1.26 Consolas,"Courier New",monospace;white-space:pre-wrap;word-break:break-word;
  border-top:1px solid #0a63c8;border-right:1px solid #0a63c8;pointer-events:none}

/* ---- spell-error popup ---- */
#devmodal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.62);
  display:flex;align-items:center;justify-content:center}
#devmodal[hidden]{display:none}
#devmodal .dm-box{background:#0a0c14;border:1px solid #0a63c8;color:#cfe3ff;
  width:90%;max-width:700px;padding:14px 16px;box-shadow:0 8px 40px rgba(0,0,0,.6)}
#devmodal .dm-h{color:#ff6a6a;font-weight:800;font-family:Consolas,monospace;margin-bottom:8px}
#devmodal #dm-body{margin:0;max-height:52vh;overflow:auto;white-space:pre-wrap;
  word-break:break-word;color:#9ccbff;font:12px/1.45 Consolas,"Courier New",monospace}
#devmodal #dm-close{margin-top:12px}

/* ---- whole-book spellbook: copy badge + depleted/unaffordable states ---- */
.card-face{position:relative}
.card-face.depleted{opacity:.36;filter:grayscale(.62)}
/* Magic-Locked page in the binder: greyed, tinted, with a padlock badge */
.card-face.locked{filter:grayscale(.72) brightness(.82);cursor:not-allowed}
.card-face.locked::after{content:"";position:absolute;inset:0;background:rgba(30,20,10,.28);
  border-radius:inherit;pointer-events:none}
.cf-lock{position:absolute;top:6px;left:8px;z-index:3;color:#e9d27a;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.card-face.unaffordable .cf-cost{color:#b23b3b}
.cf-count{position:absolute;top:7px;right:9px;z-index:2;font:800 13px Georgia,serif;
  color:#3a2a12;background:rgba(233,217,176,.9);border:1px solid #8a6a30;border-radius:9px;
  padding:0 7px;line-height:18px;box-shadow:0 1px 2px rgba(0,0,0,.35)}

/* ---- building target picker overlay ---- */
#bldPick{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center}
#bldPick[hidden]{display:none}
#bldPick .bp-box{background:#161009;border:2px solid #8a6a30;border-radius:6px;
  padding:16px 18px;max-width:520px;box-shadow:0 10px 40px rgba(0,0,0,.6);text-align:center}
#bldPick .bp-h{color:#e9d9b0;font:700 16px Georgia,serif;margin-bottom:12px}
#bldPick .bp-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
#bldPick .bp-btn{background:#2a1d0c;color:#f0dca8;border:1px solid #8a6a30;border-radius:5px;
  padding:9px 14px;font:600 14px Georgia,serif;cursor:pointer}
#bldPick .bp-btn:hover{background:#3a2912;border-color:#ffce3a;color:#fff}
#bldPick .bp-cancel{margin-top:12px;color:#b39a6a;font:12px Consolas,monospace}
/* during a spell-target step, hint that book cards are pickable */
.targeting #bookWrap .spellbook{outline:2px solid rgba(255,210,70,.5);outline-offset:4px;cursor:pointer}

/* ---- vital-row art medallions (img with SVG fallback) ---- */
#youRes .ic{position:relative}
#youRes .ic img{display:block;width:100%;height:100%;object-fit:contain}
#youRes .ic.has-img .svgfb{display:none}

/* ---- animated hourglass (time slot) ---- */
#youRes .ic .time-glass{display:block;width:100%;height:100%;object-fit:contain}