/* Schüttelbox: eigene Teile. Grundlage (Kopf, Menü, Karten, Knöpfe, Rückmeldung) steht in assets/basis.css. */

:root {
  --side-w: clamp(240px, 25vw, 400px);
  --tone: #0d9488;
  --tone-deep: #0f766e;
  --tone-tint: #e6fffa;
  --chip-red: #f43f5e;
  --kraft: #f3e2c0;
  --kraft-deep: #e2c794;
  --wood: #d9b27a;
  /* Gezeichneter Rahmen ohne Fläche in Tinte (Form wie --frame-soft aus _grafiken/zeichne.py) */
  --frame-ink: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M30.00 3.00Q59.28 2.66 90.00 3.00Q117.00 3.00 117.00 30.00Q118.05 59.47 117.00 90.00Q117.00 117.00 90.00 117.00Q59.06 116.54 30.00 117.00Q3.00 117.00 3.00 90.00Q2.52 59.12 3.00 30.00Q3.00 3.00 30.00 3.00Z%22 fill=%22none%22 stroke=%22%231c2230%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}

.card-box { --c: var(--tone); --tint: var(--tone-tint); }
.card-house { --c: #e11d48; --tint: #fff1f4; }

/* ---------- Spielfläche: Schale, Box, Aufgabe ---------- */

.play {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.6vh, 16px);
  min-height: 0;
  padding: 2px 6px 4px;
}

/* Schale als Zehnerstreifen: 5 | 5 */
.tray {
  --slot: clamp(34px, min(6.4vh, 4.4vw), 62px);
  display: flex;
  justify-self: center;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 2px solid transparent;
  border-image: var(--frame-soft) 34 / 18px / 0 stretch;
  border-radius: 18px;
  background: #fff;
  touch-action: none;
}
.tray-gap { flex: none; width: calc(var(--slot) * .35); }

.slot {
  position: relative;
  flex: none;
  width: var(--slot);
  height: var(--slot);
  padding: 0;
  border: 0;
  background: none;
  touch-action: none;
}
.slot svg { width: 100%; height: 100%; }
.slot .chip-full { --art-color: var(--chip-red); cursor: grab; transition: transform .12s; }
.slot:hover .chip-full { transform: translateY(-2px) rotate(-4deg); }
.slot:disabled { cursor: default; }
.slot .chip-hole { opacity: .8; }

/* Box: Größe folgt dem freien Platz (Container-Einheiten der Hülle), Seitenverhältnis 19 : 10 */
.box-wrap {
  container-type: size;
  display: grid;
  place-items: center;
  min-height: 0;
}

.box {
  position: relative;
  container-type: size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.4% minmax(0, 1fr);
  width: min(100cqw, 190cqh);
  aspect-ratio: 19 / 10;
  border: 3px solid transparent;
  border-image: var(--frame-ink) 34 / 26px / 0 stretch;
  border-radius: 26px;
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(255, 255, 255, .55) 0, transparent 55%),
    linear-gradient(180deg, rgba(28, 34, 48, .09), transparent 14%),
    var(--kraft);
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .28), 0 16px 30px -18px rgba(28, 34, 48, .55);
  touch-action: none;
}

.box-half { position: relative; min-width: 0; border-radius: 20px; transition: background-color .2s; }
.box-half.is-target { background: rgba(13, 148, 136, .13); }

.box-wall {
  position: relative;
  margin: 3% 0;
  border-right: 2.6px solid var(--ink);
  border-left: 2.6px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--wood), #c99a5e);
}

.box-chips { position: absolute; inset: 0; pointer-events: none; }

.chip {
  --size: min(10.4cqw, 24cqh);
  position: absolute;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  transition: left .45s cubic-bezier(.2, .8, .2, 1), top .45s cubic-bezier(.2, .8, .2, 1);
  --art-color: var(--chip-red);
}
.chip svg { width: 100%; height: 100%; transform: rotate(var(--turn, 0deg)); }
.chip.is-new { animation: drop .32s cubic-bezier(.2, .9, .3, 1.3); }
.chip.is-dragging { opacity: .25; transition: none; }

/* Plättchen, das gerade gezogen wird */
.ghost {
  position: fixed;
  z-index: 70;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  pointer-events: none;
  filter: drop-shadow(0 10px 10px rgba(28, 34, 48, .3));
  --art-color: var(--chip-red);
}
.ghost svg { width: 100%; height: 100%; transform: scale(1.08) rotate(-6deg); }

