/* Each word pack changes scenery, accents, and puzzle materials during play. */
:root {
  --scene: none;
  --world-border: #8d67bf;
  --world-panel: #1c1534;
  --tile-bg: #fcfaff;
  --tile-ink: #241633;
  --tile-edge: #cec3e1;
  --tile-shadow: #bdb0d4;
  --board-bg: #dcd3ee;
}
:root[data-pack='nature'] {
  background: #061e20; color: #f0fff7;
  --scene: url('/assets/nature-scene.png');
  --purple: #a7e5bd; --cyan: #83f4d1; --lime: #f4d477; --pink: #ffbb86;
  --muted: #b8d8cf; --line: #c5ffe324; --panel: #0c302e;
  --world-border: #609f83; --world-panel: #0b2b29;
  --tile-bg: #f5fff4; --tile-ink: #12352b; --tile-edge: #b8d6bb;
  --tile-shadow: #9ebb9e; --board-bg: #d6e8ce;
}
:root[data-pack='space'] {
  background: #070f2c; color: #f1f5ff;
  --scene: url('/assets/space-scene.png');
  --purple: #bec4ff; --cyan: #80dfff; --lime: #bfbcff; --pink: #e5b5ff;
  --muted: #bdc8e8; --line: #b9cfff28; --panel: #121d43;
  --world-border: #7378bd; --world-panel: #111a3c;
  --tile-bg: #f4f9ff; --tile-ink: #172c52; --tile-edge: #becde6;
  --tile-shadow: #9aafd2; --board-bg: #d0dff2;
}
.pack-backdrop {
  position: absolute; inset: -3%; background-image: var(--scene);
  background-size: cover; background-position: center;
  opacity: 0; animation: world-drift 45s ease-in-out infinite alternate;
}
:root:not([data-pack='mix']) .pack-backdrop { opacity: .8; }
:root:not([data-pack='mix']) .arcade-background::after {
  background: linear-gradient(90deg, #030e2088, #030e2040 55%, #030e2015), linear-gradient(0deg, #030e2055, transparent 50%);
}
:root[data-pack='nature'] .arcade-background::after {
  background: linear-gradient(90deg, #031d1b99, #031d1b50 55%, #031d1b18), linear-gradient(0deg, #031d1b66, transparent 55%);
}
:root:not([data-pack='mix']) .arcade-grid { display: none; }
:root:not([data-pack='mix']) .ambient-glow { opacity: .35; }
:root[data-pack='nature'] .glow-pink { background: radial-gradient(circle, #3a9e6640, transparent 68%); }
:root[data-pack='nature'] .glow-blue { background: radial-gradient(circle, #ffe08938, transparent 68%); }
:root[data-pack='space'] .glow-pink { background: radial-gradient(circle, #7749ff40, transparent 68%); }
:root[data-pack='space'] .glow-blue { background: radial-gradient(circle, #48beff40, transparent 68%); }
:root:not([data-pack='mix']) .pixel-stars i { border-radius: 50%; width: 3px; height: 3px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: firefly-drift 12s ease-in-out infinite alternate; }
:root[data-pack='nature'] .pixel-stars i { background: #fff1a3; box-shadow: 0 0 14px #fff1a3; opacity: .8; }
@keyframes world-drift { to { transform: scale(1.035) translate(-.5%, .5%); } }
@keyframes firefly-drift { to { transform: translate(18px, -35px); opacity: .2; } }

.side-column { display: grid; gap: 20px; min-width: 0; }
.world-card { overflow: hidden; border: 1px solid var(--world-border); border-radius: 18px; background: var(--world-panel); box-shadow: 0 15px 40px #00000035; }
.world-art { height: 220px; position: relative; overflow: hidden; background-image: var(--scene); background-size: cover; background-position: center; }
.world-copy { padding: 20px 24px 22px; border-top: 1px solid var(--line); }
.world-label { color: var(--pink); font-size: 9px; letter-spacing: 1.5px; }
.world-title { margin: 9px 0 7px; font-size: 24px; color: var(--lime); }
.world-caption { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.side-column .world-art { height: 190px; }
.side-column .world-copy { padding: 17px 22px 19px; }
.side-column .world-title { font-size: 22px; }
:root[data-pack='nature'] .world-art { background-position: right center; }
:root[data-pack='space'] .world-art { background-position: right top; }
:root[data-pack='mix'] .world-art {
  background: radial-gradient(ellipse at 70% 20%, #ff6bd840, transparent 65%), linear-gradient(140deg, #34225d, #12152e);
}
.arcade-letters { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 9px; transform: rotate(-7deg); }
.arcade-letters span { width: 49px; height: 59px; display: grid; place-items: center; background: #55f4ef; color: #15202e; border-radius: 9px; font: 700 29px 'Space Grotesk', sans-serif; box-shadow: 0 6px 0 #237b86, 0 0 25px #55f4ef25; animation: letter-bob 5s ease-in-out infinite alternate; }
.arcade-letters span:nth-child(2n) { background: #ff9fe4; box-shadow: 0 6px 0 #964d94, 0 0 25px #ff6bd825; animation-delay: -2s; }
.arcade-letters span:nth-child(3) { background: #d2ff5a; box-shadow: 0 6px 0 #798b35; animation-delay: -3s; }
:root:not([data-pack='mix']) .arcade-letters { display: none; }
@keyframes letter-bob { to { transform: translateY(-10px) rotate(4deg); } }
:root[data-motion='off'] .arcade-letters span { animation: none; }

/* Opaque surfaces keep both instructions and puzzle letters clear over the art. */
:root:not([data-pack='mix']) :is(.players-card, .scores-card) { background: var(--world-panel); border-color: var(--world-border); box-shadow: 0 15px 45px #00000035; }
:root:not([data-pack='mix']) :is(input, select) { background: var(--world-panel); border-color: var(--world-border); }
:root:not([data-pack='mix']) label { color: inherit; }
:root:not([data-pack='mix']) .primary { color: var(--tile-ink); box-shadow: 0 4px 0 color-mix(in srgb, var(--lime), #000 45%); }
:root:not([data-pack='mix']) .primary:hover { background: color-mix(in srgb, var(--lime), white 20%); }
:root:not([data-pack='mix']) :is(.beta, .rules b, .pill, .timer, .difficulty-badge, .motion-toggle) { border-color: color-mix(in srgb, var(--cyan), transparent 65%); background: color-mix(in srgb, var(--cyan), transparent 93%); }
:root:not([data-pack='mix']) .target-card { background: var(--world-panel); border-color: var(--world-border); box-shadow: 0 8px 25px #00000025; }
:root:not([data-pack='mix']) .target-card p { color: var(--muted); }
:root:not([data-pack='mix']) .target-card h2 { text-shadow: none; }
:root:not([data-pack='mix']) .player-rank { color: var(--muted); }
:root:not([data-pack='mix']) .timer.urgent { color: var(--pink); background: color-mix(in srgb, var(--pink), transparent 85%); border-color: var(--pink); }
:root:not([data-pack='mix']) .board { background: var(--board-bg); border-color: var(--tile-shadow); }
:root:not([data-pack='mix']) .cell { background: var(--tile-bg); color: var(--tile-ink); border-color: var(--tile-edge); box-shadow: 0 3px 0 var(--tile-shadow); }
:root:not([data-pack='mix']) .cell.selected { background: var(--cyan); color: var(--tile-ink); border-color: var(--cyan); box-shadow: 0 3px 0 color-mix(in srgb, var(--cyan), black 35%); }
:root:not([data-pack='mix']) .cell.found { background: var(--lime); color: var(--tile-ink); border-color: var(--lime); box-shadow: 0 3px 0 color-mix(in srgb, var(--lime), black 35%); }
:root:not([data-pack='mix']) .cell.missed { background: var(--pink); color: var(--tile-ink); border-color: var(--pink); box-shadow: 0 3px 0 color-mix(in srgb, var(--pink), black 35%); }
:root:not([data-pack='mix']) .cell:hover:not(:disabled) { border-color: var(--tile-ink); }
:root:not([data-pack='mix']) footer { color: var(--muted); }
:root:not([data-pack='mix']) .trophy { border-color: var(--pink); background: var(--world-panel); box-shadow: 5px 5px 0 color-mix(in srgb, var(--pink), transparent 80%); }

@media (max-width: 850px) {
  .side-column .world-art { height: 155px; }
  .world-copy, .side-column .world-copy { padding: 17px 19px; }
  .side-column .world-title { font-size: 20px; }
  .world-art { height: 180px; }
  .arcade-letters { gap: 7px; }
  .arcade-letters span { width: 39px; height: 49px; font-size: 25px; }
}
@media (max-width: 620px) {
  .pack-backdrop { background-position: 68% center; }
  .world-art, .side-column .world-art { height: 210px; }
  .side-column { gap: 16px; }
  .world-copy, .side-column .world-copy { padding: 18px 22px; }
}