/* Sdílená herní stránka (Zábava): automat, překryvy, síň slávy. Barva hry = --acc, --acc-rgb, --acc-dark na <html>. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 100% 125%; font-display: swap; src: url('/fonts/archivo-cz.woff2') format('woff2'); }
  :root { --acc: var(--g); --day: #F5F4F0; --mut: #aaa79f; --swipe-bg: var(--acc); --swipe-fg: #151515; color-scheme: dark; }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; min-height: 100svh; background: #0c0b0f; color: var(--day); font-family: 'Archivo', 'Arial Narrow', Arial, sans-serif; overflow-x: hidden; }
  /* paprsek majáku nesmí rozšířit stránku do strany (iPhone pak jde posunout) */
  html { overflow-x: hidden; }
  @supports (overflow: clip) { html, body { overflow-x: clip; } }
  body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 35%, rgb(var(--acc-rgb) / .16), transparent 70%), radial-gradient(80% 40% at 50% 110%, rgb(120 80 255 / .12), transparent 70%); }
  a { color: inherit; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; max-width: 1180px; margin-inline: auto; }
  .pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .07); color: var(--day); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); transition: background-color .2s; }
  .pill:hover { background: rgb(255 255 255 / .13); }
  .logo { font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; text-decoration: none; white-space: nowrap; }
  .logo span { color: var(--acc); }
  #mute { width: 44px; padding: 0; justify-content: center; }
  #mute .off { display: none; } #mute.muted .on { display: none; } #mute.muted .off { display: block; }

  .room { display: grid; gap: 48px; justify-content: center; align-items: start; max-width: 1180px; margin: 6px auto 0; padding: 0 16px 72px; }
  @media (min-width: 960px) { .room { grid-template-columns: 440px 340px; gap: 64px; padding-top: 18px; } }
  /* na mobilu se automat vejde na výšku: obrazovku omezíme výškou okna */
  @media (max-width: 959px) { .cab .screen { aspect-ratio: auto; height: min(50svh, 133vw); } }

  /* nápisy přes obrazovku */
  .ov { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 18px; text-align: center; font-family: 'HraPix', monospace; background: rgb(10 8 16 / .74); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); overflow-y: auto; }
  .ov[hidden] { display: none; }
  .ov h1, .ov h2 { margin: 0; font-weight: 700; line-height: .95; color: var(--acc); text-shadow: 0 0 12px rgb(var(--acc-rgb) / .6), 0 4px 0 var(--acc-dark); }
  .ov h1 { font-size: clamp(32px, 9vw, 44px); }
  .ov h2 { font-size: clamp(30px, 8vw, 40px); }
  .ov p { margin: 0; font-size: 15px; color: var(--day); }
  .blink { animation: blink 1s steps(1) infinite; color: var(--day); font-size: 15px; }
  @keyframes blink { 50% { opacity: 0 } }
  .ov .res { font-size: 22px; font-weight: 700; }
  .ov .rec { display: inline-block; padding: 3px 10px; border-radius: 6px; background: var(--acc); color: #151515; font-size: 14px; font-weight: 700; animation: blink 1s steps(1) 3; }
  .ov form { display: grid; gap: 8px; width: min(260px, 100%); text-align: left; }
  .ov label { font-size: 12px; letter-spacing: .1em; color: var(--mut); }
  .ov input[type=text], .ov input[type=email] { width: 100%; min-height: 44px; padding: 0 12px; border: 2px solid #3a3644; border-radius: 10px; background: #0b0a0d; color: var(--day); font: 600 16px 'Archivo', Arial, sans-serif; outline: none; }
  .ov input:focus { border-color: var(--acc); }
  .ov .ok { display: flex; gap: 8px; align-items: flex-start; font: 12px/1.35 'Archivo', Arial, sans-serif; letter-spacing: 0; color: var(--mut); cursor: pointer; }
  .ov .ok input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--acc); }
  .ov .err { color: #ff8a65; font: 700 13px 'Archivo', Arial, sans-serif; }
  .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .abtn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--acc); color: #151515; font: 700 16px 'HraPix', monospace; cursor: pointer; box-shadow: 0 4px 0 var(--acc-dark); text-decoration: none; display: inline-flex; align-items: center; }
  .abtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--acc-dark); }
  .abtn.ghost { background: #2a2731; color: var(--day); box-shadow: 0 4px 0 #0d0c10; }
  .abtn:disabled { opacity: .6; cursor: wait; }

  /* síň slávy */
  .hof { display: grid; gap: 18px; }
  .hof-card { padding: 24px; border-radius: 24px; background: linear-gradient(180deg, #19171f, #121117); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), 0 30px 60px -30px rgb(0 0 0 / .8); }
  .hof h2 { margin: 0 0 4px; font: 700 30px 'HraPix', monospace; color: var(--acc); text-shadow: 0 0 12px rgb(var(--acc-rgb) / .5); }
  .hof .sub { margin: 0 0 16px; font-size: 14px; color: var(--mut); }
  .hof ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .hof li { display: grid; grid-template-columns: 34px 1fr auto 52px; gap: 10px; align-items: center; min-height: 44px; padding: 6px 12px 6px 6px; border-radius: 12px; background: rgb(255 255 255 / .04); font-family: 'HraPix', monospace; }
  .hof li.me { background: rgb(var(--acc-rgb) / .16); box-shadow: inset 0 0 0 2px var(--acc); animation: me 1s steps(1) 4; }
  @keyframes me { 50% { box-shadow: inset 0 0 0 2px transparent } }
  .hof .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #26232d; font-size: 15px; font-weight: 700; }
  .hof li:nth-child(1) .n { background: #f2c21b; color: #151515; }
  .hof li:nth-child(2) .n { background: #c9ccd2; color: #151515; }
  .hof li:nth-child(3) .n { background: #d08a4e; color: #151515; }
  .hof .nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px 'Archivo', Arial, sans-serif; }
  .hof .fl { font-size: 20px; font-weight: 700; text-align: right; }
  .hof .pc { font-size: 13px; color: var(--mut); text-align: right; }
  .hof .empty { padding: 14px; border-radius: 12px; background: rgb(255 255 255 / .04); color: var(--mut); font-size: 15px; }
  .hof .skel { height: 44px; border-radius: 12px; background: rgb(255 255 255 / .05); animation: pulse 1.2s ease-in-out infinite alternate; }
  @keyframes pulse { to { opacity: .4 } }
  .hof .mine { margin: 16px 0 0; font-size: 14px; color: var(--mut); }
  .hof .mine b { color: var(--day); }
  .help { margin: 0; padding: 0 4px; font-size: 14px; line-height: 1.5; color: var(--mut); }
  .help b { color: var(--day); }
  .cta { padding: 24px; border-radius: 24px; background: var(--acc); color: #151515; display: grid; gap: 10px; }
  .cta p { margin: 0; }
  .cta .t { font-weight: 900; font-stretch: 118%; font-size: 22px; line-height: 1.1; }
  .cta a { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 999px; background: #151515; color: var(--day); font-weight: 800; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }

  /* přebarvení oranžových míst z automat.css */
  .cab { --acc: var(--g); }
  .beacon b { background: rgb(var(--acc-rgb) / .8); }
  .beacon i { background: conic-gradient(transparent 0 62%, rgb(var(--acc-rgb) / .18) 72%, transparent 82%); }
  .go { background: radial-gradient(circle at 40% 30%, #ffffffaa 0%, var(--acc) 42%, var(--acc-dark) 100%); box-shadow: 0 9px 0 var(--acc-dark), 0 14px 18px rgb(0 0 0 / .45), inset 0 -4px 8px rgb(0 0 0 / .3), inset 0 3px 4px rgb(255 255 255 / .35); }
  .go.down, .go:active { box-shadow: 0 2px 0 var(--acc-dark), 0 5px 8px rgb(0 0 0 / .4), inset 0 -2px 6px rgb(0 0 0 / .3), inset 0 3px 4px rgb(255 255 255 / .3); }
  .ov .rec, .abtn, .cta a:hover { color: var(--on-acc, #151515); }
  .cta { color: var(--on-acc, #151515); }
  /* kříž se šipkami */
  .dpad { display: grid; grid-template: repeat(3, 34px) / repeat(3, 34px); gap: 2px; flex: none; }
  .dpad button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 7px; background: linear-gradient(#2a2c2f, #151618); color: #d9d7d0; font-size: 14px; cursor: pointer; box-shadow: 0 3px 0 #000, inset 0 1px 0 rgb(255 255 255 / .12); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .dpad button:active, .dpad button.down { transform: translateY(2px); box-shadow: 0 1px 0 #000; color: var(--acc); }
  .dpad .u { grid-area: 1 / 2; } .dpad .l { grid-area: 2 / 1; } .dpad .r { grid-area: 2 / 3; } .dpad .d { grid-area: 3 / 2; }
  .dpad i { grid-area: 2 / 2; border-radius: 50%; margin: 9px; background: #151618; box-shadow: inset 0 0 0 2px var(--acc); }
  .hof li { grid-template-columns: 34px 1fr auto; }
  .screen { touch-action: none; }
  .note { margin: 0; padding: 0 4px; font-size: 13px; color: var(--mut); }
  .note a { color: var(--day); font-weight: 700; text-underline-offset: 3px; }