/* Simulator. Sized in screen-height units so the whole game fits on one projector or laptop screen. */
html, body { height: 100%; }
body {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(180deg, #fff3d6 0%, #fbd9a0 100%);
  overflow-x: hidden;
}

/* ---- Top bar ---- */
.top {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 2vw;
  padding: 0.8vh 2vw; background: #5a2d0c; color: var(--cream);
  border-bottom: 0.6vh solid var(--orange);
}
.top h1 { margin: 0; font-size: clamp(22px, 4.6vh, 60px); font-weight: 700; letter-spacing: 0.04em; color: var(--gold); line-height: 1.1; }
.tools { display: flex; align-items: center; gap: 1.6vw; font-size: clamp(14px, 2.2vh, 26px); }
.check { display: flex; align-items: center; gap: 0.6vw; position: relative; }
.check label { font-weight: 600; }
.check input {
  width: 4.2em; padding: 0.3em 0.4em; text-align: center; font-weight: 700;
  border: 2px solid var(--gold); border-radius: 0.5em; background: #fff; color: var(--ink);
}
.check button, .quiet, .danger {
  padding: 0.35em 0.9em; border-radius: 0.6em; font-weight: 600; cursor: pointer;
  border: 2px solid var(--gold); background: var(--orange); color: #fff;
}
.quiet { background: transparent; color: var(--cream); border-color: #c79a5b; }
.danger { background: var(--red); border-color: #8f1616; }
.link { color: var(--gold); }
.check-error {
  position: absolute; top: 115%; left: 0; z-index: 3; white-space: nowrap;
  padding: 0.3em 0.7em; border-radius: 0.5em; background: #fff; color: #a31515; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #1d6fd1; outline-offset: 2px; }

/* ---- Stage: the item just drawn ---- */
main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.stage {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2vw;
  padding: 1vh 2vw;
}
.current { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.pic {
  width: min(37vh, 34vw); height: min(37vh, 34vw);
  padding: 1.2vh; border-radius: 3vh; background: #fff;
  border: 0.8vh solid var(--gold); box-shadow: 0 1vh 3vh rgba(90, 45, 12, 0.3);
}
.label {
  margin-top: 0.6vh; font-size: min(8.2vh, 7vw); font-weight: 700; line-height: 1.1;
  color: var(--rust); text-align: center; white-space: nowrap;
}
.stage.empty .pic { opacity: 0.5; }
.stage.empty .label { font-size: min(5.5vh, 5vw); color: var(--ink); }
.stage.spinning .pic { border-color: var(--orange); }
.stage.spinning .label { color: #c79a5b; }

.pop { animation: pop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.pop-label { animation: pop-label 0.5s 0.1s ease-out both; }
@keyframes pop {
  0% { transform: scale(0.3) rotate(-14deg); }
  60% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes pop-label {
  0% { transform: translateY(2vh) scale(0.6); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.falling {
  position: absolute; top: -8vh; left: var(--x); width: var(--size); height: var(--size);
  pointer-events: none; animation: fall 1.5s var(--delay) ease-in both;
}
@keyframes fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(70vh) rotate(var(--spin)); opacity: 0; }
}

.controls { display: flex; flex-direction: column; align-items: center; justify-self: start; gap: 0.6vh; }
.draw {
  width: min(30vh, 24vw); height: min(21vh, 17vw); border-radius: 4vh;
  font-size: min(9vh, 7vw); font-weight: 700; letter-spacing: 0.03em; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #f2622a, #c93a12);
  border: 0.7vh solid var(--gold); box-shadow: 0 1.2vh 0 #7e2408, 0 2vh 3vh rgba(90, 45, 12, 0.35);
  transition: transform 0.08s, box-shadow 0.08s;
}
.draw:active { transform: translateY(0.8vh); box-shadow: 0 0.4vh 0 #7e2408, 0 1vh 2vh rgba(90, 45, 12, 0.35); }
.draw:disabled { background: #b9a68c; border-color: #d8cbb4; box-shadow: none; cursor: default; font-size: min(5vh, 4vw); }
.hint { margin: 1.4vh 0 0; font-size: clamp(12px, 2.1vh, 26px); color: #7a5230; }
.count { margin: 0; font-size: clamp(18px, 4.4vh, 56px); font-weight: 700; color: var(--ink); white-space: nowrap; }

.recent { justify-self: end; text-align: center; }
.recent h2 { margin: 0 0 0.6vh; font-size: clamp(12px, 2.3vh, 28px); font-weight: 600; color: #7a5230; }
.recent-list { display: flex; gap: 1vw; min-height: 14vh; justify-content: center; }
.chip { width: min(11vh, 9vw); }
.chip-pic { width: 100%; aspect-ratio: 1; padding: 0.5vh; background: #fff; border: 0.4vh solid #e9b45c; border-radius: 1.6vh; }
.chip-name { margin-top: 0.3vh; font-size: clamp(10px, 1.7vh, 22px); font-weight: 600; white-space: nowrap; }
.chip:nth-child(2) { opacity: 0.75; }
.chip:nth-child(3) { opacity: 0.5; }

/* ---- Board of all 40 items ---- */
.board {
  flex: none; display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.7vh;
  padding: 1vh 1.2vw 1.2vh; background: #f3c98b; border-top: 0.5vh solid #d99445;
}
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 8.6vh; min-height: 56px; padding: 0.3vh; border-radius: 1.2vh;
  background: #f8e3c0; border: 0.35vh solid transparent;
}
.tile-pic { height: 6vh; min-height: 36px; aspect-ratio: 1; flex: none; opacity: 0.22; filter: grayscale(1); }
.tile-name { font-size: clamp(9px, 1.55vh, 20px); font-weight: 600; line-height: 1.15; white-space: nowrap; color: #a48a6a; }
.tile.on { background: #fff; border-color: var(--orange); box-shadow: 0 0.3vh 0.8vh rgba(90, 45, 12, 0.3); }
.tile.on .tile-pic { opacity: 1; filter: none; }
.tile.on .tile-name { color: var(--ink); }
.tile.just-on { animation: tile-on 0.9s ease-out; }
@keyframes tile-on {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); background: var(--gold); }
  100% { transform: scale(1); }
}

/* ---- Pop-up panels ---- */
.overlay {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(60, 30, 8, 0.72); padding: 2vh 2vw;
}
.panel { background: var(--cream); border: 0.8vh solid var(--orange); border-radius: 3vh; padding: 2vh 2.4vh; max-height: 96vh; }
.panel .quiet { color: var(--ink); border-color: #b97a45; background: #fff; }
.panel-head { display: flex; align-items: center; gap: 3vh; margin-bottom: 1.4vh; }
.panel-head h2 { margin: 0; font-size: min(5.5vh, 6vw); font-weight: 700; }
.verdict { flex: 1; margin: 0; text-align: center; font-size: min(5.5vh, 6vw); font-weight: 700; color: #7a5230; }
.verdict.win { color: var(--red); animation: pop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.panel-head .quiet { font-size: min(3vh, 4vw); padding: 0.3em 1em; }

.check-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6vh;
  width: min(74vh, 92vw); height: min(74vh, 92vw);
}
.check-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 0; padding: 0.4vh; border-radius: 1.4vh; background: #fff; border: 0.4vh solid #d8c3a0;
}
.check-pic { height: 68%; aspect-ratio: 1; flex: none; opacity: 0.4; }
.check-name { font-size: min(2vh, 2.4vw); font-weight: 600; white-space: nowrap; color: #8a7558; }
.check-cell.hit { background: #ffe58a; border-color: #e09a00; }
.check-cell.hit .check-pic { opacity: 1; }
.check-cell.hit .check-name { color: var(--ink); }
.check-cell.win { border-color: var(--red); box-shadow: 0 0 0 0.45vh var(--red); z-index: 1; }
.check-mark { position: absolute; top: 3%; right: 3%; width: 26%; height: 26%; }
.check-key { margin: 1.2vh 0 0; font-size: min(2.2vh, 3vw); text-align: center; color: #7a5230; }
.key-swatch { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: #ffe58a; border: 2px solid #e09a00; border-radius: 0.2em; }

.confirm-panel { text-align: center; padding: 4vh 5vh; max-width: 92vw; }
.confirm-panel h2 { margin: 0; font-size: min(7vh, 9vw); font-weight: 700; color: var(--rust); }
.confirm-panel p { margin: 1.5vh 0 3vh; font-size: min(3.2vh, 4.5vw); }
.confirm-buttons { display: flex; gap: 3vh; justify-content: center; flex-wrap: wrap; font-size: min(3.4vh, 4.5vw); }

/* ---- Narrow or upright screens (a tablet or phone): stack, and let the page scroll ---- */
@media (max-width: 820px), (max-aspect-ratio: 1/1) {
  .top { flex-wrap: wrap; }
  .tools { flex-wrap: wrap; gap: 10px 16px; font-size: 15px; }
  .stage { grid-template-columns: 1fr; gap: 1.5vh; padding: 2vh 3vw; overflow: visible; }
  .current { order: 1; }
  .controls { order: 2; justify-self: center; }
  .recent { order: 3; justify-self: center; }
  .pic { width: min(60vw, 40vh); height: min(60vw, 40vh); }
  .label { font-size: 9vw; }
  .draw { width: 60vw; height: 16vw; font-size: 9vw; }
  .chip { width: 18vw; }
  .board { grid-template-columns: repeat(5, 1fr); }
  .tile { height: auto; padding: 6px 2px; }
  .tile-pic { height: 12vw; }
  .tile-name { font-size: 2.6vw; }
}

@media (prefers-reduced-motion: reduce) {
  .pop, .pop-label, .tile.just-on, .verdict.win { animation: none; }
}