/* Shared look for the cruise map and its missions. Single dark sea theme, like The Deep. */
:root{--abyss:#020608;--sea:#06222a;--ink:#D9E4E2;--muted:#7F9693;--warn:#E8B04A;--danger:#E5483C;--ok:#5FB8A8;--food:#9FF7E0;--glass:rgba(4,12,14,.78);--line:rgba(217,228,226,.16);
  --f-display:"Bricolage Grotesque","Arial Narrow",sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--f-body:"IBM Plex Sans",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--abyss);color:var(--ink);font-family:var(--f-body);overflow:hidden;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--warn);outline-offset:2px}
.stage{position:fixed;inset:0}
canvas.full{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.top{position:absolute;left:16px;right:16px;top:16px;display:flex;gap:.6rem;align-items:flex-start;pointer-events:none;z-index:5}
.top > *{pointer-events:auto}
.btn{background:var(--glass);border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem;font-size:1.2rem;line-height:1}
.btn.big{background:var(--danger);border:0;color:#fff;font-family:var(--f-mono);font-weight:600;font-size:1.4rem;padding:1rem 2.2rem;border-radius:6px;letter-spacing:.06em}
.btn.ok{background:var(--ok);color:#021;border:0}
.sp{flex:1}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.disp{font-family:var(--f-display);font-weight:800;font-stretch:72%;letter-spacing:-.01em;line-height:.85}
.panel{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(1,4,5,.93);overflow:auto;z-index:10}
.card{width:min(36rem,100%);display:grid;gap:1rem;justify-items:center;text-align:center}
.comic{display:flex;gap:.6rem;align-items:center;justify-content:center;flex-wrap:wrap;font-size:clamp(2rem,8vw,3.4rem)}
.comic .f{border:1px solid var(--line);border-radius:10px;padding:.4rem .7rem;background:var(--glass);animation:in .5s both}
.comic .f:nth-child(3){animation-delay:.5s}.comic .f:nth-child(5){animation-delay:1s}.comic .f:nth-child(7){animation-delay:1.5s}
.comic .a{color:var(--muted);font-size:.6em}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
.stars{font-size:2.6rem;letter-spacing:.2rem}
.big{font-size:clamp(3.5rem,14vw,7rem)}
.fact{display:grid;gap:.4rem;border:1px dashed var(--ok);border-radius:8px;padding:.8rem 1rem;width:100%}
.fact .row{display:flex;align-items:flex-end;justify-content:center;gap:.6rem;flex-wrap:wrap}
.fact .disp{font-size:clamp(2rem,8vw,3.2rem)}
.info{position:absolute;right:16px;bottom:16px;z-index:20}
.drawer{position:absolute;right:16px;bottom:64px;width:min(26rem,calc(100% - 32px));max-height:60vh;overflow:auto;background:#081316;border:1px solid var(--line);border-radius:8px;padding:.8rem 1rem;font-size:.8rem;line-height:1.45;color:var(--muted);z-index:20;-webkit-user-select:text;user-select:text}
.drawer a{color:var(--warn)}
.drawer ul{margin:.3rem 0 0;padding-left:1.1rem}
.meter{height:14px;background:rgba(255,255,255,.1);border:1px solid var(--line);border-radius:4px;overflow:hidden;width:min(16rem,50vw)}
.meter i{display:block;height:100%;width:0;background:var(--ok);transition:width .15s,background .3s}
.chip{background:var(--glass);border:1px solid var(--line);border-radius:6px;padding:.3rem .6rem;font-family:var(--f-mono);font-size:.85rem}