/* Plinko
 *
 * Skriften er Inter, hostet lokalt (assets/fonts, SIL OFL) — ikke fra Google
 * Fonts, som sender brukerens IP til Google ved hver sidevisning. Den er
 * registrert under et eget navn og brukes bare i #plinko, sa resten av siden
 * ikke endrer utseende.
 */
@font-face {
  font-family: 'PB Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  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;
}
@font-face {
  font-family: 'PB Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  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-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

#plinko {
  --plk-bg: #0e1215;
  --plk-panel: #151b1f;
  --plk-raised: #1b2227;
  --plk-line: rgba(255, 255, 255, .07);
  --plk-line-strong: rgba(255, 255, 255, .12);
  --plk-text: #e9eef2;
  --plk-muted: #8a97a2;
  --plk-faint: #5d6a74;
  --plk-accent: #479feb;
  --plk-accent-hi: #6cb6f5;
  --plk-up: #3ddc97;
  --plk-down: #ff5c7a;
  max-width: 1480px;
  margin: 0 auto;
  padding: 32px 24px 72px;
  font-family: 'PB Inter', 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  color: var(--plk-text);
  -webkit-font-smoothing: antialiased;
}
#plinko * { box-sizing: border-box; }
#plinko button, #plinko input { font: inherit; color: inherit; }
#plinko .plk b, #plinko .plk strong { font-weight: 650; }

/* ------------------------------------------------------------------ layout */
.plk-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 210px;
  gap: 16px; align-items: start;
}

/* ------------------------------------------------------------------- panel */
.plk-panel {
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px; border: 1px solid var(--plk-line); border-radius: 16px;
  background: var(--plk-panel);
  position: sticky; top: calc(var(--header-h, 0px) + 16px);
}
.plk-field { display: flex; flex-direction: column; gap: 8px; }
.plk-label {
  display: flex; align-items: baseline; justify-content: space-between;
  color: var(--plk-muted); font-size: 13px; font-weight: 500;
}
.plk-label b { color: var(--plk-text); font-size: 15px; font-variant-numeric: tabular-nums; }

.plk-money {
  display: flex; align-items: center; height: 46px;
  border: 1px solid var(--plk-line-strong); border-radius: 11px;
  background: var(--plk-bg); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.plk-money:focus-within { border-color: var(--plk-accent); box-shadow: 0 0 0 3px rgba(71, 159, 235, .18); }
.plk-money > span { padding-left: 14px; color: var(--plk-faint); font-weight: 600; }
.plk-money input {
  flex: 1; min-width: 0; height: 100%; padding: 0 8px;
  border: 0; outline: 0; background: transparent;
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.plk-money button {
  height: 32px; min-width: 40px; margin-right: 6px; padding: 0 10px;
  border: 0; border-radius: 8px; background: var(--plk-raised);
  color: var(--plk-muted); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.plk-money button:hover:not(:disabled) { background: #26303a; color: var(--plk-text); }

.plk-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; border-radius: 11px; background: var(--plk-bg);
  border: 1px solid var(--plk-line);
}
.plk-seg-4 { grid-template-columns: repeat(3, .7fr) 1.6fr; }
.plk-seg button {
  height: 36px; border: 0; border-radius: 8px; background: transparent;
  color: var(--plk-muted); font-size: 14px; font-weight: 550; cursor: pointer;
  transition: background .15s, color .15s;
  font-variant-numeric: tabular-nums;
}
.plk-seg button:hover:not(:disabled):not(.active) { color: var(--plk-text); }
.plk-seg button.active {
  background: var(--plk-raised); color: var(--plk-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 2px 8px rgba(0, 0, 0, .3);
}

/* Slider
 *
 * Tommelen beveger seg innenfor innholdsboksen til <input>. Sidens globale
 * `input { padding; border }` krympet den boksen, sa tommelen stoppet 13 px
 * for kanten — derfor nullstilles padding/border/bakgrunn her.
 *
 * Sporet stiles via pseudo-elementene (ikke selve input-en), og fyllet slutter
 * noyaktig under tommelens senter: halv tommel + (bredde − tommel) × p.
 * Tommelen er ugjennomsiktig, sa overgangen skjules alltid bak den.
 * Firefox har eget fyll-element (::-moz-range-progress) og trenger ikke --p.
 */
#plinko .plk-range {
  --p: .5; --thumb: 20px; --track: 6px;
  --fill: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p));
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: var(--thumb); min-width: 0;
  margin: 2px 0 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; cursor: pointer; outline: 0;
}
#plinko .plk-range::-webkit-slider-runnable-track {
  height: var(--track); border-radius: 999px;
  background: linear-gradient(90deg, var(--plk-accent) var(--fill), #28323b var(--fill));
}
#plinko .plk-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb); height: var(--thumb); border-radius: 50%; border: 0;
  margin-top: calc((var(--track) - var(--thumb)) / 2);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(71, 159, 235, .28), 0 2px 6px rgba(0, 0, 0, .45);
  transition: transform .12s, box-shadow .12s;
}
#plinko .plk-range::-moz-range-track {
  height: var(--track); border-radius: 999px; background: #28323b;
}
#plinko .plk-range::-moz-range-progress {
  height: var(--track); border-radius: 999px; background: var(--plk-accent);
}
#plinko .plk-range::-moz-range-thumb {
  width: var(--thumb); height: var(--thumb); border-radius: 50%; border: 0; background: #fff;
  box-shadow: 0 0 0 4px rgba(71, 159, 235, .28), 0 2px 6px rgba(0, 0, 0, .45);
}
#plinko .plk-range:active::-webkit-slider-thumb { transform: scale(1.12); }
#plinko .plk-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(71, 159, 235, .5); }
#plinko .plk-range:disabled { cursor: not-allowed; }
.plk-ticks {
  display: flex; justify-content: space-between;
  color: var(--plk-faint); font-size: 12px; font-variant-numeric: tabular-nums;
}

