/* ============================================================
   CASTING — AR Magic Circle
   ============================================================ */

:root{
  --ink:#eaf6ff;
  --dim:#7f93a8;
  --gold:#ffd479;
  --cyan:#6ff0ff;
  --violet:#b06bff;
  --bg:#04070c;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; }

/* The browser hides [hidden] with display:none from the UA sheet, which any
   author `display:` rule silently outranks. Every element toggled with the
   hidden attribute here also sets display:flex, so hidden was doing nothing at
   all — the chat button showed in solo, and the panel would not close. */
[hidden]{ display:none !important; }

html,body{
  margin:0; padding:0; height:100%; width:100%;
  background:var(--bg); color:var(--ink);
  font-family:var(--mono);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:crosshair;
  /* drawing must not scroll, pan or pinch-zoom the page */
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

/* ---------- stage ---------- */
#stage{
  position:fixed; inset:0;
  will-change:transform;
}

#cam{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scaleX(-1);           /* mirror the feed */
  filter:saturate(.82) contrast(1.06) brightness(.72);
  background:#000;
}

#fx, #gfx{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
/* WebGL particle layer sits under the vector layer so runes stay readable */
#gfx{ z-index:1; }
#fx { z-index:2; }

#vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(2,6,12,.55) 0%, transparent 22%, transparent 76%, rgba(2,6,12,.7) 100%);
}

#scanlines{
  position:absolute; inset:0; pointer-events:none; opacity:.16;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* ---------- HUD top ---------- */
#hud-top{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:18px 22px; z-index:20; pointer-events:none;
}

/* ---------- icons: Material Symbols (Google Fonts), never emoji ---------- */
.mi{
  font-family:'Material Symbols Outlined';
  font-weight:normal; font-style:normal; line-height:1;
  letter-spacing:normal; text-transform:none; white-space:nowrap;
  display:inline-block; direction:ltr; word-wrap:normal;
  -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select:none;
}

.brand{ display:flex; align-items:center; gap:10px; text-shadow:0 0 18px rgba(111,240,255,.45); }
.brand .glyph{ font-size:20px; color:var(--cyan); animation:spin 12s linear infinite; }
.brand .title{ font-size:20px; letter-spacing:.42em; font-weight:700; }
.brand .sub{ font-size:10px; letter-spacing:.22em; color:var(--dim); text-transform:uppercase; }

@keyframes spin{ to{ transform:rotate(360deg); } }

/* The mode select used to be reachable only by the Tab key, named in footer
   text that is hidden on narrow screens and absent entirely on a tablet. */
.top-right{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.tr-buttons{ display:flex; align-items:center; gap:7px; }

/* Same treatment as the touch-bar buttons (#touch-controls .tc) so every
   button in the app reads the same: dark translucent, hairline border,
   14px corners, letterspaced label. */
#menu-btn{
  pointer-events:auto; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:14px;
  font-size:11px; letter-spacing:.16em; font-weight:700;
  color:#cfe0ee;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  white-space:nowrap;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
#menu-btn:hover{ background:rgba(255,255,255,.14); border-color:var(--cyan); color:var(--cyan); }
#menu-btn:active{ background:rgba(255,255,255,.2); }
#menu-btn .ico{ font-size:14px; line-height:1; }

/* same geometry as the menu button, in forfeit red */
#leave-btn{
  pointer-events:auto; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:14px;
  font-size:11px; letter-spacing:.16em; font-weight:700;
  color:#ffd0d6; background:rgba(255,80,100,.16);
  border:1px solid rgba(255,110,130,.5);
  backdrop-filter:blur(8px); white-space:nowrap;
  transition:background .16s ease, border-color .16s ease;
}
#leave-btn:hover{ background:rgba(255,80,100,.3); border-color:#ff8095; }
#leave-btn .ico{ font-size:14px; line-height:1; }

.pill{
  display:flex; align-items:center; gap:9px;
  padding:7px 15px; border-radius:999px;
  font-size:11px; letter-spacing:.2em;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(4,10,18,.55);
  backdrop-filter:blur(8px);
  white-space:nowrap;
}
.pill .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; }

.state-idle    { color:#6f8299; }
.state-drawing { color:var(--cyan);   border-color:rgba(111,240,255,.45); }
.state-standby { color:var(--gold);   border-color:rgba(255,212,121,.5); animation:pulse 1.1s ease-in-out infinite; }
.state-casting { color:#ff7de0;       border-color:rgba(255,125,224,.6); }
.state-fusion  { color:#ff7de0;       border-color:rgba(255,125,224,.75); animation:pulse .7s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.45; } }

/* ---------- charged sigils / fusion preview ---------- */
#charge{
  position:fixed; left:50%; top:64px; transform:translateX(-50%) translateY(-8px);
  z-index:22; pointer-events:none;
  display:flex; align-items:center; gap:9px;
  padding:8px 14px; border-radius:999px;
  background:rgba(4,10,18,.6); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  opacity:0; transition:opacity .25s ease, transform .25s ease;
}
#charge.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#charge .chip{
  font-size:10px; letter-spacing:.2em; font-weight:700;
  padding:4px 10px; border-radius:999px; border:1px solid currentColor;
  box-shadow:0 0 16px -4px currentColor;
}
#charge .chip.empty{ color:#5d7085; border-style:dashed; }
#charge .op{ font-size:11px; color:#7f93a8; }
#charge .fuse{ font-size:11px; letter-spacing:.22em; font-weight:800; text-shadow:0 0 18px currentColor; }

/* ---------- discovery toast ---------- */
#discovery{
  position:fixed; left:50%; top:22%; transform:translateX(-50%) translateY(10px);
  z-index:30; pointer-events:none; text-align:center; opacity:0;
  padding:12px 24px; border-radius:14px;
  background:linear-gradient(180deg, rgba(10,8,20,.82), rgba(4,4,10,.92));
  border:1px solid rgba(255,212,121,.45);
  box-shadow:0 0 60px rgba(255,190,90,.28);
}
#discovery.show{ animation:discover 2.6s cubic-bezier(.15,.9,.25,1) forwards; }
#discovery .tag{ margin:0; font-size:9px; letter-spacing:.4em; color:var(--gold); }
#discovery .name{ margin-top:6px; font-size:clamp(15px,2.4vw,24px); font-weight:800; letter-spacing:.16em; }
#discovery .sub{ margin-top:5px; font-size:9px; letter-spacing:.2em; color:#9fb2c4; }
@keyframes discover{
  0%  { opacity:0; transform:translateX(-50%) translateY(18px) scale(.9); }
  10% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  80% { opacity:1; }
  100%{ opacity:0; transform:translateX(-50%) translateY(-14px); }
}

