/* ============================================================
   Dave Morehouse — Off The Ice. USAP Antarctic logistics.
   Polar night · aurora · sea ice · teal/amber expedition accents.
   ============================================================ */
:root{
  --ice0:#06121f; --ice1:#0a2236; --ice2:#0f3350; --ice3:#1b4a72;
  --snow:#eaf3fb; --frost:#bcd8ef; --teal:#46d6c8; --aurora:#7bffcf;
  --amber:#ffd24a; --orange:#ff7a59; --red:#d8392b; --ink:#eaf3fb; --muted:#9fc0dd;
  --card:rgba(120,180,230,.08); --brd:rgba(150,200,235,.18); --maxw:1080px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:'Barlow Condensed',system-ui,sans-serif; color:var(--ink); min-height:100dvh; overflow-x:hidden;
  background:
    radial-gradient(1200px 700px at 18% -12%, rgba(70,214,200,.16), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(123,255,207,.10), transparent 55%),
    radial-gradient(900px 900px at 50% 118%, rgba(27,74,114,.45), transparent 60%),
    linear-gradient(175deg, var(--ice0), var(--ice1) 55%, #081a2b);
  background-attachment:fixed; -webkit-font-smoothing:antialiased}
canvas#bg,canvas#fx{position:fixed; inset:0; width:100vw; height:100dvh; z-index:0; pointer-events:none}
canvas#fx{z-index:60}
main{position:relative; z-index:10; max-width:var(--maxw); margin:0 auto; padding:0 18px 90px}

.topbar{position:relative; z-index:20; max-width:var(--maxw); margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; padding:20px 18px 0; gap:10px}
.brand{font-weight:700; letter-spacing:.16em; font-size:.74rem; color:var(--teal); text-transform:uppercase}
.controls{display:flex; gap:8px}
.chip{font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.05em; color:var(--ink);
  background:var(--card); border:1px solid var(--brd); border-radius:7px; padding:8px 13px; cursor:pointer; backdrop-filter:blur(6px); transition:.2s}
.chip:hover{border-color:var(--teal); box-shadow:0 0 14px rgba(70,214,200,.35)}
.chip[aria-pressed="true"]{border-color:var(--aurora); color:var(--aurora)}

/* ---------- HERO + credential badge ---------- */
.hero{text-align:center; padding:28px 0 4px}
.eyebrow{display:inline-block; font-weight:700; letter-spacing:.28em; font-size:.82rem; color:var(--ice0);
  background:linear-gradient(90deg,var(--teal),var(--aurora)); padding:7px 18px; border-radius:5px; text-transform:uppercase;
  box-shadow:0 0 26px rgba(70,214,200,.4)}
.badge{max-width:640px; margin:24px auto 0; text-align:left; border-radius:14px; overflow:hidden; position:relative;
  background:linear-gradient(160deg, rgba(20,52,82,.85), rgba(10,30,48,.92)); border:1px solid var(--brd);
  box-shadow:0 26px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(8px)}
.badge-head{display:flex; align-items:center; gap:12px; padding:11px 16px;
  background:linear-gradient(90deg, #0e3a5c, #15507c); border-bottom:2px solid var(--teal)}
.seal{font-size:1.6rem; filter:drop-shadow(0 0 8px rgba(70,214,200,.6))}
.head-txt{display:flex; flex-direction:column; line-height:1.1; flex:1}
.head-txt b{font-size:.95rem; letter-spacing:.08em}
.head-txt span{font-size:.62rem; letter-spacing:.12em; color:#bcd8ef}
.cls{font-family:'Space Mono',monospace; font-size:1.1rem; color:var(--amber); font-weight:700}
.badge-body{display:flex; gap:18px; padding:18px}
.photo-frame{position:relative; flex:0 0 auto; width:160px; border:3px solid var(--ice3); border-radius:9px; overflow:hidden;
  background:#000; box-shadow:0 0 0 2px var(--teal), 0 10px 24px rgba(0,0,0,.5)}
.photo-frame img{display:block; width:160px; height:200px; object-fit:cover; object-position:50% 28%}
.photo-scan{position:absolute; inset:0; height:34px; background:linear-gradient(180deg,transparent,rgba(70,214,200,.18),transparent); animation:scan 3.4s linear infinite}
@keyframes scan{0%{transform:translateY(-40px)}100%{transform:translateY(220px)}}
.badge-info{flex:1; min-width:0}
.bi-name{font-family:'Archivo Black',sans-serif; font-size:clamp(1.5rem,5.4vw,2.2rem); line-height:1; color:#fff; letter-spacing:.01em}
.bi-role{color:var(--amber); font-weight:700; letter-spacing:.12em; font-size:.78rem; margin:5px 0 12px; text-transform:uppercase}
.bi-fields{margin:0; display:grid; gap:7px}
.bi-fields>div{display:flex; gap:8px; align-items:baseline; border-bottom:1px dashed var(--brd); padding-bottom:5px}
.bi-fields dt{font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.08em; color:var(--muted); width:66px; flex:0 0 auto}
.bi-fields dd{margin:0; font-weight:600; font-size:.82rem; color:var(--ink)}
.bi-fields dd.free{color:var(--aurora); text-shadow:0 0 10px rgba(123,255,207,.5)}
.badge-foot{display:flex; align-items:center; justify-content:space-between; padding:9px 16px; background:rgba(4,12,20,.7); border-top:1px solid var(--brd)}
.barcode{height:24px; flex:1; margin-right:14px; background:repeating-linear-gradient(90deg,#cfe0f0 0 2px,transparent 2px 4px,#cfe0f0 4px 5px,transparent 5px 9px)}
.badge-id{font-family:'Space Mono',monospace; font-size:.7rem; color:var(--muted)}

.title{font-family:'Archivo Black',sans-serif; line-height:.86; margin:30px 0 0; letter-spacing:.005em; text-transform:uppercase; font-size:clamp(3.4rem,16vw,9rem)}
.title .l1{display:block; color:#fff; text-shadow:0 0 50px rgba(70,214,200,.4)}
.title .l2{display:block; background:linear-gradient(180deg,#dff6ff,#46d6c8 60%,#7bffcf);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 60px rgba(70,214,200,.5)}
.subtitle{font-size:clamp(1.05rem,4vw,1.5rem); color:var(--muted); margin:.3em 0 0; letter-spacing:.18em; text-transform:uppercase; font-weight:500}

/* ---------- departure-board counter ---------- */
.counter-wrap{margin:36px auto 0; max-width:760px; text-align:center}
.counter-label{font-family:'Space Mono',monospace; letter-spacing:.2em; font-size:.82rem; color:var(--teal); margin-bottom:14px; text-shadow:0 0 12px rgba(70,214,200,.4)}
.counter{display:flex; gap:clamp(8px,2vw,18px); justify-content:center}
.unit{flex:1 1 0; max-width:180px; text-align:center}
.led{font-family:'Space Mono',monospace; font-weight:700; font-variant-numeric:tabular-nums; font-size:clamp(2.2rem,9.5vw,5.2rem); line-height:1;
  color:var(--aurora); padding:14px 6px; border-radius:10px; background:linear-gradient(180deg,#04101b,#0a2236); border:2px solid #1b4a72;
  box-shadow:inset 0 0 24px rgba(70,214,200,.14), inset 0 2px 8px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.5);
  text-shadow:0 0 8px rgba(123,255,207,.8), 0 0 22px rgba(70,214,200,.5)}
.lab{margin-top:9px; font-family:'Space Mono',monospace; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.led.tick{animation:flip .45s ease}
@keyframes flip{0%{transform:translateY(-5px) scaleY(1.08); color:#fff; text-shadow:0 0 18px #fff}100%{transform:none}}
.cta-row{margin:26px 0 0}
.btn-go{font-family:'Archivo Black',sans-serif; font-size:1.05rem; color:var(--ice0); background:linear-gradient(180deg,var(--aurora),var(--teal));
  border:0; border-radius:999px; padding:15px 32px; cursor:pointer; text-transform:uppercase; letter-spacing:.02em;
  box-shadow:0 0 30px rgba(70,214,200,.5); transition:transform .14s}
.btn-go:hover{transform:translateY(-2px) scale(1.03)} .btn-go:active{transform:scale(.97)}

/* ---------- ICE OPS scene ---------- */
.scene-wrap{margin:44px 0 0; border-radius:14px; overflow:hidden; border:1px solid var(--brd); box-shadow:0 16px 40px rgba(0,0,0,.4)}
.scene-label{font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.1em; color:var(--teal); background:rgba(4,12,20,.7); padding:8px 14px; border-bottom:1px solid var(--brd)}
.scene{display:block; width:100%; height:auto}
.ship{animation:sail 30s linear infinite}
@keyframes sail{from{transform:translateX(-280px)}to{transform:translateX(1060px)}}
.bob{animation:bob 3.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ice{animation:bob 2.6s ease-in-out infinite}
.hook{animation:hook 3.2s ease-in-out infinite}
@keyframes hook{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px) translateY(5px)}}
.cable{animation:none}

/* ---------- penguin colony ---------- */
.colony-wrap{position:relative; height:96px; margin:0; overflow:hidden;
  background:linear-gradient(180deg, transparent, rgba(189,216,239,.10) 55%, rgba(189,216,239,.22));
  border-bottom:3px solid rgba(189,216,239,.35)}
.penguin{position:absolute; bottom:6px; left:-8%; transform-origin:50% 100%; will-change:left;
  animation-name:march, waddle; animation-timing-function:linear, ease-in-out; animation-iteration-count:infinite,infinite}
@keyframes march{from{left:-8%}to{left:108%}}
@keyframes waddle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* ---------- map ---------- */
.map-wrap{max-width:560px; margin:44px auto 0; text-align:center}
.map-head{font-family:'Space Mono',monospace; letter-spacing:.14em; font-size:.82rem; color:var(--teal); margin-bottom:10px}
.map{width:100%; max-width:460px; height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}
.route{animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}
.route.r2{animation-duration:1.8s} .route.r3{animation-duration:1.1s}
.stn circle{animation:pulse 2s ease-in-out infinite}
.stn:nth-child(2) circle{animation-delay:.6s} .stn:nth-child(3) circle{animation-delay:1.2s}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- progress ---------- */
.progress-wrap{max-width:760px; margin:42px auto 0}
.progress-head{display:flex; justify-content:space-between; font-family:'Space Mono',monospace; font-size:.76rem; letter-spacing:.1em; color:var(--muted); margin-bottom:10px}
.progress-head span:last-child{color:var(--teal)}
.progress-track{position:relative; height:22px; border-radius:6px; background:#06151f; border:1px solid var(--brd); overflow:visible}
.progress-fill{height:100%; width:0%; border-radius:5px; background:repeating-linear-gradient(45deg,var(--teal) 0 14px,#2f9ea6 14px 28px); box-shadow:0 0 16px rgba(70,214,200,.5); transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.progress-ship{position:absolute; top:50%; left:0; transform:translate(-50%,-62%); font-size:1.5rem; transition:left 1.2s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px; margin:46px auto; max-width:940px}
.stat{background:var(--card); border:1px solid var(--brd); border-radius:14px; padding:18px 14px; text-align:center; backdrop-filter:blur(7px); transition:.2s}
.stat:hover{transform:translateY(-3px); border-color:var(--teal); box-shadow:0 0 22px rgba(70,214,200,.3)}
.stat .emoji{font-size:1.7rem}
.stat .big{font-family:'Archivo Black',sans-serif; font-size:1.8rem; color:var(--aurora); margin:.08em 0; font-variant-numeric:tabular-nums; text-shadow:0 0 16px rgba(123,255,207,.35)}
.stat .cap{font-size:.82rem; color:var(--muted); line-height:1.25; text-transform:uppercase; letter-spacing:.03em}

/* ---------- transmissions guestbook ---------- */
.wishes{max-width:760px; margin:58px auto 0}
.wishes-title{font-family:'Archivo Black',sans-serif; font-size:clamp(1.5rem,5.4vw,2.3rem); text-align:center; margin:0; text-transform:uppercase; color:#fff}
.wishes-sub{text-align:center; color:var(--muted); margin:.4em 0 1.3em; letter-spacing:.03em}
.wishes-sub span{color:var(--aurora)}
.wish-form{background:var(--card); border:1px solid var(--brd); border-radius:14px; padding:18px; backdrop-filter:blur(8px)}
.wish-name,.wish-msg{width:100%; font-family:'Barlow Condensed',sans-serif; color:var(--ink); background:#06151f; border:1px solid var(--brd); border-radius:8px; padding:11px 13px; font-size:1rem; margin-bottom:10px; resize:vertical}
.wish-name:focus,.wish-msg:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(70,214,200,.18)}
.wish-msg{min-height:80px}
.wish-actions{display:flex; align-items:center; justify-content:space-between}
.wish-counter{font-family:'Space Mono',monospace; font-size:.74rem; color:var(--muted)}
.btn-post{font-family:'Archivo Black',sans-serif; font-size:.92rem; color:var(--ice0); background:linear-gradient(180deg,var(--aurora),var(--teal)); border:0; border-radius:999px; padding:11px 22px; cursor:pointer; text-transform:uppercase}
.btn-post:hover{filter:brightness(1.06)} .btn-post:disabled{opacity:.5}
.wish-status{font-family:'Space Mono',monospace; font-size:.8rem; margin-top:8px; min-height:1.1em; color:var(--aurora)}
.wish-status.err{color:var(--orange)}
.wish-wall{margin-top:22px; columns:2; column-gap:14px}
@media (max-width:560px){.wish-wall{columns:1}}
.wish-card{break-inside:avoid; margin:0 0 14px; padding:14px 16px; border-radius:12px; animation:rise .5s ease both;
  background:var(--card); border:1px solid var(--brd); border-left:4px solid var(--teal)}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.wish-card .msg{font-size:1rem; line-height:1.45}
.wish-card .who{margin-top:8px; font-size:.82rem; color:var(--teal); font-weight:700; text-transform:uppercase; letter-spacing:.03em}
.wish-card .when{color:var(--muted); font-weight:400; text-transform:none; font-family:'Space Mono',monospace}
.foot{text-align:center; color:var(--muted); margin-top:54px; font-size:.85rem; letter-spacing:.05em}

/* ---------- REDEPLOYED finale ---------- */
.retired-overlay{position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:radial-gradient(closest-side,rgba(8,22,36,.55),rgba(4,12,20,.95))}
.retired-overlay[hidden]{display:none}
.retired-card{text-align:center; padding:28px}
.stamp{font-family:'Archivo Black',sans-serif; font-size:clamp(2.6rem,13vw,7.5rem); color:var(--teal); text-transform:uppercase;
  border:.14em solid var(--teal); border-radius:14px; padding:.08em .2em; transform:rotate(-8deg); display:inline-block;
  text-shadow:0 0 30px rgba(70,214,200,.5); box-shadow:0 0 44px rgba(70,214,200,.35); letter-spacing:.02em}
.retired-sub{font-size:1.2rem; color:var(--ink); margin:1em 0 1.1em; letter-spacing:.05em}

@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }