/* Ontzi Jokoa — estiloak */

:root {
  --radius: 0.75rem;
  --paper: oklch(95.5% 0.014 78);
  --ink: oklch(24% 0.03 70);
  --background: oklch(95.5% 0.014 78);
  --foreground: oklch(24% 0.03 70);
  --card: oklch(97.2% 0.012 80);
  --card-foreground: oklch(24% 0.03 70);
  --primary: oklch(60.5% 0.19 38.5);
  --primary-foreground: oklch(97.2% 0.012 80);
  --share-surface: oklch(100% 0 0);

  --bin-blue: oklch(68% 0.15 264);
  --bin-brown: oklch(58% 0.12 62);
  --bin-yellow: oklch(82% 0.16 85);
  --bin-grey: oklch(76% 0.005 80);
  --bin-green: oklch(70% 0.15 145);
  --bin-clean: #2e6b3b;
  --bin-textile: oklch(72% 0.14 330);

  --grid-line: color-mix(in oklab, var(--primary) 45%, transparent);
  --paper-texture:
    radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--ink) 6%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, color-mix(in oklab, var(--ink) 5%, transparent) 0 1px, transparent 2px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
button:disabled { cursor: default; }

img, svg { display: block; }

/* ---------- Oinarrizko piezak ---------- */

.card-hard {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
}

.paper-bg {
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-size: 140px 140px, 190px 190px;
}

.grid-bg {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--grid-line) 2px, transparent 2px),
    linear-gradient(to bottom, var(--grid-line) 2px, transparent 2px),
    var(--paper-texture);
  background-size: 132px 132px, 132px 132px, 140px 140px, 190px 190px;
}

.logo { color: var(--primary); height: auto; width: 100%; margin: 0 auto; aspect-ratio: 541.9 / 588.2; }

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 900;
  text-transform: uppercase;
  transition: transform .15s;
}
.btn-primary:hover { transform: translateY(-4px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .7; }

/* ---------- Animazioak ---------- */

.anim-drop  { animation: .55s cubic-bezier(.34, 1.56, .64, 1) both drop-in; }
.anim-float { animation: 4s ease-in-out infinite float-soft; }
.anim-pop   { animation: .4s cubic-bezier(.34, 1.56, .64, 1) both pop-in; }
.anim-shake { animation: .5s ease-in-out both shake-x; }

@keyframes drop-in {
  0%   { opacity: 0; transform: translateY(-40%) rotate(-14deg) scale(.7); }
  60%  { opacity: 1; transform: translateY(4%) rotate(4deg) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
@keyframes shake-x {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-12px) rotate(-3deg); }
  40% { transform: translate(12px) rotate(3deg); }
  60% { transform: translate(-8px) rotate(-2deg); }
  80% { transform: translate(8px) rotate(2deg); }
}
@keyframes pop-in {
  0%   { transform: scale(0) rotate(-90deg); }
  70%  { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .anim-drop, .anim-float, .anim-pop, .anim-shake { animation: none; }
}

/* Hondakinen irudiak: ".f" bideak kolorez aldatzen dira */
.item-svg svg { width: 100%; height: 100%; }
.item-svg .f { fill: var(--item-fill, var(--paper)); transition: fill .3s; }

/* ---------- 1. Hasiera / Inicio ---------- */

.splash {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.25rem 1rem;
  text-align: center;
}
.splash .logo { max-width: 170px; }
.splash-claim {
  margin: 1rem auto 0;
  max-width: 28rem;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: 900;
  text-transform: uppercase;
}
.splash-intro {
  margin: 1rem auto 0;
  max-width: 24rem;
  background: var(--paper);
  padding: .5rem .75rem;
  box-shadow: 3px 3px 0 var(--ink);
}
.splash-intro p { font-size: .875rem; line-height: 1.375; font-weight: 600; }
.lang-tag {
  margin-right: .375rem;
  border-radius: .25rem;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: .125rem .25rem;
  vertical-align: .1em;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.splash-intro hr {
  border: 0;
  height: 2px;
  margin: .375rem 0;
  background: color-mix(in oklab, var(--ink) 15%, transparent);
}
.splash-buttons {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.splash-buttons button { width: 100%; padding: .75rem 1.5rem; font-size: 1rem; line-height: 1.5; }
.org-logo { margin: 1.5rem auto 0; width: 100%; max-width: 150px; height: auto; opacity: .9; }

@media (min-width: 640px) {
  .splash { padding: 1.25rem 1.5rem; }
  .splash .logo { max-width: 300px; }
  .splash-claim { margin-top: 2rem; font-size: 1.875rem; }
  .splash-intro { margin-top: 2rem; max-width: 28rem; padding: .75rem 1.25rem; box-shadow: 5px 5px 0 var(--ink); }
  .splash-intro p { font-size: 1rem; }
  .lang-tag { font-size: .6rem; }
  .splash-intro hr { margin: .625rem 0; }
  .splash-buttons { margin-top: 2.5rem; flex-direction: row; gap: .75rem; }
  .splash-buttons button { width: auto; padding: 1rem 2rem; font-size: 1.125rem; line-height: 1.75; }
  .org-logo { margin-top: 3rem; max-width: 220px; }
}

/* ---------- 2. Jokoa / Juego ---------- */

.play {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: .5rem .75rem;
}
.play-inner {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 28rem;
}
.counter {
  text-align: center;
  font-size: .65rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--foreground) 50%, transparent);
}
.stage {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .125rem 0;
}

/* Erantzun okerra: azalpena */
.wrong-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 15%, transparent);
  padding: .5rem .75rem;
}
.wrong-label {
  font-size: .6rem;
  line-height: 1rem;
  font-weight: 900;
  letter-spacing: .25em;
  color: var(--primary);
  text-transform: uppercase;
}
.wrong-hint {
  margin-top: .25rem;
  text-wrap: balance;
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 900;
}
.btn-continue {
  margin-top: .75rem;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  line-height: 1.25rem;
}
.btn-continue:hover { transform: translateY(-2px); }
.btn-continue svg { width: 1.25rem; height: 1.25rem; }