/* ---------- spell card: stays up for the whole channel ---------- */
/* Spells manifest wherever they were drawn, so this card frequently sits over
   the circle itself — it needs its own backing to stay readable. */
#spell-card{
  position:fixed; left:50%; bottom:76px; transform:translateX(-50%) translateY(14px);
  z-index:25; pointer-events:none; text-align:center;
  opacity:0; transition:opacity .3s ease, transform .3s cubic-bezier(.15,.9,.25,1);
  width:min(560px, 62vw);
  padding:12px 22px 14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(4,9,16,.62), rgba(4,9,16,.86));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(9px);
  box-shadow:0 10px 50px rgba(0,0,0,.55);
}
#spell-card.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#spell-card .tier{
  font-size:8.5px; letter-spacing:.34em; color:#8ea3b5; text-transform:uppercase; margin-bottom:5px;
}
#spell-card .name{
  font-size:clamp(16px,2.3vw,27px); font-weight:800; letter-spacing:.14em;
  text-shadow:0 0 26px currentColor; line-height:1.2;
  overflow-wrap:break-word;
}
#spell-card .true{
  margin-top:4px; font-size:10px; letter-spacing:.26em; color:#cfe0ee; opacity:.85;
}
#spell-card .desc{
  margin-top:7px; font-size:10px; letter-spacing:.05em; line-height:1.6; color:#a8bacb;
}
@media (max-height:700px){
  #spell-card .desc{ display:none; }
  #spell-card{ bottom:66px; padding:9px 18px 11px; }
}


/* ============================================================
   COMBAT HUD
   ============================================================ */
.bar{
  position:relative; height:12px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
}
.bar i{
  position:absolute; inset:0; right:auto; width:100%; display:block;
  border-radius:999px; transition:width .28s cubic-bezier(.2,.9,.3,1);
}
.bar.hp i{ background:linear-gradient(90deg,#ff4d5e,#ff9068); box-shadow:0 0 16px rgba(255,77,94,.6); }
.bar.mp i{ background:linear-gradient(90deg,#3aa0ff,#7cf5ff); box-shadow:0 0 16px rgba(60,160,255,.55); }
.bar.mp{ height:7px; margin-top:4px; }
.bar span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:8.5px; letter-spacing:.14em; color:#fff; text-shadow:0 1px 3px #000;
}
.bar.low i{ animation:hpLow .8s ease-in-out infinite; }
@keyframes hpLow{ 50%{ filter:brightness(1.8); } }

/* ---------- enemy ---------- */
#enemy-panel{
  position:fixed; top:64px; left:50%; transform:translateX(-50%) translateY(-14px);
  z-index:23; pointer-events:none; width:min(430px, 88vw);
  padding:11px 14px 12px; border-radius:14px;
  background:linear-gradient(180deg, rgba(24,6,10,.72), rgba(6,4,10,.86));
  border:1px solid rgba(255,110,130,.24);
  backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s ease, transform .3s ease;
}
#enemy-panel.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#enemy-panel .head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
#enemy-panel .rank{
  flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  font-size:12px; font-weight:800; color:#ffd0d6;
  background:rgba(255,80,100,.16); border:1px solid rgba(255,110,130,.4);
}
#enemy-panel .who{ flex:1; min-width:0; }
#enemy-panel .who b{ display:block; font-size:12px; letter-spacing:.2em; color:#ffd9de; }
#enemy-panel .who em{
  display:block; font-style:normal; font-size:8.5px; letter-spacing:.1em; color:#9a8b90;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.affinity{
  flex:none; font-size:8.5px; letter-spacing:.16em; font-weight:700;
  padding:3px 8px; border-radius:999px; border:1px solid currentColor;
}
#enemy-panel .casting{
  margin-top:7px; height:12px; font-size:9px; letter-spacing:.18em; color:#ffbfc8; text-align:center;
}
#enemy-panel .casting.active{ animation:pulse .7s ease-in-out infinite; }

/* ---------- player ---------- */
#player-panel{
  /* clears the footer legend; sits left of the centred spell card */
  position:fixed; left:20px; bottom:104px; z-index:23; pointer-events:none;
  width:min(310px, 46vw);
  opacity:0; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease;
}
#player-panel.show{ opacity:1; transform:translateY(0); }
#player-panel .row{ display:flex; align-items:center; gap:10px; }
#player-panel .bars{ flex:1; }

