*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:#07090d;color:#d6c5a3;width:100%;height:100%;overscroll-behavior:none;overflow:hidden;font-family:monospace;user-select:none;-webkit-user-select:none}body{display:grid;place-items:center}#cabinet{width:min(1152px,100vw);padding:0 12px}header{height:36px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:2px;color:#9b9586}header b{color:#c9a174;font-weight:normal}nav{display:flex;gap:6px}button,select{font:inherit;color:inherit;background:#12161b;border:1px solid #534e43;cursor:pointer;border-radius:3px;touch-action:none}nav button,nav select{height:28px;min-width:32px;font-size:17px}nav select{font-size:11px}#playfield{display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;width:100%}#screen{position:relative;width:100%;aspect-ratio:12/7;overflow:hidden;background:#080b15;box-shadow:0 0 0 1px #403a30,0 15px 60px #0008}canvas{width:100%;height:100%;object-fit:contain;display:block;image-rendering:pixelated;touch-action:none}#panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:5%;background:#050710b8}#panel.hidden{display:none}#panel.title{background:linear-gradient(#030610b0,#03061040 55%,#030610b0)}h1{font:bold clamp(40px,8vw,100px)/1 Georgia,serif;margin:0 0 12px;color:#e9b16a;letter-spacing:6px;text-shadow:3px 3px #762d22,-1px -1px #ffe2a4}h2{font-size:clamp(18px,3vw,30px);color:#efd3a0;margin:8px 0 18px;text-transform:uppercase;letter-spacing:2px}.tag{font-size:clamp(9px,1.3vw,14px);letter-spacing:3px;color:#e3c49a;margin:0 0 14px}.verse{font:italic clamp(15px,2.3vw,26px)/1.65 Georgia,serif;white-space:pre-line;color:#eee2c5;margin:10px 0 25px}#panel button{font-size:clamp(11px,1.4vw,15px);font-weight:bold;letter-spacing:1px;padding:12px 25px;margin:5px;border:2px solid #c89e60;background:#31251ecc;color:#ffe3af;min-width:170px}#panel button:hover{background:#81432d}#panel p.small{font-size:clamp(9px,1.2vw,13px);line-height:1.6;color:#bdaf98;margin:14px 0 0}footer{height:28px;display:flex;align-items:center;justify-content:center;color:#8e8a7d;font-size:10px;letter-spacing:1px}.controlRail{display:none}.touch #cabinet{width:100vw;padding:0 max(4px,env(safe-area-inset-right)) 0 max(4px,env(safe-area-inset-left))}.touch header{padding:0 8px}.touch #playfield{grid-template-columns:1fr auto 1fr}.touch #screen{width:min(calc(100vw - 216px),calc((100dvh - 68px)*12/7))}.touch .controlRail{display:flex;align-self:end;align-items:center;justify-content:center;padding-bottom:28px;width:100%;min-width:100px}.touch #rightControls{flex-direction:column;gap:16px}#stick{position:relative;width:100px;height:100px;touch-action:none;border-radius:50%;border:2px solid #555b57;background:radial-gradient(circle,#222d32 0 45%,#11191f 46% 70%,#293035 71%);box-shadow:inset 0 2px 10px #0009,0 3px 0 #000;display:flex;align-items:center;justify-content:center}#stick span{position:absolute;font-size:13px;color:#b9b79e;pointer-events:none}#stick .up{top:4px}#stick .down{bottom:3px}#stick .left{left:4px}#stick .right{right:4px}#stickThumb{width:44px;height:44px;pointer-events:none;border-radius:50%;background:radial-gradient(circle at 40% 30%,#b84b35,#762b25 75%);border:2px solid #e3a87866;box-shadow:0 4px 7px #000b;will-change:transform}.controlRail button{width:70px;height:70px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 5px #05070b,inset 0 2px 3px #fff2;background:radial-gradient(circle at 40% 30%,#415054,#1a292e);border:2px solid #687b77}.controlRail button[data-key=fire]{background:radial-gradient(circle at 40% 30%,#a95334,#632a25);border-color:#c38d59}.controlRail button b{font-size:27px;line-height:27px}.controlRail button small{font-size:9px;letter-spacing:1px;margin-top:4px}.controlRail button.on{filter:brightness(1.5);transform:translateY(3px);box-shadow:0 2px #05070b}.touch #hint{font-size:9px}.touch #touchToggle{color:#e6b86b;border-color:#a67448}#cabinet:fullscreen,body.immersive #cabinet{width:100vw;height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:0 max(4px,env(safe-area-inset-right)) 0 max(4px,env(safe-area-inset-left));background:#07090d}#cabinet:fullscreen #screen,body.immersive #screen{width:min(calc(100vw - 16px),calc((100dvh - 64px)*12/7))}.touch #cabinet:fullscreen #screen,body.touch.immersive #screen{width:min(calc(100vw - 216px),calc((100dvh - 64px)*12/7))}@media(orientation:landscape) and (max-height:600px){#cabinet{width:min(100vw,calc((100dvh - 30px)*12/7));padding:0}header{height:30px;font-size:8px}footer{display:none}nav button,nav select{height:24px}.touch #screen,.touch #cabinet:fullscreen #screen,body.touch.immersive #screen{width:min(calc(100vw - 204px),calc((100dvh - 34px)*12/7))}.touch .controlRail{padding-bottom:18px;min-width:96px}#stick{width:94px;height:94px}.touch #rightControls{gap:14px}.controlRail button{width:64px;height:64px}#panel{padding:3%}h1{font-size:50px}h2{font-size:19px}.verse{font-size:17px;margin:5px 0 10px}#panel button{padding:9px 18px}.tag{margin-bottom:8px}}@media(orientation:portrait){.touch #playfield{grid-template-columns:1fr 1fr;row-gap:25px}.touch #screen,.touch #cabinet:fullscreen #screen,body.touch.immersive #screen{grid-column:1/-1;grid-row:1;width:calc(100vw - 12px)}.touch #leftControls{grid-column:1;grid-row:2}.touch #rightControls{grid-column:2;grid-row:2;flex-direction:row;gap:12px}.touch .controlRail{align-self:center;padding-bottom:0}header{font-size:8px;letter-spacing:0}header b{display:none}.touch footer{font-size:8px;height:40px;text-align:center;padding:10px}#panel{padding:12px}.tag{margin-bottom:5px}h1{font-size:42px;margin-bottom:8px}.verse{font-size:14px;margin:5px 0}h2{font-size:17px;margin:5px 0}#panel button{padding:8px 14px;min-width:130px}#panel p.small{margin-top:6px}}