/* Hondakinaren irudia */
.item {
  aspect-ratio: 1 / 1;
  width: auto;
  flex-shrink: 0;
  height: 100%;
  max-height: 10rem;
}
.item.is-small { height: 4rem; max-height: 4rem; max-width: 4rem; }
.item .item-svg { width: 100%; height: 100%; transition: all .3s; }
.item .item-svg svg { filter: drop-shadow(0 6px 0 color-mix(in oklab, var(--ink) 18%, transparent)); }

.item-title {
  margin-bottom: .25rem;
  padding-bottom: .25rem;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 900;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Denbora */
.timer { margin-bottom: .25rem; display: flex; align-items: center; gap: .5rem; }
.timer-num {
  flex-shrink: 0;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--foreground) 70%, transparent);
}
.timer-num.is-low { color: var(--primary); }
.timer-bar { height: .75rem; flex: 1; overflow: hidden; background: var(--card); }
.timer-fill { height: 100%; width: 0; background: var(--primary); transition: width .2s linear; }

/* Edukiontziak */
.bins {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .375rem;
}
.bin {
  position: relative;
  display: flex;
  min-height: 3rem;
  align-items: center;
  gap: .25rem;
  padding: .25rem;
  text-align: left;
  transition: transform .15s, opacity .15s;
}
.bin:not(:disabled):hover { transform: translateY(-2px); }
.bin.is-picked { transform: scale(1.03); }
.bin.is-dim { opacity: .6; }
.bin-count {
  display: flex;
  height: 2.5rem;
  width: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.bin-label { min-width: 0; flex: 1; background: var(--card); padding: .25rem .5rem; color: var(--card-foreground); }
.bin-name, .bin-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.25;
}
.bin-name { font-size: .875rem; font-weight: 900; }
.bin-desc { font-size: .68rem; color: color-mix(in oklab, var(--card-foreground) 80%, transparent); }

.wrong-box {
  display: flex;
  flex-direction: column;
  min-height: 3rem;
  gap: .125rem;
  overflow: hidden;
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 15%, transparent);
  padding: .25rem;
}
.wrong-box-label { font-size: .62rem; line-height: 1; font-weight: 900; text-transform: uppercase; }
.wrong-list { display: flex; flex-wrap: wrap; align-items: center; min-height: 0; gap: .125rem; overflow: hidden; }
.wrong-list .item-svg { width: 1.25rem; height: 1.25rem; --item-fill: var(--primary); }