/* ---------- statuses ---------- */
.statuses{ display:flex; gap:5px; flex-wrap:wrap; margin:6px 0 0; }
.statuses .st{
  font-size:8px; letter-spacing:.14em; font-weight:700;
  padding:2px 7px; border-radius:999px; border:1px solid currentColor;
  background:rgba(0,0,0,.35);
}
.st-poison{ color:#8fe36a; } .st-burn{ color:#ff8a3c; }
.st-paralyzed{ color:#ffe74c; } .st-stunned{ color:#ff5f8a; }
.st-buff{ color:#7cf5ff; }

/* ---------- floating numbers ---------- */
#floaters{ position:fixed; inset:0; z-index:24; pointer-events:none; }
.floater{
  position:absolute; font-size:22px; font-weight:800; letter-spacing:.06em;
  text-shadow:0 0 18px currentColor, 0 2px 6px #000;
  animation:floatUp 1.25s cubic-bezier(.2,.8,.3,1) forwards;
  white-space:nowrap;
}
.floater.small{ font-size:13px; letter-spacing:.16em; }
@keyframes floatUp{
  0%  { opacity:0; transform:translate(-50%,6px) scale(.7); }
  18% { opacity:1; transform:translate(-50%,-10px) scale(1.12); }
  40% { transform:translate(-50%,-18px) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-64px) scale(1); }
}

/* ---------- draw grade ---------- */
#grade-pop{
  position:fixed; left:50%; top:44%; transform:translate(-50%,-50%);
  z-index:26; pointer-events:none; text-align:center; opacity:0;
}
#grade-pop.show{ animation:gradeIn 1.15s cubic-bezier(.15,.9,.25,1) forwards; }
#grade-pop b{ display:block; font-size:clamp(22px,4vw,46px); font-weight:800; letter-spacing:.28em; text-shadow:0 0 34px currentColor; }
#grade-pop em{ display:block; font-style:normal; font-size:10px; letter-spacing:.3em; color:#cfe0ee; margin-top:4px; }
@keyframes gradeIn{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(1.5); filter:blur(12px); }
  15% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); }
  70% { opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-64%) scale(1); }
}

/* ---------- incoming hit ---------- */
#hit-flash{
  position:fixed; inset:0; z-index:22; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(255,30,60,.55) 100%);
}
#hit-flash.hit{ animation:hitPulse .5s ease-out; }
@keyframes hitPulse{ 0%{opacity:0;} 20%{opacity:1;} 100%{opacity:0;} }

/* ============================================================
   MENU — the landing page, and every screen behind it
   ============================================================ */
#menu{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:radial-gradient(ellipse at 50% 35%, rgba(12,22,38,.96), rgba(3,6,12,.97));
  backdrop-filter:blur(12px);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s;
  overflow:auto; padding:16px 0;
  scrollbar-width:thin; scrollbar-color:rgba(111,240,255,.3) transparent;
}
/* the stock scrollbar looked like a rendering fault against the dark card */
#menu::-webkit-scrollbar, #menu .screen::-webkit-scrollbar{ width:6px; }
#menu::-webkit-scrollbar-track, #menu .screen::-webkit-scrollbar-track{ background:transparent; }
#menu::-webkit-scrollbar-thumb, #menu .screen::-webkit-scrollbar-thumb{
  background:rgba(111,240,255,.28); border-radius:999px;
}
#menu.show{ opacity:1; visibility:visible; }
#menu .screen{
  display:none; width:min(560px, 92vw); max-height:92vh; overflow:auto;
  padding:22px; text-align:center;
}
#menu .screen.wide{ width:min(880px, 94vw); }
#menu .screen.show{ display:block; }
#menu h1{ margin:0; font-size:clamp(30px,7vw,44px); letter-spacing:.4em; font-weight:800; text-shadow:0 0 34px rgba(111,240,255,.5); }
#menu h2{ margin:0 0 16px; font-size:13px; letter-spacing:.38em; color:var(--cyan); font-weight:700; }
#menu h3{ margin:22px 0 10px; font-size:10px; letter-spacing:.32em; color:var(--dim); font-weight:600; }
#menu .back{
  float:left; display:flex; align-items:center; gap:6px;
  font-family:inherit; font-size:9.5px; letter-spacing:.2em;
  color:#9fb2c4; background:transparent; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:7px 14px; cursor:pointer; margin-bottom:12px;
}
#menu .back .mi{ font-size:14px; }
#menu .back:hover{ color:var(--cyan); border-color:rgba(111,240,255,.5); }

