:root{color-scheme:dark;--ink:#11182c;--panel:#20263e;--violet:#493c62;--rust:#a65638;--ochre:#e6a15a;--paper:#fff0bd;--aqua:#46d6cc;--gold:#ffdb73;--pink:#f27acb;--h:100dvh;font-family:ui-monospace,Consolas,monospace;color:var(--paper);background:var(--ink)}*{box-sizing:border-box}body{margin:0;min-width:280px;background:radial-gradient(ellipse at 50% 0,#33304b,var(--ink) 72%)}button{font:inherit;font-size:13px;line-height:1.25;min-height:44px;border:1px solid #6f6583;border-bottom:3px solid #100e20;border-radius:3px;padding:9px 12px;background:#34344d;color:var(--paper);cursor:pointer;touch-action:manipulation}button:hover{border-color:var(--aqua)}button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:default}.primary{background:var(--aqua);color:var(--ink);font-weight:800;border-color:#96fff3}.gold{background:var(--gold);color:var(--ink);font-weight:800}.quiet{background:transparent}#app{max-width:1120px;margin:auto;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));min-height:var(--h);display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:10px;flex-wrap:wrap}.wordmark{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:1px;font-weight:800;white-space:nowrap}.brandgem{font-size:24px;color:var(--aqua);text-shadow:3px 2px var(--pink)}.wordmark small{display:block;font-size:10px;color:var(--ochre);letter-spacing:5px}nav{display:flex;gap:5px}nav button{font-size:11px;padding:6px 8px}#game{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,1fr);border:2px solid var(--ochre);background:var(--panel);box-shadow:0 0 0 4px #0b1020;flex:1;min-height:0}.scene{min-width:0;position:relative;overflow:hidden;background:var(--ink);display:flex;align-items:center;justify-content:center;border-right:2px solid var(--violet)}canvas{display:block;width:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;user-select:none;max-height:100%;object-fit:contain}#sceneLabel{position:absolute;top:10px;left:10px;right:10px;font-size:10px;letter-spacing:2px;color:#fff0bd;text-shadow:1px 1px #11182c;pointer-events:none}#sceneBadge{position:absolute;bottom:9px;left:10px;padding:5px 7px;background:#11182cdb;color:var(--aqua);font-size:10px;pointer-events:none}.panel{padding:16px;min-width:0;display:flex;flex-direction:column}#status{font-size:11px;display:flex;gap:10px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid #554b69;color:#c6c1da}#status b{color:var(--aqua)}#body{display:flex;flex-direction:column;gap:9px;padding-top:12px}h1,h2,h3,p{margin:0}h1{font-size:25px;line-height:1.1;color:var(--gold)}h2{font-size:20px;line-height:1.2;color:var(--gold)}h3{font-size:15px;color:var(--aqua)}p{font-size:12px;line-height:1.55;color:#d5cee0}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--ochre)}.message{min-height:36px;background:#11182c80;padding:8px 10px;border-left:3px solid var(--pink);color:var(--paper)}.actions{display:flex;gap:7px;flex-wrap:wrap}.actions>button{flex:1;min-width:90px}.stack{display:grid;gap:7px}.seam{display:grid;grid-template-columns:40px 1fr;align-items:center;text-align:left;min-height:56px;padding:6px 9px}.seam .num{font-size:23px;color:var(--ochre);font-weight:800}.seam b{font-size:12px;display:block}.seam small{color:#beb6d4;display:block;font-size:10px;margin-top:3px}.selected{border-color:var(--aqua);background:#29464d}.zonebar{display:flex;gap:5px}.zonebar button{flex:1;font-size:10px;min-width:0;padding:6px 4px}.zonebar .active{color:var(--ink);background:var(--ochre)}.meter{height:12px;background:var(--ink);border:1px solid #675777;position:relative}.meter i{height:100%;display:block;background:var(--aqua);transition:width .15s}.meter.heat i{background:var(--ochre)}.statline{display:flex;justify-content:space-between;font-size:10px;color:#c1b8d1}.albumgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.albumcard{border:1px solid #6c5a79;padding:10px;background:var(--ink)}.albumcard strong{font-size:12px;display:block;color:var(--aqua)}.albumcard p{font-size:10px}.albumcard.empty{opacity:.6}.tag{font-size:10px;color:var(--pink)}footer{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:8px;letter-spacing:1px;color:#c3a482;padding-top:12px}footer span{color:#d7cce2;letter-spacing:0}footer button{font-size:10px;background:none;border:0;min-height:44px;padding:6px;color:var(--aqua)}dialog{width:min(520px,calc(100vw - 24px));max-height:calc(var(--h) - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)));border:2px solid var(--ochre);border-radius:4px;background:var(--panel);color:var(--paper);padding:18px;overscroll-behavior:contain}dialog::backdrop{background:#080d20d9}#modalContent{display:grid;gap:12px}#closeModal{width:100%;margin-top:16px}.expanded #app{max-width:none}.expanded{background:#11182c}.hint{color:#9cdedb;font-size:10px}.progressrow{display:flex;gap:5px}.pip{width:15px;height:8px;background:#67516b}.pip.filled{background:var(--aqua)}
@media(max-width:720px){#game{grid-template-columns:minmax(0,1fr);flex:0}.scene{border-right:0;border-bottom:2px solid var(--violet);height:clamp(140px,29dvh,245px)}canvas{height:100%;width:100%;object-fit:cover}.panel{padding:12px}#body{gap:8px}h1{font-size:24px}h2{font-size:18px}#app{min-height:var(--h)}footer{margin-top:auto}header{padding-bottom:9px}.wordmark{font-size:11px}nav button{font-size:10px;padding:5px 7px}.panel .seam{min-height:51px}.scene.specimenScene canvas{object-fit:contain}}
@media(max-width:370px){#app{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.wordmark{font-size:9px;letter-spacing:0}.wordmark small{letter-spacing:3px}.brandgem{font-size:20px}header{gap:5px}nav{gap:3px}nav button{padding:4px 5px;font-size:10px}.scene{height:145px}.panel{padding:10px}p{font-size:11px}}
@media(orientation:landscape) and (max-height:520px){#app{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom))}header{padding-bottom:5px;flex-wrap:nowrap}.wordmark{font-size:10px}.wordmark small{font-size:8px}nav button{min-height:44px}#game{grid-template-columns:minmax(180px,.9fr) minmax(250px,1.2fr);flex:1;align-items:stretch}.scene{height:auto;min-height:170px;border-right:2px solid var(--violet);border-bottom:0;position:sticky;top:0;max-height:calc(var(--h) - 72px)}canvas{height:auto;max-height:100%;object-fit:contain}.panel{padding:9px}#body{gap:6px;padding-top:7px}#status{font-size:10px;padding-bottom:6px;gap:8px}h1{font-size:20px}h2{font-size:17px}p{font-size:11px}.seam{min-height:49px}.zonebar button{min-height:44px}footer{padding-top:3px;font-size:7px;gap:5px}footer button{min-height:44px}.message{min-height:0;padding:6px 8px}.albumgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.meter i{transition:none}}
button{min-width:44px}dialog{width:min(520px,calc(100vw - max(12px,env(safe-area-inset-left)) - max(12px,env(safe-area-inset-right))))}
@media(max-width:720px) and (orientation:portrait){.playing .scene{height:clamp(118px,19dvh,170px)}}
.albumstone{width:48px;height:64px;float:right;background-image:url('assets/specimens.png');background-size:192px 192px;image-rendering:pixelated;margin:0 0 4px 6px}
#closeModal{position:sticky;bottom:0;background:#34344d;box-shadow:0 -7px 0 var(--panel)}
dialog{top:max(12px,env(safe-area-inset-top));bottom:max(12px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));margin:auto;max-height:calc(var(--h) - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))}
@media(max-width:370px){.albumgrid{grid-template-columns:1fr}.albumcard{min-height:86px}}
@media(min-width:721px) and (max-width:900px) and (orientation:portrait){#game{grid-template-columns:minmax(0,1fr);flex:0}.scene{height:clamp(150px,25dvh,245px);border-right:0;border-bottom:2px solid var(--violet)}canvas{height:100%;width:100%;object-fit:cover}.panel{padding:12px}}
@media(max-width:900px) and (orientation:portrait){.playing canvas{object-fit:contain}}

/* Optional expanded view retains navigation while the field notebook scrolls. */
body.expanded{overflow:hidden}.expanded #app{position:fixed;inset:0;height:var(--h);min-height:0;max-width:none;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom))}.expanded #game{flex:1;min-height:0}.expanded .panel{overflow-y:auto;min-height:0;overscroll-behavior:contain;touch-action:pan-y}.expanded footer{margin-top:0;flex-shrink:0}.expanded header{flex-shrink:0}
@media(max-width:720px) and (orientation:portrait){.expanded #game{display:flex;flex-direction:column}.expanded .scene{height:clamp(110px,24dvh,190px);flex-shrink:0}.expanded .panel{flex:1}}

/* The embedded notebook also keeps pause, sound and view controls in reach. */
#app{height:var(--h);min-height:0}header,footer{flex-shrink:0}#game{flex:1;min-height:0}.panel{overflow-y:auto;min-height:0;overscroll-behavior:contain;touch-action:pan-y}footer{margin-top:0}
@media(max-width:720px) and (orientation:portrait){#game{display:flex;flex-direction:column}.scene{height:clamp(118px,26dvh,190px);flex-shrink:0}.panel{flex:1}.playing .scene{height:clamp(108px,19dvh,154px)}}

#closeModal{position:sticky;top:0;z-index:2;margin:0 0 12px;background:var(--panel);border:2px solid var(--aqua);min-height:44px}

/* Entry actions precede the longer field note, including on an earned save. */
.menu-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:7px}.menu-actions button{min-width:0;font-size:12px;padding:8px}
body:not(.playing) canvas{object-fit:contain}body:not(.playing) #sceneLabel{display:none}