/* Snow Day Club — presentation. Fixed 1600×900 stage, uniformly scaled to fit. */
:root {
  --ink: #2a1f33;
  --ink2: #4a3b57;
  --paper: #fff7ea;
  --paper2: #f4e3c6;
  --snow: #f6fbff;
  --ice: #d3ecfa;
  --ice2: #a9d6f0;
  --navy: #2c3e75;
  --gold: #ffd45c;
  --pink: #ff6b8b;
  --shadow: 0 5px 0 rgba(42, 31, 51, 0.32);
  --sky-top: #6dbbec; --sky-mid: #b7e2fb; --sky-bot: #eef8ff;
  --sun: #ffe98a; --snow-bot: #dceefa; --hill-far: #d4ebfa; --hill-mid: #e8f5fd; --win: #c9e3f5; --lamp: 0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #17203d; }
body {
  font-family: 'Fredoka', 'Trebuchet MS', sans-serif; color: var(--ink);
  -webkit-font-smoothing: antialiased; user-select: none;
  background: radial-gradient(circle at 50% 30%, #2a3a6e, #121a33 70%);
}
#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; overflow: hidden; border-radius: 6px; }
.hidden { display: none !important; }
.ic { width: 1em; height: 1em; vertical-align: -0.14em; display: inline-block; overflow: visible; }
i.tok { font-style: normal; display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.3em; margin: 0 0.04em; }
i.tok .ic { width: 100%; height: 100%; }
.nw { white-space: nowrap; }
b, .display { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; letter-spacing: 0.01em; }

/* ---------- backdrop ---------- */
#backdrop, #backdrop svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-top { stop-color: var(--sky-top); transition: stop-color 2s; }
.sky-mid { stop-color: var(--sky-mid); transition: stop-color 2s; }
.sky-bot { stop-color: var(--sky-bot); transition: stop-color 2s; }
.snow-bot { stop-color: var(--snow-bot); transition: stop-color 2s; }
.sun-core { stop-color: var(--sun); }
.sun-edge { stop-color: var(--sun); }
.sun-disc { fill: var(--sun); transition: fill 2s; }
.hill-far { fill: var(--hill-far); transition: fill 2s; }
.hill-mid { fill: var(--hill-mid); transition: fill 2s; }
.win { fill: var(--win); transition: fill 2s; }
#bg-sun { transition: transform 2.2s cubic-bezier(.4, 0, .2, 1); }
#bg-stars { opacity: calc(var(--lamp) * 1); transition: opacity 2s; }
.lamp-glow { fill: #ffe9a0; opacity: calc(var(--lamp) * 0.55); transition: opacity 2s; filter: blur(6px); }
.lamp-bulb { fill: #fff6c4; opacity: calc(0.3 + var(--lamp) * 0.7); }
.cloud { animation: drift 90s linear infinite; }
.cloud.c2 { animation-duration: 130s; animation-delay: -40s; }
.cloud.c3 { animation-duration: 110s; animation-delay: -70s; }
@keyframes drift { from { transform: translateX(-500px); } to { transform: translateX(1900px); } }
.smoke circle { animation: smoke 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.smoke circle:nth-child(2) { animation-delay: -1.3s; } .smoke circle:nth-child(3) { animation-delay: -2.6s; }
@keyframes smoke { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6px, -6px) scale(1.15); } }
#snow { position: absolute; inset: 0; width: 1600px; height: 900px; pointer-events: none; }
#snow-front { position: absolute; inset: 0; width: 1600px; height: 900px; pointer-events: none; z-index: 2000; opacity: .55; }

/* ---------- generic UI ---------- */
.screen { position: absolute; inset: 0; }
.panel {
  background: var(--paper); border: 4px solid var(--ink); border-radius: 20px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), var(--shadow), 0 14px 26px rgba(20, 16, 40, .18);
}
.snowcap { position: relative; }
.snowcap::before {
  content: ''; position: absolute; left: 10px; right: 10px; top: -14px; height: 26px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 26' preserveAspectRatio='none'><path d='M0 22 Q4 6 16 10 Q24 0 38 8 Q48 2 60 9 Q72 0 86 8 Q98 3 108 10 Q120 0 134 8 Q146 2 156 9 Q170 0 184 8 Q196 4 200 22 Z' fill='white' stroke='%232a1f33' stroke-width='3' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 0 rgba(42,31,51,.15)); z-index: 2;
}
.btn {
  --c: #ffd45c; --c2: #f2a93b;
  font: 400 20px/1 'Lilita One', sans-serif; letter-spacing: .02em; color: var(--ink);
  padding: 12px 22px 13px; border: 4px solid var(--ink); border-radius: 16px; cursor: pointer;
  background: linear-gradient(var(--c) 55%, var(--c2) 55%); position: relative;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 5px 0 var(--ink);
  transition: transform .08s, box-shadow .08s, filter .15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 7px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 1px 0 var(--ink); }
.btn[disabled] { filter: grayscale(.7) brightness(.92); cursor: not-allowed; transform: none; opacity: .75; }
.btn.blue { --c: #8fd0f7; --c2: #5aaee6; }
.btn.green { --c: #a6e07e; --c2: #6fbf4a; }
.btn.pink { --c: #ffadc0; --c2: #ff7b98; }
.btn.purple { --c: #d2b8f5; --c2: #a982e0; }
.btn.plain { --c: #fff7ea; --c2: #efdfc2; }
.btn.small { font-size: 16px; padding: 8px 14px 9px; border-radius: 12px; border-width: 3px; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 var(--ink); }
.btn.big { font-size: 30px; padding: 16px 36px 18px; border-radius: 20px; }
.btn .ic { width: 1.1em; height: 1.1em; }
.iconbtn { width: 46px; height: 46px; padding: 0; border-radius: 14px; font-size: 22px; }

/* ---------- topbar ---------- */
#topbar { position: absolute; left: 16px; right: 16px; top: 8px; height: 50px; display: flex; align-items: center; justify-content: space-between; z-index: 40; pointer-events: none; }
#topbar > * { pointer-events: auto; }
.logo-chip { display: flex; align-items: center; gap: 8px; padding: 6px 16px 7px 10px; font: 22px/1 'Lilita One'; border-radius: 16px; }
.logo-chip .flake { width: 32px; height: 32px; animation: spin 14s linear infinite; }
#daytrack { position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 50px; padding: 0 18px; display: flex; align-items: center; gap: 10px; border-radius: 18px; }
#daytrack .lbl { font: 18px/1 'Lilita One'; min-width: 168px; text-align: center; }
#daytrack .lbl small { display: block; font: 600 11px/1.2 'Fredoka'; color: var(--ink2); letter-spacing: .06em; text-transform: uppercase; }
.dt-nodes { display: flex; align-items: center; gap: 0; }
.dt-node { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; position: relative; margin: 0 4px; transition: all .4s; }
.dt-node.past { background: #9fd3f0; }
.dt-node.now { background: var(--gold); transform: scale(1.25); box-shadow: 0 0 0 4px rgba(255,212,92,.45); }
.dt-node.now::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed #f2a93b; animation: spin 6s linear infinite; }
.dt-node.lamp { background: #3d3a4a; border-radius: 6px; }
.dt-node .ic { position: absolute; inset: 1px; width: 14px; height: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.tb-right { display: flex; gap: 10px; }

/* ---------- board ---------- */
#board { position: absolute; left: 16px; top: 212px; width: 1568px; height: 338px; border-radius: 26px; z-index: 5; }
#board .surface {
  position: absolute; inset: 0; border-radius: 26px; border: 4px solid var(--ink); overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.7) 0 2px, transparent 3px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.55) 0 1.5px, transparent 2.5px) 0 0 / 34px 34px,
    linear-gradient(170deg, #eaf6ff, #cfe8f8);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.8), inset 0 -18px 40px rgba(120,170,210,.25), 0 6px 0 rgba(42,31,51,.35), 0 18px 30px rgba(20,16,40,.22);
}
#board .stitch { position: absolute; inset: 9px; border: 3px dashed rgba(255,255,255,.95); border-radius: 19px; pointer-events: none; }
#board .divider { position: absolute; left: 902px; top: 14px; bottom: 14px; width: 0; border-left: 4px dashed rgba(42,31,51,.25); }
.zone-deco { position: absolute; pointer-events: none; opacity: .55; }
.zone-sign {
  position: absolute; top: -18px; display: flex; align-items: center; gap: 10px; z-index: 6;
  padding: 7px 18px 8px; background: linear-gradient(#d9a066, #b97a43); color: #fff7ea;
  border: 4px solid var(--ink); border-radius: 12px; font: 22px/1 'Lilita One'; letter-spacing: .03em;
  text-shadow: 0 2px 0 var(--ink); box-shadow: var(--shadow); transform: rotate(-1.5deg);
}
.zone-sign small { font: 600 13px/1.1 'Fredoka'; text-shadow: none; color: #fff2dc; letter-spacing: 0; max-width: 260px; }
.zone-sign .ic { width: 26px; height: 26px; }
.slot { position: absolute; width: 148px; height: 206px; border-radius: 16px; border: 3px dashed rgba(42,31,51,.28); background: rgba(255,255,255,.35); display: grid; place-items: center; font: 34px 'Lilita One'; color: rgba(42,31,51,.15); }
.pile { position: absolute; border-radius: 14px; }
.pile .stack { position: absolute; inset: 0; }
.pile .stack > div { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; border: 3px solid var(--ink); background: #3f66b7; }
.pile .stack > div svg { width: 100%; height: 100%; display: block; }
.pile .count { position: absolute; right: -10px; bottom: -10px; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 19px; background: var(--paper); border: 3px solid var(--ink); font: 20px/32px 'Lilita One'; text-align: center; box-shadow: 0 3px 0 rgba(42,31,51,.3); z-index: 3; }
.pile .plabel { position: absolute; left: 50%; transform: translateX(-50%); bottom: -32px; font: 600 13px/1 'Fredoka'; color: var(--ink); white-space: nowrap; background: rgba(255,247,234,.9); padding: 3px 8px; border-radius: 8px; border: 2px solid var(--ink); }
#hill-deck { left: 794px; top: 62px; width: 92px; height: 128px; }
#pg-empty { position: absolute; left: 1080px; top: 140px; width: 360px; text-align: center; font: 600 16px/1.3 'Fredoka'; color: rgba(42,31,51,.45); }
#pg-empty b { display: block; font-size: 22px; color: rgba(42,31,51,.5); }

/* ---------- cards ---------- */
#cards-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; perspective: 1400px; }
#stage-dim { position: absolute; left: 16px; top: 212px; width: 1568px; height: 338px; border-radius: 26px; background: rgba(28, 34, 70, .55); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 500; }
#stage-dim.on { opacity: 1; }
.card { position: absolute; left: 0; top: 0; width: 180px; height: 252px; transform-origin: 90px 126px; will-change: transform; pointer-events: auto; --crew: #9fd3f0; --crewd: #4c9be0; --crewl: #e8f5fd; }
.card .tilt { width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .2s ease-out; }
.card .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.35, .5, 1); }
.card.facedown .inner { transform: rotateY(180deg); }
.card .face { position: absolute; inset: 0; border-radius: 17px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card .back { transform: rotateY(180deg); overflow: hidden; border: 3px solid var(--ink); box-shadow: 0 5px 0 rgba(30,20,40,.3), 0 10px 18px rgba(30,20,40,.22); background: #3f66b7; }
.card .back svg { width: 100%; height: 100%; display: block; }
.card .front {
  background: var(--crew); border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), inset 0 -6px 0 rgba(0,0,0,.12), 0 5px 0 rgba(30,20,40,.3), 0 10px 18px rgba(30,20,40,.22);
}
.card .front::before { content: ''; position: absolute; inset: 3px; border-radius: 13px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px); pointer-events: none; }
.card .art { position: absolute; left: 8px; top: 8px; width: 158px; height: 112px; border-radius: 12px; border: 3px solid var(--ink); overflow: hidden; background: var(--crewl); }
.card .art svg { width: 100%; height: 100%; display: block; }
.card .nameplate {
  position: absolute; left: 50%; top: 104px; transform: translateX(-50%) rotate(-1.5deg); z-index: 3;
  padding: 4px 11px 5px; background: var(--paper); border: 3px solid var(--ink); border-radius: 10px;
  font: 15px/1 'Lilita One'; color: var(--ink); white-space: nowrap; box-shadow: 0 3px 0 rgba(42,31,51,.3);
}
.card .nameplate.long { font-size: 13px; padding-top: 5px; }
.card .crewb { position: absolute; left: -10px; top: -10px; width: 42px; height: 42px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); display: grid; place-items: center; box-shadow: inset 0 0 0 4px var(--crew), 0 3px 0 rgba(42,31,51,.3); z-index: 4; }
.card .crewb .ic { width: 25px; height: 25px; }
.card .cost { position: absolute; right: -11px; top: -11px; height: 40px; min-width: 40px; padding: 0 8px 0 4px; border-radius: 20px; background: var(--paper); border: 3px solid var(--ink); display: none; align-items: center; gap: 2px; font: 20px/1 'Lilita One'; z-index: 4; box-shadow: 0 3px 0 rgba(42,31,51,.3); }
.card .cost .ic { width: 26px; height: 26px; }
.card.show-cost .cost { display: flex; }
.card.free .cost { background: #a6e07e; }
.card.pricey .cost { background: #ffb3b3; }
.card .heart { position: absolute; right: -10px; bottom: -10px; width: 40px; height: 40px; z-index: 4; }
.card .heart .ic { width: 40px; height: 40px; filter: drop-shadow(0 3px 0 rgba(42,31,51,.3)); }
.card .heart span { position: absolute; inset: 0; display: grid; place-items: center; font: 19px/1 'Lilita One'; color: #fff; text-shadow: 0 0 3px var(--ink), 0 2px 0 var(--ink); padding-bottom: 3px; }
.card .txt { position: absolute; left: 8px; right: 8px; top: 131px; bottom: 9px; background: var(--paper); border: 3px solid var(--ink); border-radius: 11px; padding: 10px 6px 4px 6px; display: flex; flex-direction: column; gap: 5px; font: 500 11.5px/1.2 'Fredoka'; color: var(--ink); }
.card .row { display: flex; gap: 5px; align-items: flex-start; }
.card .txt.dense { font-size: 10.6px; line-height: 1.13; gap: 3px; padding-top: 9px; }
.card .txt.dense .row b { font-size: 11.5px; }
.card .txt.dense .row + .row { padding-top: 3px; }
.card .row + .row { border-top: 2px dashed rgba(42,31,51,.2); padding-top: 5px; }
.card .row .tag { flex: none; width: 21px; height: 21px; margin-top: -1px; }
.card .row .tag .ic { width: 21px; height: 21px; }
.card .row b { font-size: 12.5px; }
.card .row .hy { color: #8a6aa8; font-weight: 600; }
.card .row.shout b { color: var(--crewd); }
.card .row.whisper b { color: #7a4fc0; }
.card.pet .row.whisper b { color: #9a6a10; }
.card .starter-tag { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); font: 600 9px/1 'Fredoka'; letter-spacing: .12em; text-transform: uppercase; background: rgba(42,31,51,.55); color: #fff; padding: 3px 7px; border-radius: 6px; z-index: 3; }
.card .shine { position: absolute; inset: 0; border-radius: 17px; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.45), transparent 45%); opacity: 0; transition: opacity .2s; mix-blend-mode: soft-light; z-index: 5; }
.card.tilting .shine { opacity: 1; }
.card .ctag { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); padding: 4px 10px 5px; border-radius: 10px; border: 3px solid var(--ink); background: var(--paper); font: 16px/1 'Lilita One'; white-space: nowrap; display: none; box-shadow: 0 3px 0 rgba(42,31,51,.3); z-index: 6; }
.card .ctag.on { display: block; }
.card .ctag .ic { width: 18px; height: 18px; }
.card .check { position: absolute; left: 50%; top: 34px; transform: translateX(-50%) scale(0); width: 50px; height: 50px; font-size: 30px !important; box-shadow: 0 4px 0 rgba(42,31,51,.35); border-radius: 50%; background: #79b84f; border: 3px solid var(--ink); display: grid; place-items: center; color: #fff; font: 24px/1 'Lilita One'; transition: transform .2s cubic-bezier(.3,1.6,.5,1); z-index: 7; }
.card.picked .check { transform: translateX(-50%) scale(1); }
.card.clickable { cursor: pointer; }
.card.glow .front, .card.glow .back { animation: glow 1.2s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 0 0 4px #fff, 0 0 0 8px var(--glowc, #ffd45c), 0 8px 18px rgba(30,20,40,.3); }
  50% { box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 0 0 4px #fff, 0 0 0 12px var(--glowc, #ffd45c), 0 0 34px 10px var(--glowc, #ffd45c); }
}
.card.dimmed .face { filter: saturate(.45) brightness(.78); }
.card.dimmed { cursor: not-allowed; }
.card.hl-red { --glowc: #ff7b7b; }
.card.hl-green { --glowc: #8ee06a; }

/* ---------- rival panels ---------- */
#rivals { position: absolute; left: 0; right: 0; top: 62px; height: 136px; z-index: 30; }
.rival { position: absolute; top: 0; width: 470px; height: 134px; padding: 10px 12px 10px 10px; display: flex; gap: 10px; transition: transform .3s, box-shadow .3s; }
.rival.turn { transform: translateY(3px); box-shadow: inset 0 0 0 3px rgba(255,255,255,.7), 0 0 0 5px var(--pc), 0 0 30px 6px var(--pc), var(--shadow); }
.rival.targetable { cursor: pointer; animation: tgt 1s ease-in-out infinite; }
@keyframes tgt { 50% { box-shadow: inset 0 0 0 3px rgba(255,255,255,.7), 0 0 0 6px #ff7b7b, 0 0 30px 10px #ff7b7b; } }
.avatar { position: relative; flex: none; width: 86px; height: 86px; border-radius: 50%; border: 4px solid var(--ink); overflow: hidden; background: var(--pc); box-shadow: 0 4px 0 rgba(42,31,51,.3); }
.avatar svg { position: absolute; left: -26%; top: -4%; width: 152%; height: auto; }
.av-wrap { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; }
.av-name { margin-top: -14px; z-index: 2; padding: 4px 10px 5px; border-radius: 10px; background: var(--pc); color: #fff; border: 3px solid var(--ink); font: 17px/1 'Lilita One'; text-shadow: 0 2px 0 var(--ink); box-shadow: 0 3px 0 rgba(42,31,51,.3); white-space: nowrap; }
.rv-mid { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rv-top { display: flex; align-items: center; gap: 8px; }
.res-row { display: flex; gap: 5px; }
.chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 3px; border-radius: 12px; border: 3px solid var(--ink); background: #fff; font: 17px/1 'Lilita One'; box-shadow: 0 2px 0 rgba(42,31,51,.25); white-space: nowrap; }
.chip .ic { width: 22px; height: 22px; }
.chip small { font: 600 11px 'Fredoka'; color: var(--ink2); margin-left: 1px; }
.chip.score { background: var(--gold); }
.chip.bump { animation: bump .35s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump { 40% { transform: scale(1.3); } }
.rv-hand { display: flex; align-items: center; height: 40px; position: relative; }
.rv-hand .mini { width: 26px; height: 36px; margin-right: -12px; border-radius: 5px; border: 2px solid var(--ink); overflow: hidden; background: #3f66b7; box-shadow: 0 2px 0 rgba(42,31,51,.3); transform-origin: 50% 100%; }
.rv-hand .mini svg { width: 100%; height: 100%; }
.rv-hand .lbl { margin-left: 20px; font: 600 12px/1.2 'Fredoka'; color: var(--ink2); }
.rv-hide { flex: none; width: 118px; display: flex; flex-direction: column; align-items: center; }
.minihide { width: 118px; height: 78px; border-radius: 12px; border: 3px solid var(--ink); overflow: hidden; background: linear-gradient(var(--sky-mid), #f2f9ff); position: relative; }
.minihide svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lvl-badge { margin-top: -12px; z-index: 2; padding: 3px 8px 4px; border-radius: 9px; border: 3px solid var(--ink); background: var(--paper); font: 13px/1 'Lilita One'; white-space: nowrap; }
.ups { display: flex; gap: 3px; flex-wrap: wrap; }
.ups .up-mini { width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--ink); background: var(--paper); padding: 1px; }
.ups .up-mini svg { width: 100%; height: 100%; }
.rv-anchor { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; }

/* ---------- player mat ---------- */
#mat { position: absolute; left: 16px; top: 566px; width: 560px; height: 326px; z-index: 30; padding: 12px 14px; }
.mat-head { display: flex; align-items: center; gap: 10px; height: 52px; }
.mat-head .avatar { width: 62px; height: 62px; border-width: 3px; margin-top: -24px; }
.mat-title { font: 24px/1 'Lilita One'; }
.mat-title small { display: block; font: 600 12px/1.2 'Fredoka'; color: var(--ink2); }
.trait-chip { margin-left: auto; max-width: 236px; padding: 5px 9px; border-radius: 12px; border: 3px solid var(--ink); background: #fff; font: 500 12px/1.2 'Fredoka'; box-shadow: 0 2px 0 rgba(42,31,51,.25); }
.trait-chip b { display: block; font-size: 14px; color: var(--pc); }
.mat-body { display: flex; gap: 12px; margin-top: 8px; }
.hide-win { position: relative; width: 250px; height: 184px; border-radius: 16px; border: 4px solid var(--ink); overflow: hidden; background: linear-gradient(var(--sky-top), var(--sky-bot)); transition: background 2s; }
.hide-win svg.hideout-art { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.hide-win .hw-name { position: absolute; left: 8px; top: 8px; padding: 3px 9px 4px; border-radius: 9px; background: rgba(255,247,234,.92); border: 3px solid var(--ink); font: 15px/1 'Lilita One'; }
.hide-win .hw-vp { position: absolute; right: 8px; top: 8px; padding: 3px 8px 4px; border-radius: 9px; background: var(--gold); border: 3px solid var(--ink); font: 15px/1 'Lilita One'; }
.hide-win.pop svg.hideout-art { animation: hpop .7s cubic-bezier(.3,1.6,.5,1); transform-origin: 50% 100%; }
@keyframes hpop { 0% { transform: scale(.6, 1.3); } 50% { transform: scale(1.15, .9); } 100% { transform: scale(1); } }
.lvl-track { display: flex; justify-content: space-between; margin-top: 7px; width: 250px; padding: 0 4px; }
.lvl-pip { width: 32px; height: 32px; border-radius: 10px; border: 3px solid var(--ink); background: #fff; display: grid; place-items: center; font: 15px/1 'Lilita One'; color: rgba(42,31,51,.4); position: relative; }
.lvl-pip.done { background: var(--pc); color: #fff; text-shadow: 0 1px 0 var(--ink); }
.lvl-pip.next { border-style: dashed; color: var(--ink); background: #fff7ea; }
.mat-side { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.stash-row { display: flex; align-items: center; gap: 6px; height: 34px; }
.stash-row .ic.big { width: 30px; height: 30px; flex: none; }
.slots { display: flex; gap: 3px; flex-wrap: nowrap; }
.sl { width: 21px; height: 25px; border-radius: 7px; border: 2.5px solid rgba(42,31,51,.35); background: rgba(255,255,255,.6); position: relative; }
.sl.full { border-color: var(--ink); background: var(--rc); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), inset 0 3px 0 rgba(255,255,255,.4); }
.sl.full.pop { animation: bump .35s cubic-bezier(.3,1.8,.5,1); }
.sl.lock { border-style: dashed; opacity: .35; }
.stash-n { margin-left: auto; font: 20px/1 'Lilita One'; min-width: 40px; text-align: right; }
.stash-n small { font: 600 12px 'Fredoka'; color: var(--ink2); }
.next-build { border-radius: 12px; border: 3px solid var(--ink); background: #fff; padding: 6px 9px; font: 500 12.5px/1.25 'Fredoka'; }
.next-build b { font-size: 15px; }
.next-build.ok { background: #e3f7d3; }
.next-build .cost-l { display: flex; gap: 8px; margin-top: 2px; font: 17px/1 'Lilita One'; align-items: center; }
.next-build .cost-l .ic { width: 22px; height: 22px; }
.mat-ups { display: flex; gap: 6px; align-items: center; min-height: 44px; }
.mat-ups .up-slot { width: 42px; height: 42px; border-radius: 10px; border: 3px dashed rgba(42,31,51,.3); }
.mat-ups .up-mini { width: 42px; height: 42px; border-radius: 10px; border: 3px solid var(--ink); background: var(--paper); padding: 2px; box-shadow: 0 3px 0 rgba(42,31,51,.25); cursor: help; }
.mat-ups .up-mini svg { width: 100%; height: 100%; }
.mat-ups .up-mini.new { animation: bump .5s cubic-bezier(.3,1.8,.5,1); }
.score-big { display: flex; align-items: center; gap: 6px; }

/* ---------- piles ---------- */
#my-deck { left: 1398px; top: 678px; width: 92px; height: 128px; cursor: pointer; z-index: 30; }
#my-discard { left: 1498px; top: 678px; width: 92px; height: 128px; cursor: pointer; z-index: 30; }
#my-discard .stack > div { background: var(--paper); }
#my-discard .stack .empty { border-style: dashed; background: rgba(255,255,255,.45); border-color: rgba(42,31,51,.35); }

/* ---------- prompt ---------- */
#prompt { position: absolute; left: 598px; width: 780px; top: 560px; height: 58px; z-index: 900; display: flex; align-items: center; justify-content: center; gap: 12px; pointer-events: none; }
#prompt .ptext { pointer-events: auto; padding: 9px 18px 10px; border-radius: 16px; background: var(--paper); border: 4px solid var(--ink); box-shadow: var(--shadow); font: 600 16px/1.2 'Fredoka'; max-width: 520px; text-align: center; }
#prompt .ptext b { font-size: 18px; }
#prompt .btn { pointer-events: auto; }
#prompt.flash .ptext { animation: bump .4s; }

/* ---------- stage (centre action) ---------- */
#stage-label { position: absolute; left: 800px; top: 510px; transform: translate(-50%, 0) scale(.6); opacity: 0; z-index: 760; padding: 7px 18px 8px; border-radius: 16px; border: 4px solid var(--ink); background: var(--paper); font: 22px/1 'Lilita One'; display: flex; align-items: center; gap: 8px; white-space: nowrap; box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.3,1.6,.5,1), opacity .2s; pointer-events: none; }
#stage-label.on { transform: translate(-50%, 0) scale(1); opacity: 1; }
#stage-label .ic { width: 28px; height: 28px; }
#stage-label .x { padding: 2px 8px; border-radius: 9px; background: var(--gold); border: 3px solid var(--ink); font-size: 18px; }
.mode-panel { position: absolute; top: 262px; width: 230px; z-index: 780; padding: 14px 14px 16px; cursor: pointer; border-radius: 22px; border: 4px solid var(--ink); background: var(--paper); box-shadow: inset 0 0 0 3px rgba(255,255,255,.7), 0 6px 0 var(--ink); transition: transform .15s; animation: popin .35s cubic-bezier(.3,1.5,.5,1) both; }
.mode-panel:hover { transform: translateY(-4px) rotate(-1deg); }
.mode-panel.disabled { filter: grayscale(.8); opacity: .7; cursor: not-allowed; transform: none; }
.mode-panel .mp-head { display: flex; align-items: center; gap: 8px; font: 26px/1 'Lilita One'; }
.mode-panel .mp-head .ic { width: 38px; height: 38px; }
.mode-panel .mp-sub { font: 600 12px/1.2 'Fredoka'; color: var(--ink2); margin: 4px 0 8px; text-transform: uppercase; letter-spacing: .05em; }
.mode-panel .mp-act { font: 600 15px/1.3 'Fredoka'; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 10px; }
.mode-panel .mp-act b { font-size: 17px; }
.mode-panel .mp-act b.t { font-size: 18px; display: block; margin-bottom: 2px; }
.mode-panel .mp-note { font: 500 12px/1.25 'Fredoka'; margin-top: 8px; color: var(--ink2); }
.mode-panel.shout { left: 430px; background: linear-gradient(#fff7ea, #ffe6d6); }
.mode-panel.whisper { left: 940px; background: linear-gradient(#fff7ea, #efe4ff); }
.mode-panel.go { left: 940px; background: linear-gradient(#fff7ea, #fff0c4); cursor: default; }
.mode-panel.go:hover { transform: none; }
.mode-panel .row-btns { display: flex; gap: 8px; margin-top: 10px; }
@keyframes popin { from { transform: scale(.5); opacity: 0; } }

/* ---------- fx ---------- */
#fx-layer { position: absolute; inset: 0; z-index: 1500; pointer-events: none; }
.token { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; will-change: transform; filter: drop-shadow(0 3px 0 rgba(42,31,51,.35)); }
.token .ic { width: 100%; height: 100%; }
.float { position: absolute; transform: translate(-50%, -50%); font: 26px/1 'Lilita One'; color: #fff; text-shadow: 0 0 4px var(--ink), 0 3px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink); white-space: nowrap; display: flex; align-items: center; gap: 4px; animation: floatup 1.3s ease-out forwards; }
.float .ic { width: 30px; height: 30px; }
.float.bad { color: #ffb3b3; }
.float.small { font-size: 19px; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 30% { transform: translate(-50%, -70%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -180%) scale(1); } }
.bubble { position: absolute; z-index: 1600; max-width: 230px; padding: 8px 13px 9px; border-radius: 18px; border: 3px solid var(--ink); background: #fff; font: 21px/1.05 'Gochi Hand', 'Fredoka', cursive; color: var(--ink); box-shadow: 0 4px 0 rgba(42,31,51,.3); transform-origin: 20% 100%; animation: bubin .3s cubic-bezier(.3,1.7,.5,1); white-space: normal; }
.bubble::after { content: ''; position: absolute; left: 22px; bottom: -13px; width: 18px; height: 16px; background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: skewX(35deg) rotate(10deg); border-bottom-right-radius: 5px; }
.bubble.down::after { bottom: auto; top: -13px; transform: skewX(-35deg) rotate(190deg); }
.bubble.out { animation: bubout .25s forwards; }
@keyframes bubin { from { transform: scale(0) rotate(-8deg); } }
@keyframes bubout { to { transform: scale(0); opacity: 0; } }
.splat { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; animation: splat .9s ease-out forwards; }
@keyframes splat { 0% { transform: scale(.2) rotate(0); opacity: 1; } 20% { transform: scale(1.2) rotate(20deg); } 70% { opacity: 1; } 100% { transform: scale(1.1) rotate(25deg); opacity: 0; } }
.shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translate(-6px, 2px) rotate(-1deg); } 40% { transform: translate(5px, -2px) rotate(1deg); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
.stage-shake { animation: sshake .35s; }
@keyframes sshake { 25% { transform: translate(-4px, 3px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 1px); } }
.foot { position: absolute; width: 18px; height: 18px; opacity: .0; animation: foot 1.4s ease-out forwards; }
@keyframes foot { 15% { opacity: .7; } 100% { opacity: 0; } }
#confetti { position: absolute; inset: 0; width: 1600px; height: 900px; pointer-events: none; z-index: 1700; }

/* ---------- banners & toasts ---------- */
#banner-root { position: absolute; inset: 0; pointer-events: none; z-index: 1800; }
.banner { position: absolute; left: 50%; top: 380px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.banner .ribbon { position: relative; padding: 16px 70px 20px; font: 56px/1 'Lilita One'; color: #fff; text-shadow: 0 4px 0 var(--ink), 0 0 2px var(--ink); background: var(--bc, #ff6b8b); border: 5px solid var(--ink); border-radius: 18px; box-shadow: inset 0 5px 0 rgba(255,255,255,.35), 0 8px 0 var(--ink); white-space: nowrap; animation: ribbon 1.7s cubic-bezier(.3,1.4,.5,1) forwards; }
.banner .ribbon::before, .banner .ribbon::after { content: ''; position: absolute; top: 22px; width: 50px; height: 64px; background: var(--bc, #ff6b8b); filter: brightness(.82); border: 5px solid var(--ink); z-index: -1; }
.banner .ribbon::before { left: -34px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%); }
.banner .ribbon::after { right: -34px; clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%); }
.banner .sub { margin-top: 12px; padding: 7px 16px 8px; border-radius: 12px; background: var(--paper); border: 4px solid var(--ink); font: 600 19px/1.1 'Fredoka'; animation: ribbon 1.7s cubic-bezier(.3,1.4,.5,1) .05s both; box-shadow: var(--shadow); }
.banner.long .ribbon, .banner.long .sub { animation-duration: 2.4s; }
@keyframes ribbon { 0% { transform: scale(0) rotate(-6deg); opacity: 0; } 15% { transform: scale(1.08) rotate(1deg); opacity: 1; } 25% { transform: scale(1) rotate(-1deg); } 82% { transform: scale(1) rotate(-1deg); opacity: 1; } 100% { transform: scale(.9) translateY(-30px); opacity: 0; } }
.toast { position: absolute; left: 50%; top: 226px; transform: translateX(-50%); padding: 8px 18px 9px; border-radius: 14px; background: var(--ink); color: #fff; font: 600 16px/1.2 'Fredoka'; animation: toast 2.2s ease forwards; white-space: nowrap; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.toast b { color: var(--gold); }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---------- coach ---------- */
#coach { position: absolute; left: 24px; top: 600px; width: 544px; z-index: 1400; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 14px 14px; animation: popin .35s cubic-bezier(.3,1.5,.5,1); }
#coach .avatar { width: 76px; height: 76px; background: #f2c14a; }
#coach .avatar svg { left: -20%; width: 140%; top: -2%; }
#coach .ctext { flex: 1; font: 500 16px/1.3 'Fredoka'; }
#coach .ctext b { display: block; font-size: 19px; margin-bottom: 2px; color: #b4561c; }
#coach .cbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ---------- modals ---------- */
#modal-root { position: absolute; inset: 0; z-index: 1900; pointer-events: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(18, 20, 48, .62); pointer-events: auto; animation: fadein .25s; display: grid; place-items: center; }
@keyframes fadein { from { opacity: 0; } }
.modal { position: relative; padding: 26px 30px; max-width: 1300px; animation: popin .35s cubic-bezier(.3,1.4,.5,1); }
.modal h2 { margin: 0 0 6px; font: 40px/1 'Lilita One'; text-align: center; }
.modal .sub { text-align: center; font: 500 17px/1.3 'Fredoka'; color: var(--ink2); margin-bottom: 16px; }
.modal .close { position: absolute; right: -16px; top: -16px; }
.perk-choices { display: flex; gap: 28px; justify-content: center; }
.perk { width: 250px; padding: 18px 18px 20px; border-radius: 22px; border: 4px solid var(--ink); background: linear-gradient(#fffdf6, #fff0d0); cursor: pointer; text-align: center; box-shadow: inset 0 0 0 3px #fff, 0 6px 0 var(--ink); transition: transform .15s; }
.perk:hover { transform: translateY(-6px) rotate(-1.5deg); }
.perk .up-art { width: 120px; height: 120px; margin: 4px auto 6px; display: block; }
.perk .pn { font: 26px/1 'Lilita One'; }
.perk .pt { font: 500 16px/1.3 'Fredoka'; margin-top: 8px; }
.perk .pv { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 9px; background: var(--gold); border: 3px solid var(--ink); font: 15px 'Lilita One'; }
.deck-grid { display: flex; flex-wrap: wrap; gap: 14px; max-width: 1180px; max-height: 620px; overflow: auto; padding: 18px 10px 10px; justify-content: center; }
.deck-grid .mini-card { position: relative; width: 126px; height: 176px; }
.deck-grid .mini-card .card { transform: scale(.7); transform-origin: 0 0; position: absolute; }
.deck-sec { width: 100%; font: 22px 'Lilita One'; margin: 6px 0 -4px; display: flex; gap: 8px; align-items: center; }
.deck-sec small { font: 500 14px 'Fredoka'; color: var(--ink2); }

/* how to play */
.howto { width: 1120px; }
.howto .pages { position: relative; height: 470px; }
.howto .page { position: absolute; inset: 0; display: flex; gap: 30px; align-items: center; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; transform: translateX(30px); }
.howto .page.on { opacity: 1; pointer-events: auto; transform: none; }
.howto .pic { flex: none; width: 470px; height: 440px; position: relative; border-radius: 22px; border: 4px solid var(--ink); background: linear-gradient(#cfe9fb, #f1f9ff); overflow: hidden; }
.howto .ptxt { flex: 1; font: 500 19px/1.45 'Fredoka'; }
.howto .ptxt h3 { font: 38px/1.05 'Lilita One'; margin: 0 0 12px; }
.howto .ptxt li { margin-bottom: 8px; }
.howto .ptxt ul { padding-left: 22px; margin: 0; }
.howto .nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.dots { display: flex; gap: 8px; }
.dots span { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; cursor: pointer; }
.dots span.on { background: var(--pink); }
.pic .card { pointer-events: none; }

/* settings */
.settings { width: 560px; }
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; border-bottom: 3px dashed rgba(42,31,51,.15); font: 600 19px 'Fredoka'; }
.seg { display: flex; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; }
.seg button { font: 16px/1 'Lilita One'; padding: 9px 14px; border: 0; background: #fff; cursor: pointer; color: var(--ink); }
.seg button + button { border-left: 3px solid var(--ink); }
.seg button.on { background: var(--gold); }

/* log */
#log-drawer { position: absolute; right: 16px; top: 64px; width: 380px; height: 480px; z-index: 1450; padding: 16px; display: flex; flex-direction: column; transform: translateX(430px); transition: transform .3s cubic-bezier(.3,1.2,.5,1); }
#log-drawer.open { transform: none; }
#log-drawer h3 { margin: 0 0 8px; font: 24px 'Lilita One'; }
#log-list { flex: 1; overflow: auto; font: 500 14px/1.35 'Fredoka'; padding-right: 6px; }
#log-list .le { padding: 5px 0 5px 10px; border-left: 4px solid var(--lc, #ccc); margin-bottom: 4px; }
#log-list .lr { font: 15px 'Lilita One'; margin: 8px 0 4px; color: var(--ink2); }

/* preview */
#preview { position: absolute; z-index: 1550; pointer-events: none; display: flex; gap: 14px; align-items: flex-start; animation: fadein .15s; }
#preview .pv-card { position: relative; width: 252px; height: 353px; }
#preview .pv-card .card { transform: scale(1.4); transform-origin: 0 0; }
#preview .pv-info { width: 230px; padding: 12px 14px; font: 500 14px/1.35 'Fredoka'; }
#preview .pv-info .fl { font: 20px/1.15 'Gochi Hand', cursive; color: var(--ink2); margin: 4px 0 8px; }
#preview .pv-info .kw { margin-top: 6px; padding-top: 6px; border-top: 2px dashed rgba(42,31,51,.2); }
#preview .pv-info .kw b { font-size: 15px; }

/* results */
.results { width: 1080px; }
.res-table { display: flex; gap: 18px; justify-content: center; margin-top: 10px; }
.res-col { width: 250px; border-radius: 20px; border: 4px solid var(--ink); background: #fff; padding: 12px 14px 14px; position: relative; box-shadow: 0 5px 0 rgba(42,31,51,.3); }
.res-col.win { background: linear-gradient(#fff6cf, #ffe08a); transform: translateY(-10px); }
.res-col .crown { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); width: 70px; }
.res-col .avatar { width: 96px; height: 96px; margin: 0 auto; }
.res-col .rname { text-align: center; font: 24px/1 'Lilita One'; margin: 6px 0 8px; }
.res-line { display: flex; justify-content: space-between; align-items: center; font: 500 16px/1 'Fredoka'; padding: 6px 2px; border-bottom: 2px dashed rgba(42,31,51,.15); }
.res-line .ic { width: 22px; height: 22px; margin-right: 4px; }
.res-line span:last-child { font: 20px 'Lilita One'; }
.res-total { display: flex; justify-content: space-between; align-items: center; font: 30px 'Lilita One'; margin-top: 8px; }
.res-place { position: absolute; left: -14px; top: -14px; width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--ink); background: var(--paper); display: grid; place-items: center; font: 22px 'Lilita One'; }
.res-stats { text-align: center; margin-top: 18px; font: 500 15px/1.4 'Fredoka'; color: var(--ink2); }

/* ---------- title screen ---------- */
#screen-title { z-index: 100; }
.title-wrap { position: absolute; left: 0; right: 0; top: 56px; display: flex; flex-direction: column; align-items: center; }
.logo { position: relative; display: flex; gap: 2px; font: 132px/1 'Lilita One'; letter-spacing: .01em; }
.logo .w { display: flex; margin: 0 14px; }
.logo .l { display: inline-block; color: var(--lc); -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 0 9px 0 var(--ink), 0 14px 18px rgba(20,16,40,.35); animation: bob 2.6s ease-in-out infinite; position: relative; }
.logo .l::before { content: ''; position: absolute; left: 6%; right: 6%; top: 10px; height: 26px; background: #fff; border: 4px solid var(--ink); border-radius: 30px 30px 14px 14px / 26px 26px 10px 10px; z-index: 1; }
.logo .l span { position: relative; z-index: 0; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(var(--rot, 1deg)); } }
.tagline { margin-top: 8px; padding: 9px 24px 11px; border-radius: 16px; background: var(--paper); border: 4px solid var(--ink); font: 600 22px/1.1 'Fredoka'; box-shadow: var(--shadow); transform: rotate(-1deg); }
.title-menu { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); display: flex; gap: 18px; z-index: 5; }
.title-cast { position: absolute; left: 0; right: 0; bottom: 0; height: 440px; pointer-events: none; }
.title-cast .castle { position: absolute; left: 50%; bottom: 196px; width: 500px; transform: translateX(-50%); }
.title-cast .deco { position: absolute; }
.title-cast .deco svg { width: 100%; height: auto; display: block; }
.groundcap.back { bottom: 120px; height: 300px; }
.title-cast .kid { position: absolute; bottom: 120px; width: 230px; }
.title-cast .kid svg { width: 100%; height: auto; display: block; }
.title-cast .kid { animation: hop 3s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 48% { transform: translateY(0); } 55% { transform: translateY(-16px) rotate(-2deg); } 62% { transform: translateY(0); } }
.title-foot { position: absolute; left: 20px; bottom: 14px; font: 600 14px 'Fredoka'; color: rgba(42,31,51,.7); z-index: 5; }
.title-foot b { color: var(--ink); }
.title-tools { position: absolute; right: 20px; top: 18px; display: flex; gap: 10px; z-index: 5; }
.groundcap { position: absolute; left: -20px; right: -20px; bottom: -10px; height: 170px; }

/* ---------- select screen ---------- */
#screen-select { z-index: 100; }
.sel-head { position: absolute; left: 0; right: 0; top: 40px; text-align: center; }
.sel-head h1 { margin: 0; font: 64px/1 'Lilita One'; color: #fff; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); }
.sel-head p { margin: 8px 0 0; font: 600 20px 'Fredoka'; }
.leaders { position: absolute; left: 0; right: 0; top: 150px; display: flex; gap: 26px; justify-content: center; }
.lcard { position: relative; width: 330px; height: 536px; padding: 12px; cursor: pointer; transition: transform .2s; border-radius: 26px; border: 4px solid var(--ink); background: var(--pc); box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), 0 8px 0 var(--ink); }
.lcard:hover { transform: translateY(-8px) rotate(-1deg); }
.lcard.on { transform: translateY(-16px); box-shadow: inset 0 0 0 4px rgba(255,255,255,.5), 0 0 0 8px #fff, 0 0 0 13px var(--gold), 0 16px 0 var(--ink); }
.lcard .lart { height: 252px; border-radius: 18px; border: 4px solid var(--ink); overflow: hidden; background: #fff; position: relative; }
.lcard .lart svg { width: 100%; height: 100%; display: block; }
.lcard .lpet { position: absolute; right: -6px; top: 196px; width: 108px; height: 108px; border-radius: 50%; border: 4px solid var(--ink); overflow: hidden; background: #f2c14a; box-shadow: 0 4px 0 rgba(42,31,51,.35); }
.lcard .lpet svg { position: absolute; left: -20%; top: -4%; width: 140%; }
.lcard .lname { margin: 12px 0 0 6px; font: 40px/1 'Lilita One'; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.lcard .lfull { margin: 2px 0 8px 8px; font: 600 14px 'Fredoka'; color: #fff; text-shadow: 0 1px 0 var(--ink); }
.lcard .lbox { background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; padding: 9px 11px; font: 500 14px/1.3 'Fredoka'; }
.lcard .lbox + .lbox { margin-top: 8px; }
.lcard .lbox b { display: block; font-size: 17px; margin-bottom: 1px; }
.lcard .lbox .pet-l { color: #9a6a10; }
.lcard .lblurb { margin: 10px 6px 0; font: 19px/1.1 'Gochi Hand', cursive; color: #fff; text-shadow: 0 2px 0 rgba(42,31,51,.55); }
.sel-foot { position: absolute; left: 0; right: 0; bottom: 38px; display: flex; justify-content: center; align-items: center; gap: 22px; }
.sel-opt { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font: 600 17px 'Fredoka'; }

/* misc */
.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.tip-hl { position: absolute; border: 4px dashed #ffd45c; border-radius: 24px; z-index: 1390; pointer-events: none; animation: tiphl 1s ease-in-out infinite; }
@keyframes tiphl { 50% { box-shadow: 0 0 0 8px rgba(255,212,92,.35); } }