:root { color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; user-select: none;
  font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #e9edff; background: #0d1230;
}
body { display: flex; flex-direction: column; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

#menu { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: linear-gradient(160deg, #2b3570, #141a38 60%, #0b0f26); }
#menu[hidden], #play[hidden] { display: none; }
.menu-box { width: min(560px,100%); text-align: center; background: rgba(0,0,0,.3);
  border: 3px solid rgba(255,255,255,.14); border-radius: 24px; padding: clamp(20px,5vw,38px); }
.logo { font-size: clamp(40px,12vw,74px); font-weight: 800; line-height: 1; }
.tagline { font-size: clamp(14px,3.6vw,18px); line-height: 1.6; opacity: .92; }
.how { font-size: clamp(12.5px,3.1vw,15.5px); line-height: 1.6; opacity: .82;
  background: rgba(255,255,255,.07); border-radius: 14px; padding: 10px 14px; }
.big { display: inline-block; margin-top: 10px; background: #f0b429; color: #2a1f00; font-weight: 800;
  font-size: clamp(18px,4.6vw,23px); padding: 15px 32px; border-radius: 999px; box-shadow: 0 6px 0 #c8920f; }
.big:active { transform: translateY(4px); box-shadow: 0 2px 0 #c8920f; }
.best { margin-top: 12px; font-size: 15px; opacity: .8; }
.linky { margin-top: 10px; font-size: 14px; opacity: .65; text-decoration: underline; }

#play { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px;
  padding: max(6px, env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)); }
#hud { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip { background: #1b2450; border: 2px solid #33407e; border-radius: 999px; padding: 4px 11px;
  font-size: clamp(10.5px,2.7vw,13px); font-weight: 800; white-space: nowrap; }