/* six entries have to fit a laptop viewport without the list scrolling */
.menu-list{ display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.menu-item{
  display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  font-family:inherit; color:#dceaf6;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:12px 16px;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.menu-item:hover, .menu-item:active{
  transform:translateY(-2px); border-color:var(--cyan); box-shadow:0 0 34px rgba(111,240,255,.24);
}
.menu-item .mi-ico{ font-size:26px; flex:none; width:30px; text-align:center; color:var(--cyan); }
.menu-item b{ display:block; font-size:13px; letter-spacing:.22em; color:#fff; }
.menu-item em{ display:block; font-style:normal; font-size:10px; margin-top:4px; color:#93a6b8; letter-spacing:.06em; }

.input-choice{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:20px; font-size:9px; letter-spacing:.24em; color:var(--dim);
}
.chip-btn{
  font-family:inherit; font-size:9.5px; letter-spacing:.18em; font-weight:700;
  color:#9fb2c4; background:transparent; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:8px 15px; cursor:pointer;
}
.chip-btn.on{ color:#04070c; background:var(--cyan); border-color:var(--cyan); }

/* ---------- grimoire book ---------- */
.search-wrap{
  display:flex; align-items:center; gap:9px; margin:0 0 12px;
  padding:0 14px; height:44px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
}
.search-wrap:focus-within{ border-color:var(--cyan); background:rgba(111,240,255,.07); }
.search-wrap .mi{ font-size:18px; color:var(--dim); flex:none; }
#book-search{
  flex:1; min-width:0; background:transparent; border:0; outline:none;
  font-family:inherit; font-size:11px; letter-spacing:.1em; color:#dceaf6;
}
#book-search::placeholder{ color:#5d7085; letter-spacing:.06em; }
#book-search::-webkit-search-cancel-button{ display:none; }
#search-clear{
  flex:none; background:transparent; border:0; cursor:pointer; color:var(--dim);
  padding:4px; display:flex; align-items:center;
}
#search-clear:hover{ color:var(--cyan); }

#book-progress{ font-size:10px; letter-spacing:.2em; color:#9fb2c4; margin-bottom:14px; }
#book-progress b{ color:var(--gold); }
.book-tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:14px; }
.book-tabs .tab{
  font-family:inherit; font-size:9.5px; letter-spacing:.2em; font-weight:700;
  color:#9fb2c4; background:transparent; border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:8px 16px; cursor:pointer;
}
.book-tabs .tab.on{ color:#04070c; background:var(--gold); border-color:var(--gold); }
/* the full reference, every spell, printable */
.book-tabs .tab.pdf{
  display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  color:#9fb2c4; border-color:rgba(111,240,255,.4);
}
.book-tabs .tab.pdf:hover{ color:var(--cyan); background:rgba(111,240,255,.1); }
.book-tabs .tab.pdf .mi{ font-size:13px; }
#book-body{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px; }
.bk{
  position:relative; text-align:left; cursor:pointer; font-family:inherit;
  border-radius:12px; padding:10px 11px; color:#dceaf6;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);
  transition:transform .14s ease, border-color .14s ease;
}
.bk:hover{ transform:translateY(-2px); }
.bk.locked{ cursor:default; opacity:.5; border-style:dashed; }
.bk .bk-name{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; }
.bk .bk-sub{ display:block; font-size:8.5px; letter-spacing:.1em; color:#8ea3b5; margin-top:3px; }
.bk .bk-glyph{ width:34px; height:34px; float:right; margin:-2px 0 0 6px; }
.bk .bk-glyph svg{ width:100%; height:100%; overflow:visible; }
.bk .bk-glyph svg *{ fill:none; stroke:currentColor; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.bk.locked .bk-name{ color:#5d7085; letter-spacing:.3em; }
/* search results carry a kind badge, and rules carry their explanation */
.bk-kind{
  display:block; font-size:7.5px; letter-spacing:.28em; color:var(--dim);
  margin-bottom:4px; text-transform:uppercase;
}
.bk-desc{
  display:block; margin-top:6px; font-size:9px; line-height:1.55; color:#93a6b8;
  letter-spacing:.02em;
}
/* what a spell does, at a glance */
.bk-fx{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.bk-fx i{
  font-style:normal; font-size:7.5px; letter-spacing:.14em; font-weight:700;
  padding:2px 6px; border-radius:999px;
  border:1px solid currentColor; opacity:.9;
}
.bk.rule{ cursor:default; border-color:rgba(255,212,121,.22); background:linear-gradient(180deg, rgba(255,212,121,.06), rgba(255,255,255,.015)); }
.bk.rule .bk-name{ color:var(--gold); }
.bk.rule:hover{ transform:none; }

/* ---------- entry detail ---------- */
#entry-body .e-glyph{ width:130px; height:130px; margin:6px auto 12px; }
#entry-body .e-glyph svg{ width:100%; height:100%; overflow:visible; }
#entry-body .e-glyph svg *{ fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 8px currentColor); }
#entry-body .e-name{ font-size:clamp(18px,3.4vw,28px); font-weight:800; letter-spacing:.16em; text-shadow:0 0 26px currentColor; }
#entry-body .e-true{ margin-top:5px; font-size:10.5px; letter-spacing:.28em; color:#cfe0ee; }
#entry-body .e-type{ margin-top:5px; font-size:9px; letter-spacing:.28em; color:var(--dim); text-transform:uppercase; }
#entry-body .e-desc{ margin:14px auto 0; max-width:420px; font-size:10.5px; line-height:1.75; color:#a8bacb; }
#entry-body .e-stats{ display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
#entry-body .e-stat{
  min-width:88px; padding:9px 12px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
#entry-body .e-stat i{ display:block; font-style:normal; font-size:8.5px; letter-spacing:.22em; color:var(--dim); }
#entry-body .e-stat b{ display:block; font-size:16px; margin-top:3px; }
#entry-body .e-parts{ display:flex; gap:7px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
#entry-body .e-part{ font-size:9px; letter-spacing:.16em; font-weight:700; padding:4px 10px; border-radius:999px; border:1px solid currentColor; }
#entry-body .e-drawn{ margin-top:16px; font-size:9px; letter-spacing:.2em; color:var(--dim); }

/* ============================================================
   ONLINE DUELS
   ============================================================ */
/* The panel is shown for the whole duel, not only once video arrives — with
   no fallback, a failed WebRTC connection left the split view as a black
   rectangle with nothing in it. */
#remote-wrap{
  position:fixed; z-index:19; pointer-events:none;
  border-radius:14px; overflow:hidden; opacity:0;
  border:1px solid rgba(255,110,130,.4);
  box-shadow:0 10px 40px rgba(0,0,0,.6);
  transition:opacity .35s ease;
  background:linear-gradient(180deg, #0b1120, #05080e);
}
body.in-pvp #remote-wrap{ opacity:1; }
#remote-wrap video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); display:none; }
#remote-wrap.live video{ display:block; }
#remote-wrap.live #remote-fallback{ display:none; }

/* who you are fighting, when their camera is not available */
#remote-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; padding:10px;
}
#remote-fallback img{ width:64px; height:64px; border-radius:18px; object-fit:cover; border:1px solid rgba(255,255,255,.2); }
#remote-fallback .rf-sigil{ width:64px; height:64px; display:grid; place-items:center; border-radius:18px; }
#remote-fallback .rf-sigil svg{ width:60%; height:60%; overflow:visible; }
#remote-fallback .rf-sigil svg *{ fill:none; stroke:currentColor; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
#remote-fallback b{ font-size:11px; letter-spacing:.14em; color:#ffd9de; }
#remote-fallback em{ font-style:normal; font-size:8.5px; letter-spacing:.18em; }

#remote-label{
  position:absolute; left:0; right:0; bottom:0; padding:4px 8px;
  font-size:8px; letter-spacing:.2em; color:#ffd0d6; background:rgba(6,4,10,.7);
}

/* corner inset */
#remote-wrap[data-view="opponent"]{ right:16px; top:190px; width:min(168px,34vw); aspect-ratio:3/4; }
/* top half of the screen */
#remote-wrap[data-view="split"]{ left:0; right:0; top:0; height:44vh; width:auto; border-radius:0; border-width:0 0 1px 0; }
body.split-view #cam{ top:44vh; height:56vh; }
#remote-wrap[data-view="off"]{ display:none; }

.room-code{
  margin:8px auto 14px; padding:14px 20px; border-radius:16px; width:fit-content;
  background:rgba(255,255,255,.05); border:1px solid rgba(111,240,255,.35);
}
.room-code i{ display:block; font-style:normal; font-size:8.5px; letter-spacing:.34em; color:var(--dim); }
.room-code b{
  display:block; margin-top:6px; font-size:clamp(28px,7vw,44px); font-weight:800;
  letter-spacing:.32em; color:var(--cyan); text-shadow:0 0 30px rgba(111,240,255,.5);
}

.vs{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; }
.vs-side{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:92px; }
.vs-side img{ width:56px; height:56px; border-radius:16px; object-fit:cover; border:1px solid rgba(255,255,255,.2); }
.vs-side b{ font-size:11px; letter-spacing:.12em; }
.vs-side em{ font-style:normal; font-size:8.5px; letter-spacing:.2em; }
.vs-x{ font-size:13px; font-weight:800; letter-spacing:.2em; color:#ff8095; }

.rank-face{ width:100%; height:100%; object-fit:cover; border-radius:8px; }

/* ---------- connection notice ---------- */
#net-notice{
  position:fixed; left:50%; transform:translateX(-50%); top:calc(50% - 130px);
  z-index:46; pointer-events:none;
  display:flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:999px;
  font-size:11px; letter-spacing:.18em; font-weight:700; color:#ffd479;
  background:rgba(8,6,2,.72); border:1px solid rgba(255,212,121,.45);
  backdrop-filter:blur(8px);
  box-shadow:0 6px 30px rgba(0,0,0,.5);
  animation:noticeIn .3s ease;
}
#net-notice.lost{ color:#ff9fae; border-color:rgba(255,110,130,.5); }
#net-notice .pulse{
  width:9px; height:9px; border-radius:50%; background:currentColor; flex:none;
  animation:noticePulse 1s ease-in-out infinite;
}
@keyframes noticePulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }
@keyframes noticeIn{ from{ opacity:0; transform:translateX(-50%) translateY(-6px); } }
@media (pointer:coarse), (max-width:820px){
  #net-notice{ font-size:10px; padding:8px 13px; top:calc(50% - 110px); }
}

/* ---------- in-duel chat ---------- */
#chat-btn{
  position:relative; pointer-events:auto; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:14px;
  font-size:11px; letter-spacing:.16em; font-weight:700;
  color:#cfe0ee; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); white-space:nowrap;
}
#chat-btn:hover{ background:rgba(255,255,255,.14); border-color:var(--cyan); color:var(--cyan); }
#chat-btn .ico{ font-size:14px; line-height:1; }
/* unread count, not just a dot — you should know how much you missed */
#chat-unread{
  position:absolute; top:-7px; right:-7px;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:10px; font-weight:800; letter-spacing:0;
  color:#fff; background:#ff3b57; border:2px solid #04070c;
  box-shadow:0 0 14px rgba(255,59,87,.9);
  animation:unreadPop .32s cubic-bezier(.2,1.4,.4,1);
}
@keyframes unreadPop{ 0%{ transform:scale(.4); } 70%{ transform:scale(1.18); } 100%{ transform:scale(1); } }