.plk-custom { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.plk-custom[hidden] { display: none; }
.plk-stepper {
  display: grid; grid-template-columns: 44px 1fr 44px; height: 44px;
  border: 1px solid var(--plk-line-strong); border-radius: 11px;
  background: var(--plk-bg); overflow: hidden;
}
.plk-stepper button {
  border: 0; background: var(--plk-raised); color: var(--plk-text);
  font-size: 20px; line-height: 1; cursor: pointer; user-select: none;
  touch-action: manipulation; transition: background .12s;
}
.plk-stepper button:hover:not(:disabled) { background: #26303a; }
.plk-stepper input {
  width: 100%; border: 0; outline: 0; background: transparent; text-align: center;
  font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.plk-stepper input::-webkit-inner-spin-button, .plk-stepper input::-webkit-outer-spin-button,
.plk-money input::-webkit-inner-spin-button, .plk-money input::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}

.plk-switch {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  color: var(--plk-muted); font-size: 14px; user-select: none;
}
.plk-switch input { position: absolute; opacity: 0; pointer-events: none; }
.plk-switch-track {
  position: relative; width: 38px; height: 22px; border-radius: 999px;
  background: #28323b; transition: background .18s;
}
.plk-switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .18s;
}
.plk-switch input:checked + .plk-switch-track { background: var(--plk-accent); }
.plk-switch input:checked + .plk-switch-track::after { transform: translateX(16px); }
.plk-switch input:focus-visible + .plk-switch-track { box-shadow: 0 0 0 3px rgba(71, 159, 235, .35); }

.plk-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid var(--plk-line);
  color: var(--plk-muted); font-size: 14px;
}
.plk-total b { color: var(--plk-text); font-size: 18px; font-variant-numeric: tabular-nums; }

.plk-play {
  height: 54px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #5aaaf0, #3288d6);
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 24px -8px rgba(71, 159, 235, .7);
  transition: transform .08s, filter .15s, box-shadow .15s;
}
.plk-play:hover:not(:disabled) { filter: brightness(1.07); }
.plk-play:active:not(:disabled) { transform: translateY(1px) scale(.995); }
.plk-play:disabled { cursor: default; filter: saturate(.55) brightness(.8); box-shadow: none; }

#plinko .plk-panel :disabled { cursor: not-allowed; }
.plk-busy .plk-field { opacity: .55; transition: opacity .2s; }

/* ------------------------------------------------------------------- brett */
.plk-stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.plk-board {
  position: relative; padding: 18px 18px 22px; border-radius: 18px;
  border: 1px solid var(--plk-line);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(71, 159, 235, .10), transparent 60%),
    radial-gradient(90% 60% at 50% 100%, rgba(255, 138, 61, .07), transparent 70%),
    var(--plk-bg);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6) inset;
  overflow: hidden;
}
.plk-board canvas { display: block; width: 100%; }

