/* ui owns this file; platform provides the base reset only.
   The look is stillstone's (labs/stillstone css/style.css, frame.css, cards.css): near-black stone and iron, bone words,
   tarnished gold, pixel frames drawn in code (src/ui/art.js: --px-frame-*), Monogram for words and numbers, Pixelify Sans
   for titles; a tavern lit by lanterns that breathe slowly. Calm on purpose: cards glide, nothing blinks. */
@font-face{font-family:'Monogram';src:url(assets/fonts/monogram.ttf) format('truetype');font-weight:400;font-display:swap;size-adjust:150%}
@font-face{font-family:'Pixelify Sans';src:url(assets/fonts/pixelify-sans.woff2) format('woff2');font-weight:400 700;font-display:swap}

html,body{margin:0;height:100%;background:#050407;color:#d4c6a6;font-family:'Monogram','Courier New',monospace;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0}
#rotate{display:none;position:fixed;inset:0;align-items:center;justify-content:center;background:#050407;font-size:5vw;text-align:center;z-index:99}
@media (orientation:portrait) and (max-width:700px){#rotate{display:flex}}

/* ---------- stage: 620-760 logical px tall, scaled to fit ---------- */
.stage{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;-webkit-touch-callout:none;
  --void:#050407;--night:#0a080c;--stone:#121015;--stone2:#1a161d;--stone3:#2a232c;--ash:#5e5662;
  --bone:#d4c6a6;--bone2:#a49678;--parch:#a8977a;--parch2:#7a6a50;--ink:#0e0b0e;
  --gold:#a07c34;--gold2:#5e4820;--glim:#d4b060;--lamp:#f4c46e;--blood:#5e1218;--blood2:#a02a32;--moss2:#698ba3;--mist:#7c8c9c;
  --pix:'Monogram','Courier New',monospace;--title:'Pixelify Sans','Monogram',monospace;
  --frame-iron:var(--px-frame-iron) 8 / 12px / 0 stretch;
  --slab:linear-gradient(rgba(16,13,18,.95),rgba(8,7,10,.97)),var(--px-wall) 0 0/64px 64px;
  font-family:var(--pix);color:var(--bone);word-spacing:-.15em;font-variant-ligatures:none;
  background:radial-gradient(ellipse at 50% 32%,rgba(52,34,18,.32) 0%,rgba(10,8,12,.8) 62%,rgba(5,4,7,.95) 100%),#0a080c url(assets/art/tavern.jpg) center/cover}
/* the lanterns: a warm light over the tavern that swells and settles */
.stage::before{content:"";position:absolute;left:50%;top:-140px;width:1100px;height:560px;margin-left:-550px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,rgba(244,196,110,.2),rgba(244,160,80,.07) 45%,transparent 70%);animation:lantern 5s ease-in-out infinite alternate}
@keyframes lantern{from{opacity:.6}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.stage::before{animation:none}}
.stage.fighting::before{animation:none;opacity:.8}
.screen{position:absolute;inset:0}
.hidden{display:none!important}
.stage.shake{animation:shake .3s}
@keyframes shake{20%{margin-left:-6px}40%{margin-left:6px}60%{margin-left:-4px}80%{margin-left:3px}}
.stage img,.art-img{image-rendering:pixelated}

/* ---------- buttons: plates in the iron frame ---------- */
.btn{font:inherit;font-size:30px;line-height:1;color:var(--bone);border:8px solid transparent;border-image:var(--px-frame-iron) 8 / 8px / 0 stretch;image-rendering:pixelated;border-radius:0;
  padding:6px 14px;cursor:pointer;background:radial-gradient(ellipse 90% 60% at 50% 35%,#2e2833,#141118 80%) padding-box;
  box-shadow:0 3px 0 #000,0 6px 12px rgba(0,0,0,.5);text-shadow:2px 2px 0 #000;transition:translate .1s,filter .15s,box-shadow .1s;
  display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;touch-action:manipulation}
.btn:hover{filter:brightness(1.18)}
.btn:active{translate:0 2px;box-shadow:0 1px 0 #000}
.btn.dim{filter:grayscale(.8) brightness(.65)}
.btn:disabled{filter:grayscale(1) brightness(.5);pointer-events:none}
.btn.on{border-image-source:var(--px-frame-gilt);background:radial-gradient(ellipse 90% 60% at 50% 35%,#5a4420,#241a0c 80%) padding-box;color:#ffe9b0}
.btn.small{font-size:30px;padding:0 10px;min-width:52px;height:52px}
.btn.big{font-size:38px;padding:10px 30px}
.btn.primary,.endturn{border-image-source:var(--px-frame-blood);background:radial-gradient(ellipse 90% 60% at 50% 35%,#8a3a1e,#3a110c 80%) padding-box;color:#ffe3c4;
  box-shadow:0 3px 0 #000,0 0 18px rgba(244,140,60,.35),inset 0 0 14px rgba(255,150,70,.25)}
.btn.sell{border-image-source:var(--px-frame-blood);background:radial-gradient(ellipse 90% 60% at 50% 35%,#6a1e1c,#2a0a0a 80%) padding-box;color:#ffd0c4}
.btn b{font-weight:400;color:var(--glim)}
.btn.sell b,.btn.primary b{color:#ffe08a}

/* ---------- cards: an iron rim (tier-coloured line), a twilight window, a name ribbon, pixel badges ---------- */
.card{position:absolute;left:0;top:0;width:132px;height:180px;transform-origin:0 0;font-size:20px;cursor:grab;touch-action:none;
  transition:transform .38s cubic-bezier(.2,.9,.25,1.05),opacity .3s;will-change:transform}
.card.dragging{transition:none;cursor:grabbing}
.c-in{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .3s,opacity .35s,filter .3s}
.card.enter .c-in{animation:pop .45s cubic-bezier(.2,1.3,.4,1) both;animation-delay:var(--delay,0ms)}
@keyframes pop{from{transform:translateY(-30px) rotate(-6deg) scale(.85);opacity:0}to{transform:none;opacity:1}}
.card.leave{pointer-events:none}
.card.leave .c-in{transform:scale(.4) translateY(-30px);opacity:0}
.card.dying{pointer-events:none}
.card.dying .c-in{transition:none;filter:grayscale(1) brightness(.8);animation:die calc(.6s / var(--sp,1)) ease-in forwards}
@keyframes die{18%{transform:scale(1.05) rotate(-2deg);opacity:1}100%{transform:translateY(26px) scale(.7) rotate(9deg);opacity:0}}
.card.reborn-in .c-in{animation:rebornin calc(.8s / var(--sp,1)) ease-out both}
@keyframes rebornin{0%{transform:translateY(-34px) scale(1.12);opacity:0}45%{opacity:1}100%{transform:none;opacity:1}}
.card.dragging .c-in{transform:rotate(-3deg);filter:drop-shadow(0 18px 14px rgba(0,0,0,.6))}
.card.selected .c-in{filter:drop-shadow(0 0 2px #f4d27a) drop-shadow(0 0 8px rgba(244,210,122,.7))}
.card.unaffordable .c-frame,.card.unaffordable .c-name{filter:grayscale(.6) brightness(.7)}
.card.targetable .c-in{animation:target .8s ease-in-out infinite alternate}
@keyframes target{from{filter:drop-shadow(0 0 2px #9be58e)}to{filter:drop-shadow(0 0 12px #9be58e)}}

.c-frame{position:absolute;inset:0;box-sizing:border-box;overflow:hidden;border:9px solid transparent;border-image:var(--px-card-t1) 6 / 9px / 0 stretch;image-rendering:pixelated;
  background:linear-gradient(172deg,color-mix(in srgb,var(--tribe,#a89878) 55%,#16141c) 0%,color-mix(in srgb,var(--tribe,#a89878) 22%,#16141c) 55%,#100e14 100%) padding-box;
  box-shadow:0 4px 0 #000,0 6px 10px rgba(0,0,0,.55)}
.card.tier2 .c-frame{border-image-source:var(--px-card-t2)}
.card.tier3 .c-frame{border-image-source:var(--px-card-t3)}
.card.tier4 .c-frame{border-image-source:var(--px-card-t4)}
.card.tier5 .c-frame{border-image-source:var(--px-card-t5)}
.card.tier6 .c-frame{border-image-source:var(--px-card-t6)}
.card.token .c-frame{filter:saturate(.7)}
.card.taunt .c-frame{border-width:12px;border-image:var(--px-frame-bone) 8 / 12px / 0 stretch;box-shadow:0 0 0 2px #000,0 4px 0 #000,0 6px 10px rgba(0,0,0,.55)}
.card.golden .c-frame{border-image:var(--px-card-gold) 6 / 9px / 0 stretch;
  background:linear-gradient(172deg,#fff0b0 0%,color-mix(in srgb,var(--tribe,#a89878) 35%,#c8860a) 50%,#4a3006 100%) padding-box;box-shadow:0 4px 0 #000,0 0 16px rgba(255,200,60,.6)}
.card.golden.taunt .c-frame{border-width:12px;border-image:var(--px-frame-gilt) 8 / 12px / 0 stretch}
.card.golden .c-frame::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.45) 50%,transparent 58%);
  animation:shine 4.6s infinite;animation-delay:calc(var(--gd,0) * -1s)}
@keyframes shine{0%{transform:translateX(-60%)}28%,100%{transform:translateX(60%)}}
.card.golden .c-frame::before{content:"";position:absolute;right:8px;top:10px;width:16px;height:16px;z-index:2;background:#fff8d8;opacity:0;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twinkle 4.6s infinite;animation-delay:calc(var(--gd,0) * -1s - 1.4s)}
@keyframes twinkle{0%,56%,74%,100%{transform:scale(0) rotate(0);opacity:0}65%{transform:scale(1.2) rotate(45deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.card.golden .c-frame::after,.card.golden .c-frame::before{animation:none}}
.card.reborn .c-frame{box-shadow:inset 0 0 18px rgba(200,230,255,.7),0 4px 0 #000}
.card.venom .c-frame{box-shadow:inset 0 -26px 22px -14px rgba(90,220,90,.7),0 4px 0 #000}
.c-bubble{position:absolute;inset:-4px;border-radius:10px;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.45),rgba(255,220,100,.22) 60%,rgba(255,190,40,.3));border:3px solid rgba(255,225,120,.9);box-shadow:0 0 14px rgba(255,210,80,.75)}
.card.shielded .c-bubble{opacity:1}
.c-tier{position:absolute;top:1px;left:2px;font-size:22px;line-height:20px;color:var(--glim);text-shadow:1px 1px 0 #000,-1px 0 0 #000;letter-spacing:-2px;z-index:2}
.c-art{position:absolute;left:0;right:0;top:5px;height:94px;text-align:center;font-size:62px;line-height:94px;font-family:system-ui,sans-serif;filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))}
.has-img{display:flex;align-items:flex-end;justify-content:center;line-height:0}
.art-img{opacity:0;transition:opacity .2s;-webkit-user-drag:none;pointer-events:none}.art-img.ready{opacity:1}
.c-name{position:absolute;left:0;right:0;top:110px;padding:1px 6px 3px;text-align:center;font-size:21px;line-height:20px;color:var(--bone);
  background:linear-gradient(#2e2730,#141016);border-top:2px solid var(--gold2);border-bottom:2px solid #000;text-shadow:1px 1px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.golden .c-name{color:#ffe9a8;border-top-color:#c8860a}
.card.taunt .c-name{top:113px}
.c-name.n-s{font-size:17px}
.c-name.n-2{top:97px;font-size:17px;line-height:17px;white-space:normal;padding:2px 4px 3px}
.card.taunt .c-name.n-2{top:100px}.card.name2 .c-kw{top:129px}
.c-kw{position:absolute;left:0;right:0;top:127px;display:flex;justify-content:center;gap:2px;font-style:normal;font-size:19px;line-height:22px;font-family:system-ui,sans-serif}
.c-kw i{font-style:normal}
.c-atk,.c-hp{position:absolute;bottom:-8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:36px;line-height:1;color:#fff;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;z-index:3;
  clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);padding-bottom:3px;box-sizing:border-box}
.c-atk{left:-8px;background:linear-gradient(#f4c45a,#b0761a 70%,#6a4008);box-shadow:inset 0 0 0 3px #2a1a06}
.c-hp{right:-8px;background:linear-gradient(#e85a50,#a02a32 70%,#5e1218);box-shadow:inset 0 0 0 3px #2a0806}
.c-atk.buffed span,.c-hp.buffed span{color:#b6ff9a}
.c-hp.hurt span{color:#ffc8bc}
.c-atk span.pulse,.c-hp span.pulse{animation:numpulse .5s}
@keyframes numpulse{40%{transform:scale(1.6)}}
.card.foe-card .c-art{transform:scaleX(-1)}
/* a tavern spell: a violet card, its rules under its name, its price on a coin (not in the hand: it's paid) */
.card.spell .c-frame{border-image:var(--px-card-spell) 6 / 9px / 0 stretch;
  background:radial-gradient(ellipse at 50% 24%,rgba(190,150,255,.38),transparent 62%),linear-gradient(172deg,#3a2858 0%,#211735 55%,#120e1c 100%) padding-box}
.card.spell .c-tier{left:auto;right:3px}
.card.spell .c-art{top:2px;height:64px;line-height:64px;font-size:46px}
.card.spell .c-name{top:72px}
.card.spell .c-name.n-2{top:64px}
.card.spell .c-text{position:absolute;left:3px;right:3px;top:88px;bottom:5px;display:flex;align-items:center;justify-content:center;text-align:center;
  line-height:1;color:var(--bone);text-shadow:1px 1px 0 #000;overflow:hidden}
.card.spell.name2 .c-text{top:92px}
.c-cost{position:absolute;left:-9px;top:-9px;width:42px;height:42px;border-radius:50%;z-index:3;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-bottom:3px;
  background:radial-gradient(circle at 35% 30%,#fff3b0,#f4c45a 35%,#b0761a 75%,#6a4008);box-shadow:inset 0 0 0 3px #2a1a06,0 3px 0 #000;
  font-size:32px;line-height:1;color:#fff;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.card.spell[data-zone=spell] .c-cost{display:none}
.card.drop-on .c-in{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 12px #b48ae6)}
.d-stats .cost{color:var(--glim)}

/* ---------- tavern screen ---------- */
.band{position:absolute;border-radius:4px;background:rgba(5,4,7,.38);border:2px solid rgba(212,198,166,.07);box-shadow:inset 0 0 30px rgba(0,0,0,.55);transition:background .2s,border-color .2s,box-shadow .2s,top .35s,height .35s}
.shop-band{left:198px;right:276px}
.board-band{left:20px;right:20px;background:rgba(5,4,7,.28)}
.hand-band{left:20px;right:280px}
.band-label{position:absolute;left:12px;top:2px;font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:rgba(212,198,166,.42)}
.band.has-cards .band-label{opacity:0}
.hand-band.drop-zone .band-label{opacity:1;color:var(--glim)}
.band-hint{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:44px;color:#ffe3d0;text-shadow:2px 2px 0 #000,0 0 10px #000;pointer-events:none}
.shop-band.frozen{background:rgba(110,170,220,.16);border-color:rgba(150,200,240,.6);box-shadow:inset 0 0 40px rgba(110,180,240,.3)}
.shop-band.sell-zone{background:rgba(160,42,50,.28);border-color:#c24a40}
.shop-band.sell-zone .band-hint{display:flex}
.shop.selling .card[data-zone=shop]{opacity:.25}
.shop-band.sell-zone.over{background:rgba(160,42,50,.5);box-shadow:inset 0 0 50px rgba(228,80,70,.5)}
.board-band.drop-zone,.hand-band.drop-zone{border-color:rgba(244,196,110,.55);background:rgba(244,196,110,.08)}
.board-band.over,.hand-band.over{background:rgba(244,196,110,.18)!important;box-shadow:inset 0 0 40px rgba(244,196,110,.3)}
.slots .slot{position:absolute;left:0;top:0;width:145px;height:198px;box-sizing:border-box;border-radius:2px;border:2px dashed rgba(212,198,166,.1);background:rgba(0,0,0,.16);transform-origin:0 0}
.cards,.fx,.slots{position:absolute;left:0;top:0;width:0;height:0}
.fx{z-index:150;pointer-events:none}

.hud *{white-space:nowrap}
.hud{position:absolute;left:0;right:0;top:0;height:60px;display:flex;align-items:center;gap:10px;padding:0 12px;box-sizing:border-box;line-height:1;
  background:linear-gradient(var(--night),rgba(10,8,12,.86));border-bottom:2px solid var(--gold2);box-shadow:0 2px 0 var(--void);z-index:60;text-shadow:2px 2px 0 #000}
.hero{display:flex;align-items:center;gap:6px;font-size:26px}
.hero-face{font-size:34px}
.hero-hp{color:#e8685e}
.hero-armor{color:var(--mist)}
.turn{margin:0 0 0 4px;display:flex;flex-direction:column;gap:2px;align-items:flex-start;font-size:23px}.turn-t{font-size:20px}
.turn-t{color:var(--glim)}
.gold{display:flex;align-items:center;gap:4px;font-size:26px;color:var(--glim);background:rgba(0,0,0,.4);padding:0 14px 0 8px;height:46px;border:4px solid transparent;border-image:var(--px-frame-side) 4 / 4px / 0 stretch;image-rendering:pixelated}
.gold b{font-size:38px;color:#fff;font-weight:400}
.gold .coin{font-size:26px;font-family:system-ui,sans-serif}
.gold.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.2)}}
.chip-btn{font:inherit;color:var(--bone);background:rgba(18,16,21,.85);border:4px solid transparent;border-image:var(--px-frame-side) 4 / 4px / 0 stretch;image-rendering:pixelated;border-radius:0;
  height:52px;padding:0 10px;display:flex;align-items:center;gap:6px;font-size:23px;line-height:1;cursor:pointer;touch-action:manipulation;text-shadow:2px 2px 0 #000}
.chip-btn:hover{filter:brightness(1.2)}
.chip-btn .nm{max-width:120px;overflow:hidden;text-overflow:ellipsis}.chip-btn .em{font-size:24px}.chip-btn .hp{color:#e8685e;font-size:21px}
.tribe-chip{font-size:24px;gap:2px;padding:0 8px;font-family:system-ui,sans-serif}
.foe-chip{margin-left:auto}
.rail{position:absolute;left:16px;top:66px;width:172px;display:flex;flex-direction:column;gap:8px;z-index:50}
.btn.ctl{font-size:24px;height:56px;justify-content:space-between;padding:0 8px;gap:4px}
.btn.freeze{color:#cfe8ff}
.btn.freeze.on{border-image-source:var(--px-frame-bone);background:radial-gradient(ellipse 90% 60% at 50% 35%,#2f5f86,#10263a 80%) padding-box;color:#fff}
.btn.upgrade{border-image-source:var(--px-frame-gilt);color:#ffe9b0}
.detail{position:absolute;right:20px;top:62px;width:248px;min-height:176px;box-sizing:border-box;padding:4px 6px;z-index:50;
  border:12px solid transparent;border-image:var(--frame-iron);image-rendering:pixelated;background:var(--slab);background-clip:padding-box;
  box-shadow:0 8px 20px rgba(0,0,0,.6);font-size:24px;line-height:24px;display:flex;flex-direction:column;gap:6px}
.detail.golden{border-image-source:var(--px-frame-gilt)}
.d-head{display:flex;align-items:center;gap:8px}
.d-emoji{font-size:30px;font-family:system-ui,sans-serif}
.mini{width:var(--sz,44px);height:var(--sz,44px);flex:none;align-items:center!important}.d-emoji.mini .art-img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.d-name{font-size:28px;flex:1;line-height:24px;color:#efe3c6}
.d-stats{font-size:30px;white-space:nowrap}
.d-stats .atk{color:#f4c45a;font-weight:400}.d-stats .hp{color:#e8685e;font-weight:400}
.d-meta{color:var(--glim);font-size:22px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.chip{color:#fff;padding:0 6px;font-size:20px;line-height:22px;text-shadow:1px 1px 0 #000;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.d-text{font-size:24px;line-height:24px;color:var(--bone)}
.d-kw{font-size:21px;line-height:22px;color:var(--bone2)}
.d-kw b{color:#f4d27a;font-weight:400}
.btn.act{margin-top:auto;font-size:28px;height:52px}
.acts{display:flex;gap:6px;margin-top:auto}.acts .btn.act{flex:1;margin-top:0;padding:0 6px}
.combat-detail{right:20px;top:auto;bottom:12px;width:310px;z-index:170}
.endturn{position:absolute;right:20px;width:248px;height:84px;font-size:46px;z-index:50;font-family:var(--title);font-weight:600;letter-spacing:.02em}
.endturn.lethal{box-shadow:0 3px 0 #000,0 0 0 3px #ff4a3a,0 0 22px rgba(255,60,40,.8);animation:lethal 1s ease-in-out infinite alternate}
@keyframes lethal{to{box-shadow:0 3px 0 #000,0 0 0 3px #ff4a3a,0 0 6px rgba(255,60,40,.4)}}
.lethal-badge{position:absolute;left:0;top:0;z-index:52;pointer-events:none;background:#2a0c08;color:#ffb3a6;border:2px solid #ff4a3a;padding:0 10px;font-size:26px;line-height:28px;text-shadow:1px 1px 0 #000}

.overlay{position:absolute;inset:0;z-index:200;background:radial-gradient(ellipse at 50% 45%,rgba(20,14,10,.8),rgba(5,4,7,.94));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px}
.ov-title{font-size:50px;font-family:var(--title);color:var(--glim);text-shadow:3px 3px 0 #000}
.ov-sub{font-size:28px;color:var(--bone2);margin-top:-28px}
.ov-row{display:flex;gap:50px;padding:20px}
.ov-row .card{position:relative;transform:scale(1.4)!important;margin:30px 40px;cursor:pointer}
.ov-row .card:hover .c-in{filter:drop-shadow(0 0 12px rgba(244,210,122,.8))}

/* ---------- the hero power: a gilt plate in the HUD ---------- */
.power-btn{position:relative;flex:none;width:64px;height:56px;padding:2px 0 0 5px;margin-left:2px;cursor:pointer;color:#fff;font-family:system-ui,sans-serif;font-size:25px;line-height:1;
  border:6px solid transparent;border-image:var(--px-frame-gilt) 8 / 6px / 0 stretch;image-rendering:pixelated;background:radial-gradient(circle at 50% 40%,#4e3c62,#1a1220 75%) padding-box;
  display:flex;align-items:flex-start;justify-content:flex-start;touch-action:manipulation;box-shadow:0 2px 0 #000}
.power-btn:hover{filter:brightness(1.2)}
.power-btn.on{box-shadow:0 0 0 2px #f4d27a,0 0 16px rgba(244,210,122,.75)}
.power-btn.dim{filter:grayscale(.85) brightness(.6)}
/* its price and uses sit in its corners, inside its frame */
.power-btn .pw-cost,.power-btn .pw-hcost{position:absolute;bottom:0;min-width:21px;height:21px;padding:0 3px;box-sizing:border-box;font-family:var(--pix);font-weight:400;font-size:21px;line-height:19px;text-align:center;color:#fff;text-shadow:1px 1px 0 #000}
.power-btn .pw-cost{right:0;background:#b0761a;box-shadow:inset 0 0 0 2px #2a1a06}
.power-btn .pw-hcost{right:0;background:#a02a32;box-shadow:inset 0 0 0 2px #2a0806}
.power-btn .pw-cost + .pw-hcost{right:22px}
.power-btn .pw-n{position:absolute;top:0;right:0;font-style:normal;font-family:var(--pix);font-size:18px;line-height:18px;padding:0 3px;background:#1a1220;color:var(--bone);box-shadow:inset 0 0 0 1px var(--ash)}
.hero.flash,.foe.flash,.me.flash{animation:heroflash .7s}
@keyframes heroflash{30%{filter:brightness(1.6) drop-shadow(0 0 10px #f4d27a)}}
.d-why{color:#ff8b7c;font-size:22px;line-height:22px;margin-top:auto}
.d-aim{font-size:21px;line-height:20px;color:var(--glim);margin-top:auto}
.power-detail .d-name{white-space:nowrap;overflow:hidden;min-width:0}.power-detail .d-meta b{font-weight:400;color:var(--glim)}
.card.primed .c-in::after{content:"⚔";position:absolute;right:-10px;top:-12px;width:30px;height:30px;z-index:4;display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;color:#fff;background:#7a3a18;box-shadow:inset 0 0 0 2px #2a1006,0 0 10px rgba(244,160,80,.7);font-family:system-ui,sans-serif}

/* ---------- the next fight (risk you can see) ---------- */
.detail.next-fight{cursor:pointer;gap:6px;justify-content:flex-start}
.nf-lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone2);line-height:16px;margin-bottom:-2px}
.nf-lbl .hp{font-size:22px;letter-spacing:0;color:#e8685e}
.nf-head{display:flex;align-items:center;gap:6px;font-size:22px;white-space:nowrap}
.nf-head .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:#efe3c6}.nf-head .em{font-size:24px}
.nf-bar{display:flex;height:18px;background:#1a1218;box-shadow:inset 0 0 0 2px #000}
.nf-bar i{display:block;min-width:4px}.nf-bar .w{background:linear-gradient(#8fd07a,#3f8a35)}.nf-bar .t{background:#7a7468}.nf-bar .l{background:linear-gradient(#e8685e,#8a2420)}
.nf-nums{display:flex;justify-content:space-between;align-items:baseline;font-size:21px;white-space:nowrap}
.nf-nums .w{color:#9be58e}.nf-nums .t{color:#bdb4a2}.nf-nums .l{color:#f08a7c}
.nf-sub{font-size:20px;line-height:20px;color:var(--bone)}.nf-sub.bad{color:#ff8b7c}.nf-sub.good{color:#9be58e}

/* ---------- floating text ---------- */
.float{position:absolute;transform:translate(-50%,0);font-size:46px;color:#fff;text-shadow:3px 3px 0 #000,0 0 8px #000;animation:rise 1s ease-out forwards;white-space:nowrap;will-change:transform,opacity}
.float.dmg{color:#ff5d4d}.float.buff{color:#8cff8c}.float.pop{color:#ffe08a}.float.gold{color:#ffd54a}
@keyframes rise{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-70px)}}
.float.big{font-size:60px}
/* a lamp more on the post: the new tier over the tavern, the tavern lit; a triple's burst of gold */
.tierup{position:absolute;z-index:160;pointer-events:none;text-align:center;white-space:nowrap;word-spacing:normal;padding:22px 90px 26px;
  background:radial-gradient(closest-side,rgba(12,9,8,.96) 62%,rgba(12,9,8,.8) 82%,transparent);animation:tierup 2.2s ease-out forwards}
.tu-stars{font-size:46px;line-height:1;letter-spacing:4px;color:#ffd54a;text-shadow:2px 2px 0 #000,0 0 14px rgba(255,200,60,.8)}
.tu-name{font-family:var(--title);font-size:40px;line-height:46px;color:#fff1d6;text-shadow:3px 3px 0 #000,0 0 18px rgba(244,160,80,.6)}
.tu-line{font-size:22px;line-height:22px;color:var(--bone2);font-style:italic}
@keyframes tierup{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}20%{transform:translate(-50%,-50%) scale(1)}
  80%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-58%)}}
.shop-band::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,rgba(255,214,120,.38),rgba(255,180,80,.1) 45%,transparent 72%)}
.shop-band.lit::after{animation:lit 1.4s ease-out}
@keyframes lit{20%{opacity:1}}
.turn.lit{animation:bump .5s}
.burst{position:absolute;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,222,120,.6) 0 7deg,transparent 7deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);
  animation:burst 1.3s ease-out .2s both}
@keyframes burst{0%{transform:scale(.3) rotate(0);opacity:0}25%{opacity:1}100%{transform:scale(1.25) rotate(40deg);opacity:0}}

/* ---------- the fight's blows, on the fx layer: transform and opacity only ---------- */
.fxe{position:absolute;width:0;height:0;pointer-events:none}
.fxe b{position:absolute;left:0;top:0;z-index:1;font-weight:400;white-space:nowrap;line-height:1}
/* a hit: a red burst with the damage on it */
.splat{animation:splat calc(.85s / var(--sp,1)) ease-out forwards}
.splat::before,.splat::after{content:"";position:absolute;left:-40px;top:-40px;width:80px;height:80px;
  clip-path:polygon(50% 0,60% 28%,90% 12%,75% 42%,100% 55%,70% 64%,80% 96%,52% 76%,24% 98%,30% 66%,0 58%,26% 42%,10% 10%,40% 28%)}
.splat::before{background:#140a0a;transform:scale(1.18)}
.splat::after{background:linear-gradient(#ff6a50,#c41e2c 72%)}
.splat b{font-family:var(--pix);font-size:44px;color:#fff;transform:translate(-50%,-56%);text-shadow:2px 2px 0 #000,-2px 0 0 #000,0 -2px 0 #000,2px 0 0 #000}
.splat.hero{animation-duration:calc(1.1s / var(--sp,1))}
.splat.hero::before,.splat.hero::after{left:-52px;top:-52px;width:104px;height:104px}
.splat.hero b{font-size:56px}
@keyframes splat{0%{transform:scale(.25);opacity:1}16%{transform:scale(1.18)}28%{transform:scale(1)}72%{opacity:1}100%{transform:scale(.92);opacity:0}}
/* a divine shield bursts: the ring flies out, shards scatter */
.shatter::before{content:"";position:absolute;left:-73px;top:-99px;width:146px;height:198px;box-sizing:border-box;border:6px solid #ffe7a0;border-radius:14px;
  box-shadow:0 0 16px 2px rgba(255,205,90,.85),inset 0 0 18px rgba(255,225,140,.6);animation:ringout calc(.5s / var(--sp,1)) ease-out forwards}
@keyframes ringout{from{transform:scale(1);opacity:1}to{transform:scale(1.3);opacity:0}}
.shatter i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;background:#fff1c0;box-shadow:0 0 6px #ffcf50;animation:shard calc(.62s / var(--sp,1)) cubic-bezier(.2,.7,.4,1) forwards}
@keyframes shard{from{transform:translate(calc(var(--dx) * .55),calc(var(--dy) * .55));opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(220deg) scale(.4);opacity:0}}
/* venom: the victim goes green, a skull over it */
.toxic::before{content:"";position:absolute;left:-73px;top:-99px;width:146px;height:198px;
  background:radial-gradient(ellipse at 50% 55%,rgba(130,245,90,.8),rgba(60,170,60,.45) 55%,transparent 80%);animation:toxic calc(.75s / var(--sp,1)) ease-out forwards}
@keyframes toxic{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.toxic b{top:-58px;font-size:46px;font-family:system-ui,sans-serif;animation:icon calc(.9s / var(--sp,1)) ease-out forwards}
/* dust where a minion falls */
.puff i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;background:#6c6470;animation:puff calc(.6s / var(--sp,1)) ease-out forwards}
@keyframes puff{from{transform:translate(0,0);opacity:.9}to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
/* deathrattle: a violet flare where it died, its icon rising */
.rattle::before{content:"";position:absolute;left:-84px;top:-84px;width:168px;height:168px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,150,255,.85) 0,rgba(130,70,220,.5) 40%,transparent 70%);animation:flare calc(.8s / var(--sp,1)) ease-out forwards}
@keyframes flare{0%{transform:scale(.3);opacity:0}30%{opacity:1}100%{transform:scale(1.4);opacity:0}}
.rattle b{font-size:58px;font-family:system-ui,sans-serif;animation:icon calc(1s / var(--sp,1)) ease-out forwards}
/* reborn: a pale light comes down and the minion stands up in it */
.risen::before{content:"";position:absolute;left:-80px;top:-150px;width:160px;height:300px;
  background:linear-gradient(90deg,transparent,rgba(200,235,255,.5) 30%,rgba(240,250,255,.85) 50%,rgba(200,235,255,.5) 70%,transparent);animation:pillar calc(.85s / var(--sp,1)) ease-out forwards}
@keyframes pillar{0%{transform:scaleY(.2);opacity:0}30%{transform:scaleY(1);opacity:1}100%{opacity:0}}
.risen b{font-size:50px;font-family:system-ui,sans-serif;animation:icon calc(1s / var(--sp,1)) ease-out forwards}
/* avenge, start of combat: the keyword's icon pops over the card */
.badge b{font-size:46px;font-family:system-ui,sans-serif;animation:icon calc(.9s / var(--sp,1)) ease-out forwards}
@keyframes icon{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}25%{transform:translate(-50%,-50%) scale(1.2);opacity:1}40%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{transform:translate(-50%,-110%);opacity:0}}
/* a hero's power or a spell acting: named beside its hero */
.tag{animation:tag calc(1.4s / var(--sp,1)) ease-out forwards}
.tag b{transform:translateY(-50%);padding:4px 12px 6px;font-size:28px;color:var(--glim);text-shadow:2px 2px 0 #000;background:rgba(14,12,16,.92);
  border:4px solid transparent;border-image:var(--px-frame-side) 4 / 4px / 0 stretch;image-rendering:pixelated}
@keyframes tag{0%{transform:translateX(-14px);opacity:0}14%{transform:none;opacity:1}80%{opacity:1}100%{opacity:0}}

/* ---------- combat ---------- */
.combat .lane{position:absolute;left:30px;right:30px;height:2px;background:linear-gradient(90deg,transparent,rgba(244,196,110,.35),transparent)}
.combat .foe{position:absolute;left:20px;top:10px}
.combat .me{position:absolute;left:20px;bottom:14px}
.combat .foe,.combat .me{z-index:30}
.foe,.me{display:flex;align-items:center;gap:10px;font-size:32px;padding:2px 14px;background:rgba(14,12,16,.9);border:8px solid transparent;border-image:var(--px-frame-iron) 8 / 8px / 0 stretch;image-rendering:pixelated;text-shadow:2px 2px 0 #000}
.foe .face,.me .face{font-size:38px;font-family:system-ui,sans-serif}
.foe .hp,.me .hp{color:#e8685e}
.banner{position:absolute;left:0;right:0;text-align:center;font-size:56px;font-family:var(--title);letter-spacing:.04em;color:#fff1d6;text-shadow:3px 3px 0 #000,0 0 18px rgba(244,160,80,.5);opacity:0;pointer-events:none;z-index:40}
.banner.show{animation:banner 1.1s ease-out forwards}
.banner.win,.banner.loss,.banner.tie{animation:none;opacity:0}
@keyframes banner{0%{opacity:0;transform:scale(.8)}25%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.combat-ctl{position:absolute;right:20px;top:10px;display:flex;gap:10px;z-index:60}
.result{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:180;padding:6px 26px;border:12px solid transparent;border-image:var(--frame-iron);image-rendering:pixelated;
  background:var(--slab);background-clip:padding-box;box-shadow:0 10px 30px rgba(0,0,0,.7);display:flex;flex-direction:row;align-items:center;gap:30px;animation:pop2 .4s cubic-bezier(.2,1.3,.4,1)}
.result.win{border-image-source:var(--px-frame-gilt)}.result.loss{border-image-source:var(--px-frame-blood)}
@keyframes pop2{from{transform:translateX(-50%) translateY(40px);opacity:0}}
.res-main{display:flex;flex-direction:column;align-items:center;gap:2px}
.res-title{font-size:54px;font-family:var(--title);line-height:56px;text-shadow:3px 3px 0 #000}
.res-title.win{color:#ffe08a}.res-title.loss{color:#ff7a6a}.res-title.tie{color:#cdd}
.res-sub{font-size:30px}
.res-why{font-size:22px;line-height:22px;color:var(--bone2);max-width:600px;text-align:center}
.res-hp{font-size:30px}

/* ---------- title, modal, standings ---------- */
.title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.title::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(circle,rgba(244,210,150,.7) 0 1px,transparent 2px),radial-gradient(circle,rgba(244,170,90,.5) 0 1px,transparent 2px),radial-gradient(circle,rgba(220,200,150,.45) 0 1px,transparent 2px);
  background-size:97px 131px,151px 173px,211px 89px;background-position:13px 40px,71px 5px,140px 60px;animation:motes 50s linear infinite}
@keyframes motes{to{background-position:13px -1270px,71px -1725px,140px -830px}}
@media (prefers-reduced-motion:reduce){.title::before{animation:none}}
.logo{font-family:var(--title);font-size:80px;font-weight:700;line-height:1;color:#f4d27a;letter-spacing:.02em;
  text-shadow:4px 4px 0 #5e3a10,8px 8px 0 #000,0 0 40px rgba(244,180,90,.45)}
.tagline{font-size:30px;color:var(--bone);margin-top:-4px;text-shadow:2px 2px 0 #000}
.heroes{display:grid;grid-template-columns:repeat(4,256px);gap:10px 12px}
.hero-pick{font:inherit;color:var(--bone);min-width:0;height:80px;padding:0 8px;border:12px solid transparent;border-image:var(--frame-iron);image-rendering:pixelated;background:var(--slab);background-clip:padding-box;
  cursor:pointer;display:flex;align-items:center;gap:8px;touch-action:manipulation;box-shadow:0 6px 14px rgba(0,0,0,.55);text-align:left}
.hero-pick.on{border-image-source:var(--px-frame-gilt);box-shadow:0 0 22px rgba(244,190,90,.45),0 6px 14px rgba(0,0,0,.55)}
.hp-face{flex:none;width:52px;text-align:center;font-size:42px;font-family:system-ui,sans-serif}.hp-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;font-size:26px;line-height:24px;color:#efe3c6}
.hero-info{width:1060px;box-sizing:border-box;min-height:118px;padding:4px 14px 6px;border:12px solid transparent;border-image:var(--frame-iron);image-rendering:pixelated;background:var(--slab);background-clip:padding-box;
  display:flex;flex-direction:column;gap:2px;font-size:25px;line-height:25px;color:var(--bone)}
.hi-head{display:flex;justify-content:space-between;align-items:baseline}.hi-name{font-size:30px;color:#f4d27a}.hi-life{font-size:24px;color:var(--bone2)}
.hi-power b{font-weight:400;color:var(--glim);margin-right:12px}.hi-flavor{font-style:italic;color:var(--bone2);font-size:23px;line-height:23px}
.diffs{display:flex;gap:10px}
.title-btns{display:flex;gap:20px;margin-top:4px}
.dev{position:absolute;right:12px;bottom:8px;font-size:20px;color:var(--ash)}
.toast{position:absolute;left:50%;top:44%;transform:translateX(-50%);z-index:250;background:rgba(14,8,5,.94);border:3px solid #a02a32;color:#ffd9d0;font-size:32px;padding:6px 22px;opacity:0;pointer-events:none;text-shadow:2px 2px 0 #000}
.toast.show{animation:toast 1.8s ease-out forwards}
@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}10%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.modal-layer{position:absolute;inset:0;z-index:300;display:none}
.modal-layer.on{display:block}
.modal-back{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(6,5,8,.7),rgba(2,2,3,.92));display:flex;align-items:center;justify-content:center}
.modal{box-sizing:border-box;max-height:calc(var(--H,720px) - 24px);overflow:auto;min-width:480px;max-width:660px;padding:14px 28px;border:16px solid transparent;border-image:var(--px-frame-iron) 8 / 16px / 0 stretch;image-rendering:pixelated;
  background:var(--slab);background-clip:padding-box;box-shadow:0 14px 40px rgba(0,0,0,.85);display:flex;flex-direction:column;gap:12px;align-items:stretch;font-size:30px;line-height:30px;text-align:center}
.modal h2{margin:0;font-size:44px;line-height:48px;font-family:var(--title);font-weight:600;color:var(--glim);text-shadow:3px 3px 0 #000}
.modal .btn.big{padding:8px 30px}
.modal p{margin:0}
.modal .sub{font-size:26px;color:var(--bone2)}
.tribes{display:flex;flex-direction:column;gap:8px;text-align:left}
.trow{display:grid;grid-template-columns:44px 150px 1fr;align-items:center;background:rgba(0,0,0,.35);padding:4px 12px;border-left:8px solid}
.trow .em{font-size:30px;font-family:system-ui,sans-serif}.trow .nm{font-size:30px;color:#efe3c6}.trow .bl{font-size:23px;line-height:23px;color:var(--bone2)}
.help{display:flex;flex-direction:column;gap:8px;text-align:left;font-size:27px;line-height:27px}
.hstep{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:8px}.hstep .em{font-size:30px;text-align:center;font-family:system-ui,sans-serif}
.modal.wide{width:min(1240px,calc(var(--W,1280px) - 40px));max-width:none;min-width:0}
.two-col{display:grid;grid-template-columns:450px 1fr;gap:20px;text-align:left;align-items:start}
.srow{cursor:pointer;position:relative}.srow.sel{outline:3px solid var(--glim);outline-offset:-1px}.srow .nx{position:absolute;right:-6px;top:-8px;background:#a02a32;color:#fff;font-size:18px;line-height:18px;padding:1px 6px}
.preview{background:rgba(0,0,0,.35);padding:10px 16px;min-height:330px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 0 0 2px rgba(212,198,166,.08)}
.pv-title{font-size:38px;display:flex;align-items:center;gap:8px;color:#efe3c6}.pv-sub{font-size:25px;line-height:25px;color:var(--bone2)}.pv-quip{font-size:25px;color:var(--glim)}
.pv-board{display:flex;flex-wrap:wrap;gap:0;margin-top:2px}
.pv-board .card{--k:calc(1 - var(--s,.6));position:relative;transform:scale(var(--s,.6));margin:calc(-90px * var(--k)) calc(3px - 66px * var(--k));transform-origin:50% 50%;cursor:default}
.pv-board .c-atk{left:0;bottom:0}.pv-board .c-hp{right:0;bottom:0}
.pv-odds{display:flex;gap:16px;font-size:28px}.pv-odds b{font-weight:400}.pv-odds .w{color:#9be58e}.pv-odds .t{color:#bdb4a2}.pv-odds .l{color:#f08a7c}
.pv-hint{font-size:21px;color:var(--ash);margin-top:auto}
.pv-power{font-size:23px;line-height:23px;color:var(--bone)}.pv-power b{font-weight:400;color:var(--glim)}
.standings{display:flex;flex-direction:column;gap:6px;text-align:left}
.srow{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.35);padding:2px 10px;font-size:25px;white-space:nowrap}
.srow.me{box-shadow:inset 0 0 0 2px var(--gold)}
.srow.out{opacity:.5}
.srow .rk{width:26px;color:var(--glim)}
.srow .em{font-size:28px;font-family:system-ui,sans-serif}.srow .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#efe3c6}
.omen-text{font-size:28px;line-height:30px}.omen-flavor{font-size:24px;line-height:26px;font-style:italic;color:var(--bone2)}

/* ---------- read a card: hover (mouse) or hold (finger) ---------- */
.peek{position:absolute;left:0;top:0;z-index:400;width:350px;box-sizing:border-box;padding:4px 8px;pointer-events:none;
  border:12px solid transparent;border-image:var(--frame-iron);image-rendering:pixelated;background:var(--slab);background-clip:padding-box;box-shadow:0 10px 30px rgba(0,0,0,.75);
  display:flex;flex-direction:column;gap:6px;font-size:26px;line-height:26px}
.peek .d-name{font-size:30px}.peek .d-text{font-size:26px;line-height:26px}
.peek .d-kw{font-size:24px;line-height:24px;display:flex;flex-direction:column;gap:3px}
.d-flavor{font-style:italic;color:var(--bone2);font-size:22px;line-height:22px}

/* ---------- first-run tips: a parchment note ---------- */
.coach{position:absolute;left:0;top:0;z-index:280;width:390px;box-sizing:border-box;padding:6px 10px 4px;cursor:pointer;
  border:12px solid transparent;border-image:var(--px-frame-gilt) 8 / 12px / 0 stretch;image-rendering:pixelated;
  background:linear-gradient(#efe3c4,#d6c39a) padding-box;color:#20160c;font-size:30px;line-height:29px;
  box-shadow:0 12px 28px rgba(0,0,0,.65);transition:opacity .2s;display:flex;flex-direction:column;gap:4px}
.coach.in{animation:coachin .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes coachin{from{opacity:0;scale:.88}}
.coach-ok{align-self:flex-end;font-size:24px;color:#fff3dc;background:#7a3a18;padding:0 14px;line-height:28px;box-shadow:inset 0 0 0 2px #3a1608;text-shadow:1px 1px 0 #000}
.coach-arrow{position:absolute;left:-9px;top:-9px;z-index:281;width:18px;height:18px;background:#e4d4ae;box-shadow:3px 3px 0 0 #a9781e;pointer-events:none;transition:opacity .2s}
.coach-arrow.in{animation:arrowin .35s ease-out}
@keyframes arrowin{from{opacity:0}}
.coach-arrow.none{display:none}
.coach-ring{position:absolute;left:0;top:0;z-index:279;box-sizing:border-box;border:4px solid #f4d27a;pointer-events:none;
  box-shadow:0 0 18px rgba(244,200,100,.8),inset 0 0 12px rgba(244,200,100,.45);animation:ring 1.1s ease-in-out infinite alternate}
@keyframes ring{from{opacity:.5}to{opacity:1}}
.coach.dim,.coach-arrow.dim,.coach-ring.dim{opacity:.3}
.coach.wide{width:800px;flex-direction:row;align-items:center;gap:16px;font-size:28px;line-height:27px}.coach.wide .coach-ok{align-self:center}

/* ---------- run banner, omen ---------- */
.run-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:270;max-width:1100px;box-sizing:border-box;padding:8px 22px;
  border:16px solid transparent;border-image:var(--px-frame-iron) 8 / 16px / 0 stretch;image-rendering:pixelated;background:var(--slab);background-clip:padding-box;
  box-shadow:0 12px 30px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:10px;animation:pop2b .4s cubic-bezier(.2,1.3,.4,1);transition:opacity .5s;cursor:pointer}
.run-banner.out{opacity:0}
@keyframes pop2b{from{opacity:0;transform:translate(-50%,-30%)}}
.rb-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font-size:30px}
.rb-lbl{font-size:22px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone2);margin-right:4px}
.rb-tribe{border:2px solid;padding:0 10px;background:rgba(0,0,0,.4);white-space:nowrap}
.rb-tribe .em,.rb-omen .em{font-family:system-ui,sans-serif}
.rb-omen .em{font-size:30px}.rb-omen b{color:var(--glim);font-weight:400}.rb-text{font-size:26px;color:var(--bone);max-width:640px}
.omen-chip{font-size:26px;padding:0 10px;font-family:system-ui,sans-serif}
.omen-chip.flash,.omen-badge.flash{animation:omenflash .8s}
@keyframes omenflash{30%{transform:scale(1.25);filter:drop-shadow(0 0 12px #c79bff)}}
.omen-badge{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:8px;font-size:26px;
  background:rgba(14,12,16,.9);padding:2px 14px;border:4px solid transparent;border-image:var(--px-frame-side) 4 / 4px / 0 stretch;color:#e8dcff}
.omen-badge .em{font-size:24px;font-family:system-ui,sans-serif}

/* ---------- phones: words that pop up get bigger ---------- */
.stage.small .peek{width:450px;font-size:32px;line-height:31px}.stage.small .peek .d-name{font-size:36px}.stage.small .peek .d-text{font-size:32px;line-height:31px}
.stage.small .peek .d-kw{font-size:29px;line-height:28px}.stage.small .peek .d-meta{font-size:27px}.stage.small .peek .chip{font-size:25px;line-height:27px}
.stage.small .coach{width:470px;font-size:35px;line-height:34px}.stage.small .coach-ok{font-size:29px;line-height:34px;padding:0 18px}
.stage.small .coach.wide{width:920px;font-size:33px;line-height:32px}

/* ---------- the road between rounds: cards ahead (their kind on the back), the road beyond, a panel beside ---------- */
.road-hud{gap:14px}
.road-title{flex:1;text-align:center;font-family:var(--title);word-spacing:normal;font-size:30px;color:var(--glim);text-shadow:2px 2px 0 #000;letter-spacing:.04em}
.road-lines{position:absolute;left:0;top:0;pointer-events:none}
.road-lines path{fill:none;stroke:rgba(212,198,166,.5);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 12}
.road-lines path.far{stroke:rgba(212,198,166,.24);stroke-width:4}
.rcard{position:absolute;left:0;top:0;width:132px;height:180px;transform-origin:0 0;perspective:900px;transition:transform .5s cubic-bezier(.2,.9,.25,1.05),opacity .4s}
.rcard.pickable{cursor:pointer}
.rcard.dealt{animation:dealin .45s cubic-bezier(.2,1.3,.4,1) backwards}
@keyframes dealin{from{opacity:0;translate:0 -26px}}
.rcard.gone{opacity:0;pointer-events:none}
.rcard[data-role=far]{pointer-events:none;opacity:.8}
.rcard[data-role=far] .rc-word{display:none}
.rcard[data-role=far] .rc-icon{font-size:80px}
.rc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.rcard.up .rc-in,.ccard.up .rc-in{transform:rotateY(180deg)}
.rc-face{position:absolute;inset:0;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:9px solid transparent;border-image:var(--kf,var(--px-frame-iron)) 8 / 9px / 0 stretch;image-rendering:pixelated;box-shadow:0 4px 0 #000,0 6px 12px rgba(0,0,0,.6)}
.rc-back{background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--kc,#c8b48a) 34%,transparent),transparent 68%),var(--slab);background-clip:padding-box}
.rc-icon{font-size:62px;line-height:1;font-family:system-ui,sans-serif;filter:drop-shadow(0 3px 2px rgba(0,0,0,.6))}
.rc-word{margin-top:10px;font-family:var(--title);font-size:26px;line-height:1;color:var(--kc,#d8c49a);text-shadow:2px 2px 0 #000}
.rc-front{transform:rotateY(180deg);justify-content:flex-start;gap:2px;padding-top:2px;
  background:linear-gradient(172deg,color-mix(in srgb,var(--kc,#c8b48a) 30%,#16141c),#100e14 70%);background-clip:padding-box}
.rc-art{height:94px;width:100%;flex:none;display:flex;align-items:center;justify-content:center;font-size:60px;line-height:1;font-family:system-ui,sans-serif}
.rc-name{font-size:19px;line-height:17px;text-align:center;color:var(--bone);padding:0 3px}
.rc-kind{font-size:18px;line-height:1;color:var(--kc,#d8c49a);margin-top:auto;margin-bottom:3px}
.rcard.pickable:hover .rc-back{filter:brightness(1.18)}
.rcard.pickable .rc-back{box-shadow:0 4px 0 #000,0 0 0 2px color-mix(in srgb,var(--kc) 55%,transparent),0 6px 14px rgba(0,0,0,.6)}
.road-panel{position:absolute;right:20px;bottom:14px;box-sizing:border-box;padding:12px 18px;display:flex;flex-direction:column;gap:10px;overflow:hidden;
  border:12px solid transparent;border-image:var(--px-frame-iron) 8 / 12px / 0 stretch;image-rendering:pixelated;background:var(--slab);background-clip:padding-box;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.rp-title{font-family:var(--title);word-spacing:normal;font-size:30px;line-height:32px;color:#efe3c6;text-shadow:2px 2px 0 #000}
.rp-text{font-size:24px;line-height:24px;color:var(--bone)}
.rp-flavor{font-size:21px;line-height:21px;color:var(--bone2);font-style:italic}
.rp-kinds{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.rp-kind{display:grid;grid-template-columns:40px 1fr;gap:0 10px;align-items:start;font-size:22px;line-height:22px;color:var(--bone2)}
.rp-kind .em{grid-row:span 2;font-size:32px;line-height:40px;font-family:system-ui,sans-serif;text-align:center}
.rp-kind b{font-weight:400;font-size:24px;color:var(--kc)}
.rp-head{display:flex;align-items:center;gap:14px}
.rp-face{flex:none;width:64px;text-align:center;font-size:56px;font-family:system-ui,sans-serif}
.rp-names{display:flex;flex-direction:column;gap:2px;min-width:0}
.rp-kindchip{font-size:21px;line-height:22px;color:var(--kc)}
.rp-choices{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.btn.road-choice{white-space:normal;flex-direction:column;align-items:stretch;justify-content:center;gap:3px;min-height:56px;padding:6px 12px;text-align:left;font-size:24px;line-height:24px}
.rch-line{display:flex;align-items:center;gap:10px}
.rch-text{flex:1;min-width:0}
.rch-cost,.rch-hcost{flex:none;font-weight:400;font-size:26px;color:var(--glim)}
.rch-hcost{color:#ff8a7a}
.rch-odds{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:20px;line-height:20px;color:var(--bone2)}
.rch-o i{font-style:normal;color:var(--glim)}.rch-o b{font-weight:400;color:#efe3c6}
.rch-why{font-size:20px;line-height:20px;color:#ff8a7a}
.btn.road-choice.dim{opacity:.6}
.rp-pass{align-self:flex-end}
.road-panel>.btn.big,.road-panel>.btn.act{align-self:center;min-width:300px}
.rp-result{font-size:28px;line-height:28px;color:#ffe08a}
.rp-minions{display:flex;flex-wrap:wrap;gap:0;margin:2px 0}
.rp-minions .card{--s:.76;--k:calc(1 - var(--s));position:relative;transform:scale(var(--s));margin:calc(-90px * var(--k)) calc(3px - 66px * var(--k));transform-origin:50% 50%;cursor:default}
.rp-minions .card.targetable{cursor:pointer}
.rp-minions .card.dim .c-in{opacity:.45}
.rp-chance{display:flex;gap:12px;justify-content:center;margin-top:6px}
.ccard{position:relative;width:116px;height:158px;flex:none;perspective:800px}
.ccard .rc-face{border-image:var(--px-frame-blood) 8 / 9px / 0 stretch}
.ccard .rc-back{background:var(--slab);background-clip:padding-box}
.ccard .rc-front{transform:rotateY(180deg);justify-content:flex-start;gap:3px;padding:4px 5px;background:linear-gradient(#2c1a22,#120c10);background-clip:padding-box}
.cc-icon{font-size:42px;line-height:1.15;font-family:system-ui,sans-serif}
.cc-name{font-weight:400;font-size:22px;line-height:22px;color:#ffe08a;text-align:center}
.cc-text{font-size:17px;line-height:17px;text-align:center;color:var(--bone)}
.rp-chance.drawing .ccard{cursor:pointer}
.rp-chance.drawing .ccard:hover .rc-face{filter:brightness(1.2)}
.ccard.drawn{z-index:2}.ccard.drawn .rc-face{box-shadow:0 0 0 3px #ffe08a,0 0 18px rgba(255,220,120,.7)}
.ccard.other{opacity:.55}