/* Fonts are bundled, SIL Open Font License: see fonts/OFL-*.txt */
@font-face { font-family: 'Bagel Fat One'; src: url(fonts/bagel-fat-one-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Gabarito'; font-weight: 500; src: url(fonts/gabarito-latin-500-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Gabarito'; font-weight: 800; src: url(fonts/gabarito-latin-800-normal.woff2) format('woff2'); font-display: swap; }

:root {
  --cobalt: #1b3fa8; --ink: #0f1f5c; --lemon: #ffd21f; --lemon-deep: #c79a00; --glaze: #fbfaf5; --leaf: #2f8f46; --sauce: #d93a1e;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--cobalt); color: #fff; font: 500 16px/1.35 Gabarito, 'Trebuchet MS', system-ui, sans-serif; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
body { background-size: 96px 96px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--lemon); outline-offset: 2px; }
.sheet :focus-visible { outline-color: var(--sauce); }

/* The stage holds the plate. Canvases stack: plate never redraws, strand layers only ever get new bits, top redraws each frame. */
#stage { position: fixed; left: 0; top: 0; outline: none; touch-action: none; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#shout { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86%; text-align: center; font-family: 'Bagel Fat One', 'Trebuchet MS', sans-serif; font-size: clamp(26px, 8.5vmin, 60px); line-height: 1.05; color: var(--ink); pointer-events: none; }
#shout.pop { animation: pop .34s cubic-bezier(.2, 1.6, .4, 1); }
#shout small { display: block; max-width: 62%; margin: .5em auto 0; font: 500 clamp(13px, 2.2vmin, 17px)/1.25 Gabarito, sans-serif; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.5); } to { transform: translate(-50%, -50%) scale(1); } }

/* Tiles: the one shape in this game. Glazed white with a painted edge and a bit of thickness. */
.tile-btn { position: relative; border: 0; border-radius: 5px; background: var(--glaze); color: var(--ink); padding: 10px 14px; font-weight: 800; box-shadow: inset 0 0 0 2px var(--cobalt), inset 0 0 0 4px var(--glaze), inset 0 0 0 5px var(--cobalt), 0 4px 0 #0a1c5e; transition: transform .06s; touch-action: manipulation; }
.tile-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--cobalt), inset 0 0 0 4px var(--glaze), inset 0 0 0 5px var(--cobalt), 0 1px 0 #0a1c5e; }
.tile-btn.lemon { background: var(--lemon); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--lemon), inset 0 0 0 5px var(--ink), 0 4px 0 #0a1c5e; }
.tile-btn.big { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 14px; min-height: 56px; }
.tile-btn .t { font: 400 clamp(18px, 3.4vmin, 24px)/1.1 'Bagel Fat One', 'Trebuchet MS', sans-serif; }
.tile-btn .s { font-weight: 500; font-size: 13.5px; line-height: 1.2; margin-top: 3px; }
.tile-btn.icon { width: 44px; height: 44px; padding: 9px; }
.tile-btn.icon svg { width: 100%; height: 100%; fill: currentColor; display: block; }
#btnMute .off { display: none; }
body.muted #btnMute .off { display: inline; }
body.muted #btnMute .on { display: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { min-width: 44px; min-height: 40px; border: 0; border-radius: 4px; padding: 6px 10px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 800; font-size: 15px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); touch-action: manipulation; }
.chip[aria-pressed="true"] { background: var(--glaze); color: var(--ink); box-shadow: inset 0 0 0 2px var(--lemon), 0 2px 0 #0a1c5e; }
.chip .medal { color: var(--lemon-deep); margin-left: 3px; }
.link { background: none; border: 0; padding: 4px 0; text-decoration: underline; color: inherit; font-weight: 800; min-height: 32px; }

/* Menu */
#menu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: stretch; padding: calc(8px + var(--safe-t)) calc(14px + var(--safe-r)) calc(10px + var(--safe-b)) calc(14px + var(--safe-l)); overflow: auto; pointer-events: none; }
#menu > * { pointer-events: auto; }
.logo { line-height: 0; }
#logo { width: 100%; height: clamp(82px, 17vh, 130px); display: block; }
.tagline { text-align: center; font-weight: 800; font-size: 16px; }
#plateSlot { flex: 1 1 130px; min-height: 110px; margin: 6px 0; pointer-events: none; }
.menu-actions { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-label { font-weight: 800; font-size: 14px; min-width: 66px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats { font-size: 14px; text-align: center; min-height: 1.2em; }
.foot { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; gap: 12px; }
@media (min-aspect-ratio: 11/10) {
  #menu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr); column-gap: 28px; padding-left: calc(20px + var(--safe-l)); padding-right: calc(24px + var(--safe-r)); }
  .logo { grid-column: 2; grid-row: 2; }
  #logo { height: clamp(66px, 19vh, 130px); }
  .tagline { grid-column: 2; grid-row: 3; margin-bottom: 8px; }
  #plateSlot { grid-column: 1; grid-row: 1 / span 5; min-height: 0; margin: 0; }
  .menu-actions { grid-column: 2; grid-row: 4; }
}
@media (min-aspect-ratio: 11/10) and (max-height: 500px) {
  #logo { height: 58px; } .tagline { font-size: 13.5px; margin-bottom: 4px; }
  .menu-actions { gap: 5px; } .tile-btn.big { min-height: 44px; padding: 5px 10px; } .tile-btn .s { font-size: 12px; margin-top: 1px; }
  .chip { min-height: 36px; padding: 4px 8px; font-size: 14px; } .stats { display: none; }
}
@media (max-height: 680px) and (max-aspect-ratio: 11/10) {
  #logo { height: 72px; } .tagline { font-size: 14px; }
  .menu-actions { gap: 5px; } .tile-btn.big { min-height: 48px; padding: 5px 10px; } .tile-btn .s { font-size: 12.5px; }
  .stats { display: none; } .chip { min-height: 38px; padding: 4px 8px; font-size: 14px; }
}

/* Sheets over the table */
.sheet { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(10px + var(--safe-t)) 12px calc(10px + var(--safe-b)); background: rgba(10, 22, 80, .62); overflow: auto; }
.card { background: var(--glaze); color: var(--ink); width: 100%; max-width: 520px; margin: auto; padding: 22px 20px 18px; border-radius: 6px; box-shadow: inset 0 0 0 3px var(--cobalt), inset 0 0 0 6px var(--glaze), inset 0 0 0 8px var(--lemon), inset 0 0 0 10px var(--glaze), inset 0 0 0 11px var(--cobalt), 0 8px 0 rgba(6, 14, 50, .55); display: flex; flex-direction: column; gap: 10px; }
.card.small { max-width: 340px; }
.card h2 { font: 400 clamp(26px, 5vmin, 34px)/1.08 'Bagel Fat One', 'Trebuchet MS', sans-serif; text-align: center; color: var(--cobalt); }
.card .row-label { color: var(--ink); }
.card .chip { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.card .chip[aria-pressed="true"] { background: var(--cobalt); color: #fff; box-shadow: inset 0 0 0 2px var(--lemon); }
.card .chip:disabled { opacity: .38; cursor: default; }
.btns { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.note { font-size: 13.5px; }
#keyTable, #puList { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 12px; }
#keyTable li, #puList li { display: flex; align-items: center; gap: 8px; font-weight: 800; }
#puList li { align-items: flex-start; font-weight: 500; font-size: 14px; }
#puList b { display: block; font-weight: 800; }
#keyTable canvas { width: 34px; height: 34px; flex: none; }
#puList canvas { width: 40px; height: 40px; flex: none; }
kbd { display: inline-block; min-width: 28px; padding: 2px 6px; text-align: center; font: 800 15px/1.4 Gabarito, sans-serif; background: #fff; color: var(--ink); border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 var(--ink); }
#resHead { width: 92px; height: 92px; align-self: center; }
#resBody { text-align: center; font-weight: 800; font-size: 17px; }
#resTable { display: flex; flex-direction: column; gap: 3px; }
#resTable li { display: flex; align-items: center; gap: 8px; font-weight: 800; }
#resTable canvas { width: 26px; height: 26px; flex: none; }
#resTable .pts { margin-left: auto; font: 400 20px 'Bagel Fat One', sans-serif; }

/* In-play HUD. Positions come from layout() in game.js. */
#hud { position: fixed; inset: 0; pointer-events: none; display: block; }
#hud button { pointer-events: auto; }
.hud-btns { position: absolute; display: flex; gap: 8px; }
#rail { position: absolute; display: flex; gap: 6px; }
.seat { display: flex; align-items: center; gap: 7px; background: rgba(10, 22, 80, .62); border-radius: 4px; padding: 4px 8px 4px 4px; }
.seat canvas { width: 30px; height: 30px; flex: none; }
.seat .nm { font-weight: 800; font-size: 14px; white-space: nowrap; }
.seat .nm i { font-style: normal; font-weight: 500; opacity: .8; font-size: 12px; margin-left: 3px; }
.seat .kk { display: flex; gap: 3px; }
.seat kbd { font-size: 13px; min-width: 24px; padding: 1px 4px; }
.seat.swapped kbd { background: #bde36c; }
.seat .pips { display: flex; gap: 3px; flex-wrap: wrap; }
.pip { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.pip.on { background: var(--lemon); box-shadow: 0 0 0 1px #7a4b00; }
.seat.out { opacity: .5; }
.seat.big { display: grid; grid-template-columns: 38px 1fr; column-gap: 8px; row-gap: 2px; padding: 6px 10px 6px 6px; }
.seat.big canvas { width: 38px; height: 38px; grid-row: 1 / span 3; align-self: center; }
.rail-col { flex-direction: column; }
.rail-row { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.rail-row .seat { padding: 2px 6px 2px 2px; gap: 4px; }
.rail-row .seat canvas { width: 22px; height: 22px; }
.rail-row .pip { width: 8px; height: 8px; }
#toast { position: absolute; transform: translateX(-50%); padding: 4px 10px; background: var(--ink); color: #fff; border-radius: 4px; font-weight: 800; font-size: clamp(13px, 2.2vmin, 16px); text-align: center; max-width: 92vw; opacity: 0; transition: opacity .18s; pointer-events: none; }
#toast.on { opacity: 1; }

/* Touch: hit areas fill the screen, the visible labels sit in the free space round the plate */
#touch { position: fixed; inset: 0; touch-action: none; }
.zone-label { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 2px var(--e), inset 0 0 0 4px rgba(255, 255, 255, .55), 0 3px 0 #0a1c5e; pointer-events: none; }
.zone-label svg { width: 62%; height: 62%; max-width: 60px; max-height: 60px; stroke: var(--e); fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.zone-label.on { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--e), inset 0 0 0 7px #fff, 0 1px 0 #0a1c5e; }
.zone-label.swapped { background-image: repeating-linear-gradient(45deg, rgba(160, 205, 60, .75) 0 8px, transparent 8px 16px); }

@media (prefers-reduced-motion: reduce) {
  #shout.pop { animation: none; }
  .tile-btn { transition: none; }
}