#panel.canto{background:#050a10;overflow:hidden;padding:0}.cantoArt{position:absolute;inset:0;background:linear-gradient(90deg,#05091018,#050910b0 52%,#050910ed),url('canto1.png') center/cover;animation:cantoReveal 1.4s ease-out both,forestDrift 14s linear 1.4s infinite alternate}.cantoCopy{position:relative;margin-left:33%;width:65%;padding:3%;animation:verseReveal 1.8s ease-out both}.cantoCopy .verse{text-shadow:0 2px 4px #000;font-size:clamp(14px,2vw,25px)}.cantoCopy h2{font-family:Georgia,serif;font-size:clamp(18px,2.5vw,32px)}@keyframes cantoReveal{from{opacity:0;filter:brightness(.2)}to{opacity:1;filter:brightness(1)}}@keyframes forestDrift{from{transform:scale(1)}to{transform:scale(1.06)}}@keyframes verseReveal{0%,25%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}@media(max-width:600px){.cantoCopy{margin-left:15%;width:84%}.cantoCopy .verse{font-size:13px;line-height:1.5}.cantoCopy .tag{font-size:8px}.cantoCopy h2{font-size:16px}.cantoArt{background-position:30% center}}

#panel.canto{background:transparent}#panel.scene-in{animation:sceneIn .85s ease-out both}#panel.scene-out{animation:sceneOut .85s ease-in both;pointer-events:none}.cantoArt{animation:forestDrift 14s linear infinite alternate}.cantoCopy{animation:verseReveal .85s ease-out both}@keyframes sceneIn{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}@keyframes sceneOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.055)}}
/* iOS long-press must never turn game controls into selectable text. */
#cabinet,#cabinet *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}#playfield,.controlRail,.controlRail *,#game{touch-action:none}.controlRail button{appearance:none;-webkit-appearance:none;isolation:isolate}.controlRail button *{pointer-events:none}.controlRail button:focus{outline:none}#stick{cursor:default}
/* A chapter selector must scroll on phones, including while game gestures stay disabled. */
#panel.map{padding:3%;background:#070b14ed;gap:4px}.chapterGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;overflow:auto;min-height:0;max-height:70%;padding:5px;touch-action:pan-y;-webkit-overflow-scrolling:touch}#panel .chapterGrid button{display:flex;align-items:center;text-align:left;gap:10px;min-width:0;margin:0;padding:11px 10px;font-size:11px;letter-spacing:0;background:#14212a;border:1px solid #6a5e46;touch-action:pan-y}#panel .chapterGrid b{font:22px Georgia;color:#d6ae70}#panel .chapterGrid span{line-height:1.3}#panel.map h2{font-size:20px;margin:3px}#panel.map .small{margin:2px;font-size:10px}.chapterEnd{background:radial-gradient(ellipse at center,#33281bda,#080e19ed)!important}.victory{background:radial-gradient(ellipse at 50% 20%,#748a9a,#142339 50%,#080c18)!important}.victory h2{font-family:Georgia,serif;max-width:85%;line-height:1.4;text-shadow:0 0 20px #f4d99b}.victory:before{content:'✧     ·     ✦      ·      ✧';font-size:30px;color:#ffe9ae;letter-spacing:18px;animation:stars 3s infinite alternate}@keyframes stars{to{opacity:.4;transform:translateY(-6px)}}@media(max-width:650px){.chapterGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}#panel .chapterGrid button{font-size:9px;padding:7px;gap:6px}#panel.map h2{font-size:14px}#panel.map .small{font-size:8px}#panel.title button{padding:6px 14px;margin:3px}.cantoCopy .small{font-size:9px!important}.cantoCopy .verse{line-height:1.35}}
#playfield:has(#panel.map){touch-action:pan-y}#panel.map,#panel.map *{touch-action:pan-y}
@media(max-width:650px){.cantoCopy{margin-left:10%;width:88%;padding:2%;max-height:100%;overflow:auto;touch-action:pan-y}.cantoCopy .verse{font-size:clamp(10px,2.8vw,13px);margin:5px 0}.cantoCopy h2{font-size:15px;line-height:1.15;margin:4px 0}#panel.canto button{padding:6px 12px;margin:3px}.cantoCopy .small{font-size:8px!important;line-height:1.3!important;margin:4px 0!important}}
#playfield:has(#panel.canto),#panel.canto,.cantoCopy,.cantoCopy *{touch-action:pan-y}

#panel.victory{background:linear-gradient(0deg,#030915ee,#03091555 75%,transparent)!important;padding:5% 8%;justify-content:flex-end}#panel.victory:before{display:none}#panel.victory h2{font-size:20px;margin:0 0 7px}#panel.victory button{padding:7px 14px;margin:3px}#panel.victory .small{margin:4px}

.touch #rightControls{gap:10px}.scores{width:min(440px,92%);max-height:50%;overflow:auto;touch-action:pan-y}.scores>div{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;text-align:left;padding:7px;border-bottom:1px solid #8e714633}.scores b{text-align:right}.scores small{text-align:right;color:#a99a82}.initials{display:flex;gap:16px;justify-content:center}.initials>div{display:flex;flex-direction:column}#panel .initials button{min-width:44px;width:52px;padding:4px;margin:2px;font-size:24px;line-height:1.1}.initials .selected{outline:1px solid #f1cc83;border-radius:5px}#panel.record h2{font-size:clamp(12px,2vw,24px);margin:4px 0 12px}#panel.record .tag{margin-bottom:4px}@media(orientation:portrait){.touch #rightControls{position:relative}.scores>div{padding:3px;font-size:10px}#panel .initials button{font-size:18px;width:42px;min-width:42px;padding:2px}.initials{gap:8px}#panel.record{padding:6px}}@media(orientation:landscape) and (max-height:450px){.touch #rightControls{gap:7px;padding-bottom:5px}}

/* Illustrated interlude: the image opens first, the verse follows, then dissolves into play. */
#panel.canto{background:transparent;isolation:isolate}
#panel.canto:before,#panel.canto:after{content:none}
#panel.scene-in{animation:illustrationArrives 1.4s ease-out both}
#panel.scene-out{animation:illustrationLeaves 1.4s ease-in both;pointer-events:none}
#panel.canto .cantoArt{animation:landscapeBreath 18s ease-in-out infinite alternate;transform-origin:25% 60%}
#panel.canto .cantoCopy{animation:none;text-align:left}
.cantoCopy .tag{animation:lineArrives .65s .3s both}
.cantoCopy h2{animation:lineArrives .8s .45s both}
.cantoCopy .verse{animation:lineArrives 1s .65s both}
.cantoCopy .small,.cantoCopy button{animation:lineArrives .8s .95s both}
#panel.canto .cantoMotion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:auto}
#panel.scene-out .cantoCopy{animation:wordsLeave .55s ease-in both}
@keyframes illustrationArrives{from{opacity:0}to{opacity:1}}
@keyframes illustrationLeaves{0%,20%{opacity:1}100%{opacity:0}}
@keyframes landscapeBreath{from{transform:scale(1.02) translateX(-.4%)}to{transform:scale(1.09) translateX(1%)}}
@keyframes lineArrives{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes wordsLeave{to{opacity:0;transform:translateY(-5px)}}
.touch #rightControls{padding-bottom:0}

/* Compact controls with an explicit fullscreen action; the old instructional footer is removed. */
header{height:44px;gap:8px;position:relative;z-index:20;flex-shrink:0}header>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nav{flex-shrink:0;align-items:center;gap:5px}nav button,nav select{height:36px;min-width:36px}#full{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;padding:0 9px;color:#ffe1a0;border-color:#d6aa66;background:#31271c}#full svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}#fullLabel{font-size:9px;letter-spacing:.4px;font-weight:bold}
#cabinet{max-height:100dvh}.touch #screen{width:min(calc(100vw - 216px),calc((100dvh - 48px)*12/7))}
#cabinet:fullscreen #screen,body.immersive #screen{width:min(calc(100vw - 16px),calc((100dvh - 48px)*12/7))}.touch #cabinet:fullscreen #screen,body.touch.immersive #screen{width:min(calc(100vw - 216px),calc((100dvh - 48px)*12/7))}
@media(orientation:portrait){.touch #screen,.touch #cabinet:fullscreen #screen,body.touch.immersive #screen{width:calc(100vw - 12px)}.touch #playfield{row-gap:14px}header>span{font-size:8px;letter-spacing:0}}
@media(max-width:540px){#fullLabel{display:none}header>span{max-width:100px}nav{gap:4px}}
@media(orientation:landscape) and (max-height:600px){header{height:40px}nav button,nav select{height:34px}#cabinet{width:min(100vw,calc((100dvh - 42px)*12/7))}.touch #screen,.touch #cabinet:fullscreen #screen,body.touch.immersive #screen{width:min(calc(100vw - 204px),calc((100dvh - 42px)*12/7))}}

/* Landscape uses one available-height budget and explicit control rails. */
@media(orientation:landscape){
 body.touch{--rail:clamp(82px,11vw,126px);--bar:42px;--safe-x:calc(env(safe-area-inset-left,0px) + env(safe-area-inset-right,0px));--safe-y:calc(env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px));--field-h:calc(100dvh - var(--bar) - var(--safe-y) - 8px)}
 body.touch #cabinet,body.touch #cabinet:fullscreen,body.touch.immersive #cabinet{width:100%;height:100dvh;max-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:env(safe-area-inset-top,0px) max(4px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(4px,env(safe-area-inset-left,0px))}
 body.touch header{height:var(--bar);min-height:var(--bar);width:100%;padding:0 4px}
 body.touch #playfield{flex:0 0 auto;min-height:0;grid-template-columns:var(--rail) minmax(0,1fr) var(--rail);gap:4px;align-content:center;align-items:center}
 body.touch #screen,body.touch #cabinet:fullscreen #screen,body.touch.immersive #screen{width:min(100%,calc(var(--field-h)*12/7));max-height:var(--field-h);grid-column:2;grid-row:1}
 body.touch .controlRail{width:100%;min-width:0;align-self:end;padding:0 0 clamp(6px,5dvh,26px)}
 body.touch #leftControls{grid-column:1;grid-row:1}body.touch #rightControls{grid-column:3;grid-row:1;flex-direction:column;gap:14px}
 body.touch #stick{width:clamp(76px,10vw,108px);height:clamp(76px,10vw,108px)}
 body.touch .controlRail button{width:clamp(62px,8vw,80px);height:clamp(62px,8vw,80px)}
}
@media(orientation:landscape) and (max-height:450px){
 body.touch{--bar:36px}body.touch header>span{font-size:8px;max-width:150px}body.touch nav button,body.touch nav select{height:32px}body.touch #fullLabel{display:none}
 #panel.title{padding:8px}#panel.title h1{font-size:36px;margin:0 0 4px}#panel.title .tag{font-size:8px;margin:0 0 4px}#panel.title button{padding:6px 12px;margin:3px;font-size:10px}#panel.title p.small{font-size:8px;line-height:1.3;margin-top:4px}
 .cantoCopy .verse{font-size:clamp(12px,2.2dvh,17px);line-height:1.45;margin:4px 0 10px}.cantoCopy h2{font-size:18px}.cantoCopy .tag{font-size:9px}
}

header a{color:inherit;text-decoration:none}
/* Phone landscape: use all available height; toolbar and controls occupy the side margins. */
@media(orientation:landscape) and (max-height:500px){
 body.touch #cabinet,body.touch #cabinet:fullscreen,body.touch.immersive #cabinet{position:relative;padding:0 max(3px,env(safe-area-inset-right)) 0 max(3px,env(safe-area-inset-left))}
 body.touch #playfield{display:flex;justify-content:center;position:relative;width:100%;height:100dvh}
 body.touch #screen,body.touch #cabinet:fullscreen #screen,body.touch.immersive #screen{width:min(100%,calc(100dvh*12/7));max-height:100dvh;flex:none}
 body.touch header{position:absolute;right:max(4px,env(safe-area-inset-right));top:4px;width:80px;height:auto;min-height:0;padding:0;z-index:30}
 body.touch header>span{display:none}body.touch nav{display:grid;grid-template-columns:36px 36px;gap:4px;width:76px}
 body.touch nav button,body.touch nav select{width:36px;min-width:36px;height:32px;padding:0;font-size:15px}body.touch nav select{font-size:10px}
 body.touch #full{grid-column:1/-1;width:76px;min-width:76px;height:32px}body.touch #fullLabel{display:none}
 body.touch .controlRail{position:absolute;bottom:max(6px,env(safe-area-inset-bottom));width:80px;padding:0;z-index:25;min-width:0}
 body.touch #leftControls{left:0}body.touch #rightControls{right:0;gap:10px}
 body.touch #stick{width:80px;height:80px}body.touch .controlRail button{width:64px;height:64px}
}

.homeLink{display:none}@media(orientation:landscape) and (max-height:500px){body.touch .homeLink{display:flex;grid-column:1/-1;align-items:center;justify-content:center;height:28px;border:1px solid #534e43;background:#12161b;border-radius:3px;font-size:22px;color:#d6c5a3}}