/* No panel chrome at all — the duel has to stay visible through it. Only the
   message bubbles and the input carry any fill, and text leans on shadow
   rather than a backdrop so it reads over video or a bright spell. */
#chat-panel{
  position:fixed; right:16px; top:150px; z-index:45; width:min(300px, calc(100vw - 32px));
  display:flex; flex-direction:column; gap:8px;
  background:none; border:0; box-shadow:none; backdrop-filter:none; padding:0;
  pointer-events:none;                 /* clicks fall through the empty space */
}
#chat-panel > * { pointer-events:auto; }

#chat-log{
  display:flex; flex-direction:column; gap:3px;
  max-height:min(230px, 32vh); overflow-y:auto; padding-right:2px;
  scrollbar-width:none;
}
#chat-log::-webkit-scrollbar{ display:none; }
#chat-log:empty{ display:none; }         /* nothing to say, nothing on screen */
/* Plain text only — no bubble, no border, no fill. Legibility comes from a
   heavy shadow so it reads over video, a bright spell or a white wall. */
.cm{
  font-size:12.5px; line-height:1.4; padding:0; border:0; background:none;
  max-width:100%; word-break:break-word; font-weight:600;
  text-shadow:0 1px 2px #000, 0 0 6px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.7);
}
.cm b{
  display:inline; font-size:12.5px; font-weight:700; letter-spacing:0;
  opacity:1; margin:0 5px 0 0;
}
.cm.them{ align-self:flex-start; color:#ffffff; text-align:left; }
.cm.them b{ color:#ff9fae; }
.cm.mine{ align-self:flex-start; color:#dff7ff; text-align:left; }
.cm.mine b{ color:var(--cyan); }

#chat-quick{ display:flex; flex-wrap:wrap; gap:5px; }
#chat-quick button{
  font-family:inherit; font-size:8.5px; letter-spacing:.12em; cursor:pointer;
  color:#cfe0ee; background:rgba(10,16,28,.42);
  border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:5px 10px;
  backdrop-filter:blur(3px); text-shadow:0 1px 3px rgba(0,0,0,.8);
}
#chat-quick button:hover{ color:var(--cyan); border-color:rgba(111,240,255,.5); }

.chat-row{ display:flex; gap:6px; }
#chat-input{
  flex:1; min-width:0; height:40px; padding:0 12px; border-radius:12px;
  background:rgba(10,16,28,.5); border:1px solid rgba(255,255,255,.18);
  font-family:inherit; font-size:12px; color:#eaf6ff; outline:none; -webkit-appearance:none;
  backdrop-filter:blur(4px);
}
#chat-input::placeholder{ color:#7f93a8; }
#chat-input:focus{ border-color:var(--cyan); background:rgba(10,20,32,.72); }
#chat-send{
  flex:none; width:40px; height:40px; border-radius:12px; cursor:pointer;
  display:grid; place-items:center; color:#04070c;
  background:linear-gradient(135deg,var(--cyan),#b9f8ff); border:0;
}

/* a message you can read without opening the panel */
/* tappable while visible, inert the rest of the time — an invisible toast
   sitting over the battlefield would swallow taps */
#chat-toast{ pointer-events:none; }
#chat-toast.show{ pointer-events:auto; cursor:pointer; }
#chat-toast{
  position:fixed; right:16px; top:150px; z-index:44;
  max-width:min(280px, calc(100vw - 32px));
  padding:9px 13px; border-radius:12px; opacity:0;
  background:rgba(6,10,18,.92); border:1px solid rgba(111,240,255,.35);
  font-size:10.5px; line-height:1.5; color:#dceaf6;
}
#chat-toast.show{ animation:chatToast 4s ease forwards; }
#chat-toast b{ display:block; font-size:8px; letter-spacing:.2em; color:var(--cyan); margin-bottom:2px; }
@keyframes chatToast{
  0%{ opacity:0; transform:translateX(14px); }
  8%{ opacity:1; transform:translateX(0); }
  80%{ opacity:1; }
  100%{ opacity:0; }
}

