@font-face{font-family:Pristina;src:url('../fonts/Pristina.ttf') format('truetype');font-display:swap}
@font-face{font-family:ChopinScript;src:url('../fonts/ChopinScript.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--gold:#edc35c;--aqua:#7fe8ef;--text:#f8f1df;--panel:#152e48}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at top,#284459,#08161e 85%);color:var(--text);font-family:Georgia,'Times New Roman',serif}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,input:focus-visible{outline:3px solid #fff3a2;outline-offset:5px}
[hidden]{display:none!important}
#app{width:min(1024px,100%);margin:auto;padding:14px 0 24px}
.stage{width:100%;aspect-ratio:4/3;position:relative;container-type:inline-size;overflow:hidden;box-shadow:0 12px 50px #0008;border-radius:4px}
.menu-stage{background:url('../images/menu-texture.jpg') center/100% 100%}
.game-stage{background:url('../images/board-base.png') center/100% 100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#menu-screen{position:absolute;inset:0;isolation:isolate}
.menu-frame{position:absolute;left:.78125%;top:.78125%;width:98.4375%;height:98.4375%;z-index:1;pointer-events:none}
.menu-compass{position:absolute;left:14.560546875%;top:26.78385416666667%;width:71.484375%;height:auto;z-index:2;pointer-events:none}
.menu-needle-wrap{position:absolute;left:50%;top:73.56770833333333%;width:0;height:0;transform:rotate(var(--menu-angle,0deg));z-index:3;pointer-events:none}
.menu-needle{position:absolute;left:-2.1923828125cqw;top:-28.0224609375cqw;width:4.39453125cqw;height:auto;max-width:none;pointer-events:none}
.menu-title{position:absolute;left:50%;top:60%;width:88%;margin:0;transform:translateX(-50%);z-index:4;pointer-events:none;font-family:ChopinScript,Pristina,Georgia,serif;font-size:13.28125cqw;font-weight:400;line-height:1.1;text-align:center;white-space:nowrap}
.menu-title-label{display:inline-block;color:#eabb48;text-shadow:-.08cqw 0 #773b08,.08cqw 0 #773b08,0 -.12cqw #fff0aa,0 .18cqw #502004,.2cqw .3cqw .2cqw #120904}
.menu-nav{position:absolute;inset:0;z-index:5;pointer-events:none}
.menu-nav button{position:absolute;left:var(--menu-x);top:var(--menu-y);transform:translate(-50%,-50%) rotate(var(--menu-rotation));border:0;background:transparent;color:#e7b23b;font-family:Pristina,Georgia,serif;font-size:4.6875cqw;font-weight:400;line-height:1.2;white-space:nowrap;min-width:44px;min-height:44px;padding:.6cqw 1cqw;border-radius:8px;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.menu-label{position:relative;display:inline-block;text-shadow:-.07cqw 0 #703305,.07cqw 0 #703305,0 -.09cqw #ffda76,0 .14cqw #442006,.14cqw .24cqw .16cqw #120904;transition:color .16s,filter .16s}
.menu-label::after{content:attr(data-label);position:absolute;inset:0;color:#fffdf2;mix-blend-mode:overlay;text-shadow:none;opacity:0;pointer-events:none;transition:opacity .16s}
.menu-nav button:is(:hover,:focus-visible,[data-active=true]) .menu-label{color:#ffed97;filter:drop-shadow(0 0 .7cqw #ffc65799)}
.menu-nav button:is(:hover,:focus-visible,[data-active=true]) .menu-label::after{opacity:1}
.nav-records{--menu-x:16.340028%;--menu-y:47.65625%;--menu-rotation:-60deg}
.nav-options{--menu-x:30.56640625%;--menu-y:28.68774833%;--menu-rotation:-30deg}
.nav-play{--menu-x:50%;--menu-y:21.74479166666667%;--menu-rotation:0deg}
.nav-instructions{--menu-x:69.43359375%;--menu-y:28.68774833%;--menu-rotation:30deg}
.nav-credits{--menu-x:83.659972%;--menu-y:47.65625%;--menu-rotation:60deg}
.menu-hint{text-align:center;color:#c6d7db;font-size:16px;margin:18px 10px 0}
#board-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tile{cursor:pointer;pointer-events:all;fill:transparent;stroke:transparent;stroke-width:3;transition:fill .2s,stroke .2s}
.tile.unavailable{cursor:default;pointer-events:none}
.tile.available{fill:#fff5;stroke:#fff4ae;stroke-width:4;filter:drop-shadow(0 0 5px #fff4ae)}
.tile.available:hover,.tile.available:focus{fill:#fff7;stroke:white;stroke-width:6;outline:none}
.tile.current{stroke:#ffe39c;stroke-dasharray:5 4}
.tile-image{pointer-events:none}
.whale-image,.gate-image{pointer-events:none}
#buoy{position:absolute;width:5.86%;height:7.81%;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none;z-index:2;filter:drop-shadow(0 3px 4px #001);transition:left .4s ease,top .4s ease}
#rescued{position:absolute;left:33%;top:38%;width:19%;height:25%;pointer-events:none;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.rescue-whale{width:100%;height:100%;object-fit:contain;opacity:.17;filter:grayscale(1);transition:opacity .5s,filter .5s}
.rescue-whale.saved{opacity:1;filter:drop-shadow(0 0 3px #fff)}
.compass-button{position:absolute;left:85.9%;top:19.4%;width:13.8%;height:16.5%;border:0;background:transparent;border-radius:50%;color:#ffef9b}
.compass-button:disabled{opacity:.65}
#compass-needle{position:absolute;height:58%;width:10%;left:45%;top:12%;object-fit:contain;transform-origin:50% 69%;transition:transform 1.3s cubic-bezier(.15,.75,.15,1)}
#roll-value{position:absolute;inset:0;display:grid;place-items:center;font-size:3.2cqw;font-weight:bold;text-shadow:0 2px 3px #000;padding-top:4cqw}
.sound-button,.leave-button{position:absolute;left:88.7%;width:8.5%;height:3%;border:0;background:transparent;font-size:1.15cqw;color:transparent;letter-spacing:.08em}
.sound-button[aria-pressed=false]{background:url('../images/sound-off.png') center/100% 100%;left:88.1%;width:9.5%;height:3.65%;transform:translateY(-8%)}
.sound-button{top:36%;}.leave-button{top:75.7%}
#oxygen-tanks{position:absolute;left:91.25%;top:44.5%;width:3.7%;height:11%;display:flex;flex-direction:column;gap:5%}
.oxygen-tank{width:100%;height:21%;object-fit:fill;transition:opacity .3s;box-shadow:0 0 5px #0095db}
.oxygen-tank.empty{opacity:.08;box-shadow:none}
.stage-score{position:absolute;left:89.1%;top:64.7%;width:7.7%;height:5.1%;display:grid;place-items:center;font-size:2.5cqw;color:#fff6c3;font-weight:bold;text-shadow:0 2px 3px #000}
.game-info{padding:15px 18px 0;font-family:system-ui,sans-serif}
.stats{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#cfdae0;font-size:14px}
.stats strong{color:#fff0b0}
#turn-status{margin:12px 0;font-size:16px;color:#ffebae;min-height:1.4em}
.destinations{display:flex;flex-wrap:wrap;gap:8px}
.destinations button{padding:7px 12px;font-size:14px;background:#183c50;border:1px solid #678d99;border-radius:6px;color:#f7efda;font-family:system-ui,sans-serif}
.destinations button:hover{background:#29576b}
.category-progress{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.category-progress span{font-size:12px;padding:5px 8px;border-left:3px solid var(--category-color);background:#0b1a24b0;border-radius:3px;color:#d5dce0}
dialog{border:1px solid #c09a62;border-radius:20px;width:min(780px,calc(100% - 28px));max-height:calc(100dvh - 36px);padding:26px 34px 30px;background:linear-gradient(155deg,#65234deb,#172f47fa 80%);color:var(--text);box-shadow:0 18px 80px #000b;overflow:auto}
dialog::backdrop{background:#030b14b0}
dialog h2{font-family:Pristina,Georgia,serif;font-size:46px;font-weight:400;line-height:1.15;color:var(--gold);margin:0 35px 16px 0;text-shadow:0 2px 2px #000}
.modal-close{position:absolute;right:19px;top:13px;border:0;background:transparent;color:#ead29f;font-size:32px;padding:4px 10px}
dialog p,dialog li{line-height:1.6}
dialog ul{padding-left:22px}
.gold-button{border:2px solid #dba447;border-radius:7px;padding:12px 24px;background:linear-gradient(#24b9d1,#005779 60%,#003a60);color:#fff4d2;box-shadow:inset 0 0 0 2px #ffdd6555,0 2px 6px #0006;font-variant:small-caps;letter-spacing:.04em;min-height:45px}
.gold-button:hover{filter:brightness(1.2)}
.gold-button:disabled{opacity:.5}
.button-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
label.field{display:block;margin:15px 0 6px;color:#ead4aa;font-family:system-ui,sans-serif;font-size:14px}
input[type=text]{width:100%;max-width:420px;background:#071c30;border:1px solid #bea16b;border-radius:5px;padding:12px 14px;color:#fff;font-family:system-ui,sans-serif}
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.mode-card{padding:20px;background:#071e3380;border:1px solid #9a7b5a;border-radius:10px}
.mode-card h3{margin:0;color:#ffdf88;font-size:22px;font-weight:normal}
.mode-card p{font-family:system-ui,sans-serif;font-size:14px;color:#d6dfe4;min-height:88px;margin:12px 0 18px}
.mode-card button{width:100%}
.question-top{display:flex;justify-content:space-between;gap:15px;align-items:center;font-family:system-ui,sans-serif;font-size:14px;color:#ddcda2;margin-bottom:14px}
#timer{font-size:24px;color:#ffdf84;font-variant-numeric:tabular-nums}
#timer.urgent{color:#ff9696}
.timer-track{height:5px;background:#ffffff20;border-radius:4px;margin-bottom:22px;overflow:hidden}
#timer-bar{height:100%;background:#6ce2e3;transition:width .2s linear}
#question-text{font-size:26px;line-height:1.4;margin:10px 0 25px;font-weight:normal}
#answers{display:grid;gap:12px}
#answers button{text-align:left;display:flex;align-items:center;gap:16px;width:100%;padding:14px 18px;background:linear-gradient(110deg,#006a86,#07304b);border:2px solid #bfa364;border-radius:8px;color:#fff9e6;line-height:1.45;font-size:19px;min-height:58px;box-shadow:inset 0 0 0 2px #e8bd3430}
#answers button:not(:disabled):hover{background:linear-gradient(110deg,#00849d,#114b64);border-color:#fff1a4}
#answers button:disabled{cursor:default;opacity:.6}
#answers button.correct{border-color:#8ade98;background:#164b43;opacity:1}
#answers button.wrong{border-color:#ed8a8a;background:#572d43;opacity:1}
.answer-letter{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid #ead28a;border-radius:50%;font-size:15px;color:#ffeab3}
#answer-result{font-family:system-ui,sans-serif;line-height:1.5;color:#ffe7a7;margin:20px 0 0}
.settings-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0;font-family:system-ui,sans-serif}
.settings-row input[type=checkbox]{width:22px;height:22px;accent-color:#e3bc66}
.settings-row input[type=range]{width:55%;accent-color:#e3bc66}
.record-tabs{display:flex;gap:10px;margin-bottom:20px}
.record-tabs button{padding:8px 18px}
.record-tabs .active{border-color:#fff3ab;background:#22647a}
.records-table{width:100%;border-collapse:collapse;font-family:system-ui,sans-serif;font-size:15px}
.records-table th,.records-table td{padding:12px 8px;text-align:left;border-bottom:1px solid #a5917340}
.records-table td:last-child,.records-table th:last-child{text-align:right}
.credit-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.credit-grid h3{color:#e6c282;font-size:16px;margin:0 0 8px}
.credit-grid p{margin:0;font-size:15px;line-height:1.7}
.result-score{font-size:54px;color:#ffe18b;margin:10px 0}
.fine-print{font-family:system-ui,sans-serif;font-size:13px;color:#c6d4dc}
@media(max-width:600px){#app{padding-top:0}.stage{border-radius:0}.menu-hint{font-size:14px}.game-info{padding:14px 12px}.stats{font-size:12px;gap:8px}dialog{padding:22px 19px;border-radius:12px}dialog h2{font-size:37px}.mode-cards{grid-template-columns:1fr;gap:12px}.mode-card{padding:14px}.mode-card p{min-height:auto}.mode-card h3{font-size:20px}#question-text{font-size:22px}#answers button{font-size:16px;padding:12px;gap:12px}.credit-grid{grid-template-columns:1fr}.button-row{gap:10px}.gold-button{padding:12px 17px}.category-progress span{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}