@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;font-family:'Noto Sans Thai',system-ui,sans-serif;color:#f0f8f7;background:#072b39}main{max-width:1600px;margin:auto;padding:30px 34px 20px}.heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:15px}.eyebrow{font-size:10px;letter-spacing:2px;color:#a4c8cf}h1{font-size:28px;font-weight:600;margin:9px 0 0}h1 span{display:inline-block;font-size:12px;color:#a4c8cf;margin-left:18px;font-weight:400}.controls{display:flex;gap:9px}button{font:inherit;font-size:12px;background:#ffffff0c;border:1px solid #ffffff35;color:#f0f8f7;border-radius:30px;min-height:44px;padding:10px 18px;cursor:pointer}button:hover{background:#ffffff18}button:focus-visible,a:focus-visible{outline:3px solid #e8bd64;outline-offset:4px}.ocean{position:relative;isolation:isolate;overflow:hidden;border:1px solid #a3d0dc25;border-radius:24px;background:radial-gradient(ellipse at 50% 58%,#245660 0,#123e4b 45%,#092c3a 90%);transition:background 1s}.island-scene{position:relative;width:100%;max-width:1400px;aspect-ratio:3/2;margin:-1% auto 0;z-index:1}.island-scene img{display:block;position:absolute;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 30px #00192355);transition:filter 1s}canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.ambient{position:absolute;inset:20% -40%;background:repeating-radial-gradient(ellipse at center,transparent 0 55px,#a9e5e809 56px 57px,transparent 58px 115px);transform:scaleY(.5);animation:sea-breathe 12s ease-in-out infinite;pointer-events:none}.ambient-two{inset:34% -20%;animation-delay:-5s;opacity:.5}.sea-note{position:absolute;bottom:22px;left:26px;z-index:2;font-size:9px;letter-spacing:2px;color:#c8e4e8;display:flex;align-items:center;gap:10px}.sea-note i{width:6px;height:6px;border-radius:50%;background:#71d9ce;box-shadow:0 0 12px #71d9ce}.sea-note span{letter-spacing:0;color:#9ebfc8;margin-left:10px}#load-status{position:absolute;left:25px;top:10px;font-size:12px;color:#f1d48f}footer{display:flex;justify-content:space-between;gap:20px;color:#9ebfc8;font-size:11px;padding:18px 2px}a{color:#c8e4e8;text-decoration:none}.evening .ocean{background:radial-gradient(ellipse at 50% 55%,#2e4a66,#162a48 65%,#0d1b30)}.evening .island-scene img{filter:brightness(.8) saturate(.85) drop-shadow(0 24px 30px #00102066)}.paused .ambient{animation-play-state:paused}@keyframes sea-breathe{50%{transform:scaleY(.52) translateX(15px);opacity:.6}}@media(max-width:700px){main{padding:20px 12px}.heading{display:block}h1{font-size:23px}h1 span{display:block;margin:6px 0 0}.controls{margin-top:16px}button{font-size:11px;padding:9px 14px}.ocean{border-radius:16px}.island-scene{margin:4% 0 7%;width:112%;left:-6%;max-width:none}.sea-note{left:14px;bottom:12px;font-size:8px;gap:7px}.sea-note span{display:none}footer{font-size:10px;flex-direction:column;gap:9px}}@media(prefers-reduced-motion:reduce){.ambient{animation:none}.island-scene img{transition:none}}
/* Keep the complete capital and its harbor visible on desktop. */
@media(min-width:701px){.island-scene{max-width:min(1400px,calc((100svh - 200px)*1.5));margin:0 auto}.ocean{min-height:340px}}

.capital-hotspot{position:absolute;z-index:3;display:grid;place-items:center;font-size:11px;border:1px solid #ffedb5a0;background:#173647b8;border-radius:20px;padding:5px 10px;color:#fff3ce;box-shadow:0 3px 12px #09233255}.capital-hotspot:hover{background:#31617be6;outline:2px solid #ffe199}.capital-hotspot.palace{left:47%;top:30%}.capital-hotspot.harbor{left:25%;top:77%}.capital-hotspot.library{left:74%;top:46%}.capital-hotspot.lighthouse{left:7%;top:55%}@media(max-width:600px){.capital-hotspot{font-size:9px;padding:4px 7px}}

/* Parent page owns the shared time and motion controls. */
.controls{display:none}