/* the toggle shows whether the panel is up */
#chat-btn.on{ color:#04070c; background:var(--cyan); border-color:var(--cyan); }
#chat-btn.on .ico{ color:#04070c; }

@media (pointer:coarse), (max-width:820px){
  /* sits directly above the touch bar, full width, out of the play area */
  #chat-panel{ left:10px; right:10px; width:auto; top:auto; bottom:92px; gap:6px; }
  #chat-log{ max-height:26vh; }
  .cm{ font-size:12px; padding:6px 10px; }
  #chat-input{ height:44px; font-size:16px; }   /* 16px stops iOS zooming on focus */
  #chat-send{ width:44px; height:44px; }
  /* one swipeable row rather than a wrapping block that eats the screen */
  #chat-quick{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px;
               scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  #chat-quick::-webkit-scrollbar{ display:none; }
  #chat-quick button{ flex:none; font-size:10px; padding:7px 12px; }
  #chat-toast{ left:10px; right:10px; max-width:none; top:auto; bottom:164px; }
  #chat-btn span:not(.ico){ display:none; }     /* icon only, to save the row */
  #chat-btn{ padding:0 12px; }
  #leave-btn span:not(.ico){ display:none; }
  #leave-btn{ padding:0 12px; }
  .tr-buttons{ gap:6px; }
}

/* ---------- profile ---------- */
.pf-avatar{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:6px 0 20px; }
#pf-portrait img, .pf-sigil{
  display:grid; place-items:center; border-radius:22px; overflow:hidden;
  border:1px solid rgba(255,255,255,.18); object-fit:cover;
}
.pf-sigil svg{ width:62%; height:62%; overflow:visible; }
.pf-sigil svg *{ fill:none; stroke:currentColor; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.pf-avatar-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
label.chip-btn{ display:inline-block; }

.pf-field{ text-align:left; margin-bottom:8px; }
.pf-field label{ display:block; font-size:8.5px; letter-spacing:.3em; color:var(--dim); margin-bottom:6px; }
.pf-name-row{ display:flex; gap:8px; align-items:stretch; }

/* every text field in the menu shares one look — #pvp-code was missed and
   fell back to a plain white browser input */
#pf-name, #pvp-code{
  flex:1 1 auto; min-width:0; height:44px; padding:0 14px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  font-family:inherit; font-size:12px; letter-spacing:.12em; color:#dceaf6; outline:none;
  -webkit-appearance:none; appearance:none;
}
#pf-name::placeholder, #pvp-code::placeholder{ color:#5d7085; letter-spacing:.1em; }
#pf-name:focus, #pvp-code:focus{ border-color:var(--cyan); background:rgba(111,240,255,.07); }

