/* Canvas text uses the same Alegreya face with lining/tabular figures, matching the native stat plaques. */
@font-face{font-family:'Alegreya Sans Numbers';font-style:normal;font-weight:800;font-display:swap;src:url('https://fonts.gstatic.com/s/alegreyasans/v28/5aUu9_-1phKLFgshYDvh6Vwt5f1LmE0.ttf') format('truetype');font-feature-settings:'lnum' 1,'tnum' 1}
:root{
  color-scheme:dark;
  --display:'Almendra SC','Palatino Linotype',Palatino,Georgia,serif;
  --body:'Alegreya Sans','Gill Sans','Segoe UI',system-ui,sans-serif;
  --sc:'Alegreya Sans SC','Alegreya Sans','Gill Sans',system-ui,sans-serif;
  /* motion: the transitions.dev token scale, with the per-transition values pushed further for a game */
  --duration-stagger:40ms; --duration-quick:150ms; --duration-fast:250ms; --duration-medium:350ms; --duration-slow:400ms; --duration-very-slow:500ms;
  --ease-smooth-out:cubic-bezier(0.22,1,0.36,1); --ease-in-out:ease-in-out; --ease-bounce:cubic-bezier(0.34,1.36,0.64,1); --blur-medium:3px;
  /* card hover tilt */
  /* modal (sheets) */
  --modal-open-dur:420ms; --modal-close-dur:180ms; --modal-scale:0.82; --modal-scale-close:0.94; --modal-ease:var(--ease-bounce);
  /* dropdown (menu) */
  --dropdown-open-dur:240ms; --dropdown-close-dur:150ms; --dropdown-pre-scale:0.86; --dropdown-closing-scale:0.95; --dropdown-ease:var(--ease-bounce);
  /* number pop-in (life, mana) */
  /* creature strike: telegraph (enemy only), lunge that lands at 48%, hold for the hit to read, pause before the next attacker */
  --hit-dur:var(--duration-very-slow); --hit-distance:11px; --hit-squash:.93;
  --strike-windup:380ms; --strike-dur:720ms; --strike-settle:620ms; --strike-gap:180ms;
  /* effect links: the comet flies to its target */
  --link-draw:420ms}
*{box-sizing:border-box}
html{min-height:100%;overflow-x:clip}
body{min-height:100%;overflow-x:clip}   /* clip, not hidden: nothing becomes a scroller, so sticky still works */
/* the duel fits the screen, so the page never scrolls or bounces: the WebGL layer is fixed to the screen and would be left
   behind. A phone held sideways is the one screen too short for it, and scrolls there */
