/* Not Among Us on the phones. The same screen for crewmates and impostors: task bar, sabotage,
   task list, dock. Dark ("ship at night") rules first, then the light theme at the end. */
body.g-notamongus.tbl-ferry {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'><path d='M0 90 V52 L40 44 L70 50 L100 34 L118 40 L140 22 L148 30 L158 18 L170 36 L210 42 L250 34 L290 46 L330 38 L370 48 L400 42 V90 Z' fill='%23091327'/></svg>") bottom / 100% 90px no-repeat fixed,
    radial-gradient(1.4px 1.4px at 30px 40px, rgba(255,255,255,.85) 50%, transparent 52%) 0 0 / 130px 120px fixed,
    radial-gradient(1px 1px at 80px 90px, rgba(190,220,255,.7) 50%, transparent 52%) 0 0 / 170px 150px fixed,
    linear-gradient(180deg, #0a1430 0%, #0d1c40 60%, #12295a 100%) fixed;
}
.naup {
  --np-panel: rgba(10,20,42,.84); --np-line: rgba(130,180,255,.2); --np-tile: rgba(36,62,110,.55); --np-sub: rgba(214,228,255,.7);
  --np-sheet: #0f1b33; --np-acc: var(--nau-cyan);
  display: flex; flex-direction: column; gap: 12px; color: var(--text); padding-bottom: 8px; user-select: none; -webkit-user-select: none;
}
.naup [hidden], .naup-game [hidden], .naup-moment [hidden] { display: none !important; }
.naup-play, .naup-meet { flex: 1; }
.naup .nau-ico { stroke-width: 2.2; }
.naup-logo { font-size: 44px; }
.naup-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 2px; text-align: center; }
.naup-sub { font-size: 15px; color: var(--np-sub); line-height: 1.35; }
.naup-card { background: var(--np-panel); border: 1px solid var(--np-line); border-radius: 18px; padding: 12px 14px; }
.naup-card.center { text-align: center; }
.naup-cap { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--np-sub); margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; }
.naup-cap.out { margin: 6px 4px -4px; }
.naup-cap i { font-style: normal; letter-spacing: .02em; text-transform: none; font-weight: 600; margin-left: auto; }
.naup-note { font-size: 14px; color: var(--np-sub); text-align: center; line-height: 1.4; padding: 0 10px; }