/* a room code is five characters — give it the weight of one */
#pvp-code{
  text-align:center; font-size:20px; font-weight:800; letter-spacing:.42em;
  text-indent:.42em; color:var(--cyan);
}

#pf-reroll{ display:flex; align-items:center; padding:0 14px; }
#pvp-join{ padding:0 20px; font-size:11px; }

#pf-mastery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:7px; }
.pf-el{
  cursor:pointer; font-family:inherit; padding:9px 4px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
}
.pf-el:hover{ transform:translateY(-2px); }
.pf-el.on{ box-shadow:0 0 22px -6px currentColor; }
.pf-el-glyph{ width:26px; height:26px; }
.pf-el-glyph svg{ width:100%; height:100%; overflow:visible; }
.pf-el-glyph svg *{ fill:none; stroke:currentColor; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.pf-el-name{ font-size:8px; letter-spacing:.14em; font-weight:700; color:#cfe0ee; }

.pf-info{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.pf-info-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 13px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
}
.pf-info-row i{ font-style:normal; font-size:8px; letter-spacing:.26em; color:var(--dim); }
.pf-info-row b{ font-size:11px; letter-spacing:.1em; }
.pf-info-row .e-parts{ display:flex; gap:6px; margin:0; flex-wrap:wrap; justify-content:flex-end; }
.pf-info-row .e-part{ font-size:8.5px; letter-spacing:.14em; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid currentColor; }

/* ---------- settings ---------- */
.settings-list{ display:flex; flex-direction:column; gap:9px; }
.toggle{
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  font-family:inherit; font-size:11px; letter-spacing:.2em; color:#dceaf6;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:15px 17px;
}
.toggle i{
  width:44px; height:24px; border-radius:999px; flex:none;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18);
  position:relative; transition:background .2s ease;
}
.toggle i::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#93a6b8; transition:transform .2s ease, background .2s ease;
}
.toggle.on i{ background:rgba(111,240,255,.32); border-color:var(--cyan); }
.toggle.on i::after{ transform:translateX(20px); background:var(--cyan); }
.danger-btn{
  margin-top:12px; font-family:inherit; font-size:10px; letter-spacing:.22em;
  color:#ff9fae; background:transparent; border:1px solid rgba(255,110,130,.4);
  border-radius:999px; padding:11px 24px; cursor:pointer;
}
.danger-btn:hover{ background:rgba(255,90,110,.12); }

#rank-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:10px; }
.rank-btn{
  cursor:pointer; font-family:inherit; text-align:left; color:#dceaf6;
  background:linear-gradient(180deg, rgba(255,90,110,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,110,130,.22); border-radius:12px; padding:11px 13px;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.rank-btn:hover{ transform:translateY(-3px); border-color:#ff8095; box-shadow:0 0 30px rgba(255,90,110,.3); }
.rank-btn .t{ display:flex; align-items:baseline; gap:7px; }
.rank-btn .n{ font-size:15px; font-weight:800; color:#ff9fae; }
.rank-btn .name{ font-size:11px; letter-spacing:.16em; font-weight:700; }
.rank-btn .ep{ display:block; font-size:8.5px; letter-spacing:.14em; color:#8f7f85; margin:2px 0 5px; }
.rank-btn .note{ display:block; font-size:9px; line-height:1.55; color:#93a6b8; }
.ghost-btn{
  margin-top:22px; font-family:inherit; font-size:10px; letter-spacing:.24em;
  color:#9fb2c4; background:transparent; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:10px 26px; cursor:pointer;
}
.ghost-btn:hover{ color:var(--cyan); border-color:rgba(111,240,255,.5); }

/* ---------- victory / defeat ---------- */
#outcome{
  position:fixed; inset:0; z-index:55; display:grid; place-items:center;
  pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(ellipse at 50% 50%, transparent 25%, rgba(2,4,8,.82) 100%);
}
#outcome.show{ opacity:1; pointer-events:auto; }
#outcome .box{ text-align:center; }
#outcome .title{ font-size:clamp(30px,7vw,74px); font-weight:800; letter-spacing:.3em; text-shadow:0 0 44px currentColor; }
#outcome .sub{ margin-top:10px; font-size:11px; letter-spacing:.28em; color:#9fb2c4; }
#outcome .again{
  margin-top:26px; font-family:inherit; font-size:11px; letter-spacing:.24em; font-weight:700;
  color:#04070c; background:linear-gradient(135deg,var(--cyan),#b9f8ff);
  border:0; border-radius:999px; padding:13px 30px; cursor:pointer;
}

@media (max-width:760px){
  /* full-width player bars would sit under the centred spell card, so lift it */
  #player-panel{ width:calc(100vw - 40px); }
  #spell-card{ bottom:180px; }
}

/* ---------- banner ---------- */
#banner{
  position:fixed; left:50%; top:20%; transform:translate(-50%,-50%) scale(.9);
  z-index:25; pointer-events:none;
  font-size:clamp(26px,5.6vw,68px); font-weight:800; letter-spacing:.24em;
  opacity:0; white-space:nowrap;
}
#banner.show{ animation:banner 1.9s cubic-bezier(.15,.9,.25,1) forwards; }
@keyframes banner{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(1.5); filter:blur(14px); }
  14%  { opacity:1; transform:translate(-50%,-50%) scale(1);   filter:blur(0); }
  70%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-56%) scale(1.04); }
}

/* ---------- HUD bottom ---------- */
#hud-bottom{
  position:fixed; left:0; right:0; bottom:0; z-index:20; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:0 20px 16px; text-align:center;
}
.legend{ font-size:11px; letter-spacing:.16em; color:#b6c7d6; text-shadow:0 2px 12px #000; }
.legend b{ color:var(--cyan); }
.legend.alt{ font-size:9.5px; color:#8ea3b5; letter-spacing:.14em; }
.legend.alt b{ color:var(--gold); }
.keys{ font-size:9.5px; letter-spacing:.12em; color:var(--dim); }
kbd{
  font-family:inherit; font-size:9px; padding:1px 5px; border-radius:4px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:#cfe0ee;
}

/* ---------- debug ---------- */
#debug{
  position:fixed; right:20px; bottom:70px; z-index:30; pointer-events:none;
  font-size:10px; letter-spacing:.08em; color:#9fd8ff;
  background:rgba(3,8,14,.72); border:1px solid rgba(111,240,255,.22);
  border-radius:10px; padding:10px 12px; min-width:210px;
}
#debug .row{ display:flex; justify-content:space-between; gap:16px; padding:2px 0; }
#debug .row span{ color:var(--dim); }
#debug .row b{ color:var(--cyan); font-weight:600; }
#debug .rank{ flex-direction:column; gap:2px; border-top:1px solid rgba(255,255,255,.08); margin-top:5px; padding-top:5px; }
#debug .rank b{ text-align:left; color:#cfe0ee; font-weight:400; white-space:pre; line-height:1.5; }

/* ---------- shared menu bits ---------- */
.sigil{ width:104px; height:104px; margin:0 auto 10px; color:var(--cyan); }
@media (max-height:820px){
  .sigil{ width:76px; height:76px; margin-bottom:6px; }
  #menu h1{ font-size:clamp(24px,5vw,34px); }
  .tag{ font-size:9.5px; }
  /* titles alone still read clearly — but the row must shrink with them,
     otherwise the buttons look like empty slabs */
  .menu-item em{ display:none; }
  .menu-item{ padding:10px 16px; }
  .menu-item .mi-ico{ font-size:22px; }
  .menu-list{ margin-top:12px; gap:7px; }
}
.sigil svg{ width:100%; height:100%; animation:spin 26s linear infinite; filter:drop-shadow(0 0 16px rgba(111,240,255,.55)); }
.sigil svg *{ fill:none; stroke:currentColor; stroke-width:1.2; opacity:.85; }

.tag{ margin:8px 0 0; font-size:10.5px; letter-spacing:.22em; color:var(--gold); text-transform:uppercase; }
.note{ margin-top:18px; font-size:10px; letter-spacing:.14em; color:var(--dim); line-height:1.7; }
.note.error{ color:#ff8b8b; }

/* ============================================================
   TOUCH CONTROLS
   ============================================================ */
#touch-controls{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:none; align-items:center; gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, transparent, rgba(3,7,13,.85) 45%);
}
#touch-controls .tc{
  font-family:inherit; font-weight:700; letter-spacing:.16em; font-size:11px;
  color:#cfe0ee; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18); border-radius:14px;
  padding:0 14px; height:52px;            /* comfortable tap target */
  cursor:pointer; touch-action:none; white-space:nowrap;
}
#touch-controls .tc:active{ background:rgba(255,255,255,.16); }
#touch-controls .cast{
  flex:1; height:62px; font-size:13px; letter-spacing:.2em;
  color:#04070c; border:0;
  background:linear-gradient(135deg,#6ff0ff,#b9f8ff);
  box-shadow:0 0 34px rgba(111,240,255,.45);
}
#touch-controls .cast:active{
  background:linear-gradient(135deg,#ff9fae,#ffd0d6);
  box-shadow:0 0 44px rgba(255,120,140,.7);
}
#touch-controls .cast[disabled]{ opacity:.42; box-shadow:none; }

@media (max-width:760px){
  .brand .sub{ display:none; }
  .keys{ display:none; }
  .legend, .legend.alt{ display:none; }
}

/* ---------- phone / touch layout ---------- */
@media (pointer:coarse), (max-width:820px){
  #touch-controls{ display:flex; }
  #hud-bottom{ display:none; }

  .brand .title{ font-size:15px; letter-spacing:.3em; }
  #hud-top{ padding:12px 12px; }
  /* keep a 40px tap target on a phone even though the label shrinks */
  #menu-btn{ font-size:10px; padding:0 14px; height:40px; }
  #state-pill{ font-size:9px; padding:5px 11px; }

  /* combat HUD has to clear the touch bar */
  /* clears the touch bar, including its gradient */
  #player-panel{ left:12px; right:12px; width:auto; bottom:104px; }
  #enemy-panel{ top:56px; width:calc(100vw - 24px); }
  #spell-card{ bottom:170px; width:calc(100vw - 24px); padding:9px 14px 11px; }
  #spell-card .desc{ display:none; }
  #charge{ top:auto; bottom:250px; }
  #banner{ top:26%; font-size:clamp(18px,6vw,34px); }
  #grade-pop{ top:38%; }
  #debug{ display:none; }

  #menu .screen{ padding:16px 14px; }
  #menu h2{ font-size:11px; letter-spacing:.28em; }
  #rank-row{ grid-template-columns:1fr; gap:8px; }
  .rank-btn{ padding:10px 12px; }
  .rank-btn .note{ display:none; }
  .sigil{ width:84px; height:84px; }
  #book-body{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:7px; }
  .menu-item{ padding:14px 15px; }
}
@media (max-width:420px){
  #rank-row{ grid-template-columns:1fr; }
  #touch-controls .tc:not(.cast){ padding:0 10px; font-size:10px; }
}