html{overflow-y:hidden;overscroll-behavior:none;touch-action:manipulation}   /* no double-tap zoom; pinch zoom stays */
@media (orientation:landscape) and (max-height:500px){ html{overflow-y:auto}}
body{overscroll-behavior:none;margin:0;background:radial-gradient(900px 520px at 50% -8%,#1B1F48 0%,rgba(27,31,72,0) 70%),var(--ink);color:var(--text);font-family:var(--body);font-size:14px;line-height:1.35;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input{-webkit-user-select:text;user-select:text}
textarea{-webkit-user-select:text;user-select:text}   /* the name and room code stay typeable */
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
/* the arena (js/pixiarena.js): drawn in WebGL behind the duel */
/* without WebGL 2 there is no game: this notice covers the screen (js/pixifx.js webglGate) */
#glgate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:var(--ink);color:var(--text);font-size:17px;line-height:1.45}
#glgate h1{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:40px;color:var(--brass)}
#glgate p{margin:0;max-width:38ch}
#glgate .dim{color:var(--dim);font-size:15px}
/* the loader (index.html #boot): covers the page from its first paint until the first screen is whole (boot.js bootReveal).
   The logo breathes and a brass glow swells behind it, transform and opacity only, so it stays smooth while the page is busy
   booting; the logo fades in past a short wait, so a quick load never flashes it */
#boot{position:fixed;inset:0;z-index:101;display:grid;place-items:center;background:var(--ink);transition:opacity var(--duration-slow) var(--ease-smooth-out),visibility 0s var(--duration-slow)}
#boot.gone{opacity:0;visibility:hidden}
#boot.gone::before,#boot.gone img{animation-play-state:paused}
body.resizing #boot{opacity:1;visibility:visible;transition:none}   /* the loader covers a window being resized (js/pixifx.js) */
body.resizing #boot::before,body.resizing #boot img{animation-play-state:running}
#boot::before{grid-area:1/1}
#boot img{grid-area:1/1}
#boot::before{content:'';width:240px;height:240px;border-radius:50%;background:radial-gradient(closest-side,rgba(205,174,112,.4),rgba(205,174,112,.12) 55%,rgba(205,174,112,0));animation:boot-glow 1.4s var(--ease-in-out) infinite alternate}
#boot img{filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));animation:boot-in var(--duration-very-slow) .25s both,boot-pulse 1.4s var(--ease-in-out) infinite alternate}
@keyframes boot-in{from{opacity:0}}
@keyframes boot-pulse{from{transform:scale(.95)}to{transform:scale(1.04)}}
@keyframes boot-glow{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){ #boot img{animation:boot-in var(--duration-very-slow) .25s both}}
#app{position:relative;z-index:1;max-width:760px;margin:0 auto;padding-inline:16px;padding-block:8px 20px;display:flex;flex-direction:column;gap:9px}

/* header */
.top{display:flex;align-items:center;gap:10px;position:relative;z-index:50}
.brand{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--display);font-weight:400;font-size:25px;letter-spacing:.03em;color:var(--brass);line-height:1}
.top .sound{margin-left:auto}
.np{margin-left:auto;display:flex;align-items:center;min-width:0;border:1px solid var(--brass-dim);border-radius:999px;color:var(--brass)}
.np[hidden]{display:none}
.np:not([hidden])+.sound{margin-left:0}
.np button{display:grid;place-items:center;flex:none;padding:6px;border-radius:999px}
.np button:hover:not(:disabled){background:var(--ink3)}
.np button:disabled{opacity:.3}
.np svg{width:14px;height:14px}
.npname{flex:1;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sc);font-size:12px;letter-spacing:.04em}
.npname b{margin-right:6px;opacity:.6}
/* transitions.dev: menu dropdown */
.t-dropdown{transform-origin:top left;transform:scale(var(--dropdown-pre-scale));opacity:0;pointer-events:none;transition:transform var(--dropdown-open-dur) var(--dropdown-ease),opacity var(--dropdown-open-dur) var(--dropdown-ease);will-change:transform,opacity}
.t-dropdown.is-open{transform:scale(1);opacity:1;pointer-events:auto}
.t-dropdown.is-closing{transform:scale(var(--dropdown-closing-scale));opacity:0;pointer-events:none;transition:transform var(--dropdown-close-dur) var(--dropdown-ease),opacity var(--dropdown-close-dur) var(--dropdown-ease)}
.t-dropdown:not(.is-open):not(.is-closing){visibility:hidden}
/* the menu (Esc): in the middle of the screen, above the effects, the duel dimmed and blurred behind it; a plate like the mages' */
.pause{position:fixed;inset:0;z-index:71;display:grid;place-items:center;padding:16px;opacity:0;visibility:hidden;transition:opacity var(--dropdown-close-dur) var(--ease-smooth-out),visibility 0s var(--dropdown-close-dur)}
.pause:has(.is-open){opacity:1;visibility:visible;transition:opacity var(--dropdown-open-dur) var(--ease-smooth-out)}
.menulist{position:relative;width:min(380px,100%);display:flex;flex-direction:column;gap:20px;padding:24px 48px 20px;border-radius:16px;transform-origin:center;outline:none}
.menulist>*{opacity:0;transform:translateY(8px)}
.menulist.is-open>*{opacity:1;transform:none;transition:opacity var(--duration-fast) var(--ease-smooth-out),transform var(--duration-medium) var(--ease-bounce);transition-delay:calc(var(--i,0) * 30ms + 20ms)}
.menulist.is-closing>*{opacity:1;transform:none}
.mtitle .logo{display:block;margin:0 auto 10px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.mtitle{margin:0;text-align:center;font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:.03em;line-height:1;color:var(--brass);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.macts{display:grid;gap:14px}
.arenas{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px}
.mlabel{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-family:var(--sc);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.mlabel::before{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.mlabel::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.mlabel::after{background:linear-gradient(270deg,transparent,var(--line))}
.arenas button{display:flex;flex-direction:column;gap:6px;font-family:var(--sc);font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--dim);transition:color var(--duration-fast) ease}
.arenas button:hover{color:var(--brass)}
.arenas button[aria-pressed="true"]{color:var(--brass)}
.aswatch{display:block;height:54px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);filter:brightness(.82) saturate(.9);transition:filter var(--duration-fast) ease,box-shadow var(--duration-fast) ease,transform var(--duration-quick) var(--ease-smooth-out)}
button:hover>.aswatch{filter:none;transform:translateY(-1px)}
[aria-pressed="true"]>.aswatch{filter:none;box-shadow:0 0 0 1px var(--brass),0 0 18px rgba(205,174,112,.3)}
.langs button{padding:7px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.langs button[aria-pressed="true"]{background:var(--ink3);box-shadow:inset 0 0 0 1px var(--brass-dim)}
/* each swatch is a crop of its arena as the shader draws it (js/pixiarena.js) */
[data-arena-pick="starfall"] .aswatch{background:url(../backgrounds/arenas/starfall.webp) center/cover var(--ink)}
[data-arena-pick="leylines"] .aswatch{background:url(../backgrounds/arenas/leylines.webp) center/cover var(--ink)}
[data-arena-pick="emberfall"] .aswatch{background:url(../backgrounds/arenas/emberfall.webp) center/cover var(--ink)}
[data-arena-pick="frostmere"] .aswatch{background:url(../backgrounds/arenas/frostmere.webp) center/cover var(--ink)}
.ghost.icon{display:grid;place-items:center;padding:5px 8px}
.ghost.icon svg{width:16px;height:16px}
.ghost{font-family:var(--sc);font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--brass);border:1px solid var(--brass-dim);border-radius:999px;padding:5px 11px;line-height:1.2}
.primary{font-family:var(--sc);font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--brass);border:1px solid var(--brass-dim);border-radius:999px;padding:5px 11px;line-height:1.2}
.ghost:hover{border-color:var(--brass)}
.primary{font-weight:800;color:#1B1507;border-color:#B39155;background-clip:padding-box}
.primary:disabled{opacity:.35}

/* mages */
/* each mage (and the timeline) sits on an ink plate washed in its side's colour (violet for the enemy, brass for you),
   lit from above, with a gilded rim that is brightest along the top and a small diamond crest in the middle of it */
.mage{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-panel);position:relative;isolation:isolate}
.mage{--side:205,174,112;border:1px solid transparent}
.timeline{--side:205,174,112;border:1px solid transparent}
.menulist{--side:205,174,112;border:1px solid transparent;
  background:
    radial-gradient(90% 120% at 0% 0%,rgba(var(--side),.13),transparent 60%) padding-box,
    linear-gradient(180deg,#1B1F3B,var(--ink2) 55%,#101229) padding-box,
    linear-gradient(180deg,rgba(var(--side),.6),rgba(var(--side),.14) 40%,rgba(var(--side),.1) 70%,rgba(var(--side),.32)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -10px 24px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.45)}
.sheet.compact .panel{--side:205,174,112;border:1px solid transparent;
  background:
    radial-gradient(90% 120% at 0% 0%,rgba(var(--side),.13),transparent 60%) padding-box,
    linear-gradient(180deg,#1B1F3B,var(--ink2) 55%,#101229) padding-box,
    linear-gradient(180deg,rgba(var(--side),.6),rgba(var(--side),.14) 40%,rgba(var(--side),.1) 70%,rgba(var(--side),.32)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -10px 24px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.45)}
.sheet.tome .panel{--side:205,174,112;border:1px solid transparent;
  background:
    radial-gradient(90% 120% at 0% 0%,rgba(var(--side),.13),transparent 60%) padding-box,
    linear-gradient(180deg,#1B1F3B,var(--ink2) 55%,#101229) padding-box,
    linear-gradient(180deg,rgba(var(--side),.6),rgba(var(--side),.14) 40%,rgba(var(--side),.1) 70%,rgba(var(--side),.32)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -10px 24px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.45)}
.mage.foe{--side:166,120,240}
.mage.burning .life::before{opacity:0}   /* the burning tag (Pixi, presentationMageBurn) takes the panel's top */
.life::before{content:'';position:absolute;top:-1px;left:50%;width:180px;height:10px;translate:-50% -50%;pointer-events:none;background:rgb(var(--side));filter:drop-shadow(0 0 4px rgba(var(--side),.7));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 10' preserveAspectRatio='none'%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Crect x='0' y='4.4' width='80' height='1.2' fill='url(%23l)'/%3E%3Crect x='100' y='4.4' width='80' height='1.2' fill='url(%23r)'/%3E%3Cpath d='M90 0L95 5L90 10L85 5Z M90 3L88 5L90 7L92 5Z' fill='%23fff' fill-rule='evenodd'/%3E%3Ccircle cx='80' cy='5' r='1.3' fill='%23fff'/%3E%3Ccircle cx='100' cy='5' r='1.3' fill='%23fff'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.timeline::before{content:'';position:absolute;top:-1px;left:50%;width:180px;height:10px;translate:-50% -50%;pointer-events:none;background:rgb(var(--side));filter:drop-shadow(0 0 4px rgba(var(--side),.7));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 10' preserveAspectRatio='none'%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Crect x='0' y='4.4' width='80' height='1.2' fill='url(%23l)'/%3E%3Crect x='100' y='4.4' width='80' height='1.2' fill='url(%23r)'/%3E%3Cpath d='M90 0L95 5L90 10L85 5Z M90 3L88 5L90 7L92 5Z' fill='%23fff' fill-rule='evenodd'/%3E%3Ccircle cx='80' cy='5' r='1.3' fill='%23fff'/%3E%3Ccircle cx='100' cy='5' r='1.3' fill='%23fff'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.menulist::before{content:'';position:absolute;top:-1px;left:50%;width:180px;height:10px;translate:-50% -50%;pointer-events:none;background:rgb(var(--side));filter:drop-shadow(0 0 4px rgba(var(--side),.7));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 10' preserveAspectRatio='none'%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Crect x='0' y='4.4' width='80' height='1.2' fill='url(%23l)'/%3E%3Crect x='100' y='4.4' width='80' height='1.2' fill='url(%23r)'/%3E%3Cpath d='M90 0L95 5L90 10L85 5Z M90 3L88 5L90 7L92 5Z' fill='%23fff' fill-rule='evenodd'/%3E%3Ccircle cx='80' cy='5' r='1.3' fill='%23fff'/%3E%3Ccircle cx='100' cy='5' r='1.3' fill='%23fff'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.sheet.compact .panel::before{content:'';position:absolute;top:-1px;left:50%;width:180px;height:10px;translate:-50% -50%;pointer-events:none;background:rgb(var(--side));filter:drop-shadow(0 0 4px rgba(var(--side),.7));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 10' preserveAspectRatio='none'%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Crect x='0' y='4.4' width='80' height='1.2' fill='url(%23l)'/%3E%3Crect x='100' y='4.4' width='80' height='1.2' fill='url(%23r)'/%3E%3Cpath d='M90 0L95 5L90 10L85 5Z M90 3L88 5L90 7L92 5Z' fill='%23fff' fill-rule='evenodd'/%3E%3Ccircle cx='80' cy='5' r='1.3' fill='%23fff'/%3E%3Ccircle cx='100' cy='5' r='1.3' fill='%23fff'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.sheet.tome .panel::before{content:'';position:absolute;top:-1px;left:50%;width:180px;height:10px;translate:-50% -50%;pointer-events:none;background:rgb(var(--side));filter:drop-shadow(0 0 4px rgba(var(--side),.7));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 10' preserveAspectRatio='none'%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Crect x='0' y='4.4' width='80' height='1.2' fill='url(%23l)'/%3E%3Crect x='100' y='4.4' width='80' height='1.2' fill='url(%23r)'/%3E%3Cpath d='M90 0L95 5L90 10L85 5Z M90 3L88 5L90 7L92 5Z' fill='%23fff' fill-rule='evenodd'/%3E%3Ccircle cx='80' cy='5' r='1.3' fill='%23fff'/%3E%3Ccircle cx='100' cy='5' r='1.3' fill='%23fff'/%3E%3C/svg%3E") center/100% 100% no-repeat}
/* a hit flashes the plate red from within as it shakes */
.who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mname{font-family:var(--display);font-size:16px;line-height:1.1;word-spacing:.18em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.phead h2{word-spacing:.15em}
.opt b{word-spacing:.15em}
/* name on the left and life on the right above a bar that spans the whole panel */
.life{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.lifehead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rank{font-family:var(--sc);font-weight:700;font-size:10px;letter-spacing:.14em;color:color-mix(in srgb,rgb(var(--side)) 45%,var(--dim));display:flex;align-items:center;gap:5px}
.emb{display:block;flex:none;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.rank .emb{width:17px;height:17px}
/* the heart beats in a soft red halo, and races once life runs low */
.lifenum{--hs:24px;position:relative;display:flex;align-items:center;gap:6px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.lifenum .sti{width:var(--hs);height:var(--hs)}
.lifenum b{font-size:var(--lifefs,22px);color:#F8F1E2}
.mage.low .lifenum b{color:#FFD2C8}
/* the life bar: a rounded recessed ink channel framed in the side's colour, filled with the liquid life */
.bar{position:relative;height:10px;border-radius:999px;border:1px solid transparent;overflow:hidden}
/* the <i> only holds the level: the liquid life (js/liquid.js) draws the bar */
.bar i{display:none}
.bar .liq{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
/* Buttons are raised brass (End turn, Duel again) or raised ink trimmed in brass (See the board, Close).
   End turn carries a keycap for the space bar and sinks into the panel while the enemy moves. */
.primary{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;background:linear-gradient(180deg,#E6CD93 0%,var(--brass) 52%,#B39155 100%);box-shadow:inset 0 1px 0 rgba(255,244,214,.65),inset 0 -2px 0 rgba(90,66,24,.4),0 4px 14px rgba(0,0,0,.45);transition:transform var(--duration-quick) var(--ease-smooth-out),box-shadow var(--duration-fast) ease,filter var(--duration-fast) ease,background var(--duration-fast) ease,color var(--duration-fast) ease}
.primary:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px)}
.primary:not(:disabled):active{transform:translateY(1px) scale(.98);box-shadow:inset 0 1px 0 rgba(255,244,214,.45),inset 0 -1px 0 rgba(90,66,24,.4),0 2px 6px rgba(0,0,0,.45)}
.ghost:not(.icon){display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:linear-gradient(180deg,#262B52 0%,var(--ink3) 55%,#141730 100%);box-shadow:inset 0 1px 0 rgba(236,230,214,.12),inset 0 -2px 0 rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.3);transition:transform var(--duration-quick) var(--ease-smooth-out),box-shadow var(--duration-fast) ease,border-color var(--duration-fast) ease,color var(--duration-fast) ease}
.ghost:not(.icon):hover{color:#E6CD93;transform:translateY(-1px)}
.ghost:not(.icon):active{transform:translateY(1px) scale(.98);box-shadow:inset 0 1px 0 rgba(236,230,214,.08),inset 0 -1px 0 rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3)}
.pass:disabled{opacity:1;background:rgba(21,24,45,.88);color:var(--dim);border-color:var(--line);box-shadow:none}
.macts button{min-height:44px;padding:0 22px;font-size:15px}
.btnrow>button{min-height:44px;padding:0 22px;font-size:15px}
.onfield>button{min-height:44px;padding:0 22px;font-size:15px}
.joinrow button{min-height:44px;padding:0 22px;font-size:15px}
.pass kbd{display:inline-grid;place-items:center;height:22px;padding:0 7px;border-radius:6px;font-family:var(--body);font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(27,21,7,.78);background:rgba(27,21,7,.1);border:1px solid rgba(27,21,7,.32);border-bottom-width:2px}
.pass:disabled kbd{display:none}
.pass.nudge:not(:disabled){animation:selglow 1.6s ease-in-out infinite}

/* boards */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;position:relative}
#board1::before{background:radial-gradient(60% 75% at 50% 0%,rgba(166,120,240,.085),transparent 72%)}
.slot{position:relative;height:106px;border-radius:var(--r-field);outline-offset:2px}
@keyframes spin{to{transform:rotate(360deg)}}
.slot.target,.mage.target{cursor:pointer}
.slot.target.locked{z-index:2}   /* the risen card sits above its neighbours */
.art.sprite{display:flex;justify-content:center;align-items:center}
.cpart .art.sprite{display:flex}
.art.sprite i{position:relative;display:block;height:100%;aspect-ratio:1;background-repeat:no-repeat;background-size:100% 100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.cpcard[data-tier="0"]{--frame:linear-gradient(var(--m2),var(--m2))}
.tgem{--g:clamp(15px,15cqw,21px);position:absolute;z-index:3;top:calc(var(--g) * .22 + 3px);right:calc(var(--g) * .22 + 3px);width:var(--g);height:var(--g);display:grid;place-items:center;
  transform:rotate(45deg);border:1.5px solid transparent;border-radius:calc(var(--g) * .2);
  background:linear-gradient(145deg,color-mix(in srgb,var(--c) 30%,#0B0D1C),#0B0D1C 70%) padding-box,linear-gradient(155deg,var(--m1),var(--m2) 28%,var(--m1) 50%,var(--m3) 74%,var(--m2)) border-box;
  box-shadow:0 1px 4px rgba(0,0,0,.6)}
[data-tier="3"]>.tgem{background:linear-gradient(145deg,color-mix(in srgb,var(--c) 30%,#0B0D1C),#0B0D1C 70%) padding-box,conic-gradient(from var(--spin),var(--c),var(--m1) 12%,var(--m3) 25%,var(--c) 38%,var(--m1) 50%,var(--c) 62%,var(--m1) 75%,var(--m3) 88%,var(--c)) border-box;
  box-shadow:0 1px 4px rgba(0,0,0,.6),0 0 8px color-mix(in srgb,var(--c) 60%,transparent);animation:cp-spin 6s linear infinite}
.tgem b{transform:rotate(-45deg);font-family:var(--display);font-weight:400;font-size:calc(var(--g) * .5);line-height:1;letter-spacing:-.04em;color:var(--m1);text-shadow:0 1px 0 rgba(0,0,0,.8)}
.st{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:12.5px;font-variant-numeric:lining-nums tabular-nums;line-height:1}   /* lining: the font's old-style 3, 5, 7 hang below the line */
.st span{display:inline-flex;align-items:center;gap:1px}
/* every hand card shares one layout: one-line name, a stat row of fixed height, two lines of text */
.up{color:var(--mend)}.down{color:var(--hurt)}

/* meridian */
.meridian{position:relative;border-block:1px solid transparent;padding-block:9px;margin-block:2px}
/* the diamond crest of the side plates, set on the centre of the upper rule */
/* round and turn: the duel's title, above the enemy side */
.turn{margin:0;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:400;line-height:1;white-space:nowrap}
.turn::before{content:"";flex:1;min-width:12px;height:1px;background:linear-gradient(90deg,transparent,var(--brass-dim))}
.turn::after{content:"";flex:1;min-width:12px;height:1px;background:linear-gradient(90deg,transparent,var(--brass-dim))}
.turn::after{background:linear-gradient(270deg,transparent,var(--brass-dim))}
.tround{font-family:var(--sc);font-weight:700;font-size:12px;letter-spacing:.18em;color:var(--dim)}
.tside{font-family:var(--display);font-size:24px;letter-spacing:.03em;color:var(--brass);overflow:hidden;text-overflow:ellipsis}
.turn.foeturn .tside{color:var(--text)}
.info{height:98px;overflow-y:auto;overscroll-behavior:contain}
.status{font-size:14px;line-height:1.4;max-width:62ch}
.status .dim{color:var(--dim)}
.meta{font-family:var(--sc);font-weight:700;font-size:10.5px;letter-spacing:.1em;color:var(--dim)}
.frostt{color:var(--frost)}
.hint{margin-top:5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--brass);font-size:13px;font-weight:500}
.hint .pwi{--s:26px}

/* tabs & hand */
.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.kic{display:inline-block;object-fit:contain;pointer-events:none;user-select:none}
.sig{display:block;flex:none;object-fit:contain;pointer-events:none;user-select:none}
.sti{display:block;flex:none;object-fit:contain;pointer-events:none;user-select:none}
.tab{border:1px solid transparent}
.fopt{border:1px solid color-mix(in srgb,var(--c) 16%,var(--line));
  background:radial-gradient(34px 30px at var(--sigil-x,28px) 50%,color-mix(in srgb,var(--c) 20%,transparent),transparent) no-repeat,var(--ink2);   /* the school's sigil gives off a faint halo of its colour */
  transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}
.tab{position:relative;height:52px;border-radius:var(--r-tab);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-content:center;align-items:center;justify-items:end;column-gap:6px;padding-inline:8px 10px;container-type:inline-size}
/* icon pinned left, value large and pinned right, the school name just left of it on the value's baseline */
.tab .sig{grid-row:1/3;justify-self:start;width:clamp(26px,34cqw,40px);height:clamp(26px,34cqw,40px)}
.tab .mv{grid-row:1/3;display:flex;align-items:baseline;gap:6px;min-width:0}
.tab b{font-size:clamp(20px,22cqw,28px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.tab small{font-family:var(--sc);font-weight:700;font-size:11px;letter-spacing:.06em;line-height:1.1}
/* too narrow for both on one line: the name drops back under the value, and goes when even that is too tight */
@container (max-width:124px){ .tab .mv{flex-direction:column-reverse;align-items:end;gap:1px} .tab small{font-size:10px}}
@container (max-width:70px){ .tab small{display:none}}
.fopt.on{border-color:var(--c);box-shadow:0 0 14px -3px color-mix(in srgb,var(--c) 55%,transparent);
  background:radial-gradient(48px 40px at var(--sigil-x,28px) 50%,color-mix(in srgb,var(--c) 34%,transparent),transparent) no-repeat,color-mix(in srgb,var(--c) 13%,var(--ink2))}
@media (hover:hover){
.fopt:not(.on):hover{border-color:color-mix(in srgb,var(--c) 45%,var(--line))}}
.foetabs .tab{cursor:default}
.fopt.on::before{content:"";position:absolute;left:6px;right:6px;bottom:3px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--c) 10%,var(--c) 90%,transparent);filter:drop-shadow(0 0 4px var(--c));animation:focus-breathe 4s ease-in-out infinite alternate}
@keyframes focus-breathe{from{opacity:.8}to{opacity:1}}
.fpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 8px;margin-block:14px 4px}
.fopt{--sigil-x:24px;display:flex;align-items:center;gap:8px;text-align:left;border-radius:12px;padding:8px 10px;min-width:0}
.fopt .sig{width:28px;height:28px;flex:none}
.fopt b{display:block;font-family:var(--sc);font-weight:700;font-size:14px}
.fopt small{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fopt>span{min-width:0;flex:1}
.fopt{position:relative}
.fgain{position:absolute;top:-8px;right:-4px;font-style:normal;font-weight:800;font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums;padding:1px 7px;background-clip:padding-box;border-radius:999px;color:var(--dim);background:var(--ink3);border:1px solid var(--line)}
.fopt.on .fgain{color:var(--ink);background:var(--c);border-color:var(--c);box-shadow:0 0 12px color-mix(in srgb,var(--c) 55%,transparent)}
.fsep{border:0;height:1px;margin:22px 0;background:linear-gradient(90deg,transparent,var(--brass-dim) 20%,var(--brass-dim) 80%,transparent)}
.fhead{margin-top:14px;padding:10px 14px;border-radius:12px;border:1px solid var(--brass-dim);background:color-mix(in srgb,var(--brass) 9%,var(--ink2))}
.fhead b{display:block;font-family:var(--sc);font-weight:700;font-size:17px;letter-spacing:.03em;color:var(--brass)}
.fhead p{margin:3px 0 0;font-size:15px;color:var(--text)}
.fhead em{font-style:normal;font-weight:800;color:var(--brass)}
.fopt:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media (max-width:420px){ .fpick{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Game pixels are owned by Pixi. .hc/.cr/.socket/.tab are invisible hit targets: layout, cursor and semantics only, never paint (test/rendering-ownership.test.mjs). */
#native-ui{position:relative;z-index:1;min-height:100dvh}
.hc{position:relative;aspect-ratio:2/3;border:2px solid transparent;padding:9px 6px 7px;opacity:0;user-select:none;-webkit-user-select:none}
.hc:not(.off){touch-action:none}
.cr,.socket{position:absolute;inset:0;opacity:0}
[data-gpu-sigil],.bar>i{visibility:hidden}
[data-gpu-tab],[data-gpu-life]{opacity:0}
#native-ui [data-gpu-surface]{background:transparent;border-color:transparent;box-shadow:none}
.sheet[data-gpu-backdrop]{background:transparent}
.panel.t-modal{transform:none}
body:is(:has(.sheet.is-open),:has(.pause .is-open)) :is(#app>:not(.handpeek),#timeline,.passcorner,#cardpanel,#btnBestiary){filter:blur(var(--blur-medium));opacity:.45}
.hand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:7px}
/* a power's badge wherever its rule is explained (card preview, Grimoire powers and bestiary):
   like the hand chips, a solid school ring for keywords and a dashed brass ring for summon effects */
.pwi{--s:44px;flex:none;display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--c) 30%,#1b1a2a),#0e0d18 75%);
  border:1.5px solid color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--c) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.12);color:color-mix(in srgb,var(--c) 70%,#fff)}
.sum>.pwi{border:1.5px dashed color-mix(in srgb,var(--brass) 75%,transparent);color:var(--brass);
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--brass) 18%,#1b1a2a),#0e0d18 75%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.pwi svg{width:64%;height:64%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.pwi .kic{width:64%;height:64%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
@keyframes selglow{0%,100%{box-shadow:0 0 0 2px var(--brass),0 0 14px rgba(205,174,112,.35),0 16px 28px rgba(0,0,0,.55)}50%{box-shadow:0 0 0 2px var(--brass),0 0 30px rgba(205,174,112,.7),0 16px 28px rgba(0,0,0,.55)}}
body.dragging{cursor:grabbing}
body.dragging *{cursor:grabbing}
/* the hand is held as a fan: the cards overlap along an arc, turned out from below. The card under the pointer (or the
   picked one) rises out of the fan, straightens and grows, and the others lean away to make room for it */
/* a held-up outer card grows and tilts past the screen's edge; on phones that widened the page and scrolled it sideways
   mid-animation. The hand reaches out over #app's gutter and clips sideways there, so the cards keep their places */
.hand{padding-bottom:24px;margin-inline:-16px;padding-inline:16px;overflow-x:clip}   /* padding-bottom: room for the outer cards' dip and turned corners */
/* the cards are tall, 2:3, and at least 128px wide: on a phone that is wider than their column, so each is centred on its
   column and overlaps its neighbours, and the fan stays centred in the hand */
/* only the card itself reads these: not inherited, so writing them (on every move, and --push on every card each time the
   held one changes) restyles the card, not everything in it */
@property --push{syntax:'<number>';inherits:false;initial-value:0}
.hand .hc{width:max(100%,128px);justify-self:center}

/* effects */
#fx{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
/* what to tap while a summon effect is aimed (wide screens), pinned by js/ui.js on the line between the boards; outside
   #app and over the WebGL layer, so the tether and the creatures' fire pass beneath it */
#aimhint{position:fixed;z-index:70;translate:-50% -50%;pointer-events:none}
#aimhint:empty{display:none}
#aimhint .hint{margin:0;padding:3px 18px 3px 3px;border-radius:999px;flex-wrap:nowrap;white-space:nowrap;font-size:17px;font-weight:400;color:#FFD36B;background:rgba(10,12,28,.94);border:1px solid #FFC14D;box-shadow:0 0 18px rgba(255,165,40,.45)}
#aimhint .pwi{--s:30px}
/* the WebGL effects layer (js/pixifx.js), just under the vignette and the hush in #fx */
#pfx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* the card view's retained WebGL scene (js/pixistage.js): the scene, the creature, the near particles and the foil, cut to the
   stage and faded at its foot in WebGL; it reaches above the stage (--cpover, set there) so a tall creature stands out
   over the card's top edge. The creature's slot keeps only its place */
.cpart .art.sprite i{background:none;filter:none}
.burnt{color:var(--fire)}
.cursedt{color:var(--dark)}


/* sheet */
.sheet{--backdrop-blur:var(--blur-medium);position:fixed;inset:0;z-index:60;background:rgba(7,8,18,.92);overflow-y:auto;overscroll-behavior:contain;padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(env(safe-area-inset-bottom,0px) + 12px)}
.panel{width:100%;max-width:560px;margin-inline:auto;background:var(--ink2);border:1px solid var(--line);border-radius:16px}
.sheet.compact{background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.85) 100%),rgba(7,8,18,.5)}
.sheet.tome{background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.85) 100%),rgba(7,8,18,.5)}
.pause{background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.85) 100%),rgba(7,8,18,.5)}
#sheetClose[hidden]{display:none}
#sheetLearn[hidden]{display:none}
#sheetTabs[hidden]{display:none}
#sheetFind[hidden]{display:none}
#sheetLearn{margin-left:auto}   /* sits beside Close at the right of the header */
/* the New duel panel sits in the middle of the screen; auto margins keep it scrollable when it is taller than the window */
.sheet.compact:not([hidden]){display:flex;flex-direction:column}
.sheet.compact .panel{max-width:420px;margin-block:auto;position:relative}
/* transitions.dev: modal open / close, with the backdrop fading alongside */
.t-modal{transform-origin:center;opacity:0;pointer-events:none;transition:transform var(--modal-open-dur) var(--modal-ease),opacity var(--modal-open-dur) var(--modal-ease);will-change:transform,opacity}
.t-modal.is-open{transform:scale(1);opacity:1;pointer-events:auto}
.t-modal.is-closing{transform:scale(var(--modal-scale-close));opacity:0;pointer-events:none;transition:transform var(--modal-close-dur) var(--modal-ease),opacity var(--modal-close-dur) var(--modal-ease)}
.sheet{opacity:0;transition:opacity var(--modal-open-dur) var(--ease-smooth-out)}
.sheet.is-open{opacity:1}
.sheet.is-closing{transition-duration:var(--modal-close-dur)}
/* end of duel: a full-screen verdict instead of a panel. The crest spins in, the verdict lands on the music's big hit
   (ENDING.hit in the script), the rest rises after it. The effects layer draws the verdict, its light and its weather
   (js/pixitext.js, js/pixicast.js): victory gold under turning rays and rising embers, defeat blood-red under falling ash. */
.sheet.end{--backdrop-blur:6px}   /* the field behind, blurred */
.sheet.end.lose{}
.sheet.end.draw{}   /* in the colour of the school that dealt the finishing blow */
.sheet.end .t-modal{transform:none;will-change:auto;background:none;border:0;max-width:760px;min-height:100%;display:flex;flex-direction:column;justify-content:center}   /* no transform, so the rays and particles can be fixed to the screen */
.sheet.end .phead{display:none}
.end .endcard{--glow:245,208,98;text-align:center;padding-block:24px;isolation:isolate}
.end.lose .endcard{--glow:220,50,56}
.end.draw .endcard{--glow:166,120,240}
/* Painted crowns: an intact gold crest for victory, a broken crown for defeat and mutual ruin. */
.crest{display:block;width:clamp(128px,22vw,192px);height:auto;margin:0 auto 12px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(var(--glow),.35))}
.verdict{position:relative;margin:0;font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:.04em;text-wrap:balance}
/* the DOM title keeps the verdict's place and words (for the layout, screen readers and the layer's size and font), unseen */
.verdict span{display:inline-block;padding:0 .08em;font-size:clamp(54px,12.5vw,116px);opacity:0}
.end.draw .verdict span{font-size:clamp(44px,10vw,92px)}
.end .endcard .eyebrow{font-family:var(--sc);font-weight:700;font-size:clamp(14px,3.6vw,17px);letter-spacing:.28em;color:rgba(var(--glow),.85);text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.75)}
.endline{margin:10px auto 18px!important;max-width:34ch;font-size:clamp(16px,2.4vw,19px);color:var(--text)!important;text-wrap:balance}
.endcard{--me:#86E3A0;--foe:#FF6B5B}   /* yours and the foe's, as the field marks friend and foe */
.endstats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,5vw,44px);margin:0 0 26px}
.endstats div{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px}
.endstats b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.endstats span{font-family:var(--sc);font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--dim)}
/* both mages' life through the duel, drawn in from the left */
.lifeline{flex-basis:100%;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0}
.lifeline svg{width:200px;height:auto;overflow:visible}
.lifeline polyline{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1}
.lifeline .me{stroke:var(--me)}
.lifeline .foe{stroke:var(--foe);opacity:.85}
/* the duel's highlights: the finishing blow, then three creatures that stood out, each over a glow in its school's colour
   and its own shadow */
.highlights{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px clamp(8px,3vw,28px);margin:0 0 28px}
.highlights:empty{display:none}
.hl{display:flex;flex-direction:column;align-items:center;gap:4px;width:clamp(104px,28vw,210px);padding:8px 4px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.02)}   /* a panel the verdict's light passes beneath (js/pixicast.js) */
.hl.fin{width:min(100%,340px);border:1px solid rgba(var(--glow),.3);background:rgba(var(--glow),.06)}
.hlk{font-family:var(--sc);font-weight:700;font-size:clamp(12px,3.2vw,15px);letter-spacing:clamp(.5px,.17vw,2.4px);color:rgba(var(--glow),.9)}
.hl>img{width:clamp(64px,16vw,96px);height:auto;margin:2px 0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
  background:radial-gradient(ellipse 34% 6% at 50% 93%,rgba(0,0,0,.6),transparent),radial-gradient(closest-side,color-mix(in srgb,var(--c) 50%,transparent),transparent)}
.hl.fin>img{width:clamp(96px,26vw,124px)}
/* whose creature it was, as a tag before its name */
.hlname{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 7px}
.hlt{--t:var(--me);padding:1px 8px 2px;border-radius:999px;border:1px solid color-mix(in srgb,var(--t) 55%,transparent);background:color-mix(in srgb,var(--t) 16%,transparent);color:var(--t);font-family:var(--sc);font-weight:700;font-size:12px;letter-spacing:.08em;line-height:1.3;white-space:nowrap}
.hlt.foe{--t:var(--foe)}
.hl b{font-family:var(--display);font-weight:400;font-size:clamp(17px,2.8vw,22px);line-height:1.1;color:var(--text)}
/* its number, large in its school's colour by the stat's icon */
.hl small{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6px;font-size:clamp(14px,3.4vw,16px);line-height:1.3;color:color-mix(in srgb,var(--text) 70%,var(--dim))}
.hl small b{font-size:1.65em;line-height:1;color:color-mix(in srgb,var(--c) 45%,#fff);font-variant-numeric:tabular-nums}
.hli{width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
/* wide, there is no height for one column: the stats stand left of the verdict, the highlights right of it, each creature
   beside its words */
@media (min-width:1200px){
  .sheet.end .t-modal{max-width:1400px}
  .end .endcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px) minmax(0,1fr);column-gap:4vw;align-items:center}
  .verdict span{font-size:clamp(54px,6.8vw,112px)}
  .end.draw .verdict span{font-size:clamp(44px,5.4vw,88px)}
  .end .endcard>*{grid-column:2}
.end .endcard>.endstats{grid-row:1/span 6;margin:0;flex-direction:column}
.end .endcard>.highlights{grid-row:1/span 6;margin:0;flex-direction:column}
  .end .endcard>.endstats{grid-column:1;justify-self:end;gap:26px}
  .end .endcard>.highlights{grid-column:3;flex-wrap:nowrap;align-items:flex-start;gap:14px}
  .endstats div:nth-child(2){order:-1}   /* the rounds first, then the two lives */
  .endstats b{font-size:40px}
  .endstats span{font-size:12px}
  .lifeline{flex-basis:auto}
  .end .hl{display:grid;grid-template:1fr auto auto auto 1fr / auto 1fr;column-gap:14px;width:min(340px,100%);padding:6px 10px;text-align:left}
  .end .hl>img{grid-area:1/1/6/2;width:84px}
  .end .hl.fin>img{width:112px}
  .end .hlk{grid-area:2/2}
  .end .hlname{grid-area:3/2;justify-content:flex-start}
  .end .hl small{grid-area:4/2;justify-content:flex-start}}
.sheet.is-open .endcard>*{animation:endin .5s var(--ease-bounce) backwards}
.sheet.is-open .endcard>.crest{animation:crest-in .7s .03s var(--ease-smooth-out) backwards}
.sheet.is-open .endcard>.eyebrow{animation-delay:.2s}
.sheet.is-open .endcard>.verdict{animation:none}   /* it holds still: the layer's title is laid over it */
.sheet.is-open .endcard>.endline{animation-delay:.8s}
.sheet.is-open .endcard>.endstats{animation-delay:.9s}
.sheet.is-open .endcard>.highlights{animation:none}   /* its tiles land one by one instead, as hlIn (js/grimoire.js) chimes */
:root{--hl-at:400ms;--hl-step:120ms}   /* when the first tile lands, and the beat between them (js/grimoire.js hlIn chimes on it) */
.sheet.is-open .hl{animation:endin .4s var(--ease-bounce) calc(var(--hl-at) + var(--i)*var(--hl-step)) backwards}
.sheet.is-open .hl>img{animation:hl-pop .45s var(--ease-bounce) calc(var(--hl-at) + 50ms + var(--i)*var(--hl-step)) backwards}
.sheet.is-open .lifeline polyline{animation:life-draw 1.6s var(--ease-smooth-out) 1s backwards}
@keyframes hl-pop{from{opacity:0;transform:translateY(16px) scale(.4)}}
@keyframes life-draw{from{stroke-dashoffset:1}}
.sheet.is-open .endcard>.btnrow{animation-delay:1.1s}
.sheet.is-open .endcard>.rmnote{animation-delay:1.1s}
@keyframes endin{from{opacity:0;transform:translateY(18px);filter:blur(var(--blur-medium))}}
@keyframes crest-in{0%{opacity:0;transform:rotate(-240deg) scale(.2);filter:blur(6px) brightness(3)}70%{opacity:1;filter:none}}
/* the children quake, not #app itself: a transform on #app would become the frame of the fixed mage panels inside it and throw them sideways */
.phead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.phead h2{margin:0;font-family:var(--display);font-weight:400;font-size:22px;color:var(--brass)}
.pbody{padding:0 16px 18px}
.ctabs{display:flex;flex-wrap:wrap;gap:6px;padding-block:12px 10px}
.ctab{flex:none;display:inline-flex;align-items:center;gap:5px;font-family:var(--sc);font-weight:700;font-size:13px;letter-spacing:.04em;border:1px solid var(--brass-dim);border-radius:999px;padding:5px 11px;color:var(--text)}
.ctab .sig{width:18px;height:18px}
.ctab.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,var(--ink2))}
/* the Grimoire: a wider sheet laid out like the printed rulebook */
.sheet.tome:not([hidden]){display:flex;overflow:hidden;padding:max(12px,5vh) max(12px,3vw)}
.sheet.tome .panel{max-width:1440px;height:100%;margin:auto;position:relative;display:flex;flex-direction:column}
.sheet.tome .pbody{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
.sheet.tome .gm{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
.sheet.tome .gbest{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
#sheetTabs{margin-right:auto;padding-block:0}
.phead{position:relative}
#sheetFind{position:absolute;left:50%;top:calc(50% + 2px);translate:-50% -50%;width:clamp(160px,100% - 650px,340px)}   /* in the middle of the title bar, clear of the tabs and Close */
body:has(#sheet.tome:not([hidden])) :is(#fx,#aimhint){visibility:hidden}   /* the duel's effects play above the sheets, but not over the Grimoire */
body:has(#sheet.tome:not([hidden])) #pfx{filter:blur(var(--blur-medium))}   /* the Grimoire is native: CSS blurs the resting duel canvas, no Pixi backdrop */
.gscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-inline:-16px;padding:0 16px 24px;-webkit-mask:linear-gradient(transparent,#000 12px);mask:linear-gradient(transparent,#000 12px)}   /* cards scrolling under the filters fade out instead of meeting an edge */
.gm{--gbox:rgba(10,12,28,.42);font-size:15px;line-height:1.5}
.gtabs .ctab.on{color:var(--brass)}
.gm section{display:flex;flex-direction:column;gap:12px;padding-top:22px}
.gm section+section{margin-top:6px}
.gm h3{margin:0;font-family:var(--display);font-weight:400;font-size:23px;line-height:1.1;color:var(--brass);word-spacing:.12em;text-wrap:balance}
.gm h4{margin:0;font-family:var(--display);font-weight:400;font-size:19px;line-height:1.1;word-spacing:.12em}
.gm p{margin:0;max-width:70ch}
.gm .dim{color:var(--dim)}
.gm .sig{display:inline-block;vertical-align:-4px;width:20px;height:20px}
.gm .sti{display:inline-block;vertical-align:-4px;width:20px;height:20px}
.gm svg{flex:none}
.geb{font-family:var(--sc);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-dim)}
.glede{font-size:18px;line-height:1.4;color:var(--text)}   /* body text, not the small-caps display face: it is a sentence, not a title */
.gcap{font-family:var(--sc);font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--dim)}
.gbox{background:var(--gbox);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.gbox p{color:var(--dim)}
.gfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.gbig{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:400;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.gm .gbig .sti{width:28px;height:28px}
.gfocus{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:600px}
.gfd{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 11px;border:1px solid var(--line);border-radius:10px;background:var(--gbox)}
.gm .gfd .sig{width:30px;height:30px}
.gfd b{font-size:17px;font-variant-numeric:tabular-nums}
.gfd small{font-family:var(--sc);font-weight:700;font-size:10.5px;letter-spacing:.05em;color:var(--dim)}
.gfd.on{border-color:color-mix(in srgb,var(--c) 60%,var(--line));background:color-mix(in srgb,var(--c) 10%,var(--gbox))}
.gfd.on::after{content:"";position:absolute;left:6px;right:6px;bottom:3px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--c) 10%,var(--c) 90%,transparent);filter:drop-shadow(0 0 4px var(--c))}
.gsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;counter-reset:gs}
.gsteps>li{position:relative;counter-increment:gs;background:linear-gradient(180deg,rgba(205,174,112,.07),transparent 40%),var(--gbox);border:1px solid var(--line);border-radius:14px;padding:0 18px 16px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.gsteps>li::before{content:counter(gs,upper-roman);position:absolute;top:10px;left:14px;z-index:1;font-family:var(--display);font-size:26px;line-height:1;color:var(--brass);text-shadow:0 0 12px rgba(205,174,112,.45)}
.gsteps>li>b{font-family:var(--sc);font-weight:800;font-size:18px;letter-spacing:.02em;color:var(--text)}
.gsteps>li>span{color:var(--dim)}
/* each step opens on a little picture of itself */
.gsv{display:grid;place-items:center;min-height:118px;margin:0 -18px 6px;padding:16px 18px 12px;border-bottom:1px solid var(--line);background:radial-gradient(70% 90% at 50% 100%,rgba(205,174,112,.1),transparent 70%),rgba(8,9,22,.35)}
.gsmana{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:100%;max-width:300px}
.gsmana span{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 8px;border:1px solid var(--line);border-radius:9px;background:rgba(10,12,28,.5)}
.gm .gsmana .sig{width:26px;height:26px}
.gsmana b{font-size:14px;font-variant-numeric:tabular-nums;color:var(--dim)}
.gsmana .on{border-color:color-mix(in srgb,var(--c) 60%,var(--line));background:color-mix(in srgb,var(--c) 12%,rgba(10,12,28,.5))}
.gsmana .on b{color:var(--text)}
.gsmana .on::after{content:"";position:absolute;left:6px;right:6px;bottom:2px;height:2px;background:linear-gradient(90deg,transparent,var(--c) 22%,var(--c) 78%,transparent);filter:drop-shadow(0 0 3px var(--c))}
.gsplay{display:flex;align-items:center;gap:12px}
.gsplay>svg{width:40px;height:16px;color:var(--brass-dim)}
.gsmini{position:relative;width:74px;height:74px;border-radius:12px;display:grid;place-items:center;border:1.5px solid color-mix(in srgb,var(--c) 60%,transparent);background:linear-gradient(180deg,rgba(13,15,30,.1),rgba(13,15,30,.6)),var(--school-scene,none) center/cover,var(--ink3);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.gsmini .art{display:flex;width:86%;height:86%}
.gsmini .art.sprite i{height:100%;margin:auto}
.gsmini .gcost{top:-9px;right:-12px;height:24px;padding:0 7px 0 2px;font-size:14px}
.gm .gsmini .gcost .sig{width:19px;height:19px}
.gslot.gopen{width:64px;border:1.5px dashed var(--brass);background:radial-gradient(circle,rgba(205,174,112,.18),transparent 70%);box-shadow:0 0 16px rgba(205,174,112,.25);animation:gopen 2.4s ease-in-out infinite}
@keyframes gopen{50%{box-shadow:0 0 4px rgba(205,174,112,.1);border-color:var(--brass-dim)}}
.gorder{width:100%;max-width:300px}
.gorder .gslot{max-width:48px}
.gord{font-family:var(--sc);font-weight:800;font-size:11px;color:var(--brass);width:18px;height:18px;margin-top:3px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--brass-dim)}
.gsx{list-style:none;margin:6px 0 0;padding:10px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:5px}
.gsx li{position:relative;padding-left:16px;line-height:1.4;color:var(--dim)}
.gsx li::before{content:"";position:absolute;left:2px;top:.55em;width:5px;height:5px;transform:rotate(45deg);background:var(--brass-dim)}
.gtip{display:flex;gap:12px;align-items:baseline;max-width:none!important;padding:12px 16px;border-radius:12px;border:1px solid rgba(205,174,112,.3);background:linear-gradient(90deg,rgba(205,174,112,.1),transparent 60%);color:var(--text)}
.gtip b{flex:none;font-family:var(--sc);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.gcombat{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:14px;align-items:center}
.gfight{display:flex;flex-direction:column;gap:12px}
.gfcol{display:flex;flex-direction:column;gap:12px}
.gboard{gap:8px}
.gmage{display:flex;align-items:center;gap:6px;font-family:var(--sc);font-weight:700;font-size:12.5px;letter-spacing:.06em;color:var(--dim)}
.gm .gmage .sti{width:18px;height:18px}
.gfield{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 8px}
.glane{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.gslot{width:100%;max-width:84px;aspect-ratio:1;border-radius:12%;border:1px dashed var(--line);display:grid;place-items:center;overflow:hidden}
.gslot.full{border:1.5px solid var(--c);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%);box-shadow:0 0 12px color-mix(in srgb,var(--c) 30%,transparent)}
.gslot .art{display:flex;width:84%;height:84%}
.gslot .art.sprite i{height:100%;margin:auto}
.glane small{min-height:1.3em;font-family:var(--sc);font-weight:700;font-size:11px;letter-spacing:.03em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.garrow{text-align:center;color:var(--brass-dim);font-size:16px;line-height:1}
.gplay{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:gp}
.gplay li{counter-increment:gp;position:relative;padding-left:30px;color:var(--dim)}
.gplay li::before{content:counter(gp);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-family:var(--sc);font-weight:800;font-size:11.5px;color:var(--brass);border:1px solid var(--brass-dim)}
.gplay b{font-weight:800}
.gkeys{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 18px;margin:4px 0 0;border-top:1px solid var(--line)}
.gkeys dt{margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
.gkeys dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
.gkeys dt{font-family:var(--sc);font-weight:700;font-size:13.5px;letter-spacing:.05em;color:var(--brass)}
.gkeys dd{color:var(--dim)}
.gstatus{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.gstatus>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:2px 10px;align-items:center;padding:12px 14px;border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 12%,transparent),transparent 70%),var(--gbox);border:1px solid color-mix(in srgb,var(--c) 40%,var(--line))}
.gstatus svg{grid-row:1/3;align-self:start;width:26px;height:26px;margin-top:2px;color:var(--c)}
.gm .gstatus .sti{grid-row:1/3;align-self:start;width:26px;height:26px;margin-top:2px;color:var(--c)}
.gm .gstatus .kic{grid-row:1/3;align-self:start;width:26px;height:26px;margin-top:2px;color:var(--c)}
.gstatus b{font-family:var(--sc);font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--c)}
.gstatus span{align-self:start;line-height:1.4;color:var(--dim)}
.gtiers{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.gtiers span{display:inline-flex;align-items:baseline;gap:5px;padding:1px 8px;border-radius:99px;border:1px solid var(--line);font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums}
.gtiers i{font-style:normal;font-family:var(--sc);font-weight:800;font-size:11.5px;color:var(--brass)}
.gdiffs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.gdiffs>li{--r:#C98A55;position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 18px 16px;border-radius:14px;overflow:hidden;border:1px solid color-mix(in srgb,var(--r) 40%,var(--line));
  background:radial-gradient(90% 70% at 18% 0%,color-mix(in srgb,var(--r) 16%,transparent),transparent 70%),var(--gbox)}
.gdiffs>li[data-rank="adept"]{--r:#B8C4DA}
.gdiffs>li[data-rank="archmage"]{--r:#E6BE5A}
.gdiffs>li[data-rank="friend"]{--r:#8FA8FF}
.gdiffs>li::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--r),transparent)}
.gdh{display:flex;align-items:center;gap:12px}
.gdiffs .emb{flex:none;width:58px;height:58px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--r) 45%,transparent))}
.gdh>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.gdh .geb{color:color-mix(in srgb,var(--r) 70%,var(--dim))}
.gdiffs b{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.1;color:color-mix(in srgb,var(--r) 75%,#fff)}
.gpips{display:flex;gap:4px;margin-left:auto;align-self:start;padding-top:6px}
.gpips u{width:10px;height:10px;transform:rotate(45deg);border:1px solid color-mix(in srgb,var(--r) 60%,transparent)}
.gpips u.on{background:var(--r);box-shadow:0 0 6px color-mix(in srgb,var(--r) 70%,transparent)}
.gdiffs p{color:var(--text)}
.gdiffs dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 14px;margin:0;border-top:1px solid var(--line)}
.gdiffs dt{margin:0;padding:8px 0;border-bottom:1px solid rgba(43,49,96,.6)}
.gdiffs dd{margin:0;padding:8px 0;border-bottom:1px solid rgba(43,49,96,.6)}
.gdiffs dl>:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
.gdiffs dt{font-family:var(--sc);font-weight:700;font-size:12px;letter-spacing:.06em;color:color-mix(in srgb,var(--r) 70%,var(--dim))}
.gdiffs dd{line-height:1.4;color:var(--dim)}
.gm .gsubh{margin-top:14px;font-size:20px;color:var(--brass)}
.gtips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px;counter-reset:gt}
.gtips li{counter-increment:gt;position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px 14px 56px;border-radius:12px;border:1px solid var(--line);background:var(--gbox)}
.gtips li::before{content:counter(gt);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:17px;color:var(--brass);border:1px solid var(--brass-dim);background:radial-gradient(circle,rgba(205,174,112,.15),transparent 70%)}
.gtips b{font-family:var(--sc);font-weight:800;font-size:15.5px;letter-spacing:.02em}
.gtips span{line-height:1.45;color:var(--dim)}
.gchips{display:flex;flex-wrap:wrap;gap:4px}
.gchip{display:inline-flex;align-items:center;gap:4px;height:23px;padding:0 9px 0 6px;border-radius:12px;font-family:var(--sc);font-weight:700;font-size:12.5px;letter-spacing:.03em;white-space:nowrap;color:var(--text);background:color-mix(in srgb,var(--c,var(--brass)) 20%,rgba(10,12,28,.65));border:1px solid color-mix(in srgb,var(--c,var(--brass)) 60%,transparent)}
.gchip svg{width:14px;height:14px;color:color-mix(in srgb,var(--c,var(--brass)) 65%,#fff)}
.gchip.sum{background:rgba(205,174,112,.1);border:1px dashed color-mix(in srgb,var(--brass) 75%,transparent)}
.gchip.sum svg{color:var(--brass)}
.gchip .kic{width:17px;height:17px;margin:-2px 0}
.gschools{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.gschool{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;border-radius:14px;overflow:hidden;border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));background:linear-gradient(180deg,rgba(21,24,45,.35) 0,rgba(21,24,45,.9) 96px,var(--ink2) 150px) no-repeat,var(--school-scene,none) center 30%/100% auto no-repeat,var(--ink2)}   /* the scene shows only behind the header; the text sits on a plain plate */
.ghead{display:flex;align-items:center;gap:12px}
.glegs{display:flex;gap:6px;margin-left:auto;align-self:start;padding-left:8px}
.glegs .gav{--s:56px;border-width:2px;border-color:color-mix(in srgb,var(--c) 85%,#fff);box-shadow:0 2px 8px rgba(0,0,0,.55),0 0 10px color-mix(in srgb,var(--c) 40%,transparent)}
.glegs .gav .art{width:84%;height:84%;margin-top:0}   /* the whole creature inside its ring */
@media (max-width:760px){ .glegs .gav{--s:44px}}
.gtag{font-family:var(--display);font-size:17px!important;line-height:1.25;color:color-mix(in srgb,var(--c) 55%,#fff)!important}
.gmeters{display:flex;flex-wrap:wrap;gap:6px 32px}
.gmeter{display:flex;align-items:center;gap:10px}
.gmeter span{min-width:76px;font-family:var(--sc);font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--dim)}
.gmeter i{display:flex;gap:3px}
.gmeter u{width:16px;height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.gmeter u.on{background:var(--c);box-shadow:0 0 6px color-mix(in srgb,var(--c) 60%,transparent)}
.gpro{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 14px;margin:0}
.gpro dt{margin:0;padding:4px 0}
.gpro dd{margin:0;padding:4px 0}
.gpro dt{font-family:var(--sc);font-weight:700;font-size:12px;letter-spacing:.06em;color:color-mix(in srgb,var(--c) 70%,#fff);padding-top:6px}
.gpro dd{line-height:1.45;color:var(--text)}
.gpairs{display:flex;flex-wrap:wrap;gap:6px}
.gpair{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px 0 5px;border-radius:13px;font-family:var(--sc);font-weight:700;font-size:12.5px;color:var(--text);background:color-mix(in srgb,var(--c) 16%,rgba(10,12,28,.7));border:1px solid color-mix(in srgb,var(--c) 55%,transparent)}
.gpair:hover{background:color-mix(in srgb,var(--c) 28%,rgba(10,12,28,.7))}
.gm .gpair .sig{width:18px;height:18px;vertical-align:0}
.gown{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:4px}
.gschool .gown .geb{color:var(--dim)}
.gm .ghead .sig{width:44px;height:44px}
.ghead h4{font-size:22px;color:var(--c)}
.gschool p{color:#D4CFC2}
.gschool .geb{color:var(--text);letter-spacing:.08em}
.gcombos{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* six schools and six combos: 2 or 3 columns, so the rows always come out even */
@media (min-width:640px){
.gschools{grid-template-columns:repeat(2,minmax(0,1fr))}
.gcombos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:920px){ .gcombos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gcombo{position:relative;display:flex;flex-direction:column;gap:9px;padding:16px 16px 14px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--a) 9%,transparent),transparent 45%,color-mix(in srgb,var(--b) 7%,transparent)),var(--gbox)}
.gcombo::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--a),var(--b))}
.gcombo.on{border-color:var(--brass-dim);box-shadow:0 0 0 1px rgba(205,174,112,.25),0 0 22px -6px rgba(205,174,112,.4)}
.gcpair{display:flex;align-items:center;gap:10px}
.gsigs{display:flex}
.gm .gsigs .sig{width:30px;height:30px;padding:3px;border-radius:50%;background:rgba(10,12,28,.85);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--a) 70%,transparent)}
.gm .gsigs .sig+.sig{margin-left:-8px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--b) 70%,transparent)}
.gcpair .geb{color:var(--dim);letter-spacing:.1em}
.gmine{margin-left:auto;font-family:var(--sc);font-weight:700;font-size:11px;letter-spacing:.06em;color:#1B1507;background:var(--brass);border-radius:99px;padding:1px 8px}
.gcombo h4{font-family:var(--sc);font-weight:800;font-size:18px;letter-spacing:.02em;background:linear-gradient(90deg,color-mix(in srgb,var(--a) 70%,#fff),color-mix(in srgb,var(--b) 70%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.gseq{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gseq>svg{width:14px;height:14px;color:var(--dim)}
.gcombo p{color:var(--text)}
.gneed{font-family:var(--sc);font-weight:700;font-size:11.5px;letter-spacing:.05em;color:var(--dim);padding-top:8px;border-top:1px solid rgba(43,49,96,.7)}
/* the powers, school by school on one set of columns: small schools share a row, every card the same width */
.gpws{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:26px 12px}
.gpwg{grid-column:span var(--n,1);display:grid;grid-template-columns:subgrid;gap:10px 12px;align-content:start}   /* evenCards caps the span at the row */
.gm .gpwh .sig{width:28px;height:28px}
.gpwh h4{font-size:21px;color:var(--c)}
.gpwh .geb{color:var(--dim)}
.gpwh::after{content:"";flex:1;height:1px;margin-left:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,transparent),transparent)}
.gpwh{display:flex;align-items:center;gap:8px;grid-column:1/-1}
.gpw{grid-column:1/-1;display:grid;grid-template-columns:subgrid;gap:12px}
/* a power card over its school's scene: icon beside its name and gloss, the rule, then who carries it */
.gpc{min-height:var(--card-h,auto);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto 1fr;align-items:center;gap:1px 12px;padding:14px 16px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));
  background:linear-gradient(180deg,rgba(13,15,30,.42),rgba(13,15,30,.86) 48%,rgba(13,15,30,.95)),var(--school-scene,none) center 35%/cover,var(--ink3);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--c) 30%,transparent);transition:transform .2s,border-color .2s,box-shadow .2s}
.gpc:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 75%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--c) 40%,transparent),0 8px 22px -8px color-mix(in srgb,var(--c) 55%,transparent)}
.gpc .pwi{--s:44px;grid-row:1/3}
.gpc b{align-self:end;font-family:var(--sc);font-weight:800;font-size:16px;letter-spacing:.02em;color:color-mix(in srgb,var(--c) 70%,#fff);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.ggl{align-self:start;font-family:var(--sc);font-weight:700;font-size:12px;letter-spacing:.04em;color:color-mix(in srgb,var(--c) 45%,var(--dim))}
.gpc p{grid-column:1/-1;margin-top:10px;color:#D4CFC2}
/* Leech and Weakened name each other: a link in the text, and the card it leads to lights up for a moment */
.glink{all:unset;cursor:pointer;font-weight:700;color:color-mix(in srgb,var(--c,var(--dark)) 60%,#fff);text-decoration:underline dotted color-mix(in srgb,var(--c,var(--dark)) 70%,transparent);text-underline-offset:3px}
.glink:hover{text-decoration-style:solid}
.glink:focus-visible{outline:2px solid var(--c,var(--dark));outline-offset:2px;border-radius:3px}
.gpc.gflash{animation:gflash 1.6s var(--ease-in-out)}
@keyframes gflash{0%,35%{box-shadow:0 0 0 2px var(--c),0 0 28px color-mix(in srgb,var(--c) 55%,transparent)}}
.gwho{grid-column:1/-1;align-self:end;display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:9px;border-top:1px solid color-mix(in srgb,var(--c) 22%,rgba(255,255,255,.06))}
.gwho small{font-size:12.5px;line-height:1.35;color:var(--dim)}
.gwho small i{font-style:normal;font-weight:800;margin-left:3px;color:color-mix(in srgb,var(--c) 60%,#fff)}
/* a creature's face in a coin */
.gav{--s:30px;flex:none;width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 50% 65%,color-mix(in srgb,var(--c) 55%,#1c1c34),#0c0c1a 90%);border:1.5px solid color-mix(in srgb,var(--c) 65%,transparent);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.gav .art{display:flex;width:112%;height:112%;margin-top:14%}
.gav .art.sprite i{height:100%;margin:auto;filter:brightness(1.25) drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.gavs{display:flex;flex:none}
.gavs .gav+.gav{margin-left:calc(var(--s) * -.3)}
/* How to play: a rulebook's contents on the left, one page beside it */
.gdoc{flex:1;min-height:0;display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0 40px;align-items:start}
.gnav{display:flex;flex-direction:column;gap:18px;padding-block:22px 12px}
.gnav{max-height:100%;overflow-y:auto;overscroll-behavior:contain}
.gpage{max-height:100%;overflow-y:auto;overscroll-behavior:contain}
.gpage{padding-bottom:24px}
.gnav>div{display:flex;flex-direction:column;gap:2px}
.gnav .geb{padding:0 12px 6px}
.gnav button{text-align:left;padding:7px 12px;border-left:2px solid var(--line);font-family:var(--sc);font-weight:700;font-size:14.5px;letter-spacing:.03em;color:var(--dim)}
.gnav button:hover{color:var(--text)}
.gnav button[aria-current]{color:var(--brass);border-left-color:var(--brass);background:linear-gradient(90deg,rgba(205,174,112,.12),transparent)}
.gpn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:36px;padding-top:18px;border-top:1px solid var(--line)}
.gpn button{display:flex;flex-direction:column;align-items:start;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;text-align:left}
.gpn button:hover{border-color:var(--brass-dim)}
.gpn .nx{grid-column:2;align-items:end;text-align:right}
.gpn b{font-family:var(--sc);font-weight:700;font-size:15.5px;letter-spacing:.03em;color:var(--brass)}
.gpn .pv b::before{content:"← "}
.gpn .nx b::after{content:" →"}
/* narrow: the contents become a scrolling row of pills above the page */
@media (max-width:760px){
  .gdoc{display:block;overflow-y:auto}
.gnav{max-height:none;overflow-y:visible}
.gpage{max-height:none;overflow-y:visible}
  .gnav{flex-direction:row;gap:6px;max-height:none;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:14px 16px 0}
  .gnav>div{display:contents}
  .gnav .geb{display:none}
  .gnav button{flex:none;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:13px}
  .gnav button[aria-current]{border-color:var(--brass);background:rgba(205,174,112,.14)}}
/* Bestiary: a filter bar pinned under the tabs, then each school with its shared keywords explained once, then its tiers.
   The scene stays in the art; the text sits on a plain plate, and a card spells out only the powers its school does not share. */
.gbest [hidden]{display:none!important}
.gm .gbest{gap:0;padding-top:0}
.gfilter{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:16px 0 0}
.gfr{display:flex;flex-wrap:wrap;gap:5px}
.gfr .ctab{padding:4px 10px}
.gfr .ctab b{font-family:var(--display);font-weight:400;font-size:14px;color:var(--brass);margin-right:2px}
.gq{flex:1 1 220px;max-width:340px;display:flex;align-items:center;gap:7px;height:31px;padding:0 12px;border:1px solid var(--brass-dim);border-radius:999px;background:rgba(10,12,28,.55);color:var(--dim);cursor:text}
.gq:focus-within{border-color:var(--brass);color:var(--brass)}
.gq svg{width:15px;height:15px}
.gq input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;padding:0;color:var(--text);font:inherit;font-size:14px}
.gq input::placeholder{color:var(--dim)}
.gcount{margin-left:auto;font-family:var(--sc);font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.gnone{display:flex;align-items:center;gap:12px;padding-top:28px;color:var(--dim)}
.gm .gbs{display:flex;flex-direction:column;gap:20px;padding-top:12px}   /* just clear of the scroller's fade */
.gbh{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 14px}
.gm .gbh .sig{width:56px;height:56px}
.gbh h4{font-size:32px;color:var(--c)}
.gbh .geb{color:var(--dim)}
.gbh>p{grid-column:1/-1;color:var(--text);line-height:1.55}
.gshared{grid-column:1/-1;list-style:none;margin:4px 0 0;padding:16px 0 0;border-top:1px solid color-mix(in srgb,var(--c) 30%,transparent);display:flex;flex-direction:column;gap:14px}
.gshared li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start}
.gshared .kic{width:24px;height:24px;color:var(--c)}
.gshared svg{width:24px;height:24px;color:var(--c)}
.gshared p{line-height:1.45;color:var(--dim)}
.gshared b{display:block;font-family:var(--sc);font-weight:700;font-size:15px;letter-spacing:.04em;color:color-mix(in srgb,var(--c) 70%,#fff)}
@media (min-width:900px){
  .gm .gbs{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0 36px;align-items:start}
  .gbh{position:sticky;top:12px}}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(210px,(100% - 42px) / 4),1fr));gap:14px}   /* four a row when each gets 210px, else three: a tier's cards fill its width, each as tall as the tallest in its row */
.gcard{display:flex;flex-direction:column;min-width:0;border-radius:12px;overflow:hidden;border:1px solid color-mix(in srgb,var(--c) 22%,var(--line));background:var(--ink3)}
.gcard.leg{border-color:color-mix(in srgb,var(--c) 55%,var(--line))}
.gart{position:relative;aspect-ratio:5/4;display:grid;place-items:center;background:linear-gradient(180deg,rgba(13,15,30,.1),rgba(13,15,30,0) 50%,var(--ink3)),var(--school-scene,none) center 75%/cover,color-mix(in srgb,var(--c) 18%,var(--ink3))}
.gart .art{display:flex;width:84%;height:92%}
.gart .art.sprite i{height:100%;margin:auto}
.gcost{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:2px;height:28px;padding:0 9px 0 3px;border-radius:14px;background:rgba(10,12,28,.82);border:1.5px solid var(--c);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.gm .gcost .sig{width:22px;height:22px;vertical-align:0}
/* the stats as dark corner tags on the art, as on the card preview: attack left, armour and life right */
.gst{position:absolute;left:7px;right:7px;bottom:5px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}
.gst>span{display:flex;gap:4px}
.gst b{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 8px 0 4px;border-radius:9px;background:rgba(10,12,28,.84);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 35%,rgba(255,255,255,.08));font-weight:800;font-size:16px;line-height:1;font-variant-numeric:tabular-nums}
.gm .gst .sti{width:18px;height:18px;vertical-align:0}
.gcb{flex:1;display:flex;flex-direction:column;gap:9px;padding:8px 12px 14px}
.gcb h4{font-size:19px}
.gcb .meta{margin-top:-8px}
.gshr{display:flex;flex-wrap:wrap;gap:4px}
.gshr .gchip{height:21px;padding:0 8px 0 5px;font-size:11.5px;color:var(--dim);background:transparent;border-color:color-mix(in srgb,var(--c) 30%,transparent)}
.grls{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.grls li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;align-items:start}
.grls .pwi{--s:26px;box-shadow:none}
.grls p{line-height:1.42;color:var(--dim)}
.grls .grh{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;min-height:26px;align-content:center}   /* the power's name on its own line, the rule below */
.grls b{font-family:var(--sc);font-weight:700;font-size:14px;letter-spacing:.02em;color:color-mix(in srgb,var(--c) 70%,#fff)}
.grls small{font-family:var(--sc);font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.grls .num{font-style:normal;font-weight:800;color:var(--text)}
.gplain{line-height:1.4;color:var(--dim);font-style:italic}
@media (max-width:760px){
  .sheet.tome .gbest{overflow-y:auto}   /* on a phone the filters would cover a third of the screen: they scroll away with the cards */
  .gscroll{flex:none;overflow:visible;-webkit-mask:none;mask:none}
  .phead{flex-wrap:wrap}
  #sheetTabs{order:1;width:100%}
  #sheetFind{position:static;translate:none;order:2;width:100%}
  .gfr{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;width:calc(100% + 32px)}
  .gfr::-webkit-scrollbar{display:none}
  .gfr .ctab{flex:none}
  .gq{max-width:none}
  .gcombat{grid-template-columns:minmax(0,1fr)}}
/* a wide Grimoire sets the combat example beside its rules */
@media (min-width:1200px){
  .gfight{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;align-items:start}
  .gfight .gcombat{grid-template-columns:minmax(0,1fr);gap:18px}
  .gfight .gboard{max-width:560px}
  .gfight .gkeys{margin-top:0}
  .gfight .gstatus{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gfight .gstatus>:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:560px){
  .gkeys{grid-template-columns:minmax(0,1fr)}
  .gkeys dt{padding-bottom:0;border-bottom:0}
  .gkeys dd{padding-top:2px}
  .gfocus{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gcards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.loglist{list-style:none;margin:0;padding:10px 0 0;display:flex;flex-direction:column}
.loglist li{--lc:156,153,181;position:relative;display:grid;grid-template-columns:28px 1fr;gap:6px;padding-block:5px;font-size:13.5px}
/* a rail runs down the round column: each round opens with a brass pill carrying its number, and every entry
   after it hangs a dot in the colour of the side that acted (brass for you, violet for the enemy) */
.loglist li::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:1px;translate:-50% 0;background:rgba(205,174,112,.16)}
.loglist li:first-child::before{top:12px}
.loglist li:last-child::before{bottom:auto;height:12px}
.loglist li.rs:not(:first-child){margin-top:5px;padding-top:10px;border-top:1px solid rgba(43,49,96,.7)}
.loglist .r{position:relative;justify-self:center;align-self:start;margin-top:3px;padding:1px 5px;border-radius:999px;font-family:var(--sc);font-weight:800;font-size:9.5px;line-height:1.3;letter-spacing:.06em;
  color:#E6CD93;background:color-mix(in srgb,var(--brass) 14%,var(--ink2));border:1px solid rgba(205,174,112,.42)}
.loglist .r:empty{width:7px;height:7px;padding:0;margin-top:.55em;background:rgb(var(--lc));border:0;box-shadow:0 0 0 2px var(--ink2),0 0 6px rgba(var(--lc),.7)}
.loglist li.s0{--lc:205,174,112;color:var(--text)}
.loglist li.s1{--lc:166,120,240;color:#D8C9F2}
.loglist li.sx{color:var(--brass)}
/* older rounds recede, so the current one reads first */
.loglist li.a1{opacity:.8}
.loglist li.a2{opacity:.64}
.loglist li.a3{opacity:.5}
.choice{display:grid;gap:8px;margin-block:14px}
.opt{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"ic name" "txt txt";align-items:center;align-content:start;column-gap:10px;row-gap:6px;text-align:left;border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px}
/* every opponent's emblem sits in the same corner, its name beside it and the description on a row of its own */
.opt .emb{grid-area:ic;width:44px;height:44px;transition:transform .2s ease,filter .2s ease}
.opt b{grid-area:name;font-family:var(--display);font-weight:400;font-size:17px}
.opt span{grid-area:txt;color:var(--dim);font-size:13px}
.opt:not(.on) .emb{filter:saturate(.75) brightness(.85) drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.opt.on .emb{transform:scale(1.06)}
.opt.on{border-color:var(--brass);background:rgba(205,174,112,.08)}
/* a friend online is a different kind of opponent: it wears teal instead of brass */
.opt[data-diff="online"]{--friend:#4FD1C5;border-color:color-mix(in srgb,var(--friend) 40%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--friend) 12%,transparent),transparent 65%)}
.opt[data-diff="online"] b{color:var(--friend)}
/* the opponent's style: one slim segmented row under the strengths, the chosen style's words beneath it */
.stylepick{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 14px;margin-top:4px}
.stylepick>b{font-family:var(--sc);font-weight:700;font-size:15px;letter-spacing:.03em;color:var(--brass)}
.stylepick p{grid-column:2;margin:0;padding-inline:14px;font-size:13px;color:var(--dim);text-align:center}
.stylepick p[data-at="defensive"]{text-align:left}
.stylepick p[data-at="aggressive"]{text-align:right}   /* the words sit under the style they describe */
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--ink2)}
.seg button{--c:var(--brass);display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px;border-radius:999px;font-family:var(--display);font-size:16px;color:var(--dim);transition:color .2s ease,background-color .2s ease,box-shadow .2s ease}
.seg button[data-style="defensive"]{--c:var(--earth)}
.seg button[data-style="aggressive"]{--c:var(--fire)}
.seg svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.seg button:hover{color:var(--text)}
.seg button.on{color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent),0 0 12px -4px var(--c)}
.seg button.on svg{opacity:1}
@media (max-width:520px){ .stylepick{grid-template-columns:minmax(0,1fr)} .stylepick p{grid-column:1} .seg button{font-size:14px;padding:7px 4px;gap:4px}}
.opt[data-diff="online"].on{border-color:var(--friend);background:linear-gradient(160deg,color-mix(in srgb,var(--friend) 22%,transparent),color-mix(in srgb,var(--friend) 6%,transparent) 70%);box-shadow:0 0 22px -6px color-mix(in srgb,var(--friend) 70%,transparent)}
.endcard h2{font-family:var(--display);font-weight:400;font-size:40px;margin:6px 0 4px;color:var(--brass);text-wrap:balance}
.endcard p{margin:0 0 18px;color:var(--dim)}
.btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fpick+.btnrow{margin-top:26px}
#btnBegin{min-width:min(100%,320px)}

@media (min-width:600px){ .slot{height:118px}}
.cardpanel{display:none}
.timeline{display:none}
.passcorner{display:none}
#btnBestiary{display:none}
@media (min-width:1200px){
  :root{
    /* the gutter between the game and each side column (on top of #app's 16px padding): 16px from 1600px, gone at 1200px,
       and what it gives up goes to the side columns, so the card panel, the life bars and the log get the room.
       On the smaller of these screens the left column is the slimmer, so the card panel is wider and shows more without
       scrolling */
    --gut:clamp(0px,4vw - 48px,16px);
    --pr:clamp(352px - var(--gut),(100vw - 1040px)/2 - 12px - var(--gut),400px);
    --pl:clamp(226px - var(--gut),(100vw - 1040px)/2 - 12px - var(--gut),300px);
    --gw:min(1040px,100vw - var(--pr) - var(--pl) - 24px - 2 * var(--gut));
    --gl:max(var(--pl) + 12px + var(--gut),min((100vw - var(--gw))/2,100vw - var(--gw) - var(--pr) - 12px - var(--gut)));
    --hdr:96px;   /* the title row and the now-playing row under it */
    /* the left column keeps the same margin to the window edge as the card panel on the right */
    --edge:calc(100vw - var(--gl) - var(--gw) - var(--gut) - var(--pr));
  }
  /* title and menu sit in the top-left corner, above the enemy mage */
  .top{position:fixed;top:12px;left:var(--edge);width:var(--pl);flex-wrap:wrap;row-gap:5px}
  /* the sound button, then the now-playing pill, take a row of their own under the title: the empty ::after breaks the line,
     and the 5px row-gap on each side of it spaces the rows 10px apart. With no song the button stays alone on that row */
  .top::after{content:'';order:1;flex-basis:100%}
  .top .menu{order:1;margin-left:auto}   /* at the title row's right end, over the now-playing pill's */
  .top .sound{order:2;margin-left:0}
  .top .np{order:3;flex:1;margin-left:0}
  #app{z-index:2} /* lets the menu dropdown open over the timeline panel */
  #app{max-width:var(--gw);margin-left:var(--gl)}
  .slot{height:auto;aspect-ratio:5/6}
  .timeline{display:flex;flex-direction:column;position:fixed;z-index:1;top:calc(32px + var(--hdr) + var(--foeh,84px));left:var(--edge);width:var(--pl);max-height:calc(100dvh - 62px - var(--hdr) - var(--foeh,84px) - var(--youh,84px));padding:18px 16px;border-radius:var(--r-panel)}
.mage.you{position:fixed;z-index:1;bottom:12px;left:var(--edge);width:var(--pl);padding:12px 14px}
.mage.foe{position:fixed;z-index:1;bottom:12px;left:var(--edge);width:var(--pl);padding:12px 14px}
  .mage.foe{top:calc(16px + var(--hdr));bottom:auto}
.you .lifenum{--hs:32px}
.foe .lifenum{--hs:32px}
.you .lifenum b{font-size:calc(var(--lifefs,22px) * 1.4)}
.foe .lifenum b{font-size:calc(var(--lifefs,22px) * 1.4)}
.you .bar{height:14px}
.foe .bar{height:14px}
  .you .pass{display:none}
  /* centred in the right column, under the card panel, with a gap either side; its bottom edge is the hand's and the life panel's */
  .passcorner{display:inline-flex;position:fixed;z-index:1;bottom:12px;left:calc(var(--gl) + var(--gw) + var(--gut) + 40px);width:calc(var(--pr) - 80px);height:48px;padding:0 28px;font-size:21px}
  #btnBestiary{display:grid;position:fixed;z-index:1;top:12px;right:var(--edge)}   /* above the card panel, at its right edge, the turn heading beside it */
  .passcorner:lang(de){padding:0 10px;gap:8px;font-size:17px}   /* the longer German label and keycap */
  /* round and turn share one line in the top-right corner, level with the title, so the card panel below gets the height */
  .turn{position:fixed;z-index:1;top:12px;left:calc(var(--gl) + var(--gw) + var(--gut));width:calc(var(--pr) - 40px)}
.turn::before{min-width:0}
.turn::after{min-width:0}   /* the lines give way first, so the longest turn fits beside the Bestiary button */
  .cardpanel{display:block;position:fixed;z-index:1;top:48px;left:calc(var(--gl) + var(--gw) + var(--gut));width:var(--pr);max-height:calc(100vh - 128px);overflow-y:auto;overscroll-behavior:contain;--pad:24px;padding:var(--pad);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--c,var(--brass)) 18%,var(--ink2)) 0%,var(--ink2) 45%);border:1px solid color-mix(in srgb,var(--c,var(--brass)) 45%,transparent);font-size:18px;line-height:1.5}
  .cardpanel:empty{display:none}
  .handpeek{display:none}
  .hand{overflow-x:visible}}
/* narrow screens: the full card floats over the board, just above the hand. The anchor takes no height (and gives back
   #app's gap), and the card is the wide screens' panel drawn at 90%, nearly as wide as the screen */
.handpeek{position:relative;z-index:5;height:0;margin-top:-9px}
.handpeek .cardpanel{display:block;position:absolute;left:0;right:0;bottom:6px;margin-inline:auto;width:calc((100vw - 24px) / .9);max-width:480px;max-height:calc((100dvh - 250px) / .9);zoom:.9;overflow-y:auto;overscroll-behavior:contain;
  --pad:24px;padding:var(--pad);border-radius:16px;background:var(--ink2);font-size:18px;line-height:1.5;box-shadow:0 20px 44px rgba(0,0,0,.6)}
.handpeek .cardpanel:empty{display:none}
.handpeek .cpart{--r:.75;--feet:.85}   /* a shorter stage, so the card fits above the hand on a phone */
.handpeek .cpart .art.sprite{--sh:93%}
.tlstatus{padding-bottom:12px;border-bottom:1px solid var(--brass-dim);font-size:15px;line-height:1.4}
.tlstatus .dim{color:var(--dim)}
.timeline .loglist{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:6px}
.timeline .loglist li{font-size:13.5px;line-height:1.38}
.cpcost{position:absolute;top:16px;left:16px;height:40px;display:flex;align-items:center;gap:6px;padding:0 13px 0 6px;border-radius:10px 20px 20px;background:rgba(10,12,28,.78);border:2px solid var(--c);color:var(--text);font-size:35px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.cpcost .sig{order:-1;width:25px;height:25px}   /* the attack plaque's size, a pill level with the tier gem; its top-left corner half the frame's, so it reads as following the frame's curve */
/* The art sits on a full-bleed stage, the school's scene drawn by the WebGL stage. The stage is --r of its width tall; the
   stage places the scene's ground line (--ground, share of the scene's height) on --feet (share of the stage's height), where the creatures stand. */
.cpart{--r:.8;--feet:.83;position:relative;aspect-ratio:1/var(--r);margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 8px;background:transparent}
.cpart .art{position:absolute;left:24px;right:24px;top:50%;height:170px;transform:translateY(-50%)}
/* sprites are square with the feet 90% down the frame: --sh of the stage tall (83% of its width), bottom edge 10% of its height below --feet.
   That is taller than the stage leaves room for: a tall creature's head stands out over the card's top edge */
.cpart .art.sprite{--sh:calc(83% / var(--r));left:50%;right:auto;top:auto;bottom:calc((1 - var(--feet)) * 100% - .1 * var(--sh));height:var(--sh);aspect-ratio:1;transform:translateX(-50%)}
.cpcost{z-index:1}
.cplead{margin:0 0 4px;color:var(--brass);font-size:16px}
.cardpanel h2{margin:0;font-family:var(--display);font-weight:400;font-size:36px;line-height:1.1}
.cppow{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cppow li{padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.04)}
.cppow li b{display:block;font-weight:800;color:var(--c)}
.cppow .frostt b{color:var(--frost)}
.cppow .cursedt b{color:var(--dark)}
.cppow .burnt b{color:var(--fire)}   /* a state is named in the colour of the school it comes from, whatever the creature's */
.cppow li b:has(small){display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cppow li b small{flex:none;font-size:.72em;font-weight:700;letter-spacing:.04em;color:var(--dim)}
.cppow .num{font-style:normal;font-weight:800;font-variant-numeric:lining-nums;color:color-mix(in srgb,var(--c) 70%,#fff)}
.cppow .frostt .num{--c:var(--frost)} .cppow .burnt .num{--c:var(--fire)} .cppow .cursedt .num{--c:var(--dark)}
/* each school's painted scene: faint behind the creatures on the board, and the Grimoire's school headers; the card view's
   stage paints its own from the detailed one (js/pixistage.js), standing the creature on --ground */
[data-school="fire"]{--school-scene:url('../backgrounds/cards/thumbs/fire.webp');--ground:.76}
[data-school="earth"]{--school-scene:url('../backgrounds/cards/thumbs/earth.webp');--ground:.64}
[data-school="water"]{--school-scene:url('../backgrounds/cards/thumbs/water.webp');--ground:.74}
[data-school="air"]{--school-scene:url('../backgrounds/cards/thumbs/air.webp');--ground:.78}
[data-school="light"]{--school-scene:url('../backgrounds/cards/thumbs/light.webp');--ground:.8}
[data-school="dark"]{--school-scene:url('../backgrounds/cards/thumbs/dark.webp');--ground:.72}
/* the card view stands its creature further up each scene, on ground that is lit, not in the shadow at the painting's foot */
.cpcard[data-school="earth"]{--ground:.57} .cpcard[data-school="water"]{--ground:.65}
.cpcard[data-school="light"]{--ground:.7} .cpcard[data-school="dark"]{--ground:.66}
/* the creature graded to lift it off the scene without washing it pale; the stage draws its aura behind it, the foil its
   rim light (js/pixifoil.js), the stage its shadows. A flier keeps a soft drop shadow of its own */
.cardpanel[data-school]{background:var(--ink2)}
/* Epic card view: a metal frame by cost tier (dark iron, bronze, silver, and a turning gold rim for tier IV) with a hairline of
   its school inside, as the hand's cards have, a tier gem opposite the cost,
   the WebGL stage and foil on the art, a gilded name over an ornamented subtitle, embossed stat plaques, and a reveal when a new card appears. */
@property --spin{syntax:'<angle>';inherits:true;initial-value:0deg}
.cpcard{--frame:linear-gradient(155deg,var(--m1),var(--m2) 28%,var(--m1) 50%,var(--m3) 74%,var(--m2))}
.cpcard[data-tier="3"]{--frame:conic-gradient(from var(--spin),var(--c),var(--m1) 12%,var(--m3) 25%,var(--c) 38%,var(--m1) 50%,var(--c) 62%,var(--m1) 75%,var(--m3) 88%,var(--c))}
/* the card view's border: a polished band of its tier's metal, and gold turns round the panel; tier I stays plain dark */
.cardpanel:has(>.cpcard){border:2px solid transparent;border-radius:20px;background:linear-gradient(var(--cink),var(--cink)) padding-box,linear-gradient(155deg,var(--m1),var(--m2) 28%,var(--m1) 50%,var(--m3) 74%,var(--m2)) border-box;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 44px -8px color-mix(in srgb,var(--c) 55%,transparent),0 6px 14px rgba(0,0,0,.6),0 26px 60px rgba(0,0,0,.85)}
.cardpanel:has(>.cpcard[data-tier="0"]){background:linear-gradient(var(--cink),var(--cink)) padding-box,linear-gradient(160deg,color-mix(in srgb,var(--m2),#fff 12%),var(--m2) 45%,color-mix(in srgb,var(--m2),#000 22%)) border-box}   /* plain, with the faintest fall of light */
.cardpanel:has(>.cpcard[data-tier="3"]){background:linear-gradient(var(--cink),var(--cink)) padding-box,conic-gradient(from var(--spin),var(--c),var(--m1) 12%,var(--m3) 25%,var(--c) 38%,var(--m1) 50%,var(--c) 62%,var(--m1) 75%,var(--m3) 88%,var(--c)) border-box;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 60px -6px color-mix(in srgb,var(--c) 75%,transparent),0 6px 14px rgba(0,0,0,.6),0 26px 60px rgba(0,0,0,.85);animation:cp-spin 6s linear infinite}
@keyframes cp-spin{to{--spin:1turn}}
/* in Safari (macOS, iPadOS, iOS: -webkit-named-image is WebKit's alone) a turning conic gradient repaints the whole panel, and
   everything inside it, every frame: there the frames stand still */
@supports (-webkit-touch-callout:none) or (background:-webkit-named-image(i)){
.cardpanel:has(>.cpcard[data-tier="3"]){animation:none}
[data-tier="3"]>.tgem{animation:none}}
/* the stage's top corners; its shared scene is cut to them and faded at its foot in WebGL (js/pixistage.js STAGE_FADE: the
   fade eases in and out, so it comes to rest in the ink below without a visible edge where it ends; it starts below the
   ground the creatures stand on, so their contact shadows keep the lit ground to show on) */
.cpart{isolation:isolate;border-radius:18px 18px 0 0}
/* so the panel doesn't scroll (a scroller would cut the creature's head): the art stays put and only what is under it scrolls */
.cardpanel:has(>.cpcard){overflow:visible;display:flex;flex-direction:column}
.cpcard{display:flex;flex-direction:column;min-height:0}
.cpcard>:is(.cpart,.cpst){flex:none}
/* full width, so its ground (below) reaches the frame; and it starts higher than its text, faded in, so the scroller
   doesn't cut the name's glow off in a hard line (nor the text as it scrolls up under the stage). It never scrolls
   sideways: the name swelling in on reveal would otherwise give it a horizontal scrollbar for a moment */
/* the stage's foot sinks into a dark ink of the school's colour, which deepens into the panel's ink below it (the WebGL
   stage fades to the same --foot: STAGE_INK and STAGE_FOOT, js/pixistage.js). Only below the stage: over it, it would wash out the
   ground and the shadows the creature stands on */
/* the card view's own ink, darker than the panels' */
.cpcard{--foot:color-mix(in srgb,var(--c) 12%,var(--cink))}
.cpbody{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin:-24px calc(-1 * var(--pad)) 0;padding:24px var(--pad) 0;-webkit-mask:linear-gradient(transparent,#000 24px);mask:linear-gradient(transparent,#000 24px);background:linear-gradient(180deg,transparent 62px,var(--foot) 62px,var(--cink) 284px)}
/* the name and everything below it tuck up into the stage's faded foot */
.cpcard .cpart{margin-bottom:-38px}
/* a line of lore at the foot of the card, set apart by a short rule */
.cplore{margin:12px 8px 0;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--m2) 45%,transparent);text-align:center;text-wrap:balance;font-style:italic;font-size:13.5px;line-height:1.22;color:color-mix(in srgb,var(--m1) 45%,var(--dim))}
.cpcard>:not(.cpart,.cpcost){position:relative}
/* tier gem, opposite the cost badge */
.cptier{position:absolute;z-index:1;top:16px;right:16px;width:40px;height:40px;display:grid;place-items:center;transform:rotate(45deg);border:2px solid transparent;border-radius:9px;background:linear-gradient(145deg,color-mix(in srgb,var(--c) 30%,#0B0D1C),#0B0D1C 70%) padding-box,var(--frame) border-box;box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 16px -2px color-mix(in srgb,var(--c) 60%,transparent)}
.cptier b{transform:rotate(-45deg);font-family:var(--display);font-weight:400;font-size:16px;line-height:1;color:var(--m1);text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 8px color-mix(in srgb,var(--c) 70%,transparent)}
/* the name in its tier metal and an ornamented subtitle */
.cardpanel .cpname{margin:0;text-align:center;font-size:36px;text-wrap:balance;color:#fff;filter:drop-shadow(0 2px 1px rgba(0,0,0,.85)) drop-shadow(0 3px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px color-mix(in srgb,var(--c) 45%,transparent))}
.cpcard[data-tier="3"] .cpname{filter:drop-shadow(0 2px 1px rgba(0,0,0,.85)) drop-shadow(0 3px 10px rgba(0,0,0,.6)) drop-shadow(0 0 20px color-mix(in srgb,var(--c) 85%,transparent))}
.cplead{text-align:center}
.cpsub{display:flex;align-items:center;gap:12px;margin:2px 0 0;font-family:var(--sc);font-weight:700;font-size:12px;letter-spacing:.11em;color:color-mix(in srgb,var(--c) 60%,#fff);white-space:nowrap}
.cpsub::before{content:"";flex:1;height:1px;background:var(--m2)}
.cpsub::after{content:"";flex:1;height:1px;background:var(--m2)}
.cpsub::before{-webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000)}
.cpsub::after{-webkit-mask:linear-gradient(270deg,transparent,#000);mask:linear-gradient(270deg,transparent,#000)}
/* stat tags on the stage's foot, above the name, as on a card in play: attack in one corner, armour and life in the other */
.cpcard .cpst{height:0;display:flex;align-items:flex-end;gap:8px;margin:0;padding:0 2px;z-index:1}
.cpcard .cpst .sa{--glow:#FF8A5B;margin-right:auto}
.cpcard .cpst .sh{--glow:#FF4D6A}
.cpcard .cpst .sr{--glow:#9FD8FF}
.cpcard .cpst b{flex:none;margin-bottom:6px;display:flex;align-items:center;gap:6px;height:40px;padding:0 11px 0 6px;border-radius:13px;font-size:35px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;background:rgba(10,12,28,.78);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,rgba(255,255,255,.1)),0 3px 10px rgba(0,0,0,.5);text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 18px color-mix(in srgb,var(--glow) 45%,transparent)}
.cpcard .cpst .sti{width:25px;height:25px}
.cpcard .cpst b small{font-size:15px;color:var(--dim)}
/* powers, dense: a small badge, the name run into the first line of its rule */
.cpcard .cppow{margin-top:10px;gap:8px;line-height:1.35}
.cardpanel:has(>.cpcard){--cink:#0B0C19;--pad:14px;padding-bottom:var(--pad)}   /* a card sits closer to its frame than other panel content */
.cpcard .cppow li{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px}
.cppow .frostt .pwi{--c:var(--frost)} .cppow .burnt .pwi{--c:var(--fire)} .cppow .cursedt .pwi{--c:var(--dark)}
/* resting: a creature of yours that came this turn, in quiet brass */
.cppow .restt .pwi{--c:var(--brass)} .cppow .restt b{color:var(--brass)}
/* the powers in three groups under small headings: always on (the school's colour, a solid ring), once on arrival (brass:
   a dashed ring, a thin brass frame and a faint brass wash, so it reads as an event, not a trait), and right now */
.cppow li.pwh{display:flex;align-items:center;gap:8px;padding:6px 2px 0;background:none;font-family:var(--sc);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cppow li.pwh:first-child{padding-top:0}
.cppow li.pwh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.cppow li.sum{background:linear-gradient(90deg,color-mix(in srgb,var(--brass) 14%,transparent),color-mix(in srgb,var(--brass) 4%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brass) 70%,transparent)}
.cppow li.sum b{color:color-mix(in srgb,var(--brass) 60%,#fff)}
.cppow li.sum b small{font-family:var(--sc);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--brass) 85%,var(--dim))}
.cpcard .cppow li>span{min-width:0;font-size:14px;text-wrap:pretty}   /* no lone word on a last line */
.cpcard .cppow .pwi{--s:28px}
.cpcard .cppow li b{display:inline;margin-right:.35em;font-size:15px}
.cpcard .cppow li b:has(small){display:flex}
.reveal .cpcost{animation:cp-pop .19s var(--ease-bounce) .06s both}
.reveal .cptier{animation:cp-pop .19s var(--ease-bounce) .06s both}
.reveal .cpname{animation:cp-name .24s var(--ease-smooth-out) .036s both}
.reveal .cpst b{animation:cp-pop .19s var(--ease-bounce) .08s both}
.reveal .cpsub{animation:cp-up .18s var(--ease-smooth-out) both}
.reveal .cppow{animation:cp-up .18s var(--ease-smooth-out) both}
.reveal .cpsub{animation-delay:.07s} .reveal .cppow{animation-delay:.12s}
@keyframes cp-pop{0%{opacity:0;scale:.4}}
@keyframes cp-name{0%{opacity:0;transform:scale(1.18)}}
@keyframes cp-up{0%{opacity:0;transform:translateY(10px)}}
/* fit the whole duel in the window: boards and hand share the height left after the fixed rows */
@media (min-width:600px) and (min-height:560px){
  #app{height:100vh;height:100dvh;padding-block:8px 12px}
  .board{flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr)}
  .slot{height:auto;aspect-ratio:auto;min-height:0}
  .hand{flex:1.55 1 0;min-height:0;grid-template-rows:minmax(0,1fr);padding-inline:0}
.hand .hc{min-height:0;height:100%;width:auto;max-width:100%;aspect-ratio:4/5}   /* as wide as the column, but never wider than 4:5, so a short window keeps them card-shaped */
  .info{height:44px}}
@media (min-width:1200px){ .meridian{padding-block:8px 0} .info{display:none} .cpcard .cppow .pwi{--s:40px}
  /* with the band empty, the crest becomes a gem set between the two rules */}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
*::before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ============================== ONLINE ============================== */
.online{margin-top:20px;display:grid;gap:12px;justify-items:center;text-align:center}
.online p{margin:0}
.online input{font:inherit;font-size:16px;color:var(--text);background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:0 12px;height:44px;width:100%;min-width:0;text-align:center}
.online input:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.onrow{display:grid;gap:12px;width:100%}
.onfield{display:grid;gap:5px;align-content:start}
.onfield>span{font-family:var(--sc);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--dim)}
.joinrow{display:flex;gap:8px}
.joinrow input{flex:1;font-family:var(--sc);font-weight:800;letter-spacing:.3em;text-transform:uppercase}
.joinrow input::placeholder{letter-spacing:.08em;font-weight:500}
.roomcode{display:grid;gap:2px}
.roomcode span{font-family:var(--sc);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--dim)}
.roomcode b{font-family:var(--sc);font-weight:800;font-size:42px;letter-spacing:.2em;color:var(--brass);padding-left:.2em}
.neterr{color:#FF8A7A;font-size:14px}
/* rematch: on the verdict, and under the status once the board is shown; it glows when the friend has asked */
.btnRematch.hot:not(:disabled){animation:selglow 1.6s ease-in-out infinite}
.endcard .rmnote{margin:14px 0 0!important;min-height:1.4em;font-size:15px;color:var(--dim)}
.rmrow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-left:4px;vertical-align:middle}
.rmrow .rmnote{color:var(--dim)}
.rmrow .rmnote:empty{display:none}

/* The New duel panel spreads out on wide screens so it fits without scrolling: the opponents side by side,
   and the name, host and join controls in one row. */
@media (min-width:380px){ .sheet.compact .choice{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:780px){
  .sheet.compact .panel{max-width:740px}
  .sheet.compact .choice{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sheet.compact .fsep{margin:16px 0}
  .onrow{grid-template-columns:1fr auto 1fr;align-items:end}}
/* on big screens the whole panel scales up, text and buttons included */
@media (min-width:1100px) and (min-height:760px){ .sheet.compact .panel{zoom:1.18}}
/* phones: the whole duel fits the screen, with no scrolling. There is no status strip between the boards (the turn banner
   and the card preview say what it said); the boards and the hand share the height left after the fixed rows, and the
   hand's cards take their size from its height, 2:3 */
@media (max-width:599px){
  .meridian{display:none}
  #app{height:100vh;height:100dvh;gap:6px;padding-block:6px 8px;padding-inline:max(6px,env(safe-area-inset-left)) max(6px,env(safe-area-inset-right))}   /* the field near the screen edges */
  .handpeek{margin-top:-6px}
  .board{flex:1 1 0;min-height:60px;max-height:140px;grid-template-rows:minmax(0,1fr)}
  .slot{height:auto;min-height:0}
  .hand{flex:1.8 1 0;min-height:0;grid-template-rows:minmax(0,1fr);padding-bottom:14px}
.hand .hc{width:auto;height:100%;max-height:235px;align-self:center}
  .lifenum b{font-size:30px}   /* phone: the life reads at a glance, the mana numbers stay smaller */
  .tab b{font-size:17px}
  .tab{padding-inline:3px 10px;height:40px}   /* the sigil nearer the tab's left edge */
  /* the life panel in one row (name, bar, life, end turn), so the field and hand get the height */
  .mage{padding-block:5px}
  .life{flex-direction:row;align-items:center;gap:10px}
  .lifehead{display:contents}
  .who{flex:none;flex-direction:row;align-items:center;gap:6px}
  .bar{flex:1;order:1}
  .lifenum{order:2}
  .rank{font-size:0}}   /* emblem only */

body.hand-grab{cursor:grab}
body.hand-grab *{cursor:grab}
body.dragging{cursor:grabbing}
body.dragging *{cursor:grabbing}

/* Focus picking is native UI, including its selected sigil's movement. */
.fopt.on .sig{animation:focus-sigil 2.4s ease-in-out infinite alternate;filter:drop-shadow(0 0 7px var(--c));transform-origin:50% 65%}
@keyframes focus-sigil{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.1) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.fopt.on .sig{animation:none}}