/* SI Game Academy — PLAYFUL design system (Johnny directive 2026-10-13).
   NOT the professional SI navy/gold template. Bright game palette, chunky rounded
   shapes, sticker badges, press-down buttons, path maps, XP bars, confetti.
   transform/opacity animations only. v=20261013-3 */
:root{
 --purple:#6c3ce9;--purple-deep:#4620b8;--pink:#ff5da2;--sun:#ffc21c;--sun-deep:#f59e0b;
 --sky:#2fb9f0;--sky-soft:#d9f3ff;--coral:#f4502f;--mint:#12c98d;--mint-deep:#07976a;
 --bg:#fff6e0;--ink:#2b2140;--mut:#6a5f8a;--card:#ffffff;--line:#e9dcff;--radius:22px;
 --shadow:0 6px 0 rgba(43,33,64,.14);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;
 background-image:radial-gradient(circle at 12% 8%,#ffe9a8 0 60px,transparent 61px),radial-gradient(circle at 92% 22%,#ffd7ec 0 80px,transparent 81px),radial-gradient(circle at 85% 88%,#c9f2ff 0 70px,transparent 71px);background-attachment:fixed}
a{color:#4a22b8;font-weight:700}
h1{font-size:clamp(32px,6.5vw,52px);line-height:1.08;margin:.2em 0;font-weight:900;letter-spacing:-.5px}
h2{font-size:clamp(24px,4.5vw,32px);color:var(--purple-deep);font-weight:900;margin:.4em 0}
h3{color:var(--ink);font-weight:800}
.wrap{max-width:1060px;margin:0 auto;padding:0 18px}
/* Header — purple game bar with star sparkles */
header.site{background:linear-gradient(90deg,var(--purple-deep),var(--purple) 55%,#8a4dff);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 4px 0 rgba(43,33,64,.18);
 background-image:radial-gradient(circle,#ffffff55 1.5px,transparent 1.6px),linear-gradient(90deg,var(--purple-deep),var(--purple) 55%,#8a4dff);background-size:26px 26px,100% 100%}
header.site .wrap{display:flex;align-items:center;gap:12px;padding:12px 18px;flex-wrap:wrap}
.logo{font-weight:900;font-size:21px;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.logo span{color:var(--sun)}
.logo:hover{animation:wobble .5s ease}
nav.main{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
nav.main a{color:#fff;text-decoration:none;padding:10px 13px;border-radius:999px;font-weight:800;font-size:15px;min-height:44px;display:inline-flex;align-items:center;background:rgba(255,255,255,.14)}
nav.main a:hover{background:var(--sun);color:var(--ink);transform:translateY(-2px)}
/* Chunky press-down buttons — every class has an explicit background (button-face rule) */
.btn{appearance:none;-webkit-appearance:none;background:var(--sun);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:13px 22px;font-size:17px;font-weight:900;cursor:pointer;text-decoration:none;display:inline-block;min-height:54px;text-align:center;box-shadow:0 5px 0 var(--ink);transition:transform .08s ease,box-shadow .08s ease,filter .15s ease}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn-coral{appearance:none;-webkit-appearance:none;background:var(--coral);color:#fff}
.btn-teal{appearance:none;-webkit-appearance:none;background:var(--mint);color:#04382a}
.btn-sky{appearance:none;-webkit-appearance:none;background:var(--sky);color:#062a3d}
.btn-pink{appearance:none;-webkit-appearance:none;background:var(--pink);color:#fff}
.btn-purple{appearance:none;-webkit-appearance:none;background:var(--purple);color:#fff}
.btn-ghost{appearance:none;-webkit-appearance:none;background:#fff;color:var(--ink)}
.btn-ghost-light{appearance:none;-webkit-appearance:none;background:transparent;color:#fff;border-color:#fff;box-shadow:0 5px 0 rgba(255,255,255,.6)}
/* Hero — rainbow game gradient + floating decorations */
.hero{background:linear-gradient(130deg,var(--purple) 0%,var(--pink) 52%,#ff8a3d 100%);color:#fff;padding:46px 0 42px;position:relative;overflow:hidden;border-bottom:6px solid var(--ink)}
.hero p.lede{font-size:20px;color:#fff;max-width:660px;font-weight:600}
.hero h1{text-shadow:0 3px 0 rgba(43,33,64,.35)}
.kicker{color:var(--sun);text-transform:uppercase;letter-spacing:2.5px;font-weight:900;font-size:13px;text-shadow:0 2px 0 rgba(43,33,64,.4)}
.floaty{position:absolute;font-size:44px;opacity:.9;animation:floaty 5s ease-in-out infinite;pointer-events:none}
.floaty.f2{animation-delay:1.2s;font-size:34px}.floaty.f3{animation-delay:2.1s;font-size:54px}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(8deg)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg) scale(1.04)}75%{transform:rotate(3deg) scale(1.04)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(255,194,28,.75)}100%{box-shadow:0 0 0 16px rgba(255,194,28,0)}}
.searchbox{position:relative;max-width:640px;margin:22px 0 8px}
.searchbox input{width:100%;padding:18px 20px;font-size:19px;border-radius:999px;border:3px solid var(--ink);min-height:62px;box-shadow:var(--shadow)}
.dropdown{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:18px;box-shadow:0 12px 32px rgba(43,33,64,.3);overflow:hidden;display:none;z-index:60}
.dropdown.open{display:block}
.dropdown button{appearance:none;-webkit-appearance:none;background:#fff;width:100%;text-align:left;padding:14px 16px;border:none;border-bottom:1px solid var(--line);font-size:16px;cursor:pointer;min-height:48px;font-weight:700}
.dropdown button:hover,.dropdown button.sel{background:#fff3c4}
/* Game tiles / collectible cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:18px 0 30px}
.card{background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:transform .15s ease}
.card:hover{transform:translateY(-4px) rotate(-.4deg)}
.card .emo{font-size:46px;line-height:1.1}
.world-tile{color:#fff;border:3px solid var(--ink)}
.world-tile h3,.world-tile p{color:#fff}
.world-tile .btn{box-shadow:0 5px 0 rgba(43,33,64,.85)}
/* Stickers / badges */
.badge{display:inline-block;background:var(--mint);color:#04382a;font-weight:900;font-size:12px;padding:5px 12px;border-radius:999px;letter-spacing:.4px;border:2px solid var(--ink);transform:rotate(-3deg);box-shadow:0 2px 0 rgba(43,33,64,.35)}
.badge-gold{background:var(--sun);color:var(--ink)}
.badge-soft{background:#efe9ff;color:var(--purple-deep);transform:none;border-color:var(--purple)}
.entry{border-top:3px dashed var(--line);padding:18px 0}.entry:first-of-type{border-top:none}
.steps li{margin:7px 0}
/* Controller walkthrough — animated step highlighting */
.ctrl{background:var(--ink);color:#f2edff;border:3px solid var(--ink);border-radius:16px;padding:14px 16px;margin:12px 0;font-size:15px;box-shadow:var(--shadow)}
.ctrl b{color:var(--sun)}
.ctrl .cseq{display:block;padding:7px 10px;border-radius:10px;margin:4px 0;transition:background .3s ease,color .3s ease}
.ctrl .cseq.active{background:var(--sun);color:var(--ink);font-weight:800;animation:wobble .45s ease}
.ctrl .cseq.active b{color:var(--purple-deep)}
.keycap{display:inline-block;background:#fff;color:var(--ink);border-radius:8px;padding:1px 9px;font-weight:900;margin:0 2px;border:2px solid var(--ink);border-bottom-width:4px}
.pill{display:inline-block;background:#fff;border-radius:999px;padding:8px 14px;font-weight:800;font-size:15px;margin:3px;cursor:pointer;border:3px solid var(--ink);min-height:44px;box-shadow:0 3px 0 rgba(43,33,64,.5);transition:transform .1s ease}
.pill:hover{transform:translateY(-2px)}
.pill.on{border-color:var(--ink);background:var(--sun)}
section{padding:28px 0}
.strip{background:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:22px;margin:18px 0;box-shadow:var(--shadow)}
.price{font-size:36px;font-weight:900;color:var(--purple-deep)}
table.compare{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:3px solid var(--ink);border-radius:16px;overflow:hidden}table.compare th,table.compare td{border-bottom:1px solid var(--line);padding:12px;text-align:left}table.compare th{background:#efe9ff}
footer{background:var(--purple-deep);color:#ddd2ff;padding:32px 0;font-size:14px;border-top:6px solid var(--ink)}footer a{color:var(--sun)}
.disclaimer{font-size:12.5px;color:#b7a8e8;max-width:900px}
input,select,textarea{font-size:17px;padding:13px;border-radius:14px;border:3px solid #c9b8ff;min-height:52px;width:100%;background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--purple);outline:3px solid #ffe27a;outline-offset:1px}
label{font-weight:800;display:block;margin:12px 0 5px}
/* Chat */
.chatlog{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:16px;min-height:220px;max-height:480px;overflow:auto}
.msg{border-radius:18px;padding:12px 15px;margin:10px 0;max-width:88%;border:2px solid rgba(43,33,64,.18)}
.msg.tommy{background:var(--sky-soft)}
.msg.you{background:#ffeec2;margin-left:auto}
/* XP / progress meters — striped candy bars that visibly fill */
.meter{background:#efe9ff;border:2px solid var(--ink);border-radius:999px;height:22px;overflow:hidden}
.meter i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--mint) 0 14px,#3fe0ab 14px 28px);border-radius:999px;transition:width .8s cubic-bezier(.2,1.4,.4,1)}
.meter.sun i{background:repeating-linear-gradient(45deg,var(--sun) 0 14px,#ffd95e 14px 28px)}
/* Level path map — winding quest nodes */
.pathmap{position:relative;padding:14px 6px 6px}
.pathmap:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:8px;margin-left:-4px;background:repeating-linear-gradient(180deg,var(--sun) 0 16px,#ffe9a8 16px 32px);border-radius:99px;opacity:.8}
.pnode{position:relative;width:78px;height:78px;border-radius:50%;border:4px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;background:#fff;margin:14px auto;z-index:1;box-shadow:0 5px 0 rgba(43,33,64,.5);text-decoration:none;color:var(--ink)}
.pnode small{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800;white-space:nowrap;color:var(--mut)}
.pnode.done{background:var(--mint)}
.pnode.next{background:var(--sun);animation:pulse-ring 1.6s ease-out infinite}
.pnode.later{background:#efe9ff;color:var(--mut)}
.pnode:nth-child(odd){transform:translateX(-64px)}.pnode:nth-child(even){transform:translateX(64px)}
.pnode:hover{filter:brightness(1.07)}
/* Confetti + star burst (JS-spawned, transform/opacity only) */
.confetti{position:fixed;width:12px;height:12px;z-index:999;pointer-events:none;border-radius:3px;animation:confetti-fall 1.15s ease-in forwards}
.confetti.star{background:transparent!important;font-size:18px;animation:confetti-fall 1.15s ease-in forwards}
@keyframes confetti-fall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx,0px),var(--dy,240px)) rotate(560deg);opacity:0}}
/* Tommy / coach bubble — bobbing character */
#tommyBubble{position:fixed;right:16px;bottom:16px;z-index:90}
#tommyBubbleBtn{appearance:none;-webkit-appearance:none;background:var(--coral);color:#fff;border:3px solid var(--ink);border-radius:999px;padding:14px 20px;font-size:17px;font-weight:900;box-shadow:0 6px 0 var(--ink);cursor:pointer;min-height:58px;animation:bob 2.6s ease-in-out infinite}
#tommyBubbleBtn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
#tommyPanel{position:fixed;right:16px;bottom:88px;width:min(392px,calc(100vw - 32px));max-height:72vh;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:0 16px 44px rgba(43,33,64,.4);display:none;flex-direction:column;overflow:hidden;z-index:91}
#tommyPanel.open{display:flex}
#tommyPanel .thead{background:linear-gradient(90deg,var(--purple),var(--pink));color:#fff;padding:14px 16px;font-weight:900}
#tommyPanel .thead .avatar{display:inline-block;animation:bob 2.2s ease-in-out infinite;font-size:22px}
#tommyPanel .tlog{padding:12px;overflow:auto}
#tommyPanel .trow{display:flex;gap:8px;padding:10px;border-top:2px dashed var(--line)}
#tommyPanel input{flex:1}
.wave{display:inline-block;animation:wobble 1.8s ease-in-out infinite;transform-origin:70% 70%}
.small{font-size:14px;color:var(--mut)}
/* Parents: calmer but warm — same family, lower volume */
body.calm{background:#fdf4ff}
body.calm .hero{background:linear-gradient(130deg,#7a53d8,#c06bd8)}
body.calm .card:hover{transform:none}
body.calm h2{color:#5b34b8}
@media(max-width:640px){nav.main{margin-left:0}.btn{width:100%} .price{font-size:30px}.pnode:nth-child(odd){transform:translateX(-38px)}.pnode:nth-child(even){transform:translateX(38px)}}
@media(prefers-reduced-motion:reduce){.floaty,#tommyBubbleBtn,.pnode.next,.wave{animation:none}}
/* Play-Along session screen */
.pa-banner{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--coral);color:#fff;font-weight:900;text-align:center;padding:12px 14px;font-size:17px;border-bottom:4px solid var(--ink);box-shadow:0 6px 18px rgba(43,33,64,.35);display:none}
#paVideo{width:100%;border-radius:16px;border:3px solid var(--ink);background:#000}
#paThumb{width:180px;max-width:50%;border-radius:12px;border:3px solid var(--sun);display:none}
.pa-face{font-size:64px;display:inline-block;animation:bob 2s ease-in-out infinite}
.strip.live-now{border-color:var(--coral);animation:pulse-ring 1.8s ease-out infinite}

/* Print: clean one-page cheat sheets (game pages) — no nav, no bubble, no buttons */
@media print{
  header.site,footer,#tommyBubble,#tommyPanel,.btn,button{display:none !important}
  body{background:#fff !important}
  main.wrap{max-width:100%;padding:0}
  .entry,.strip,.card{break-inside:avoid;box-shadow:none !important;border:1.5px solid #333}
  .cseq{border:1px solid #333;background:#fff !important;animation:none !important}
  a{color:#000;text-decoration:none}
}

/* ===== iPad-first windowing (iPadOS 26 resizable windows) =====
   Breakpoints: 320/430 companion · 744/820 portrait & half-window ·
   1024/1180/1366 landscape. No horizontal scroll; targets >=44px. */
html,body{overflow-x:hidden}
img,canvas,video,iframe{max-width:100%}
.btn,.pill,nav.main a,#tommyBubbleBtn{min-height:44px}
@media (max-width:430px){ /* companion window: answer-first, giant targets */
  body{font-size:18px}
  .wrap{padding:10px}
  .grid{grid-template-columns:1fr !important}
  .btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;font-size:18px;padding:12px 18px}
  input,select,textarea{font-size:18px;min-height:52px}
  h1{font-size:30px} h2{font-size:24px}
  .world-tile{min-height:0}
  #tommyPanel{left:8px;right:8px;width:auto}
}
@media (min-width:744px) and (max-width:1023px){ /* portrait / half window */
  .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
@media (min-width:1024px){ /* landscape: roomier grids + two-pane trackers */
  .wrap{max-width:1180px}
  #trackerMain{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
}
@media (min-width:1180px) and (orientation:landscape){ /* Tommy = persistent side panel */
  #tommyPanel.open{position:fixed;top:0;right:0;bottom:0;left:auto;width:370px;max-height:none;border-radius:0;z-index:60;display:flex;flex-direction:column}
  #tommyPanel.open .tlog{flex:1;max-height:none}
  body.tommy-open{padding-right:370px}
}
@media (min-width:1366px) and (orientation:landscape){ /* nav becomes a left game rail */
  header.site{position:fixed;left:0;top:0;bottom:0;width:216px;z-index:50;overflow-y:auto}
  header.site .wrap{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 12px}
  header.site nav.main{flex-direction:column;align-items:stretch;width:100%}
  body{padding-left:216px}
  .wrap{max-width:1240px}
}

/* ===== LIVE BATTLES (transform/opacity only; reduced-motion collapses to instant) ===== */
.bf-field{position:relative;border-radius:18px;padding:14px;min-height:340px;background:linear-gradient(180deg,#8ec9ee 0%,#bfe3f7 45%,#8fd07a 46%,#6fbf5e 100%);overflow:hidden}
.bf-mon{position:absolute;display:flex;gap:10px;align-items:flex-end;transition:transform .28s ease,opacity .4s ease,filter .3s ease}
.bf-foe{top:16px;right:16px;flex-direction:row-reverse}
.bf-you{bottom:52px;left:16px}
.bf-art{width:110px;height:110px;object-fit:cover;object-position:top center;border-radius:14px;border:3px solid #fff;box-shadow:0 8px 18px rgba(20,30,60,.35);background:#fff}
.bf-you .bf-art{width:150px;height:150px}
.bf-nametile{display:flex;align-items:center;justify-content:center;width:110px;height:110px;border-radius:14px;border:3px solid #fff;background:linear-gradient(135deg,#ffb300,#ff7043);color:#fff;font-weight:900;text-align:center;padding:6px}
.bf-you .bf-nametile{width:150px;height:150px}
.bf-shadow{position:absolute;bottom:-8px;left:10px;right:10px;height:14px;border-radius:50%;background:rgba(20,60,20,.3);z-index:-1}
.bf-plate{background:rgba(255,251,235,.95);border:3px solid #37474f;border-radius:12px;padding:6px 10px;min-width:170px;font-size:14px}
.bf-hp{height:10px;background:#cfd8dc;border-radius:6px;overflow:hidden;margin-top:3px}
.bf-hp-fill{height:100%;background:#43a047;transition:width .45s ease}
.bf-hp-fill.mid{background:#f9a825}.bf-hp-fill.low{background:#e53935}
.bf-pip{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid rgba(0,0,0,.25);vertical-align:-2px;margin-right:2px}
.e-Fire{background:#ef5350}.e-Water{background:#42a5f5}.e-Lightning{background:#ffca28}.e-Grass{background:#66bb6a}.e-Fighting{background:#b07a4f}.e-Psychic{background:#ab47bc}.e-Colorless{background:#e0e0e0}
.bf-mon.lunge-up{transform:translate(26px,-30px) scale(1.05)}
.bf-mon.lunge-down{transform:translate(-26px,30px) scale(.97)}
.bf-mon.hit{animation:bfShake .3s ease}
@keyframes bfShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.bf-mon.faint{filter:grayscale(1);opacity:0;transform:translateY(26px)}
.bf-fx{position:absolute;width:90px;height:90px;border-radius:50%;opacity:0;pointer-events:none;transform:scale(.4);transition:opacity .18s ease,transform .18s ease}
.bf-fx.show{opacity:1;transform:scale(1.15)}
.bf-fx.fx-fire{background:radial-gradient(circle,#fff176 0%,#ff7043 55%,rgba(255,112,67,0) 72%)}
.bf-fx.fx-water{background:radial-gradient(circle,#e3f2fd 0%,#42a5f5 55%,rgba(66,165,245,0) 72%)}
.bf-fx.fx-lightning{background:radial-gradient(circle,#fffde7 0%,#ffca28 55%,rgba(255,202,40,0) 72%)}
.bf-fx.fx-colorless{background:radial-gradient(circle,#fff 0%,#b0bec5 55%,rgba(176,190,197,0) 72%)}
.bf-fx.fx-grass{background:radial-gradient(circle,#f1f8e9 0%,#66bb6a 55%,rgba(102,187,106,0) 72%)}
.bf-fx.fx-fighting{background:radial-gradient(circle,#fff3e0 0%,#b07a4f 55%,rgba(176,122,79,0) 72%)}
.bf-floater{position:absolute;font-weight:900;font-size:30px;color:#c62828;text-shadow:0 2px 0 #fff;animation:bfFloat 1s ease forwards;pointer-events:none}
@keyframes bfFloat{0%{opacity:0;transform:translateY(8px)}20%{opacity:1}100%{opacity:0;transform:translateY(-38px)}}
.bf-side{position:absolute;font-size:13px;background:rgba(255,255,255,.85);border-radius:10px;padding:4px 8px}
.bf-side-foe{top:8px;left:8px}.bf-side-you{bottom:8px;right:8px}
.bf-prize{color:#d7ccc8;font-size:16px}.bf-prize.won{color:#ffb300}
.bf-bench{display:inline-block;background:#eceff1;border-radius:8px;padding:1px 7px;margin:2px 2px 0 0;font-size:12px}
.bf-rail{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.bf-rail span{border:2px solid #b0bec5;border-radius:999px;padding:3px 12px;font-weight:700;font-size:13px;color:#78909c}
.bf-rail span.on{border-color:#6c3ce9;background:#ede7ff;color:#4527a0}
.bf-textbox{border:4px solid #37474f;border-radius:12px;background:#fffde7;padding:12px 14px;font-size:17px;font-weight:600;min-height:56px}
.bf-controls{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bf-victory{background:#fff8e1;border:3px solid #ffb300;border-radius:14px;padding:12px 16px;width:100%}
.bf-duel{background:linear-gradient(180deg,#263238,#37474f);border-radius:18px;padding:14px;color:#eceff1}
.bf-row{display:flex;gap:10px;flex-wrap:wrap;min-height:118px;align-items:center;padding:8px;border-radius:12px}
.bf-row-foe{background:rgba(239,83,80,.12)}
.bf-row-you{background:rgba(102,187,106,.12)}
.bf-mtile{position:relative;width:104px;border-radius:12px;border:3px solid var(--hue);background:#10222e;color:#fff;padding:6px;cursor:pointer;text-align:center;transition:transform .2s ease,opacity .25s ease;font-family:inherit}
.bf-mtile-art{display:block;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--hue),#10222e);margin-bottom:4px}
.bf-mtile.tapped{transform:rotate(10deg);opacity:.75}
.bf-mtile.sel{outline:4px solid #ffd54f;transform:translateY(-6px)}
.bf-pt{position:absolute;bottom:4px;right:6px;background:#000a;border-radius:8px;padding:0 6px;font-weight:900}
.bf-kw{display:block;font-size:11px;color:#ffd54f}
.bf-life{font-size:20px;font-weight:900;padding:6px 2px;cursor:pointer}
.bf-life-foe{text-align:right}
.bf-banner{min-height:28px;font-weight:700;padding:6px 2px;color:#ffe082}
.bf-hand{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.bf-hcard{width:158px;text-align:left;border-radius:12px;border:2px solid #78909c;background:#fffde7;color:#263238;padding:8px;cursor:pointer;font-family:inherit}
.bf-hcard[disabled]{opacity:.45;cursor:not-allowed}
.bf-hcard .small{display:block}
@media (max-width:430px){ .bf-you .bf-art{width:110px;height:110px} .bf-art{width:84px;height:84px} .bf-plate{min-width:138px;font-size:12px} .bf-field{min-height:300px} }
@media (prefers-reduced-motion: reduce){
  .bf-mon,.bf-hp-fill,.bf-fx,.bf-mtile,.bf-floater{transition:none!important;animation:none!important}
  .bf-mon.hit{animation:none}
  .bf-floater{opacity:1;position:static}
}

/* Board Room expansion */
.goboard{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;background:#dcb35c;border:4px solid #8d6e63;border-radius:10px;padding:8px;max-width:430px}
.gocell{aspect-ratio:1;border:1px solid #b08948;background:#eec97e;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.gocell .stone{width:82%;height:82%;border-radius:50%;display:block}
.gocell .stone.bk{background:radial-gradient(circle at 35% 30%,#616161,#111)}
.gocell .stone.wh{background:radial-gradient(circle at 35% 30%,#fff,#bdbdbd);border:1px solid #999}
.domchain{display:flex;flex-wrap:wrap;gap:4px;background:#2e7d32;border-radius:12px;padding:10px;min-height:52px;margin:8px 0}
.domtile{background:#fffde7;border:2px solid #37474f;border-radius:8px;padding:6px 9px;font-weight:900;font-size:16px}
.domtile.small{font-size:13px;padding:3px 6px}
.domhand{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.domok .domtile{outline:3px solid #ffd54f;cursor:pointer}
.domdim{opacity:.55}
.dbwrap{display:inline-block;background:#fff8e1;border:3px solid #6c3ce9;border-radius:12px;padding:10px}
.dbrow{display:flex;align-items:center}
.dbdot{width:12px;height:12px;border-radius:50%;background:#4527a0;flex:none}
.dbedge{background:#d7ccc8;border:none;cursor:pointer;padding:0;flex:none;border-radius:4px}
.dbedge.h{width:44px;height:8px;margin:0 2px}
.dbedge.v{width:8px;height:44px;margin:2px 0 2px 2px}
.dbedge.on{background:#6c3ce9}
.dbbox{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-left:2px}
.dbbox.mine{background:#c8e6c9;border-radius:8px}
.dbbox.theirs{background:#ffcdd2;border-radius:8px}

/* Mind Room expansion */
.klrow{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:10px}
.klcols{display:flex;gap:8px;flex-wrap:wrap}
.klcol{display:flex;flex-direction:column;gap:4px;min-width:64px;background:#f1f8e9;border-radius:10px;padding:6px}
.klcard{display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:66px;border:2px solid #90a4ae;border-radius:9px;background:#fff;font-weight:900;font-size:17px;cursor:pointer;padding:4px}
.klcard.red{color:#c62828}
.klcard.down{background:repeating-linear-gradient(45deg,#6c3ce9,#6c3ce9 6px,#4527a0 6px,#4527a0 12px);color:#fff}
.klcard.empty{background:transparent;border-style:dashed;color:#90a4ae;cursor:default}
.klcard.sel{outline:4px solid #ffd54f}
.klcard.found{background:#e8f5e9}
.kllab{font-size:11px;font-weight:800;color:#607d8b;text-transform:uppercase}
.mjboard{position:relative;height:230px;background:linear-gradient(135deg,#1b5e20,#2e7d32);border-radius:14px;margin-bottom:8px;overflow:hidden}
.mjtile{position:absolute;width:40px;height:50px;border-radius:7px;border:2px solid #a1887f;background:#fff8e1;font-size:21px;cursor:pointer;box-shadow:2px 3px 0 rgba(0,0,0,.35);padding:0}
.mjtile.z1{border-color:#6c3ce9;background:#ede7ff;z-index:3}
.mjtile.glow{outline:3px solid #ffd54f}
.mjtile.sel{outline:4px solid #ff7043}
.mjtile:not(.free){opacity:.82}
.wrword{font-size:34px;font-weight:900;letter-spacing:4px;text-align:center}
.wrparts{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.wrpart{background:#e8f5e9;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700}
.wrpart.lost{background:#ffcdd2;text-decoration:line-through;opacity:.6}
.wrkeys{display:flex;gap:4px;flex-wrap:wrap}
.wrkey{min-width:38px;min-height:44px;border-radius:9px;border:2px solid #6c3ce9;background:#ede7ff;font-weight:900;cursor:pointer;text-transform:uppercase}
.wrkey[disabled]{opacity:.35;cursor:default}

/* Arcade */
.arcgrid{display:grid;gap:3px;margin:8px 0}
.arcgrid.snake{grid-template-columns:repeat(12,1fr);max-width:420px}
.arcgrid.gems{grid-template-columns:repeat(9,1fr);max-width:420px}
.arcgrid.merge{grid-template-columns:repeat(4,64px)}
.arcgrid.memory{grid-template-columns:repeat(4,64px)}
.arcgrid.stack{grid-template-columns:repeat(10,22px)}
.arcgrid.ships{grid-template-columns:repeat(5,52px)}
.acell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#eef3f6;border-radius:7px;font-weight:900;border:2px solid transparent;font-family:inherit}
.acell.snakeb{background:#43a047}
.acell.food{background:#ffecb3}
.acell.tile{background:#fff3e0;font-size:19px}
.acell.tile.t2{background:#ffe082}.acell.tile.t4{background:#ffb74d}.acell.tile.t8{background:#ff8a65}.acell.tile.t16{background:#e57373}.acell.tile.t32{background:#ba68c8}.acell.tile.t64{background:#64b5f6}.acell.tile.t128,.acell.tile.t256,.acell.tile.t512,.acell.tile.t1024,.acell.tile.t2048{background:#ffd54f}
.acell.mem{cursor:pointer;font-size:22px;background:#ede7ff}
.acell.mem.got{background:#c8e6c9}
.acell.gem{cursor:pointer;background:#a1887f;color:#fff}
.acell.gem.open{background:#efebe9;color:#37474f}
.acell.filled{background:#6c3ce9}.acell.falling{background:#ff7043}
.acell.shipc{cursor:pointer;background:#b3e5fc}
.breakcanvas{width:100%;max-width:480px;border-radius:12px;background:#141b2e;touch-action:none}
.clashcard{border:3px solid #90a4ae;border-radius:12px;background:#fff;padding:10px 14px;font-size:19px;font-weight:900;cursor:pointer;margin:3px}
.clashcard.can{border-color:#43a047;box-shadow:0 0 0 3px #c8e6c9}
.clashcard.big{cursor:default}
.clashhand{display:flex;flex-wrap:wrap}
.racetrack{display:flex;flex-wrap:wrap;gap:2px;margin:8px 0}
.racecell{width:34px;height:40px;background:#f1f8e9;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px}

/* ===== Wave 2 games (2026-10-14): Code Cracker, Tower Puzzle, Star Lights,
   Echo Pattern, Dice Quest, Peg Solitaire. Targets >=44px; motion is
   transform/opacity only; reduced-motion collapses it. ===== */
.ccrow{display:flex;align-items:center;gap:6px;margin:6px 0;flex-wrap:wrap}
.ccpeg{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:24px;background:#f5f5f5;border:2px solid #b0bec5;border-radius:50%}
.ccpeg.slot{background:#fff8e1;border-style:dashed}
.ccfb{font-size:15px;margin-left:6px}
.ccpad{display:flex;gap:8px;margin:10px 0}
.ccbtn{width:56px;height:56px;font-size:28px;border-radius:50%;border:3px solid #90a4ae;background:#fff;cursor:pointer;transition:transform .12s ease}
.ccbtn:active{transform:scale(1.15)}
.hnboard{display:flex;gap:10px;margin:10px 0}
.hnpeg{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;min-height:190px;background:#efebe9;border:3px solid #a1887f;border-radius:12px;cursor:pointer;padding:8px 4px;font-family:inherit}
.hnpeg.picked{outline:4px solid #ffd54f}
.hnslot{height:24px;display:flex;justify-content:center;width:100%}
.hndisk{display:inline-flex;align-items:center;justify-content:center;height:22px;border-radius:6px;color:#fff;font-weight:900;font-size:13px;transition:transform .15s ease}
.logrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:330px;margin:10px 0}
.locell{height:54px;font-size:22px;border-radius:10px;border:2px solid #78909c;background:#37474f;color:#cfd8dc;cursor:pointer;transition:opacity .15s ease,transform .15s ease}
.locell.on{background:#ffd54f;border-color:#f9a825;color:#6d4c00}
.locell:active{transform:scale(.93)}
.echoBoard{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:330px;margin:10px 0}
.echopad{min-height:98px;font-size:42px;border-radius:18px;border:3px solid rgba(0,0,0,.25);cursor:pointer;opacity:.45;transition:opacity .18s ease,transform .18s ease}
.echopad.ep0{background:#ef5350}.echopad.ep1{background:#42a5f5}.echopad.ep2{background:#66bb6a}.echopad.ep3{background:#ffee58}
.echopad.flash{opacity:1;transform:scale(1.05)}
.echopad[disabled]{cursor:default}
.dqDice{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.dqdie{width:64px;height:70px;font-size:34px;border-radius:12px;border:3px solid #90a4ae;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:inherit;transition:transform .12s ease}
.dqdie .small{font-size:10px;font-weight:900;color:#78909c}
.dqdie.held{outline:4px solid #ffd54f;transform:translateY(-5px);background:#fff8e1}
.dqCats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.dqcat{min-height:66px;text-align:left;border-radius:12px;border:2px solid #90a4ae;background:#fff;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:2px;font-family:inherit}
.dqcat .dqpts{font-weight:900;color:#2e7d32}
.dqcat.done{opacity:.55;background:#e8f5e9}
.dqcat[disabled]{cursor:default}
.pegboard{margin:10px 0}
.pegrow{display:flex;justify-content:center;gap:8px;margin:6px 0}
.peghole{width:50px;height:50px;border-radius:50%;border:3px solid #a1887f;background:#d7ccc8;font-size:22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s ease,opacity .12s ease;padding:0}
.peghole.has{background:#fff3e0}
.peghole.sel{outline:4px solid #ffd54f;transform:scale(1.1)}
.peghole.target{outline:4px dashed #43a047;background:#e8f5e9}
.peghole.empty{opacity:.55}
@media (prefers-reduced-motion: reduce){
  .ccbtn,.hndisk,.locell,.echopad,.dqdie,.peghole{transition:none!important;animation:none!important}
  .echopad.flash{transform:none}
  .dqdie.held{transform:none}
  .peghole.sel{transform:none}
}