:root { color-scheme: dark; --bg: #12171d; --panel: #1a222b; --panel-light: #222d38; --text: #ecf2f5; --muted: #9eabb5; --accent: #8bc7bd; --gap: 8px; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; color: var(--text); background: radial-gradient(circle at 10% 0%, #273640 0, transparent 33rem), var(--bg); }
button, select { font: inherit; }
.app-shell { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 48px; }
header { margin-bottom: 30px; } .eyebrow,.mini-label { margin: 0 0 6px; color: var(--accent); letter-spacing: .13em; font-weight: 700; font-size: .7rem; } h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.055em; } .intro { margin: 10px 0 0; color: var(--muted); }
.controls { display: grid; grid-template-columns: .8fr 1.45fr 1.25fr auto; gap: 12px; padding: 16px; border: 1px solid #2b3741; background: rgba(26,34,43,.86); border-radius: 18px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: .78rem; } select, button { border: 1px solid #3a4853; border-radius: 10px; color: var(--text); background: var(--panel-light); cursor: pointer; } select { min-width: 0; padding: 9px 10px; } button { padding: 10px 14px; transition: transform .18s ease, background .18s ease, border-color .18s ease; } button:hover { background: #2b3945; border-color: #59707d; } button:active { transform: scale(.97); }.actions { display: flex; align-items: end; gap: 8px; }.primary { background: #315e5c; border-color: #4c8983; }.primary:hover { background: #39706d; }
.instructions { min-height: 24px; margin: 18px 2px; color: #b9c7cf; font-size: .93rem; }
.game-area { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: start; gap: clamp(20px, 4vw, 48px); }.board-wrap { position: relative; width: min(100%, 660px); justify-self: center; }.board { display: grid; gap: var(--grid-gap, var(--gap)); width: 100%; aspect-ratio: 1; padding: var(--grid-gap, var(--gap)); background: #0d1217; border: 1px solid #2b3741; border-radius: 20px; box-shadow: 0 20px 45px #05080b55; }
.tile { min-width: 0; border: 0; border-radius: 10px; box-shadow: inset 0 1px #ffffff20, 0 3px 9px #00000048; transition: transform .18s ease, outline-color .18s ease, filter .18s ease; overflow: hidden; position: relative; }.tile:hover { filter: brightness(1.08); }.tile.number { color: #e9f3f5; font-size: clamp(1rem, 4vw, 2rem); font-weight: 600; background: linear-gradient(145deg, #31414f, #1c2832); }.tile.number::after { content: ""; position: absolute; inset: 0; border: 1px solid #ffffff12; border-radius: inherit; }.tile.empty { cursor: default; background: #10171d; box-shadow: inset 0 0 0 1px #202d36; }.tile.selected { outline: 3px solid var(--accent); outline-offset: -3px; transform: scale(.955); filter: brightness(1.1); }
.pattern-sun { background-image: radial-gradient(circle at 7% 11%, #ffe5a4 0 .45%, transparent .55%), radial-gradient(circle at 27% 82%, #ffe5a4 0 .35%, transparent .45%), radial-gradient(circle at 74% 12%, #ffe5a4 0 .4%, transparent .5%), radial-gradient(circle at 88% 69%, #ffe5a4 0 .42%, transparent .52%), repeating-linear-gradient(117deg, transparent 0 3.3%, #b9e4da32 3.38% 3.62%, transparent 3.7% 7.1%), repeating-radial-gradient(circle at 16% 104%, transparent 0 11.2%, #9bd7ce36 11.35% 11.58%, transparent 11.74% 17.1%), radial-gradient(circle at 53% 48%, #ffd17c 0 8%, #ef7d72 8.4% 17%, transparent 17.4%), radial-gradient(circle at 48% 48%, #1c5964 0 32%, transparent 32.4%), linear-gradient(135deg, #173b57 0 50%, #273a73 50%); }.pattern-wave { background-image: repeating-radial-gradient(ellipse at 15% 120%, transparent 0 8%, #a2d8c6 8.3% 10%, transparent 10.3% 15%), linear-gradient(145deg, #1a3655, #254e72 45%, #5c7c96); }.pattern-grid { background-image: radial-gradient(circle at 11% 15%, #ffd9a3 0 .38%, transparent .5%), radial-gradient(circle at 36% 76%, #ffd9a3 0 .32%, transparent .44%), radial-gradient(circle at 66% 25%, #ffd9a3 0 .42%, transparent .54%), radial-gradient(circle at 91% 88%, #ffd9a3 0 .36%, transparent .48%), repeating-linear-gradient(63deg, transparent 0 3.1%, #ffe3bb2b 3.18% 3.42%, transparent 3.5% 6.8%), repeating-radial-gradient(ellipse at 112% 108%, transparent 0 9.4%, #c8d9e035 9.55% 9.8%, transparent 9.96% 14.3%), radial-gradient(circle at 100% 0%, transparent 0 16%, #ffbf86 16.3% 25%, transparent 25.3% 34%, #d76d82 34.3% 43%, transparent 43.3%), linear-gradient(130deg, #523f75 0 35%, #2b5c6e 35% 64%, #63a89e 64%); }.pattern-sun,.pattern-wave,.pattern-grid { background-size: calc(var(--grid-size) * 100%) calc(var(--grid-size) * 100%); }
.reference-card { padding: 15px; border: 1px solid #2b3741; border-radius: 16px; background: rgba(26,34,43,.7); }.reference-head h2 { margin: 0 0 12px; font-size: 1rem; }.reference { display: grid; gap: 2px; aspect-ratio: 1; overflow: hidden; padding: 3px; border-radius: 10px; background: #0e151a; box-shadow: inset 0 0 0 1px #ffffff0d; }.reference.reference-pattern { display: block; padding: 0; background-size: 100% 100%; background-position: center; }.reference .ref-tile { min-width: 0; }.reference .ref-number { display: grid; place-items: center; color: #bfccd2; background: #27343e; font-size: .65rem; }.reference .ref-empty { background: #121b21; }
.complete-message { opacity: 0; pointer-events: none; position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 12px 22px; border: 1px solid #8bc7bd90; border-radius: 99px; color: #edfffc; background: #254d4adb; box-shadow: 0 8px 24px #0008; transition: opacity .35s ease, transform .35s ease; transform: translateY(8px); }.complete-message.visible { opacity: 1; transform: translateY(0); animation: gentle-pop .55s ease; } @keyframes gentle-pop { 50% { transform: translateY(-3px) scale(1.04); } }
@media (max-width: 760px) { .app-shell { width: min(100% - 24px, 620px); padding-top: 28px; }.controls { grid-template-columns: 1fr 1fr; }.controls label:nth-child(2) { grid-column: span 2; }.actions { grid-column: span 2; }.actions button { flex: 1; }.game-area { grid-template-columns: 1fr; }.board-wrap { width: 100%; }.reference-card { display: grid; grid-template-columns: 1fr 110px; align-items: center; gap: 0 14px; }.reference-head { grid-column: 1; }.reference { grid-column: 2; grid-row: 1; } }
@media (max-width: 390px) { .controls { grid-template-columns: 1fr; }.controls label:nth-child(2),.actions { grid-column: auto; }.reference-card { grid-template-columns: 1fr 90px; } }