* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #0d3b4f;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  background: #0f8fb3;
}

/* ---------- scéna za plochou ---------- */
body { --n1: #8fdcf5; --n2: #bfeefa; --m1: #5fc7e4; --m2: #1aa3c8; --m3: #0b7aa3; --p1: #f2d49a; --p2: #e9c27a; --ost: #2f8f5a; --slnko: #fffbe0; }
/* témy ostrovov (data-tema na body nastavuje hra podľa levelu) */
body[data-tema="1"] { --n1: #a6e8c8; --n2: #dff7e4; --m1: #49c9b4; --m2: #15a39a; --m3: #0b7a78; --p1: #f3dda5; --p2: #e2c27e; --ost: #2c7d3a; }
body[data-tema="2"] { --n1: #ffc6d6; --n2: #ffe8ee; --m1: #6fd3e8; --m2: #2bb0d0; --m3: #1a7fb0; --p1: #ffd9c4; --p2: #f5b89a; --ost: #e0607a; }
body[data-tema="3"] { --n1: #b9d4ff; --n2: #e6f0ff; --m1: #7fe0f0; --m2: #3cc0e0; --m3: #1d8fc0; --p1: #f6ecdc; --p2: #e8d6bc; --ost: #5a6fb0; --slnko: #ffffff; }
body[data-tema="4"] { --n1: #ffb36b; --n2: #ffe0a8; --m1: #3e9dc0; --m2: #1d7aa0; --m3: #0e5578; --p1: #e9c88a; --p2: #c99a5a; --ost: #4a3a2a; --slnko: #fff0b0; }
body[data-tema="5"] { --n1: #ff9f80; --n2: #ffd2b0; --m1: #3a8fb0; --m2: #1d6a90; --m3: #0d4566; --p1: #8a7a70; --p2: #5a4a44; --ost: #3a2a2a; --slnko: #ffe0a0; }
body[data-tema="6"] { --n1: #b8e6b0; --n2: #e8f8dc; --m1: #5fbfa0; --m2: #2f9a80; --m3: #1a6a5a; --p1: #c9b98a; --p2: #a8945e; --ost: #2a5a2a; }
body[data-tema="7"] { --n1: #b38cff; --n2: #ffb3c8; --m1: #6a7fd8; --m2: #4a5ab8; --m3: #2a3480; --p1: #e8c0a0; --p2: #c9967a; --ost: #3a2a5a; --slnko: #ffd0a0; }
#scena { position: fixed; inset: 0; overflow: hidden; z-index: 0;
  background: linear-gradient(180deg, var(--n1) 0%, var(--n2) 30%, var(--m1) 31%, var(--m2) 55%, var(--m3) 80%, var(--p1) 80.2%, var(--p2) 100%); }
#scena .slnko { position: absolute; top: 4%; right: 12%; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, var(--slnko) 0 38%, rgba(255,240,170,.75) 48%, rgba(255,240,170,0) 70%);
  animation: slnko 6s ease-in-out infinite; }
@keyframes slnko { 50% { transform: scale(1.08); } }
#scena .ostrov { position: absolute; top: 23%; left: 6%; width: 46%; height: 9%;
  background: radial-gradient(ellipse at 50% 100%, var(--ost) 0 55%, transparent 56%); opacity: .55; }
#scena .ostrov::before { content: ''; position: absolute; left: 40%; bottom: 45%; width: 6px; height: 70%; background: #3c6b45; border-radius: 3px; transform: rotate(8deg); }
#scena .ostrov::after { content: ''; position: absolute; left: 30%; bottom: 95%; width: 30%; height: 60%;
  background: radial-gradient(ellipse at 50% 100%, var(--ost) 0 60%, transparent 61%); }
#scena .more { position: absolute; left: 0; right: 0; top: 31%; height: 49%;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.0) 0 18px, rgba(255,255,255,.10) 18px 20px); }
#scena .odlesky { position: absolute; left: -20%; right: -20%; top: 31%; height: 49%;
  background: radial-gradient(ellipse at 70% 0%, rgba(255,255,255,.35), transparent 45%);
  animation: odlesk 9s ease-in-out infinite alternate; }
@keyframes odlesk { to { transform: translateX(8%); } }

/* ---------- rozloženie ---------- */
#app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#hud { display: flex; gap: 8px; padding: 10px 10px 4px; align-items: stretch; }
.karta { background: rgba(255,255,255,.88); border-radius: 18px; box-shadow: 0 6px 18px rgba(0,60,90,.25), inset 0 -3px 0 rgba(0,60,90,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 10px; min-width: 64px; }
.karta .popis { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #4a7f92; }
.karta b { font-size: 26px; font-weight: 900; line-height: 1.05; color: #0d3b4f; }
.karta-ciele { flex: 1; flex-direction: row; gap: 10px; flex-wrap: wrap; }
.karta-tahy.malo { background: linear-gradient(180deg, #ffe0d9, #ffc1b3); animation: malo .9s ease-in-out infinite; }
.karta-tahy.malo b { color: #c0291b; }
@keyframes malo { 50% { transform: scale(1.06); } }

.ciel { display: flex; align-items: center; gap: 4px; position: relative; }
.ciel img { width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0,40,60,.25)); }
.ciel b { font-size: 22px; min-width: 22px; text-align: left; }
.ciel.splneny b { color: #1c9b46; }
.ciel.splneny img { opacity: .55; }
.ciel.velky img { width: 52px; height: 52px; }
.ciel.velky b { font-size: 30px; }

#plocha-wrap { flex: 1; position: relative; min-height: 0; }
#plocha { position: absolute; inset: 0; display: block; touch-action: none; }

#lista { display: flex; align-items: center; gap: 6px; padding: 6px 10px 10px; }
.tl { position: relative; width: 46px; height: 46px; border-radius: 15px; border: 0; font-size: 22px; line-height: 46px; text-align: center; text-decoration: none;
  background: rgba(255,255,255,.9); box-shadow: 0 4px 12px rgba(0,60,90,.25), inset 0 -3px 0 rgba(0,60,90,.1); cursor: pointer; padding: 0; color: inherit; }
.tl:active { transform: translateY(2px) scale(.96); }
.tl.vypnute { opacity: .45; }
.odznak { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; border-radius: 10px; background: #ff7a1a; color: #fff;
  font-size: 12px; line-height: 20px; font-weight: 900; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
#hrac { flex: 1; min-width: 0; height: 46px; border-radius: 15px; background: rgba(13,59,79,.55); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 12px; overflow: hidden; }
#hrac span { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 6px; }
#hrac b { font-size: 16px; }

/* ---------- oznámenia ---------- */
#toasty { position: fixed; left: 0; right: 0; top: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 30; }
.toast { display: flex; align-items: center; gap: 10px; max-width: min(92vw, 420px); background: rgba(255,255,255,.96); color: #0d3b4f; border-radius: 16px;
  padding: 10px 14px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,50,80,.3); animation: toastIn .35s cubic-bezier(.2,1.4,.4,1); transition: opacity .4s, transform .4s; }
.toast img { width: 40px; height: 40px; flex: none; }
.toast.von { opacity: 0; transform: translateY(-10px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.9); } }

/* ---------- panely ---------- */
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(5,40,60,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.overlay.hidden { display: none; }
.panel { width: min(100%, 380px); max-height: 100%; overflow: auto; background: linear-gradient(180deg, #ffffff, #eefaff); border-radius: 28px;
  padding: 22px 20px 20px; text-align: center; box-shadow: 0 24px 60px rgba(0,40,70,.45), inset 0 -4px 0 rgba(0,80,120,.08);
  animation: panelIn .4s cubic-bezier(.2,1.3,.4,1); border: 3px solid #fff6df; }
.panel.vysoky { width: min(100%, 440px); text-align: left; }
@keyframes panelIn { from { opacity: 0; transform: translateY(24px) scale(.92); } }
.panel h1 { margin: 0 0 10px; font-size: 24px; text-align: center; }
.panel-hlava { font-size: 26px; font-weight: 900; margin-bottom: 12px; color: #0d4a63; }
.panel-ulohy { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 12px; }
.panel-tahy { font-size: 17px; margin: 6px 0 12px; }
.panel-tahy b { font-size: 22px; }
.panel-tahy .bonus { color: #1c9b46; font-weight: 700; font-size: 14px; }
.panel-text { font-size: 16px; margin: 6px 0; }
.panel-body { font-size: 20px; font-weight: 800; margin: 8px 0 14px; color: #0d4a63; }
.mensi { font-size: 13px; opacity: .75; }
.novinka { display: flex; gap: 12px; align-items: center; text-align: left; background: #fff4d6; border: 2px solid #ffd77a; border-radius: 18px;
  padding: 10px 12px; margin: 4px 0 14px; animation: novinka 1.6s ease-in-out infinite; }
.novinka img { width: 56px; height: 56px; flex: none; }
.novinka b { display: block; font-size: 16px; color: #9a5a00; }
.novinka span { font-size: 14px; }
@keyframes novinka { 50% { box-shadow: 0 0 0 6px rgba(255,210,90,.35); } }
.velke-tl { display: block; width: 100%; margin-top: 8px; border: 0; border-radius: 18px; padding: 14px; font-size: 20px; font-weight: 900; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #ffb340, #ff7a1a); box-shadow: 0 6px 0 #c4550a, 0 10px 20px rgba(200,90,10,.35); text-shadow: 0 2px 0 rgba(150,60,0,.4); }
.velke-tl:active { transform: translateY(4px); box-shadow: 0 2px 0 #c4550a, 0 4px 10px rgba(200,90,10,.35); }
.hviezdy { display: flex; justify-content: center; gap: 8px; margin: 4px 0 6px; }
.hv { font-size: 54px; color: #d5e2e8; text-shadow: 0 3px 0 #b5c7cf; }
.hv.plna { color: #ffc928; text-shadow: 0 3px 0 #c98a00, 0 0 18px rgba(255,200,40,.6); animation: hviezda .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes hviezda { from { transform: scale(0) rotate(-40deg); opacity: 0; } }

.help-body p { font-size: 14px; margin: 6px 0; }
.help-body h3 { font-size: 15px; margin: 14px 0 6px; color: #0d4a63; }
.help-body .kombo { font-size: 13px; line-height: 1.5; }
.h-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.h-row img { width: 40px; height: 40px; flex: none; }
.ver-line { text-align: center; font-size: 11px; opacity: .55; margin: 14px 0 4px; }

@media (min-width: 700px) {
  .karta b { font-size: 30px; }
  .ciel img { width: 42px; height: 42px; }
  .tl { width: 54px; height: 54px; line-height: 54px; font-size: 26px; }
  #hrac { height: 54px; }
}

.hidden { display: none !important; }

/* ---------- pomôcky ---------- */
#pomocky { display: flex; justify-content: center; gap: 10px; padding: 0 10px; }
.pom { position: relative; display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 12px 0 6px; border: 0; border-radius: 20px; cursor: pointer;
  background: rgba(255,255,255,.85); box-shadow: 0 3px 10px rgba(0,60,90,.22), inset 0 -2px 0 rgba(0,60,90,.1); color: #0d3b4f; }
.pom img { width: 34px; height: 34px; }
.pom b { font-size: 17px; font-weight: 900; }
.pom.prazdna { opacity: .5; }
.pom.aktivna { background: #ffe27a; box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255,210,60,.9); animation: malo .8s ease-in-out infinite; }
#plocha.miereni { cursor: crosshair; }

/* ---------- panel: doplnky ---------- */
.druhe-tl { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; border: 0; border-radius: 16px; padding: 10px;
  font-size: 16px; font-weight: 800; color: #0d4a63; cursor: pointer; background: #e4f5fb; box-shadow: inset 0 -3px 0 rgba(0,80,120,.12); }
.druhe-tl img { width: 30px; height: 30px; }
.panel-ostrov { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #3a8fa8; margin-bottom: 2px; }
.boss-uvod { display: flex; gap: 12px; align-items: center; text-align: left; background: #ffe9e4; border: 2px solid #ffb3a1; border-radius: 18px; padding: 10px 12px; margin: 4px 0 12px; }
.boss-uvod img { width: 84px; height: 84px; flex: none; animation: slnko 2s ease-in-out infinite; }
.boss-uvod b { display: block; font-size: 17px; color: #a3261a; }
.boss-uvod span { font-size: 14px; }
.odmena { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; color: #9a5a00; margin: 0 0 8px; }
.odmena img { width: 30px; height: 30px; }

/* ---------- celé obrazovky: mapa a kopanie ---------- */
.obrazovka { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: linear-gradient(180deg, var(--n1), var(--n2) 22%, var(--m1) 23%, var(--m2) 60%, var(--m3)); }
.mapa-hlava { display: flex; align-items: center; gap: 8px; padding: 10px; }
.tl.mala { flex: none; }
.tl.skryte { visibility: hidden; }
.mapa-nazov { flex: 1; text-align: center; background: rgba(255,255,255,.88); border-radius: 18px; padding: 6px 10px; box-shadow: 0 6px 18px rgba(0,60,90,.25); }
.mapa-nazov b { display: block; font-size: 20px; color: #0d3b4f; }
.mapa-nazov span { font-size: 13px; color: #3a7f92; font-weight: 700; }
.mapa-telo { flex: 1; position: relative; min-height: 0; }
#mapa-cesta { position: absolute; inset: 8px 18px; border-radius: 40% 46% 38% 44% / 10% 12% 10% 12%;
  background: radial-gradient(ellipse at 50% 50%, var(--p1) 0 62%, var(--p2) 76%, rgba(255,255,255,0) 77%);
  box-shadow: inset 0 0 40px rgba(120,80,20,.15); }
.mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapa-chodnik { fill: none; stroke: rgba(120,80,30,.45); stroke-width: 5; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.uzol { position: absolute; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; padding: 0;
  font-weight: 900; font-size: 15px; color: #fff; background: #9fb6bf; box-shadow: 0 4px 10px rgba(0,40,60,.35); cursor: default; }
.uzol span { position: relative; z-index: 1; }
.uzol.hotovy { background: linear-gradient(180deg, #4cc3e6, #1a93c0); }
.uzol.aktualny { width: 56px; height: 56px; font-size: 19px; background: linear-gradient(180deg, #ffb340, #ff7a1a); cursor: pointer; animation: uzol 1.2s ease-in-out infinite; z-index: 3; }
@keyframes uzol { 50% { box-shadow: 0 0 0 10px rgba(255,180,60,.35), 0 4px 10px rgba(0,40,60,.35); } }
.uzol.zamknuty { opacity: .8; }
.uzol i { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-style: normal; font-size: 12px; color: #ffc928; text-shadow: 0 1px 0 #7a4a00; white-space: nowrap; letter-spacing: -1px; }
.uzol i em { font-style: normal; color: rgba(255,255,255,.55); text-shadow: none; }
.uzol.boss { width: 70px; height: 70px; background: radial-gradient(circle, #fff6df, #ffd0c0); border-color: #ff7a5a; }
.uzol.boss img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.uzol.boss span { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: #ff7a1a; border-radius: 10px; padding: 0 6px; font-size: 12px; }
.uzol.boss.zamknuty img { filter: grayscale(.6); }
.mapa-spodok { display: flex; align-items: center; gap: 10px; padding: 8px 12px 14px; }
.mapa-spodok .velke-tl { margin: 0; flex: 1; }
.tl:disabled { opacity: .35; }
.tl.kopat { font-size: 24px; }

.kop-navod { text-align: center; color: #fff; font-weight: 700; font-size: 14px; margin: 2px 16px 10px; text-shadow: 0 1px 2px rgba(0,40,60,.5); }
#kop-pole { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; width: min(92vw, 420px); margin: 0 auto; padding: 8px; border-radius: 20px;
  background: linear-gradient(180deg, #e2bb72, #c99a52); box-shadow: 0 10px 30px rgba(0,40,60,.35), inset 0 2px 0 rgba(255,255,255,.4); }
.kop-bunka { aspect-ratio: 1; border: 0; border-radius: 10px; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 30% 30%, #fff1c8, #f1d08e 60%, #dcb069); box-shadow: inset 0 -3px 0 rgba(120,80,20,.25), 0 2px 3px rgba(80,50,10,.25);
  background-repeat: no-repeat; }
.kop-bunka:active { transform: scale(.94); }
.kop-bunka.odkryta { background: #a9773a; box-shadow: inset 0 3px 6px rgba(60,30,0,.45); cursor: default; background-repeat: no-repeat; }
.kop-bunka.najdeny { box-shadow: inset 0 0 0 3px #ffe27a, 0 0 12px rgba(255,220,90,.8); }
.kop-bunka.ligot { position: relative; }
.kop-bunka.ligot::after { content: '✦'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff7c2; font-size: 20px;
  text-shadow: 0 0 8px #ffd36b; animation: ligot 1.2s ease-in-out infinite; }
@keyframes ligot { 50% { opacity: .35; transform: scale(.8) rotate(20deg); } }
.kop-bunka.kopem { animation: kopem .26s ease-in-out; }
@keyframes kopem { 30% { transform: scale(.85) rotate(-6deg); } 60% { transform: scale(1.05) rotate(4deg); } }
.kop-bunka.nie { animation: nie .35s; }
@keyframes nie { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#kop-legenda { display: flex; justify-content: center; gap: 8px; margin: 14px 10px; flex-wrap: wrap; }
.leg { display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(255,255,255,.88); border-radius: 16px; padding: 8px 10px; min-width: 96px;
  box-shadow: 0 4px 12px rgba(0,40,60,.25); font-size: 12px; font-weight: 700; }
.leg-obr { height: 44px; max-width: 80px; object-fit: contain; filter: grayscale(1) brightness(.35) opacity(.6); }
.leg.naj .leg-obr { filter: none; }
.leg.naj { background: #fff4d6; }
.leg b { display: flex; align-items: center; gap: 2px; font-size: 12px; }
.leg b img { width: 24px; height: 24px; }

/* ---------- opakovanie levelov ---------- */
.uzol.hotovy { cursor: pointer; }
.uzol.hotovy:active { transform: translate(-50%, -50%) scale(.92); }
.rekord { margin: -4px 0 10px; font-size: 14px; font-weight: 700; color: #3a7f92; }
.hv-male { color: #ffc928; text-shadow: 0 1px 0 #a86b00; letter-spacing: -1px; }
.hv-male em { font-style: normal; color: #cfdde3; text-shadow: none; }
.novy-rekord { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px; background: #ff7a1a; color: #fff; font-size: 13px; vertical-align: middle; animation: malo .9s ease-in-out infinite; }
.dokonaly { background: linear-gradient(180deg, #fff6c8, #ffe27a); border: 2px solid #f2b81c; border-radius: 18px; padding: 10px 12px; margin: 0 0 12px; }
.dokonaly b { display: block; font-size: 18px; color: #8a5a00; }
.dokonaly span { font-size: 14px; }
#mapa.dokonaly .mapa-nazov { background: linear-gradient(180deg, #fffbe8, #ffe9a8); box-shadow: 0 0 0 3px #ffd36b, 0 6px 18px rgba(0,60,90,.25); }
#mapa.dokonaly .mapa-nazov b::after { content: ' 👑'; }