:root {
  --ink: #2a1d3a;
  --night: #150d22;
  --pink: #ffb3d1;
  --lav: #c4aaff;
  --mint: #9bebd0;
  --paper: #fff4fa;
  --c: 24px; /* velikost buňky, nastavuje JS */
  --font: "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Yu Gothic UI", "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--night);
  color: var(--paper);
  font-family: var(--font);
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#app { position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

/* ---------- hra ---------- */
#game { display: grid; align-items: start; justify-content: center; visibility: hidden; }
#app[data-screen="play"] #game, #app[data-screen="pause"] #game, #app[data-screen="over"] #game { visibility: visible; }
#game.wide {
  grid-template-columns: calc(var(--c) * 4.8) auto calc(var(--c) * 4.8);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "hold board next" "stats board next" ". buttons .";
  column-gap: calc(var(--c) * 0.7);
  row-gap: calc(var(--c) * 0.6);
}
#game.narrow {
  grid-template-columns: calc(var(--c) * 3.4) 1fr calc(var(--c) * 6);
  grid-template-areas: "hold stats next" "board board board" "buttons buttons buttons";
  width: var(--topw);
  column-gap: calc(var(--c) * 0.3);
  row-gap: calc(var(--c) * 0.4);
}
#game.narrow #board-wrap { justify-self: center; }

.panel {
  background: rgba(34, 18, 54, 0.74);
  border: 2px solid rgba(255, 179, 209, 0.55);
  border-radius: calc(var(--c) * 0.45);
  padding: calc(var(--c) * 0.3);
  box-shadow: 0 0 calc(var(--c) * 0.7) rgba(196, 170, 255, 0.22), inset 0 0 0 2px rgba(42, 29, 58, 0.8);
}
.label { display: block; font-size: calc(var(--c) * 0.5); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink); opacity: 0.9; }
#hold-box { grid-area: hold; }
#next-box { grid-area: next; }
#stats { grid-area: stats; }
#board-wrap { grid-area: board; position: relative; border-radius: calc(var(--c) * 0.3); box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--pink), 0 0 calc(var(--c) * 1.4) rgba(255, 179, 209, 0.35); line-height: 0; }
#board { display: block; touch-action: none; border-radius: calc(var(--c) * 0.2); }
#hold, #next { display: block; }
.stat { margin-bottom: calc(var(--c) * 0.35); }
.stat:last-child { margin-bottom: 0; }
.stat b { display: block; font-size: calc(var(--c) * 0.95); line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }

#pause-btn {
  position: absolute; top: calc(var(--c) * 0.25); right: calc(var(--c) * 0.25);
  width: calc(var(--c) * 1.35); height: calc(var(--c) * 1.35);
  border-radius: 50%; border: 2px solid var(--ink); background: rgba(255, 179, 209, 0.85); color: var(--ink);
  font-size: calc(var(--c) * 0.62); line-height: 1; padding: 0; cursor: pointer; opacity: 0.8; touch-action: manipulation;
}

/* úzké rozložení: hold, stats a next v jedné liště nad polem */
#game.narrow .panel { padding: calc(var(--c) * 0.2) calc(var(--c) * 0.25); border-radius: calc(var(--c) * 0.35); }
#game.narrow .label { font-size: calc(var(--c) * 0.38); }
#game.narrow .stat { margin-bottom: calc(var(--c) * 0.05); display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--c) * 0.3); }
#game.narrow .stat b { font-size: calc(var(--c) * 0.62); }

#buttons { grid-area: buttons; display: flex; gap: calc(var(--c) * 0.4); justify-content: center; width: 100%; }
#buttons[hidden] { display: none; }
#buttons button {
  flex: 1; max-width: calc(var(--c) * 2.6); height: calc(var(--c) * 2.2); border-radius: calc(var(--c) * 0.6);
  border: 2px solid var(--ink); background: var(--pink); color: var(--ink); font-size: calc(var(--c) * 0.95); font-family: inherit;
  box-shadow: 0 calc(var(--c) * 0.15) 0 var(--lav); touch-action: none; padding: 0;
}
#buttons button.on { transform: translateY(calc(var(--c) * 0.12)); box-shadow: none; background: var(--mint); }
#game.wide #buttons { max-width: calc(var(--c) * 10); justify-self: center; }

/* ---------- obrazovky ---------- */
.screen {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 12px;
  background: rgba(14, 8, 24, 0.72); backdrop-filter: blur(3px); overflow-y: auto; touch-action: pan-y; user-select: none;
}
#app[data-screen="loading"] #screen-loading,
#app[data-screen="start"] #screen-start,
#app[data-screen="pause"] #screen-pause,
#app[data-screen="over"] #screen-over { display: flex; }
#app[data-screen="start"] .screen, #app[data-screen="loading"] .screen { background: rgba(14, 8, 24, 0.35); }
.loading { font-size: 1.2rem; color: var(--pink); }

