html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0b2a4a; touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
#ui { position: fixed; pointer-events: none; font-size: 16px; }
#ui .panel {
  position: absolute; left: 8%; right: 8%; top: 11%;
  background: rgba(11, 42, 74, 0.88); border: 0.25em solid #ffd23f; border-radius: 1.4em;
  padding: 1.2em 1em 1.4em; text-align: center; color: #fff; pointer-events: auto;
  box-shadow: 0 0.6em 1.6em rgba(0,0,0,0.45);
  animation: pop .35s cubic-bezier(.2,1.6,.4,1);
}
#ui .hidden { display: none; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.title { font-size: 4.2em; font-weight: 900; letter-spacing: .05em; line-height: 1;
  color: #ffd23f; text-shadow: 0 .08em 0 #c0392b, 0 .14em .2em rgba(0,0,0,.4); }
.title.small { font-size: 3.2em; }
.subtitle { font-size: 1.5em; font-weight: 800; margin: .2em 0 .8em; color: #9fe0ff; }
.hint { font-size: 1.15em; font-weight: 700; margin-top: .9em; opacity: .95; }
.best, .scoreline { font-size: 1.3em; font-weight: 800; margin-top: .5em; }
.scoreline { font-size: 1.8em; color: #ffd23f; }
.bigbtn {
  font: inherit; font-size: 2.4em; font-weight: 900; color: #fff;
  background: linear-gradient(#3ddc84, #1e9e55); border: .1em solid #fff; border-radius: 1em;
  padding: .35em 1.2em; min-width: 6.5em; min-height: 2.2em; cursor: pointer;
  box-shadow: 0 .18em 0 #0f6a37, 0 .3em .6em rgba(0,0,0,.4); touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center; gap: .35em;
}
.bigbtn:active { transform: translateY(.1em); box-shadow: 0 .08em 0 #0f6a37; }
.tri { display: inline-block; width: 0; height: 0; border-left: .62em solid #fff;
  border-top: .4em solid transparent; border-bottom: .4em solid transparent; }
.pucks { display: flex; justify-content: center; gap: .5em; margin: .8em 0 .4em; }
.pucks span { width: 2.2em; height: 2.2em; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.2em; font-weight: 900; border: .15em solid #fff; }
.pucks .g { background: #3ddc84; } .pucks .m { background: #556; opacity: .7; }
#muteBtn {
  position: absolute; left: 2.5%; bottom: 1.6%; width: 3.6em; height: 3.6em; padding: .65em;
  border-radius: 50%; border: .18em solid rgba(255,255,255,.9); background: rgba(11,42,74,.8);
  pointer-events: auto; cursor: pointer; touch-action: manipulation;
}

.pucks.many { gap: .3em; flex-wrap: wrap; }
.pucks.many span { width: 1.7em; height: 1.7em; font-size: 1em; }
.goals { font-size: 1.3em; font-weight: 800; color: #9fe0ff; }
.reline { font-size: 1.45em; font-weight: 900; margin: .5em .2em .2em; line-height: 1.25; }
.trophy { font-size: 5.5em; line-height: 1; margin-bottom: .1em; animation: bounce 1s ease-in-out infinite alternate; }
@keyframes bounce { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-.12em) rotate(6deg); } }
#roundEnd.champ { border-color: #fff; background: rgba(120, 80, 0, 0.9); }
#roundEnd.champ .title { font-size: 4.2em; }
.pucks .g:empty { }
.pucks .c { background: #ffd23f; color: #0b2a4a; }
.pucks .c.z { background: radial-gradient(circle at 35% 30%, #fff9db, #fcc419 55%, #e8a400); color: #5a3b00; box-shadow: 0 0 .5em rgba(255,212,59,.8); }
.pucks.many span { width: 1.75em; height: 1.75em; font-size: .8em; border-width: .12em; }
.pucks.many { gap: .25em; flex-wrap: nowrap; }
#nextBtn { white-space: nowrap; font-size: 2.1em; padding: .35em .8em; }
#nextBtn.long { font-size: 1.6em; }

/* gumba na končnem zaslonu: drug ob drugem, na ozkem zaslonu eden pod drugim */
.btnrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5em; margin-top: .6em; }
.btnrow .bigbtn { margin: 0; }
#penBtn { font-size: 1.6em; padding: .35em .8em; min-height: 2.6em; white-space: nowrap;
  background: linear-gradient(#4fb4ff, #1f6fd1); box-shadow: 0 .18em 0 #12457f, 0 .3em .6em rgba(0,0,0,.4); }
#penBtn:active { box-shadow: 0 .08em 0 #12457f; }
#penBtn.home { background: linear-gradient(#ffb74d, #e07b12); box-shadow: 0 .18em 0 #8a4a05, 0 .3em .6em rgba(0,0,0,.4); }
.puckico { display: inline-block; width: .9em; height: .45em; border-radius: 50%; background: #111; box-shadow: 0 .1em 0 #444; }
#penBtn.home .puckico { display: none; }

/* ---------- v2: lige, zemljevid, zvezdice, poliran videz ---------- */
#ui .panel { background: linear-gradient(rgba(16,52,92,0.94), rgba(8,30,56,0.94)); }
.bigbtn { text-shadow: 0 .06em 0 rgba(0,0,0,.35); position: relative; overflow: hidden; }
.bigbtn::after { content: ""; position: absolute; left: 8%; right: 8%; top: 6%; height: 38%; border-radius: 1em;
  background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events: none; }
.gold { color: #ffd23f; }
.relevel { font-size: 1.1em; font-weight: 800; color: #9fe0ff; margin-bottom: .2em; }
.stars { display: flex; justify-content: center; gap: .15em; margin: .25em 0 0; }
.stars .star { font-size: 3.2em; line-height: 1; color: #33475e; text-shadow: 0 .05em 0 #0b2a4a; }
.stars .star.on { color: #ffd23f; text-shadow: 0 0 .25em rgba(255,210,63,.8), 0 .05em 0 #a87800; animation: starpop .45s cubic-bezier(.2,1.8,.4,1) both; }
@keyframes starpop { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }
.unlock { margin: .4em auto 0; display: inline-block; font-weight: 900; font-size: 1.15em; color: #0b2a4a;
  background: linear-gradient(#ffe066, #fab005); border-radius: 1em; padding: .25em .8em; animation: pop .5s .6s both; }
#roundEnd.lost .reline { color: #ffd6d6; }
.roundbtn { pointer-events: auto; cursor: pointer; touch-action: manipulation; width: 2.6em; height: 2.6em; border-radius: 50%;
  border: .15em solid #fff; background: linear-gradient(#4fb4ff, #1f6fd1); box-shadow: 0 .15em 0 #12457f; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; }
.roundbtn.big { width: 4.2em; height: 4.2em; }
.roundbtn:active { transform: translateY(.1em); box-shadow: none; }
.back { width: 0; height: 0; border-right: .7em solid #fff; border-top: .45em solid transparent; border-bottom: .45em solid transparent; margin-right: .2em; }
.gridico { display: grid; grid-template-columns: 1fr 1fr; gap: .22em; width: 1.7em; height: 1.7em; }
.gridico i { background: #fff; border-radius: .2em; }
/* zemljevid */
#map { top: 2%; bottom: 9%; left: 3%; right: 3%; padding: .6em .6em .4em; display: flex; flex-direction: column; }
#map.hidden { display: none; }
.maphead { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4em; }
.maptitle { font-size: 2.2em; font-weight: 900; color: #ffd23f; letter-spacing: .08em; text-shadow: 0 .08em 0 #c0392b; }
.mapstars { font-size: 1.4em; font-weight: 900; color: #ffd23f; }
#mapScroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.league { border-radius: 1em; padding: .45em .45em .55em; margin-bottom: .55em; border: .15em solid rgba(255,255,255,.6); }
.league.l1 { background: linear-gradient(135deg, #2f9e44, #74c0fc); }
.league.l2 { background: linear-gradient(135deg, #1c3f8a, #1c7ed6); }
.league.l3 { background: linear-gradient(135deg, #2a1040, #ae3ec9); }
.league.locked { filter: grayscale(.7) brightness(.75); }
.lhead { display: flex; justify-content: space-between; align-items: center; font-weight: 900; font-size: 1.05em; margin: 0 .2em .35em; text-shadow: 0 .08em .1em rgba(0,0,0,.5); }
.lhead .lock { width: 1.4em; height: 1.4em; }
.lstars { color: #ffd23f; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; }
.tile { font: inherit; color: #fff; pointer-events: auto; cursor: pointer; touch-action: manipulation; position: relative;
  border: .14em solid #fff; border-radius: .8em; background: linear-gradient(rgba(255,255,255,.28), rgba(0,0,0,.25));
  box-shadow: 0 .15em 0 rgba(0,0,0,.35); padding: .3em .15em .25em; min-height: 6.4em;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.tile:active { transform: translateY(.1em); }
.tile b { font-size: 1.9em; font-weight: 900; line-height: 1; text-shadow: 0 .06em 0 rgba(0,0,0,.45); }
.tile i { font-style: normal; font-weight: 800; font-size: .72em; line-height: 1.1; min-height: 2.2em; display: flex; align-items: center; text-align: center; }
.tile s { text-decoration: none; font-size: 1.05em; letter-spacing: -.05em; }
.tile s em { font-style: normal; color: rgba(0,0,0,.35); }
.tile s em.on { color: #ffd23f; text-shadow: 0 0 .2em rgba(255,210,63,.8); }
.tile .lock { width: 1.6em; height: 1.6em; }
.tile.locked { background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.65); }
.tile.current { animation: glow 1.1s ease-in-out infinite alternate; border-color: #ffd23f; }
.tile.new { animation: glow .6s ease-in-out infinite alternate, pop .5s; border-color: #ffd23f; }
@keyframes glow { from { box-shadow: 0 0 .1em #ffd23f; } to { box-shadow: 0 0 .9em #ffd23f; } }
.tile.shake { animation: shake .35s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-.25em); } 75% { transform: translateX(.25em); } }
.pucks.lots span { width: 1.25em; height: 1.25em; font-size: .6em; }
.pucks.lots { flex-wrap: wrap; }
#roundEnd { top: 7%; }

/* razčlenitev točk na končnem zaslonu */
.ptsrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2em 0.35em; margin: 0.15em 0 0.05em; font-size: 0.85em; font-weight: 800; }
.ptsrow span { background: rgba(255, 210, 63, 0.16); color: #ffd23f; border: 1px solid rgba(255, 210, 63, 0.45); border-radius: 999px; padding: 0.12em 0.6em; white-space: nowrap; }
.ptsrow.hidden { display: none; }

#ui .panel.withpts .trophy { font-size: 3.8em; }
.rule { font-size: 0.85em; font-weight: 700; color: #cfe8ff; margin: 0.1em 0; }
.rule.hidden { display: none; }
#roundEnd.lost .rule { color: #ffd23f; }

/* krog 9: koliko golov za 1/2/3 zvezdice; plošča se po potrebi pomanjša (fitPanel v game.js) */
.req { font-size: 0.9em; font-weight: 800; color: #ffe8a3; margin: 0.15em 0 0; letter-spacing: .01em; }
.req.hidden { display: none; }