/* ============================================================
   MYNTLAND – STIGESPILLET (myntstigen)
   iPad-optimalisert brettspill for 2–4 spillere.
   Palett + fonter arves fra myntland.css; her ligger alt
   spill-spesifikt. Bygd som frittstående side (som Myntjakten).
   ============================================================ */

:root {
  --yellow: #FFD93D;
  --coin: #EFB300;
  --red: #D63031;
  --red-light: #FFE5E5;
  --tile-radius: 14px;
  --shadow-sm: 0 2px 6px rgba(30,15,82,.10);
  --shadow-md: 0 6px 18px rgba(30,15,82,.16);
  --shadow-lg: 0 14px 40px rgba(30,15,82,.28);
}

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

html, body {
  font-family: 'Nunito', sans-serif;
  background:
    radial-gradient(1200px 600px at 12% -8%, #eaf3ff 0%, transparent 55%),
    radial-gradient(1000px 500px at 98% 4%, #fdf0dd 0%, transparent 50%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  overscroll-behavior: none;
}
body {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

h1, h2, h3, .fredoka, .logo { font-family: 'Fredoka One', cursive; font-weight: 400; }

button { font-family: inherit; cursor: pointer; border: none; }
img { -webkit-user-drag: none; user-drag: none; }

/* ── Knapper ─────────────────────────────────────────────── */
.btn {
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.05rem;
  padding: .85rem 1.6rem;
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(2px) scale(.99); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-green   { background: var(--green); color: #fff; }
.btn-amber   { background: var(--amber); color: #3a2400; }
.btn-coral   { background: var(--coral); color: #fff; }
.btn-ghost   { background: var(--white); color: var(--blue); border: 2px solid var(--border); box-shadow: none; }
.btn-lg      { font-size: 1.3rem; padding: 1.05rem 2.2rem; }
.btn:disabled { opacity: .45; filter: grayscale(.3); cursor: not-allowed; }

/* ── Skjerm-bytting ──────────────────────────────────────── */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

/* ════════════════════════════════════════════════════════
   OPPSETT-SKJERM
   ════════════════════════════════════════════════════════ */
.setup-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 1.2rem 3rem;
  text-align: center;
}
.logo { font-size: clamp(2.2rem, 6vw, 3.4rem); color: var(--blue-dark); }
.logo .coin-dot { color: var(--coin); }
.tagline { color: var(--muted); font-size: 1.15rem; margin: .3rem 0 1.6rem; font-weight: 700; }

/* ── Topp-nav + hero (samme header som Myntjakten) ── */
.topnav { background: var(--white); border-bottom: 1px solid var(--border); padding: 0.85rem 1.5rem; position: sticky; top: 0; z-index: 100; }
.topnav-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.topnav-logo { font-family: 'Fredoka One', cursive; font-size: 1.5rem; color: var(--blue-dark); text-decoration: none; }
.topnav-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.topnav-back:hover { color: var(--blue-dark); }
.hero { background: linear-gradient(160deg, var(--blue-dark), #1a6648, var(--green)); color: #fff; padding: 2rem 1.5rem 1.5rem; text-align: center; position: relative; overflow: hidden; margin-bottom: 24px; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(239,159,39,0.18) 0%, transparent 45%), radial-gradient(circle at 80% 70%, rgba(29,158,117,0.20) 0%, transparent 45%); pointer-events: none; }
.hero > * { position: relative; z-index: 2; }
.hero-brand { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.12); padding: 6px 16px; border-radius: 20px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.18); }
.hero-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.hero h1 { font-family: 'Fredoka One', cursive; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; color: #fff; letter-spacing: -0.01em; }
.hero h1 .accent { color: var(--amber); }
.hero p { color: rgba(255,255,255,0.85); font-size: clamp(0.95rem, 1.5vw, 1.1rem); margin-top: 8px; font-weight: 600; max-width: 520px; margin-left: auto; margin-right: auto; }

.card {
  background: var(--white);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  padding: 1.4rem 1.4rem 1.6rem;
  margin-bottom: 1.3rem;
  text-align: left;
}
.card h2 { font-size: 1.35rem; color: var(--blue-dark); margin-bottom: .2rem; }
.card .hint { color: var(--muted); font-size: .98rem; margin-bottom: 1rem; font-weight: 600; }

/* Nivåvelger */
.level-row { display: flex; gap: .8rem; }
.level-opt {
  flex: 1; background: var(--bg); border: 3px solid var(--border);
  border-radius: 16px; padding: 1rem .8rem; text-align: center;
  transition: border-color .15s, background .15s, transform .08s;
}
.level-opt:active { transform: scale(.98); }
.level-opt.selected { border-color: var(--green); background: var(--green-light); }
.level-opt .lv-emoji { font-size: 2rem; }
.level-opt .lv-title { font-weight: 900; font-size: 1.15rem; margin-top: .2rem; }
.level-opt .lv-sub { font-size: .85rem; color: var(--muted); font-weight: 700; }

/* Spillerliste */
.players-list { display: flex; flex-direction: column; gap: .7rem; }
.player-slot {
  display: flex; align-items: center; gap: .9rem;
  background: var(--bg); border-radius: 16px; padding: .65rem .8rem;
  border: 2px solid var(--border);
}
.player-slot .piece { width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  background: var(--white); box-shadow: var(--shadow-sm); flex: none; }
.player-slot .pname { font-weight: 900; font-size: 1.1rem; flex: 1; }
.player-slot .ptag { font-size: .82rem; color: var(--muted); font-weight: 700; }
.player-slot .badge-card { font-size: .78rem; font-weight: 800; padding: .15rem .55rem;
  border-radius: 999px; background: var(--green-light); color: var(--green-dark); }
.player-slot .badge-guest { background: var(--amber-light); color: var(--amber-dark); }
.player-slot .remove { background: none; color: var(--coral); font-size: 1.5rem; font-weight: 900;
  width: 40px; height: 40px; border-radius: 50%; flex: none; }
.add-row { display: flex; gap: .7rem; margin-top: 1rem; flex-wrap: wrap; }
.add-row .btn { flex: 1; min-width: 160px; }

.start-game-row { margin-top: .4rem; }
#btn-start-game { width: 100%; }

/* ════════════════════════════════════════════════════════
   SPILL-SKJERM
   ════════════════════════════════════════════════════════ */
.game-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 1rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: .8rem;
  align-items: start;
}
@media (max-width: 920px) {
  .game-layout { grid-template-columns: 1fr; }
  .side-panel { order: -1; }
}

/* Brett */
.board-card { background: var(--white); border-radius: 22px; box-shadow: var(--shadow-md); padding: .8rem; }
.board-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: calc(100vh - 150px);
  border-radius: 16px;
}
.board-wrap { position: relative; width: max-content; margin: 56px auto; }
.board {
  display: grid;
  --tile: clamp(46px, 11vw, 92px);
  grid-template-columns: repeat(6, var(--tile));
  grid-auto-rows: var(--tile);
  gap: 8px;
}
.tile {
  position: relative;
  border-radius: var(--tile-radius);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-weight: 900;
  padding: 4px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), var(--shadow-sm);
  overflow: hidden;
  min-height: 0;
}
.tile .tnum { position: absolute; top: 3px; left: 4px; font-size: .92rem; font-weight: 900; color: rgba(20,30,26,.65); background: rgba(255,255,255,.74); border-radius: 7px; padding: 0 5px; line-height: 1.3; }
.tile .tdir { position: absolute; top: 3px; right: 3px; width: 23px; height: 23px; display: flex; align-items: center; justify-content: center; color: var(--blue); background: rgba(255,255,255,.78); border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.tile .tdir svg { width: 16px; height: 16px; display: block; }
.tile .tdir-l svg { transform: rotate(180deg); }
.tile .tdir-up svg { transform: rotate(-90deg); }
.tile .ticon { font-size: clamp(1.3rem, 3.4vw, 2rem); line-height: 1; }
.tile .tlabel { font-size: .66rem; font-weight: 800; opacity: .85; margin-top: 1px; text-align: center; }

.t-normal   { background: #eef3f8; color: #5a6b7a; }
.t-coin     { background: linear-gradient(160deg,#fff3cf,#ffe28a); color: #7a5600; }
.t-question { background: linear-gradient(160deg,#e3ecff,#c7d8ff); color: #2747a0; }
.t-expense  { background: linear-gradient(160deg,#ffe1da,#ffc7b9); color: #a23a1d; }
.t-ladder   { background: linear-gradient(160deg,#d8f6ea,#aeeccf); color: #0c6b4c; }
.t-slide    { background: linear-gradient(160deg,#efe1ff,#d8c4ff); color: #5a3ba0; }
.t-start    { background: var(--blue); color: #fff; }
.t-finish   { background: linear-gradient(160deg,#FFD93D,#EF9F27); color: #5a3a00; }

/* SVG-overlegg for stiger og sklier */
.connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* Tellemodus: spilleren trykker selv paa ruten de lander paa */
.board.picking .tile { cursor: pointer; }
.count-chip {
  display: inline-block;
  margin: .1rem 0 .7rem;
  padding: .35rem 1.1rem;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: .03em;
}
#btn-move { width: 100%; margin-bottom: .3rem; }
.tile.counted { box-shadow: inset 0 0 0 3px var(--green), var(--shadow-sm); filter: saturate(1.12) brightness(1.02); }
.count-badge {
  position: absolute; top: 3px; right: 4px;
  min-width: 17px; height: 17px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
  border-radius: 999px; font-size: .68rem; font-weight: 900;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.board.picking .tile:not(.t-start):not(.t-finish):hover { filter: brightness(1.06); transform: scale(1.03); }
.tile.wrong-pick { animation: wrongpick .45s ease; box-shadow: inset 0 0 0 3px var(--coral), var(--shadow-sm); }
@keyframes wrongpick {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Brikker på brettet */
.pieces-layer { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.pawn {
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
  border: 3px solid #fff;
  transition: left .28s cubic-bezier(.34,1.4,.64,1), top .28s cubic-bezier(.34,1.4,.64,1);
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.pawn.is-turn { box-shadow: 0 0 0 4px var(--amber), 0 4px 10px rgba(0,0,0,.4); z-index: 9; }

/* Side-panel */
.side-panel { display: flex; flex-direction: column; gap: 1rem; }
.panel-card { background: var(--white); border-radius: 22px; box-shadow: var(--shadow-md); padding: 1rem; }
.panel-card h3 { font-size: 1rem; color: var(--blue-dark); margin-bottom: .6rem; }

/* Spiller-statuskort */
.pstatus { display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem; border-radius: 14px;
  border: 2px solid var(--border); margin-bottom: .55rem; background: var(--bg); transition: all .2s; }
.pstatus:last-child { margin-bottom: 0; }
.pstatus.active { border-color: var(--amber); background: #fff7e6; box-shadow: var(--shadow-sm); }
.pstatus .ps-piece { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; background:#fff; }
.pstatus .ps-name { font-weight: 900; flex: 1; font-size: 1rem; line-height: 1.05; }
.pstatus .ps-skip { font-size: .72rem; color: var(--coral); font-weight: 800; }
.pstatus .ps-coins { font-weight: 900; color: var(--coin); font-size: 1.05rem; white-space: nowrap; }
.pstatus .ps-coins .c { color: var(--coin); }

/* Terning + tur */
.turn-box { text-align: center; }
.turn-name { font-size: 1.3rem; font-weight: 900; color: var(--blue-dark); }
.turn-sub { color: var(--muted); font-weight: 700; font-size: .9rem; margin-bottom: .7rem; }

.dice {
  width: 96px; height: 96px; margin: .2rem auto .8rem;
  border-radius: 20px; background: #fff; box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr);
  padding: 14px; border: 3px solid var(--border);
}
.dice .pip { width: 16px; height: 16px; border-radius: 50%; background: var(--blue-dark); align-self: center; justify-self: center; visibility: hidden; }
.dice.rolling { animation: shake .5s ease; }
@keyframes shake {
  0%,100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-14deg) scale(1.05); }
  40% { transform: rotate(12deg) scale(.97); }
  60% { transform: rotate(-8deg) scale(1.04); }
  80% { transform: rotate(6deg) scale(.99); }
}
/* pip-mønstre via data-face */
.dice[data-face="1"] .p5,
.dice[data-face="2"] .p1, .dice[data-face="2"] .p9,
.dice[data-face="3"] .p1, .dice[data-face="3"] .p5, .dice[data-face="3"] .p9,
.dice[data-face="4"] .p1, .dice[data-face="4"] .p3, .dice[data-face="4"] .p7, .dice[data-face="4"] .p9,
.dice[data-face="5"] .p1, .dice[data-face="5"] .p3, .dice[data-face="5"] .p5, .dice[data-face="5"] .p7, .dice[data-face="5"] .p9,
.dice[data-face="6"] .p1, .dice[data-face="6"] .p3, .dice[data-face="6"] .p4, .dice[data-face="6"] .p6, .dice[data-face="6"] .p7, .dice[data-face="6"] .p9 { visibility: visible; }

#btn-roll { width: 100%; }

.mini-log { margin-top: .7rem; font-size: .9rem; color: var(--muted); font-weight: 700; min-height: 1.2em; text-align:center; }

.topbar { display:flex; justify-content: space-between; align-items:center; max-width:1280px; margin: 0 auto; padding:.6rem 1rem 0; }
.topbar .logo-sm { font-family:'Fredoka One',cursive; font-size:1.3rem; color: var(--blue-dark); }
.topbar .logo-sm .coin-dot { color: var(--coin); }
.btn-quit { background: var(--white); color: var(--coral); border:2px solid var(--border); border-radius:999px; padding:.4rem 1rem; font-weight:800; font-size:.9rem; }
.btn-sound { background: var(--white); border:2px solid var(--border); border-radius:999px; padding:.4rem .7rem; font-size:1.1rem; line-height:1; }
.btn-sound.muted { opacity:.5; }

/* ════════════════════════════════════════════════════════
   MODALER (spørsmål, hendelse, seier, skanner)
   ════════════════════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,12,45,.55); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.overlay.show { display: flex; }
.modal {
  background: var(--white); border-radius: 24px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; padding: 1.6rem 1.5rem; text-align: center;
  animation: pop .25s cubic-bezier(.34,1.5,.64,1);
  max-height: 92vh; overflow-y: auto;
}
@keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal .m-emoji { font-size: 3rem; line-height: 1; }
.modal .m-title { font-size: 1.6rem; color: var(--blue-dark); margin: .3rem 0; }
.modal .m-sub { color: var(--muted); font-weight: 700; margin-bottom: 1rem; }
.modal .m-who { font-weight: 900; color: var(--amber-dark); }

/* Spørsmål */
.q-text { font-size: 1.3rem; font-weight: 800; line-height: 1.3; margin: .4rem 0 1rem; color: var(--text); }
.q-reward { font-weight: 800; color: var(--coin); margin-bottom: 1rem; }
.q-options { display: flex; flex-direction: column; gap: .7rem; }
.q-opt {
  background: var(--bg); border: 3px solid var(--border); border-radius: 16px;
  padding: 1rem; font-size: 1.15rem; font-weight: 800; text-align: left; color: var(--text);
  transition: transform .08s, border-color .15s, background .15s;
}
.q-opt:active { transform: scale(.98); }
.q-opt.correct { border-color: var(--green); background: var(--green-light); }
.q-opt.wrong { border-color: var(--coral); background: var(--coral-light); }
.q-opt:disabled { cursor: default; }
.q-feedback { margin-top: 1rem; font-weight: 900; font-size: 1.2rem; min-height: 1.4em; }
.q-feedback.ok { color: var(--green-dark); }
.q-feedback.no { color: var(--coral); }

/* Seier */
.win-mascot { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-md); margin: .4rem auto; }
.final-list { text-align: left; margin: 1rem 0; }
.final-row { display: flex; align-items: center; gap: .7rem; padding: .5rem .2rem; border-bottom: 1px solid var(--border); }
.final-row:last-child { border-bottom: none; }
.final-row .fr-rank { font-weight: 900; width: 26px; color: var(--muted); }
.final-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.final-row .fr-name { flex: 1; font-weight: 900; }
.final-row .fr-coins { font-weight: 900; color: var(--coin); }

/* Innskudd-skanner */
.scanner-frame {
  width: 260px; max-width: 80vw; aspect-ratio: 1; margin: .6rem auto;
  border-radius: 18px; overflow: hidden; background: #000; position: relative;
  box-shadow: inset 0 0 0 4px var(--blue);
}
.scanner-frame video { width: 100%; height: 100%; object-fit: cover; }
.scan-status { font-weight: 700; color: var(--muted); margin-top: .5rem; min-height: 1.3em; }

/* PIN */
.pin-dots { display: flex; gap: .8rem; justify-content: center; margin: 1rem 0; }
.pin-dot { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--blue); }
.pin-dot.filled { background: var(--blue); }
.pin-pad { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; max-width: 300px; margin: 0 auto; }
.pin-key { background: var(--bg); border: 2px solid var(--border); border-radius: 16px; padding: 1rem; font-size: 1.6rem; font-weight: 900; color: var(--blue-dark); }
.pin-key:active { background: var(--blue-light); }
.pin-key.wide { grid-column: span 1; }
.pin-error { color: var(--coral); font-weight: 800; min-height: 1.3em; margin-top: .5rem; }

/* Innskudd-oversikt */
.deposit-list { text-align: left; margin: .6rem 0 1rem; }
.deposit-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .3rem; border-bottom: 1px solid var(--border); }
.deposit-row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.deposit-row .dr-name { flex: 1; font-weight: 900; }
.deposit-row .dr-coins { font-weight: 900; color: var(--coin); }
.deposit-row .dr-state { font-size: .85rem; font-weight: 800; }
.deposit-row .dr-state.done { color: var(--green-dark); }
.deposit-row .dr-state.pending { color: var(--amber-dark); }
.deposit-row .dr-state.guest { color: var(--muted); }
.deposit-row .btn { padding: .5rem 1rem; font-size: .92rem; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--blue-dark); color: #fff; padding: .85rem 1.4rem; border-radius: 999px;
  font-weight: 800; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; z-index: 300; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.coin { color: var(--coin); }

/* Mynt-ikon: eget bilde i stedet for 🪙-emojien */
.myntico { height: 1em; width: auto; vertical-align: -0.18em; margin: 0 .04em; }
.coin-dot-img { height: .82em; width: auto; vertical-align: -0.1em; margin: 0 .03em; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt { margin-top: 1rem; }