/* ---- setup ---- */
.naup-roomgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.naup-rc { display: flex; align-items: center; gap: 8px; background: var(--np-tile); border-radius: 12px; padding: 10px; font-size: 15px; min-width: 0; }
.naup-rc span { font-size: 22px; display: flex; color: var(--np-acc); }
.naup-rc b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.naup-stlist { display: flex; flex-direction: column; gap: 8px; }
.naup-stlist > div { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; font-size: 14px; }
.naup-stlist .nau-ico { font-size: 20px; color: var(--np-acc); }
.naup-stlist span { color: var(--np-sub); }
.naup-stlist b { text-align: right; }
.naup-rooms { display: flex; flex-direction: column; gap: 8px; }
.naup-rrow { display: flex; align-items: center; gap: 8px; }
.naup-ri { font-size: 24px; width: 30px; display: flex; justify-content: center; color: var(--np-acc); }
.naup-rrow input[type=text] { flex: 1; min-height: 46px; background: var(--np-tile); font-weight: 700; user-select: text; -webkit-user-select: text; }
.naup-rdel { width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--np-tile); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--np-sub); }
.naup-rdel:disabled { opacity: .3; }
.naup-radd { min-height: 46px; border-radius: 12px; border: 2px dashed var(--np-line); background: none; font-weight: 700; color: var(--np-acc); }
.naup-stations { display: flex; flex-direction: column; gap: 8px; }
.naup-strow { display: grid; grid-template-columns: 26px 1fr 136px; align-items: center; gap: 8px; }
.naup-sti { font-size: 22px; display: flex; color: var(--np-acc); }
.naup-stl { font-size: 14px; font-weight: 700; line-height: 1.15; display: flex; flex-direction: column; }
.naup-stl small { font-size: 12px; font-weight: 600; color: var(--np-sub); }
.naup-strow select { width: 100%; min-height: 42px; border-radius: 10px; border: none; background: var(--np-tile); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; padding: 0 8px; }
.naup-rules { padding: 4px 12px; }
.naup-rule { display: flex; flex-direction: column; gap: 7px; padding: 10px 0; }
.naup-rule + .naup-rule { border-top: 1px solid var(--np-line); }
.naup-rl { font-size: 15px; font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.naup-rl small { font-size: 12px; font-weight: 500; color: var(--np-sub); }
.naup-rule .ios-seg button { padding: 7px 8px; font-size: 13px; }
.naup-reset { background: none; border: none; color: var(--np-sub); font-size: 14px; text-decoration: underline; padding: 6px; }
.naup-castoff { position: sticky; bottom: calc(var(--safe-bottom) + 8px); z-index: 5; display: flex; align-items: center; gap: 10px; background: var(--np-panel); border: 1px solid var(--np-line); border-radius: 20px; padding: 10px 10px 10px 14px; box-shadow: 0 14px 34px rgba(0,0,0,.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.naup-castinfo { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.25; }
.naup-castinfo.no { color: #ff8f91; }
.naup-go { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border: none; border-radius: 16px; background: linear-gradient(120deg, #ffd34d, #ffb000); color: #1b1b1b; font-size: 18px; font-weight: 900; box-shadow: 0 8px 20px rgba(255,176,0,.4); }
.naup-go .nau-ico { font-size: 24px; }
.naup-go:disabled { filter: grayscale(1); opacity: .5; box-shadow: none; }

/* ---- shhh and the role card ---- */
.naup-shhh { align-items: center; text-align: center; padding-top: 8px; }
.naup-shh { font-family: var(--nau-font); font-size: 84px; font-weight: 900; font-style: italic; line-height: .9; text-shadow: 4px 4px 0 var(--nau-red); animation: naup-slam .5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes naup-slam { from { transform: scale(1.7) rotate(-6deg); opacity: 0; } }
.naup-peek { position: relative; width: min(100%, 320px); height: 390px; border-radius: 24px; touch-action: none; cursor: pointer; }
.naup-back, .naup-face { position: absolute; inset: 0; border-radius: 24px; }
.naup-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; color: #fff; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px), linear-gradient(160deg, #1f4f8f, #0b1630); border: 3px solid rgba(255,255,255,.15); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.naup-back .nau-ico { font-size: 54px; opacity: .85; }
.naup-back b { font-size: 19px; line-height: 1.3; }
.naup-stamp { font-family: var(--nau-font); font-size: 34px; font-weight: 900; letter-spacing: .1em; color: #ff6b6b; border: 4px solid currentColor; border-radius: 10px; padding: 2px 14px; transform: rotate(-8deg); }
.naup-face { display: none; }
.naup-peek.on .naup-face { display: block; }
.naup-peek.on .naup-back { display: none; }
.naup-face .naup-role { height: 100%; }
.naup-amongus { font-size: 18px; font-weight: 700; background: var(--np-panel); border: 1px solid var(--np-line); border-radius: 999px; padding: 8px 18px; }
.naup-amongus b { color: #ff6b6b; font-size: 22px; }
.naup-shclock { width: 100%; max-width: 320px; }
.naup-role { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; border-radius: 22px; padding: 16px; color: #fff; overflow: hidden; position: relative; }
.naup-role.crew { background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.22), transparent 60%), linear-gradient(170deg, #2aa7d6, #13497e); }
.naup-role.imp { background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.18), transparent 60%), linear-gradient(170deg, #e5383b, #5a0b10); }
.naup-role.big { justify-content: center; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.naup-rbean { width: 96px; height: 115px; }
.naup-role.big .naup-rbean { width: 130px; height: 156px; animation: naup-bob 2s ease-in-out infinite; }
@keyframes naup-bob { 50% { transform: translateY(-6px); } }
.naup-rk { font-size: 12px; font-weight: 900; letter-spacing: .22em; opacity: .85; margin-top: 4px; }
.naup-rt { font-family: var(--nau-font); font-size: 44px; font-weight: 900; font-style: italic; line-height: .95; text-shadow: 3px 3px 0 rgba(0,0,0,.25); }
.naup-role.big .naup-rt { font-size: 52px; }
.naup-rd { font-size: 15px; line-height: 1.35; max-width: 280px; }
.naup-fel { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 6px; }
.naup-fel > span { display: inline-flex; align-items: center; gap: 4px; }
.naup-fel svg { width: 30px; height: 36px; }

/* ---- between meetings ---- */
.naup-tb { background: var(--np-panel); border: 1px solid var(--np-line); border-radius: 16px; padding: 10px 12px; }
.naup-tbl { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; letter-spacing: .16em; color: var(--np-sub); margin-bottom: 6px; }
.naup-tbl .nau-logo { font-size: 21px; margin-right: 4px; letter-spacing: 0; }
.naup-tbl .nau-not { padding: .2em .28em .18em .38em; }
.naup-tbl b { margin-left: auto; font-size: 18px; letter-spacing: 0; color: #5ee398; }
.naup-ghosttag { font-style: normal; font-size: 11px; letter-spacing: .14em; color: #fff; background: #8b7cf6; padding: 2px 8px; border-radius: 999px; }
.naup-track { height: 16px; border-radius: 8px; background: #081329; overflow: hidden; box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
.naup-track i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px), linear-gradient(180deg, #7cf0ae, #2fbf71); border-radius: 8px; transition: width .8s ease; }
.naup-track s { display: block; height: 100%; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px); }
.naup-sab { --sc: var(--nau-red); --sc2: #8e1418; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 16px; color: #fff; background: repeating-linear-gradient(-45deg, rgba(0,0,0,.14) 0 12px, transparent 12px 24px), linear-gradient(120deg, var(--sc), var(--sc2)); animation: naup-sab 1.2s ease-in-out infinite; position: relative; z-index: 3; }
.naup-sab.k-lights { --sc: #e39b0b; --sc2: #8a5300; }
.naup-sab.k-comms { --sc: #7b4fd6; --sc2: #3b2387; }
@keyframes naup-sab { 50% { box-shadow: 0 0 0 4px rgba(255,255,255,.2), 0 0 30px color-mix(in srgb, var(--sc) 70%, transparent); } }
.naup-sabi { font-size: 30px; display: flex; }
.naup-sabt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.naup-sabt > b { font-family: var(--nau-font); font-size: 22px; font-weight: 900; font-style: italic; line-height: 1; }
.naup-sabt > span { font-size: 13px; line-height: 1.3; }
.naup-sabt > span b { font-weight: 900; }
.naup-sabc .tclock { width: 50px; height: 50px; }
.naup-sabc .tclock b { font-size: 20px; color: #fff; }
.naup-sabc .tclock .fg { stroke: #fff; }
.naup-sabc .tclock .bg { stroke: rgba(0,0,0,.25); }
.naup-fix { min-height: 48px; min-width: 64px; border: none; border-radius: 14px; background: #fff; color: #8e1418; font-size: 17px; font-weight: 900; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.naup-sab.k-lights .naup-fix { color: #8a5300; } .naup-sab.k-comms .naup-fix { color: #3b2387; }
.naup-tasks { background: var(--np-panel); border: 1px solid var(--np-line); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px; transition: filter .6s; }
.naup-thead { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--np-sub); }
.naup-thead b { font-size: 17px; letter-spacing: 0; color: var(--text); }
.naup-tlist { display: flex; flex-direction: column; gap: 7px; }
.naup-task { display: grid; grid-template-columns: 104px minmax(0, 1fr) 30px; align-items: center; gap: 10px; min-height: 58px; padding: 6px 8px 6px 6px; border: none; border-radius: 14px; background: var(--np-tile); color: var(--text); text-align: left; cursor: pointer; transition: transform .1s; }
.naup-task:active { transform: scale(.98); }
.naup-troom { display: flex; align-items: center; gap: 6px; height: 100%; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.25); font-size: 12px; min-width: 0; }
.naup-troom .nau-ico { font-size: 18px; flex: none; color: var(--np-acc); }
.naup-troom b { overflow: hidden; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.naup-tname { font-size: 16px; font-weight: 800; line-height: 1.2; display: flex; flex-direction: column; gap: 4px; }
.naup-pips { display: flex; gap: 4px; }
.naup-pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.naup-pips i.on { background: #5ee398; }
.naup-tgo { font-size: 26px; font-weight: 300; color: var(--np-sub); display: flex; justify-content: center; }
.naup-tgo em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--nau-yellow); }
.naup-task.done { opacity: .5; cursor: default; }
.naup-task.done .naup-tname { text-decoration: line-through; }
.naup-task.done .naup-tgo { color: #5ee398; font-size: 20px; }
.naup-task.wait .naup-tname { opacity: .7; }
.naup-hint { font-size: 12px; color: var(--np-sub); text-align: center; padding: 2px 4px 2px; }
.naup-alldone { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 14px; font-weight: 700; color: #5ee398; padding: 4px; }
.naup-static { position: relative; overflow: hidden; border-radius: 14px; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; }
.naup-noise { position: absolute; inset: -20px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, rgba(123,79,214,.25) 0 3px, transparent 3px 9px); animation: naup-noise .25s steps(3) infinite; }
@keyframes naup-noise { 33% { transform: translate(-6px, 3px); } 66% { transform: translate(4px, -5px); } }
.naup-static b { position: relative; font-family: var(--nau-font); font-size: 30px; font-weight: 900; font-style: italic; display: flex; align-items: center; gap: 8px; color: #c3b1ff; }
.naup-static span { position: relative; font-size: 14px; color: var(--np-sub); max-width: 260px; }
.naup-play.lights .naup-tasks, .naup-play.lights .naup-top { filter: brightness(.2) saturate(.3); }
.naup-play.ghost .naup-tasks { border-color: rgba(167,139,250,.45); box-shadow: inset 0 0 40px rgba(167,139,250,.15); }
.naup-dock { position: sticky; bottom: calc(var(--safe-bottom) + 6px); z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: auto; padding: 8px; border-radius: 22px; background: var(--np-panel); border: 1px solid var(--np-line); box-shadow: 0 14px 34px rgba(0,0,0,.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.naup-play.ghost .naup-dock { grid-template-columns: repeat(2, 1fr); }
.naup-db { min-height: 62px; border: none; border-radius: 16px; background: var(--np-tile); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.naup-db .nau-ico { font-size: 26px; }
.naup-db.rep { background: rgba(229,56,59,.22); color: #ffb3b4; }
.naup-db.emg { background: rgba(255,197,39,.18); color: #ffd978; }
.naup-db:active { transform: scale(.96); }

/* killed: you're the body */
.naup-body { align-items: center; text-align: center; gap: 14px; padding: 24px 10px; border-radius: 24px; background: radial-gradient(circle at 50% 30%, #5a0b10, #12060a 75%); color: #fff; min-height: calc(100dvh - 110px); justify-content: center; }
.naup-killed { width: 230px; height: 180px; filter: grayscale(.4); }
.naup-kt { font-family: var(--nau-font); font-size: 46px; font-weight: 900; font-style: italic; line-height: .95; color: #ff6b6b; text-shadow: 3px 3px 0 #000; }
.naup-kd { font-size: 17px; line-height: 1.45; max-width: 320px; color: rgba(255,255,255,.88); }
.naup-khint { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.6); margin-top: 6px; }

/* ---- sheets ---- */
.naup-ov { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.5); animation: naup-fade .2s ease both; }
@keyframes naup-fade { from { opacity: 0; } }
.naup-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 8px 16px calc(var(--safe-bottom) + 16px); background: var(--np-sheet); display: flex; flex-direction: column; gap: 10px; animation: naup-up .28s cubic-bezier(.2,1,.3,1) both; max-width: 520px; margin: 0 auto; }
@keyframes naup-up { from { transform: translateY(100%); } }
.naup-sheet > * { flex-shrink: 0; }
.naup-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--np-line); align-self: center; margin-bottom: 4px; }
.naup-sht { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; }
.naup-sht .nau-ico { font-size: 26px; color: var(--np-acc); }
.naup-sht.red .nau-ico { color: #ff6b6b; }
.naup-shs { font-size: 14px; color: var(--np-sub); line-height: 1.4; }
.naup-shs.warn { color: #ffb3b4; font-weight: 700; }
.naup-sbtn { min-height: 50px; width: 100%; border: none; border-radius: 14px; background: var(--np-tile); color: var(--text); font-size: 16px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.naup-sbtn .nau-ico { font-size: 22px; }
.naup-sbtn.red { background: linear-gradient(120deg, #ff5a5e, #c9252a); color: #fff; box-shadow: 0 8px 20px rgba(229,56,59,.35); }
.naup-sbtn.big { min-height: 58px; font-size: 18px; }
.naup-sbtn:disabled { opacity: .4; box-shadow: none; }
.naup-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.naup-maplist { display: flex; flex-direction: column; gap: 8px; }
.naup-mr { background: var(--np-tile); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border: 2px solid transparent; }
.naup-mr.hot { border-color: #ff6b6b; }
.naup-mrn { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.naup-mrn .nau-ico { font-size: 22px; color: var(--np-acc); }
.naup-mrt { display: flex; flex-wrap: wrap; gap: 6px; }
.naup-mt { font-size: 13px; font-weight: 800; background: rgba(94,227,152,.18); color: #8ff0bb; padding: 4px 10px; border-radius: 999px; }
.naup-ms { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--np-sub); background: rgba(0,0,0,.25); padding: 4px 9px; border-radius: 999px; }
.naup-ms.hot { background: #e5383b; color: #fff; }
.naup-none { font-size: 13px; color: var(--np-sub); opacity: .7; }
.naup-sheet.role .naup-role { margin-top: 2px; }
.naup-tl { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; margin-top: 4px; }
.naup-tl .nau-ico { font-size: 22px; color: #ff6b6b; }
.naup-tl em { font-style: normal; margin-left: auto; font-size: 13px; color: var(--np-sub); }
.naup-tl em.ok { color: #5ee398; }
.naup-targets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.naup-tgt { border: none; border-radius: 14px; background: var(--np-tile); color: var(--text); padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; min-width: 0; }
.naup-tgt svg { width: 40px; height: 48px; }
.naup-tgt span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.naup-tgt:disabled { opacity: .45; }
.naup-kc { background: rgba(229,56,59,.15); border: 1px solid rgba(229,56,59,.5); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.naup-kcq { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.naup-kcq svg { width: 44px; height: 53px; flex: none; }
.naup-sabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.naup-sabb { min-height: 56px; border: none; border-radius: 14px; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; background: linear-gradient(120deg, #c9252a, #6e0f13); }
.naup-sabb.k-lights { background: linear-gradient(120deg, #e39b0b, #8a5300); } .naup-sabb.k-comms { background: linear-gradient(120deg, #7b4fd6, #3b2387); }
.naup-sabb .nau-ico { font-size: 24px; }
.naup-sabb:disabled { filter: grayscale(.8); opacity: .45; }
.naup-bodies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.naup-bodyb { border: 2px solid transparent; border-radius: 14px; background: var(--np-tile); color: var(--text); padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; min-width: 0; }
.naup-bodyb svg { width: 72px; height: 56px; }
.naup-bodyb span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.naup-bodyb.on { border-color: #ff6b6b; background: rgba(229,56,59,.2); }
.naup-bigbtn { width: 150px; align-self: center; }
.naup-bigbtn svg { display: block; width: 100%; }
.naup-bigbtn.off { filter: grayscale(.85); opacity: .55; }
.naup-left { font-size: 16px; text-align: center; }
.naup-left b { font-size: 22px; color: var(--nau-yellow); }

/* ---- meetings ---- */
.naup-called { position: relative; overflow: hidden; align-items: center; justify-content: center; text-align: center; gap: 10px; color: #fff; border-radius: 24px; padding: 26px 14px; min-height: calc(100dvh - 110px); background: radial-gradient(circle at 50% 40%, #c9252a, #5a0b10 75%); }
.naup-called.k-emergency { background: radial-gradient(circle at 50% 40%, #1f5fb0, #0a1838 75%); }
.naup-cburst { position: absolute; inset: -60%; background: repeating-conic-gradient(rgba(255,255,255,.08) 0 9deg, transparent 9deg 22deg); animation: naup-spin 14s linear infinite; }
@keyframes naup-spin { to { transform: rotate(360deg); } }
.naup-ct { position: relative; font-family: var(--nau-font); font-size: 52px; font-weight: 900; font-style: italic; line-height: .9; text-shadow: 4px 4px 0 #16233a; animation: naup-slam .5s cubic-bezier(.2,1.5,.4,1) both; }
.naup-cbeans { position: relative; display: flex; align-items: flex-end; gap: 12px; height: 150px; }
.naup-cb { width: 110px; height: 132px; animation: naup-shake .35s ease-in-out infinite; }
@keyframes naup-shake { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.naup-cbd { width: 150px; height: 118px; }
.naup-cs { position: relative; font-size: 18px; line-height: 1.35; }
.naup-cs small { color: #ffd0d0; }
.naup-cgo { position: relative; font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; background: #fff; color: #8e1418; padding: 10px 22px; border-radius: 999px; animation: naup-blink .8s ease-in-out infinite; }
.naup-called.k-emergency .naup-cgo { color: #0a1838; }
@keyframes naup-blink { 50% { opacity: .55; } }
.naup-cclock { position: relative; width: 80%; }
.naup-cclock .tclock.bar b { color: #fff; }
.naup-cclock .tclock.bar u { background: #fff; }
.naup-meet { gap: 10px; }
.naup-mh { display: flex; flex-direction: column; gap: 8px; background: var(--np-panel); border: 1px solid var(--np-line); border-radius: 16px; padding: 10px 12px; }
.naup-mph { display: flex; align-items: center; gap: 10px; }
.naup-mph b { font-family: var(--nau-mono); font-size: 14px; font-weight: 900; letter-spacing: .18em; color: #fff; background: var(--nau-blue); padding: 4px 10px; border-radius: 999px; }
.naup-mph.vote b { background: var(--nau-red); }
.naup-mph span { font-size: 15px; font-weight: 700; }
.naup-plates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.naup-pl { position: relative; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 4px 8px 4px 4px; border: 2px solid transparent; border-radius: 16px; background: var(--np-panel); color: var(--text); text-align: left; min-width: 0; }
.naup-plb { width: 46px; height: 55px; flex: none; }
.naup-pl.dead .naup-plb { width: 56px; height: 44px; }
.naup-pln { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.naup-pln i { font-style: normal; font-size: 11px; color: var(--np-sub); }
.naup-plt { position: absolute; left: 2px; top: 2px; font-size: 14px; color: var(--nau-yellow); }
.naup-plv { position: absolute; right: 6px; bottom: 4px; font-size: 9px; font-weight: 900; letter-spacing: .12em; color: #5ee398; border: 2px solid currentColor; border-radius: 6px; padding: 0 4px; transform: rotate(-8deg); }
.naup-pl.dead { opacity: .5; border-style: dashed; border-color: var(--np-line); }
.naup-pl.dead .naup-pln { text-decoration: line-through; }
.naup-pl.sel { border-color: var(--nau-yellow); box-shadow: 0 0 0 3px rgba(255,197,39,.3); }
.naup-pl.mine { border-color: #5ee398; }
.naup-mf { position: sticky; bottom: calc(var(--safe-bottom) + 6px); display: flex; gap: 8px; z-index: 4; }
.naup-skipb, .naup-voteb { min-height: 56px; border: none; border-radius: 16px; font-size: 16px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.naup-skipb { flex: 0 0 40%; background: var(--np-sheet); color: var(--text); border: 2px solid var(--np-line); }
.naup-skipb.sel { border-color: var(--nau-yellow); }
.naup-voteb { flex: 1; background: linear-gradient(120deg, #ff5a5e, #c9252a); color: #fff; }
.naup-voteb:disabled { background: var(--np-tile); color: var(--np-sub); box-shadow: none; }
.naup-skipb .nau-ico, .naup-voteb .nau-ico { font-size: 22px; }
.naup-voted { flex: 1; text-align: center; font-size: 15px; font-weight: 700; background: var(--np-panel); border: 1px solid var(--np-line); border-radius: 16px; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.naup-voted:empty { display: none; }
.naup-voted .nau-ico { color: #5ee398; font-size: 20px; }
.naup-voted.ghost { color: #c3b1ff; }
.naup-look { align-items: center; justify-content: center; text-align: center; min-height: calc(100dvh - 140px); gap: 10px; }
.naup-lookico { font-size: 80px; display: flex; color: var(--np-acc); animation: naup-bob 2s ease-in-out infinite; }
.naup-ejb { width: 120px; height: 144px; animation: naup-tumble 2.4s linear infinite; }
@keyframes naup-tumble { to { transform: rotate(360deg); } }
.naup-lt { font-size: 26px; font-weight: 900; line-height: 1.2; max-width: 320px; }
.naup-ls { font-size: 18px; color: var(--np-sub); }
.naup-myvote { font-size: 14px; color: var(--np-sub); background: var(--np-panel); padding: 6px 14px; border-radius: 999px; }

/* ---- the end ---- */
.naup-final { position: relative; overflow: hidden; align-items: center; text-align: center; gap: 12px; color: #fff; border-radius: 24px; padding: 30px 14px; min-height: calc(100dvh - 180px); background: radial-gradient(circle at 50% 30%, #2aa7d6, #0a1838 75%); }
.naup-final.imp.won { background: radial-gradient(circle at 50% 30%, #e5383b, #3a060a 75%); }
.naup-final.lost { background: radial-gradient(circle at 50% 30%, #3c4558, #0b0f18 75%); }
.naup-fburst { position: absolute; inset: -60%; background: repeating-conic-gradient(rgba(255,255,255,.07) 0 8deg, transparent 8deg 20deg); animation: naup-spin 24s linear infinite; }
.naup-final.lost .naup-fburst { display: none; }
.naup-ft { position: relative; font-family: var(--nau-font); font-size: 66px; font-weight: 900; font-style: italic; line-height: .9; text-shadow: 4px 4px 0 #16233a; animation: naup-slam .5s cubic-bezier(.2,1.5,.4,1) both; }
.naup-fs { position: relative; font-size: 16px; line-height: 1.35; color: rgba(255,255,255,.9); max-width: 300px; }
.naup-fme { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 18px; }
.naup-fme svg { width: 110px; height: 132px; }
.naup-fimps { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; background: rgba(0,0,0,.3); border-radius: 18px; padding: 8px 14px; font-size: 14px; }
.naup-fimps b { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; }
.naup-fimps svg { width: 28px; height: 34px; }
.naup-fstat { position: relative; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.85); }
.naup-fnext { position: relative; font-size: 13px; color: rgba(255,255,255,.7); }
.naup-watch .naup-wt { font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.naup-wcrew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.naup-wcrew > div { display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 700; }
.naup-wcrew svg { width: 44px; height: 53px; }
.naup-wcrew .dead { opacity: .4; }

/* ---- big moments on every phone ---- */
.naup-moment { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #fff; padding: 24px; animation: naup-moment 2.6s ease both; }
.naup-moment.k-meeting { background: radial-gradient(circle, rgba(229,56,59,.85), rgba(60,5,8,.95) 75%); }
.naup-moment.k-meeting.k-emergency { background: radial-gradient(circle, rgba(31,95,176,.9), rgba(6,14,36,.96) 75%); }
.naup-moment.k-killed { background: rgba(8,2,4,.94); animation-duration: 3.4s; }
.naup-moment.k-sabotage { background: radial-gradient(circle, rgba(229,56,59,.7), rgba(60,5,8,.9) 75%); animation-duration: 2s; }
.naup-moment.k-final.won { background: radial-gradient(circle, rgba(42,167,214,.9), rgba(6,14,36,.96) 75%); }
.naup-moment.k-final.won.imp { background: radial-gradient(circle, rgba(229,56,59,.9), rgba(40,4,6,.96) 75%); }
.naup-moment.k-final.lost { background: rgba(10,12,18,.94); }
@keyframes naup-moment { 0% { opacity: 0; } 10%, 82% { opacity: 1; } 100% { opacity: 0; } }
.naup-mb { width: 140px; height: 168px; animation: naup-shake .35s ease-in-out infinite; }
.naup-moment.k-killed .naup-mb { width: 200px; height: 158px; animation: none; }
.naup-mico { font-size: 90px; display: flex; animation: naup-shake .3s ease-in-out infinite; }
.naup-mt1 { font-family: var(--nau-font); font-size: 56px; font-weight: 900; font-style: italic; line-height: .92; text-shadow: 4px 4px 0 rgba(0,0,0,.45); animation: naup-slam .45s cubic-bezier(.2,1.5,.4,1) both; }
.naup-moment.k-killed .naup-mt1 { color: #ff6b6b; }
.naup-mt2 { font-size: 20px; font-weight: 800; }
.naup-slash { position: absolute; left: -10%; right: -10%; top: 46%; height: 14px; background: #e5383b; transform: rotate(-24deg) scaleX(0); animation: naup-slash .35s ease-out .05s both; box-shadow: 0 0 30px #e5383b; }
@keyframes naup-slash { to { transform: rotate(-24deg) scaleX(1); } }
body.naup-alarm::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 15; box-shadow: inset 0 0 0 5px rgba(229,56,59,.9), inset 0 0 60px rgba(229,56,59,.5); animation: naup-alarm 1.2s ease-in-out infinite; }
@keyframes naup-alarm { 50% { box-shadow: inset 0 0 0 3px rgba(229,56,59,.3), inset 0 0 20px rgba(229,56,59,.2); } }

/* ======================================================================
   The mini-games: a console that slides up over the task list. The
   console screens stay dark in both themes, like real device screens.
   ====================================================================== */
.naup-game { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-top) + 10px) 10px calc(var(--safe-bottom) + 10px); background: rgba(3,7,16,.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; touch-action: none; user-select: none; -webkit-user-select: none; }
.naup-game.in { opacity: 1; }
.naup-gframe { position: relative; width: min(100%, 420px); max-height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 26px; color: #eaf2ff; background: linear-gradient(180deg, #24324d, #172238); border: 2px solid #3a4b6e; box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); transform: translateY(30px) scale(.97); transition: transform .25s cubic-bezier(.2,1.2,.3,1); }
.naup-game.in .naup-gframe { transform: none; }
.naup-game.fix .naup-gframe { border-color: #e5383b; box-shadow: 0 0 0 3px rgba(229,56,59,.3), 0 30px 60px rgba(0,0,0,.6); }
.naup-ghead { display: flex; align-items: center; justify-content: space-between; }
.naup-groom { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; background: rgba(0,0,0,.3); padding: 6px 12px; border-radius: 999px; }
.naup-groom .nau-ico { font-size: 18px; color: var(--nau-cyan); }
.naup-gx { width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(0,0,0,.3); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.naup-gtitle { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px; }
.naup-gtitle b { font-family: var(--nau-font); font-size: 28px; font-weight: 900; font-style: italic; line-height: 1; }
.naup-gtitle span { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nau-yellow); white-space: nowrap; }
.naup-gbody { position: relative; }
.naup-ghint { font-size: 14px; text-align: center; color: rgba(234,242,255,.75); min-height: 20px; }
.naup-ghint.bad { color: #ff8f91; font-weight: 800; }
.naup-ghint.shake { animation: naup-hshake .35s ease; }
@keyframes naup-hshake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.naup-gdone { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(23,120,74,.88); border-radius: 24px; animation: naup-fade .2s ease both; }
.naup-gdone div { font-size: 90px; display: flex; color: #fff; animation: naup-slam .4s cubic-bezier(.2,1.5,.4,1) both; }
.naup-gdone b { font-family: var(--nau-font); font-size: 32px; font-weight: 900; font-style: italic; text-align: center; padding: 0 16px; }
.mg { position: relative; width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.mg button { touch-action: none; }
.mg-bigbtn { display: block; width: 100%; min-height: 56px; border: none; border-radius: 16px; background: linear-gradient(120deg, #ffd34d, #ffb000); color: #1b1b1b; font-size: 18px; font-weight: 900; box-shadow: 0 6px 0 #b77d00; }
.mg-bigbtn:active, .mg-bigbtn.on { transform: translateY(4px); box-shadow: 0 2px 0 #b77d00; }
.mg-bigbtn:disabled { filter: grayscale(.6); opacity: .6; }

/* swipe card */
.mg-swipe { display: flex; flex-direction: column; gap: 12px; }
.mg-reader { display: flex; align-items: center; gap: 10px; background: #0b1222; border-radius: 14px; padding: 10px 12px; border: 2px solid #33415c; }
.mg-lcd { flex: 1; font-family: var(--nau-mono); font-size: 14px; font-weight: 800; color: #7dffb0; background: #06210f; border-radius: 8px; padding: 10px; letter-spacing: .06em; text-shadow: 0 0 8px rgba(125,255,176,.6); }
.mg-leds { display: flex; flex-direction: column; gap: 6px; }
.mg-leds i { width: 14px; height: 14px; border-radius: 50%; background: #3a1214; }
.mg-leds i.gr { background: #10331f; }
.mg-leds.no i.r { background: #ff4b4e; box-shadow: 0 0 10px #ff4b4e; }
.mg-leds.ok i.gr { background: #4dff94; box-shadow: 0 0 10px #4dff94; }
.mg-track { position: relative; height: 150px; border-radius: 16px; background: linear-gradient(180deg, #2e3b57, #1b2538); border: 2px solid #3a4b6e; overflow: hidden; padding: 0 4px; display: flex; align-items: center; }
.mg-groove { position: absolute; left: 8px; right: 8px; top: 18px; height: 10px; border-radius: 5px; background: #0b1222; }
.mg-card { position: relative; width: 150px; height: 100px; border-radius: 12px; background: #f6f9fd; color: #13294b; overflow: hidden; box-shadow: 0 8px 18px rgba(0,0,0,.4); transition: transform .25s cubic-bezier(.2,1.3,.4,1); cursor: grab; }
.mg-cardtop { background: linear-gradient(90deg, #1f6fb2, #13294b); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .12em; padding: 5px 8px; display: flex; flex-direction: column; line-height: 1.1; }
.mg-cardtop span { font-size: 8px; letter-spacing: .1em; opacity: .8; font-weight: 700; }
.mg-cardbean { position: absolute; left: 8px; bottom: 6px; width: 40px; height: 48px; }
.mg-cardname { position: absolute; left: 56px; bottom: 26px; font-size: 14px; font-weight: 900; }
.mg-stripe { position: absolute; left: 0; right: 0; bottom: 10px; height: 10px; background: #13294b; opacity: .85; margin-left: 56px; border-radius: 3px 0 0 3px; }

/* wiring */
.mg-wires svg, .mg-course svg, .mg-shields svg { display: block; width: 100%; height: auto; }

/* keypads */
.mg-keypad { display: flex; flex-direction: column; gap: 10px; }
.mg-idcard { display: flex; align-items: center; gap: 12px; background: #f6f9fd; color: #13294b; border-radius: 14px; padding: 10px 12px; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.mg-idbean { width: 52px; height: 62px; flex: none; }
.mg-idcard small { display: block; font-size: 10px; font-weight: 900; letter-spacing: .14em; color: #1f6fb2; }
.mg-idcard b { display: block; font-size: 17px; }
.mg-idcard span { display: block; font-family: var(--nau-mono); font-size: 26px; font-weight: 900; letter-spacing: .18em; }
.mg-sticky { align-self: center; background: #ffe680; color: #3a2a00; transform: rotate(-3deg); padding: 10px 22px; border-radius: 4px; box-shadow: 0 8px 16px rgba(0,0,0,.35); text-align: center; }
.mg-sticky small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.mg-sticky b { font-family: var(--nau-mono); font-size: 32px; letter-spacing: .14em; }
.mg-kdisp { height: 52px; border-radius: 12px; background: #06210f; color: #7dffb0; font-family: var(--nau-mono); font-size: 30px; font-weight: 900; letter-spacing: .3em; display: flex; align-items: center; justify-content: center; text-shadow: 0 0 10px rgba(125,255,176,.6); }
.mg-kdisp.ok { background: #0f5132; }
.mg-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mg-keys button { min-height: 54px; border: none; border-radius: 12px; background: #e9eef6; color: #13294b; font-size: 22px; font-weight: 900; box-shadow: 0 4px 0 #9aa6b8; }
.mg-keys button.on { transform: translateY(3px); box-shadow: 0 1px 0 #9aa6b8; }
.mg-keys button.ok { background: #4dff94; box-shadow: 0 4px 0 #1f9a59; }
.mg-keys button.clr { background: #ff8f91; box-shadow: 0 4px 0 #c22125; }

/* start reactor */
.mg-simon { display: flex; flex-direction: column; gap: 12px; }
.mg-sleds { display: flex; justify-content: center; gap: 10px; }
.mg-sleds i { width: 22px; height: 22px; border-radius: 50%; background: #2b354a; }
.mg-sleds i.on { background: #4dff94; box-shadow: 0 0 12px #4dff94; }
.mg-spanels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mg-sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-radius: 14px; background: #0b1222; aspect-ratio: 1; }
.mg-sgrid i, .mg-sgrid button { border-radius: 8px; border: none; background: #1d2840; transition: background .1s, box-shadow .1s; }
.mg-sgrid.show i.on { background: #38c6e8; box-shadow: 0 0 16px #38c6e8; }
.mg-sgrid.pad button { background: #dfe7f2; box-shadow: 0 3px 0 #8d9bb2; }
.mg-sgrid.pad button.on { background: #38c6e8; transform: translateY(2px); box-shadow: none; }

/* green bin lever */
.mg-lever { display: grid; grid-template-columns: 1fr 74px; gap: 14px; height: 300px; }
.mg-bin { position: relative; border-radius: 18px 18px 26px 26px; background: linear-gradient(90deg, #1f7a46, #2fbf71 45%, #1f7a46); border: 3px solid #0b3d22; display: flex; flex-direction: column; padding: 10px; overflow: hidden; }
.mg-binlbl { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: #e9ffef; text-align: center; margin-bottom: 8px; }
.mg-bincontent { position: relative; flex: 1; border-radius: 10px; background: #0b2416; overflow: hidden; display: flex; align-items: flex-end; }
.mg-fillv { position: relative; width: 100%; background: linear-gradient(180deg, #5b3a1e, #3b2513); transition: height .1s linear; }
.mg-fillv i { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 10px; border-radius: 4px; background: var(--c); transform: rotate(var(--r)); }
.mg-chute { position: absolute; left: 22%; right: 22%; bottom: 0; height: 10px; background: #0b3d22; border-radius: 6px 6px 0 0; transition: height .2s; }
.mg-bin.open .mg-chute { height: 22px; background: #000; }
.mg-bin.open .mg-bincontent { animation: naup-hshake .2s linear infinite; }
.mg-levtrack { position: relative; border-radius: 40px; background: #0b1222; border: 3px solid #33415c; padding: 4px; }
.mg-levknob { width: 100%; height: 74px; border-radius: 34px; background: linear-gradient(180deg, #ff5a5e, #c9252a); color: #fff; font-weight: 900; font-size: 13px; letter-spacing: .1em; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 12px rgba(0,0,0,.45); transition: transform .3s cubic-bezier(.2,1.3,.4,1); cursor: grab; }

/* fuel */
.mg-fuel { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.mg-tank { position: relative; width: 200px; height: 220px; border-radius: 22px 22px 18px 18px; background: #0b1222; border: 4px solid #c9252a; overflow: hidden; }
.mg-tank.engine { border-color: #9aa6b8; border-radius: 30px; }
.mg-tank.can::before { content: ''; position: absolute; right: 18px; top: -4px; width: 40px; height: 24px; background: #c9252a; border-radius: 0 0 10px 10px; z-index: 2; }
.mg-tankfill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.12) 0 10px, transparent 10px 20px), linear-gradient(180deg, #ffd34d, #ff9a1f); }
.mg-tanklbl { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: 15px; font-weight: 900; letter-spacing: .16em; color: rgba(255,255,255,.75); z-index: 2; }
.mg-gauge { position: absolute; left: 10px; top: 14px; bottom: 14px; display: flex; flex-direction: column-reverse; gap: 4px; z-index: 2; }
.mg-gauge i { flex: 1; width: 12px; border-radius: 3px; background: rgba(255,255,255,.12); }
.mg-gauge i.on { background: #4dff94; }

/* inspect sample */
.mg-sample { display: flex; flex-direction: column; gap: 16px; }
.mg-tubes { display: flex; justify-content: space-between; gap: 8px; padding: 14px 10px; border-radius: 16px; background: #0b1222; }
.mg-tube { position: relative; flex: 1; height: 170px; border-radius: 0 0 26px 26px; border: 3px solid #9fb2cf; border-top: none; background: rgba(255,255,255,.05); overflow: hidden; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.mg-tube i { display: block; height: 0; background: linear-gradient(180deg, #59d6ff, #1f6fb2); transition: height .9s ease; }
.mg-tube i.full { height: 78%; }
.mg-tube i.odd { background: linear-gradient(180deg, #ff8a8c, #c9252a); }
.mg-tube span { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 900; color: #9fb2cf; }
.mg-tube.pick { cursor: pointer; }
.mg-tube.ok { border-color: #4dff94; }
.mg-tube.no { border-color: #ff4b4e; animation: naup-hshake .3s ease; }

/* upload / download */
.mg-xfer { display: flex; flex-direction: column; gap: 12px; }
.mg-folders { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; border-radius: 16px; background: #0b1222; }
.mg-folder { width: 84px; height: 66px; border-radius: 6px 10px 10px 10px; background: linear-gradient(180deg, #ffd34d, #e39b0b); color: #3a2a00; font-size: 12px; font-weight: 900; letter-spacing: .1em; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; position: relative; }
.mg-folder::before { content: ''; position: absolute; left: 0; top: -8px; width: 36px; height: 10px; border-radius: 4px 4px 0 0; background: #ffd34d; }
.mg-files { position: relative; flex: 1; height: 40px; }
.mg-files i { position: absolute; left: 0; top: 8px; width: 18px; height: 24px; border-radius: 3px; background: #eaf2ff; opacity: 0; }
.mg-xfer.go .mg-files i { animation: mg-file 1.1s linear infinite; }
.mg-files i:nth-child(2) { animation-delay: .28s !important; } .mg-files i:nth-child(3) { animation-delay: .55s !important; } .mg-files i:nth-child(4) { animation-delay: .82s !important; }
@keyframes mg-file { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 18px); opacity: 0; } }
.mg-pbar { height: 22px; border-radius: 11px; background: #0b1222; overflow: hidden; border: 2px solid #33415c; }
.mg-pbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2fbf71, #7cf0ae); }
.mg-eta { font-family: var(--nau-mono); font-size: 13px; color: #9fb2cf; text-align: center; }

/* divert power */
.mg-sliders { display: flex; justify-content: space-between; gap: 4px; padding: 12px 8px; border-radius: 16px; background: #0b1222; }
.mg-sl { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; opacity: .45; }
.mg-sl.live { opacity: 1; }
.mg-sltrack { --f: 0%; position: relative; width: 26px; height: 190px; border-radius: 13px; background: linear-gradient(0deg, #ffc527 var(--f), #1d2840 var(--f)); display: flex; align-items: flex-end; }
.mg-sl.live .mg-sltrack { box-shadow: 0 0 0 2px #ffc527, 0 0 18px rgba(255,197,39,.5); animation: naup-blink 1s ease-in-out infinite; }
.mg-sl.ok .mg-sltrack { animation: none; }
.mg-slknob { width: 34px; height: 30px; margin-left: -4px; border-radius: 8px; background: #dfe7f2; box-shadow: 0 3px 0 #8d9bb2; }
.mg-sl span { font-size: 10px; font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #9fb2cf; }
.mg-sl.live span { color: #ffc527; font-size: 11px; }
.mg-accept { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px; border-radius: 16px; background: #0b1222; position: relative; overflow: hidden; }
.mg-accept b { font-size: 14px; letter-spacing: .14em; color: #9fb2cf; }
.mg-switch { position: relative; width: 120px; height: 180px; border: none; border-radius: 22px; background: #1d2840; box-shadow: inset 0 0 0 4px #33415c; }
.mg-switch span { position: absolute; left: 20px; right: 20px; top: 20px; height: 70px; border-radius: 14px; background: linear-gradient(180deg, #ff5a5e, #c9252a); box-shadow: 0 6px 0 #7a1418; transition: top .2s cubic-bezier(.2,1.4,.4,1); }
.mg-switch.on span { top: 90px; background: linear-gradient(180deg, #7cf0ae, #2fbf71); box-shadow: 0 6px 0 #17784a; }
.mg-sparks { position: absolute; inset: 0; pointer-events: none; }
.mg-sparks i { position: absolute; left: 50%; top: 45%; width: 6px; height: 6px; border-radius: 50%; background: #ffc527; opacity: 0; }
.mg-accept.lit .mg-sparks i { animation: mg-spark .7s ease-out both; }
.mg-sparks i:nth-child(1) { --dx: -90px; --dy: -60px; } .mg-sparks i:nth-child(2) { --dx: 90px; --dy: -70px; } .mg-sparks i:nth-child(3) { --dx: -110px; --dy: 10px; } .mg-sparks i:nth-child(4) { --dx: 110px; --dy: 20px; }
.mg-sparks i:nth-child(5) { --dx: -60px; --dy: 80px; } .mg-sparks i:nth-child(6) { --dx: 70px; --dy: 90px; } .mg-sparks i:nth-child(7) { --dx: 0; --dy: -100px; } .mg-sparks i:nth-child(8) { --dx: 0; --dy: 110px; }
@keyframes mg-spark { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

/* clean the filter */
.mg-leaves { position: relative; height: 300px; border-radius: 16px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px), #1d2840; overflow: hidden; }
.mg-vent { position: absolute; left: 0; top: 0; bottom: 0; width: 22%; background: #0b1222; display: flex; flex-direction: column; justify-content: space-evenly; padding: 0 8px; box-shadow: inset -6px 0 12px rgba(0,0,0,.5); }
.mg-vent i { height: 8px; border-radius: 4px; background: #000; box-shadow: 0 2px 0 #33415c; }
.mg-leaf { position: absolute; width: 50px; height: 50px; transform: rotate(var(--r)); transition: transform .15s; cursor: grab; }
.mg-leaf svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.mg-leaf.held { transform: rotate(var(--r)) scale(1.2); z-index: 3; transition: none; }
.mg-leaf.gone { transition: transform .35s ease-in, opacity .35s; transform: rotate(calc(var(--r) + 300deg)) scale(0); opacity: 0; pointer-events: none; }

/* shoo the crows */
.mg-crows { position: relative; height: 300px; border-radius: 16px; overflow: hidden; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'><path d='M0 90 V52 L40 44 L70 50 L100 34 L118 40 L140 22 L148 30 L158 18 L170 36 L210 42 L250 34 L290 46 L330 38 L370 48 L400 42 V90 Z' fill='%23476c8f'/></svg>") bottom / 100% 70px no-repeat, linear-gradient(180deg, #ffb26b 0%, #ff8a6b 30%, #7db6e8 100%); }
.mg-count { position: absolute; left: 10px; top: 8px; z-index: 2; font-size: 13px; font-weight: 800; background: rgba(0,0,0,.4); padding: 4px 10px; border-radius: 999px; }
.mg-count b { color: var(--nau-yellow); }
.mg-crow { position: absolute; left: 105%; width: 70px; height: 36px; padding: 6px; border: none; background: none; animation: mg-fly 3s linear both; cursor: pointer; }
.mg-crow svg { width: 100%; height: 100%; display: block; animation: mg-flap .3s ease-in-out infinite alternate; }
.mg-crow.hit { animation-play-state: paused; }
.mg-crow.hit svg { animation: mg-poof .35s ease-out both; }
@keyframes mg-fly { from { left: 105%; } to { left: -25%; } }
@keyframes mg-fly-r { from { left: -25%; transform: scaleX(-1); } to { left: 105%; transform: scaleX(-1); } }
@keyframes mg-flap { to { transform: scaleY(.6); } }
@keyframes mg-poof { to { transform: scale(1.8) rotate(40deg); opacity: 0; } }
.mg-course text.lbl { font-size: 12px; font-weight: 900; letter-spacing: .1em; fill: #fff; font-family: var(--font); }

/* calibrate distributor */
.mg-cal { display: flex; flex-direction: column; gap: 10px; }
.mg-calrow { display: grid; grid-template-columns: 74px 1fr 108px; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: #0b1222; opacity: .5; }
.mg-calrow.live, .mg-calrow.ok { opacity: 1; }
.mg-dial { position: relative; width: 74px; height: 74px; border-radius: 50%; border: 5px solid #2b354a; }
.mg-mark { position: absolute; left: 50%; top: -9px; width: 6px; height: 16px; margin-left: -3px; border-radius: 3px; background: var(--c); }
.mg-node { position: absolute; inset: 0; }
.mg-node::after { content: ''; position: absolute; left: 50%; top: 2px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.mg-calbar { height: 12px; border-radius: 6px; background: #1d2840; overflow: hidden; }
.mg-calbar i { display: block; height: 100%; width: 0; background: var(--c); transition: width .4s; }
.mg-calrow.ok .mg-calbar i { width: 100%; }
.mg-calbtn { min-height: 48px; border: none; border-radius: 12px; background: #dfe7f2; color: #13294b; font-size: 13px; font-weight: 900; letter-spacing: .06em; box-shadow: 0 3px 0 #8d9bb2; }
.mg-calrow.ok .mg-calbtn { background: #4dff94; box-shadow: 0 3px 0 #1f9a59; }

/* prime shields */
.mg-shields { max-width: 280px; margin: 0 auto; padding: 8px; border-radius: 50%; background: #0b1222; }
.mg-shields .hx { cursor: pointer; transition: fill .15s; }
.mg-shields.ok { box-shadow: 0 0 30px rgba(125,240,174,.6); }

/* unlock manifolds */
.mg-mani { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px; border-radius: 16px; background: #0b1222; }
.mg-mani button { aspect-ratio: 1; border: none; border-radius: 12px; background: #2b354a; color: #eaf2ff; font-size: 22px; font-weight: 900; box-shadow: inset 0 -4px 0 rgba(0,0,0,.35); }
.mg-mani button.on { background: #38c6e8; color: #06223a; box-shadow: 0 0 14px rgba(56,198,232,.6); }

/* align engine output */
.mg-align { display: grid; grid-template-columns: 1fr 60px; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; background: #0b1222; }
.mg-align svg { width: 100%; display: block; }
.mg-vtrack { position: relative; height: 220px; border-radius: 30px; background: #1d2840; padding: 4px; }
.mg-vknob { width: 100%; height: 52px; border-radius: 26px; background: linear-gradient(180deg, #ffd34d, #ffb000); box-shadow: 0 4px 0 #b77d00; }
.mg-align.ok { box-shadow: 0 0 0 3px #4dff94; }

/* sabotage fixes */
.mg-breakers { display: flex; flex-direction: column; gap: 10px; }
.mg-bpanel { display: flex; justify-content: space-between; gap: 8px; padding: 16px 12px; border-radius: 16px; background: #c9d3df; box-shadow: inset 0 0 0 4px #9aa6b8; }
.mg-brk { position: relative; flex: 1; height: 150px; border: none; border-radius: 10px; background: #2b354a; box-shadow: inset 0 0 0 3px #11192b; }
.mg-brk span { position: absolute; left: 8px; right: 8px; bottom: 10px; height: 56px; border-radius: 8px; background: linear-gradient(180deg, #ff8a8c, #e5383b); box-shadow: 0 4px 0 #7a1418; transition: bottom .15s cubic-bezier(.2,1.4,.4,1), background .15s; }
.mg-brk.up span { bottom: 80px; background: linear-gradient(180deg, #7cf0ae, #2fbf71); box-shadow: 0 4px 0 #17784a; }
.mg-blbl { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-align: center; color: #9fb2cf; }
.mg-comms { display: flex; flex-direction: column; gap: 12px; }
.mg-comms svg { display: block; width: 100%; border-radius: 12px; }
.mg-freq { display: flex; align-items: baseline; justify-content: center; gap: 10px; font-family: var(--nau-mono); }
.mg-freq span { font-size: 12px; letter-spacing: .16em; color: #9fb2cf; }
.mg-freq b { font-size: 28px; color: #7dffb0; }
.mg-htrack { position: relative; height: 60px; border-radius: 30px; background: #0b1222; padding: 4px; border: 2px solid #33415c; }
.mg-hknob { width: 64px; height: 100%; border-radius: 26px; background: linear-gradient(180deg, #ffd34d, #ffb000); box-shadow: 0 4px 0 #b77d00; }
.mg-scan { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mg-pad { position: relative; width: 230px; height: 230px; border-radius: 30px; background: radial-gradient(circle, #13294b, #0b1222); border: 4px solid #33415c; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.mg-hand { font-size: 150px; display: flex; color: #38c6e8; opacity: .5; }
.mg-pad.on { border-color: #4dff94; box-shadow: 0 0 30px rgba(77,255,148,.45); }
.mg-pad.on .mg-hand { opacity: 1; color: #4dff94; }
.mg-scanline { position: absolute; left: 0; right: 0; height: 6px; background: #4dff94; box-shadow: 0 0 16px #4dff94; top: 0; opacity: 0; }
.mg-pad.on .mg-scanline { opacity: 1; animation: mg-scan 1.2s ease-in-out infinite alternate; }
@keyframes mg-scan { to { top: calc(100% - 6px); } }
.mg-scanst { font-size: 15px; text-align: center; line-height: 1.4; min-height: 44px; }
.mg-scanst .ok, .mg-scanst b.ok { color: #4dff94; }

/* ======================================================================
   Light theme: a bright day crossing.
   ====================================================================== */
[data-theme="light"] body.g-notamongus.tbl-ferry {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'><path d='M0 90 V52 L40 44 L70 50 L100 34 L118 40 L140 22 L148 30 L158 18 L170 36 L210 42 L250 34 L290 46 L330 38 L370 48 L400 42 V90 Z' fill='%23a9c4de'/><path d='M140 22 L148 30 L158 18 L164 27 L156 26 L148 34 Z' fill='%23ffffff'/></svg>") bottom / 100% 90px no-repeat fixed,
    radial-gradient(ellipse 40% 6% at 20% 12%, rgba(255,255,255,.9), transparent 70%) fixed,
    radial-gradient(ellipse 34% 5% at 80% 22%, rgba(255,255,255,.85), transparent 70%) fixed,
    linear-gradient(180deg, #bfe0f7 0%, #dcedf9 55%, #eef6fc 100%) fixed;
}
[data-theme="light"] .naup {
  --np-panel: rgba(255,255,255,.9); --np-line: rgba(31,111,178,.18); --np-tile: #eef4fb; --np-sub: rgba(19,41,75,.66);
  --np-sheet: #f4f8fc; --np-acc: var(--nau-blue);
}
[data-theme="light"] .naup .nau-word { color: #13294b; text-shadow: .045em .045em 0 var(--nau-red), .09em .09em 0 rgba(19,41,75,.15); }
[data-theme="light"] .naup .nau-word b { color: #f0a400; }
[data-theme="light"] .naup-castoff, [data-theme="light"] .naup-dock { box-shadow: 0 12px 30px rgba(30,70,130,.18); }
[data-theme="light"] .naup-castinfo.no { color: #c22125; }
[data-theme="light"] .naup-shh { color: #13294b; }
[data-theme="light"] .naup-amongus b { color: #c22125; }
[data-theme="light"] .naup-tbl b { color: #17784a; }
[data-theme="light"] .naup-track { background: #dce8f4; box-shadow: inset 0 2px 4px rgba(30,70,130,.2); }
[data-theme="light"] .naup-troom { background: #fff; box-shadow: 0 1px 3px rgba(30,70,130,.15); }
[data-theme="light"] .naup-pips i { background: rgba(19,41,75,.15); }
[data-theme="light"] .naup-pips i.on, [data-theme="light"] .naup-task.done .naup-tgo, [data-theme="light"] .naup-alldone { color: #17784a; }
[data-theme="light"] .naup-pips i.on { background: #2fbf71; }
[data-theme="light"] .naup-tgo em { color: #b77d00; }
[data-theme="light"] .naup-static { background: #1d2840; }
[data-theme="light"] .naup-static span { color: rgba(234,242,255,.75); }
[data-theme="light"] .naup-db.rep { background: rgba(229,56,59,.12); color: #c22125; }
[data-theme="light"] .naup-db.emg { background: rgba(255,197,39,.22); color: #8a5a00; }
[data-theme="light"] .naup-ov { background: rgba(10,20,40,.32); }
[data-theme="light"] .naup-shs.warn { color: #c22125; }
[data-theme="light"] .naup-mt { background: rgba(47,191,113,.15); color: #17784a; }
[data-theme="light"] .naup-ms { background: rgba(19,41,75,.08); }
[data-theme="light"] .naup-tl .nau-ico, [data-theme="light"] .naup-sht.red .nau-ico { color: #c22125; }
[data-theme="light"] .naup-tl em.ok { color: #17784a; }
[data-theme="light"] .naup-kc { background: rgba(229,56,59,.08); }
[data-theme="light"] .naup-bodyb.on { background: rgba(229,56,59,.1); }
[data-theme="light"] .naup-left b { color: #b77d00; }
[data-theme="light"] .naup-pl { box-shadow: 0 4px 12px rgba(30,70,130,.1); }
[data-theme="light"] .naup-plt { color: #b77d00; }
[data-theme="light"] .naup-plv { color: #17784a; }
[data-theme="light"] .naup-voted .nau-ico { color: #17784a; }
[data-theme="light"] .naup-voted.ghost { color: #6d4fd6; }
[data-theme="light"] .naup-skipb, [data-theme="light"] .naup-voteb:not(:disabled) { box-shadow: 0 8px 20px rgba(30,70,130,.2); }
[data-theme="light"] .naup-game { background: rgba(20,40,70,.45); }
[data-theme="light"] .naup-gframe { background: linear-gradient(180deg, #e8eef6, #cfd9e6); border-color: #aebdd1; color: #13294b; }
[data-theme="light"] .naup-groom, [data-theme="light"] .naup-gx { background: rgba(19,41,75,.1); color: #13294b; }
[data-theme="light"] .naup-groom .nau-ico { color: var(--nau-blue); }
[data-theme="light"] .naup-gtitle span { color: #b77d00; }
[data-theme="light"] .naup-ghint { color: rgba(19,41,75,.75); }
[data-theme="light"] .naup-ghint.bad { color: #c22125; }
[data-theme="light"] .naup-gdone { color: #fff; }