/* Patrick Hand — SIL Open Font License 1.1 */
@font-face {
  font-family: 'Patrick Hand';
  font-display: swap;
  src: url(fonts/patrick-hand-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Patrick Hand';
  font-display: swap;
  src: url(fonts/patrick-hand-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1d2a8c;
  --paper: #fbfbf7;
  --sea: #3aa6e0;
  --pink: #ff7fae;
  --yellow: #ffd60a;
  --green: #2e7d32;
  --u: 1px; /* 1/960 šířky hry, nastavuje JS */
  --font: 'Patrick Hand', 'Comic Sans MS', 'Chalkboard SE', cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #16407a;
  font-family: var(--font);
  color: var(--ink);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

#app {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(100vw, 177.78vh);
  height: min(100vh, 56.25vw);
  width: min(100dvw, 177.78dvh);
  height: min(100dvh, 56.25dvw);
  overflow: hidden;
  background: var(--paper);
}

#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* ---------- obrazovky ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 24);
  text-align: center;
}
.screen.dim { background: rgba(15, 40, 90, 0.55); }
.screen.dim h2, .screen.dim p { color: #fff; text-shadow: 0 calc(var(--u) * 3) 0 var(--ink); }

h1, h2 { margin: 0; font-weight: normal; }
h2 { font-size: calc(var(--u) * 58); }

.logo {
  font-size: calc(var(--u) * 120);
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: calc(var(--u) * 4);
  text-shadow: calc(var(--u) * 4) calc(var(--u) * 4) 0 #fff, calc(var(--u) * -3) calc(var(--u) * -3) 0 #fff;
  margin-top: calc(var(--u) * -120);
}
.logo small { display: block; font-size: calc(var(--u) * 46); letter-spacing: 0; }

.row { display: flex; gap: calc(var(--u) * 16); flex-wrap: wrap; justify-content: center; }
.row.bottom { position: absolute; bottom: calc(var(--u) * 18); left: 0; right: 0; }

.btn {
  font-family: var(--font);
  font-size: calc(var(--u) * 32);
  min-height: calc(var(--u) * 64);
  min-width: calc(var(--u) * 150);
  padding: calc(var(--u) * 6) calc(var(--u) * 26);
  color: var(--ink);
  background: #fff;
  border: calc(var(--u) * 4) solid var(--ink);
  border-radius: calc(var(--u) * 22);
  box-shadow: 0 calc(var(--u) * 6) 0 var(--ink);
  cursor: pointer;
  transition: transform 0.08s;
}
.btn:active { transform: translateY(calc(var(--u) * 4)); box-shadow: 0 calc(var(--u) * 2) 0 var(--ink); }
.btn:focus-visible, .diff-card:focus-visible, .node:focus-visible { outline: calc(var(--u) * 5) solid var(--yellow); outline-offset: calc(var(--u) * 4); }
.btn.big { font-size: calc(var(--u) * 46); min-width: calc(var(--u) * 300); min-height: calc(var(--u) * 86); }
.btn.primary { background: var(--yellow); }
.btn.danger { background: #ffd6de; font-size: calc(var(--u) * 24); min-height: calc(var(--u) * 50); }
.btn.toggle.off { background: #ddd; text-decoration: line-through; }

.card {
  background: rgba(255, 255, 255, 0.94);
  border: calc(var(--u) * 4) solid var(--ink);
  border-radius: calc(var(--u) * 26);
  padding: calc(var(--u) * 14) calc(var(--u) * 30);
  max-width: calc(var(--u) * 760);
}
.card p { margin: calc(var(--u) * 8) 0; color: var(--ink); text-shadow: none; }
.story p { font-size: calc(var(--u) * 36); }
.help p { font-size: calc(var(--u) * 24); text-align: left; }
.big-text { font-size: calc(var(--u) * 38); margin: 0; }

/* obtížnost */
.diff-row { display: flex; gap: calc(var(--u) * 24); }
.diff-card {
  font-family: var(--font);
  color: var(--ink);
  width: calc(var(--u) * 230);
  padding: calc(var(--u) * 14);
  background: #fff;
  border: calc(var(--u) * 4) solid var(--ink);
  border-radius: calc(var(--u) * 24);
  box-shadow: 0 calc(var(--u) * 6) 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4);
  cursor: pointer;
}
.diff-card.selected { background: #fff7c2; }
.diff-card canvas { width: calc(var(--u) * 160); height: calc(var(--u) * 100); }
.diff-card b { font-size: calc(var(--u) * 40); font-weight: normal; }
.diff-card i { font-style: normal; font-size: calc(var(--u) * 24); }
.hearts { color: #ff4d6d; font-size: calc(var(--u) * 28); letter-spacing: calc(var(--u) * 2); min-height: 1.2em; }

/* mapa */
#scr-map { justify-content: flex-start; padding-top: calc(var(--u) * 18); }
#map-nodes { position: absolute; inset: 0; pointer-events: none; }
.node {
  pointer-events: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  width: calc(var(--u) * 150);
  min-height: calc(var(--u) * 140);
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  border: calc(var(--u) * 4) solid var(--ink);
  border-radius: 50% 50% calc(var(--u) * 28) calc(var(--u) * 28);
  box-shadow: 0 calc(var(--u) * 6) 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--u) * 6);
  cursor: pointer;
}
.node .num { font-size: calc(var(--u) * 48); line-height: 1; }
.node .name { font-size: calc(var(--u) * 21); line-height: 1.05; }
.node .st { font-size: calc(var(--u) * 26); color: #e0a800; letter-spacing: calc(var(--u) * 2); }
.node.locked { background: #d9dde6; color: #7a809a; cursor: default; }
.node.current { background: var(--yellow); animation: bob 1.2s ease-in-out infinite; }
.node.done { background: #c7f0d8; }
@keyframes bob { 50% { transform: translate(-50%, calc(-50% - var(--u) * 8)); } }

.stars { font-size: calc(var(--u) * 64); color: var(--yellow); text-shadow: 0 calc(var(--u) * 3) 0 var(--ink); letter-spacing: calc(var(--u) * 8); }
.stars .empty { color: rgba(255, 255, 255, 0.4); }
#friend-pic { width: calc(var(--u) * 200); height: calc(var(--u) * 117); }
#end-pic { width: calc(var(--u) * 560); height: calc(var(--u) * 170); }
#scr-complete, #scr-end { gap: calc(var(--u) * 10); }
#scr-complete .row { align-items: center; }
#complete-bubbles, #end-stars { font-size: calc(var(--u) * 30); margin: 0; }
#scr-complete .stars { line-height: 1; }

/* ---------- herní tlačítka ---------- */
.icon-btn {
  position: absolute;
  top: calc(var(--u) * 12);
  right: calc(var(--u) * 12);
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: calc(var(--u) * 4) solid var(--ink);
  padding: calc(var(--u) * 8);
  cursor: pointer;
  z-index: 5;
}
.icon-btn svg { width: 100%; height: 100%; fill: var(--ink); }

#touch { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#stick-zone { position: absolute; left: 0; bottom: 0; width: 50%; height: 75%; pointer-events: auto; }
#stick-hint {
  position: absolute; left: 6vh; bottom: 6vh; width: 26vh; height: 26vh; border-radius: 50%;
  border: 0.6vh dashed rgba(255, 255, 255, 0.7);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.85); font-size: 4vh; text-shadow: 0 0.3vh 0 var(--ink);
}
#stick-base {
  position: absolute; width: 26vh; height: 26vh; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.25);
  border: 0.6vh solid rgba(255, 255, 255, 0.8);
  display: none;
}
#stick-base.active { display: block; }
#stick-base.active + #stick-hint { display: none; }
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 11vh; height: 11vh; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  border: 0.6vh solid var(--ink);
}
.touch-btn {
  position: absolute; pointer-events: auto;
  border-radius: 50%;
  border: 0.7vh solid var(--ink);
  background: rgba(255, 255, 255, 0.85);
  padding: 2.5vh;
  touch-action: none;
}
.touch-btn svg { width: 100%; height: 100%; }
.touch-btn.down { transform: scale(0.92); background: var(--yellow); }
#btn-shoot { right: 4vh; bottom: 6vh; width: 24vh; height: 24vh; }
#btn-shoot svg { fill: rgba(255, 255, 255, 0.5); stroke: var(--ink); stroke-width: 2.5; }
#btn-turbo { right: 30vh; bottom: 4vh; width: 17vh; height: 17vh; }
#btn-turbo svg { fill: var(--yellow); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }

#rotate {
  position: fixed; inset: 0; z-index: 50;
  background: #16407a; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 7vw; text-align: center;
}
#rotate svg { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }