@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

:root{--night:#101b31;--panel:rgba(13,26,48,.72);--tile:#243956;--tile-border:#627698;--cream:#f6f1e4;--muted:#c3ccdc;--gold:#f6b74f;--line:#9a784e;--serif:'Libre Baskerville',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}
html{min-height:100%;background:var(--night)}
body{margin:0;min-height:100vh;color:var(--cream);font-family:var(--sans);background:linear-gradient(90deg,rgba(7,18,38,.15),rgba(7,18,38,.08)),url('assets/night-lake.png') center bottom/cover fixed no-repeat var(--night)}
button{font:inherit;color:inherit}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.app-shell{width:min(1500px,calc(100% - 56px));min-height:100vh;margin:auto;display:flex;flex-direction:column;padding:26px 0 24px}
.masthead{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.brand h1{font:400 clamp(44px,4.6vw,76px)/1.12 var(--serif);letter-spacing:-.055em;margin:0;white-space:nowrap}
.brand p{font:400 clamp(16px,1.55vw,23px)/1.4 var(--serif);color:#d6d4d7;margin:4px 0 0}
.toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;padding-top:8px}
.toolbar button{height:54px;padding:0 21px;border:1px solid #657994;border-radius:7px;background:rgba(32,51,79,.66);font:400 15px var(--serif);white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.toolbar button:hover:not(:disabled){background:rgba(55,77,110,.9);border-color:#abbad0;transform:translateY(-1px)}
.toolbar button:disabled{opacity:.45;cursor:default}
.toolbar button span{font:25px var(--sans);vertical-align:-2px;margin-right:8px}
.play-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,410px);gap:clamp(25px,4vw,70px);align-items:center;flex:1;padding-top:10px}
.game-area{min-width:0;display:flex;flex-direction:column;align-items:center}
.scoreboard{min-width:320px;display:flex;align-items:center;justify-content:center;gap:46px;padding:10px 40px 13px;background:rgba(9,22,43,.55);border:1px solid #4c607d;border-radius:11px;box-shadow:0 10px 35px rgba(1,8,20,.13)}
.scoreboard>div:not(.score-divider){display:flex;flex-direction:column;align-items:center;min-width:58px}
.scoreboard span{font:400 14px var(--serif)}
.scoreboard strong{font:700 27px/1.2 var(--serif);margin-top:5px}
.score-divider{height:35px;width:1px;background:#7184a1}
.puzzle-wrap{--tile-size:clamp(54px,6.7vw,104px);--gap:7px;position:relative;margin:24px 0 0;padding:0 74px;max-width:100%}
.board{display:grid;grid-template-columns:repeat(5,var(--tile-size));grid-template-rows:repeat(5,var(--tile-size));gap:var(--gap);touch-action:manipulation}
.tile{display:block;width:var(--tile-size);height:var(--tile-size);padding:0;border:1px solid var(--tile-border);border-radius:8px;background:linear-gradient(145deg,rgba(52,74,108,.88),rgba(26,46,76,.92));box-shadow:inset 0 1px 4px rgba(206,222,255,.12),0 5px 12px rgba(0,0,0,.13);cursor:pointer;transition:background .2s,box-shadow .2s,transform .16s}
.tile:hover{background:linear-gradient(145deg,rgba(65,88,121,.95),rgba(34,56,89,.97));transform:translateY(-1px)}
.tile.selected{border-color:#e7d9b5;box-shadow:0 0 0 2px rgba(249,228,173,.38),inset 0 1px 4px rgba(206,222,255,.12)}
.tile svg{display:block;width:100%;height:100%;overflow:visible}
.tile .track-shadow{stroke:#684b26;stroke-width:15;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.tile .track{stroke:var(--line);stroke-width:9;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,filter .2s}
.tile.lit .track{stroke:var(--gold);filter:drop-shadow(0 0 7px #ffbd48)}
.lantern{position:absolute;width:75px;height:98px;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}
.lantern img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 14px rgba(251,174,61,.65))}
.lantern-start{left:0;top:calc(var(--tile-size)/2 - 47px)}
.lantern-home{right:0;bottom:calc(var(--tile-size)/2 - 47px)}
.lantern-home img{filter:grayscale(.6) brightness(.6)}
.lantern-home.is-lit img{filter:drop-shadow(0 0 15px rgba(251,174,61,.8))}
.status{margin:21px 0 0;min-height:25px;font:400 16px/1.5 var(--sans);color:#e3d8c5;text-align:center}
.status.is-win{color:#ffce75;font-weight:700}
.instructions{align-self:stretch;max-height:680px;padding:26px 24px 25px;border:1px solid #536987;border-radius:15px;background-image:linear-gradient(to bottom,rgba(11,26,50,.96) 0%,rgba(11,26,50,.94) 58%,rgba(11,26,50,.38) 100%),url('assets/night-lake.png');background-size:cover;background-position:center bottom;box-shadow:0 15px 45px rgba(0,0,0,.12);backdrop-filter:blur(3px)}
.instructions h2{font:400 22px/1.32 var(--serif);letter-spacing:-.025em;margin:0 0 30px;text-align:center}
.instructions ol{list-style:none;margin:0;padding:0;display:grid;gap:32px}
.instructions li{display:grid;grid-template-columns:35px 66px 1fr;gap:14px;align-items:start}
.step-no{width:35px;height:35px;border:1px solid #8ba2c0;border-radius:50%;display:grid;place-items:center;font:400 17px var(--serif);background:#203755}
.step-icon{width:66px;height:66px;border:1px solid #8297b4;border-radius:7px;background:linear-gradient(145deg,#2d486e,#1c3152);position:relative}
.step-icon:before{content:"";position:absolute;width:33px;height:33px;top:15px;left:15px;border:7px solid var(--gold);border-radius:0 0 25px 0;border-left:0;border-top:0;filter:drop-shadow(0 0 5px #e69d35)}
.step-icon.straight:before{width:44px;height:0;top:29px;left:9px;border:0;border-top:7px solid var(--gold);border-radius:0}
.step-lantern{width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 0 5px rgba(247,183,79,.6))}
.instructions h3{font:400 18px/1.35 var(--serif);margin:0 0 5px}
.instructions p{font:400 15px/1.5 var(--serif);color:var(--muted);margin:0}
.keyboard-hint{display:flex;align-items:center;justify-content:center;gap:16px;min-height:40px;margin-top:10px;color:#e0deea;font:400 14px var(--serif);letter-spacing:.03em}
.keyboard-hint span{white-space:nowrap}
.keyboard-hint kbd{padding:7px 10px;margin-right:6px;border:1px solid #8799b3;border-radius:6px;background:rgba(12,28,52,.6);font:400 13px var(--sans);letter-spacing:.08em}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-height:820px) and (min-width:781px){.app-shell{padding:17px 0 14px}.brand h1{font-size:56px}.brand p{font-size:17px}.toolbar button{height:46px;padding:0 14px;font-size:13px}.play-layout{padding-top:0}.puzzle-wrap{--tile-size:clamp(56px,5.3vw,78px);--gap:5px;margin-top:15px}.scoreboard{padding:7px 24px}.scoreboard strong{font-size:22px}.lantern{width:55px;height:75px}.lantern-start{top:calc(var(--tile-size)/2 - 36px)}.lantern-home{bottom:calc(var(--tile-size)/2 - 36px)}.instructions{padding:18px 20px}.instructions h2{font-size:23px;margin-bottom:18px}.instructions ol{gap:18px}.instructions li{grid-template-columns:31px 52px 1fr;gap:11px}.step-no{width:31px;height:31px;font-size:15px}.step-icon,.step-lantern{width:52px;height:52px}.step-icon:before{top:11px;left:11px}.step-icon.straight:before{top:24px;left:4px}.instructions h3{font-size:16px}.instructions p{font-size:13px}.keyboard-hint{margin-top:2px}.status{margin-top:12px}}
@media(max-width:1120px){.masthead{flex-direction:column}.toolbar{justify-content:flex-start}.play-layout{gap:20px}.puzzle-wrap{--tile-size:clamp(50px,6vw,77px);padding:0 60px}.lantern{width:62px;height:82px}.lantern-start{top:calc(var(--tile-size)/2 - 40px)}.lantern-home{bottom:calc(var(--tile-size)/2 - 40px)}.instructions{padding:20px 16px}.instructions h2{font-size:22px}.instructions li{grid-template-columns:32px 52px 1fr;gap:9px}.step-icon,.step-lantern{width:52px;height:52px}}
@media(max-width:780px){body{background-attachment:scroll}.app-shell{width:min(100% - 28px,560px);padding:22px 0}.brand h1{font-size:47px}.brand p{font-size:16px}.toolbar{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.toolbar button{height:45px;padding:0 9px;font-size:13px}.toolbar button span{font-size:18px;margin-right:5px}.play-layout{display:flex;flex-direction:column;align-items:stretch;padding-top:24px;gap:23px}.scoreboard{min-width:240px;width:min(100%,310px);padding:8px}.puzzle-wrap{--tile-size:min(16.1vw,74px);--gap:4px;padding:0 32px;margin-top:20px}.lantern{width:35px;height:60px}.lantern-start{top:calc(var(--tile-size)/2 - 29px)}.lantern-home{bottom:calc(var(--tile-size)/2 - 29px)}.instructions{max-height:none;padding:20px}.instructions h2{text-align:left;white-space:normal;margin-bottom:22px}.instructions ol{gap:20px}.keyboard-hint{flex-wrap:wrap;gap:8px;margin-top:28px;font-size:12px}.keyboard-hint kbd{padding:4px 6px;font-size:11px}.status{font-size:14px}}
@media(max-width:390px){.brand h1{font-size:40px}.puzzle-wrap{--tile-size:min(15.8vw,60px);padding:0 27px}.lantern{width:29px}.toolbar button{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}