/* ============ SHIP HAPPENS — tokens & base ============ */
:root{
  --ink:#241a10; --ink2:#4a3826;
  --cardboard:#c98a4b; --cardboard-d:#a86f38; --cream:#f6e8c9; --cream2:#efdcae;
  --floor:#8a6d4f; --wall:#d9c9a3;
  --safety:#ffc93c; --accent:#e8590c; --accent-d:#c44a08;
  --good:#37b24d; --bad:#e03131; --info:#4dabf7;
  --night:#0f1420; --panel:#1a2233; --panel2:#232e45; --codegreen:#7ee787; --codedim:#8b98b8;
  --aubergine:#3f0e40; --aubergine2:#57125a;
  --disp:'Arial Black','Arial Bold',Arial,system-ui,sans-serif;
  --body:'Trebuchet MS','Segoe UI',Verdana,system-ui,sans-serif;
  --mono:ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; overscroll-behavior:none;}
body{background:#161009; font-family:var(--body); color:var(--ink); overflow:hidden;
  -webkit-user-select:none; user-select:none;}
#app{height:100dvh; display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:radial-gradient(1200px 700px at 50% -10%, #2a2013 0%, #161009 70%);}
button{font-family:inherit; cursor:pointer;}
.hidden{display:none !important;}

/* ============ HUD ============ */
#hud{display:none; align-items:center; gap:8px; padding:8px 12px; z-index:40;
  background:#241a10; border-bottom:4px solid #120d07; flex-wrap:wrap;}
#hud.on{display:flex;}
.hud-pill{display:flex; align-items:center; gap:6px; background:#3a2c1b; border:2px solid #120d07;
  border-radius:999px; padding:4px 12px; color:var(--cream); font-family:var(--disp); font-size:14px;
  letter-spacing:.02em; white-space:nowrap; transition:transform .15s;}
.hud-pill.bump{transform:scale(1.14);}
.hud-pill .lbl{font-family:var(--body); font-weight:bold; font-size:10px; color:#b59a72; letter-spacing:.1em;}
#hud-day{background:var(--safety); color:var(--ink); border-color:#8a6d10;}
#hud-day .lbl{color:#7a5f0e;}
.hud-pill.flash-up{color:#8dffa6;}
.hud-pill.flash-down{color:#ff9d9d;}
#hud-spacer{flex:1;}
.hud-btn{background:#3a2c1b; border:2px solid #120d07; color:var(--cream); border-radius:10px;
  padding:5px 11px; font-size:15px; line-height:1;}
.hud-btn:active{transform:translateY(1px);}
.bar-wrap{width:52px; height:9px; background:#120d07; border-radius:99px; overflow:hidden;}
.bar-fill{height:100%; border-radius:99px; transition:width .5s ease;}
#bar-sat .bar-fill{background:linear-gradient(90deg,#f59f00,#ffd43b);}
#bar-mor .bar-fill{background:linear-gradient(90deg,#f76707,#ff922b);}

/* ============ generic screens ============ */
.screen{flex:1; min-height:0; display:none; flex-direction:column; overflow:hidden; position:relative;}
.screen.on{display:flex;}
.center-col{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; overflow-y:auto; padding:18px 14px 40px;}
.big-btn{font-family:var(--disp); font-size:17px; letter-spacing:.03em; color:var(--ink);
  background:linear-gradient(#ffd75e,var(--safety)); border:3px solid var(--ink);
  border-radius:14px; padding:13px 26px; box-shadow:0 5px 0 var(--ink); transition:transform .08s, box-shadow .08s;}
.big-btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--ink);}
.big-btn.orange{background:linear-gradient(#ff8a3d,var(--accent)); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35);}
.big-btn.ghost{background:transparent; color:var(--cream); border-color:var(--cream); box-shadow:0 5px 0 rgba(246,232,201,.35);}
.big-btn:disabled{opacity:.45; filter:grayscale(.7); box-shadow:0 5px 0 var(--ink); transform:none; cursor:default;}
.small-btn{font-family:var(--body); font-weight:bold; font-size:13px; color:var(--cream);
  background:#3a2c1b; border:2px solid #120d07; border-radius:10px; padding:7px 14px;}
.small-btn:active{transform:translateY(1px);}

/* ============ title ============ */
#screen-title{align-items:center; justify-content:center; text-align:center;}
#title-boxes{position:absolute; inset:0; z-index:0;}
#title-inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px;}
#title-logo{font-family:var(--disp); color:var(--safety); font-size:clamp(46px,9vw,86px); line-height:.95;
  text-shadow:0 4px 0 var(--ink),0 9px 0 rgba(0,0,0,.5); letter-spacing:.01em; transform:rotate(-2deg);}
#title-logo .ship{color:var(--cream); display:block; font-size:.58em; letter-spacing:.3em; text-indent:.3em;}
#title-tag{color:#cdba91; font-size:15px; max-width:46ch; line-height:1.45;}
#title-tag b{color:var(--cream);}
#title-btns{display:flex; flex-direction:column; gap:12px; margin-top:10px; width:min(320px,80vw);}
#title-row2{display:flex; gap:10px;}
#title-row2 .big-btn{flex:1; font-size:13px; padding:10px 8px;}
#title-foot{color:#7a6547; font-size:11.5px; margin-top:16px; letter-spacing:.06em;}
.sticker{display:inline-block; background:var(--accent); color:#fff; font-family:var(--disp); font-size:12px;
  padding:4px 10px; border-radius:8px; border:2px solid var(--ink); transform:rotate(2deg);
  box-shadow:0 3px 0 var(--ink); letter-spacing:.08em;}

/* ============ overlays ============ */
#wipe{position:absolute; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  transform:translateY(-102%); background:repeating-linear-gradient(0deg,#5a4326 0 26px,#4c3820 26px 52px);
  border-bottom:10px solid var(--ink); pointer-events:none;}
#wipe.down{transition:transform 1s cubic-bezier(.6,0,.4,1); transform:translateY(0);}
#wipe.up{transition:transform 1s cubic-bezier(.6,0,.4,1); transform:translateY(-102%);}
#wipe-label-wrap{position:absolute; inset:0; z-index:101; display:flex; align-items:center;
  justify-content:center; pointer-events:none; padding:20px;}
#wipe-label{font-family:var(--disp); color:var(--safety); font-size:clamp(22px,5vw,40px); letter-spacing:.06em;
  text-shadow:0 4px 0 var(--ink); background:rgba(20,14,7,.72); padding:14px 26px; border-radius:16px; text-align:center;
  opacity:0; transform:scale(.92); transition:opacity .35s ease, transform .35s ease; text-wrap:balance; max-width:92%;}
#wipe-label-wrap.show #wipe-label{opacity:1; transform:scale(1);}
#pause-ov{position:absolute; inset:0; z-index:90; background:rgba(10,7,4,.82); display:none;
  align-items:center; justify-content:center;}
#pause-ov.on{display:flex;}
.pause-card{width:min(340px,90vw); background:var(--cream); border:3px solid var(--ink); border-radius:18px;
  box-shadow:0 8px 0 var(--ink); padding:20px; display:flex; flex-direction:column; gap:11px; text-align:center;}
.pause-card h2{font-family:var(--disp); letter-spacing:.04em;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}