:root { background: #1d1b20; }
#game-shell { container: gemcity / inline-size; }
#stage { background: #e5e5e7 url('assets/jewellery-store-illustrated.png') center/cover no-repeat; }
#stage::before { background: #29232c0a; }
.menu { background: #21192312; gap: 12px; }
.menu h1.menu-title { width: 64%; max-width: 750px; height: 24%; flex: none; margin: 0; font-size: 0; line-height: 0; }
.menu-title img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 3px #24151c55); }
.round-label { margin: 4px 0 0; padding: 7px 14px; color: #fff; background: #000; font-size: 12px; font-weight: 700; border-block: 1px solid #fff; }
.menu-gems { height: 38%; filter: drop-shadow(0 9px 9px #281c3255); }
.menu-gems::before { content: ''; position: absolute; inset: 0 -7%; border: 3px solid #e5ecee; border-radius: 3px; background: linear-gradient(125deg, #ffffff55 0 15%, #e1edf308 15% 70%, #ffffff44 70% 73%, #b2bdc222 73%); box-shadow: inset 0 -9px 0 #bac9cfaa, 0 2px 0 #717a83, 0 15px 0 -10px #52576299; }
.menu-gems img { height: 82%; }
.menu-gems img:nth-child(2) { height: 92%; }
.menu-gems img:first-child, .menu-gems img:last-child { bottom: 7%; }
.menu .secondary { background: #000; color: #fff; border-color: #fff; box-shadow: 0 3px 0 #333; }
.menu .secondary:hover { background: #171717; }
#play-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: 72px minmax(0, 1fr); padding-bottom: 0; }
#arena { --timer-rail: 284px; --arena-gap: 16px; display: grid; grid-template-columns: var(--timer-rail) minmax(0, 1fr) var(--timer-rail); gap: var(--arena-gap); align-items: center; width: 100%; height: 100%; min-height: 0; padding: 18px 24px 24px; }
.board-slot { position: relative; container-type: size; width: 100%; height: 100%; min-width: 0; min-height: 0; }
#board-wrap { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(100cqw, 100cqh); height: auto; max-width: none; aspect-ratio: 1; }
.side-timer { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1; display: grid; place-items: center; color: #111; filter: drop-shadow(0 5px 6px #35283155); }
.side-timer::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('assets/timer-diamond.png') center/contain no-repeat; pointer-events: none; }
.side-timer strong { display: block; font-family: Arial Black, Arial, sans-serif; font-size: 140px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; }
.side-timer.urgent { color: #c3223f; }
.start-countdown { display: grid; place-items: center; background: #20192366; pointer-events: auto; }
.start-countdown strong { width: 92%; text-align: center; font-family: Arial Black, Arial, sans-serif; font-size: 160px; font-weight: 900; line-height: 1.05; color: #fff; text-shadow: 0 4px 0 #622440, 0 7px 18px #1b1226; }
.start-countdown.go strong { font-size: 56px; }
.hud { position: relative; color: #332c36; background: #f3f5f6f2; border-bottom: 2px solid #a5b2b8; gap: 18px; box-shadow: 0 4px 12px #221c3222; }
.hud h2 { color: #5d203e; }
.stat > span, .next-stat > span { color: #655864; }
.star-stat strong { color: #592542; }
.star-stat svg { fill: #c49a40; color: #9e7520; }
.next-stat img { filter: drop-shadow(0 2px 2px #352e3840); }
.time-track { position: absolute; bottom: -2px; inset-inline: 0; height: 3px; background: #c1c8ca; overflow: hidden; }
#time-fill { height: 100%; background: #832e56; transform-origin: left; }
#time-fill.urgent { background: #cf2345; }
.hud .icon-button, .board-footer .icon-button { background: #f4f5f6; color: #57283f; border-color: #a6afb6; box-shadow: inset 0 1px 0 #fff; }
.hud .icon-button:hover, .board-footer .icon-button:hover { background: #e7d9e0; }
#board-wrap { filter: drop-shadow(0 9px 12px #251b3259); }
#board { border: 4px solid #d5e0e4; border-radius: 3px; padding: 8px; gap: 5px 3px; background: linear-gradient(115deg, #f4fbffdd, #d4e2e5ba 44%, #f9fcffe6 45%, #f1f7fbe0 48%, #cedce2bd 49%, #ebf1f3dc); box-shadow: inset 0 0 0 2px #879da5, inset 0 0 20px #8ea0aa66, 0 0 0 1px #626d77, 4px 0 0 #8c9aa3, -4px 0 0 #fafcff; }
#board::after { content: ''; position: absolute; inset: 4px; z-index: 3; pointer-events: none; border: 1px solid #fff8; background: linear-gradient(115deg, transparent 0 14%, #fff2 14% 15%, transparent 15% 80%, #fff2 80% 82%, transparent 82%); }
.gem { border: 0; border-bottom: 3px solid #a2b8c1; border-radius: 0; background: transparent; padding: 3px 3px 5px; box-shadow: 0 2px 0 #fff, 0 4px 4px #5c71884a; }
.gem img { filter: drop-shadow(0 4px 2px #21314855); }
.gem:hover { background: #ffffff44; }
.gem.selected { border: 0; border-bottom: 3px solid #812e52; background: #f8e7f0aa; box-shadow: inset 0 0 0 2px #963b65, 0 2px 0 #fff; }
.gem.valid { box-shadow: inset 0 0 0 2px #29886d, 0 2px 0 #fff; background: #eaffef77; }
.gem.target { background: #cffbe2cc; box-shadow: inset 0 0 0 3px #13725a; }
.gem.invalid { background: #f3b8c6bb; box-shadow: inset 0 0 0 3px #d13053; }
.gem.hinted { box-shadow: inset 0 0 0 3px #9b6a12; background: #fff2bb66; }
.gem.star { background: #fff4c999; }
.gem.merged img, .gem.star img { animation: gem-pop .14s ease-out; filter: drop-shadow(0 4px 2px #21314855); }
.collected-star { position: absolute; aspect-ratio: 1; object-fit: contain; pointer-events: none; transform: translate(-50%, -50%); animation: star-collect .36s ease-out forwards; }
@keyframes star-collect { from { opacity: .9; } to { translate: 0 -45px; scale: .65; opacity: 0; } }
.gem:focus-visible { outline-color: #622440; outline-offset: 0; }
.board-footer { background: #f0f3f5ed; border: 1px solid #c2cdd3; color: #423444; border-radius: 0 0 3px 3px; }
.board-footer > span { color: #655864; }
.board-footer output { color: #622440; }
.board-footer output.bad { color: #b82443; }
.game-toolbar .icon-button { background: #38303b; border-color: #776c7e; }
.game-toolbar span { color: #bfb6c5; }
.shaded { background: #201727aa; }
.loading-screen { background: #29232e; }
@container gemcity (max-width: 1300px) {
  #arena { --timer-rail: 232px; }
  .side-timer strong { font-size: 116px; }
}
@container gemcity (max-width: 1000px) {
  #arena { --timer-rail: 200px; }
  .side-timer strong { font-size: 96px; }
}
@media (max-width: 1000px) {
  .hud { gap: 10px; }
  #play-screen { grid-template-rows: 62px minmax(0, 1fr); }
  #arena { --arena-gap: 10px; padding: 14px 12px 18px; }
  .start-countdown.go strong { font-size: 42px; }
}
@media (max-width: 650px) and (orientation: portrait) {
  .hud { gap: 6px; padding-inline: 9px; }
  .stat { min-width: 44px; }
  .stat strong { font-size: 20px; }
  .star-stat { margin-right: auto; }
  .star-stat strong { gap: 3px; }
  #play-screen { grid-template-rows: 66px minmax(0, 1fr); }
  #arena { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 96px minmax(0, 1fr); gap: 8px 12px; padding: 8px 10px 12px; }
  .board-slot { grid-column: 1 / -1; grid-row: 2; }
  .side-timer { width: 96px; justify-self: start; }
  #timer-mirror { grid-column: 2; grid-row: 1; justify-self: end; }
  .side-timer strong { font-size: 40px; -webkit-text-stroke-width: 2px; }
  .start-countdown strong { font-size: 100px; }
  .start-countdown.go strong { font-size: 30px; }
  .next-stat { gap: 0; }
  .next-stat img { width: 36px; height: 36px; }
  #board { padding: 5px; gap: 4px 2px; border-width: 3px; }
  .gem { padding: 2px 1px 4px; }
  .round-label { font-size: 10px; }
  .menu-gems { height: 34%; }
  .menu h1.menu-title { width: 92%; height: 19%; }
}
@media (max-height: 600px) and (orientation: landscape) {
  #play-screen { grid-template-rows: 43px minmax(0, 1fr); }
  #arena { --timer-rail: 132px; --arena-gap: 8px; padding: 10px 10px 14px; }
  .side-timer strong { font-size: 64px; }
  .start-countdown strong { font-size: 96px; }
  .start-countdown.go strong { font-size: 34px; }
  .hud { gap: 8px; }
  #board { padding: 5px; gap: 3px 2px; border-width: 3px; }
  .gem { padding: 1px 1px 3px; }
  .round-label { font-size: 9px; margin: 0; padding: 4px 9px; }
  .menu { gap: 7px; }
  .menu-gems { height: 35%; }
}
@media (max-width: 360px) and (orientation: portrait) {
  #stage { aspect-ratio: 7/10; }
  .stat { min-width: 56px; }
  .star-stat { min-width: 46px; }
  .next-stat > span { display: none; }
  #game-shell:fullscreen #stage { width: min(100vw, calc((100svh - 42px)*.7)); }
}