/* Shared look (candy blue): glossy royal-blue cards, gold ribbons, green Play, cream HUD capsules. No web fonts: the heaviest
   rounded system stack plus stroke and shadow fake the juicy lettering. Compaction tiers at the bottom keep every card inside the viewport.
   Original wooden version: D:\AI\tmp\kit_backup_2026-11-02\tpc.css */
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd3ff; font-family: "Arial Rounded MT Bold", "Nunito", "Segoe UI", system-ui, sans-serif; }
canvas { display: block; touch-action: none; }
[hidden] { display: none !important; }
:root { --f: "Arial Rounded MT Bold", "Nunito", "Segoe UI", system-ui, sans-serif; --navy: #0f2f86; --cream: #fff1c9; --gold: #f2b43a; }
html body .card, html body .card *, html body #hud, html body #hud *, html body #hint, html body #flash, html body #title, html body #time, html body #turn,
html body #lv-banner, html body #lv-banner * { font-family: var(--f); }
.card { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, 88vw); padding: 40px 26px 22px; box-sizing: border-box;
  background: radial-gradient(120% 70% at 50% 0%, #3d86ff 0%, rgba(61,134,255,0) 60%), linear-gradient(180deg, #2468e8 0%, #123fae 55%, #0c2f8c 100%);
  border: 5px solid var(--cream); border-radius: 22px; color: #fff; text-align: center; font-weight: 800; z-index: 5;
  box-shadow: inset 0 0 0 4px var(--gold), inset 0 0 34px rgba(120,190,255,.55), 0 7px 0 #a8741c, 0 16px 28px rgba(0,10,60,.45); }
.ribbon { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); padding: 7px 34px 9px; border-radius: 16px; border: 4px solid var(--cream);
  background: linear-gradient(180deg, #ffd45a 0%, #ffb000 48%, #ff8a00 100%); color: #fff; font: 900 26px var(--f); white-space: nowrap; max-width: 96%; box-sizing: border-box;
  -webkit-text-stroke: 5px var(--navy); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(15,47,134,.55);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.65), inset 0 -4px 0 rgba(180,80,0,.35), 0 5px 0 #a8741c, 0 9px 14px rgba(0,0,40,.35); }
.card p { margin: 8px 0; font-size: 18px; text-shadow: 0 2px 0 rgba(8,28,100,.7); } .card .small { font-size: 14px; opacity: .95; }
.big { font: 900 24px var(--f); padding: 10px 46px 12px; margin-top: 10px; border: 4px solid var(--cream); border-radius: 18px; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #7cf06a 0%, #2fc13c 50%, #1f9a2c 100%); -webkit-text-stroke: 4px #0e5a1a; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(10,70,20,.6);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.55), 0 5px 0 #15731f, 0 9px 12px rgba(0,30,10,.35); }
.big:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 2px 0 #15731f; }
.link { display: block; margin: 10px auto 0; background: none; border: 0; color: var(--cream); font: 800 15px var(--f); cursor: pointer; text-decoration: underline; text-shadow: 0 2px 0 rgba(8,28,100,.7); }
.final { font: 900 30px var(--f); margin: 4px 0; text-shadow: 0 3px 0 rgba(8,28,100,.7); }
.final span { font-size: 64px; color: #ffd84a; -webkit-text-stroke: 6px var(--navy); paint-order: stroke fill; text-shadow: 0 5px 0 rgba(8,28,100,.7); }
.pad { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 10px; text-align: left; margin: 10px auto 4px; width: fit-content; max-width: 100%; font-size: 15px;
  text-shadow: 0 2px 0 rgba(8,28,100,.7); }
.pad kbd { font: 900 13px var(--f); color: #fff; min-width: 28px; height: 28px; padding: 0 7px; box-sizing: border-box; border-radius: 14px; display: inline-grid; place-items: center;
  background: linear-gradient(180deg, #5a6478, #2b3345); border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,40,.5); text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.pad b { font: 900 12px var(--f); color: #ffd84a; text-transform: uppercase; letter-spacing: 1px; opacity: 1; }
.pad kbd.k { background: linear-gradient(180deg, #fffdf2, #ffe9a8); color: var(--navy); border: 2px solid var(--gold); border-radius: 9px; box-shadow: 0 3px 0 #a8741c; text-shadow: none; white-space: nowrap; }
.pad kbd.a { background: linear-gradient(180deg, #6fe35c, #1f9a2c); } .pad kbd.b { background: linear-gradient(180deg, #ff7a6e, #d6261c); }
.pad kbd.x { background: linear-gradient(180deg, #6aa3ff, #1c55d6); } .pad kbd.y { background: linear-gradient(180deg, #ffe066, #f2a900); }
.rows { margin: 10px auto; display: grid; gap: 6px; width: 84%; }
.rows div { display: flex; align-items: center; gap: 10px; background: rgba(6,24,90,.55); border-radius: 14px; padding: 4px 12px 4px 8px; font: 900 18px var(--f);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12); }
.rows div.me { background: rgba(120,180,255,.4); box-shadow: 0 0 0 3px var(--gold), inset 0 2px 0 rgba(255,255,255,.25); } .rows div span:last-child { margin-left: auto; }
.rows b { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 0 rgba(0,0,40,.4), inset 0 3px 0 rgba(255,255,255,.4); }
#title { color: #fff; font: 900 22px var(--f); -webkit-text-stroke: 4px var(--navy); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(8,28,100,.5); }
:where(#title) { position: fixed; top: 14px; left: 16px; }
/* layout defaults are zero-specificity (:where) so a page that styles its own #hud/#hint/#flash keeps its layout, whichever stylesheet loads last */
:where(#hud) { position: fixed; top: 12px; left: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; pointer-events: none; padding: 0 8px; box-sizing: border-box; }
body #hud .chip { background: linear-gradient(180deg, #fffdf2 0%, #ffefc0 100%); border: 3px solid var(--gold); border-radius: 999px; box-sizing: border-box;
  padding: 2px clamp(10px, 1.9vh, 16px) 2px 3px; font: 900 clamp(15px, 3.3vh, 26px) var(--f); color: var(--navy); gap: clamp(5px, 1vh, 9px); max-width: 100%;
  box-shadow: 0 3px 0 #a8741c, 0 6px 8px rgba(0,0,40,.25); display: flex; align-items: center; white-space: nowrap; }
body #hud .chip i { font: 900 clamp(11px, 1.9vh, 15px) var(--f); font-style: normal; color: #fff; min-width: clamp(24px, 4.4vh, 34px); height: clamp(24px, 4.4vh, 34px); padding: 0 5px; box-sizing: border-box;
  border-radius: 999px; display: grid; place-items: center; background: linear-gradient(180deg, #6aa3ff, #1c55d6); border: 2px solid #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.45);
  -webkit-text-stroke: 3px rgba(8,28,100,.85); paint-order: stroke fill; }
body #hud .chip b { color: var(--navy); }
body #hud .lv-chip, body #hud .lv-combo { color: #fff; border: 3px solid var(--cream); border-radius: 999px; box-sizing: border-box; padding: 2px clamp(10px, 2vh, 16px); height: auto;
  font: 900 clamp(15px, 3vh, 22px) var(--f); -webkit-text-stroke: 4px var(--navy); paint-order: stroke fill; text-shadow: 0 2px 0 rgba(8,28,100,.5); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 3px 0 rgba(8,28,100,.55); }
body #hud .lv-chip { background: linear-gradient(180deg, #6aa3ff, #1c55d6); }
body #hud .lv-combo { background: linear-gradient(180deg, #ffd45a, #ff8a00); }
body #time { background: linear-gradient(180deg, #fffdf2, #ffefc0); border: 3px solid var(--gold); border-radius: 999px; box-sizing: border-box; padding: 2px 18px; color: var(--navy);
  font: 900 clamp(18px, 3.5vh, 26px) var(--f); box-shadow: 0 3px 0 #a8741c, 0 6px 8px rgba(0,0,40,.25); }
#hint { color: #fff; font: 900 clamp(16px, 3vh, 32px) var(--f); white-space: nowrap; max-width: 94vw; box-sizing: border-box;
  background: linear-gradient(180deg, #4c8dff, #1747c4); border: 3px solid var(--cream); padding: 4px 20px 5px; border-radius: 999px; pointer-events: none;
  -webkit-text-stroke: 4px var(--navy); paint-order: stroke fill; text-shadow: 0 2px 0 rgba(8,28,100,.5); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 4px 0 #0c2f8c, 0 8px 10px rgba(0,0,40,.3); }
#flash:not(:empty) { font: 900 72px var(--f); color: #fff; white-space: nowrap; max-width: 96vw;
  -webkit-text-stroke: 10px var(--navy); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(8,28,100,.6), 0 0 22px rgba(0,0,60,.35); pointer-events: none; z-index: 4; }

/* menu extras that modes.js and levels.js inject later in the head: more specific selectors win */
.card .md-rows { margin: 8px auto 2px; }
.card .md-row > b { font: 900 12px var(--f); color: #ffd84a; opacity: 1; text-shadow: 0 2px 0 rgba(8,28,100,.7); }
.card .md-row.focus > b { color: #fff; }
.card .md-row button, .card .lv-pick button { font: 900 15px var(--f); padding: 7px 12px 8px; border-radius: 999px; border: 3px solid var(--cream); color: #fff; line-height: 1.2;
  background: linear-gradient(180deg, #ffe066 0%, #ffb800 55%, #f08c00 100%); -webkit-text-stroke: 4px #7a3d05; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(122,61,5,.5);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.6), 0 4px 0 #a8741c; }
.card .md-row button.on, .card .lv-pick button.on { background: linear-gradient(180deg, #5aa0ff 0%, #1f5fe0 55%, #1747c4 100%); -webkit-text-stroke: 4px #0b2672; text-shadow: 0 2px 0 rgba(8,28,100,.5);
  border-color: #fff; box-shadow: 0 0 0 3px #4aa3ff, inset 0 3px 0 rgba(255,255,255,.45), 0 4px 0 #0c2f8c; }
.card .lv-pick { margin: 8px 0 2px; }
.card .lv-pick button { border-radius: 18px; max-width: 150px; }
.card .lv-pick small { -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(122,61,5,.6); }
.card .lv-pick .st { color: #fff6a8; }
.card .lv-pick.many button { width: 58px; border-radius: 16px; }
.card .lv-stars { font: 900 44px var(--f); color: #ffd84a; -webkit-text-stroke: 6px var(--navy); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(8,28,100,.6); }
.card .lv-stars .off { color: rgba(255,255,255,.3); text-shadow: none; }
.card .md-slots div { border: 3px dashed rgba(255,241,201,.6); border-radius: 14px; background: rgba(6,24,90,.35); font: 900 12px var(--f); }
.card .md-slots div.in { border-style: solid; border-color: var(--cream); }
.card .md-best { font: 800 13px var(--f); }
.card .lv-info { margin: 4px 0 0; min-height: 0; }
#lv-banner b { -webkit-text-stroke: 9px var(--navy); paint-order: stroke fill; text-shadow: 0 5px 0 rgba(8,28,100,.55), 0 8px 18px rgba(0,0,40,.35); }
#lv-banner span { background: linear-gradient(180deg, #4c8dff, #1747c4); border: 3px solid var(--cream); border-radius: 999px; }
.pt-row div { border: 3px solid var(--cream); border-radius: 999px; }

html body :where(#hint) { position: fixed; height: fit-content; bottom: 22px; left: 50%; transform: translateX(-50%); }
html body :where(#flash:not(:empty)) { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); }
/* a modal card owns the screen: the HUD behind the end card is hidden, and the corner game title is hidden while a round runs (the lv-chip lives in the same corner) */
body:has(#end:not([hidden])) :is(#hud, #time, #turn, #hint, #title, #flash, #breakbar, #dis, #hc, #power, #meter, #meterLbl) { visibility: hidden; }
body:has(#hud:not([hidden])) #title { display: none; }
@media (max-width: 1100px) { body:has(#menu:not([hidden])) #title { display: none; } }

/* compaction tiers: Chromium zoom shrinks the whole card (and the ribbon that sticks out 26px above it) so it always fits; the long
   legends (Volley, Brawl, Fort Wars) also get a wider card and tighter inner spacing */
@media (min-height: 900px) { .card { zoom: 1.2; } }
@media (max-height: 800px) {
  .card { width: min(600px, 92vw); padding: 40px 22px 16px; zoom: .9; } .card p { font-size: 16px; margin: 5px 0; }
  .card .pad { font-size: 14px; gap: 2px 10px; margin: 6px auto 2px; } .pad kbd { height: 24px; min-width: 24px; font-size: 12px; }
  .card .md-rows { margin: 6px auto 2px; gap: 6px; } .card .lv-pick { margin: 6px 0 2px; } .big { padding: 7px 40px 9px; margin-top: 6px; font-size: 22px; }
  .card .md-row button, .card .lv-pick button { padding: 5px 12px 6px; } .card .small { font-size: 13px; }
}
@media (max-height: 640px) { .card { zoom: .78; } }
@media (max-height: 560px) { .card { zoom: .62; } }
@media (max-height: 500px) { .card { zoom: .55; } }
@media (max-height: 440px) { .card { zoom: .55; } }