.card {
  width: min(420px, 100%); margin: auto; text-align: center; padding: 20px 18px 18px;
  background: rgba(30, 16, 48, 0.92); border: 3px solid var(--ink); border-radius: 26px;
  box-shadow: 0 0 0 3px var(--pink), 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(196, 170, 255, 0.25);
}
.card.small { width: min(360px, 100%); }
#logo-seal { display: block; margin: -6px auto 0; }
h1.logo { margin: 0; font-size: clamp(2.4rem, 11vw, 3.6rem); letter-spacing: 0.02em; line-height: 1; color: var(--paper); text-shadow: 3px 3px 0 var(--ink), 5px 5px 0 var(--lav); }
h1.logo span { color: var(--pink); }
h2 { margin: 0 0 14px; font-size: 1.9rem; color: var(--pink); text-shadow: 2px 2px 0 var(--ink); }
h2 small { font-size: 0.9rem; color: var(--lav); font-weight: 400; }
.tagline { margin: 10px 0 16px; color: #d9c9f2; font-size: 0.95rem; }
.best { margin: 10px 0 6px; color: #d9c9f2; }
.best b { color: var(--mint); }

.btn {
  display: block; width: 100%; margin: 8px 0; padding: 12px 16px; font: inherit; font-size: 1.15rem; font-weight: 700;
  color: var(--ink); background: var(--lav); border: 3px solid var(--ink); border-radius: 18px; cursor: pointer;
  box-shadow: 0 5px 0 var(--ink); touch-action: manipulation;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--pink); font-size: 1.4rem; }
.btn.ghost { background: transparent; color: var(--paper); border-color: rgba(255, 179, 209, 0.5); box-shadow: none; font-size: 1rem; padding: 8px; }
.btn:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

.level-pick { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 4px; }
.level-pick .label { margin-right: 4px; font-size: 0.85rem; }
.level-pick b { min-width: 1.6em; font-size: 1.5rem; color: var(--mint); }
.mini { width: 38px; height: 38px; font: inherit; font-size: 1.4rem; line-height: 1; border-radius: 50%; border: 2px solid var(--ink); background: var(--mint); color: var(--ink); cursor: pointer; padding: 0; }
.mini-btn { display: inline-block; width: auto; margin: 0 0 0 8px; padding: 8px 14px; font-size: 1rem; }

details.help { margin-top: 12px; text-align: left; border-top: 1px dashed rgba(255, 179, 209, 0.35); padding-top: 8px; }
details.help summary { cursor: pointer; color: var(--pink); font-weight: 700; padding: 4px 0; }
.keys { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 6px; }
.keys th { text-align: left; color: var(--lav); font-weight: 400; padding: 2px 6px; }
.keys td { padding: 3px 6px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.keys td:first-child { color: var(--mint); white-space: nowrap; }
@media (pointer: coarse) { .keys th:nth-child(2), .keys td:nth-child(2) { display: none; } }
@media (pointer: fine) { .touch-col { display: none; } }

.settings { display: grid; gap: 8px; margin-top: 10px; text-align: left; }
.card.small .settings { border-top: 1px dashed rgba(255, 179, 209, 0.35); padding-top: 12px; margin-top: 8px; }
.chk, .rng { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.chk input { width: 22px; height: 22px; accent-color: var(--pink); }
.rng input { flex: 1; accent-color: var(--pink); min-width: 0; }

.scores { margin: 8px 0 0; padding: 0 0 0 1.6em; text-align: left; font-size: 0.92rem; color: #e6d9fa; }
.scores li { padding: 2px 0; }
.scores li span { display: inline-block; }
.scores .nm { max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.scores .sc { float: right; color: var(--mint); font-variant-numeric: tabular-nums; }
.scores .dt { color: #a590c9; font-size: 0.78rem; margin-left: 6px; }
.scores li.me { color: var(--pink); font-weight: 700; }
.scores:empty::after { content: "Zatím žádný rekord. Tuleni čekají."; color: #a590c9; }

.record { margin: 0 0 10px; font-size: 1.3rem; font-weight: 700; color: var(--mint); text-shadow: 2px 2px 0 var(--ink); animation: pop 0.8s ease-out; }
.final { display: flex; justify-content: space-around; margin: 0 0 12px; }
.final div { text-align: center; }
.final dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink); }
.final dd { margin: 0; font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.name-form { margin: 0 0 8px; text-align: left; }
.name-form label { display: block; margin-bottom: 4px; color: var(--lav); font-size: 0.9rem; }
.name-form div { display: flex; }
.name-form input { flex: 1; min-width: 0; padding: 9px 12px; font: inherit; font-size: 1.05rem; border-radius: 14px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); user-select: text; -webkit-user-select: text; }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

@media (max-height: 560px) and (orientation: landscape) { .card { padding: 12px; } #logo-seal { display: none; } }
@media (prefers-reduced-motion: reduce) { .record { animation: none; } }