/* ============ Among Us IRL — shared design system ============
   Palette + type lifted from the party invite: deep-space navy,
   bubble display type with thick dark strokes, pink/yellow/cyan accents. */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Fredoka:wght@500;600;700&display=swap');

:root {
  --space-0: #070912;
  --space-1: #0d1024;
  --space-2: #161a36;
  --panel: #1b2040;
  --panel-edge: #2c3260;
  --ink: #10122b;
  --pink: #ff3ea5;
  --yellow: #ffc943;
  --cyan: #4ee0e6;
  --white: #f4f6ff;
  --red: #ff3355;
  --green: #4be36b;
  --muted: #9aa3d0;
  --radius: 22px;
  --display: 'Baloo 2', 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: var(--body);
  color: var(--white);
  background: var(--space-0);
  overflow-x: hidden;
}

/* -------- starfield -------- */
.stars {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff 99%, transparent),
    radial-gradient(1.2px 1.2px at 31% 71%, #cfe4ff 99%, transparent),
    radial-gradient(2px 2px at 48% 12%, #ffe9b0 99%, transparent),
    radial-gradient(1.4px 1.4px at 63% 55%, #fff 99%, transparent),
    radial-gradient(1.1px 1.1px at 77% 30%, #bfe6ff 99%, transparent),
    radial-gradient(1.8px 1.8px at 88% 80%, #fff 99%, transparent),
    radial-gradient(1.2px 1.2px at 22% 88%, #ffd9f1 99%, transparent),
    radial-gradient(1.5px 1.5px at 55% 92%, #fff 99%, transparent),
    radial-gradient(1.1px 1.1px at 92% 8%, #fff 99%, transparent),
    radial-gradient(1.3px 1.3px at 5% 50%, #cfe4ff 99%, transparent),
    radial-gradient(ellipse at 50% 120%, #1a1f45 0%, var(--space-1) 45%, var(--space-0) 100%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { filter: brightness(.9); } to { filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .stars { animation: none; } }

/* -------- bubble display type -------- */
.title, .title-sm {
  font-family: var(--display);
  font-weight: 800;
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.16em var(--ink);
  text-shadow: 0 .07em 0 var(--ink);
}
.title { font-size: clamp(2.2rem, 7vw, 5.5rem); }
.title-sm { font-size: clamp(1.3rem, 4vw, 2.4rem); }
.w-pink { color: var(--pink); } .w-yellow { color: var(--yellow); }
.w-white { color: var(--white); } .w-cyan { color: var(--cyan); }
.w-red { color: var(--red); }

.eyebrow {
  display: inline-block;
  font-family: var(--display); font-weight: 700;
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--pink); color: #fff;
  padding: .3em 1em; border-radius: 999px;
  border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
}

/* -------- chunky panels & buttons -------- */
.panel {
  background: var(--panel);
  border: 3px solid var(--panel-edge);
  border-radius: var(--radius);
  box-shadow: 0 6px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.06);
  padding: 18px;
}

.btn {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: var(--pink);
  border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 0 4px 0 var(--ink);
  padding: .7em 1.3em; cursor: pointer;
  transition: transform .06s ease;
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.btn.yellow { background: var(--yellow); color: var(--ink); }
.btn.cyan   { background: var(--cyan);   color: var(--ink); }
.btn.red    { background: var(--red); }
.btn.ghosted{ background: var(--panel); color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.big { font-size: 1.35rem; padding: .9em 1.6em; border-radius: 20px; }

input[type="text"], input[type="number"], select, textarea {
  font-family: var(--body); font-size: 1rem; color: var(--white);
  background: var(--space-2); border: 3px solid var(--panel-edge);
  border-radius: 12px; padding: .55em .8em; width: 100%;
}
input:focus-visible, select:focus-visible { outline: 3px solid var(--cyan); }

.pill {
  display:inline-block; font-size:.8rem; font-weight:600;
  background: var(--space-2); border: 2px solid var(--panel-edge);
  border-radius: 999px; padding: .25em .8em; color: var(--muted);
}

/* -------- crewmate states -------- */
.crewmate { display: block; }
.crewmate.ghost { opacity: .62; animation: floaty 2.6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.crewmate.ejected { filter: grayscale(1) brightness(.85); animation: tumble 6s linear infinite; }
@keyframes tumble { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.crewmate.deadface { filter: grayscale(.9) brightness(.8); }
@media (prefers-reduced-motion: reduce) {
  .crewmate.ghost, .crewmate.ejected { animation: none; }
}

/* -------- player state grid card -------- */
.pcard {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--panel); border: 3px solid var(--panel-edge);
  border-radius: 18px; padding: 12px 8px 10px;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.pcard .pname {
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard.is-dead .pname, .pcard.is-ejected .pname { color: var(--muted); text-decoration: none; }
.pcard.is-ejected { opacity: .55; }
.pcard.is-ejected .pname { text-decoration: line-through; }
.pcard.selected { outline: 4px solid var(--yellow); outline-offset: -1px; }

/* -------- full-screen overlay moments (TV) -------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; text-align: center; padding: 24px;
  background: rgba(7, 9, 18, .96);
}
.overlay.alert { animation: alertflash .5s steps(2) 6; }
@keyframes alertflash { 50% { background: rgba(120, 8, 30, .96); } }

.blackout { position: fixed; inset: 0; background: #000; z-index: 60; }

.countdown {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(3rem, 10vw, 7rem);
  color: var(--yellow);
  paint-order: stroke fill; -webkit-text-stroke: .12em var(--ink);
}
.countdown.hurry { color: var(--red); animation: pulse .6s ease infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }

.vote-squares { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.vote-squares .sq {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--space-2); border: 3px solid var(--panel-edge);
  transition: background .25s, border-color .25s;
}
.vote-squares .sq.filled { background: var(--muted); border-color: var(--white); }

.tally-row {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--display); font-weight: 700; font-size: 1.4rem;
}
.tally-row .dots { display: flex; gap: 8px; }
.tally-row .dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--ink);
  animation: thudin .18s ease backwards;
}
@keyframes thudin { from { transform: scale(2.4); opacity: 0; } }

.pulse-red { animation: dangerpulse 1s ease infinite; }
@keyframes dangerpulse { 50% { box-shadow: 0 0 0 10px rgba(255,51,85,.25), 0 0 30px rgba(255,51,85,.7); } }

/* utility */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grid { display: grid; gap: 12px; }
.center { text-align: center; align-items: center; justify-content: center; }
.grow { flex: 1; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

/* -------- shared taskbar (TV) -------- */
.taskbar {
  width: 100%; height: 30px; border-radius: 999px;
  background: var(--space-2); border: 3px solid var(--panel-edge);
  overflow: hidden; position: relative;
}
.taskbar .fill {
  height: 100%; width: 0%;
  background: linear-gradient(180deg, #6ff08b, #2fae4f 60%, #1f8f3d);
  border-radius: inherit;
  box-shadow: 0 0 14px rgba(80, 239, 105, .5);
  transition: width 1.2s ease;
}
.taskbar-label {
  font-family: var(--display); font-weight: 700; font-size: .85rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}

.pulse-new { animation: newround 1s ease 5; border-color: var(--yellow) !important; }
@keyframes newround { 50% { box-shadow: 0 0 0 8px rgba(255,201,67,.25), 0 6px 0 rgba(0,0,0,.35); transform: scale(1.02); } }

/* -------- floor-plan map (v2.13, static/map.js) -------- */
.floorbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.floorbtn { position: relative; display: flex; flex-direction: column; align-items: center;
            padding: .35em .2em .3em; line-height: 1; }
.floorbtn b { font-size: 1.35rem; }
.floorbtn small { font-size: .62rem; letter-spacing: .06em; margin-top: 2px; }
.floorbtn.active { background: var(--yellow); color: var(--ink); }
.floorbtn .badge { position: absolute; top: -9px; right: -6px; min-width: 22px; padding: 2px 5px;
                   font-style: normal; font-size: .72rem; border-radius: 999px; line-height: 1.1;
                   background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); }
.floorbtn .badge.red { background: var(--red); color: #fff; animation: pinflash .5s steps(2) infinite; }
.aumap-scroll { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 16px;
                background: #0d1024; border: 3px solid var(--panel-edge); }
.aumap { position: relative; margin: 0 auto; }
.aumap.tappable { cursor: crosshair; }
.aumap svg { display: block; width: 100%; height: 100%; }
.aumap-pins { position: absolute; inset: 0; pointer-events: none; }
.aupin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column;
         align-items: center; }
.aupin b { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
           justify-content: center; font-family: var(--display); font-weight: 800; font-size: .95rem;
           line-height: 1; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink);
           box-shadow: 0 2px 0 var(--ink); }
.aupin span { position: absolute; top: 100%; margin-top: 3px; font-size: .62rem; font-weight: 700;
              white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis;
              color: var(--white); background: rgba(16, 18, 43, .88); padding: 1px 6px; border-radius: 7px; }
.aupin.todo b { animation: pinbob 1.4s ease-in-out infinite; }
.aupin.done b { background: var(--muted); opacity: .8; }
.aupin.done span { opacity: .65; }
.aupin.crisis { z-index: 2; }
.aupin.crisis b { width: 32px; height: 32px; background: var(--red); color: #fff; font-size: 1.1rem;
                  animation: pinflash .5s steps(2) infinite; }
.aupin.crisis.fixed b { background: var(--green); color: var(--ink); animation: none; }
/* a task done in two places: its start pin is hollow (v2.16) */
.aupin.start b { background: var(--ink); color: var(--yellow); border-color: var(--yellow); }
.aupin.start.done b { color: var(--white); border-color: var(--muted); }
/* its two labels: "Start" / "Finish" on top, the task's full name underneath */
.aupin span.two { max-width: 190px; text-align: center; line-height: 1.2; padding: 2px 8px; border-radius: 9px; }
.aupin span.two em { display: block; font-style: normal; color: var(--yellow); }
.maplegend { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px;
             font-size: .74rem; color: var(--muted); }
.maplegend span { white-space: nowrap; }
.maplegend svg { width: 17px; height: 17px; vertical-align: -4px; margin-right: 4px; }
/* during O2/reactor the room holding each station flashes red, then goes green when fixed (v2.16) */
.aumap-zones { pointer-events: none; }
.aumap-zones polygon { stroke-width: 6; stroke-linejoin: round; }
.aumap-zones .alert { fill: #ff3b5c; stroke: #ff3b5c; animation: zoneflash .5s steps(2) infinite; }
.aumap-zones .fixed { fill: #3ddc84; stroke: #3ddc84; opacity: .55; }
@keyframes zoneflash { 0% { opacity: .75; } 50% { opacity: .2; } }
@keyframes pinbob { 50% { transform: translateY(-4px); } }
@keyframes pinflash { 50% { opacity: .35; transform: scale(1.18); } }
/* GM console: pins are tappable, coloured by this round's completions */
.gmmap .aupin { pointer-events: auto; cursor: pointer; }
.gmmap .aupin b { animation: none; }
.gmmap .aupin.none b { background: var(--red); color: #fff; }
.gmmap .aupin.some b { background: var(--yellow); }
.gmmap .aupin.all b { background: var(--green); }
.gmmap .aupin.idle b { background: var(--muted); }
.gmmap .aupin.cr b { border-radius: 9px; background: var(--cyan); }
.gmmap .aupin.cr.reactor b { background: #ffa94d; }
.gmmap .aupin.cr.guess b { border-style: dashed; }
.gmmap .aupin.cr.alert b { background: var(--red); color: #fff; animation: pinflash .5s steps(2) infinite; }
.gmmap .aupin.cr.fixedc b { background: var(--green); }
.gmmap .aupin.sel b { outline: 4px solid var(--yellow); outline-offset: 2px; transform: scale(1.15); }
.gmmap .aupin.sel span { color: var(--yellow); }
.pinrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px;
          border: 2px solid var(--panel-edge); cursor: pointer; }
.pinrow.sel { border-color: var(--yellow); background: rgba(255, 201, 67, .1); }
.pinrow .num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
               justify-content: center; font-family: var(--display); font-weight: 800; color: var(--ink);
               border: 3px solid var(--ink); background: var(--muted); }
.pinrow .num.none { background: var(--red); color: #fff; } .pinrow .num.some { background: var(--yellow); }
.pinrow .num.all { background: var(--green); } .pinrow .num.cr { border-radius: 8px; background: var(--cyan); }
.pinrow .num.cr.reactor { background: #ffa94d; }
.gmmap .aupin.start b, .pinrow .num.start { background: var(--ink); color: var(--yellow); border-color: var(--yellow); }
/* phone: full-screen map, like pressing Map in Among Us */
.mapov { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; gap: 10px;
         padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--space-0); }
.mapov.crisis { box-shadow: inset 0 0 0 4px var(--red); animation: alertborder 1s steps(2) infinite; }
@keyframes alertborder { 50% { box-shadow: inset 0 0 0 4px transparent; } }
.mapov .maphost { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; }
.mapov .maphost .aumap-scroll { width: 100%; }