*{margin:0;padding:0;box-sizing:border-box;}
body{background:#020802;overflow:hidden;font-family:'VT323','Courier New','Lucida Console',monospace;cursor:default;user-select:none;-webkit-user-select:none;touch-action:none;color:#30ff50;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
canvas{display:block;}
#ui-overlay{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:10;}
#discovery-banner{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:#020802;border:1px solid #30aa30;padding:9px 15px;font-size:18px;color:#50ff50;opacity:0;transition:opacity 0.5s;max-width:340px;text-align:center;line-height:1.5;pointer-events:none;text-shadow:0 0 8px #30ff50;box-shadow:0 0 16px rgba(48,255,80,0.1),inset 0 0 24px rgba(0,20,0,0.5);}
#discovery-banner::before{content:'+-- DISCOVERY --+';display:block;font-size:12px;color:#30aa30;margin-bottom:4px;letter-spacing:2px;}
#discovery-banner.show{opacity:1;}
#task-bubble{position:absolute;bottom:34px;left:108px;max-width:min(360px,calc(100vw - 128px));background:#020802;border:1px solid #50ff50;color:#50ff50;font-size:21px;line-height:1.3;padding:8px 18px;opacity:0;transform:translateX(-8px);transition:opacity 0.4s ease,transform 0.4s ease;pointer-events:none;text-shadow:0 0 10px #30ff50;}
#task-bubble::before{content:'> ';}
#task-bubble.show{opacity:1;transform:translateX(0);}
.speed-btn{background:#040a04;border:1px solid #1a5a1a;color:#1a5a1a;font-family:'VT323','Courier New',monospace;font-size:16px;padding:4px 10px;cursor:pointer;text-shadow:none;transition:border-color 0.12s,color 0.12s,background 0.12s,box-shadow 0.12s;}
.speed-btn.active{border-color:#50ff50;color:#50ff50;text-shadow:0 0 8px #30ff50;box-shadow:0 0 8px rgba(48,255,80,0.15);}
.speed-btn:hover{border-color:#30aa30;color:#30aa30;}
.stg-spd{font-size:13px;padding:3px 8px;flex:1;text-align:center;}
.dbg-speed-btn{background:#0a0404;border:1px solid #3a1a1a;color:#aa5050;font-family:'VT323','Courier New',monospace;font-size:14px;padding:4px 10px;cursor:pointer;transition:border-color 0.12s,color 0.12s,box-shadow 0.12s;}
.dbg-speed-btn.active{border-color:#ff3030;color:#ff5050;text-shadow:0 0 6px #ff3030;box-shadow:0 0 6px rgba(255,48,48,0.15);}
.dbg-speed-btn:hover{border-color:#ff3030;color:#ff5050;}
#gallery-btn{position:absolute;bottom:10px;left:10px;width:88px;height:76px;pointer-events:auto;cursor:pointer;background:#040a04;border:1px solid #1a5a1a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#30aa30;text-shadow:0 0 10px rgba(48,170,48,0.5);transition:border-color 0.15s,color 0.15s,text-shadow 0.15s;}
#gallery-btn .btn-glyph{font-size:34px;line-height:1;}
#settings-btn .btn-glyph{font-size:22px;line-height:1;}
.btn-label{font-size:13px;letter-spacing:2px;opacity:0.75;line-height:1;}
#gallery-btn:hover{border-color:#50ff50;color:#50ff50;text-shadow:0 0 14px #30ff50;}
#gallery-badge{display:none;position:absolute;top:-5px;right:-5px;width:10px;height:10px;background:#50ff50;border-radius:50%;box-shadow:0 0 6px #30ff50;}
#gallery-badge.show{display:block;}
#settings-badge{display:none;position:absolute;top:-5px;right:-5px;width:10px;height:10px;background:#50ff50;border-radius:50%;box-shadow:0 0 6px #30ff50;}
#settings-badge.show{display:block;}
#settings-btn{position:absolute;bottom:92px;left:10px;width:88px;height:40px;pointer-events:auto;cursor:pointer;background:#040a04;border:1px solid #1a5a1a;display:flex;align-items:center;justify-content:center;gap:7px;color:#30aa30;text-shadow:0 0 8px rgba(48,170,48,0.4);transition:border-color 0.15s,color 0.15s,text-shadow 0.15s;}
#settings-btn:hover{border-color:#50ff50;color:#50ff50;text-shadow:0 0 12px #30ff50;}
#settings-panel{display:none;position:absolute;bottom:138px;left:10px;pointer-events:auto;background:#020802;border:1px solid #1a5a1a;padding:10px 14px;min-width:200px;box-shadow:0 0 20px rgba(48,255,80,0.06);}
#settings-panel.open{display:block;}
#settings-panel .stg-title{font-size:13px;color:#30aa30;margin-bottom:8px;letter-spacing:2px;}
#settings-panel label{display:block;font-size:14px;color:#1a8a1a;margin-bottom:2px;}
#settings-panel input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:#0a2a0a;outline:none;margin-bottom:10px;border-radius:0;}
#settings-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:#50ff50;cursor:pointer;border:1px solid #30aa30;box-shadow:0 0 6px rgba(48,255,80,0.4);}
#settings-panel input[type=range]::-moz-range-thumb{width:14px;height:14px;background:#50ff50;cursor:pointer;border:1px solid #30aa30;}
#gallery-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;align-items:center;justify-content:center;pointer-events:auto;}
#gallery-modal.open{display:flex;}
#gallery-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,4,0,0.8);}
#gallery-book{position:relative;width:560px;max-width:96vw;max-height:92vh;background:#020802;border:1px solid #30aa30;z-index:1;box-shadow:0 0 40px rgba(48,255,80,0.06),inset 0 0 60px rgba(0,15,0,0.6);overflow:hidden;padding:0;display:flex;flex-direction:column;}
#gallery-header{padding:10px 16px 6px;font-size:14px;color:#30aa30;border-bottom:1px solid #0a3a0a;letter-spacing:2px;flex-shrink:0;}
#gallery-tabs{display:flex;border-bottom:1px solid #1a5a1a;background:#030a03;flex-shrink:0;}
.gallery-tab{flex:1;padding:10px 6px;text-align:center;font-size:15px;color:#1a5a1a;cursor:pointer;border-right:1px solid #0a2a0a;letter-spacing:1px;transition:color 0.12s,background 0.12s,text-shadow 0.12s;}.gallery-tab:last-child{border-right:none;}.gallery-tab.active{color:#50ff50;text-shadow:0 0 8px #30ff50;background:#040a04;}
.gallery-tab:hover{color:#30aa30;}
#gallery-content{padding:14px 16px 16px;flex:1;overflow-y:auto;overscroll-behavior:contain;}
#gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:minmax(92px,auto);gap:6px;}
.gallery-cell{background:#030a03;border:1px solid #0a3a0a;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 5px;min-height:0;overflow:hidden;transition:border-color 0.15s,background 0.15s,box-shadow 0.15s;}
.gallery-cell:not(.locked){box-shadow:inset 0 0 22px rgba(20,80,20,0.14);}
.gallery-cell:not(.locked):hover{border-color:#2a7a2a;background:#041204;}
.gallery-cell.locked{opacity:0.16;}
.gallery-cell .glyph{font-size:26px;line-height:1.1;text-shadow:0 0 10px currentColor;margin-bottom:3px;white-space:pre;letter-spacing:0;}
.gallery-cell .gallery-name{font-size:13px;color:#30aa30;text-align:center;letter-spacing:1px;}
.gallery-cell.locked .gallery-name{color:#0a3a0a;}
.gallery-cell .gallery-counter{font-size:13px;color:#2a7a2a;margin-top:3px;letter-spacing:1px;}
.gallery-cell .prog-bar{font-size:13px;color:#1a5a1a;margin-top:2px;letter-spacing:-1px;}
.task-item{font-size:15px;color:#30aa30;padding:5px 0;display:flex;align-items:center;gap:8px;line-height:1.5;border-bottom:1px solid #0a1a0a;}
.task-item:last-child{border-bottom:none;}
.task-item .task-check{color:#1a5a1a;font-size:15px;flex-shrink:0;}
.task-item.done .task-check{color:#50ff50;text-shadow:0 0 6px #30ff50;}
.task-item.done .task-text{color:#0a3a0a;text-decoration:line-through;}
#gallery-close{position:absolute;top:8px;right:12px;font-size:18px;color:#1a5a1a;cursor:pointer;z-index:3;transition:color 0.1s;}
#gallery-close:hover{color:#50ff50;text-shadow:0 0 8px #30ff50;}
#debug-btn{position:absolute;bottom:12px;right:12px;pointer-events:auto;cursor:pointer;background:#0a0404;border:1px solid #5a1a1a;padding:6px 14px;font-family:'VT323','Courier New',monospace;font-size:16px;color:#aa3030;text-shadow:0 0 6px rgba(170,48,48,0.4);transition:border-color 0.15s,color 0.15s,text-shadow 0.15s,opacity 0.15s;opacity:0.7;}
#debug-btn:hover{border-color:#ff3030;color:#ff5050;text-shadow:0 0 10px #ff3030;}
#debug-panel{display:none;position:absolute;bottom:50px;right:12px;pointer-events:auto;background:#060202;border:1px solid #5a1a1a;padding:10px 14px;max-height:70vh;overflow-y:auto;min-width:280px;box-shadow:0 0 20px rgba(170,30,30,0.1);}
#debug-panel.open{display:block;}
#debug-panel .dbg-title{font-size:14px;color:#aa3030;margin-bottom:8px;letter-spacing:2px;}
.dbg-btn{display:block;width:100%;background:#0a0404;border:1px solid #3a1a1a;color:#aa5050;font-family:'VT323','Courier New',monospace;font-size:14px;padding:5px 10px;margin-bottom:4px;cursor:pointer;text-align:left;transition:border-color 0.12s,color 0.12s,background 0.12s,text-shadow 0.12s;}
.dbg-btn:hover{border-color:#ff3030;color:#ff5050;text-shadow:0 0 6px #ff3030;}
#border-flash{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:45;border:3px solid transparent;box-shadow:inset 0 0 0px transparent;opacity:0;transition:opacity 0.1s;}
#day-counter{position:absolute;top:10px;right:14px;pointer-events:none;font-size:16px;color:rgba(255,255,255,0.95);letter-spacing:2px;text-shadow:0 0 8px rgba(255,255,255,0.5);text-align:right;}
#day-clock{position:absolute;top:30px;right:14px;pointer-events:none;width:52px;height:56px;overflow:hidden;}
#day-clock canvas{display:block;}
#pause-btn{position:absolute;top:8px;left:14px;pointer-events:auto;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,0.3);width:42px;height:28px;display:flex;align-items:center;justify-content:center;font-family:'VT323','Courier New',monospace;font-size:16px;color:rgba(255,255,255,0.8);letter-spacing:1px;transition:border-color 0.15s,color 0.15s,background 0.15s;padding:0;}
#pause-btn:hover{border-color:rgba(255,255,255,0.7);color:#fff;}
#gameover-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,0.85);pointer-events:auto;}
#gameover-overlay.show{display:flex;}
#gameover-overlay .go-flames{font-size:28px;margin-bottom:10px;letter-spacing:6px;color:#ff6020;text-shadow:0 0 12px rgba(255,96,32,0.4);min-height:36px;}
#gameover-overlay .go-text{font-size:16px;color:rgba(220,220,220,0.85);text-align:center;line-height:1.8;letter-spacing:2px;text-shadow:0 0 12px rgba(200,200,200,0.1);}
#gameover-overlay .go-days{font-size:18px;color:rgba(160,160,160,0.7);margin-top:10px;letter-spacing:2px;}
#gameover-overlay .go-btn{margin-top:24px;background:transparent;border:1px solid rgba(200,200,200,0.3);color:rgba(220,220,220,0.8);font-family:'VT323','Courier New',monospace;font-size:20px;padding:8px 36px;cursor:pointer;letter-spacing:3px;transition:border-color 0.2s,color 0.2s,background 0.2s,text-shadow 0.2s;}
#gameover-overlay .go-btn:hover{border-color:rgba(255,255,255,0.6);color:#fff;text-shadow:0 0 10px rgba(255,255,255,0.3);}
#border-flash.active{opacity:1;border-color:#50ff50;box-shadow:inset 0 0 40px rgba(48,255,80,0.25),0 0 60px rgba(48,255,80,0.15);animation:borderPulse 0.6s ease-out;}
@keyframes borderPulse{0%{border-color:#80ff80;box-shadow:inset 0 0 80px rgba(80,255,80,0.4),0 0 100px rgba(80,255,80,0.3);}25%{border-color:#30ff50;box-shadow:inset 0 0 50px rgba(48,255,80,0.3),0 0 70px rgba(48,255,80,0.2);}50%{border-color:#80ff80;box-shadow:inset 0 0 60px rgba(80,255,80,0.35),0 0 80px rgba(80,255,80,0.25);}75%{border-color:#30ff50;box-shadow:inset 0 0 30px rgba(48,255,80,0.2),0 0 40px rgba(48,255,80,0.1);}100%{border-color:#50ff50;box-shadow:inset 0 0 40px rgba(48,255,80,0.25),0 0 60px rgba(48,255,80,0.15);}}
/* Scanline overlay via CSS for efficiency */
#scanlines{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:50;
background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px);mix-blend-mode:multiply;}
#vignette{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:49;
background:radial-gradient(ellipse at center,transparent 50%,rgba(0,4,0,0.6) 100%);}

/* Idle prompts: shown only while the player is on the first two tasks and has
   been still for a few seconds. Everything here is opt-in via a class that
   hints.js adds and removes, so nothing animates during normal play. */
#hint-strip{position:absolute;bottom:34px;left:108px;max-width:min(340px,calc(100vw - 132px));pointer-events:none;
 background:rgba(2,10,2,0.82);border:1px solid #14461a;border-left:2px solid #2a8a2a;padding:7px 13px;
 font-size:17px;line-height:1.35;color:#2f9a3a;letter-spacing:0.5px;text-shadow:0 0 6px rgba(48,255,80,0.22);
 opacity:0;transform:translateX(-8px);transition:opacity 0.55s ease,transform 0.55s ease;}
#hint-strip::before{content:'> ';color:#1a6a1a;}
#hint-strip.show{opacity:1;transform:translateX(0);animation:hintBreathe 3.6s ease-in-out infinite;}
@keyframes hintBreathe{0%,100%{opacity:0.62;}50%{opacity:0.95;}}

/* Slow breathing outline on the log button so the eye is drawn to it without
   anything flashing. Hover still wins. */
#gallery-btn.idle-cta{animation:ctaPulse 2.8s ease-in-out infinite;}
#gallery-btn.idle-cta:hover{animation:none;}
@keyframes ctaPulse{
 0%,100%{border-color:#1a5a1a;color:#30aa30;box-shadow:none;}
 50%{border-color:#3ecb4e;color:#74f584;box-shadow:0 0 15px rgba(48,255,80,0.16),inset 0 0 14px rgba(48,255,80,0.05);}
}
/* A caret drifting toward the button, as a second, quieter pointer. */
#hint-strip.show::after{content:'<';position:absolute;left:-15px;top:50%;margin-top:-10px;
 font-size:16px;color:#2a8a2a;opacity:0.7;animation:caretNudge 1.6s ease-in-out infinite;}
@keyframes caretNudge{0%,100%{transform:translateX(0);opacity:0.35;}50%{transform:translateX(-4px);opacity:0.8;}}

@media (max-width:560px){
 #hint-strip{font-size:15px;bottom:12px;left:108px;max-width:calc(100vw - 122px);}
}

/* ── Finish pass ──────────────────────────────────────────────────────────── */

/* Native scrollbars were the one thing on screen that did not look like a
   terminal. Phosphor-thin instead, in both engines. */
#gallery-content,#debug-panel{scrollbar-width:thin;}
#gallery-content{scrollbar-color:#1e6a24 transparent;}
#debug-panel{scrollbar-color:#5a1a1a transparent;}
#gallery-content::-webkit-scrollbar,#debug-panel::-webkit-scrollbar{width:8px;}
#gallery-content::-webkit-scrollbar-track,#debug-panel::-webkit-scrollbar-track{background:transparent;}
#gallery-content::-webkit-scrollbar-thumb{background:#14461a;border:1px solid #1e6a24;}
#gallery-content::-webkit-scrollbar-thumb:hover{background:#1e6a24;}
#debug-panel::-webkit-scrollbar-thumb{background:#3a1a1a;border:1px solid #5a1a1a;}
#debug-panel::-webkit-scrollbar-thumb:hover{background:#5a1a1a;}

/* Panels used to pop in with no transition at all. */
#gallery-modal.open #gallery-backdrop{animation:fadeIn 0.18s ease-out;}
#gallery-modal.open #gallery-book{animation:bookIn 0.24s cubic-bezier(0.16,0.9,0.3,1);}
#settings-panel.open{animation:panelIn 0.16s ease-out;transform-origin:bottom left;}
#debug-panel.open{animation:panelIn 0.16s ease-out;transform-origin:bottom right;}
#gameover-overlay.show{animation:fadeIn 0.5s ease-out;}
#discovery-banner{transform:translateX(-50%) translateY(-6px);transition:opacity 0.5s ease,transform 0.5s ease;}
#discovery-banner.show{transform:translateX(-50%) translateY(0);}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes bookIn{from{opacity:0;transform:translateY(10px) scale(0.985);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes panelIn{from{opacity:0;transform:translateY(6px) scale(0.985);}to{opacity:1;transform:translateY(0) scale(1);}}

/* The log is readable content — let it be selected, unlike the game surface. */
#gallery-content{user-select:text;-webkit-user-select:text;}

/* Keyboard focus was invisible: the chrome is div-based, so nothing showed a ring. */
#pause-btn:focus-visible,#gallery-btn:focus-visible,#settings-btn:focus-visible,
#debug-btn:focus-visible,#gallery-close:focus-visible,.gallery-tab:focus-visible,
.go-btn:focus-visible,.speed-btn:focus-visible,.dbg-btn:focus-visible,
.dbg-speed-btn:focus-visible,#settings-panel input:focus-visible{
 outline:1px solid #50ff50;outline-offset:2px;}
#debug-btn:focus-visible,.dbg-btn:focus-visible,.dbg-speed-btn:focus-visible{outline-color:#ff5050;}
.gallery-tab,#gallery-close,#pause-btn,#gallery-btn,#settings-btn,#debug-btn,.go-btn{-webkit-user-select:none;user-select:none;}

/* Settings: value readouts and the speed row, which used to be inline styles. */
#settings-panel label{display:flex;justify-content:space-between;align-items:baseline;}
.stg-val{color:#2f9a3a;font-size:13px;letter-spacing:1px;font-variant-numeric:tabular-nums;}
#stg-speed{display:none;margin-top:8px;border-top:1px solid #0a3a0a;padding-top:9px;}
.stg-speed-row{display:flex;gap:4px;margin-top:5px;}
#settings-panel input[type=range]{cursor:pointer;}
#settings-panel input[type=range]::-webkit-slider-thumb{transition:box-shadow 0.12s;}
#settings-panel input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 10px rgba(48,255,80,0.65);}

/* The debug console is a dev tool parked in the player's UI — keep it reachable
   but out of the way until it is wanted. */
#debug-btn:hover,#debug-btn:focus-visible{opacity:1;}

/* Hover affordance consistent across the green chrome. */
#gallery-btn:hover,#settings-btn:hover{background:#061006;}
.gallery-tab:hover{background:#040d04;}
.go-btn:hover{background:rgba(255,255,255,0.04);}
#pause-btn:hover{background:rgba(255,255,255,0.06);}
#pause-btn.paused{border-color:rgba(255,255,255,0.65);color:#fff;}

@media (max-width:560px){
 #gallery-book{max-width:100vw;max-height:100vh;height:100vh;width:100vw;border-left:none;border-right:none;}
 #gallery-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));}
 #task-bubble{font-size:18px;max-width:calc(100vw - 122px);}
 #debug-panel{min-width:0;width:calc(100vw - 24px);}
}

/* Respect the OS setting: the CRT flicker, the breathing prompts and the panel
   entrances all stand down. updFlicker() checks the same query in JS. */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
 #hint-strip.show,#gallery-btn.idle-cta,#hint-strip.show::after{animation:none;}
 #hint-strip.show{opacity:0.9;}
}

/* Log content: a progress line at the top of every tab, and the live task set
   apart from the struck-through history. */
.gal-count{font-size:12px;color:#1a5a1a;letter-spacing:2px;margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid #0a2a0a;}
.task-item.current{color:#50ff50;text-shadow:0 0 6px #30ff50;font-size:16px;}
.task-item.current .task-check{color:#50ff50;text-shadow:0 0 6px #30ff50;}
.task-sep{font-size:12px;color:#1a5a1a;margin:12px 0 4px;letter-spacing:2px;}