/* Pixel fonts (OFL, bundled locally — see fonts/OFL-*.txt) */
@font-face{font-family:"Press Start 2P";src:url(/samis-story-game/fonts/PressStart2P-Regular.ttf) format("truetype");font-display:block}
@font-face{font-family:"VT323";src:url(/samis-story-game/fonts/VT323-Regular.ttf) format("truetype");font-display:block}
:root{
  --red:#e52521; --red-d:#8b0d0a; --red-l:#ff7a6b;
  --yellow:#fbd000; --yellow-d:#b07a00; --yellow-l:#fff27a;
  --blue:#049cd8; --blue-d:#03507a; --blue-l:#7fd7ff;
  --green:#43b047; --green-d:#1e6b22; --green-l:#9be89e;
  --navy:#14124a; --ink:#fff;
  --pix:"Press Start 2P",monospace; --body:"VT323",monospace;
  --accent:#fbd000;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#000;color:var(--ink);font-family:var(--body);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,.tbtn{touch-action:manipulation}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- chunky pixel boxes ---------- */
.dialog{position:relative;background:var(--navy);color:#fff;border:4px solid #fff;
  box-shadow:0 0 0 4px #000,8px 8px 0 4px rgba(0,0,0,.55);
  clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
  padding:22px 24px}
.dialog::after{content:"";position:absolute;inset:4px;border:2px solid rgba(255,255,255,.18);pointer-events:none}
.btn{font:12px/1.2 var(--pix);color:#fff;border:0;cursor:pointer;padding:13px 16px;text-decoration:none;display:inline-block;
  text-shadow:2px 2px 0 #000;letter-spacing:.02em;position:relative;
  background:var(--red);box-shadow:inset -4px -4px 0 var(--red-d),inset 4px 4px 0 var(--red-l),0 0 0 4px #000,4px 4px 0 4px rgba(0,0,0,.45)}
.btn:hover{filter:brightness(1.12)} .btn:active{transform:translate(2px,2px);box-shadow:inset -4px -4px 0 var(--red-d),inset 4px 4px 0 var(--red-l),0 0 0 4px #000}
.btn-yellow{background:var(--yellow);color:#2a1a00;text-shadow:none;box-shadow:inset -4px -4px 0 var(--yellow-d),inset 4px 4px 0 var(--yellow-l),0 0 0 4px #000,4px 4px 0 4px rgba(0,0,0,.45)}
.btn-blue{background:var(--blue);box-shadow:inset -4px -4px 0 var(--blue-d),inset 4px 4px 0 var(--blue-l),0 0 0 4px #000,4px 4px 0 4px rgba(0,0,0,.45)}
.btn-green{background:var(--green);box-shadow:inset -4px -4px 0 var(--green-d),inset 4px 4px 0 var(--green-l),0 0 0 4px #000,4px 4px 0 4px rgba(0,0,0,.45)}
.btn.sm{font-size:9px;padding:9px 10px}
.btn.big{font-size:16px;padding:18px 26px}
.btn-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:8px}
.blink{animation:blink 1s steps(1) infinite}
.blink-slow{animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pixel-tag{font:9px/1.6 var(--pix);background:rgba(0,0,0,.65);border:3px solid #fff;box-shadow:0 0 0 3px #000;padding:8px 12px}

/* ---------- HUD ---------- */
#hud{position:fixed;top:0;left:0;right:0;z-index:5;padding:10px 16px 0;padding-top:max(10px,env(safe-area-inset-top));
  pointer-events:none;text-shadow:2px 2px 0 #000;font-family:var(--pix)}
.hud-row{display:flex;gap:26px;align-items:flex-start;margin-right:360px}
.hud-cell{white-space:nowrap}
.hud-cell.grow{min-width:0;overflow:hidden}
.hud-k{font-size:10px;color:#fff;letter-spacing:.05em}
.hud-v{font-size:12px;margin-top:6px;color:#fff;display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis}
#chapLabel{color:var(--yellow);display:block;overflow:hidden;text-overflow:ellipsis}
.inf{color:var(--yellow)}
.coin-ico{display:inline-block;width:8px;height:12px;background:var(--yellow);box-shadow:inset -2px 0 0 var(--yellow-d),inset 2px 0 0 var(--yellow-l),0 0 0 2px #000}
#timeline{position:relative;height:30px;margin-top:10px}
#tlTrack{position:absolute;left:0;right:0;top:11px;height:8px;background:#000;border:2px solid #fff;box-shadow:0 0 0 2px #000}
#tlFill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--yellow) 0 6px,var(--yellow-d) 6px 8px)}
#tlMarkers{position:absolute;inset:0}
.tl-m{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.tl-flag{width:12px;height:16px;position:relative}
.tl-flag::before{content:"";position:absolute;left:1px;top:0;width:2px;height:16px;background:#fff;box-shadow:0 0 0 1px #000}
.tl-flag::after{content:"";position:absolute;left:3px;top:1px;width:9px;height:7px;background:#777;box-shadow:0 0 0 1px #000}
.tl-m.done .tl-flag::after{background:var(--green)}
.tl-m.active .tl-flag::after{background:var(--red);animation:blink .8s steps(1) infinite}
.tl-year{font:7px var(--pix);margin-top:8px;opacity:.85;white-space:nowrap}
.tl-m.active .tl-year{color:var(--yellow);opacity:1}
#tlHero{position:absolute;top:8px;width:12px;height:12px;margin-left:-6px;background:var(--red);
  box-shadow:inset 0 -4px 0 #1fb5c9,0 0 0 2px #000;transition:left .15s linear}
#topBtns{position:fixed;top:max(10px,env(safe-area-inset-top));right:14px;z-index:7;display:flex;gap:14px}

#hint{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:4;white-space:nowrap;transition:opacity .6s}
#hint.hide{opacity:0}

/* ---------- banner ---------- */
#banner{position:fixed;left:0;right:0;top:36%;z-index:8;text-align:center;pointer-events:none;opacity:0;transform:scale(.6);
  transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1)}
#banner.show{opacity:1;transform:none}
#bannerBig{font:clamp(22px,5vw,44px)/1.2 var(--pix);color:var(--yellow);text-shadow:4px 4px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,0 0 0 #000;letter-spacing:.04em}
#bannerSmall{font:clamp(10px,2vw,15px)/1.6 var(--pix);margin-top:14px;text-shadow:3px 3px 0 #000;padding:0 16px}

/* ---------- touch (only on touch screens: body.touch is set from (pointer:coarse)) ---------- */
#touch{display:none;position:fixed;left:0;right:0;bottom:0;z-index:6;
  padding:12px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  justify-content:space-between;align-items:flex-end;pointer-events:none}
.tpad{display:flex;gap:0;pointer-events:auto;touch-action:none;padding:6px}
.tbtn{--s:clamp(60px,17vw,84px);width:var(--s);height:var(--s);display:flex;align-items:center;justify-content:center;font:calc(var(--s)*.28) var(--pix);color:#fff;
  background:rgba(10,10,30,.38);touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.35),inset 4px 4px 0 rgba(255,255,255,.22),0 0 0 3px rgba(255,255,255,.85),0 0 0 6px rgba(0,0,0,.7);text-shadow:2px 2px 0 #000}
.tpad .tbtn + .tbtn{margin-left:14px}
.tbtn.on{background:rgba(255,255,255,.4);transform:translate(2px,2px)}
.tjump{--s:clamp(70px,20vw,96px);pointer-events:auto;background:rgba(229,37,33,.72);
  clip-path:polygon(25% 0,75% 0,75% 8%,88% 8%,88% 18%,100% 18%,100% 82%,88% 82%,88% 92%,75% 92%,75% 100%,25% 100%,25% 92%,12% 92%,12% 82%,0 82%,0 18%,12% 18%,12% 8%,25% 8%);
  box-shadow:inset -6px -6px 0 rgba(120,0,0,.45),inset 6px 6px 0 rgba(255,160,150,.45)}
.tjump.on{background:rgba(255,120,110,.85)}
body:not(.touch) #fsBtn{display:none}
body.touch #touch{display:flex} body.touch #hint{display:none}
body.touch:not([data-mode="play"]):not([data-mode="clear"]) #touch{display:none}
body.touch.portrait #touch{min-height:var(--ctrl-h);align-items:center;background:linear-gradient(transparent,rgba(0,0,0,.18))}
/* landscape phones: keep the buttons small and tucked into the corners */
@media (max-height:500px){ .tbtn{--s:clamp(54px,13vh,66px)} .tjump{--s:clamp(62px,17vh,78px)} #touch{padding-top:4px} }
.kb{} .tc{display:none} body.touch .kb{display:none} body.touch .tc{display:inline} body.touch .controls-list .tc{display:block}
#rotateHint{display:none;position:fixed;left:50%;bottom:calc(var(--ctrl-h,150px) + 14px);transform:translateX(-50%);z-index:8;white-space:normal;text-align:center;width:min(86vw,320px);
  opacity:0;transition:opacity .4s;pointer-events:none}
body.touch.portrait #rotateHint{display:block}
#rotateHint.show{opacity:1}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  opacity:0;pointer-events:none;transition:opacity .25s steps(4)}
.overlay.show{opacity:1;pointer-events:auto}
.overlay > *{margin:auto;flex-shrink:0}
.overlay.dim{background:rgba(0,0,20,.45)}
#intro{background:rgba(0,0,30,.25)}
.title-wrap{display:flex;flex-direction:column;align-items:center;gap:28px;max-width:720px;width:100%}
.logo{font:clamp(26px,6.4vw,58px)/1.25 var(--pix);text-align:center;color:var(--yellow);letter-spacing:.03em;
  text-shadow:4px 0 0 #000,-4px 0 0 #000,0 4px 0 #000,0 -4px 0 #000,4px 4px 0 #000,8px 8px 0 var(--red-d),8px 8px 0 4px #000}
.logo.small-logo{font-size:clamp(20px,4.6vw,38px)}
.intro-dialog{width:100%}
.intro-dialog p{font-size:26px;line-height:1.1;margin-bottom:14px;color:#fff}
.controls-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:21px;color:#cfd2ff}
.controls-list b{font:9px var(--pix);color:var(--yellow);margin-right:6px}
.eyebrow{font:9px/1.6 var(--pix);color:var(--yellow);letter-spacing:.05em}
.story-dialog{width:min(680px,100%)}
.story-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.year{font:10px var(--pix);color:#000;background:var(--yellow);padding:7px 9px;box-shadow:0 0 0 3px #000}
h2{font:clamp(14px,2.6vw,19px)/1.5 var(--pix);color:#fff;margin-bottom:12px;text-shadow:3px 3px 0 #000}
.story-dialog p{font-size:clamp(23px,3.6vw,28px);line-height:1.15;min-height:3.5em;color:#fff;margin-bottom:12px}
#storyImg{display:none;width:100%;max-height:200px;object-fit:cover;margin-bottom:12px;image-rendering:pixelated;border:4px solid #fff}
.press{background:none;border:0;color:var(--yellow);font:10px var(--pix);cursor:pointer;float:right;padding:6px 0;visibility:hidden}
.press.ready{visibility:visible}
.small{font-size:18px;color:#cfd2ff}

/* ---------- mini-game ---------- */
.game-wrap{width:min(720px,100%);padding:16px}
.game-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
#gamePrompt{font-size:24px;line-height:1.05;margin-top:6px}
.game-stats{display:flex;gap:10px;white-space:nowrap}
.game-stats span{font:10px var(--pix);background:#000;border:2px solid #fff;padding:7px 8px}
#gameStage{position:relative;width:100%;aspect-ratio:16/10;max-height:58vh;overflow:hidden;background:#000;border:4px solid #000;box-shadow:0 0 0 3px #fff}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#memoryGrid{position:absolute;inset:0;display:none;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px}
.mcard{position:relative;border:0;cursor:pointer;font:clamp(12px,2.6vw,20px) var(--pix);color:#2a1a00;
  background:var(--blue);box-shadow:inset -4px -4px 0 var(--blue-d),inset 4px 4px 0 var(--blue-l),0 0 0 3px #000;
  display:flex;align-items:center;justify-content:center}
.mcard span{opacity:0}
.mcard::before{content:"?";position:absolute;color:#fff;text-shadow:3px 3px 0 #000;font-size:1.4em}
.mcard.up{background:#fff;box-shadow:inset -4px -4px 0 #bbb,0 0 0 3px #000}
.mcard.up span,.mcard.matched span{opacity:1}
.mcard.up::before,.mcard.matched::before{opacity:0}
.mcard.matched{background:var(--yellow);box-shadow:inset -4px -4px 0 var(--yellow-d),inset 4px 4px 0 var(--yellow-l),0 0 0 3px #000}
#gameMsg{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(0,0,20,.7);font:clamp(14px,3vw,22px)/1.5 var(--pix);color:var(--yellow);text-shadow:3px 3px 0 #000;text-align:center;padding:20px}
#gameMsg.show{display:flex}
.game-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px}

/* ---------- responsive ---------- */
/* big desktop screens: slightly larger HUD + dialogs */
@media (min-width:1600px) and (min-height:900px){ .hud-k{font-size:12px} .hud-v{font-size:14px} .btn.sm{font-size:11px;padding:11px 13px}
  .story-dialog{width:min(780px,100%)} .game-wrap{width:min(860px,100%)} .tl-year{font-size:8px} }
/* laptops / tablets landscape */
@media (max-width:1180px){ .hud-row{gap:18px;margin-right:330px} }
/* tablets portrait + small windows: HUD drops below the buttons */
@media (max-width:900px){ .hud-row{margin-right:0;gap:14px} #hud{padding-top:calc(max(10px,env(safe-area-inset-top)) + 46px)} .hud-k{font-size:8px} .hud-v{font-size:9px}
  #topBtns{gap:10px;right:max(10px,env(safe-area-inset-right))} .tl-year{display:none} .tl-m.active .tl-year{display:block} }
/* phones */
@media (max-width:600px){ #topBtns .lbl{display:none} .btn.sm{font-size:10px;padding:9px 11px} #topBtns{gap:12px}
  #hud{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .hud-cell:first-child{display:none} .hud-row{gap:12px} .hud-k{font-size:7px} .hud-v{font-size:8px;margin-top:5px} #timeline{margin-top:6px}
  .controls-list{grid-template-columns:1fr;font-size:19px} .dialog{padding:16px 14px} .intro-dialog p{font-size:22px}
  .btn{font-size:11px} .btn.big{font-size:13px;padding:16px 18px} .btn-row{gap:14px;justify-content:center}
  .game-wrap{padding:12px} .game-head{flex-direction:column;align-items:stretch;gap:8px} .game-stats{justify-content:flex-end}
  #gamePrompt{font-size:21px} #gameStage{aspect-ratio:4/5;max-height:max(200px,min(62vh,560px,calc(100vh - 300px)))} #memoryGrid{grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}
  .game-foot{flex-wrap:wrap} .game-foot .small{font-size:16px} .story-dialog p{font-size:22px} .press{float:none;display:block;margin:4px 0 0 auto;font-size:11px;padding:10px 0} }
@media (max-width:380px){ .btn.sm{font-size:9px;padding:8px 9px} #topBtns{gap:10px} .hud-cell.grow .hud-v{font-size:7px} .year{font-size:9px} }
/* short screens (landscape phones, short desktop windows) */
@media (max-height:560px){ .title-wrap{gap:14px} .logo{font-size:clamp(18px,4.2vw,34px)} .intro-dialog p{font-size:19px;margin-bottom:8px} .controls-list{font-size:17px;gap:4px 14px}
  .dialog{padding:12px 16px} .btn.big{font-size:12px;padding:12px 18px} #banner{top:30%}
  .game-wrap{padding:10px} .game-head{margin-bottom:6px} #gamePrompt{font-size:19px} #gameStage{aspect-ratio:auto;height:52vh;max-height:none} .game-foot{margin-top:8px}
  .story-dialog p{min-height:0;font-size:20px} h2{margin-bottom:6px} .story-top{margin-bottom:8px} #storyImg{max-height:90px} }
@media (max-height:560px) and (max-width:900px){ #topBtns .lbl{display:none} #hud{padding-top:max(8px,env(safe-area-inset-top))} .hud-row{margin-right:270px} #timeline{margin-top:12px;height:24px} #tlTrack{top:8px} }
@media (max-height:560px) and (max-width:600px){ .hud-row{margin-right:0} }
@media (max-height:420px){ .intro-dialog p{display:none} #gameStage{height:46vh} }
body.touch .press{padding:12px 6px;font-size:11px}
/* small screens: keep the mute / restart buttons visible above every overlay card */
@media (max-width:900px), (max-height:560px){ #game, #story, #closing{padding-top:calc(max(10px, env(safe-area-inset-top)) + 52px)} }
@media (max-height:560px){ #gameStage{height:calc(100vh - 190px);min-height:150px} .game-wrap .eyebrow{display:none} }
@media (max-height:560px) and (max-width:900px){ #game, #story, #closing{padding-top:calc(max(8px, env(safe-area-inset-top)) + 46px);padding-bottom:8px} }
body.touch .game-foot .btn, body.touch #gameMsg .btn{padding:13px 14px}
.tl-m:last-child .tl-year{transform:translateX(calc(-50% + 6px))}