.barwrap { flex: 1; min-width: 70px; height: 11px; background: #1b2450; border-radius: 999px; overflow: hidden; border: 2px solid #33407e; }
#bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#57b979,#8fd35f); transition: width .3s; }

#mapwrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
#map { position: relative; width: 100%; aspect-ratio: 1000 / 620; max-height: 100%;
  background: #0a0e26; border: 3px solid #2b3570; border-radius: 14px; }
.room { position: absolute; background: #1b2450; border: 3px solid #3a478c; border-radius: 10px; }
.rlabel { position: absolute; left: 6px; top: 4px; font-size: clamp(8px,1.9vw,12px); font-weight: 800; opacity: .6; white-space: nowrap; }
.hall { position: absolute; background: #161d40; border: 2px solid #2b3570; }
.station { position: absolute; transform: translate(-50%,-50%); font-size: clamp(15px,3.6vw,24px);
  filter: drop-shadow(0 0 6px rgba(240,180,41,.7)); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{ margin-top:0 } 50%{ margin-top:-4px } }
.mate { position: absolute; transform: translate(-50%,-50%); width: clamp(16px,3.4vw,26px); z-index: 5; }
.mate .bod { display: block; width: 100%; aspect-ratio: 3/4; border-radius: 46% 46% 34% 34%;
  border: 2px solid rgba(0,0,0,.45); box-shadow: inset -3px -3px 0 rgba(0,0,0,.18); }
.mate .vis { position: absolute; left: 44%; top: 20%; width: 48%; height: 26%;
  background: #bfe6ff; border: 2px solid rgba(0,0,0,.45); border-radius: 999px; }
.mate .ice { position: absolute; left: 50%; top: -60%; transform: translateX(-50%); font-size: 13px; opacity: 0; }
.mate.frozen { transform: translate(-50%,-50%) rotate(90deg); filter: saturate(.4) brightness(.8); }
.mate.frozen .ice { opacity: 1; }
.mate.me { z-index: 8; }
.mate.me::after { content: ''; position: absolute; inset: -6px; border: 3px solid #f0b429; border-radius: 50%; opacity: .9; }

.flash { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 20;
  background: rgba(10,14,38,.92); border: 2px solid #33407e; border-radius: 999px;
  padding: 6px 16px; font-weight: 800; font-size: clamp(11px,2.9vw,14px);
  opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; max-width: 94%; }
.flash.on { opacity: 1; }
.flash.bad { background: rgba(74,34,51,.95); border-color: #8a3a55; }

#controls { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#stick { position: relative; width: 108px; height: 108px; border-radius: 50%;
  background: rgba(40,52,110,.55); border: 3px solid #3a478c; touch-action: none; flex: none; }
#nub { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: #4d5fae; border: 3px solid #6c7fd0; }
#acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
#acts button { background: #2b3570; border: 3px solid #4d5fae; border-radius: 14px;
  padding: 11px 18px; font-weight: 800; font-size: clamp(12px,3vw,15px); box-shadow: 0 4px 0 rgba(0,0,0,.3); }
#acts button:active { transform: translateY(3px); box-shadow: none; }
#acts button:disabled { opacity: .55; filter: grayscale(.4); cursor: not-allowed; transform: none; box-shadow: none; }
#btn-report { background: #a12b3f; border-color: #d8546c; }
#btn-use { background: #1f6b45; border-color: #3fae5a; }

/* ------------------------------------------------------------- meeting -- */
.meeting { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 14px; background: rgba(6,9,22,.86); }
.mbox { width: min(560px,100%); max-height: 92vh; overflow: auto; background: #161d44;
  border: 4px solid #33407e; border-radius: 20px; padding: clamp(14px,4vw,24px); }
.mbox h2 { margin: 0 0 4px; font-size: clamp(20px,5.4vw,28px); text-align: center; }
.why { text-align: center; opacity: .8; font-size: clamp(12px,3vw,15px); margin: 0 0 10px; }
.evidence { border: 2px solid #4d5fae; background: #202b61; border-radius: 12px; padding: 9px 11px; line-height: 1.4; font-size: clamp(12px,3vw,14px); }
.evidence.insufficient { border-color: #7a688d; background: #292444; }
.says { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.said { display: flex; gap: 8px; align-items: baseline; background: #1b2450; border-radius: 10px; padding: 7px 10px; }
.said .who { display: flex; align-items: center; gap: 5px; font-weight: 800; flex: none; font-size: clamp(11px,2.9vw,14px); }
.said .txt { font-size: clamp(11.5px,3vw,14.5px); opacity: .92; line-height: 1.4; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(0,0,0,.4); display: inline-block; }
.vlabel { text-align: center; font-weight: 800; margin: 4px 0 8px; font-size: clamp(13px,3.3vw,16px); }
.votes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.vote { display: flex; align-items: center; gap: 6px; min-height: 42px;
  background: #1e2650; border: 3px solid #33407e; border-radius: 999px; padding: 7px 14px;
  font-weight: 800; font-size: clamp(11.5px,3vw,14px); }
.vote:active { transform: translateY(2px); }
.vote.suggested { border-color: #f0b429; box-shadow: 0 0 0 2px rgba(240,180,41,.24); }
.vote.skip { border-style: dashed; opacity: .8; }

/* --------------------------------------------------------------- tasks -- */
.taskpanel { position: absolute; inset: 6% 4%; z-index: 300; background: #161d44;
  border: 4px solid #4d5fae; border-radius: 18px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; overflow: auto; }
.taskpanel.gone { opacity: 0; transform: scale(.95); transition: .25s; }
.taskpanel h3 { margin: 0; font-size: clamp(15px,4vw,20px); }
.taskpanel.wrong { animation: nope .3s; }
@keyframes nope { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-8px)} 70%{transform:translateX(8px)} }
.wires { display: flex; justify-content: space-between; width: min(420px,100%); gap: 40px; flex: 1; }
.side { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; flex: 1; }
.wire { height: clamp(30px,7vw,44px); border-radius: 8px; border: 3px solid rgba(0,0,0,.4); }
.wire.on { outline: 4px solid #fff; }
.wire.ok { opacity: .35; }
.dlbar { width: min(400px,100%); height: 24px; background: #0e1436; border: 3px solid #4d5fae; border-radius: 999px; overflow: hidden; }
.dlbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#57b979,#8fd35f); }
.hold { background: #f0b429; color: #2a1f00; font-weight: 800; padding: 14px 40px; border-radius: 999px; box-shadow: 0 5px 0 #c8920f; touch-action: none; }
.hold.down { transform: translateY(4px); box-shadow: none; }
.field { position: relative; flex: 1; width: 100%; min-height: 140px; }
.rock { position: absolute; font-size: clamp(24px,6vw,36px); background: none; }
.count { font-weight: 800; opacity: .7; }
.code { font-size: clamp(24px,7vw,38px); font-weight: 800; letter-spacing: 6px; }
.keys { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; width: min(240px,80%); }
.key { background: #1e2650; border: 3px solid #4d5fae; border-radius: 12px; padding: 12px; font-weight: 800; font-size: 18px; }
.typed { font-weight: 800; letter-spacing: 6px; min-height: 22px; opacity: .8; }

.card-screen { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(6,9,22,.82); }
.card-box { width: min(480px,100%); text-align: center; background: #1b2140;
  border: 4px solid #33407e; border-radius: 22px; padding: clamp(20px,5vw,32px); }
.card-screen.bad .card-box { border-color: #8a3a55; }
.card-box h2 { margin: 0 0 10px; font-size: clamp(21px,5.6vw,29px); }
.card-box p { margin: 7px 0; font-size: clamp(13px,3.4vw,16px); line-height: 1.55; opacity: .92; }

@media (orientation: landscape) and (max-height: 560px) {
  #stick { width: 88px; height: 88px; }
  #nub { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
}

/* ------------------------------------------------------------ what you can see --
   A hole cut in a dark sheet, following you about. Everything outside it is
   simply not there as far as you are concerned — which is the point of the
   whole game. */
#fog {
  /* -3px, not 0: `inset` lines up with the padding box, so the map's 3px
     border was left lit — a bright rim right round the edge of the ship. */
  position: absolute; inset: -3px; z-index: 12; pointer-events: none; border-radius: 14px;
  /* `circle <percentage>` is not valid CSS — a circle's size has to be a
     length — so the light cone silently did not render at all. An ellipse
     takes percentages, and with the two radii worked out separately it stays
     round whatever shape the map is. */
  background: radial-gradient(ellipse var(--srx, 20%) var(--sry, 32%) at var(--sx, 50%) var(--sy, 50%),
    rgba(5,8,22,0) 52%, rgba(5,8,22,.55) 70%, rgba(5,8,22,.93) 86%, rgba(5,8,22,.99) 100%);
  transition: background .18s linear;
}
#map { position: relative; }
#mapwrap { position: relative; }
.mate.unseen, .station.unseen, .vent.unseen, .ebutton.unseen { opacity: 0; }
.mate, .station, .vent, .ebutton { transition: opacity .18s; }

.vent { position: absolute; transform: translate(-50%,-50%); width: clamp(13px,2.8vw,20px); height: clamp(9px,2vw,14px);
  background: #3a478c; border: 2px solid #5e6fc0; border-radius: 3px; z-index: 3; }
.vent::after { content: ''; position: absolute; inset: 2px; background:
  repeating-linear-gradient(90deg, #1b2450 0 2px, transparent 2px 4px); }
.ebutton { position: absolute; transform: translate(-50%,-50%); font-size: clamp(15px,3.4vw,22px); z-index: 3;
  filter: drop-shadow(0 0 7px rgba(230,60,60,.85)); animation: bob 1.4s ease-in-out infinite; }

#tasklist { position: absolute; left: 6px; top: 6px; z-index: 15; display: flex; flex-direction: column; gap: 3px;
  pointer-events: none; max-width: 46%; }
.tl { background: rgba(10,14,38,.82); border: 2px solid #33407e; border-radius: 8px;
  padding: 3px 8px; font-size: clamp(8.5px,2.1vw,11.5px); font-weight: 800; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tl em { font-style: normal; opacity: .55; font-weight: 700; }
.tl.done { opacity: .45; text-decoration: line-through; }

body.lightsout #map { filter: brightness(.55) saturate(.7); }
body.lightsout .rlabel { opacity: .2; }
#btn-lights { background: #7a5a12; border-color: #f0b429; }
.sawvent { text-align: center; background: #4a2233; border: 2px solid #8a3a55; border-radius: 10px;
  padding: 7px 10px; font-size: clamp(12px,3vw,15px); margin: 0 0 10px; }