:root { color-scheme: dark; font-family: "Open Sans", system-ui, sans-serif; color: #edf0ff; background: #10162d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 25% 10%, #28345b 0, transparent 55%), radial-gradient(ellipse at 100% 100%, #312148 0, transparent 50%), #10162d; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: #26334f; border: 1px solid #536383; border-radius: 10px; padding: 11px 15px; cursor: pointer; }
button:hover:not(:disabled) { background: #394765; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, a:focus-visible { outline: 3px solid #fff1b0; outline-offset: 3px; }
a { color: #d0dcff; text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { max-width: 1050px; margin: auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.topbar > span { color: #a5b3ce; font-size: 10px; letter-spacing: .16em; }
.topbar button { background: transparent; padding: 7px 11px; font-size: 12px; }
.topbar-actions { display: flex; gap: 8px; }
.sound-status { margin: 0 auto; max-width: 990px; padding: 0 15px; text-align: center; color: #ffdf96; font-size: 12px; }
.sound-status:empty { display: none; }
main { max-width: 1100px; padding: 16px 24px 30px; margin: auto; display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 276px); justify-content: center; gap: 32px; }
.heading { text-align: center; margin-bottom: 24px; }
.eyebrow { color: #b9a8dd; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
h1 { font-size: clamp(34px, 7vw, 51px); letter-spacing: -.055em; line-height: 1.15; margin: 7px 0; font-weight: 800; }
h1 span { color: #b9abff; }
.heading p { color: #acb9d2; font-size: 13px; margin: 10px 0; }
.stats { display: grid; grid-template-columns: 1fr 1fr 1fr; background: #151f37; border: 1px solid #405074; border-radius: 15px; margin-bottom: 17px; padding: 15px 0; box-shadow: 0 8px 25px #0002; }
.stats > div { text-align: center; min-width: 0; }
.stats > div + div { border-left: 1px solid #36405c; }
.stats span { display: block; color: #b4c0da; font-size: 9px; letter-spacing: .13em; font-weight: 700; }
.stats strong { display: block; font-size: clamp(21px, 5vw, 29px); font-variant-numeric: tabular-nums; margin-top: 3px; }
.moves strong { color: #ffe398; }
.board-frame { position: relative; border-radius: 20px; padding: 10px; background: linear-gradient(150deg, #6a709e, #343357 40%, #7a5289); box-shadow: 0 18px 60px #0005, inset 0 1px 1px #ffffff65; }
#board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; border-radius: 12px; padding: 7px; background: #0d142a; touch-action: none; user-select: none; -webkit-user-select: none; }
.cell { position: relative; display: grid; place-items: center; border: 1px solid #34405e; padding: 0; border-radius: 7px; aspect-ratio: 1; min-width: 0; background: linear-gradient(145deg, #24314d, #182039); touch-action: none; opacity: 1 !important; }
.cell:hover:not(:disabled) { background: #344260; border-color: #7489b0; }
.cell.selected { background: #4b4777; border-color: #fff4b6; box-shadow: 0 0 0 2px #ffe89c, 0 0 20px #ebc36b55; z-index: 1; }
.cell.hinted { animation: hint 1s ease-in-out infinite; border-color: #ffe89c; }
.gem { width: 86%; height: 86%; display: block; filter: drop-shadow(0 3px 2px #0007); pointer-events: none; transition: transform .16s; }
.cell:hover .gem { transform: scale(1.08); }
.gem svg { width: 100%; height: 100%; display: block; overflow: visible; }
.special-gem { filter: drop-shadow(0 0 4px #fff2a0); }
.special-mark { fill: none; stroke: #fff8d5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #24133d); }
.cell.activated { box-shadow: inset 0 0 18px #fff4b6; border-color: #fff4b6; }
.cell.created { box-shadow: 0 0 16px #ffe89c; border-color: #ffe89c; }
.cell.cleared .gem { animation: clear .32s ease-in forwards; }
.cell.cleared::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid #ffe9b1; pointer-events: none; animation: ripple .34s ease-out forwards; }
#effects { position: absolute; inset: 17px; pointer-events: none; overflow: hidden; border-radius: 10px; z-index: 2; }
.points-popup { position: absolute; top: 38%; left: 10%; width: 80%; text-align: center; font-size: clamp(24px, 6vw, 42px); font-weight: 800; color: #fff0b6; text-shadow: 0 3px 0 #432752, 0 0 20px #301447; animation: points-rise .85s ease-out forwards; }
.spark { position: absolute; width: 6px; height: 6px; border-radius: 2px; box-shadow: 0 0 8px currentColor; animation: sparkle .6s ease-out forwards; }
.welcome { position: absolute; inset: 10px; border-radius: 12px; background: #10162de8; backdrop-filter: blur(4px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; pointer-events: none; }
.welcome[hidden] { display: none; }
.welcome-gem { color: #bca3ff; font-size: 64px; text-shadow: 0 0 40px #a888ff; }
.welcome h2 { font-size: 22px; margin: 12px 0 5px; }
.welcome p { max-width: 290px; font-size: 13px; color: #c2cbe0; line-height: 1.7; }
.status-line { min-height: 59px; display: grid; align-items: center; text-align: center; }
#status { color: #d7c3ff; font-size: 13px; line-height: 1.5; margin: 10px 0; }
#status.error { color: #ffb7a9; }
.actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.actions button { font-size: 12px; }
button.primary { color: #201f33; background: linear-gradient(#ffe7a9, #eec66d); border-color: #ffdf96; font-weight: 800; padding-inline: 24px; box-shadow: 0 4px 18px #f0c66f20; }
button.primary:hover:not(:disabled) { background: #ffecbb; }
.controls { text-align: center; font-size: 11px; color: #a4b3d0; line-height: 1.8; margin: 17px 5px; }
#login { display: block; text-align: center; padding: 12px; background: #34416a; border-radius: 9px; font-size: 13px; }
#login[hidden] { display: none; }
aside { padding-top: 127px; }
.panel { border: 1px solid #414663; background: #19213ad9; border-radius: 16px; margin-bottom: 20px; overflow: hidden; }
.panel-title { padding: 20px 20px 14px; }
.panel-title h2 { font-size: 19px; margin: 5px 0; letter-spacing: -.025em; }
.medals { padding: 0 18px 8px; margin: 0; list-style: none; }
.medals li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #35405b; }
.medals .badge { display: grid; place-items: center; border: 1px solid #5a6487; background: #303d5a; border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0; color: #9eacc9; }
.medals .unlocked .badge { border-color: #e5bd70; color: #ffe9a3; background: #6b5031; box-shadow: 0 0 18px #fbc44b20; }
.medals strong { display: block; font-size: 12px; }
.medals small { color: #abb9d3; font-size: 10px; }
.leaderboard { list-style: none; padding: 0 20px 12px; margin: 0; }
.leaderboard li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #35405b; font-size: 12px; }
.leaderboard .rank { color: #a9b7d0; font-size: 11px; width: 16px; flex-shrink: 0; }
.leaderboard .name { flex: 1; overflow-wrap: anywhere; }
.leaderboard .points { font-variant-numeric: tabular-nums; color: #ffe4a1; }
.muted { color: #a9b7d0; padding: 0 20px 20px; font-size: 12px; line-height: 1.7; }
.fair-play { font-size: 11px; color: #a9b7d0; line-height: 1.9; padding: 0 6px; }
.instructions { margin-top: 20px; border: 1px solid #52607e; padding: 18px; border-radius: 12px; background: #19233c; font-size: 13px; line-height: 1.8; color: #c4cee2; }
.instructions h2 { font-size: 16px; color: #edf0ff; margin-top: 0; }
#guest-score { margin-bottom: 15px; }
#guest-score label { display: block; font-weight: 700; }
#guest-name { width: 100%; min-width: 0; margin: 6px 0 12px; padding: 10px; border: 1px solid #7486ab; border-radius: 8px; background: #101a30; color: #edf0ff; font: inherit; }
footer { text-align: center; font-size: 10px; color: #95a4bf; padding: 15px 20px 30px; }
.adventure-panel { grid-column: 1 / -1; border: 1px solid #526484; border-radius: 20px; background: linear-gradient(130deg, #1e3448, #20213e); padding: 22px; min-width: 0; }
.adventure-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.adventure-heading h2 { margin: 8px 0; font-size: clamp(24px, 5vw, 34px); letter-spacing: -.04em; }
.adventure-heading p, .map-help, .level-description { font-size: 12px; color: #c4d2e3; line-height: 1.8; }
.adventure-heading button { flex-shrink: 0; font-size: 12px; }
.map-scroll { overflow: auto; border-radius: 18px; border: 1px solid #4d6884; }
.nordic-map { position: relative; min-width: 640px; aspect-ratio: 4 / 3; }
.nordic-map > svg { display: block; width: 100%; height: 100%; }
.map-pins { position: absolute; inset: 0; }
.map-pin { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; min-width: 36px; height: 36px; padding: 2px 4px; border-radius: 50% 50% 50% 7px; background: #17253d; color: #c8d3e4; border: 2px solid #70839e; font-size: 11px; font-weight: 800; box-shadow: 0 3px 9px #0007; }
.map-pin:disabled { opacity: .75; }
.map-pin.collected { background: #6b5031; color: #ffe9a3; border-color: #e5bd70; }
.map-pin.current { background: #46336c; color: #fff4c9; border-color: #ffe9a3; box-shadow: 0 0 0 4px #ffdd8c33; z-index: 1; }
.map-key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; padding: 14px 0; color: #c5d7e7; }
.level-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.level-picker label { font-weight: 700; }
.level-picker select { min-width: 0; max-width: 100%; padding: 11px; border: 1px solid #8297b3; border-radius: 9px; background: #14223a; color: #f0f4ff; font: inherit; }
.level-objective { padding: 17px; margin-bottom: 16px; border: 1px solid var(--realm-accent, #ab9bdd); border-radius: 14px; background: var(--realm-dark, #27243f); font-size: 13px; line-height: 1.7; }
.level-objective p { margin: 7px 0; }
.level-objective progress { width: 100%; height: 12px; accent-color: var(--realm-accent, #ffe398); }
.level-objective button { font-size: 12px; }
.adventure-badges summary { cursor: pointer; padding: 0 20px 20px; font-size: 12px; color: #d7c3ff; }
.panel-title #badge-count { font-size: 12px; color: #ffe398; margin-bottom: 0; }
.place-badge svg { width: 30px; height: 30px; }
.place-badge { position: relative; }
.badge-number { position: absolute; right: -4px; bottom: -3px; background: #17253d; color: #f8e2a3; border: 1px solid #7b704f; border-radius: 8px; min-width: 16px; padding: 1px 3px; font-size: 9px; }
.medals li:not(.unlocked) .place-badge svg { filter: grayscale(1); opacity: .4; }
.play-area[data-theme="harbor"] { --realm-accent: #73d4ec; --realm-dark: #183446; --realm-cell: #174353; }
.play-area[data-theme="rose"] { --realm-accent: #f3a8c3; --realm-dark: #42233b; --realm-cell: #46243e; }
.play-area[data-theme="forest"] { --realm-accent: #8de2b1; --realm-dark: #18382f; --realm-cell: #1c4238; }
.play-area[data-theme="sunset"] { --realm-accent: #ffd17a; --realm-dark: #443326; --realm-cell: #49362d; }
.play-area[data-theme="aurora"] { --realm-accent: #b9a0ff; --realm-dark: #2c244b; --realm-cell: #352857; }
.play-area[data-theme="ice"] { --realm-accent: #c7f0ff; --realm-dark: #243c54; --realm-cell: #2b405e; }
.play-area[data-theme="lava"] { --realm-accent: #ffb18f; --realm-dark: #482a2a; --realm-cell: #4c2a36; }
.play-area:not([data-theme="classic"]) .board-frame { background: linear-gradient(150deg, var(--realm-accent), var(--realm-dark) 55%, var(--realm-accent)); }
.play-area:not([data-theme="classic"]) .cell:not(.selected):not(:hover) { background: linear-gradient(145deg, var(--realm-cell), #182039); }
.cell.void-cell { visibility: hidden; pointer-events: none; }
#board[data-shaped="true"] { background: transparent; }
.board-frame:has(#board[data-shaped="true"]) { background: radial-gradient(ellipse, var(--realm-dark, #27243f), #10162d); box-shadow: 0 18px 60px #0005; }
#board[data-shaped="true"] .cell:not(.selected) { border-color: var(--realm-accent, #7489b0); }
.level-preview { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.shape-preview { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; flex: 0 0 86px; }
.shape-preview span { aspect-ratio: 1; border-radius: 2px; }
.preview-tile { background: #c9b7ff; box-shadow: inset 0 0 0 1px #e5ddff; }
@media (max-width: 600px) {
  .adventure-panel { padding: 14px; }
  .adventure-heading { align-items: flex-start; }
  .adventure-heading button { padding: 9px; }
  .level-picker select { width: 100%; }
}
@keyframes clear { to { transform: scale(.15) rotate(45deg); opacity: 0; } }
@keyframes hint { 50% { box-shadow: inset 0 0 12px #ffe89c88; } }
@keyframes ripple { from { opacity: .8; transform: scale(.5); } to { opacity: 0; transform: scale(1.7); } }
@keyframes points-rise { from { opacity: 0; transform: translateY(12px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.05); } to { opacity: 0; transform: translateY(-45px) scale(1); } }
@keyframes sparkle { from { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(150deg) scale(.2); } }
@media (max-width: 900px) {
  .topbar { padding: 15px 15px 8px; }
  .topbar > span { display: none; }
  main { grid-template-columns: minmax(0, 640px); padding: 15px 12px 20px; gap: 24px; }
  .heading { margin-bottom: 18px; }
  aside { padding-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .panel { margin-bottom: 0; }
  .panel-title { padding: 15px 12px 10px; }
  .panel-title h2 { font-size: 16px; }
  .medals { padding-inline: 12px; }
  .medals li { gap: 7px; }
  .medals .badge { width: 25px; height: 25px; font-size: 13px; }
  .medals strong { font-size: 10px; }
  .leaderboard { padding-inline: 12px; }
  .leaderboard li { gap: 5px; font-size: 10px; }
  .fair-play { grid-column: 1 / -1; text-align: center; margin: 0; }
}
@media (max-width: 360px) {
  .board-frame { padding: 7px; border-radius: 14px; }
  #board { padding: 5px; gap: 3px; }
  .actions button { padding: 10px; font-size: 11px; }
  .stats { padding-block: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #effects, .cell.cleared::after { display: none; }
}