/* Everything is sized from the window so the whole table fits without page scrolling. */
:root {
  --bg: #0d1b3e;
  --mat: #1b3f8f;
  --mat-2: #24509f;
  --mat-line: rgba(255, 255, 255, .16);
  --panel: #fbfaf6;
  --ink: #1d2320;
  --muted: #6b726e;
  --line: #d9d6cc;
  --yellow: #ffcb05;
  --yellow-dark: #c7a008;
  --blue: #2a75bb;
  --navy: #3c5aa6;
  --you: #2a75bb;
  --opp: #d33b3b;
  --good: #2e9d57;
  --Grass: #3f9b4a;
  --Fire: #e5562f;
  --Water: #3a8ee0;
  --Lightning: #f2c12e;
  --Psychic: #9c5bc0;
  --Fighting: #b8642f;
  --Colorless: #bdb8aa;

  --side-w: clamp(280px, 25vw, 380px);
  --header-h: 54px;
  --active-h: max(96px, min(21vh, calc((100vw - var(--side-w) - 190px) / 4.4), 250px));
  --active-w: calc(var(--active-h) * .716);
  --card-h: calc(var(--active-h) * .74);
  --card-w: calc(var(--card-h) * .716);
  --prize-h: calc(var(--active-h) * .29);
  --prize-w: calc(var(--prize-h) * .716);
  --pile-h: calc(var(--active-h) * .46);
  --pile-w: calc(var(--pile-h) * .716);
  --hand-h: max(80px, min(15.5vh, 220px));
  --hand-w: calc(var(--hand-h) * .716);
  font-family: Nunito, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(ellipse at top, #18306b, var(--bg)); color: var(--ink); }
button { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid var(--line); background: #fff; padding: 6px 12px; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--yellow); border-color: var(--yellow-dark); font-weight: 800; color: #1d2a5a; }
button.ghost { background: transparent; }
h1, h2, h3, .title, .over-title { font-family: "Baloo 2", Nunito, sans-serif; font-weight: 800; letter-spacing: 0; line-height: 1.15; }

header { flex: none; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: #fff; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { height: 40px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand .title { font-size: 22px; color: var(--yellow); text-shadow: 2px 2px 0 var(--navy); }
.badge { font-size: 11px; background: var(--yellow); color: #1d2a5a; padding: 0 8px; border-radius: 99px; font-weight: 800; align-self: flex-start; }
header nav { display: flex; gap: 8px; align-items: center; }
.lang { display: inline-flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.lang button { border: none; border-radius: 0; padding: 6px 10px; font-weight: 800; background: #fff; color: var(--muted); }
.lang button.on { background: var(--yellow); color: #1d2a5a; }
.legal { font-size: 11px; color: var(--muted); margin: 12px 0 0; text-align: center; }

#table { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); gap: 10px; padding: 0 10px 10px; }

/* ---------- Playmat ---------- */
#board { min-height: 0; overflow: hidden; background: linear-gradient(180deg, var(--mat), var(--mat-2) 50%, var(--mat)); border-radius: 18px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; color: #fff; box-shadow: inset 0 0 0 3px rgba(255,255,255,.08); }
.mat { flex: 1 1 0; min-height: 0; display: flex; justify-content: center; gap: 14px; }
.mat.opp { align-items: flex-end; }
.mat.you { align-items: flex-start; }
.active-zone { flex: none; width: var(--active-w); display: flex; justify-content: center; }
.bench { flex: none; display: flex; gap: 8px; padding: 6px; border: 2px dashed var(--mat-line); border-radius: 12px; align-items: flex-start; }
.mat.opp .bench { align-items: flex-end; }
.empty-slot { flex: none; width: var(--card-w); height: calc(var(--card-w) * 1.396); border: 2px dashed var(--mat-line); border-radius: 8px; display: grid; place-items: center; font-size: 10px; opacity: .7; text-align: center; padding: 4px; }
.active-zone .empty-slot { width: var(--active-w); height: calc(var(--active-w) * 1.396); font-size: 12px; }

.prizes { flex: none; display: grid; grid-template-columns: repeat(2, var(--prize-w)); gap: 4px; padding: 5px; border: 2px dashed var(--mat-line); border-radius: 10px; align-self: center; }
.prizes .slot { width: var(--prize-w); height: var(--prize-h); border-radius: 4px; border: 1px dashed var(--mat-line); }
.prizes img { width: var(--prize-w); height: var(--prize-h); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.4); display: block; }
.prizes .cap { grid-column: 1 / -1; text-align: center; font-size: 11px; font-weight: 800; opacity: .85; }

.piles { flex: none; display: flex; flex-direction: column; gap: 10px; align-items: center; align-self: center; }
.pile { position: relative; text-align: center; font-size: 11px; font-weight: 800; }
.pile .stack { position: relative; width: var(--pile-w); height: var(--pile-h); }
.pile .stack img { position: absolute; inset: 0; width: var(--pile-w); height: var(--pile-h); border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.45); }
.pile .stack.deck img:nth-child(1) { transform: translate(3px, 3px); }
.pile .stack.deck img:nth-child(2) { transform: translate(1.5px, 1.5px); }
.pile .count { position: absolute; right: -8px; top: calc(var(--pile-h) - 14px); background: var(--yellow); color: #1d2a5a; border-radius: 99px; min-width: 24px; padding: 1px 6px; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.4); z-index: 2; }
.pile .empty { width: var(--pile-w); height: var(--pile-h); border: 2px dashed var(--mat-line); border-radius: 6px; }

#midbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(0,0,0,.28); border-radius: 12px; padding: 4px 12px; font-size: 13px; min-height: 34px; }
#turn-info { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 17px; white-space: nowrap; }
#turn-info .you { color: var(--yellow); }
#turn-info .opp { color: #ff9c9c; }
#opp-status { flex: 1; min-width: 0; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#opp-status.thinking::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--yellow); border-top-color: transparent; margin-right: 6px; animation: spin .7s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
#win-meter { display: flex; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; }
.meter { width: 100px; height: 10px; background: rgba(255,255,255,.2); border-radius: 99px; overflow: hidden; }
#win-fill { height: 100%; width: 50%; background: linear-gradient(90deg, #e05555, var(--yellow), #3fbf6e); transition: width .6s; }

/* ---------- Pokémon in play ---------- */
.mon { position: relative; flex: none; width: var(--card-w); transition: transform .15s; border-radius: 6px; }
.mon.active { width: var(--active-w); }
.mon img.card-img { width: 100%; display: block; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,.45); }
.hpbar { height: 5px; background: rgba(255,255,255,.25); border-radius: 99px; overflow: hidden; margin-top: 3px; }
.hpbar > div { height: 100%; background: #46c46e; transition: width .4s; }
.hpbar.mid > div { background: #f0b429; }
.hpbar.low > div { background: #ef5350; }
.hptext { font-size: 11px; font-weight: 800; text-align: center; line-height: 1.2; }
.mon .tags { position: absolute; left: -4px; top: 6px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; z-index: 25; }
.mon .tags span { font-size: 10px; font-weight: 800; color: #fff; border-radius: 99px; padding: 1px 7px; box-shadow: 0 1px 3px rgba(0,0,0,.4); white-space: nowrap; }
.tag-status { background: #7b3fb8; }
.tag-tool { background: #1f7a52; }
.tag-fx { background: #0e6aa8; }
.facedown img { width: 100%; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,.45); display: block; }
.ei { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 1.5px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.4); vertical-align: middle; }

/* ---------- Hand ---------- */
#hand-wrap { flex: none; height: calc(var(--hand-h) + 16px); background: rgba(0,0,0,.22); border-radius: 12px; padding: 8px 10px; }
#hand { display: flex; justify-content: center; align-items: flex-end; height: 100%; }
#hand .hcard { flex: none; width: var(--hand-w); position: relative; transition: transform .15s; }
#hand .hcard img { width: 100%; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,.45); display: block; }
#hand .hcard:hover { transform: translateY(-12%) scale(1.12); z-index: 10; }
#hand .hcard.arriving { visibility: hidden; }
.hl { transform: translateY(-5px); }
.hl img { box-shadow: 0 0 0 4px var(--yellow), 0 8px 16px rgba(0,0,0,.5) !important; }

/* Card travelling from the deck (or a Prize card) to a hand */
.fly { position: fixed; z-index: 35; pointer-events: none; transform-origin: 0 0; perspective: 800px; }
.fly-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.fly-inner img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; backface-visibility: hidden; box-shadow: 0 8px 18px rgba(0,0,0,.5); }
.fly-inner img.fb { transform: rotateY(180deg); }
.fly-inner.back-only img.fb { transform: none; }

/* ---------- Sidebar ---------- */
aside { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.panel { background: var(--panel); border-radius: 14px; padding: 8px 12px; }
.panel h2 { font-size: 16px; margin: 0 0 4px; color: var(--navy); }
#inspector { flex: none; max-height: 40vh; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 60px; }
#inspector img { max-height: 30vh; max-width: 100%; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
#inspector .tr-text { font-size: 12px; line-height: 1.35; background: #fff7d6; border-radius: 8px; padding: 6px 8px; width: 100%; }
#inspector .tr-text b { color: var(--navy); }
#inspector .muted { color: var(--muted); font-size: 13px; text-align: center; margin: auto; }
#actions-panel { flex: 0 1 auto; min-height: 96px; display: flex; flex-direction: column; overflow: hidden; }
#tips { flex: none; margin: 0 0 6px; padding-left: 18px; font-size: 12.5px; color: #3c4a43; }
#tips li { margin-bottom: 1px; }
#actions { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; }
.act { flex: none; text-align: left; position: relative; overflow: hidden; padding: 6px 10px; display: flex; justify-content: space-between; gap: 8px; align-items: center; font-weight: 700; font-size: 13.5px; }
.act:hover { border-color: var(--you); background: #f3f8ff; }
.act .lbl { position: relative; }
.act .pct { position: relative; font-size: 12px; color: var(--muted); white-space: nowrap; }
.act.best { border-color: var(--yellow-dark); }
.act.best .pct { color: #8a6a00; font-weight: 800; }
.act.k-attack { border-left: 4px solid var(--opp); }
.act.k-trainer { border-left: 4px solid #8a8f99; }
.act.k-energy { border-left: 4px solid var(--blue); }
.act.k-end { color: var(--muted); }
#actions .waiting { font-size: 13px; color: var(--muted); padding: 6px 0; }
#coach-panel { flex: none; }
#coach-panel label { display: block; font-size: 12.5px; margin-bottom: 2px; }
#coach-msg { margin-top: 4px; font-size: 12.5px; color: var(--ink); line-height: 1.35; }
#coach-msg.good { color: var(--good); }
#coach-msg.meh { color: #8a6a00; }
#coach-msg.bad { color: var(--opp); }
#log-panel { flex: 1 1 0; min-height: 70px; display: flex; flex-direction: column; }
#log { flex: 1; min-height: 0; overflow-y: auto; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
#log div { padding: 2px 6px; border-radius: 4px; line-height: 1.35; }
#log .you { border-left: 3px solid var(--you); }
#log .opp { border-left: 3px solid var(--opp); }
#log .turn { font-weight: 800; background: #e6ebf7; margin-top: 4px; color: var(--navy); }
#log .rule { background: #fff7d6; border-left: 3px solid var(--yellow); }
#log .coach { background: #eef6ff; }
#log .ko { color: var(--opp); font-weight: 800; }
#log .win { background: var(--yellow); font-weight: 800; }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; background: rgba(6, 12, 30, .78); display: grid; place-items: center; z-index: 20; padding: 16px; }
.dialog { background: var(--panel); border-radius: 18px; padding: 18px 20px; max-width: 640px; width: 100%; max-height: 92vh; overflow-y: auto; position: relative; }
.dialog.wide { max-width: 860px; }
.dialog h2 { margin-top: 0; color: var(--navy); }
.dialog .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.dialog .row.between { justify-content: space-between; }
.dialog .row .row { margin-top: 0; }
.dialog .close { position: absolute; top: 12px; right: 12px; }
.rules section { border-top: 1px solid var(--line); padding-top: 4px; }
.rules h3 { margin: 10px 0 4px; color: var(--navy); }
.rules p, .rules li { font-size: 14px; line-height: 1.5; }

.start p { max-width: 640px; margin: 0 auto 8px; }
.start h2 { margin-bottom: 4px; }
.opts { font-size: 14px; display: flex; gap: 6px; align-items: center; }

.choice-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0; }
.choice-grid > button { padding: 0; border: none; background: none; border-radius: 8px; position: relative; }
.choice-grid > button img { width: 120px; border-radius: 6px; display: block; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .15s, box-shadow .15s; }
.choice-grid.small > button img { width: 80px; }
.choice-grid > button:hover img { transform: translateY(-4px); }
.choice-grid > button.sel img { box-shadow: 0 0 0 4px var(--yellow), 0 4px 10px rgba(0,0,0,.4); }
.choice-grid .sub { display: block; font-size: 12px; font-weight: 800; margin-top: 3px; color: var(--ink); }
.over-title { font-size: 34px; margin: 0; color: var(--navy); }
.prize-reveal { text-align: center; }
.prize-reveal img { width: min(220px, 50vh); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.4); animation: pop .4s ease-out; }
@keyframes pop { from { transform: rotateY(90deg) scale(.8); } to { transform: none; } }

/* Small screens: stack the sidebar under the board and allow scrolling. */
@media (max-width: 900px) {
  body { height: auto; overflow: auto; }
  #table { grid-template-columns: 1fr; }
  :root { --active-h: max(90px, min(21vh, calc((100vw - 120px) / 4.4))); --side-w: 100%; }
  #board { min-height: 80vh; }
}

/* ---------- Icons (Lucide, lucide.dev; Pokémon type icons by duiker101) ---------- */
.ic { display: inline-block; width: 1.05em; height: 1.05em; background: currentColor; vertical-align: -0.17em; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; flex: none; }
.ic-book-open { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-book-open%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%207v14%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-rotate-ccw { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-rotate-ccw%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208%22%20%2F%3E%20%3Cpath%20d%3D%22M3%203v5h5%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-brain { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-brain%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%205a3%203%200%201%200-5.997.125%204%204%200%200%200-2.526%205.77%204%204%200%200%200%20.556%206.588A4%204%200%201%200%2012%2018Z%22%20%2F%3E%20%3Cpath%20d%3D%22M12%205a3%203%200%201%201%205.997.125%204%204%200%200%201%202.526%205.77%204%204%200%200%201-.556%206.588A4%204%200%201%201%2012%2018Z%22%20%2F%3E%20%3Cpath%20d%3D%22M15%2013a4.5%204.5%200%200%201-3-4%204.5%204.5%200%200%201-3%204%22%20%2F%3E%20%3Cpath%20d%3D%22M17.599%206.5a3%203%200%200%200%20.399-1.375%22%20%2F%3E%20%3Cpath%20d%3D%22M6.003%205.125A3%203%200%200%200%206.401%206.5%22%20%2F%3E%20%3Cpath%20d%3D%22M3.477%2010.896a4%204%200%200%201%20.585-.396%22%20%2F%3E%20%3Cpath%20d%3D%22M19.938%2010.5a4%204%200%200%201%20.585.396%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2018a4%204%200%200%201-1.967-.516%22%20%2F%3E%20%3Cpath%20d%3D%22M19.967%2017.484A4%204%200%200%201%2018%2018%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-x { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-x%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M18%206%206%2018%22%20%2F%3E%20%3Cpath%20d%3D%22m6%206%2012%2012%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-trophy { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-trophy%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%20%2F%3E%20%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%20%2F%3E%20%3Cpath%20d%3D%22M4%2022h16%22%20%2F%3E%20%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%20%2F%3E%20%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%20%2F%3E%20%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-frown { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-frown%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2016s-1.5-2-4-2-4%202-4%202%22%20%2F%3E%20%3Cline%20x1%3D%229%22%20x2%3D%229.01%22%20y1%3D%229%22%20y2%3D%229%22%20%2F%3E%20%3Cline%20x1%3D%2215%22%20x2%3D%2215.01%22%20y1%3D%229%22%20y2%3D%229%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-handshake { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-handshake%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m11%2017%202%202a1%201%200%201%200%203-3%22%20%2F%3E%20%3Cpath%20d%3D%22m14%2014%202.5%202.5a1%201%200%201%200%203-3l-3.88-3.88a3%203%200%200%200-4.24%200l-.88.88a1%201%200%201%201-3-3l2.81-2.81a5.79%205.79%200%200%201%207.06-.87l.47.28a2%202%200%200%200%201.42.25L21%204%22%20%2F%3E%20%3Cpath%20d%3D%22m21%203%201%2011h-2%22%20%2F%3E%20%3Cpath%20d%3D%22M3%203%202%2014l6.5%206.5a1%201%200%201%200%203-3%22%20%2F%3E%20%3Cpath%20d%3D%22M3%204h8%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-circle-check { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-circle-check%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-thumbs-up { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-thumbs-up%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M7%2010v12%22%20%2F%3E%20%3Cpath%20d%3D%22M15%205.88%2014%2010h5.83a2%202%200%200%201%201.92%202.56l-2.33%208A2%202%200%200%201%2017.5%2022H4a2%202%200%200%201-2-2v-8a2%202%200%200%201%202-2h2.76a2%202%200%200%200%201.79-1.11L12%202a3.13%203.13%200%200%201%203%203.88Z%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-lightbulb { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-lightbulb%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M15%2014c.2-1%20.7-1.7%201.5-2.5%201-.9%201.5-2.2%201.5-3.5A6%206%200%200%200%206%208c0%201%20.2%202.2%201.5%203.5.7.7%201.3%201.5%201.5%202.5%22%20%2F%3E%20%3Cpath%20d%3D%22M9%2018h6%22%20%2F%3E%20%3Cpath%20d%3D%22M10%2022h4%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-triangle-alert { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-triangle-alert%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%20%2F%3E%20%3Cpath%20d%3D%22M12%209v4%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2017h.01%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-coins { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-coins%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%20%2F%3E%20%3Cpath%20d%3D%22M18.09%2010.37A6%206%200%201%201%2010.34%2018%22%20%2F%3E%20%3Cpath%20d%3D%22M7%206h1v4%22%20%2F%3E%20%3Cpath%20d%3D%22m16.71%2013.88.7.71-2.82%202.82%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-sparkles { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-sparkles%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22%20%2F%3E%20%3Cpath%20d%3D%22M20%203v4%22%20%2F%3E%20%3Cpath%20d%3D%22M22%205h-4%22%20%2F%3E%20%3Cpath%20d%3D%22M4%2017v2%22%20%2F%3E%20%3Cpath%20d%3D%22M5%2018H3%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-swords { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-swords%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpolyline%20points%3D%2214.5%2017.5%203%206%203%203%206%203%2017.5%2014.5%22%20%2F%3E%20%3Cline%20x1%3D%2213%22%20x2%3D%2219%22%20y1%3D%2219%22%20y2%3D%2213%22%20%2F%3E%20%3Cline%20x1%3D%2216%22%20x2%3D%2220%22%20y1%3D%2216%22%20y2%3D%2220%22%20%2F%3E%20%3Cline%20x1%3D%2219%22%20x2%3D%2221%22%20y1%3D%2221%22%20y2%3D%2219%22%20%2F%3E%20%3Cpolyline%20points%3D%2214.5%206.5%2018%203%2021%203%2021%206%2017.5%209.5%22%20%2F%3E%20%3Cline%20x1%3D%225%22%20x2%3D%229%22%20y1%3D%2214%22%20y2%3D%2218%22%20%2F%3E%20%3Cline%20x1%3D%227%22%20x2%3D%224%22%20y1%3D%2217%22%20y2%3D%2220%22%20%2F%3E%20%3Cline%20x1%3D%223%22%20x2%3D%225%22%20y1%3D%2219%22%20y2%3D%2221%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-heart-pulse { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-heart-pulse%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%22%20%2F%3E%20%3Cpath%20d%3D%22M3.22%2012H9.5l.5-1%202%204.5%202-7%201.5%203.5h5.27%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-target { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-target%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-layers { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-layers%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m12.83%202.18a2%202%200%200%200-1.66%200L2.6%206.08a1%201%200%200%200%200%201.83l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%200-1.83Z%22%20%2F%3E%20%3Cpath%20d%3D%22m22%2017.65-9.17%204.16a2%202%200%200%201-1.66%200L2%2017.65%22%20%2F%3E%20%3Cpath%20d%3D%22m22%2012.65-9.17%204.16a2%202%200%200%201-1.66%200L2%2012.65%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-flag { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-flag%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M4%2015s1-1%204-1%205%202%208%202%204-1%204-1V3s-1%201-4%201-5-2-8-2-4%201-4%201z%22%20%2F%3E%20%3Cline%20x1%3D%224%22%20x2%3D%224%22%20y1%3D%2222%22%20y2%3D%2215%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-repeat { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-repeat%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m17%202%204%204-4%204%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2011v-1a4%204%200%200%201%204-4h14%22%20%2F%3E%20%3Cpath%20d%3D%22m7%2022-4-4%204-4%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2013v1a4%204%200%200%201-4%204H3%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-package { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-package%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M11%2021.73a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73z%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2022V12%22%20%2F%3E%20%3Cpath%20d%3D%22m3.3%207%207.703%204.734a2%202%200%200%200%201.994%200L20.7%207%22%20%2F%3E%20%3Cpath%20d%3D%22m7.5%204.27%209%205.15%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-star { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-star%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M11.525%202.295a.53.53%200%200%201%20.95%200l2.31%204.679a2.123%202.123%200%200%200%201.595%201.16l5.166.756a.53.53%200%200%201%20.294.904l-3.736%203.638a2.123%202.123%200%200%200-.611%201.878l.882%205.14a.53.53%200%200%201-.771.56l-4.618-2.428a2.122%202.122%200%200%200-1.973%200L6.396%2021.01a.53.53%200%200%201-.77-.56l.881-5.139a2.122%202.122%200%200%200-.611-1.879L2.16%209.795a.53.53%200%200%201%20.294-.906l5.165-.755a2.122%202.122%200%200%200%201.597-1.16z%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ei-Grass { --i: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m97.4121%20440.649c-1.7574-1.653-3.4954-3.338-5.2132-5.056-90.68455-90.684-90.68453-237.713%200-328.397%2090.6841-90.6849%20379.6401-96.7516%20379.6401-96.7516s39.442%20334.4646-51.242%20425.1486c-80.54%2080.54-205.522%2089.55-296.005%2027.031l72.908-89.471%20116.55-25.163-95.139-9.511%2060.462-61.562%2068.824-15.077-54.422-16.117%2054.422-98.176-77.41%2086.828-29.893-42.183%2010.523%2069.648-53.917%2060.782-24.993-76.9v102.268z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); }
.ei-Fire { --i: url("data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M352.258%20395.394C358.584%20372.263%20346.305%20324.71%20346.305%20324.71C346.305%20324.71%20337.399%20363.449%20323.483%20377.767C311.611%20389.98%20297.066%20398.451%20276.206%20400.677C293.261%20392.393%20304.99%20375.12%20304.99%20355.155C304.99%20327.129%20281.878%20304.409%20253.368%20304.409C224.858%20304.409%20201.745%20327.129%20201.745%20355.155C201.745%20362.809%20203.47%20370.068%20206.557%20376.576C188.725%20362.37%20185.921%20339.594%20185.921%20339.594C185.921%20339.594%20166.009%20422.264%20220.875%20461.152C275.74%20500.04%20383.219%20466.614%20383.219%20466.614C383.219%20466.614%20229.41%20574.837%20115.436%20457.05C17.2568%20355.584%2089.8111%20222.003%2089.8111%20222.003C89.8111%20222.003%2086.6777%20234.395%2086.6777%20248.78C86.6777%20263.165%2094.477%20274.11%2094.477%20274.11C94.477%20274.11%20117.742%20225.071%20135.848%20205.128C152.984%20186.254%20174.465%20170.946%20193.019%20157.724C207.301%20147.546%20219.849%20138.604%20227.343%20130.223C268.62%2084.0687%20243.311%200%20243.311%200C243.311%200%20289.841%2041.02%20302.831%2093.9978C307.783%20114.192%20304.597%20137.169%20301.749%20157.716C297.125%20191.072%20293.388%20218.025%20326.793%20216.276C380.775%20213.449%20333.866%20130.223%20333.866%20130.223C333.866%20130.223%20456.318%20194.583%20447.17%20307.145C438.021%20419.707%20313.324%20445.297%20313.324%20445.297C313.324%20445.297%20345.931%20418.525%20352.258%20395.394Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E"); }
.ei-Water { --i: url("data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M422.172%20346.515C422.172%20437.897%20347.813%20511.977%20256.086%20511.977C164.359%20511.977%2090%20437.897%2090%20346.515C90%20257.639%20247.102%2013.5479%20255.718%200.22781C255.915%20-0.0759384%20256.258%20-0.0759358%20256.454%200.227813C265.07%2013.5479%20422.172%20257.639%20422.172%20346.515ZM228.4%20458.931C144.12%20440.49%20158.542%20347.13%20158.542%20347.13C158.542%20347.13%20181.556%20403.488%20237.405%20421.744C293.253%20439.999%20360.745%20413.225%20360.745%20413.225C360.745%20413.225%20312.68%20477.371%20228.4%20458.931Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E"); }
.ei-Lightning { --i: url("data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M152.56%200.583659C152.461%200.29796%20152.674%200%20152.976%200H332.805C332.998%200%20333.169%200.125587%20333.226%200.309782L415.824%20267.171C415.911%20267.454%20415.7%20267.741%20415.403%20267.741H295.684C295.538%20267.741%20295.433%20267.88%20295.473%20268.021L364.135%20509.726C364.269%20510.195%20363.654%20510.501%20363.361%20510.111L96.5295%20155.267C96.3115%20154.977%2096.5184%20154.563%2096.881%20154.563H205.536C205.687%20154.563%20205.793%20154.414%20205.743%20154.271L152.56%200.583659Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E"); }
.ei-Psychic { --i: url("data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M455.925%20425.184C455.925%20425.184%20391.365%20476.963%20262.893%20455.536C165.423%20439.279%20113.437%20331.833%20113.437%20274.079C113.437%20137.149%20214.783%20105.988%20283.3%20105.988C351.816%20105.988%20396.513%20172.788%20396.513%20224.508C396.513%20276.228%20359.933%20321.466%20303.006%20321.466C246.08%20321.466%20229.22%20281.501%20229.22%20244.758C229.22%20208.016%20258.947%20195.071%20286.058%20195.071C313.169%20195.071%20322.452%20218.217%20322.452%20238.11C322.452%20258.004%20307.017%20265.128%20294.143%20265.128C281.269%20265.128%20279.996%20258.633%20275.069%20251.807C270.141%20244.982%20281.353%20219.146%20262.893%20219.146C244.433%20219.146%20240.992%20248.847%20240.992%20248.847C240.992%20248.847%20247.722%20306.18%20303.006%20305.191C358.291%20304.201%20384.518%20261.461%20376.896%20219.146C369.274%20176.83%20328.207%20131.865%20256.133%20140.951C184.059%20150.037%20154.632%20222.861%20167.603%20300.685C180.574%20378.51%20273.807%20423.602%20347.112%20407.379C420.418%20391.156%20493.429%20338.086%20493.429%20203.533C493.429%2068.9789%20376.896%20-11.9002%20237.941%201.42913C98.9859%2014.7584%2012.729%20136.242%2018.2502%20282.207C23.7714%20428.172%20162.275%20507.669%20279.394%20511.766C396.513%20515.864%20468.312%20448.067%20468.312%20448.067C468.312%20448.067%20484.459%20433.668%20478.128%20422.424C471.798%20411.18%20455.925%20425.184%20455.925%20425.184Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E"); }
.ei-Fighting { --i: url("data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M88.2336%2042.5656C94.4299%2018.1014%20116.593%200%20142.983%200C162.778%200%20180.195%2010.1847%20190.279%2025.6H206.792C217.051%2015.0716%20231.384%208.53333%20247.245%208.53333C270.499%208.53333%20290.471%2022.5882%20299.129%2042.6667H312.954C321.617%2037.2585%20331.853%2034.1333%20342.818%2034.1333C366.073%2034.1333%20386.044%2048.1882%20394.702%2068.2667H432.297C432.618%2068.2667%20432.919%2068.3532%20433.178%2068.5041C434.895%2068.347%20436.634%2068.2667%20438.391%2068.2667C469.582%2068.2667%20494.866%2093.5514%20494.866%20124.742V294.086L494.867%20294.4L494.866%20294.714V297.153C494.866%20298.186%20494.838%20299.215%20494.782%20300.239C491.384%20417.717%20385.749%20512%20255.933%20512C123.974%20512%2017%20414.577%2017%20294.4C17%20236.391%2041.9249%20183.683%2082.5535%20144.675C82.4522%20201.228%2083.4074%20259.694%2087.8107%20258.691C99.6011%20256.003%2090.3891%2080.8395%2088.2336%2042.5656Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E"); }
.ei-Colorless { --i: url("data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M481%20256C481%20380.264%20380.264%20481%20256%20481C131.736%20481%2031%20380.264%2031%20256C31%20131.736%20131.736%2031%20256%2031C380.264%2031%20481%20131.736%20481%20256ZM384.571%20256C384.571%20327.008%20327.008%20384.571%20256%20384.571C184.992%20384.571%20127.429%20327.008%20127.429%20256C127.429%20184.992%20184.992%20127.429%20256%20127.429C327.008%20127.429%20384.571%20184.992%20384.571%20256Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E"); }
.ei i { width: 11px; height: 11px; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; display: block; }
.mon.active .ei i { width: 13px; height: 13px; }
#log .rule::before, #log .coin::before, #log .status::before, #log .dmg::before, #log .heal::before, #log .coach::before, #log .warn::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
#log .rule::before { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-book-open%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%207v14%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%20%2F%3E%20%3C%2Fsvg%3E"); }
#log .coin::before { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-coins%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%20%2F%3E%20%3Cpath%20d%3D%22M18.09%2010.37A6%206%200%201%201%2010.34%2018%22%20%2F%3E%20%3Cpath%20d%3D%22M7%206h1v4%22%20%2F%3E%20%3Cpath%20d%3D%22m16.71%2013.88.7.71-2.82%202.82%22%20%2F%3E%20%3C%2Fsvg%3E"); }
#log .status::before { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-sparkles%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22%20%2F%3E%20%3Cpath%20d%3D%22M20%203v4%22%20%2F%3E%20%3Cpath%20d%3D%22M22%205h-4%22%20%2F%3E%20%3Cpath%20d%3D%22M4%2017v2%22%20%2F%3E%20%3Cpath%20d%3D%22M5%2018H3%22%20%2F%3E%20%3C%2Fsvg%3E"); }
#log .dmg::before { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-swords%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpolyline%20points%3D%2214.5%2017.5%203%206%203%203%206%203%2017.5%2014.5%22%20%2F%3E%20%3Cline%20x1%3D%2213%22%20x2%3D%2219%22%20y1%3D%2219%22%20y2%3D%2213%22%20%2F%3E%20%3Cline%20x1%3D%2216%22%20x2%3D%2220%22%20y1%3D%2216%22%20y2%3D%2220%22%20%2F%3E%20%3Cline%20x1%3D%2219%22%20x2%3D%2221%22%20y1%3D%2221%22%20y2%3D%2219%22%20%2F%3E%20%3Cpolyline%20points%3D%2214.5%206.5%2018%203%2021%203%2021%206%2017.5%209.5%22%20%2F%3E%20%3Cline%20x1%3D%225%22%20x2%3D%229%22%20y1%3D%2214%22%20y2%3D%2218%22%20%2F%3E%20%3Cline%20x1%3D%227%22%20x2%3D%224%22%20y1%3D%2217%22%20y2%3D%2220%22%20%2F%3E%20%3Cline%20x1%3D%223%22%20x2%3D%225%22%20y1%3D%2219%22%20y2%3D%2221%22%20%2F%3E%20%3C%2Fsvg%3E"); }
#log .heal::before { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-heart-pulse%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%22%20%2F%3E%20%3Cpath%20d%3D%22M3.22%2012H9.5l.5-1%202%204.5%202-7%201.5%203.5h5.27%22%20%2F%3E%20%3C%2Fsvg%3E"); }
#log .coach::before { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-brain%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%205a3%203%200%201%200-5.997.125%204%204%200%200%200-2.526%205.77%204%204%200%200%200%20.556%206.588A4%204%200%201%200%2012%2018Z%22%20%2F%3E%20%3Cpath%20d%3D%22M12%205a3%203%200%201%201%205.997.125%204%204%200%200%201%202.526%205.77%204%204%200%200%201-.556%206.588A4%204%200%201%201%2012%2018Z%22%20%2F%3E%20%3Cpath%20d%3D%22M15%2013a4.5%204.5%200%200%201-3-4%204.5%204.5%200%200%201-3%204%22%20%2F%3E%20%3Cpath%20d%3D%22M17.599%206.5a3%203%200%200%200%20.399-1.375%22%20%2F%3E%20%3Cpath%20d%3D%22M6.003%205.125A3%203%200%200%200%206.401%206.5%22%20%2F%3E%20%3Cpath%20d%3D%22M3.477%2010.896a4%204%200%200%201%20.585-.396%22%20%2F%3E%20%3Cpath%20d%3D%22M19.938%2010.5a4%204%200%200%201%20.585.396%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2018a4%204%200%200%201-1.967-.516%22%20%2F%3E%20%3Cpath%20d%3D%22M19.967%2017.484A4%204%200%200%201%2018%2018%22%20%2F%3E%20%3C%2Fsvg%3E"); }
#log .warn::before { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-triangle-alert%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%20%2F%3E%20%3Cpath%20d%3D%22M12%209v4%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2017h.01%22%20%2F%3E%20%3C%2Fsvg%3E"); }
#log .warn { color: #a15c00; }
.over-title .ic { width: 1em; height: 1em; color: var(--yellow-dark); }
#coach-msg .ic, #opp-status .ic { margin-right: 4px; }

/* ---------- Damage dice ---------- */
.dice { position: absolute; top: 14%; right: -10px; display: flex; flex-direction: column; gap: 3px; align-items: center; z-index: 3; }
.die { width: 26px; height: 26px; background: #fff; border-radius: 6px; border: 1.5px solid #b71c1c; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 3px; box-shadow: 0 2px 4px rgba(0,0,0,.45); }
.mon.active .die { width: 34px; height: 34px; padding: 4px; }
.die span.p { background: #c62828; border-radius: 50%; margin: 1px; }
.dsum { font-size: 10px; font-weight: 800; background: #c62828; color: #fff; border-radius: 99px; padding: 0 5px; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.dice.roll .die { animation: roll .75s cubic-bezier(.3,.7,.4,1.2); }
.dice.roll .die:nth-child(2) { animation-delay: .12s; }
@keyframes roll { 0% { transform: translate(-40px, -50px) rotate(-320deg) scale(.5); opacity: 0; } 70% { transform: rotate(12deg) scale(1.12); opacity: 1; } 100% { transform: none; } }

/* ---------- Coin ---------- */
.coin-ov { z-index: 40; }
.coin-box { max-width: 440px; text-align: center; }
.coin-why { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 22px; color: var(--navy); }
.coin-scene { perspective: 700px; height: 180px; display: grid; place-items: center; }
.coin { width: 120px; height: 120px; position: relative; transform-style: preserve-3d; }
.coin .face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff3a8, #ffcb05 55%, #d9a400); box-shadow: inset 0 0 0 6px #d4a400, inset 0 0 0 9px #ffe27a, 0 6px 14px rgba(0,0,0,.35); }
.coin .tails { transform: rotateX(180deg); }
.coin .tails.flat { transform: none; }
.coin .tails .ic { width: 58px; height: 58px; color: #a77f00; }
.pokeball { width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(#e3350d 0 45%, #222 45% 55%, #fff 55%); border: 4px solid #222; position: relative; }
.pokeball::after { content: ''; position: absolute; width: 20px; height: 20px; background: #fff; border: 4px solid #222; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.coin.mini { width: 90px; height: 90px; }
.coin.mini .pokeball { width: 54px; height: 54px; border-width: 3px; }
.coin.mini .pokeball::after { width: 14px; height: 14px; border-width: 3px; }
.coin.mini .tails .ic { width: 42px; height: 42px; }
.coin-result { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 28px; min-height: 34px; }
.coin-result.h { color: #e3350d; }
.coin-result.t { color: #a77f00; }
.coin-outcomes { display: grid; gap: 6px; text-align: left; margin-top: 6px; }
.oc { border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 14px; transition: all .3s; }
.oc.win { border-color: var(--good); background: #e9f8ef; transform: scale(1.02); }
.oc.lose { opacity: .45; }
.coin-tally { margin-top: 8px; font-weight: 800; color: var(--navy); }
.call-row { display: flex; gap: 28px; justify-content: center; margin: 14px 0 6px; }
.call-row button { display: flex; flex-direction: column; align-items: center; gap: 8px; border: none; background: none; font-size: 16px; }
.call-row button:hover .coin { transform: translateY(-4px) scale(1.05); }
.call-row .coin { transition: transform .15s; }


/* ---------- Attached cards tucked under the Pokémon ---------- */
/* --pkf (set per Pokémon) shrinks the strips when many cards are attached, so the stack never outgrows its row. */
.mon { --peek: calc(var(--card-h) * .1 * var(--pkf, 1)); z-index: 1; }
.mon.active { --peek: calc(var(--active-h) * .1 * var(--pkf, 1)); }
.mon:hover { --peek: calc(var(--card-h) * .18 * var(--pkf, 1)); transform: scale(1.07); z-index: 6; }
.mon.active:hover { --peek: calc(var(--active-h) * .18 * var(--pkf, 1)); }
.pile-under { position: relative; padding-bottom: calc(var(--n) * var(--peek)); transition: padding .2s ease; }
.mon.up .pile-under { padding-bottom: 0; padding-top: calc(var(--n) * var(--peek)); }
.top-card { position: relative; z-index: 20; }
.pile-under .top-card img.card-img { box-shadow: 0 5px 7px -1px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.45); }
.tucked { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 245 / 342; border-radius: 6px; background: #ddd center / cover no-repeat; outline: 1px solid rgba(0,0,0,.35); box-shadow: 0 2px 5px rgba(0,0,0,.45); transform: translateY(calc((var(--i) + 1) * var(--peek))); transition: transform .2s ease; display: flex; align-items: flex-end; justify-content: center; padding-bottom: max(1px, calc(var(--peek) / 2 - 9px)); }
.mon.up .tucked { top: auto; bottom: 0; transform: translateY(calc((var(--i) + 1) * var(--peek) * -1)); align-items: flex-start; padding-bottom: 0; padding-top: max(1px, calc(var(--peek) / 2 - 9px)); }
.tucked .ei { width: 16px; height: 16px; }
.tucked .ei i { width: 10px; height: 10px; }
.mon.active .tucked .ei { width: 20px; height: 20px; }
.mon.active .tucked .ei i { width: 12px; height: 12px; }
.tool-mark { font-size: 9px; font-weight: 800; background: #1f7a52; color: #fff; border-radius: 99px; padding: 0 6px; line-height: 16px; }

/* Numbered damage dice and the dice chart on the rules page */
.die.num { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; padding: 0; font-family: "Baloo 2", sans-serif; font-weight: 800; color: #c62828; font-size: 16px; line-height: 1; }
.mon.active .die.num { font-size: 21px; }
.dice-chart { background: #f3f1ea; border-radius: 12px; padding: 10px; margin: 6px 0 4px; }
.dc-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dc-col { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: 13px; color: var(--navy); }
.dice-chart .die { width: 34px; height: 34px; padding: 4px; }
.dice-chart .die.num { padding: 0; font-size: 20px; }
.dc-cap { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 6px; }
.dc-combo { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 6px; font-weight: 800; color: var(--navy); }
#coach-panel label.sel { display: flex; gap: 6px; align-items: center; }
#coach-panel select { font: inherit; font-size: 12.5px; }

/* Unplayable hand cards and the "end your turn" nudge */
#hand .hcard.unplayable img { filter: grayscale(.65) brightness(.72); }
#hand .hcard.unplayable:hover img { filter: grayscale(.3) brightness(.9); }
#inspector .why { width: 100%; font-size: 12.5px; line-height: 1.35; background: #fdecec; color: #8a2020; border-radius: 8px; padding: 6px 8px; font-weight: 700; }
.act.k-end.go { color: #1d2a5a; background: var(--yellow); border-color: var(--yellow-dark); font-weight: 800; animation: nudge 1.6s ease-in-out infinite; }
.act.k-end.go .pct { color: #1d2a5a; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,203,5,.0); } 50% { box-shadow: 0 0 0 5px rgba(255,203,5,.45); } }

/* Keep "End turn" visible: pinned to the bottom of the action list, and the card viewer yields space first. */
#inspector { max-height: 34vh; }
#inspector img { max-height: 24vh; }
#actions-panel { min-height: min(260px, 30vh); }
.act.k-end { position: sticky; bottom: 0; z-index: 2; background: #fff; box-shadow: 0 -6px 8px -4px rgba(0,0,0,.12); }

/* ---------- Attack arena ---------- */
.ic-shield { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-shield%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.mon.in-arena .pile-under { visibility: hidden; }
.arena { position: fixed; inset: 0; z-index: 28; pointer-events: none; background: radial-gradient(ellipse at center, rgba(10,20,50,.35), rgba(5,10,25,.72)); }
.arena-card { position: fixed; }
.arena-card img { width: 100%; display: block; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.6); }
.arena-card .a-dice { position: absolute; top: 14%; right: -14px; display: flex; flex-direction: column; gap: 4px; }
.arena-card .a-dice .die { width: 42px; height: 42px; padding: 5px; }
.arena-card .a-dice .die.num { padding: 0; font-size: 26px; }
.arena-card .a-hp { margin-top: 6px; text-align: center; color: #fff; font-weight: 800; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.arena-title { position: fixed; left: 50%; top: 9%; transform: translate(-50%, -20px) scale(.8); opacity: 0; transition: all .3s cubic-bezier(.3,.7,.4,1.3); background: var(--c); color: #fff; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 30px; padding: 4px 22px; border-radius: 99px; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.45); text-shadow: 0 2px 2px rgba(0,0,0,.35); white-space: nowrap; }
.arena-title.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.burst { position: fixed; z-index: 31; width: 160px; height: 160px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0 12%, var(--c) 30%, transparent 68%); }
/* Outlined Baloo 2 text (damage numbers, attack names, stamps): Baloo 2 builds letters from overlapping outlines and a
   plain text stroke traces every one, leaving lines inside the letters. Painting the stroke under the fill hides them,
   so each stroke is twice as wide as it looks. */
.float-dmg { position: fixed; z-index: 33; pointer-events: none; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 46px; color: #fff; -webkit-text-stroke: 4px #b71c1c; paint-order: stroke fill; text-shadow: 0 4px 10px rgba(0,0,0,.5); text-align: center; line-height: 1; white-space: nowrap; }
.float-dmg small { display: block; font-size: 15px; -webkit-text-stroke: 0; background: #b71c1c; border-radius: 99px; padding: 2px 10px; margin-top: 4px; }
.float-dmg.miss { color: #e8e8e8; -webkit-text-stroke: 4px #555; paint-order: stroke fill; font-size: 38px; }
.float-dmg.blocked { color: #d6ecff; -webkit-text-stroke: 4px #0e6aa8; paint-order: stroke fill; font-size: 34px; }
.float-dmg .ic { width: .8em; height: .8em; }
.tumble { position: fixed; z-index: 32; pointer-events: none; }
.tumble .die { width: 40px; height: 40px; padding: 5px; box-shadow: 0 6px 12px rgba(0,0,0,.5); }
.tumble .die.num { padding: 0; font-size: 24px; }

/* During an attack the coin becomes a compact panel at the bottom, so the arena stays visible. */
body.arena-on .coin-ov { place-items: end center; background: transparent; padding-bottom: 3vh; }
body.arena-on .coin-box { max-width: 640px; display: grid; grid-template-columns: 110px 1fr; column-gap: 16px; align-items: center; text-align: left; padding: 10px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
body.arena-on .coin-box > * { grid-column: 2; }
body.arena-on .coin-box .coin-scene { grid-column: 1; grid-row: 1 / span 6; height: 120px; }
body.arena-on .coin-box .coin { width: 88px; height: 88px; }
body.arena-on .coin-box .pokeball { width: 52px; height: 52px; border-width: 3px; }
body.arena-on .coin-box .pokeball::after { width: 14px; height: 14px; border-width: 3px; }
body.arena-on .coin-box .coin-why { font-size: 18px; }
body.arena-on .coin-box .coin-result { font-size: 22px; min-height: 26px; }
body.arena-on .coin-box .row { margin-top: 6px; }

/* ---------- Guided tour ---------- */
.ic-graduation-cap { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-graduation-cap%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%20%2F%3E%20%3Cpath%20d%3D%22M22%2010v6%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.tour { position: fixed; inset: 0; z-index: 45; }
.tour.no-target { background: rgba(6, 12, 30, .72); }
.tour-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(6, 12, 30, .72), 0 0 0 3px var(--yellow), 0 0 22px 6px rgba(255,203,5,.55); transition: all .35s cubic-bezier(.3,.7,.3,1); pointer-events: none; }
.tour-tip { position: fixed; width: min(400px, calc(100vw - 20px)); background: var(--panel); border-radius: 16px; padding: 14px 16px; box-shadow: 0 12px 34px rgba(0,0,0,.5); transition: left .35s, top .35s; }
.tour-tip h3 { margin: 2px 0 6px; color: var(--navy); font-size: 20px; }
.tour-body { font-size: 14px; line-height: 1.5; }
.tour-body ul, .tour-body ol { margin: 6px 0; padding-left: 20px; }
.tour-body li { margin-bottom: 3px; }
.tour-step { font-size: 12px; font-weight: 800; color: var(--muted); }
.tour-tip .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ---------- Card anatomy on the rules page ---------- */
.anatomy { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 16px; align-items: start; margin: 8px 0; }
.anatomy .card-wrap { position: relative; }
.anatomy .card-wrap img { width: 100%; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.3); display: block; }
.anatomy .pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #d33b3b; color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.anatomy ol { margin: 0; padding-left: 22px; }
.anatomy li { margin-bottom: 4px; font-size: 14px; line-height: 1.45; }
.anatomy li::marker { color: #d33b3b; font-weight: 800; }
.glossary { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 14px; }
.glossary dt { font-weight: 800; color: var(--navy); }
.glossary dd { margin: 0; }
@media (max-width: 700px) { .anatomy { grid-template-columns: 1fr; } }

/* ---------- Sidebar: two fixed halves (moves / log) ---------- */
.ic-circle-plus { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-circle-plus%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2012h8%22%20%2F%3E%20%3Cpath%20d%3D%22M12%208v8%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-chevrons-up { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-chevrons-up%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m17%2011-5-5-5%205%22%20%2F%3E%20%3Cpath%20d%3D%22m17%2018-5-5-5%205%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-backpack { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-backpack%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M4%2010a4%204%200%200%201%204-4h8a4%204%200%200%201%204%204v10a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2z%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2010h8%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2018h8%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2022v-6a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v6%22%20%2F%3E%20%3Cpath%20d%3D%22M9%206V4a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-arrow-left-right { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-arrow-left-right%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M8%203%204%207l4%204%22%20%2F%3E%20%3Cpath%20d%3D%22M4%207h16%22%20%2F%3E%20%3Cpath%20d%3D%22m16%2021%204-4-4-4%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2017H4%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-skip-forward { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-skip-forward%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpolygon%20points%3D%225%204%2015%2012%205%2020%205%204%22%20%2F%3E%20%3Cline%20x1%3D%2219%22%20x2%3D%2219%22%20y1%3D%225%22%20y2%3D%2219%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-settings { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-settings%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-zap { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-zap%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M4%2014a1%201%200%200%201-.78-1.63l9.9-10.2a.5.5%200%200%201%20.86.46l-1.92%206.02A1%201%200%200%200%2013%2010h7a1%201%200%200%201%20.78%201.63l-9.9%2010.2a.5.5%200%200%201-.86-.46l1.92-6.02A1%201%200%200%200%2011%2014z%22%20%2F%3E%20%3C%2Fsvg%3E"); }

aside { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
#actions-panel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#tips { flex: none; font-size: 12px; margin-bottom: 6px; }
#actions { flex: 1 1 0; min-height: 0; overflow-y: auto; gap: 8px; }
.act-group { display: flex; flex-direction: column; gap: 3px; }
.act-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; align-items: center; gap: 5px; margin: 2px 0 1px; }
.act { padding: 5px 8px; font-size: 13px; gap: 6px; justify-content: flex-start; }
.act .lead { position: relative; display: inline-grid; place-items: center; width: 20px; flex: none; color: var(--navy); }
.act .lead .ei { width: 18px; height: 18px; }
.act .lbl { flex: 1; min-width: 0; }
.act.k-attack .lead { color: var(--opp); }
.act.k-attack, .act.k-trainer, .act.k-energy { border-left-width: 1px; }
#end-slot { flex: none; margin-top: 8px; }
#end-slot:empty { display: none; }
#end-slot .act { width: 100%; padding: 8px 10px; font-size: 14px; position: relative; box-shadow: none; }
#coach-msg { flex: none; min-height: 2.7em; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12.5px; }
#log-panel { min-height: 0; }

/* ---------- Floating card preview ---------- */
#preview { position: fixed; z-index: 26; width: 270px; pointer-events: none; display: flex; flex-direction: column; gap: 6px; filter: drop-shadow(0 12px 28px rgba(0,0,0,.55)); }
#preview img { width: 100%; border-radius: 12px; display: block; }
#preview .tr-text { font-size: 12px; line-height: 1.35; background: #fff7d6; border-radius: 10px; padding: 7px 9px; }
#preview .tr-text b { color: var(--navy); }
#preview .why { font-size: 12.5px; line-height: 1.35; background: #fdecec; color: #8a2020; border-radius: 10px; padding: 7px 9px; font-weight: 700; }
@media (max-height: 760px) { #preview { width: 220px; } }

/* ---------- Header settings button and settings window ---------- */
.icon-btn { padding: 6px 9px; }
.icon-btn .ic { width: 18px; height: 18px; vertical-align: -4px; }

/* ---------- Realistic deck and discard piles ---------- */
.pile .stack.deck { position: relative; }
.pile .stack.deck .layer { position: absolute; inset: 0; border-radius: 5px; background: #f4f4f0; border: 1px solid #c9c9c2;
  transform: translate(calc(var(--l) * 0.6px), calc(var(--l) * 0.9px)); }
.pile .stack.deck .layer:last-child { background: none; border: none; }
.pile .stack.deck .layer img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 5px; transform: none; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.pile .stack.deck::after { content: ''; position: absolute; inset: 0; border-radius: 6px; box-shadow: 0 calc(var(--depth) * 0.9px + 3px) 10px rgba(0,0,0,.45); pointer-events: none; }
.pile .stack.deck:hover .layer:last-child { transform: translate(0, -3px); transition: transform .15s; }
.pile .stack.discard img { transform-origin: 50% 55%; box-shadow: 0 2px 5px rgba(0,0,0,.45); }

/* ---------- Attaching: Pokémon bumps, new card slides out from underneath ---------- */
.mon.bump-down .pile-under { animation: bumpDown .42s ease-out; }
.mon.bump-up .pile-under { animation: bumpUp .42s ease-out; }
@keyframes bumpDown { 0% { transform: none; } 35% { transform: translateY(8px); } 100% { transform: none; } }
@keyframes bumpUp { 0% { transform: none; } 35% { transform: translateY(-8px); } 100% { transform: none; } }
.tucked.new-tuck { animation: tuckIn .5s cubic-bezier(.3,.7,.3,1.2); }
@keyframes tuckIn { from { transform: translateY(0); } }
.pile .stack.deck { margin-bottom: calc(var(--depth) * .9px + 2px); }

/* ---------- Opponent's hand along the top edge: upside-down card backs, half hidden behind the edge ---------- */
:root { --active-h: max(96px, min(19.5vh, calc((100vw - var(--side-w) - 190px) / 4.4), 240px)); --ohand-w: calc(var(--hand-w) * .72); }
#board { padding-top: 0; }
#opp-hand { flex: none; position: relative; height: calc(var(--ohand-w) * 1.396 * .5); display: flex; justify-content: center; }
#opp-hand .ofan { display: flex; justify-content: center; transform: translateY(calc(var(--ohand-w) * -1.396 * .48)); }
#opp-hand .ocard { width: var(--ohand-w); margin-left: calc(var(--ohand-w) * -.55); transform-origin: 50% -90%; transform: translateY(calc(var(--y) * -1)) rotate(calc(var(--r) * -1)); transition: transform .2s; }
#opp-hand .ocard:first-child { margin-left: 0; }
#opp-hand .ocard img { width: 100%; display: block; border-radius: 6px; transform: rotate(180deg); box-shadow: 0 -3px 8px rgba(0,0,0,.5); }
#opp-hand .ocount { position: absolute; top: 6px; left: calc(50% + var(--ohand-w) * 2.2); background: var(--yellow); color: #1d2a5a; font-weight: 800; font-size: 12px; border-radius: 99px; padding: 1px 8px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* ---------- Card preview with plain-language explanation ---------- */
.ic-info { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-info%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2016v-4%22%20%2F%3E%20%3Cpath%20d%3D%22M12%208h.01%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-circle-check { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-circle-check%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%20%2F%3E%20%3C%2Fsvg%3E"); }
#preview { width: min(600px, calc(100vw - 16px)); flex-direction: row; align-items: flex-start; gap: 10px; }
#preview > img { width: 230px; flex: none; }
#preview .explain { flex: 1; min-width: 0; max-height: calc(100vh - 24px); overflow: hidden; background: var(--panel); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; }
#preview .explain h4 { margin: 8px 0 3px; font-size: 13px; color: var(--navy); display: flex; align-items: center; gap: 5px; }
#preview .explain h4:first-child { margin-top: 0; }
#preview .explain p { margin: 0; }
#preview .explain .facts { margin: 0; padding-left: 16px; }
#preview .explain .facts li { margin-bottom: 2px; }
#preview .explain .ei { width: 15px; height: 15px; vertical-align: -3px; }
#preview .explain .ei i { width: 9px; height: 9px; }
#preview .explain .muted { color: var(--muted); font-size: 11.5px; }
#preview .atk-ex { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 5px; background: #fff; }
#preview .atk-name { display: flex; justify-content: space-between; font-size: 13.5px; }
#preview .atk-dmg { font-weight: 800; color: #b71c1c; }
#preview .atk-cost { color: #3c4a43; margin: 1px 0 2px; }
#preview .fx { margin-top: 1px; }
#preview .ready { margin-top: 4px; font-weight: 800; font-size: 12px; }
#preview .ready.yes { color: var(--good); }
#preview .ready.no { color: #a15c00; }
#preview .now { background: #eef6ff; border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; }
#preview .why { margin-bottom: 6px; }
@media (max-height: 760px), (max-width: 1200px) { #preview > img { width: 180px; } #preview { width: min(520px, calc(100vw - 16px)); } }

/* Deck chooser groups */

/* ---------- Decision engine settings ---------- */
.ic-cpu { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-cpu%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2216%22%20height%3D%2216%22%20x%3D%224%22%20y%3D%224%22%20rx%3D%222%22%20%2F%3E%20%3Crect%20width%3D%226%22%20height%3D%226%22%20x%3D%229%22%20y%3D%229%22%20rx%3D%221%22%20%2F%3E%20%3Cpath%20d%3D%22M15%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M15%2020v2%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2015h2%22%20%2F%3E%20%3Cpath%20d%3D%22M2%209h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2015h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%209h2%22%20%2F%3E%20%3Cpath%20d%3D%22M9%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M9%2020v2%22%20%2F%3E%20%3C%2Fsvg%3E"); }
#engine-badge { border: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; padding: 1px 8px; }
#engine-badge.busy { background: #ffe7a3; animation: nudge 1.6s ease-in-out infinite; }
button.linkish { border: none; background: none; color: var(--blue); text-decoration: underline; padding: 0 4px; font-weight: 700; }
#start-engine { font-size: 13.5px; }

/* The floating preview never captures clicks. */
#preview, #preview * { pointer-events: none !important; }

/* ---------- 3D coin ---------- */
.coin-scene { position: relative; perspective: 800px; perspective-origin: 50% 30%; }
.coin-toss { position: absolute; left: 50%; bottom: 18px; width: var(--coin-d, 110px); height: var(--coin-d, 110px); margin-left: calc(var(--coin-d, 110px) / -2); transform-style: preserve-3d; }
.coin3d { --t: 10px; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(18deg); }
.coin3d .face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #fff6bf 0%, #ffd84a 30%, #e9b40c 62%, #b98a00 100%);
  box-shadow: inset 0 0 0 5px #c99a00, inset 0 0 0 8px #ffe27a, inset 0 0 0 10px #b98a00; }
.coin3d .face.heads { transform: translateZ(calc(var(--t) / 2)); }
.coin3d .face.tails { transform: rotateX(180deg) translateZ(calc(var(--t) / 2)); }
.coin3d .face.tails .ic { width: 52%; height: 52%; color: #a77f00; filter: drop-shadow(0 1px 0 #fff3b0); }
.coin3d .face::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); background-size: 260% 260%; background-position: 100% 0; pointer-events: none; }
.coin3d.spinning .face::after { animation: sheen .32s linear infinite; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 100%; } }
.coin3d .pokeball { width: 58%; height: 58%; border-width: 3px; }
.coin3d .pokeball::after { width: 26%; height: 26%; border-width: 3px; }
.coin3d .rim { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin3d .rim span { position: absolute; left: 50%; top: 50%; width: calc(3.1416 * var(--coin-d, 110px) / 36 + 1px); height: var(--t);
  margin-left: calc((3.1416 * var(--coin-d, 110px) / 36 + 1px) / -2); margin-top: calc(var(--t) / -2);
  background: repeating-linear-gradient(90deg, #b8860b 0 2px, #f2c94c 2px 4px);
  transform: rotateZ(var(--a)) translateY(calc(var(--coin-d, 110px) / -2)) rotateX(90deg); backface-visibility: visible; }
.coin-shadow { position: absolute; left: 50%; bottom: 8px; width: calc(var(--coin-d, 110px) * .9); height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); transform: translateX(-50%); }
.coin-box .coin-scene { height: 230px; }
body.arena-on .coin-box .coin-scene { height: 150px; --coin-d: 76px; }
body.arena-on .coin-box .coin3d { --t: 7px; }

/* ---------- Drag and drop ---------- */
#board { position: relative; }
#hand .hcard { cursor: grab; touch-action: none; }
#hand .hcard.drag-src { opacity: .25; }
body.dragging, body.dragging * { cursor: grabbing !important; }
body.dragging #board .mon:not(.drop-ok) { opacity: .4; filter: grayscale(.4); transition: opacity .15s; }
.drop-ok { outline: 3px dashed var(--yellow); outline-offset: 5px; border-radius: 10px; animation: dropPulse 1.1s ease-in-out infinite; }
.drop-hover { outline-style: solid; outline-width: 4px; transform: scale(1.06); box-shadow: 0 0 24px 6px rgba(255,203,5,.55); }
@keyframes dropPulse { 50% { outline-color: rgba(255,203,5,.45); } }
#you-bench.drop-ok { background: rgba(255,203,5,.10); }
#play-zone { position: absolute; left: 22%; right: 22%; top: 36%; height: 26%; z-index: 15; border: 3px dashed var(--yellow); border-radius: 18px;
  display: grid; place-items: center; text-align: center; padding: 10px; color: #fff; font-weight: 800; font-size: 16px; background: rgba(255,203,5,.12); }
#play-zone .ic { width: 22px; height: 22px; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; width: var(--hand-w); transform: translate(-50%, -60%) rotate(-5deg) scale(1.08); will-change: transform; }
.drag-ghost img { width: 100%; border-radius: 7px; display: block; box-shadow: 0 14px 22px rgba(0,0,0,.55); } /* a static shadow on the card, not a filter on the moving layer */
.drag-ghost.no img { filter: grayscale(.7) brightness(.8); }
.drag-ghost .why { position: absolute; left: 50%; top: 100%; transform: translateX(-50%) rotate(5deg); margin-top: 8px; width: 240px; background: #fdecec; color: #8a2020; font-size: 12.5px; font-weight: 700; border-radius: 10px; padding: 7px 9px; }
.drop-menu { position: fixed; z-index: 55; background: var(--panel); border-radius: 12px; padding: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 5px; width: 270px; }
.drop-menu .dm-title { font-weight: 800; color: var(--navy); font-size: 13px; }
.drop-menu button { text-align: left; font-size: 13px; }

/* Off-type Energy: allowed, but only pays for Colorless costs */
.offtype { display: inline-block; font-size: 10.5px; font-weight: 800; background: #fff3c4; color: #8a6a00; border-radius: 99px; padding: 0 6px; margin-left: 4px; }
.drop-ok.drop-weak { outline-color: rgba(255,255,255,.55); animation: none; }

/* Undo (learning aid) */
.undo-btn { width: 100%; margin-bottom: 6px; padding: 6px 10px; font-size: 13px; font-weight: 700; color: var(--navy); background: #eef3ff; border-color: #c9d6f2; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.undo-btn:hover { background: #e0e9ff; }

/* Energy icons inside running text: size in em and centre on the text line, whatever the font size. */
#preview .explain .ei, .act .lbl .ei, .deck .d-name .ei {
  width: 1.3em; height: 1.3em; border-width: 1px; vertical-align: -0.24em; margin: 0 0.1em;
}
#preview .explain .ei i, .act .lbl .ei i, .deck .d-name .ei i { width: 62%; height: 62%; }
#preview .atk-cost, #preview .facts li, #preview .now div { line-height: 1.55; }

/* ---------- Start screen: deck select ---------- */
.start-screen { display: flex; flex-direction: column; place-items: initial; padding: 0; overflow-y: auto; background:
  radial-gradient(1200px 500px at 50% -10%, rgba(42,117,187,.55), transparent 70%),
  radial-gradient(circle at 15% 85%, rgba(255,203,5,.10), transparent 40%),
  rgba(6, 12, 30, .94); }
.start-wrap { width: min(1120px, 100% - 32px); margin: 0 auto; padding: 22px 0 18px; flex: 1; }
.start-hero { display: flex; align-items: center; gap: 22px; color: #fff; margin-bottom: 18px; }
.start-hero .set-logo { height: 92px; flex: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.start-hero h2 { margin: 0 0 4px; font-size: 30px; color: var(--yellow); text-shadow: 2px 2px 0 var(--navy); }
.start-hero p { margin: 0; max-width: 720px; line-height: 1.5; color: rgba(255,255,255,.88); font-size: 15px; }
.start-hero p b { color: var(--yellow); }
.deck-section { margin-bottom: 18px; }
.deck-group { display: flex; align-items: baseline; gap: 10px; color: #fff; margin: 0 2px 10px; border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 6px; }
.deck-group span { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 19px; }
.deck-group small { color: rgba(255,255,255,.6); font-size: 13px; }
.deck-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.deck-grid.trainer { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.deck { position: relative; display: flex; flex-direction: column; padding: 0; text-align: left; border: none; border-radius: 18px; overflow: hidden; background: var(--panel); color: var(--ink);
  box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .18s ease, box-shadow .18s ease; cursor: pointer; }
.deck:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.deck:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.deck.sel { transform: translateY(-4px); box-shadow: 0 0 0 4px var(--yellow), 0 14px 30px rgba(0,0,0,.5); }
.deck-art { position: relative; height: 150px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 85%, #fff) 0%, var(--c1) 45%, color-mix(in srgb, var(--c2) 80%, #000) 100%); }
.deck-grid.trainer .deck-art { height: 172px; }
/* Pokéball watermark */
.deck-art::before { content: ''; position: absolute; width: 220px; height: 220px; right: -60px; top: -70px; border-radius: 50%; opacity: .16;
  background: linear-gradient(transparent 46%, #fff 46% 54%, transparent 54%), radial-gradient(circle, transparent 18%, #fff 18% 26%, transparent 26% 62%, #fff 62% 70%, transparent 70%); }
.deck-art::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(0,0,0,.18)); }
.deck .fan { position: absolute; inset: 0; z-index: 1; }
.deck .fan img { position: absolute; left: 50%; bottom: -26px; height: 84%; border-radius: 7px; box-shadow: 0 6px 14px rgba(0,0,0,.4); transform-origin: 50% 100%; transition: transform .25s ease; }
.deck .fan img:nth-child(1) { transform: translateX(-50%) translateX(-58%) rotate(-11deg); }
.deck .fan img:nth-child(2) { transform: translateX(-50%) translateY(-6px); z-index: 2; }
.deck .fan img:nth-child(3) { transform: translateX(-50%) translateX(58%) rotate(11deg); }
.deck:hover .fan img:nth-child(1), .deck.sel .fan img:nth-child(1) { transform: translateX(-50%) translateX(-72%) rotate(-16deg); }
.deck:hover .fan img:nth-child(2), .deck.sel .fan img:nth-child(2) { transform: translateX(-50%) translateY(-14px) scale(1.04); }
.deck:hover .fan img:nth-child(3), .deck.sel .fan img:nth-child(3) { transform: translateX(-50%) translateX(72%) rotate(16deg); }
.deck-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.deck .d-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 22px; line-height: 1; color: var(--navy); }
.deck .d-sub { font-size: 13px; color: var(--muted); line-height: 1.35; min-height: 2.7em; }
.deck .d-types { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 2px 8px 2px 3px; border-radius: 99px; background: #f0eee6; color: #3c4a43; white-space: nowrap; }
.chip .ei { width: 18px; height: 18px; border-width: 1px; }
.chip .ei i { width: 11px; height: 11px; }
.deck .d-stats { display: flex; gap: 12px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 7px; margin-top: auto; }
.deck .d-stats b { color: var(--ink); font-size: 13px; }

.start-bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px max(16px, calc((100% - 1120px) / 2));
  background: rgba(12, 22, 52, .97); border-top: 1px solid rgba(255,255,255,.12); color: #fff; }
.matchup { display: flex; align-items: center; gap: 12px; }
.matchup .side { display: flex; flex-direction: column; line-height: 1.1; min-width: 70px; }
.matchup small { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); font-weight: 800; }
.matchup b { font-family: "Baloo 2", sans-serif; font-size: 20px; color: var(--yellow); }
.matchup .vs { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 14px; color: #fff; background: var(--jev, #d33b3b); border-radius: 8px; padding: 2px 8px; transform: rotate(-6deg); }
.start-bar #start-engine { font-size: 13px; color: rgba(255,255,255,.85); }
.start-bar #start-engine .linkish { color: var(--yellow); }
.bar-actions { margin-left: auto; display: flex; gap: 8px; }
.bar-actions .ghost { color: #fff; border-color: rgba(255,255,255,.3); }
#btn-start { font-size: 16px; padding: 9px 20px; box-shadow: 0 4px 0 var(--yellow-dark); transition: transform .1s, box-shadow .1s; }
#btn-start:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--yellow-dark), 0 0 18px rgba(255,203,5,.5); }
#btn-start:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-dark); }
#btn-start:disabled { opacity: 1; background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.2); box-shadow: none; font-weight: 700; }
.start-screen .legal { color: rgba(255,255,255,.45); }
@media (max-width: 700px) { .start-hero { flex-direction: column; text-align: center; } .start-hero .set-logo { height: 70px; } .bar-actions { margin-left: 0; width: 100%; } .bar-actions button { flex: 1; } }

/* ---------- Card image skeletons ----------
   Every card image keeps the real card proportions before it loads, so nothing jumps, and shows a
   stock Pokémon card silhouette (yellow frame, name bar, art window, text lines) with a soft shimmer. */
img[src*="images.pokemontcg.io/base"]:not([src$="logo.png"]):not([src$="symbol.png"]),
img[src*="images.pokemontcg.io/gym"] {
  aspect-ratio: 245 / 342;
  object-fit: cover;
  background-color: #f4d35e;
  background-image:
    linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%),
    linear-gradient(#d9d4c3, #d9d4c3), linear-gradient(#d9d4c3, #d9d4c3), linear-gradient(#d9d4c3, #d9d4c3),
    linear-gradient(#c9c3ae, #c9c3ae), linear-gradient(#e2dccb, #e2dccb),
    linear-gradient(#ebe6d6, #ebe6d6);
  background-size: 250% 100%, 54% 4%, 70% 3%, 60% 3%, 76% 38%, 80% 6%, 90% 93%;
  background-position: 120% 0, 16% 80%, 18% 87%, 18% 93%, 50% 22%, 50% 7%, 50% 50%;
  background-repeat: no-repeat;
  animation: cardShimmer 1.4s ease-in-out infinite;
}
img[src*="tcg-card-back"] { aspect-ratio: 245 / 342; background: linear-gradient(135deg, #2c4c8c, #1d3466); }
img.loaded { animation: none; background: none; }
@keyframes cardShimmer { from { background-position: 120% 0, 16% 80%, 18% 87%, 18% 93%, 50% 22%, 50% 7%, 50% 50%; } to { background-position: -120% 0, 16% 80%, 18% 87%, 18% 93%, 50% 22%, 50% 7%, 50% 50%; } }
@media (min-width: 1001px) {
  .start-bar { flex-wrap: nowrap; }
  .start-bar #start-engine { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bar-actions { flex: none; }
}

/* ---------- Start screen layout v2: opaque, centred, wider ---------- */
.start-screen {
  background-color: #0b1736;
  background-image:
    radial-gradient(900px 420px at 50% 0%, rgba(42,117,187,.55), transparent 70%),
    radial-gradient(600px 400px at 100% 100%, rgba(255,203,5,.08), transparent 70%),
    radial-gradient(circle at center, rgba(255,255,255,.035) 0 2px, transparent 2.5px);
  background-size: auto, auto, 26px 26px;
}
.start-wrap { width: min(1240px, 100% - 48px); margin: auto; padding: 36px 0 24px; display: flex; flex-direction: column; }
.start-hero { flex-direction: column; text-align: center; gap: 10px; margin-bottom: 26px; }
.start-hero .set-logo { height: clamp(70px, 11vh, 110px); }
.start-hero h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 0; }
.start-hero p { margin: 0 auto; max-width: 760px; font-size: 15.5px; }
.deck-section { margin-bottom: 26px; }
.deck-group { justify-content: space-between; margin-bottom: 14px; }
.deck-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.deck-grid.trainer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deck-art { height: clamp(140px, 17vh, 190px); }
.deck-grid.trainer .deck-art { height: clamp(160px, 21vh, 230px); }
.deck-body { padding: 14px 16px 16px; }
.start-screen .legal { text-align: center; margin-top: 6px; font-size: 12px; }
.start-bar { padding: 12px max(24px, calc((100% - 1240px) / 2)); }
.matchup .side.empty b { color: rgba(255,255,255,.55); font-size: 16px; }
@media (max-width: 1000px) { .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .deck-grid.trainer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .deck-grid, .deck-grid.trainer { grid-template-columns: 1fr; } }
.start-wrap, .start-wrap > * { flex-shrink: 0; }
/* The global `header` rule (page bar) must not size the start screen's hero. */
header.start-hero { height: auto; padding: 0; justify-content: flex-start; }
/* Fit the whole chooser on one screen at common desktop sizes. */
.start-wrap { padding: 22px 0 14px; }
.start-hero { gap: 6px; margin-bottom: 18px; }
.start-hero .set-logo { height: clamp(56px, 8.5vh, 92px); }
.start-hero h2 { font-size: clamp(24px, 2.8vw, 34px); }
.start-hero p { font-size: 14.5px; }
.deck-section { margin-bottom: 16px; }
.deck-group { margin-bottom: 10px; }
.deck-grid.trainer .deck-art { height: clamp(130px, 17vh, 200px); }
.deck-art { height: clamp(112px, 14vh, 165px); }
.deck-body { padding: 11px 14px 13px; gap: 5px; }
.deck .d-sub { min-height: 2.6em; font-size: 12.5px; }
.start-wrap { padding: 16px 0 6px; }
.start-screen .legal { margin: 0; }

/* ---------- Coin stage (call + toss) ---------- */
.coin-ov.stage { z-index: 40; background: radial-gradient(ellipse at 50% 55%, rgba(20,40,90,.78), rgba(3,7,20,.94) 70%); animation: stageIn .25s ease-out; }
.coin-ov.stage.closing { animation: stageOut .22s ease-in forwards; }
@keyframes stageIn { from { opacity: 0; } }
@keyframes stageOut { to { opacity: 0; } }
.coin-stage { width: min(720px, 100% - 32px); text-align: center; color: #fff; }
.cs-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 30px; color: var(--yellow); text-shadow: 2px 2px 0 var(--navy); display: flex; align-items: center; justify-content: center; gap: 8px; }
.cs-title .ic { width: 28px; height: 28px; }
.cs-sub { color: rgba(255,255,255,.75); font-size: 15px; margin-top: 2px; min-height: 1.4em; }
.cs-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 10px; }
.coin-ov.stage .coin-scene { position: relative; width: 220px; height: 260px; --coin-d: 140px; perspective: 900px; }
.coin-ov.stage .coin3d { --t: 12px; }
.coin-ov.stage .coin-toss { bottom: 34px; }
.felt { position: absolute; left: 50%; bottom: 12px; width: 200px; height: 46px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46,157,87,.55), rgba(46,157,87,.18) 70%, transparent); }
.coin-ov.stage .coin-shadow { bottom: 24px; width: 120px; height: 18px; }
.rays { position: absolute; left: 50%; bottom: 104px; width: 340px; height: 340px; margin: 0 0 -170px -170px; border-radius: 50%; opacity: 0; transform: scale(.5);
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-100 -100 200 200%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%220%22 cy=%220%22 r=%22141.4%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220.250%22 stop-color=%22rgb(255,203,5)%22 stop-opacity=%220.32%22/%3E%3Cstop offset=%220.680%22 stop-color=%22rgb(255,203,5)%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill=%22url(#g)%22 d=%22M0 0L0.0 -150.0L20.9 -148.5ZM0 0L57.4 -138.6L76.1 -129.2ZM0 0L106.1 -106.1L119.8 -90.3ZM0 0L138.6 -57.4L145.2 -37.6ZM0 0L150.0 -0.0L148.5 20.9ZM0 0L138.6 57.4L129.2 76.1ZM0 0L106.1 106.1L90.3 119.8ZM0 0L57.4 138.6L37.6 145.2ZM0 0L0.0 150.0L-20.9 148.5ZM0 0L-57.4 138.6L-76.1 129.2ZM0 0L-106.1 106.1L-119.8 90.3ZM0 0L-138.6 57.4L-145.2 37.6ZM0 0L-150.0 0.0L-148.5 -20.9ZM0 0L-138.6 -57.4L-129.2 -76.1ZM0 0L-106.1 -106.1L-90.3 -119.8ZM0 0L-57.4 -138.6L-37.6 -145.2Z%22/%3E%3C/svg%3E") center / 100% no-repeat; will-change: transform; transition: opacity .4s, transform .5s; }
.coin-ov.stage.landed .rays { opacity: 1; transform: scale(1); animation: raysSpin 6s linear infinite; }
.coin-ov.stage.is-t .rays { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-100 -100 200 200%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%220%22 cy=%220%22 r=%22141.4%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220.250%22 stop-color=%22rgb(220,220,235)%22 stop-opacity=%220.3%22/%3E%3Cstop offset=%220.680%22 stop-color=%22rgb(220,220,235)%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill=%22url(#g)%22 d=%22M0 0L0.0 -150.0L20.9 -148.5ZM0 0L57.4 -138.6L76.1 -129.2ZM0 0L106.1 -106.1L119.8 -90.3ZM0 0L138.6 -57.4L145.2 -37.6ZM0 0L150.0 -0.0L148.5 20.9ZM0 0L138.6 57.4L129.2 76.1ZM0 0L106.1 106.1L90.3 119.8ZM0 0L57.4 138.6L37.6 145.2ZM0 0L0.0 150.0L-20.9 148.5ZM0 0L-57.4 138.6L-76.1 129.2ZM0 0L-106.1 106.1L-119.8 90.3ZM0 0L-138.6 57.4L-145.2 37.6ZM0 0L-150.0 0.0L-148.5 -20.9ZM0 0L-138.6 -57.4L-129.2 -76.1ZM0 0L-106.1 -106.1L-90.3 -119.8ZM0 0L-57.4 -138.6L-37.6 -145.2Z%22/%3E%3C/svg%3E"); }
@keyframes raysSpin { to { rotate: 360deg; } }
/* idle spin while waiting for the call */
.coin-ov.stage.calling .coin3d { animation: idleSpin 3.2s linear infinite; }
@keyframes idleSpin { from { transform: rotateX(-12deg) rotateY(0deg); } to { transform: rotateX(-12deg) rotateY(360deg); } }
.coin-ov.stage.calling .coin-toss { animation: idleBob 1.6s ease-in-out infinite; }
@keyframes idleBob { 50% { transform: translateY(-8px); } }

.cs-side { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 18px; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.12); transition: all .3s; min-height: 150px; justify-content: center; }
.cs-side.h { border-color: rgba(227,53,13,.35); }
.cs-side.t { border-color: rgba(255,203,5,.35); }
.cs-side.win { background: rgba(46,157,87,.22); border-color: #46c46e; transform: scale(1.05); box-shadow: 0 0 30px rgba(70,196,110,.35); }
.cs-side.lose { opacity: .35; transform: scale(.95); }
.cs-side.pick { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,203,5,.35); }
.cs-label { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 22px; line-height: 1; }
.cs-out { font-size: 13.5px; color: rgba(255,255,255,.85); line-height: 1.35; max-width: 200px; }
.mini-face { position: relative; display: block; width: 58px; height: 58px; }
.mini-face .face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; transform: none !important;
  background: radial-gradient(circle at 32% 28%, #fff6bf 0%, #ffd84a 30%, #e9b40c 62%, #b98a00 100%); box-shadow: inset 0 0 0 3px #c99a00, inset 0 0 0 5px #ffe27a, 0 4px 10px rgba(0,0,0,.4); }
.mini-face .pokeball { width: 60%; height: 60%; border-width: 2px; }
.mini-face .pokeball::after { width: 26%; height: 26%; border-width: 2px; }
.mini-face .tails .ic { width: 55%; height: 55%; color: #a77f00; }
.call-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; color: #fff; cursor: pointer; padding: 6px 14px; }
.cs-side:has(.call-btn) { cursor: pointer; }
.cs-side:has(.call-btn):hover { background: rgba(255,203,5,.14); border-color: var(--yellow); transform: translateY(-3px); }
.call-btn .mini-face { width: 76px; height: 76px; transition: transform .25s; }
.cs-side:hover .call-btn .mini-face { transform: rotate(-10deg) scale(1.08); }
.cs-key { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.3); border-radius: 5px; padding: 0 6px; }
.coin-ov.stage .coin-result { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 40px; min-height: 48px; margin-top: 4px; letter-spacing: .02em; }
.coin-ov.stage .coin-result.h { color: #ff7a59; text-shadow: 0 0 18px rgba(227,53,13,.6); animation: resultPop .45s cubic-bezier(.3,.7,.4,1.5); }
.coin-ov.stage .coin-result.t { color: var(--yellow); text-shadow: 0 0 18px rgba(255,203,5,.6); animation: resultPop .45s cubic-bezier(.3,.7,.4,1.5); }
@keyframes resultPop { from { transform: scale(.4); opacity: 0; } }
.coin-ov.stage .coin-tally { color: rgba(255,255,255,.8); font-weight: 800; min-height: 1.3em; }
.cs-continue { margin-top: 8px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 7px 22px; font-weight: 700; }
.cs-continue:hover { background: rgba(255,255,255,.2); }

/* During an attack the stage becomes a compact strip at the bottom so the arena stays visible. */
body.arena-on .coin-ov.stage { background: linear-gradient(transparent 55%, rgba(3,7,20,.85)); place-items: end center; padding-bottom: 2vh; }
body.arena-on .coin-stage { width: min(760px, 100% - 32px); }
body.arena-on .cs-title { font-size: 20px; }
body.arena-on .cs-sub { display: none; }
body.arena-on .cs-row { margin-top: 2px; gap: 12px; }
body.arena-on .coin-ov.stage .coin-scene { width: 130px; height: 150px; --coin-d: 80px; }
body.arena-on .coin-ov.stage .coin3d { --t: 8px; }
body.arena-on .felt { width: 120px; height: 28px; }
body.arena-on .rays { width: 200px; height: 200px; margin: 0 0 -100px -100px; bottom: 70px; }
body.arena-on .cs-side { min-height: 0; padding: 8px; flex-direction: row; text-align: left; gap: 8px; }
body.arena-on .cs-side .mini-face { width: 34px; height: 34px; flex: none; }
body.arena-on .cs-label { font-size: 15px; }
body.arena-on .cs-out { font-size: 12px; }
body.arena-on .coin-ov.stage .coin-result { font-size: 26px; min-height: 30px; }
body.arena-on .cs-continue { display: none; }

button.danger { background: #e05555; border-color: #b83b3b; color: #fff; }

/* ---------- Hand held as a fan ---------- */
#hand .hcard { transform-origin: 50% 115%; transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg)); transition: transform .2s ease, margin .2s ease; }
#hand .hcard:hover { transform: translateY(-14%) rotate(0deg) scale(1.12); }
#hand .hcard.drag-src { transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg)); }
#hand { align-items: flex-end; padding-bottom: 4px; }

#hand.instant .hcard { transition: none !important; }

/* Flights are positioned by transform each frame (see fly()). */
.fly { left: 0; top: 0; will-change: transform; }
.fly-inner { transition: none; }

/* Anything whose card is still flying in stays invisible until it lands. */
.arriving { visibility: hidden !important; }

/* ---------- Anime attack cut-in ---------- */
.arena.anime { background: radial-gradient(ellipse at center, rgba(10,16,40,.35), rgba(2,4,14,.88) 75%); overflow: hidden; }
.arena.anime .panel { position: absolute; top: -10%; bottom: -10%; width: 62%; background:
    linear-gradient(90deg, color-mix(in srgb, var(--c) 75%, #000) 0%, var(--c) 60%, color-mix(in srgb, var(--c) 60%, #fff) 100%);
  opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; mix-blend-mode: screen; }
.arena.anime .panel::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(255,255,255,.12) 0 2px, transparent 2px 14px); }
.arena.anime .panel.left { left: -12%; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); transform: translateX(-60%); }
.arena.anime .panel.right { right: -12%; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); transform: translateX(60%); }
.arena.anime.cut-in .panel { opacity: .5; transform: none; }
.arena.anime .speedlines { position: absolute; inset: -40%; opacity: 0; transition: opacity .25s;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-100 -100 200 200%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%220%22 cy=%220%22 r=%22141.4%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220.180%22 stop-color=%22rgb(255,255,255)%22 stop-opacity=%220%22/%3E%3Cstop offset=%220.550%22 stop-color=%22rgb(255,255,255)%22 stop-opacity=%220.55%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill=%22url(#g)%22 d=%22M0 0L0.0 -150.0L1.6 -150.0ZM0 0L10.9 -149.6L12.5 -149.5ZM0 0L21.8 -148.4L23.4 -148.2ZM0 0L32.6 -146.4L34.1 -146.1ZM0 0L43.2 -143.6L44.7 -143.2ZM0 0L53.6 -140.1L55.0 -139.5ZM0 0L63.7 -135.8L65.1 -135.1ZM0 0L73.4 -130.8L74.8 -130.0ZM0 0L82.8 -125.1L84.1 -124.2ZM0 0L91.7 -118.7L92.9 -117.8ZM0 0L100.1 -111.7L101.3 -110.7ZM0 0L108.0 -104.1L109.1 -103.0ZM0 0L115.3 -96.0L116.3 -94.7ZM0 0L122.0 -87.3L122.9 -86.0ZM0 0L128.0 -78.1L128.9 -76.8ZM0 0L133.4 -68.6L134.1 -67.2ZM0 0L138.1 -58.7L138.7 -57.2ZM0 0L142.0 -48.4L142.5 -46.9ZM0 0L145.1 -37.9L145.5 -36.4ZM0 0L147.5 -27.2L147.8 -25.7ZM0 0L149.1 -16.4L149.3 -14.8ZM0 0L149.9 -5.5L149.9 -3.9ZM0 0L149.9 5.5L149.8 7.0ZM0 0L149.1 16.4L148.9 18.0ZM0 0L147.5 27.2L147.2 28.8ZM0 0L145.1 37.9L144.7 39.5ZM0 0L142.0 48.4L141.5 49.9ZM0 0L138.1 58.7L137.4 60.1ZM0 0L133.4 68.6L132.7 70.0ZM0 0L128.0 78.1L127.2 79.5ZM0 0L122.0 87.3L121.1 88.6ZM0 0L115.3 96.0L114.3 97.2ZM0 0L108.0 104.1L106.9 105.2ZM0 0L100.1 111.7L98.9 112.8ZM0 0L91.7 118.7L90.4 119.7ZM0 0L82.8 125.1L81.5 126.0ZM0 0L73.4 130.8L72.0 131.6ZM0 0L63.7 135.8L62.2 136.5ZM0 0L53.6 140.1L52.1 140.7ZM0 0L43.2 143.6L41.7 144.1ZM0 0L32.6 146.4L31.1 146.7ZM0 0L21.8 148.4L20.3 148.6ZM0 0L10.9 149.6L9.4 149.7ZM0 0L0.0 150.0L-1.6 150.0ZM0 0L-10.9 149.6L-12.5 149.5ZM0 0L-21.8 148.4L-23.4 148.2ZM0 0L-32.6 146.4L-34.1 146.1ZM0 0L-43.2 143.6L-44.7 143.2ZM0 0L-53.6 140.1L-55.0 139.5ZM0 0L-63.7 135.8L-65.1 135.1ZM0 0L-73.4 130.8L-74.8 130.0ZM0 0L-82.8 125.1L-84.1 124.2ZM0 0L-91.7 118.7L-92.9 117.8ZM0 0L-100.1 111.7L-101.3 110.7ZM0 0L-108.0 104.1L-109.1 103.0ZM0 0L-115.3 96.0L-116.3 94.7ZM0 0L-122.0 87.3L-122.9 86.0ZM0 0L-128.0 78.1L-128.9 76.8ZM0 0L-133.4 68.6L-134.1 67.2ZM0 0L-138.1 58.7L-138.7 57.2ZM0 0L-142.0 48.4L-142.5 46.9ZM0 0L-145.1 37.9L-145.5 36.4ZM0 0L-147.5 27.2L-147.8 25.7ZM0 0L-149.1 16.4L-149.3 14.8ZM0 0L-149.9 5.5L-149.9 3.9ZM0 0L-149.9 -5.5L-149.8 -7.0ZM0 0L-149.1 -16.4L-148.9 -18.0ZM0 0L-147.5 -27.2L-147.2 -28.8ZM0 0L-145.1 -37.9L-144.7 -39.5ZM0 0L-142.0 -48.4L-141.5 -49.9ZM0 0L-138.1 -58.7L-137.4 -60.1ZM0 0L-133.4 -68.6L-132.7 -70.0ZM0 0L-128.0 -78.1L-127.2 -79.5ZM0 0L-122.0 -87.3L-121.1 -88.6ZM0 0L-115.3 -96.0L-114.3 -97.2ZM0 0L-108.0 -104.1L-106.9 -105.2ZM0 0L-100.1 -111.7L-98.9 -112.8ZM0 0L-91.7 -118.7L-90.4 -119.7ZM0 0L-82.8 -125.1L-81.5 -126.0ZM0 0L-73.4 -130.8L-72.0 -131.6ZM0 0L-63.7 -135.8L-62.2 -136.5ZM0 0L-53.6 -140.1L-52.1 -140.7ZM0 0L-43.2 -143.6L-41.7 -144.1ZM0 0L-32.6 -146.4L-31.1 -146.7ZM0 0L-21.8 -148.4L-20.3 -148.6ZM0 0L-10.9 -149.6L-9.4 -149.7Z%22/%3E%3C/svg%3E") center / 100% no-repeat; will-change: transform; }
.arena.anime.cut-in .speedlines { opacity: .55; animation: speedSpin 9s linear infinite; }
@keyframes speedSpin { to { rotate: 360deg; } }
.arena.anime .arena-title { top: 7%; background: none; border: none; box-shadow: none; padding: 0; font-size: clamp(38px, 5.6vw, 76px); font-style: italic; letter-spacing: .02em;
  color: #fff; -webkit-text-stroke: 6px var(--c); paint-order: stroke fill; text-shadow: 6px 6px 0 rgba(0,0,0,.55), 0 0 30px var(--c); transform: translate(-50%, 0) skewX(-12deg) scale(2.4); opacity: 0; filter: blur(6px);
  transition: transform .28s cubic-bezier(.2,1.4,.4,1), opacity .2s, filter .25s; }
.arena.anime .arena-title::after { content: ''; position: absolute; left: -6%; right: -6%; bottom: 8%; height: 22%; background: var(--c); z-index: -1; transform: skewX(-20deg); opacity: .85; }
.arena.anime.cut-in .arena-title { opacity: 1; filter: none; transform: translate(-50%, 0) skewX(-12deg) scale(1); }
.arena.anime .arena-card { z-index: 2; }
/* The charge glow: two pre-drawn glows cross-fade (opacity only), instead of an animated box-shadow repainted every frame. */
.arena-card .a-glow { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 734 / 1024; border-radius: 12px; pointer-events: none; display: none; }
.arena-card .a-glow::before, .arena-card .a-glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.arena-card .a-glow::before { box-shadow: 0 0 0 3px var(--c), 0 0 24px 6px var(--c); }
.arena-card .a-glow::after { box-shadow: 0 0 0 5px #fff, 0 0 46px 16px var(--c); opacity: 0; will-change: opacity; }
.arena-card.charging .a-glow { display: block; }
.arena-card.charging .a-glow::after { animation: chargeGlow .35s ease-in-out infinite alternate; }
@keyframes chargeGlow { to { opacity: 1; } }
.particle { position: fixed; z-index: 34; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; background: #fff; box-shadow: 0 0 10px 4px var(--c); }

.afx { position: fixed; z-index: 34; pointer-events: none; }
.afx.fireball { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff7c2, #ffb52e 35%, #e5562f 65%, transparent 72%);
  box-shadow: -18px 0 22px 6px rgba(255,120,40,.55), -36px 0 30px 4px rgba(229,86,47,.35); filter: drop-shadow(0 0 10px #ff8a3d); }
.afx.bubble { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 14%, rgba(150,210,255,.85) 26%, rgba(58,142,224,.55) 60%, rgba(58,142,224,.15) 72%); border: 1.5px solid rgba(255,255,255,.75); }
.afx.leaf { width: 30px; height: 14px; border-radius: 100% 0; background: linear-gradient(135deg, #b8f070, #3f9b4a 60%, #22612b); box-shadow: 0 0 8px rgba(120,220,90,.6); }
.afx.bolt { left: 0; top: 0; width: 100vw; height: 100vh; overflow: visible; }
.afx.bolt path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.afx.bolt .glow { stroke: rgba(242,193,46,.6); stroke-width: 16; filter: blur(4px); }
.afx.bolt .core { stroke: #fffbe0; stroke-width: 5; }
.afx.ring { width: 70px; height: 70px; border-radius: 50%; border: 5px solid #e2a6ff; box-shadow: 0 0 18px 4px rgba(156,91,192,.8), inset 0 0 14px rgba(156,91,192,.8); }
.afx.slash { height: 7px; background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); box-shadow: 0 0 16px 4px rgba(255,255,255,.8); transform-origin: left center; }
.afx.flash { inset: 0; background: #fff; z-index: 36; }
.afx.star { width: 230px; height: 230px; background: radial-gradient(circle, #fff 0 18%, var(--c) 34%, transparent 62%);
  clip-path: polygon(50% 0, 58% 34%, 92% 12%, 68% 44%, 100% 52%, 66% 60%, 86% 92%, 54% 68%, 46% 100%, 40% 66%, 10% 88%, 32% 58%, 0 46%, 34% 40%, 12% 8%, 44% 32%); z-index: 35; }
.afx.shock { width: 120px; height: 120px; border-radius: 50%; border: 6px solid rgba(255,255,255,.9); z-index: 35; }
.afx.stamp { z-index: 37; font-family: "Baloo 2", sans-serif; font-weight: 800; white-space: nowrap; text-align: center; line-height: 1; }
.afx.stamp.dmg-stamp { font-size: 64px; color: #fff; -webkit-text-stroke: 6px #b71c1c; paint-order: stroke fill; text-shadow: 5px 5px 0 #4a0c0c, 0 0 24px rgba(255,60,60,.6); }
.afx.stamp.dmg-stamp small { display: block; font-size: 16px; -webkit-text-stroke: 0; text-shadow: none; background: #b71c1c; border-radius: 99px; padding: 2px 10px; margin-top: 4px; }
.afx.stamp.super { font-size: 30px; color: #1d2a5a; background: var(--yellow); border: 3px solid #1d2a5a; border-radius: 10px; padding: 4px 14px; box-shadow: 5px 5px 0 #1d2a5a; }
.afx.stamp.miss { font-size: 54px; color: #e8e8e8; -webkit-text-stroke: 6px #3c4a5a; paint-order: stroke fill; text-shadow: 4px 4px 0 rgba(0,0,0,.5); font-style: italic; }
.afx.stamp.blocked { font-size: 40px; color: #d6ecff; -webkit-text-stroke: 4px #0e6aa8; paint-order: stroke fill; text-shadow: 4px 4px 0 rgba(0,0,0,.45); }
.afx.stamp.blocked .ic { width: .8em; height: .8em; }
.afx.stamp.ko-stamp { font-size: clamp(70px, 10vw, 140px); color: var(--yellow); -webkit-text-stroke: 10px #b71c1c; paint-order: stroke fill; text-shadow: 8px 8px 0 #1d2a5a, 0 0 40px rgba(255,203,5,.7); font-style: italic; }

/* ---------- Evolution ---------- */
.evolve-stage { position: fixed; inset: 0; z-index: 29; pointer-events: none; background: radial-gradient(ellipse at center, rgba(40,60,120,.55), rgba(3,7,20,.88) 70%); }
.ev-card { position: fixed; z-index: 2; }
.ev-card img { position: absolute; inset: 0; width: 100%; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.6); transition: opacity .05s linear; }
/* The white glowing silhouette is its own layer that fades in (no animated filters on the card images). */
.ev-sil { position: absolute; inset: 0; z-index: 1; border-radius: 12px; background: #fff; box-shadow: 0 0 18px #fff, 0 0 40px #9fd8ff; opacity: 0; transition: opacity .3s; will-change: opacity; }
.evolve-stage.glowing .ev-sil { opacity: 1; }
.ev-card .ev-old { position: relative; }
.ev-card .ev-new { opacity: 0; }
.evolve-stage.revealed .ev-card img { box-shadow: 0 0 30px rgba(255,255,255,.55), 0 14px 34px rgba(0,0,0,.6); }
.ev-glow { position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; transform: translate(-50%,-50%) scale(.4); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 10%, rgba(160,215,255,.55) 35%, transparent 70%); transition: opacity .4s, transform 1.6s ease-out; }
.evolve-stage.glowing .ev-glow { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
.evolve-stage.revealed .ev-glow { opacity: .35; }
.ev-rays { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; opacity: 0; transition: opacity .4s;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-100 -100 200 200%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%220%22 cy=%220%22 r=%22141.4%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220.100%22 stop-color=%22rgb(255,255,255)%22 stop-opacity=%220.18%22/%3E%3Cstop offset=%220.600%22 stop-color=%22rgb(255,255,255)%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill=%22url(#g)%22 d=%22M0 0L0.0 -150.0L10.5 -149.6ZM0 0L35.9 -145.6L46.0 -142.8ZM0 0L69.7 -132.8L78.8 -127.6ZM0 0L99.5 -112.3L107.1 -105.1ZM0 0L123.4 -85.2L129.1 -76.4ZM0 0L140.3 -53.2L143.6 -43.3ZM0 0L148.9 -18.1L149.8 -7.6ZM0 0L148.9 18.1L147.3 28.4ZM0 0L140.3 53.2L136.2 62.8ZM0 0L123.4 85.2L117.2 93.6ZM0 0L99.5 112.3L91.4 118.9ZM0 0L69.7 132.8L60.3 137.4ZM0 0L35.9 145.6L25.7 147.8ZM0 0L0.0 150.0L-10.5 149.6ZM0 0L-35.9 145.6L-46.0 142.8ZM0 0L-69.7 132.8L-78.8 127.6ZM0 0L-99.5 112.3L-107.1 105.1ZM0 0L-123.4 85.2L-129.1 76.4ZM0 0L-140.3 53.2L-143.6 43.3ZM0 0L-148.9 18.1L-149.8 7.6ZM0 0L-148.9 -18.1L-147.3 -28.4ZM0 0L-140.3 -53.2L-136.2 -62.8ZM0 0L-123.4 -85.2L-117.2 -93.6ZM0 0L-99.5 -112.3L-91.4 -118.9ZM0 0L-69.7 -132.8L-60.3 -137.4ZM0 0L-35.9 -145.6L-25.7 -147.8Z%22/%3E%3C/svg%3E") center / 100% no-repeat; will-change: transform; }
.evolve-stage.glowing .ev-rays, .evolve-stage.revealed .ev-rays { opacity: 1; animation: raysSpin 7s linear infinite; }
.ev-sparkles i { position: fixed; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px #bfe6ff; opacity: 0; animation: sparkUp 1.4s ease-out infinite; }
.evolve-stage:not(.glowing) .ev-sparkles i { animation-play-state: paused; }
@keyframes sparkUp { 0% { opacity: 0; transform: translateY(20px) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-90px) scale(1.2); } }
.afx.stamp.evolve-stamp { font-size: clamp(40px, 5vw, 64px); color: #fff; -webkit-text-stroke: 6px var(--navy); paint-order: stroke fill; text-shadow: 5px 5px 0 #1d2a5a, 0 0 26px #9fd8ff; font-style: italic; }

/* Tumbling dice are positioned by transform each frame (see tumbleOnto()). */
.tumble { left: 0; top: 0; will-change: transform; }
.tumble > .die { box-shadow: 0 6px 12px rgba(0,0,0,.5); }

/* ---------- Realistic deck: tight corners and fine edge lines ---------- */
.pile .stack img, .pile .stack.deck .layer, .pile .stack.deck .layer img, .pile .empty { border-radius: max(2px, calc(var(--pile-w) * .05)); }
.pile .stack.deck .layer { border: none; background: linear-gradient(#f7f6f1, #e3e0d6); box-shadow: 0 0 0 .5px rgba(0,0,0,.28);
  transform: translate(calc(var(--l) * .45px), calc(var(--l) * .7px)); }
.pile .stack.deck .layer:last-child { box-shadow: none; }
.pile .stack.deck .layer img { box-shadow: 0 0 0 .5px rgba(0,0,0,.35); }
.prizes img { border-radius: max(2px, calc(var(--prize-w) * .05)); }
#opp-hand .ocard img { border-radius: max(2px, calc(var(--ohand-w) * .05)); }

/* ---------- Deck pile, top view ---------- */
.pile .stack.deck { margin-bottom: 4px; }
.pile .stack.deck::after { display: none; }
.pile .stack.deck img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: max(2px, calc(var(--pile-w) * .05)); }
.pile .stack.deck img.under { filter: brightness(.82); box-shadow: 0 0 0 .5px rgba(0,0,0,.35); }
.pile .stack.deck img.top { box-shadow: 0 0 0 .5px rgba(0,0,0,.4), 0 calc(var(--sh) * .35px) calc(var(--sh) * .9px) rgba(0,0,0,.5), 0 calc(var(--sh) * .12px) calc(var(--sh) * .25px) rgba(0,0,0,.35); }
.pile .stack.deck:hover img.top { transform: translateY(-2px); transition: transform .15s; }

/* ---------- Bench/Active zones keep their printed size; hover spreads tucked cards without moving lines ---------- */
.mon { --peek-base: calc(var(--card-h) * .1 * var(--pkf, 1)); }
.mon.active { --peek-base: calc(var(--active-h) * .1 * var(--pkf, 1)); }
.pile-under { padding-bottom: calc(var(--n) * var(--peek-base)); transition: none; }
.mon.up .pile-under { padding-bottom: 0; padding-top: calc(var(--n) * var(--peek-base)); }
.mon:hover { z-index: 6; }
/* Zones are sized for the tallest possible stack (card + 3 tucked strips + HP line), so they never resize. */
.bench { height: calc(var(--card-h) * 1.3 + 40px); box-sizing: border-box; }
.active-zone { height: calc(var(--active-h) * 1.3 + 26px); }
.mat.you .active-zone, .mat.you .bench { align-items: flex-start; }
.mat.opp .active-zone, .mat.opp .bench { align-items: flex-end; }

/* ---------- Playmat: muted felt, woven texture, faint Pokémon watermark ---------- */
:root { --mat-line: rgba(255, 255, 255, .13); }
#board {
  isolation: isolate;
  background-color: #1d2e4b;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 85% 75% at 50% 48%, #2a4269 0%, #1f3253 55%, #16233c 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 60px rgba(0,0,0,.45);
}
/* Watermark: the Pokémon logo, barely there, and a faint Pokéball ring whose band is the middle bar. */
#board::before, #board::after { content: ''; position: absolute; pointer-events: none; z-index: -1; }

#board::after { left: 50%; top: 50%; width: min(58vh, 60%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid rgba(255,255,255,.035); box-shadow: inset 0 0 0 calc(min(58vh, 60vw) * .17) rgba(255,255,255,.012); }
.bench, .prizes, .pile .empty, .empty-slot { border-style: dashed; border-color: var(--mat-line); }
.bench { border-width: 1.5px; background: rgba(255,255,255,.015); }
#midbar { background: rgba(8, 14, 30, .55); }
#hand-wrap { background: rgba(8, 14, 30, .32); }
/* Watermark v2: one huge, tilted, off-centre Pokémon logo bleeding off the mat, barely visible. */
#board::after { content: none; }
#board::before { inset: -30% -25%; background: url("img/pokemon-logo-white.svg") 38% 58% / 105% auto no-repeat;
  transform: rotate(-13deg); opacity: .045; will-change: transform; } /* a pre-made white logo: no filter or blend mode on every board repaint */
:root { --mat-line: rgba(255, 255, 255, .19); }

/* ---------- Prize stage: pick a face-down Prize card, it spins and flips to reveal ---------- */
.prize-ov { z-index: 40; background: radial-gradient(ellipse at 50% 55%, rgba(20,40,90,.78), rgba(3,7,20,.94) 70%); animation: stageIn .25s ease-out; overflow: hidden; }
.prize-ov.closing { animation: stageOut .25s ease-in forwards; }
.prize-ov::before { content: ''; position: absolute; left: 50%; top: 47%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; opacity: 0; transition: opacity .5s;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-100 -100 200 200%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%220%22 cy=%220%22 r=%22141.4%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220.080%22 stop-color=%22rgb(255,203,5)%22 stop-opacity=%220.16%22/%3E%3Cstop offset=%220.550%22 stop-color=%22rgb(255,203,5)%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill=%22url(#g)%22 d=%22M0 0L0.0 -150.0L13.1 -149.4ZM0 0L38.8 -144.9L51.3 -141.0ZM0 0L75.0 -129.9L86.0 -122.9ZM0 0L106.1 -106.1L114.9 -96.4ZM0 0L129.9 -75.0L135.9 -63.4ZM0 0L144.9 -38.8L147.7 -26.0ZM0 0L150.0 -0.0L149.4 13.1ZM0 0L144.9 38.8L141.0 51.3ZM0 0L129.9 75.0L122.9 86.0ZM0 0L106.1 106.1L96.4 114.9ZM0 0L75.0 129.9L63.4 135.9ZM0 0L38.8 144.9L26.0 147.7ZM0 0L0.0 150.0L-13.1 149.4ZM0 0L-38.8 144.9L-51.3 141.0ZM0 0L-75.0 129.9L-86.0 122.9ZM0 0L-106.1 106.1L-114.9 96.4ZM0 0L-129.9 75.0L-135.9 63.4ZM0 0L-144.9 38.8L-147.7 26.0ZM0 0L-150.0 0.0L-149.4 -13.1ZM0 0L-144.9 -38.8L-141.0 -51.3ZM0 0L-129.9 -75.0L-122.9 -86.0ZM0 0L-106.1 -106.1L-96.4 -114.9ZM0 0L-75.0 -129.9L-63.4 -135.9ZM0 0L-38.8 -144.9L-26.0 -147.7Z%22/%3E%3C/svg%3E") center / 100% no-repeat; will-change: transform; }
.prize-ov.revealing::before { opacity: 1; animation: raysSpin 8s linear infinite; }
.prize-stage { position: relative; width: min(900px, 100% - 32px); text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; }
.prize-stage .cs-title { transition: opacity .3s; }
.pz-row { --h: min(30vh, 230px, calc((100vw - 40px) / (var(--n, 6) * .55 + .25))); display: flex; /* the whole fan fits a phone screen (each card shows ~76% of its width) */ justify-content: center; margin: 34px 0 calc(20px + (var(--n, 6) - 1) * (var(--n, 6) - 1) * 1.5px); /* the outer cards dip by o²·6px */ height: calc(var(--h) * 1.15); align-items: center; perspective: 1200px; }
.pz-card { --w: calc(var(--h) * .716); position: relative; width: var(--w); height: var(--h); margin: 0 calc(var(--w) * -.12); padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(calc(var(--o) * var(--o) * 6px)) rotate(calc(var(--o) * 6deg)); transition: transform .22s ease, filter .22s, opacity .3s;
  animation: pzDeal .5s cubic-bezier(.3,.7,.3,1.2) backwards; animation-delay: calc(var(--i) * 70ms); z-index: 1; }
@keyframes pzDeal { from { opacity: 0; transform: translateY(60vh) rotate(calc(var(--o) * 30deg)) scale(.6); } }
.pz-card:hover, .pz-card:focus-visible { transform: translateY(calc(var(--o) * var(--o) * 6px - 26px)) rotate(calc(var(--o) * 3deg)) scale(1.08); z-index: 3; outline: none;
  filter: drop-shadow(0 0 18px rgba(255,203,5,.75)); }
.pz-flip { position: absolute; inset: 0; transform-style: preserve-3d; display: block; }
.pz-flip img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: calc(var(--w) * .05); backface-visibility: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.55); }
.pz-front { transform: rotateY(180deg); background: #ddd; }
.prize-ov.picked .pz-card { pointer-events: none; }
.prize-ov.picked .pz-card:not(.chosen) { opacity: 0; transform: translateY(40px) rotate(calc(var(--o) * 12deg)) scale(.85); transition: opacity .35s, transform .45s; }
.prize-ov.picked .pz-card.chosen { z-index: 5; filter: none; animation: none; }
.prize-ov.picked .cs-title, .prize-ov.picked .cs-sub { opacity: 0; }
.prize-ov.revealed .pz-card.chosen .pz-front { box-shadow: 0 0 0 3px rgba(255,203,5,.9), 0 0 50px rgba(255,203,5,.55), 0 14px 30px rgba(0,0,0,.6); }
.pz-caption { position: fixed; left: 0; right: 0; top: calc(47vh + min(25vh, 200px) + 16px); display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(8px); transition: all .35s; pointer-events: none; }
.prize-ov.revealed .pz-caption { opacity: 1; transform: none; }
.pz-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 30px; color: var(--yellow); text-shadow: 2px 2px 0 var(--navy); line-height: 1.1; }
.pz-note { color: rgba(255,255,255,.8); font-size: 14px; }
.pz-left { font-size: 13px; font-weight: 800; color: rgba(255,255,255,.6); letter-spacing: .02em; transition: opacity .3s; }
.prize-ov.picked .pz-left { opacity: 0; }
/* Shine sweeping over the card the moment it turns face up. */
.prize-ov.revealed .pz-card.chosen .pz-flip::after { content: ''; position: absolute; inset: 0; border-radius: calc(var(--w) * .05); transform: rotateY(180deg); backface-visibility: hidden; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: pzShine .9s ease-out forwards; }
@keyframes pzShine { to { background-position: 150% 0; } }

/* ---------- Stadium in play, word choices, new action groups ---------- */
.ic-landmark { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-landmark%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cline%20x1%3D%223%22%20x2%3D%2221%22%20y1%3D%2222%22%20y2%3D%2222%22%20%2F%3E%20%3Cline%20x1%3D%226%22%20x2%3D%226%22%20y1%3D%2218%22%20y2%3D%2211%22%20%2F%3E%20%3Cline%20x1%3D%2210%22%20x2%3D%2210%22%20y1%3D%2218%22%20y2%3D%2211%22%20%2F%3E%20%3Cline%20x1%3D%2214%22%20x2%3D%2214%22%20y1%3D%2218%22%20y2%3D%2211%22%20%2F%3E%20%3Cline%20x1%3D%2218%22%20x2%3D%2218%22%20y1%3D%2218%22%20y2%3D%2211%22%20%2F%3E%20%3Cpolygon%20points%3D%2212%202%2020%207%204%207%22%20%2F%3E%20%3C%2Fsvg%3E"); }
#stadium { display: flex; align-items: center; gap: 7px; padding: 2px 10px 2px 3px; border-radius: 10px; background: rgba(255,203,5,.13); border: 1px solid rgba(255,203,5,.35); animation: pop .35s ease-out; }
#stadium img { height: 30px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.5); cursor: help; }
#stadium span { display: flex; flex-direction: column; line-height: 1.05; }
#stadium small { font-size: 10px; font-weight: 800; color: var(--yellow); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 3px; }
#stadium small .ic { width: 11px; height: 11px; }
#stadium b { font-size: 12.5px; cursor: help; }
.choice-grid.words { gap: 8px; }

/* ---------- Gary's Trainer cards: shown at centre stage ---------- */
.trainer-stage { position: fixed; inset: 0; z-index: 38; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(ellipse at 50% 50%, rgba(20,40,90,.66), rgba(3,7,20,.9) 70%); }
.ts-row { display: flex; align-items: center; gap: 28px; padding: 16px; max-width: min(820px, 100% - 32px); }
.ts-slot { flex: none; width: min(29vh, 250px); aspect-ratio: .716; }
.ts-slot img { width: 100%; border-radius: 12px; display: block; opacity: 0; box-shadow: 0 0 0 3px rgba(255,203,5,.85), 0 0 46px rgba(255,203,5,.45), 0 14px 30px rgba(0,0,0,.6); }
.ts-slot.shown img { opacity: 1; animation: tsPop .45s cubic-bezier(.3,.7,.4,1.4); }
@keyframes tsPop { from { transform: scale(1.12); } }
.ts-text { color: #fff; opacity: 0; transform: translateX(-12px); transition: all .35s ease-out; max-width: 380px; }
.trainer-stage.revealed .ts-text { opacity: 1; transform: none; }
.ts-text small { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--yellow); text-transform: uppercase; letter-spacing: .05em; }
.ts-text small .ic { width: 16px; height: 16px; }
.ts-text b { display: block; font-family: "Baloo 2", sans-serif; font-size: 28px; line-height: 1.1; margin: 6px 0 8px; text-shadow: 2px 2px 0 var(--navy); }
.ts-text p { font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.88); margin: 0; }
@media (max-width: 640px) { .ts-row { flex-direction: column; text-align: center; } .ts-text small { justify-content: center; } }
.ts-text em { display: flex; align-items: center; gap: 6px; font-style: normal; font-weight: 800; color: #ffe28a; margin: -2px 0 8px; }
.ts-text em .ic { width: 15px; height: 15px; }
.ic-arrow-right { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-arrow-right%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M5%2012h14%22%20%2F%3E%20%3Cpath%20d%3D%22m12%205%207%207-7%207%22%20%2F%3E%20%3C%2Fsvg%3E"); }

/* ---------- Modern (Scarlet & Violet) decks ---------- */
:root { --Darkness: #3b4a5a; --Metal: #8b98a5; --Dragon: #b0912f; }
.ei-Darkness { --i: url("data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M229.379%20452.85C239.106%20454.339%20249.068%20455.111%20259.212%20455.111C367.214%20455.111%20454.767%20367.558%20454.767%20259.556C454.767%20151.553%20367.214%2064%20259.212%2064C251.966%2064%20244.811%2064.3941%20237.77%2065.1621C291.345%20105.751%20326.767%20176.062%20326.767%20256C326.767%20340.04%20287.616%20413.44%20229.379%20452.85ZM255.656%20512C397.041%20512%20511.656%20397.385%20511.656%20256C511.656%20114.615%20397.041%200%20255.656%200C114.271%200%20-0.34375%20114.615%20-0.34375%20256C-0.34375%20397.385%20114.271%20512%20255.656%20512Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E"); }
.ei-Metal { --i: url("data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.0511107%20254.527C-0.0170046%20254.411%20-0.0170388%20254.267%200.0510196%20254.15L128.795%2034.1843C128.862%2034.0702%20128.985%2034%20129.117%2034H384.294C384.427%2034%20384.55%2034.0708%20384.617%2034.1859L511.949%20254.152C512.016%20254.267%20512.016%20254.41%20511.949%20254.525L384.617%20474.244C384.55%20474.359%20384.427%20474.43%20384.294%20474.43H129.117C128.985%20474.43%20128.862%20474.36%20128.795%20474.246L0.0511107%20254.527ZM374.617%20254.215C374.617%20319.703%20321.528%20372.792%20256.04%20372.792C190.552%20372.792%20137.463%20319.703%20137.463%20254.215C137.463%20188.726%20190.552%20135.638%20256.04%20135.638C321.528%20135.638%20374.617%20188.726%20374.617%20254.215Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E"); }
.ei-Dragon { --i: url("data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M280.702%20254.881C284.172%20252.765%20287.116%20248.331%20289.49%20243.403C320.735%20256.173%20342.692%20286.349%20342.692%20321.54C342.692%20368.29%20303.942%20406.189%20256.142%20406.189C236.52%20406.189%20218.423%20399.802%20203.906%20389.039C199.144%20386.784%20195.226%20384.618%20192.02%20382.845C187.047%20380.096%20183.786%20378.293%20181.744%20378.575C175.775%20379.398%20177.508%20384.89%20179.083%20389.879C180.152%20393.268%20181.149%20396.425%20179.606%20397.727C177.992%20399.091%20172.764%20394.106%20166.655%20388.282C158.339%20380.353%20148.391%20370.868%20143.7%20373.717C139.991%20375.97%20143.592%20382.081%20148%20389.561L148.327%20390.116C150.189%20393.278%20152.347%20396.498%20154.316%20399.436C158.319%20405.407%20161.543%20410.219%20159.93%20411.033C157.98%20412.017%20144.394%20402.847%20132.945%20390.116C128.526%20385.203%20124.246%20379.877%20120.268%20374.928L120.268%20374.927C111.561%20364.093%20104.307%20355.068%20100.235%20356.137C95.3365%20357.423%2099.0421%20367.527%20104.487%20377.25C107.033%20381.797%20110.028%20386.427%20112.621%20390.436L112.621%20390.437C116.654%20396.671%20119.715%20401.402%20118.605%20401.984C117.107%20402.767%20103.926%20389.914%2094.9734%20373.717C89.6559%20364.096%2085.1909%20353.464%2081.5761%20344.857C77.656%20335.522%2074.7359%20328.569%2072.8131%20327.869C66.1325%20325.438%2066.1325%20339.059%2068.8119%20358.718C69.1614%20361.283%2069.6819%20363.973%2070.3228%20366.712C96.307%20450.785%20176.128%20512%20270.567%20512C386.084%20512%20479.728%20420.412%20479.728%20307.432C479.728%20199.9%20394.899%20111.747%20287.12%20103.494C287.256%2098.4284%20289.9%2088.383%20289.9%2088.383C289.9%2088.383%20308.927%2042.3472%20309.933%2032.5099C309.999%2031.857%20310.078%2031.1475%20310.163%2030.3919C311.348%2019.7629%20313.553%200%20296.551%200C287.471%200%20283.249%206.75464%20278.42%2014.4799L278.42%2014.48C276.566%2017.4457%20274.622%2020.5545%20272.28%2023.479C255.412%2044.5436%20227.048%2070.8488%20210.965%2084.8631C176.971%20114.484%20143.619%20138.828%20124.167%20153.026L124.167%20153.026L124.166%20153.027C115.319%20159.484%20109.348%20163.843%20107.5%20165.644C93.574%20179.22%2043.6418%20269.286%2043.6418%20269.286C43.6418%20269.286%2027.4943%20298.182%2033.2338%20304.043C38.9733%20309.903%2052.8141%20308.56%2052.8141%20308.56C52.8141%20308.56%20238.755%20265.903%20255.402%20262.539C259.884%20261.633%20263.048%20261.11%20265.477%20260.709C272.072%20259.62%20273.256%20259.424%20280.702%20254.881ZM149.235%20200.064C139.254%20209.551%20122.701%20232.196%20122.701%20232.196C122.701%20232.196%20153.465%20234.091%20170.408%20217.986C187.352%20201.88%20183.47%20174.433%20183.47%20174.433C183.47%20174.433%20159.215%20190.577%20149.235%20200.064Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E"); }
.ic-history { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-history%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208%22%20%2F%3E%20%3Cpath%20d%3D%22M3%203v5h5%22%20%2F%3E%20%3Cpath%20d%3D%22M12%207v5l4%202%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-loader { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-loader%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%202v4%22%20%2F%3E%20%3Cpath%20d%3D%22m16.2%207.8%202.9-2.9%22%20%2F%3E%20%3Cpath%20d%3D%22M18%2012h4%22%20%2F%3E%20%3Cpath%20d%3D%22m16.2%2016.2%202.9%202.9%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2018v4%22%20%2F%3E%20%3Cpath%20d%3D%22m4.9%2019.1%202.9-2.9%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h4%22%20%2F%3E%20%3Cpath%20d%3D%22m4.9%204.9%202.9%202.9%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-user { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-user%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-wrench { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-wrench%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.format-tabs { display: flex; gap: 10px; margin: 4px 0 14px; }
.ftab { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.14); color: #fff; transition: all .2s; }
.ftab .ic { width: 26px; height: 26px; flex: none; opacity: .8; }
.ftab span { display: flex; flex-direction: column; line-height: 1.2; }
.ftab b { font-family: "Baloo 2", sans-serif; font-size: 18px; }
.ftab small { font-size: 12.5px; opacity: .75; }
.ftab:hover { background: rgba(255,255,255,.1); }
.ftab.on { background: linear-gradient(135deg, rgba(255,203,5,.22), rgba(255,203,5,.08)); border-color: var(--yellow); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.ftab.on .ic { color: var(--yellow); opacity: 1; }
.deck-art { position: relative; }
.deck.loading { pointer-events: none; }
.deck.loading .fan { opacity: .35; transition: opacity .2s; }
.deck.loading .deck-art::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  background: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-loader%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%202v4%22%20%2F%3E%20%3Cpath%20d%3D%22m16.2%207.8%202.9-2.9%22%20%2F%3E%20%3Cpath%20d%3D%22M18%2012h4%22%20%2F%3E%20%3Cpath%20d%3D%22m16.2%2016.2%202.9%202.9%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2018v4%22%20%2F%3E%20%3Cpath%20d%3D%22m4.9%2019.1%202.9-2.9%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h4%22%20%2F%3E%20%3Cpath%20d%3D%22m4.9%204.9%202.9%202.9%22%20%2F%3E%20%3C%2Fsvg%3E") center / contain no-repeat; filter: invert(1); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#btn-start .ic-loader { animation: spin 1s linear infinite; }
.rules-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 800;
  background: linear-gradient(135deg, #7c5cff, #c04bd6); color: #fff; vertical-align: 1px; }
.rules-chip .ic { width: 11px; height: 11px; }
#preview .ttype { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy); background: #eef1fb; border-radius: 8px; padding: 5px 9px; }
#preview .ttype .ic { width: 15px; height: 15px; }

/* ---------- How to play: Classic vs Modern ---------- */
.ic-scale { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-scale%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m16%2016%203-8%203%208c-.87.65-1.92%201-3%201s-2.13-.35-3-1Z%22%20%2F%3E%20%3Cpath%20d%3D%22m2%2016%203-8%203%208c-.87.65-1.92%201-3%201s-2.13-.35-3-1Z%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2021h10%22%20%2F%3E%20%3Cpath%20d%3D%22M12%203v18%22%20%2F%3E%20%3Cpath%20d%3D%22M3%207h2c2%200%205-1%207-2%202%201%205%202%207%202h2%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.ic-list-ordered { --i: url("data:image/svg+xml,%3C!--%20%40license%20lucide-static%20v0.460.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-list-ordered%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M10%2012h11%22%20%2F%3E%20%3Cpath%20d%3D%22M10%2018h11%22%20%2F%3E%20%3Cpath%20d%3D%22M10%206h11%22%20%2F%3E%20%3Cpath%20d%3D%22M4%2010h2%22%20%2F%3E%20%3Cpath%20d%3D%22M4%206h1v4%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2018H4c0-1%202-2%202-3s-1-1.5-2-1%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.rules-compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.45; margin: 6px 0 4px; }
.rules-compare th, .rules-compare td { padding: 7px 10px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--line); }
.rules-compare tbody th { width: 16%; color: var(--navy); font-weight: 800; }
.rules-compare thead th { font-family: "Baloo 2", sans-serif; font-size: 16px; color: var(--navy); border-bottom: 2px solid var(--line); }
.rules-compare thead th .ic { width: 16px; height: 16px; vertical-align: -2px; }
.rules-compare td.c-classic, .rules-compare td.c-modern { width: 42%; transition: background .2s; }
#rules-body[data-format="classic"] .c-classic, #rules-body[data-format="modern"] .c-modern { background: #fff6d6; }
#rules-body thead th[data-you]::after { content: attr(data-you); font-family: system-ui, sans-serif; font-size: 11px; font-weight: 800; color: #b07d00; margin-left: 6px; }
.rules-compare thead th.c-modern .ic { color: #7c5cff; }
.rules .glossary small { font-weight: 600; color: var(--muted, #6b7280); font-size: 11px; }
@media (max-width: 640px) { .rules-compare { font-size: 12.5px; } .rules-compare th, .rules-compare td { padding: 6px; } }

/* ---------- Choices asked in the middle of an attack ----------
   (Metronome, Amnesia, discarding a Stadium, choosing a Benched target…) open above the fight screen,
   docked at the bottom so both Active Pokémon stay visible, like the coin toss does. */
body.arena-on #modal { z-index: 45; place-items: end center; background: linear-gradient(transparent 40%, rgba(3,7,20,.88)); padding-bottom: 3vh; }
body.arena-on #modal .dialog { max-width: 720px; max-height: 48vh; box-shadow: 0 0 0 3px var(--yellow), 0 -8px 30px rgba(0,0,0,.55); animation: dockIn .25s ease-out; }
body.arena-on #modal .dialog h2 { font-size: 20px; margin-bottom: 2px; }
body.arena-on #modal .dialog p { margin: 0 0 6px; }
body.arena-on #modal .choice-grid { margin: 6px 0 2px; }
body.arena-on #modal .choice-grid > button img { width: 96px; }
body.arena-on #preview { z-index: 46; }
@keyframes dockIn { from { transform: translateY(24px); opacity: 0; } }

/* ---------- Setup stage: choose your Active Pokémon and fill your Bench (the Prize stage's look) ---------- */
.st-card img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: calc(var(--w) * .05); box-shadow: 0 10px 24px rgba(0,0,0,.55); background: #ddd; transition: filter .25s, box-shadow .3s; }
.setup-ov.revealed .st-card.chosen img { box-shadow: 0 0 0 3px rgba(255,203,5,.9), 0 0 50px rgba(255,203,5,.55), 0 14px 30px rgba(0,0,0,.6); }
.setup-ov.revealed .st-card.chosen::after { content: ''; position: absolute; inset: 0; border-radius: calc(var(--w) * .05); pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: pzShine .9s ease-out forwards; }
.st-info { min-height: 1.5em; max-width: 640px; font-size: 14px; color: rgba(255,255,255,.85); transition: opacity .3s; }
.setup-ov.picked .st-info, .setup-ov.done .st-info { opacity: 0; }
.st-check { position: absolute; top: -12px; left: calc(50% - 15px); width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--navy); display: grid; place-items: center; /* top centre: the fan overlaps the corners */
  box-shadow: 0 2px 8px rgba(0,0,0,.5); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s; }
.st-check .ic { width: 20px; height: 20px; }
.setup-ov.st-active .st-check { display: none; }
.setup-ov.st-bench .st-card.sel { transform: translateY(calc(var(--o) * var(--o) * 6px - 34px)) rotate(calc(var(--o) * 3deg)); filter: drop-shadow(0 0 16px rgba(255,203,5,.7)); z-index: 2; }
.setup-ov.st-bench .st-card.sel .st-check { opacity: 1; transform: none; }
.setup-ov.st-bench .st-card:not(.sel) img { filter: grayscale(.55) brightness(.72); }
.st-actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; transition: opacity .3s; }
.st-count { font-weight: 800; color: rgba(255,255,255,.8); }
.st-ok { display: inline-flex; align-items: center; gap: 6px; }
.setup-ov.done .st-actions, .setup-ov.done .cs-title, .setup-ov.done .cs-sub { opacity: 0; }
.setup-ov.st-bench.done .st-card { pointer-events: none; transition: transform .5s cubic-bezier(.5,0,.7,.4), opacity .45s; }
.setup-ov.st-bench.done .st-card:not(.sel) { opacity: 0; transform: translateY(40px) scale(.85); }
.setup-ov.st-bench.done .st-card.sel { opacity: 0; transform: translateY(-55vh) scale(.6); transition-delay: calc(var(--i) * 40ms); }
@media (prefers-reduced-motion: reduce) { .setup-ov .st-card { transition: none; } }
/* A card's tooltip over the setup stage: just the explanation — the card is already face up in the fan. */
body:has(.setup-ov) #preview { z-index: 45; width: min(340px, calc(100vw - 16px)); }
body:has(.setup-ov) #preview > img { display: none; }
#preview .pv-name { margin: 0 0 6px; font-family: "Baloo 2", sans-serif; font-size: 19px; line-height: 1.1; color: var(--navy); }
#preview .explain .pv-name + h4 { margin-top: 0; }
.setup-ov.st-active .st-card.armed { transform: translateY(calc(var(--o) * var(--o) * 6px - 26px)) rotate(calc(var(--o) * 3deg)) scale(1.08); z-index: 3; filter: drop-shadow(0 0 18px rgba(255,203,5,.75)); }

/* ---------- Narrow screens: the header must not be wider than the phone (it made every overlay off-centre) ---------- */
@media (max-width: 700px) {
  header:not(.start-hero) { height: auto; min-height: var(--header-h); flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; }
  header nav { gap: 6px; margin-left: auto; }
  /* Icon-only buttons; the label stays for screen readers. */
  header nav button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  header nav button { padding-left: 9px; padding-right: 9px; }
  .brand .logo { height: 32px; }
  .brand .title { font-size: 18px; }
  /* The header is two rows here, so Gary's hand no longer rises into it (it would cover the buttons). */
  #opp-hand { margin-top: calc(var(--ohand-w) * 1.396 * .48); }
}

/* Phones: the coin stage stacks — the coin on top, Heads and Tails side by side under it (three across is ~520px). */
@media (max-width: 560px) {
  .cs-title { font-size: 25px; }
  .cs-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .coin-ov.stage .coin-scene { grid-column: 1 / -1; grid-row: 1; justify-self: center; height: 210px; }
  .cs-side { min-height: 0; padding: 10px 6px; }
  .cs-side.win { transform: scale(1.03); }
}

/* ======================================================================================================
   Redesign: the game's own objects (cards, coins, Energy symbols) and type carry the UI — no decorative
   icons, no boxed tiles, no gradient pills. Selection is shown by light, lift and a yellow underline.
   ====================================================================================================== */

/* ---- Classic / Modern: each era is a fan of its own cards ---- */
.format-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 10px 0 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.ftab { position: relative; display: flex; align-items: flex-end; gap: 18px; padding: 16px 20px 18px; border: 0; border-radius: 0;
  background: none; color: rgba(255,255,255,.55); box-shadow: none; transition: color .2s; }
.ftab::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 4px; border-radius: 4px 4px 0 0; background: var(--yellow);
  transform: scaleX(0); transition: transform .3s cubic-bezier(.3,.7,.3,1); }
.ftab:hover { background: none; color: rgba(255,255,255,.82); }
.ftab.on { background: none; color: #fff; box-shadow: none; border: 0; }
.ftab.on::after { transform: scaleX(1); }
.ftab:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; border-radius: 10px; }
.ftab .era-fan { position: relative; display: block; flex: none; width: 164px; height: 80px; }
.era-fan img { position: absolute; left: 50%; bottom: 0; width: 52px; border-radius: 4px; box-shadow: 0 5px 12px rgba(0,0,0,.55);
  transform-origin: 50% 115%; filter: grayscale(.75) brightness(.65); transition: transform .35s cubic-bezier(.3,.7,.3,1.25), filter .3s; }
.era-fan img:nth-child(1) { transform: translateX(-50%) translateX(-18px) rotate(-10deg); }
.era-fan img:nth-child(2) { transform: translateX(-50%) translateY(-3px); z-index: 1; }
.era-fan img:nth-child(3) { transform: translateX(-50%) translateX(18px) rotate(10deg); }
.ftab:hover .era-fan img { filter: grayscale(.3) brightness(.85); }
.ftab.on .era-fan img { filter: none; }
.ftab.on .era-fan img:nth-child(1) { transform: translateX(-50%) translateX(-34px) rotate(-16deg); }
.ftab.on .era-fan img:nth-child(2) { transform: translateX(-50%) translateY(-12px); }
.ftab.on .era-fan img:nth-child(3) { transform: translateX(-50%) translateX(34px) rotate(16deg); }
.ftab .era-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-bottom: 2px; }
.era-text b { font-family: "Baloo 2", sans-serif; font-size: 30px; font-weight: 800; line-height: .95; }
.ftab.on .era-text b { color: var(--yellow); }
.era-text small { font-size: 13px; line-height: 1.35; opacity: .85; }

/* ---- The chosen era's rules, as numbers ---- */
.rule-strip { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 28px; margin: 0 0 28px; padding: 18px 20px 0; }
.rule-strip .rule { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; column-gap: 8px; }
.rule-strip .rule b { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 26px; line-height: 1; color: var(--yellow); text-align: center; }
.rule-strip .rule span { margin: 0; font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.8); }
.rule-strip .rule.wide span { grid-column: 2; color: rgba(255,255,255,.6); }

/* ---- Deck tiles: no badge, no check — the chosen one lifts and gets a yellow edge ---- */
.deck::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 3; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.3,.7,.3,1); }
.deck.sel { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.55); }
.deck.sel::after { transform: scaleX(1); }

/* ---- Start bar ---- */
.matchup { gap: 14px; }
.matchup .vs { background: none; transform: none; padding: 0 2px; border-radius: 0; font-family: "Baloo 2", sans-serif; font-style: italic;
  font-weight: 800; font-size: 26px; line-height: 1; color: rgba(255,255,255,.3); }
.matchup .side.opp b { color: #fff; }
button.textlink { background: none; border: 0; border-radius: 4px; padding: 6px 4px; color: rgba(255,255,255,.85); font-weight: 700;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 4px; text-decoration-thickness: 2px; }
button.textlink:hover { color: #fff; text-decoration-color: var(--yellow); }
button.textlink:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
#btn-start { padding: 10px 22px; font-size: 15px; }

/* ---- Coin toss: the two coins are the choices, no boxes ---- */
.cs-side, .cs-side.h, .cs-side.t { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 8px 6px; min-height: 0; }
.cs-side:has(.call-btn):hover { background: none; border: 0; transform: none; }
.cs-side .mini-face { transition: transform .3s cubic-bezier(.3,.7,.3,1.3), filter .3s; }
.call-btn .mini-face { width: 92px; height: 92px; }
.cs-side:has(.call-btn):hover .mini-face, .call-btn:focus-visible .mini-face { transform: translateY(-8px) rotate(-8deg) scale(1.06); filter: drop-shadow(0 12px 18px rgba(255,203,5,.35)); }
.call-btn:focus-visible { outline: none; }
.call-btn:focus-visible .cs-label { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 5px; }
.cs-side.win { background: none; box-shadow: none; transform: none; }
.cs-side.win .mini-face { transform: scale(1.1); filter: drop-shadow(0 0 22px rgba(255,203,5,.75)); }
.cs-side.win .cs-label { color: var(--yellow); }
.cs-side.lose { opacity: .3; transform: none; }
.cs-side.pick { box-shadow: none; border: 0; }
.cs-side.pick .cs-label { color: var(--yellow); }
.cs-key { border: 0; padding: 0; color: rgba(255,255,255,.62); font-weight: 700; }
@media (max-width: 560px) { .cs-side.win { transform: none; } .call-btn .mini-face { width: 76px; height: 76px; } }

/* ---- In-game "Modern" tag: a word, not a purple pill ---- */
.rules-chip { background: none !important; border: 0 !important; padding: 0 !important; margin-left: 8px; color: rgba(255,255,255,.55) !important;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: none !important; }

/* ---- Your move: a quiet list; Gary's rating is a number and a hairline meter ---- */
#tips { list-style: none; padding: 0; margin: 0 0 10px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
#tips li { margin: 0 0 3px; }
#tips li:first-child { color: var(--ink); font-weight: 600; }
#actions { gap: 12px; }
.act-group { gap: 0; }
.act-head { margin: 0 0 3px; padding: 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.act, .act.k-attack, .act.k-trainer, .act.k-energy { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  padding: 7px 8px 10px; border: 0; border-radius: 8px; background: none; box-shadow: none; text-align: left;
  font-size: 13px; font-weight: 700; color: var(--ink); overflow: visible; }
.act-group .act + .act::before { content: ''; position: absolute; left: 8px; right: 8px; top: 0; height: 1px; background: var(--line); pointer-events: none; }
.act:hover { background: #eef3fb; box-shadow: none !important; }
.act:focus-visible { outline: 2px solid var(--you); outline-offset: -2px; }
.act .lead { display: grid; place-items: center; width: 26px; height: 26px; overflow: hidden; color: var(--navy); }
.act .lead .ei { width: 22px; height: 22px; }
.act .lead.thumb img { display: block; width: 22px; height: 31px; object-fit: cover; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.act .lbl { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.act .note { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.act .rate { display: flex; align-items: center; gap: 6px; }
.act .pct { font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.act .pick { align-self: flex-start; margin-top: 2px; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #7a5d00; background: rgba(255,203,5,.32); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.act.best .pct { color: #7a5d00; }
.act .track { position: absolute; left: 44px; right: 8px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(29,35,32,.07); overflow: hidden; }
.act .track i { display: block; height: 100%; border-radius: 2px; background: #a7afc0; transition: width .4s ease; }
.act.best .track i { background: var(--yellow-dark); }
/* Ending the turn is a real button under the list. */
#end-slot .act { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px 12px; border-radius: 10px; background: #eceef3; color: var(--ink); font-size: 14px; position: relative; }
#end-slot .act .pct { color: #545a57; }
#end-slot .act .lead { display: none; }
#end-slot .act .track { left: 12px; right: 12px; bottom: 5px; }
#end-slot .act:hover { background: #e2e6ee; }
#end-slot .act.k-end.go { background: var(--yellow); color: #1d2a5a; }
#end-slot .act.k-end.go .pct, #end-slot .act.k-end.go .pick { color: #1d2a5a; }

/* ---- Choices in the game: a dark sheet like the card stages; cards are the options, words are buttons ---- */
#modal .dialog.sheet { background: rgba(9, 18, 44, .97); color: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); padding: 22px 26px 18px; text-align: center; }
#modal .dialog.sheet h2 { margin: 0 0 4px; font-family: "Baloo 2", sans-serif; font-size: 26px; color: var(--yellow); text-shadow: 2px 2px 0 var(--navy); }
#modal .dialog.sheet p { margin: 0 auto 4px; max-width: 60ch; color: rgba(255,255,255,.82); }
.dialog.sheet .choice-grid { gap: 16px; margin: 16px 0 8px; }
.dialog.sheet .pick-card { padding: 0; border: 0; background: none; border-radius: 8px; }
.dialog.sheet .pick-card img { width: 128px; border-radius: 7px; box-shadow: 0 8px 20px rgba(0,0,0,.55); transition: transform .2s cubic-bezier(.3,.7,.3,1.4), box-shadow .2s; }
.dialog.sheet .choice-grid.small .pick-card img { width: 88px; }
.dialog.sheet .pick-card:hover img, .dialog.sheet .pick-card:focus-visible img { transform: translateY(-8px) scale(1.04); box-shadow: 0 0 0 3px var(--yellow), 0 16px 28px rgba(0,0,0,.6); }
.dialog.sheet .pick-card:focus-visible { outline: none; }
.dialog.sheet .pick-card .sub { color: rgba(255,255,255,.85); }
.choice-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.choice-words.aside { justify-content: flex-end; margin-top: 2px; }
.dialog.sheet .opt-word { min-width: 64px; padding: 9px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; font-weight: 800; }
.dialog.sheet .opt-word:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.dialog.sheet .opt-word:focus-visible, .dialog.sheet button.primary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.dialog.sheet button.primary { padding: 9px 24px; }
body.arena-on #modal .dialog.sheet { box-shadow: 0 -10px 40px rgba(0,0,0,.6); padding: 14px 20px 12px; }
body.arena-on #modal .dialog.sheet h2 { font-size: 22px; }
body.arena-on #modal .dialog.sheet .pick-card img { width: 100px; }

/* Start bar: the matchup is the bar; Gary's name is the deck picker. */
.matchup .side { display: flex; flex-direction: column; min-width: 0; }
.matchup .side.opp select { appearance: none; -webkit-appearance: none; field-sizing: content; max-width: 300px; padding: 0 26px 0 0; border: 0; border-radius: 4px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23ffcb05' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center;
  font-family: "Baloo 2", sans-serif; font-size: 20px; font-weight: 800; line-height: 1.1; color: #fff; text-overflow: ellipsis; cursor: pointer; }
.matchup .side.opp select:hover { color: var(--yellow); }
.matchup .side.opp select:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.matchup .side.opp select option, .matchup .side.opp select optgroup { font-family: Nunito, sans-serif; font-size: 14px; color: var(--ink); background: #fff; }
.start-bar #start-engine { display: flex; flex-direction: column; line-height: 1.15; color: #fff; white-space: nowrap; }
.start-bar #start-engine small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.start-bar #start-engine b { font-size: 14px; }
.start-bar #start-engine .linkish { margin-left: 6px; font-size: 13px; }

/* Tips fold to the first one; the moves get the panel's room (the log gives way first). */
#tips li:not(:first-child):not(.tips-more) { display: none; }
#tips.open li { display: list-item !important; }
#tips .tips-more { margin-top: 2px; }
#tips .tips-more .linkish { font-size: 12px; font-weight: 700; color: var(--blue); padding: 0; }
aside { grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 640px) {
  .format-tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ftab { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 10px 14px; }
  .ftab::after { left: 10px; right: 10px; }
  .ftab .era-fan { width: 100px; height: 64px; }
  .era-fan img { width: 42px; }
  .ftab.on .era-fan img:nth-child(1) { transform: translateX(-50%) translateX(-27px) rotate(-16deg); }
  .ftab.on .era-fan img:nth-child(3) { transform: translateX(-50%) translateX(27px) rotate(16deg); }
  .era-text b { font-size: 24px; }
  .era-text small { font-size: 12px; }
  .rule-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 14px 10px 0; }
  .rule-strip .rule { grid-template-columns: 20px minmax(0, 1fr); column-gap: 6px; }
  .rule-strip .rule b { font-size: 21px; }
  .rule-strip .rule span { font-size: 12px; }
}

/* Review fixes. */
/* Matchup and engine line shrink with the bar instead of pushing it off a phone screen; long names get an ellipsis. */
.matchup { min-width: 0; max-width: 100%; }
.matchup .side.you { flex: 0 1 auto; min-width: 0; }
.matchup .side.you b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .matchup .side.you, .matchup .side.opp { flex: 1 1 0; } }
.matchup .side.opp { flex: 1 1 0; min-width: 0; }
.matchup .side.opp select { min-width: 0; max-width: min(300px, 100%); overflow: hidden; white-space: nowrap; }
.start-bar #start-engine { align-items: flex-start; min-width: 0; max-width: 100%; }
.start-bar #start-engine > span { display: flex; align-items: baseline; min-width: 0; max-width: 100%; }
.start-bar #start-engine b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-bar #start-engine .linkish { flex: none; }
@media (max-width: 1000px) { .start-bar .matchup { flex: 1 1 100%; } }
@media (max-width: 700px) { .bar-actions .textlink { flex: none; white-space: nowrap; } }
/* Choice sheet during an attack: centred text, and small card grids stay small. */
body.arena-on #modal .dialog.sheet p { margin: 0 auto 6px; }
body.arena-on #modal .dialog.sheet .choice-grid.small .pick-card img { width: 76px; }
/* Phones and tablets: the move panel fits its content and the log scrolls on its own. */
@media (max-width: 900px) { aside { grid-template-rows: auto auto; } #actions { flex: none; } #log { max-height: min(50vh, 420px); } }
/* Forced colours (Windows high contrast): the chosen deck still shows. */
@media (forced-colors: active) { .deck.sel { outline: 3px solid Highlight; outline-offset: 3px; } .ftab.on { outline: 2px solid Highlight; } }

/* Language on the home page (the header is under the start screen there): the same switch, drawn for the dark page. */
.start-lang { position: absolute; top: 16px; right: 16px; z-index: 3; border: 1px solid rgba(255,255,255,.18); background: rgba(9,18,44,.85); }
.start-lang button { background: transparent; color: rgba(255,255,255,.7); padding: 6px 12px; }
.start-lang button:hover { color: #fff; }
.start-lang button.on { background: var(--yellow); color: #1d2a5a; }
.start-lang button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
@media (max-width: 640px) { .start-lang { top: 10px; right: 10px; } .start-lang button { padding: 5px 10px; font-size: 13px; } }

/* The coach's line is signed by the Professor (Gary is only the opponent). */
#coach-msg .coach-who { margin-right: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- The macOS app: no title bar. The traffic lights sit over the header's left end, and the window is
   dragged by the header (and by a strip along the top of the home screen). ---------- */
.app-drag { display: none; }
html.in-app .app-drag { display: block; position: absolute; top: 0; left: 0; right: 0; height: 46px; z-index: 2; }
html.in-app header:not(.start-hero) { padding-left: 92px; -webkit-user-select: none; user-select: none; }
html.in-app .start-lang { top: 12px; }
html.in-app body { -webkit-user-select: none; user-select: none; } /* an app, not a document: no text selection while dragging cards */
html.in-app input, html.in-app textarea { -webkit-user-select: text; user-select: text; }

/* Japanese: the Latin display fonts have no kana/kanji, so the system's Japanese fonts take over. */
html:lang(ja) { font-family: Nunito, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif; }
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3, html:lang(ja) .title, html:lang(ja) .over-title { font-family: "Baloo 2", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-weight: 800; }
.lang button { min-width: 36px; }

/* ---------- Settings: a dark sheet like the game's stages. Three words pick Gary's engine (underlined in yellow),
   only that engine's details show below, and the rest are plain rows with switches; hairlines instead of boxes. ---------- */
#settings .dialog.settings { max-width: 640px; padding: 22px 28px 14px; background: rgba(9, 18, 44, .97); color: #fff;
  border: 1px solid rgba(255,255,255,.08); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.6);
  scrollbar-color: rgba(255,255,255,.2) transparent; }
#settings h2 { margin: 0 0 2px; font-family: "Baloo 2", sans-serif; font-size: 28px; line-height: 1.1; color: var(--yellow); text-shadow: 2px 2px 0 var(--navy); }
#settings .close { top: 18px; right: 18px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: rgba(255,255,255,.6); }
#settings .close:hover { background: rgba(255,255,255,.08); color: #fff; }
#settings .close:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.set-sec { padding: 16px 0 4px; }
.set-sec + .set-sec { border-top: 1px solid rgba(255,255,255,.08); }
.set-sec h3 { margin: 0 0 10px; font-family: Nunito, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }

/* Engine: the three choices are words with a small note under them. */
.eng-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid rgba(255,255,255,.1); }
.eng-tab { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 6px 4px 12px; cursor: pointer; color: rgba(255,255,255,.55); transition: color .15s; }
.eng-tab input { position: absolute; opacity: 0; pointer-events: none; }
.eng-tab b { font-family: "Baloo 2", sans-serif; font-size: 21px; font-weight: 800; line-height: 1.1; }
.eng-tab small { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eng-tab::after { content: ''; position: absolute; left: 4px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.3,.7,.3,1); }
.eng-tab:hover { color: rgba(255,255,255,.85); }
.eng-tab.on { color: #fff; }
.eng-tab.on::after { transform: none; }
.eng-tab.off { opacity: .4; cursor: not-allowed; }
.eng-tab:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: -2px; border-radius: 6px; }
.eng-desc { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.72); }
.eng-warn { margin: 8px 0 0; font-size: 13px; line-height: 1.45; font-weight: 700; color: #ffd466; }
.eng-small { margin: 6px 0 0; font-size: 12.5px; color: rgba(255,255,255,.5); }

/* Jev's key: one line, the field underlined. */
.key-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.key-row input { flex: 1; min-width: 0; font: inherit; font-size: 14px; color: #fff; background: rgba(255,255,255,.06); border: 0;
  border-bottom: 2px solid rgba(255,255,255,.25); border-radius: 8px 8px 0 0; padding: 8px 10px; }
.key-row input::placeholder { color: rgba(255,255,255,.4); }
.key-row input:focus { outline: none; border-bottom-color: var(--yellow); background: rgba(255,255,255,.09); }
.key-row button { flex: none; padding: 8px 16px; }

/* Local models: a list split by hairlines; the one in use is lit, not boxed. */
.m-list { list-style: none; margin: 12px 0 0; padding: 0; }
.m-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; }
.m-row > p, .m-row > .m-bar { grid-column: 1 / -1; }
.m-row + .m-row { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.m-row.on { background: rgba(255,255,255,.06); box-shadow: none; }
.m-row.on + .m-row { box-shadow: none; }
.m-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.m-head b { font-size: 15px; }
.m-row.on .m-head b { color: var(--yellow); }
.m-head em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.m-meta { font-size: 12px; color: rgba(255,255,255,.5); }
.m-row > p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.62); }
.m-row > p.m-err { color: #ff9a8a; word-break: break-word; }
.m-bar { height: 3px; margin-top: 8px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.m-bar i { display: block; height: 100%; background: var(--yellow); transition: width .8s; }
.m-side { justify-self: end; }
.m-act { padding: 4px 12px; font-size: 13px; font-weight: 800; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; }
.m-act:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
.m-act:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.m-state { display: inline-block; padding: 4px 0; font-size: 13px; font-weight: 800; color: rgba(255,255,255,.7); }
.m-state.ok { color: #6fdc96; }
.m-state.ok::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(111,220,150,.18); }
button.textlink.m-stop { margin-top: 4px; padding-left: 0; font-size: 13px; color: rgba(255,255,255,.6); }

/* Rows with a label on the left and its control on the right. */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14.5px; color: rgba(255,255,255,.88); cursor: pointer; }
.set-row + .set-row { border-top: 1px solid rgba(255,255,255,.06); }
div.set-row { cursor: default; }
.set-row input[role=switch] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 24px; margin: 0;
  border-radius: 99px; background: rgba(255,255,255,.18); cursor: pointer; transition: background .18s; }
.set-row input[role=switch]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .2s cubic-bezier(.3,.7,.3,1.2); }
.set-row input[role=switch]:checked { background: var(--yellow); }
.set-row input[role=switch]:checked::after { transform: translateX(16px); background: #1d2a5a; }
.set-row input[role=switch]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* Damage dice: the two real dice; the chosen one is lit and underlined. */
.dice-pick { display: flex; gap: 6px; flex: none; }
.dice-pick label { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 8px 6px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 800; color: rgba(255,255,255,.5); opacity: .7; transition: opacity .15s, color .15s; }
.dice-pick input { position: absolute; opacity: 0; pointer-events: none; }
.dice-pick .die { width: 26px; height: 26px; transition: transform .2s cubic-bezier(.3,.7,.3,1.4); }
.dice-pick .die.num { font-size: 16px; }
.dice-pick label::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px; background: var(--yellow); transform: scaleX(0); transition: transform .2s; }
.dice-pick label:hover { opacity: 1; }
.dice-pick label:has(input:checked) { opacity: 1; color: #fff; }
.dice-pick label:has(input:checked)::after { transform: none; }
.dice-pick label:has(input:checked) .die { transform: rotate(-8deg); }
.dice-pick label:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 1px; }

@media (max-width: 560px) {
  #settings .dialog.settings { padding: 20px 18px 12px; }
  .eng-tab b { font-size: 18px; }
  .key-row { flex-direction: column; align-items: stretch; }
  .set-row { font-size: 14px; }
}
#settings .dialog.settings:focus { outline: none; }

/* The hosted web version: the CPU engine only, and the way to the macOS app for Kev and Jev. */
.eng-mac { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.86); }
a.eng-mac-link { display: inline-block; margin: 12px 0 6px; padding: 9px 18px; border-radius: 10px; border: 1px solid var(--yellow-dark);
  background: var(--yellow); color: #1d2a5a; font-weight: 800; text-decoration: none; }
a.eng-mac-link:hover { filter: brightness(1.06); }
a.eng-mac-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }