/* spill — «Squishy-glasset»: to like blir én større. Egne klasser: spill-. Kveld, neon og mørkt glass som resten av appen.
   Glasset og alle målene regnes ut fra --s (CSS-piksler per enhet i spillverdenen), som spill.js setter etter skjermstørrelsen. */

.skjerm-spill { overflow: hidden; }
.skjerm-spill .topp { flex: none; }

/* ── Oppsett: poeng til venstre, glasset i midten, neste og kjeden til høyre (liggende). Stående: tallene øverst, kjeden langs siden. ── */
.spill { position: relative; flex: 1; min-height: 0; display: grid; gap: 16px; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(220px, 300px); grid-template-rows: minmax(0, 1fr); grid-template-areas: "hud scene info"; }
.spill-hud { grid-area: hud; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.spill-scene { grid-area: scene; position: relative; min-width: 0; min-height: 0; touch-action: none; }
.spill-info { grid-area: info; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }

/* ── Tall: mørkt glass med store tall i tittelfonten ── */
.spill-stat { min-width: 0; padding: 10px 18px 8px; border-radius: var(--radius); border: 1px solid var(--linje); background: linear-gradient(180deg, var(--kort2), var(--kort)); box-shadow: var(--leke); }
.spill-etikett { display: flex; align-items: center; gap: 8px; font-family: var(--font-tittel); font-weight: 800; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--svak); }
.spill-etikett img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.spill-tall { display: block; transform-origin: left center; font-family: var(--font-tittel); font-weight: 800; font-size: clamp(36px, 7vh, 62px); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; text-shadow: 0 0 22px rgba(255, 79, 163, 0.5); }
.spill-tall.bump { animation: spill-bump 0.35s var(--fjar); }
@keyframes spill-bump { 40% { transform: scale(1.3); } }
.spill-poeng { border-color: color-mix(in srgb, var(--rosa) 55%, transparent); box-shadow: var(--leke), 0 0 24px rgba(255, 79, 163, 0.22); }
.spill-poeng .spill-tall { font-size: clamp(44px, 9vh, 78px); }
.spill-rekord .spill-tall { color: var(--smor); text-shadow: 0 0 22px rgba(255, 210, 63, 0.5); }
.spill-rekord.slaatt { border-color: var(--smor); animation: spill-gull 0.8s ease-in-out infinite alternate; }
@keyframes spill-gull { to { box-shadow: var(--leke), 0 0 34px rgba(255, 210, 63, 0.7); } }
.spill-mynter .spill-tall { color: var(--mynte); text-shadow: 0 0 22px rgba(34, 224, 176, 0.45); }

/* ── Neste og kjeden «slik vokser de» (det hun har møtt i runden lyser, resten er dempet) ── */
.spill-neste { display: flex; flex-direction: column; gap: 8px; }
.spill-neste-bilde { align-self: center; width: min(112px, 100%); aspect-ratio: 1; min-height: 0; padding: 9%; border-radius: 50%; border: 3px solid var(--f, #fff); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--f, #fff) 30%, transparent), color-mix(in srgb, var(--f, #fff) 10%, transparent)); box-shadow: 0 0 20px color-mix(in srgb, var(--f, #fff) 55%, transparent); }
.spill-neste-bilde.pop { animation: spill-pop 0.45s var(--fjar); }
@keyframes spill-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.spill-neste-bilde .sq-emoji, .spill-trinn .sq-emoji { font-size: 1.6em; }
.spill-kjede { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.spill-trinn { aspect-ratio: 1; min-width: 0; min-height: 0; padding: 7%; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--f) 35%, transparent); background: color-mix(in srgb, var(--f) 9%, var(--kort)); opacity: 0.42; filter: grayscale(0.75) brightness(0.8); transition: opacity 0.3s, filter 0.3s, box-shadow 0.3s; }
.spill-trinn.nadd { opacity: 1; filter: none; border-color: var(--f); box-shadow: 0 0 14px color-mix(in srgb, var(--f) 55%, transparent); }
.spill-trinn.ny { animation: spill-pop 0.6s var(--fjar); }
.spill-trinn.mal { border-style: dashed; }
.spill-trinn.mal.nadd { border-style: solid; box-shadow: 0 0 22px #ff7ad9, 0 0 40px rgba(157, 107, 255, 0.6); }

/* ── Glasset: høyt, mørkt, med neonkant og en stiplet farelinje øverst ── */
.spill-boks { position: absolute; left: 50%; top: 50%; width: calc(var(--s, 0.5px) * var(--bw)); height: calc(var(--s, 0.5px) * var(--bh)); transform: translate(-50%, -50%); touch-action: none; }
.spill-glass, .spill-refleks { position: absolute; left: calc(var(--s, 0.5px) * var(--gx)); top: calc(var(--s, 0.5px) * var(--gy)); width: calc(var(--s, 0.5px) * var(--gw)); height: calc(var(--s, 0.5px) * var(--gh)); border-radius: 0 0 calc(var(--s, 0.5px) * 20) calc(var(--s, 0.5px) * 20); pointer-events: none; }
.spill-glass { z-index: 1; }
/* kanten: gradient rundt et ugjennomsiktig mørkt glass (samme triks som .knapp), åpen i toppen */
.spill-glass::before { content: ""; position: absolute; inset: 0 calc(var(--s, 0.5px) * -14) calc(var(--s, 0.5px) * -14); border: calc(var(--s, 0.5px) * 14) solid transparent; border-top: 0; border-radius: 0 0 calc(var(--s, 0.5px) * 34) calc(var(--s, 0.5px) * 34);
  background: linear-gradient(180deg, #2a2145, #170f27 42%, #0b0813) padding-box, linear-gradient(170deg, var(--rosa), var(--lilla) 48%, var(--himmel)) border-box; }
.spill-glass::after { content: ""; position: absolute; inset: 0 calc(var(--s, 0.5px) * -14) calc(var(--s, 0.5px) * -14); border-radius: 0 0 calc(var(--s, 0.5px) * 34) calc(var(--s, 0.5px) * 34);
  box-shadow: 0 0 calc(var(--s, 0.5px) * 40) rgba(157, 107, 255, 0.55), 0 0 calc(var(--s, 0.5px) * 100) rgba(255, 79, 163, 0.2), inset 0 0 calc(var(--s, 0.5px) * 34) rgba(56, 194, 255, 0.18); }
.spill-lerret { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; touch-action: none; }
.spill-refleks { z-index: 3; background: linear-gradient(104deg, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0.1) 7%, rgba(255, 255, 255, 0.03) 11%, rgba(255, 255, 255, 0) 14%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 30%); }

.spill-fare { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--s, 0.5px) * var(--fy)); border-bottom: max(2px, calc(var(--s, 0.5px) * 4)) dashed rgba(255, 77, 109, 0.8); background: linear-gradient(0deg, rgba(255, 77, 109, 0.14), rgba(255, 77, 109, 0) 85%); }
.spill-fare span { position: absolute; right: 10px; bottom: 6px; font-family: var(--font-tittel); font-weight: 800; font-size: calc(var(--s, 0.5px) * 24); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rod); opacity: 0; transition: opacity 0.15s; }
.spill-glass.fare .spill-fare { animation: spill-fare 0.4s ease-in-out infinite alternate; }
.spill-glass.fare .spill-fare span { opacity: 1; }
@keyframes spill-fare { from { background-color: rgba(255, 77, 109, 0.08); border-bottom-color: rgba(255, 77, 109, 0.6); } to { background-color: rgba(255, 77, 109, 0.36); border-bottom-color: #ff4d6d; } }

/* ── Forklaring første gang: forsvinner ved første trykk ── */
.spill-intro { position: absolute; z-index: 4; left: 50%; top: calc(var(--s, 0.5px) * 400); width: min(88%, 460px); transform: translateX(-50%); padding: 14px 22px 18px; text-align: center; border-radius: 26px; border: 1px solid var(--linje); background: rgba(14, 10, 24, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 44px rgba(157, 107, 255, 0.5); pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
.spill-intro p { margin: 4px 0 0; font-size: clamp(21px, 3.2vh, 30px); font-weight: 800; line-height: 1.25; }
.spill-intro b { color: var(--rosa); text-transform: uppercase; }
.spill-intro.ut { opacity: 0; transform: translate(-50%, -14px); }
.spill-hand { display: block; font-size: 48px; animation: spill-svai 1.8s ease-in-out infinite; }
@keyframes spill-svai { 0%, 100% { transform: translateX(-70px) rotate(-12deg); } 50% { transform: translateX(70px) rotate(12deg); } }

/* ── Spillet er over ── */
.spill-slutt { position: absolute; inset: -6px; z-index: 10; display: grid; place-items: center; padding: 12px; border-radius: 28px; background: rgba(8, 5, 14, 0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: tone 0.3s ease; }
.spill-slutt-kort { width: min(580px, 100%); padding: 24px 24px 26px; text-align: center; border-radius: 30px; border: 1px solid var(--linje); background: linear-gradient(180deg, #2b2142, #15101f); box-shadow: 0 0 70px rgba(157, 107, 255, 0.45), var(--leke); animation: sprett 0.5s var(--fjar); }
.spill-slutt-kort h2 { font-size: clamp(34px, 5vw, 54px); line-height: 1; margin-bottom: 10px; }
.spill-ny { display: inline-block; margin: 0 0 8px; padding: 6px 20px; border-radius: 99px; font-family: var(--font-tittel); font-weight: 800; font-size: 26px; letter-spacing: 0.08em; text-transform: uppercase; color: #1a1020; background: linear-gradient(110deg, #ffd23f 20%, #fffbe6 40%, #e9a923 60%); background-size: 250% 100%; animation: glim 2s linear infinite; box-shadow: 0 0 22px rgba(255, 210, 63, 0.6); }
.spill-slutt-poeng { display: grid; margin: 2px 0 14px; }
.spill-slutt-poeng span, .spill-slutt-rad span { font-family: var(--font-tittel); font-weight: 800; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--svak); }
.spill-slutt-poeng b { font-family: var(--font-tittel); font-weight: 800; font-size: clamp(56px, 11vh, 96px); line-height: 1; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 28px rgba(255, 79, 163, 0.6); }
.spill-slutt-rad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.spill-slutt-rad > div { display: grid; gap: 2px; justify-items: center; align-content: center; padding: 10px 6px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linje); }
.spill-slutt-rad b { font-family: var(--font-tittel); font-weight: 800; font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.spill-slutt-storst .sq-bilde, .spill-slutt-storst .sq-emoji { width: 52px; height: 52px; font-size: 30px; }
.spill-slutt-storst small { font-weight: 700; font-size: 15px; color: var(--svak); }

/* ── Stående: tallene i en rad øverst, glasset og kjeden under ── */
@media (orientation: portrait) {
  .spill { grid-template-columns: minmax(0, 1fr) 92px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "hud hud" "scene info"; gap: 12px; }
  .spill-hud { flex-direction: row; gap: 10px; }
  .spill-hud .spill-stat { flex: 1 1 0; padding: 8px 14px 6px; }
  .spill-tall { font-size: clamp(30px, 5.5vw, 50px); }
  .spill-poeng .spill-tall { font-size: clamp(34px, 6.5vw, 58px); }
  .spill-info { gap: 10px; }
  .spill-info .spill-neste { padding: 8px 8px 10px; align-items: center; }
  .spill-info .spill-etikett { font-size: 15px; letter-spacing: 0.1em; }
  .spill-kjede { grid-template-columns: minmax(0, 1fr); gap: 5px; justify-items: center; }
  .spill-trinn { width: 54px; border-radius: 14px; }
}

/* ── Reduser bevegelse: ingen blinkende eller svevende ting (app.css gjør bare tidene kortere, og det gir flimring på uendelige animasjoner) ── */
@media (prefers-reduced-motion: reduce) {
  .spill-hand, .spill-ny, .spill-rekord.slaatt { animation: none; }
  .spill-glass.fare .spill-fare { animation: none; background-color: rgba(255, 77, 109, 0.3); border-bottom-color: #ff4d6d; }
}