/* Deckel: fällt beim Schütteln auf die Box und hebt danach wieder ab */
.lid {
  position: absolute;
  z-index: 5;
  inset: -3.5% -1.6%;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 28px;
  background:
    radial-gradient(90% 70% at 25% 15%, rgba(255, 255, 255, .35) 0, transparent 55%),
    linear-gradient(160deg, #2dd4bf, var(--tone) 70%);
  box-shadow: inset -10px -12px 0 rgba(28, 34, 48, .13), 0 18px 30px -16px rgba(28, 34, 48, .6);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-30%) scale(1.04);
  transition: opacity .25s, transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.lid-label {
  padding: .1em .7em 0;
  border: 2.6px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--tone-deep);
  font-family: var(--font-display);
  font-size: min(9cqh, 5cqw);
  font-weight: 800;
  line-height: 1.2;
  transform: rotate(-3deg);
}
.box.is-closed .lid { opacity: 1; transform: none; }
.box.is-shaking { animation: rattle 1.1s linear; }

/* ---------- Aufgabe notieren ---------- */

.entry { display: grid; justify-items: center; gap: clamp(6px, 1.2vh, 12px); min-width: 0; }

.eq {
  display: flex;
  align-items: center;
  gap: .28em;
  min-height: 1.4em;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6.4vh, 3.6rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.eq .op { padding-top: .12em; color: var(--muted); }
.eq .sum { padding-top: .12em; color: var(--tone-deep); }
.eq .ans { --digits: 2; }
.eq.is-quiet { opacity: .35; }

.numbers {
  container-type: size;
  display: grid;
  grid-template-columns: repeat(var(--n, 11), minmax(0, 1fr));
  gap: 6px;
  width: min(100%, calc(var(--n, 11) * 76px));
  height: clamp(46px, 8.4vh, 76px);
}
.numbers .key b { font-size: clamp(1.1rem, 58cqh, 2.4rem); }
.numbers[hidden] { display: none; }

/* ---------- Zahlenhaus ---------- */

.house {
  container-type: size;
  display: grid;
  grid-template-rows: minmax(0, 1.6fr) minmax(0, var(--floors, 11fr));
  justify-self: center;
  width: min(100%, 330px);
  min-height: 0;
  padding: 2px 4px 6px;
}

.roof { position: relative; min-height: 0; }
.roof svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.roof-num {
  position: absolute;
  left: 50%;
  bottom: 6%;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 7.4cqh, 2.6rem);
  font-weight: 800;
  line-height: 1;
  transform: translateX(-50%);
  text-shadow: 0 2px 0 rgba(28, 34, 48, .25);
}

.floors {
  display: grid;
  grid-template-rows: repeat(var(--rows, 11), minmax(0, 1fr));
  min-height: 0;
  margin: 0 7%;
  border: 2.6px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #fff;
  overflow: hidden;
}

.house-empty {
  display: grid;
  place-items: center;
  margin: 0 7%;
  border: 2.6px dashed #c3c9d6;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  color: var(--muted);
  font-size: clamp(.9rem, 2vh, 1.1rem);
  font-weight: 500;
  text-align: center;
}

.floor { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; border-top: 2px solid var(--ink); }
.room {
  display: grid;
  place-items: center;
  min-width: 0;
  padding-top: .1em;
  font-family: var(--font-display);
  font-size: clamp(.95rem, calc(62cqh / var(--rows, 11)), 2rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.room + .room { border-left: 2px solid var(--ink); }
.floor.is-found .room { background: #fff7f9; }
.floor.is-found .room:first-child { color: #be123c; }
.floor.is-found .room:last-child { color: #1d4ed8; }
.floor.is-new .room { animation: pop .35s ease-out; background: var(--ok-soft); }
.floor.is-seen .room { animation: seen .9s ease-out; }

/* ---------- Tafel-Größen ---------- */

@media (max-aspect-ratio: 1/1) {
  .sheet { grid-template-rows: minmax(0, 1.08fr) minmax(0, 1fr); }
  .house { width: min(100%, 360px); }
}

@media (max-height: 760px) {
  .tray { padding: 4px 10px; }
}

@keyframes drop { from { transform: translateY(-22px) scale(1.15); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes seen { 0%, 100% { background: #fff7f9; } 35% { background: var(--hint-soft); } }
@keyframes rattle {
  0%, 100% { transform: none; }
  8% { transform: translateX(-2.2%) rotate(-2.4deg); }
  16% { transform: translateX(2.4%) rotate(2deg); }
  24% { transform: translateX(-2.6%) rotate(-1.6deg) translateY(-1%); }
  32% { transform: translateX(2.2%) rotate(2.6deg); }
  40% { transform: translateX(-2%) rotate(-2.2deg) translateY(1%); }
  48% { transform: translateX(2.6%) rotate(1.8deg); }
  56% { transform: translateX(-2.4%) rotate(-2.6deg); }
  64% { transform: translateX(2%) rotate(2.2deg) translateY(-1%); }
  72% { transform: translateX(-1.6%) rotate(-1.4deg); }
  82% { transform: translateX(1.2%) rotate(1deg); }
  91% { transform: translateX(-.6%) rotate(-.4deg); }
}