@media (min-width: 640px) {
  .play { padding: 1rem 1.25rem; }
  .play-inner { max-width: 48rem; }
  .counter { font-size: .75rem; }
  .stage { gap: .75rem; padding: .5rem 0; }
  .wrong-panel { padding: 1rem 1.5rem; }
  .wrong-label { font-size: .875rem; line-height: 1.25rem; }
  .wrong-hint { margin-top: .5rem; font-size: 1.5rem; }
  .btn-continue { margin-top: 1.25rem; padding: .75rem 1.5rem; font-size: 1rem; line-height: 1.5rem; }
  .item { height: 13rem; max-height: 13rem; width: 13rem; max-width: 13rem; }
  .item.is-small { height: 6rem; max-height: 6rem; width: 6rem; max-width: 4rem; }
  .item-title { margin-bottom: .5rem; font-size: 2.25rem; }
  .timer { margin-bottom: .5rem; gap: .75rem; }
  .timer-num { font-size: 1rem; line-height: 1.5rem; }
  .timer-bar { height: 1rem; }
  .bins { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
  .bin { min-height: 6rem; flex-direction: column; align-items: stretch; gap: .25rem; padding: .5rem; }
  .bin-count { height: 2rem; width: 100%; justify-content: flex-start; padding: 0 .25rem; font-size: 1.5rem; line-height: 2rem; }
  .bin-label { display: flex; flex-direction: column; justify-content: center; padding: .375rem .5rem; }
  .bin-name { font-size: 1rem; }
  .bin-desc { font-size: .875rem; }
  .wrong-box { min-height: 6rem; gap: .25rem; padding: .5rem; }
  .wrong-box-label { font-size: .75rem; }
  .wrong-list { gap: .25rem; }
  .wrong-list .item-svg { width: 1.75rem; height: 1.75rem; }
}

@media (min-width: 1024px) {
  .play { padding: 1.25rem 2rem; }
  .play-inner { max-width: 64rem; }
  .stage { padding: 1rem 0; }
  .wrong-hint { font-size: 1.875rem; }
  .item { height: 20rem; max-height: 20rem; width: 20rem; max-width: 20rem; }
  .item.is-small { height: 7rem; max-height: 7rem; width: 7rem; max-width: 4rem; }
  .item-title { font-size: 3rem; }
  .bins { gap: .75rem; }
  .bin { min-height: 7rem; gap: .5rem; }
  .bin-count { height: 2.25rem; font-size: 1.875rem; line-height: 2.25rem; }
  .bin-label { padding: .5rem .75rem; }
  .bin-name { font-size: 1.125rem; }
  .bin-desc { font-size: 1rem; }
  .wrong-box { min-height: 7rem; }
}

@media (min-width: 1280px) {
  .item { height: 24rem; max-height: 24rem; width: 24rem; max-width: 24rem; }
}

/* ---------- 3. Diploma / Resultado ---------- */

.end {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: .5rem .75rem;
}
.end-inner { width: 100%; max-width: 28rem; }
.raffle { margin-bottom: .5rem; text-align: center; }
.raffle-text { margin: 0 auto; max-width: 24rem; font-size: .875rem; line-height: 1.25; font-weight: 900; }
.raffle-btn {
  margin-top: .5rem;
  width: 100%;
  padding: .75rem 1.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  box-shadow: 4px 4px 0 var(--ink);
}
.raffle-soon {
  margin-top: .25rem;
  text-align: center;
  font-size: .65rem;
  line-height: 1rem;
  font-weight: 900;
  letter-spacing: .2em;
  color: var(--primary);
  text-transform: uppercase;
}

.diploma { position: relative; padding: .25rem; box-shadow: 6px 6px 0 var(--ink); }
.diploma-inner { border-color: var(--primary); padding: .625rem .75rem; text-align: center; }
.diploma-title {
  font-size: .6rem;
  line-height: 1rem;
  font-weight: 900;
  letter-spacing: .3em;
  color: var(--primary);
  text-transform: uppercase;
}
.diploma-rule { margin: .375rem auto; height: 3px; width: 3rem; background: var(--ink); }
.diploma .logo { max-width: 90px; }
.diploma-level {
  margin-top: .5rem;
  font-size: .6rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: color-mix(in oklab, var(--foreground) 60%, transparent);
  text-transform: uppercase;
}
.diploma .org-logo { margin-top: .375rem; max-width: 100px; opacity: .8; }
.stars { margin-top: .375rem; display: flex; justify-content: center; gap: .25rem; }
.star { font-size: 1.25rem; line-height: 1; font-weight: 900; color: color-mix(in oklab, var(--foreground) 15%, transparent); }
.star.is-on { color: var(--primary); }
.diploma-msg { margin-top: .5rem; font-size: .75rem; line-height: 1.25; font-weight: 900; text-transform: uppercase; }
.stats { margin: .5rem auto 0; display: flex; width: 100%; align-items: stretch; justify-content: center; background: var(--card); }
.stat { flex: 1; padding: .25rem .5rem; }
.stat + .stat { border-left: 3px solid var(--ink); }
.stat-label {
  font-size: .55rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: color-mix(in oklab, var(--card-foreground) 60%, transparent);
  text-transform: uppercase;
}
.stat-value { font-size: 1.125rem; line-height: 1.75rem; font-weight: 900; color: var(--card-foreground); }
.stat-value.is-primary { color: var(--primary); }
.diploma-foot {
  margin-top: .375rem;
  font-size: .55rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: color-mix(in oklab, var(--foreground) 50%, transparent);
  text-transform: uppercase;
}

.share-btn {
  margin-top: .75rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--share-surface);
  color: var(--card-foreground);
  padding: .5rem 1rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform .15s;
}
.share-btn:hover { transform: translateY(-4px); }
.share-icons { display: flex; flex-shrink: 0; align-items: center; gap: .375rem; }
.share-icons svg { width: 1rem; height: 1rem; }