.plk-buckets {
  --n: 13; --w: 93%;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px;
  width: var(--w); margin: 2px auto 0;
  container-type: inline-size;   /* lar skriften folge bottebredden */
}
.plk-bucket {
  --c: 255, 201, 60;
  display: grid; place-items: center; height: 34px; border-radius: 7px;
  background: linear-gradient(180deg, rgba(var(--c), 1), rgba(var(--c), .82));
  box-shadow: 0 3px 0 rgba(var(--c), .38), 0 0 0 rgba(var(--c), 0);
  color: #1b0f06; font-weight: 750; font-variant-numeric: tabular-nums;
  /* Skriften skaleres etter hvor bred hver botte faktisk er, ikke etter
     vindusbredde: 17 botter pa en mobil og 9 pa en skjerm skal begge passe. */
  font-size: clamp(7.5px, calc(100cqw / var(--n) * .29), 13px);
  letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden;
  transition: transform .18s cubic-bezier(.3, .7, .4, 1.4), box-shadow .3s;
}
.plk-bucket i { font-style: normal; opacity: .6; margin-left: 1px; }
.plk-bucket.hit {
  animation: plk-hit .42s cubic-bezier(.3, .7, .4, 1.3);
}
@keyframes plk-hit {
  0%   { transform: translateY(0);   box-shadow: 0 3px 0 rgba(var(--c), .38), 0 0 0 rgba(var(--c), 0); }
  30%  { transform: translateY(5px); box-shadow: 0 0 0 rgba(var(--c), .38), 0 0 26px rgba(var(--c), .75); }
  100% { transform: translateY(0);   box-shadow: 0 3px 0 rgba(var(--c), .38), 0 0 0 rgba(var(--c), 0); }
}

.plk-result {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid transparent; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s;
}
.plk-result.show { opacity: 1; transform: none; border-color: var(--plk-line); background: var(--plk-panel); }
.plk-result span { color: var(--plk-muted); font-size: 14px; }
.plk-result b { font-size: 20px; }
.plk-result em { font-style: normal; font-weight: 650; font-size: 14px; }
.plk-result.up em { color: var(--plk-up); }
.plk-result.down em { color: var(--plk-down); }
.plk-result.even em { color: var(--plk-muted); }

/* ------------------------------------------------------------------- side */
.plk-side { display: flex; flex-direction: column; gap: 16px; }
.plk-side-block {
  padding: 16px; border: 1px solid var(--plk-line); border-radius: 16px;
  background: var(--plk-panel);
}
.plk-side-title { margin-bottom: 12px; color: var(--plk-muted); font-size: 13px; font-weight: 500; }
.plk-history { display: flex; flex-direction: column; gap: 6px; }
.plk-chip {
  --c: 255, 201, 60;
  display: block; padding: 7px 10px; border-radius: 8px; text-align: center;
  background: rgba(var(--c), .14); color: rgb(var(--c));
  border: 1px solid rgba(var(--c), .28);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  animation: plk-chip-in .3s ease-out;
}
.plk-history .plk-chip:first-child { background: rgba(var(--c), .24); }
@keyframes plk-chip-in { from { opacity: 0; transform: translateY(-6px); } }
.plk-empty { margin: 0; color: var(--plk-faint); font-size: 13px; }
.plk-session { display: flex; flex-direction: column; gap: 10px; }
.plk-session div { display: flex; justify-content: space-between; font-size: 13px; }
.plk-session span { color: var(--plk-muted); }
.plk-session b { font-variant-numeric: tabular-nums; }
.plk-session b.up { color: var(--plk-up); }
.plk-session b.down { color: var(--plk-down); }

/* -------------------------------------------------------------- responsivt */
@media (max-width: 1180px) {
  .plk-layout { grid-template-columns: 290px minmax(0, 1fr); }
  .plk-side { grid-column: 1 / -1; flex-direction: row; }
  .plk-side-block { flex: 1; }
  .plk-history { flex-direction: row; flex-wrap: wrap; }
  .plk-chip { min-width: 58px; }
}
@media (max-width: 820px) {
  #plinko { padding: 20px 14px 56px; }
  .plk-layout { grid-template-columns: 1fr; }
  .plk-stage { order: -1; }
  .plk-panel { position: static; }
  .plk-side { flex-direction: column; }
  .plk-board { padding: 10px 8px 14px; }
  .plk-bucket { height: 28px; border-radius: 5px; }
  .plk-bucket i { display: none; }
  .plk-buckets { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .plk-bucket.hit, .plk-chip { animation: none; }
}