.again-btn {
  margin-top: .375rem;
  width: 100%;
  text-align: center;
  font-size: .62rem;
  line-height: 1rem;
  font-weight: 900;
  letter-spacing: .2em;
  color: color-mix(in oklab, var(--foreground) 50%, transparent);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.again-btn:hover { color: var(--foreground); }

@media (min-width: 640px) {
  .end { min-height: 100vh; height: auto; padding: 2rem 1.25rem; }
  .raffle { margin-bottom: 1.25rem; }
  .raffle-text { font-size: 1.125rem; }
  .raffle-btn { margin-top: .75rem; padding: 1rem 2rem; font-size: 1.5rem; line-height: 2rem; }
  .raffle-soon { margin-top: .5rem; font-size: .75rem; }
  .diploma { box-shadow: 10px 10px 0 var(--ink); }
  .diploma-inner { padding: 1.5rem; }
  .diploma-title { font-size: .65rem; letter-spacing: .35em; }
  .diploma-rule { margin: .75rem auto; width: 4rem; }
  .diploma .logo { max-width: 160px; }
  .diploma-level { margin-top: 1rem; font-size: .65rem; letter-spacing: .25em; }
  .diploma .org-logo { margin-top: .75rem; max-width: 160px; }
  .stars { margin-top: .75rem; }
  .star { font-size: 2.25rem; }
  .diploma-msg { margin-top: 1rem; font-size: 1.125rem; }
  .stats { margin-top: 1.25rem; }
  .stat { padding: .75rem; }
  .stat-label { font-size: .6rem; }
  .stat-value { font-size: 1.5rem; line-height: 2rem; }
  .diploma-foot { margin-top: 1.25rem; font-size: .6rem; letter-spacing: .25em; }
  .share-btn { margin-top: 1.5rem; gap: .75rem; padding: .75rem 1rem; font-size: 1.125rem; line-height: 1.75rem; }
  .share-icons svg { width: 1.25rem; height: 1.25rem; }
  .again-btn { margin-top: 1rem; font-size: .75rem; }
}

/* ---------- 4. Partekatzeko panela (ordenagailua) ---------- */

.share-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  overflow-y: auto;
}
.share-panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1rem;
  box-shadow: 6px 6px 0 var(--ink);
  text-align: center;
}
.share-close {
  position: absolute;
  top: .25rem;
  right: .5rem;
  width: 2rem;
  height: 2rem;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 700;
  color: var(--foreground);
}
.share-close:hover { color: var(--primary); }
.share-title {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
}
.share-preview {
  margin: .75rem auto 0;
  width: 100%;
  max-width: 16rem;
  height: auto;
  aspect-ratio: 1 / 1;
}
.share-download {
  margin-top: .75rem;
  width: 100%;
  padding: .625rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
.share-links {
  margin-top: .5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem;
  background: var(--share-surface);
  color: var(--card-foreground);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .15s;
}
.share-link:hover { transform: translateY(-2px); }
.share-link svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.share-note {
  margin-top: .75rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .375rem;
  font-size: .75rem;
  line-height: 1.3;
  font-weight: 600;
  color: color-mix(in oklab, var(--foreground) 70%, transparent);
}
.share-note svg { width: 1rem; height: 1rem; flex-shrink: 0; }