/* Spy Teddy — cabinet styling.
   Palette: ink, plum panel, hot pink, mint, cream, amber. */

:root {
  --ink:    #14101f;
  --plum:   #241a33;
  --plum-2: #2f2144;
  --pink:   #ff3d7f;
  --mint:   #38e8b0;
  --cream:  #ffe9c9;
  --amber:  #ffb23f;
  --ui: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
}

body {
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px);
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.stage {
  width: min(1040px, 100%);
  padding: 24px 16px 64px;
}

.marquee { margin: 0 0 20px; }

.marquee h1 {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pink);
  text-shadow: 3px 3px 0 var(--plum-2), 6px 6px 0 rgba(0,0,0,.55);
}

.marquee__sub {
  margin: 4px 0 0;
  max-width: 52ch;
  color: #cbbcd8;
}

.cabinet {
  position: relative;
  background: var(--plum);
  border: 3px solid var(--pink);
  padding: 14px;
  display: flex;
  justify-content: center;
}

#screen {
  display: block;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 320 / 224;
  height: auto;
  image-rendering: pixelated;
  background: #000;
  touch-action: none;
}

/* Overlay panels sit on top of the screen */
.panel {
  position: absolute;
  inset: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 31, .93);
}

.panel.is-hidden { display: none; }

.panel__inner {
  width: min(420px, 92%);
  max-height: 100%;
  overflow-y: auto;
}

.panel h2 {
  margin: 0 0 12px;
  font-size: 1.35rem;
  color: var(--mint);
}

.field { margin-bottom: 12px; }

.field label {
  display: block;
  font-size: .85rem;
  color: #cbbcd8;
  margin-bottom: 4px;
}

input, select {
  width: 100%;
  padding: 9px 10px;
  background: var(--plum-2);
  color: var(--cream);
  border: 2px solid #4a3866;
  border-radius: 6px;
  font: inherit;
}

input:focus-visible, select:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.row { display: flex; gap: 8px; margin-top: 10px; }
.row--join #joinCode { flex: 0 0 96px; text-transform: uppercase; letter-spacing: .18em; }

.btn {
  flex: 1;
  padding: 11px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--plum-2);
  color: var(--cream);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover { background: #3b2a55; }
.btn--go { background: var(--pink); color: #23101a; }
.btn--go:hover { background: #ff5f95; }
.btn--quiet { flex: 0 0 96px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.rule { border: 0; border-top: 2px dashed #4a3866; margin: 18px 0; }

.msg { min-height: 1.4em; margin: 10px 0 0; color: var(--amber); font-size: .9rem; }
.hint { color: #cbbcd8; font-size: .85rem; margin: 0 0 10px; }

.players { list-style: none; margin: 0 0 6px; padding: 0; }

.players li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-left: 4px solid var(--slot, var(--mint));
  background: var(--plum-2);
  margin-bottom: 6px;
}

.code { color: var(--amber); letter-spacing: .22em; }

/* Status line and small tool buttons under the screen */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  margin-top: 6px;
}

.netstate {
  margin: 0;
  font-size: .8rem;
  color: #a694bd;
}

.toolbar__buttons { display: none; gap: 8px; }
.is-playing .toolbar__buttons { display: flex; }

.tool {
  width: 44px;
  height: 36px;
  border: 2px solid #4a3866;
  border-radius: 8px;
  background: var(--plum-2);
  color: var(--cream);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.tool:hover { background: #3b2a55; }
.tool.is-on { background: var(--amber); color: #23101a; border-color: var(--amber); }
.tool[hidden] { display: none; }
.tool:focus-visible, .pad__btn:focus-visible, .linkbtn:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* On-screen controls. Three layouts (data-layout on #pad): "gamepad" with a
   d-pad cross and round action buttons, "stick" with a touch pad, and "row"
   with plain buttons. .pad--lefty swaps the two sides. */
.pad {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.is-playing .pad { display: flex; flex-wrap: wrap; }
body:not(.touch) .pad__cluster { display: none !important; }

/* Weapon bar: every weapon one tap away, with the shots that are left. */
.wbar { display: none; gap: 6px; justify-content: center; margin-top: 8px; touch-action: none; user-select: none; -webkit-user-select: none; }
.is-playing .wbar { display: flex; }
.wbar__btn {
  position: relative;
  flex: 1 1 0;
  max-width: 76px;
  height: 46px;
  padding: 0;
  border: 2px solid #4a3866;
  border-radius: 10px;
  background: var(--plum-2);
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  touch-action: none;
}
.wbar__btn canvas { width: 28px; height: 28px; image-rendering: pixelated; pointer-events: none; vertical-align: middle; }
.wbar__n { position: absolute; right: 4px; bottom: 1px; font-size: .72rem; font-weight: 700; pointer-events: none; }
.wbar__l { position: absolute; left: 5px; top: 2px; font-size: .85rem; font-weight: 700; line-height: 1; color: var(--cream); pointer-events: none; }
.wbar__btn.is-active .wbar__l { color: var(--amber); }
.wbar__btn.is-top .wbar__l { color: #ffffff; text-shadow: 0 0 4px var(--amber); }
.wbar__btn.can-up::after {
  content: '+';
  position: absolute;
  right: -5px;
  top: -7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber);
  color: #23101a;
  font-size: .8rem;
  font-weight: 700;
  line-height: 16px;
  pointer-events: none;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.25); } }
.wbar__stars { align-self: center; min-width: 0; font-size: .85rem; font-weight: 700; color: var(--amber); white-space: nowrap; }
.wbar__stars.is-on { min-width: 34px; text-align: center; }
.wbar__btn.is-active { border-color: var(--pink); background: #4a2350; box-shadow: 0 0 0 2px rgba(255, 61, 127, .35); }
.wbar__btn.is-empty { opacity: .32; }
.wbar__btn.is-pressed { filter: brightness(1.3); }
.wbar__btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.pad--lefty { flex-direction: row-reverse; }

.pad__cluster { --size: min(46vw, 34vh, 220px); }

.pad__btn {
  padding: 0;
  border: 2px solid #5a4680;
  border-bottom-width: 6px;
  border-radius: 16px;
  background: #2f2144;
  color: var(--cream);
  font: inherit;
  font-weight: 700;
  font-size: clamp(1.3rem, 6vw, 2rem);
  line-height: 1;
  touch-action: none;
  cursor: pointer;
}

.pad__btn--drop, .pad__btn--up { color: #cbbcd8; }
.pad__btn--fire, .pad__btn--jump { font-size: clamp(.9rem, 4vw, 1.2rem); letter-spacing: .04em; }
.pad__btn--swap { font-size: clamp(.62rem, 2.6vw, .8rem); letter-spacing: .04em; color: #ffe0ee; background: #6e1a40; border-color: #c2356f; }
.pad__btn--jump { color: #10261f; background: var(--mint); border-color: #1a8265; }
.pad__btn--fire { color: #2a1a05; background: var(--amber); border-color: #a8690f; }

.pad__btn.is-pressed {
  border-bottom-width: 2px;
  transform: translateY(4px);
  filter: brightness(1.25);
}

.pad__stick { display: none; }

/* --- layout: gamepad ---------------------------------------------------- */
.pad[data-layout="gamepad"] .pad__cluster--move {
  display: grid;
  width: var(--size);
  height: var(--size);
  grid-template: "a up b" 1fr "left mid right" 1fr "c down d" 1fr / 1fr 1fr 1fr;
  gap: 4px;
  padding: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #2a1f3d 0 62%, transparent 63%);
}
.pad[data-layout="gamepad"] .pad__btn--up { grid-area: up; border-radius: 14px 14px 4px 4px; }
.pad[data-layout="gamepad"] .pad__btn--left { grid-area: left; border-radius: 14px 4px 4px 14px; }
.pad[data-layout="gamepad"] .pad__btn--right { grid-area: right; border-radius: 4px 14px 14px 4px; }
.pad[data-layout="gamepad"] .pad__btn--drop { grid-area: down; border-radius: 4px 4px 14px 14px; }
.pad[data-layout="gamepad"] .pad__cluster--move .pad__btn { font-size: clamp(1.1rem, 5vw, 1.7rem); border-bottom-width: 4px; }

/* Round action buttons, set diagonally like on a controller: the thumb
   rests on FIRE and rolls down to JUMP. */
.pad[data-layout="gamepad"] .pad__cluster--act,
.pad[data-layout="stick"] .pad__cluster--act {
  position: relative;
  width: var(--size);
  height: var(--size);
}
.pad[data-layout="gamepad"] .pad__cluster--act .pad__btn,
.pad[data-layout="stick"] .pad__cluster--act .pad__btn {
  position: absolute;
  width: 54%;
  height: 54%;
  border-radius: 50%;
}
.pad[data-layout="gamepad"] .pad__cluster--act .pad__btn--swap,
.pad[data-layout="stick"] .pad__cluster--act .pad__btn--swap { width: 36%; height: 36%; right: 2%; top: 0; border-bottom-width: 4px; }
.pad--lefty[data-layout="gamepad"] .pad__cluster--act .pad__btn--swap,
.pad--lefty[data-layout="stick"] .pad__cluster--act .pad__btn--swap { right: auto; left: 2%; }
.pad[data-layout="gamepad"] .pad__btn--fire,
.pad[data-layout="stick"] .pad__btn--fire { left: 0; top: 2%; }
.pad[data-layout="gamepad"] .pad__btn--jump,
.pad[data-layout="stick"] .pad__btn--jump { right: 0; bottom: 2%; }
.pad--lefty[data-layout="gamepad"] .pad__btn--fire,
.pad--lefty[data-layout="stick"] .pad__btn--fire { left: auto; right: 0; }
.pad--lefty[data-layout="gamepad"] .pad__btn--jump,
.pad--lefty[data-layout="stick"] .pad__btn--jump { right: auto; left: 0; }

/* --- layout: stick (touch pad) ------------------------------------------ */
.pad[data-layout="stick"] .pad__cluster--move { width: var(--size); height: var(--size); }
.pad[data-layout="stick"] .pad__cluster--move .pad__btn { display: none; }
.pad[data-layout="stick"] .pad__stick {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #5a4680;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 30%, rgba(90, 70, 128, .35) 31% 32%, transparent 33%),
    #241a33;
  touch-action: none;
}
.pad__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  margin: -21% 0 0 -21%;
  border-radius: 50%;
  border: 2px solid #8a6fc0;
  background: #4a3866;
  pointer-events: none;
}
.pad__stick.is-pressed .pad__knob { background: var(--pink); border-color: #ffd0e4; }

.tool--wide { width: auto; min-width: 58px; padding: 0 8px; font-size: .75rem; letter-spacing: .04em; }
.tool--touch { display: none; }
.touch .tool--touch { display: inline-block; }

.linkbtn {
  border: 0;
  padding: 0;
  background: none;
  color: var(--mint);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* "How to play" card shown before a game */
.btn--help { flex: 0 0 auto; }
.panel--help .panel__inner { width: min(760px, 96%); }
.panel--help:not(.is-hidden) .panel__inner { animation: flyout .28s ease-out; }
@keyframes flyout {
  from { transform: translateY(18px) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.help { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; }
.help__list { columns: 2; column-gap: 12px; }
.help__list li { break-inside: avoid; }
.panel--help .row { position: sticky; bottom: 0; }
.panel--help .panel__inner { width: min(900px, 97%); }
.help__card { background: var(--plum-2); border-top: 3px solid var(--pink); border-radius: 6px; padding: 10px 12px; }
.help__card:nth-child(2) { border-top-color: var(--mint); }
.help__card:nth-child(3) { border-top-color: var(--amber); }
.help__card h3 { margin: 0 0 6px; font-size: 1rem; color: var(--cream); }
.help__card p { margin: 0; font-size: .88rem; color: #dccfe8; }
.help__list { list-style: none; margin: 0 0 6px; padding: 0; font-size: .86rem; color: #dccfe8; }
.help__list li { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.help__list b { color: var(--cream); }
.help__icon { flex: 0 0 26px; width: 26px; height: 26px; image-rendering: pixelated; }
.help__card .help__note { font-size: .8rem; color: #b9a8cc; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .9rem; color: #cbbcd8; cursor: pointer; }
.check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--pink); flex: 0 0 auto; }
@media (max-width: 860px) { .help { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 520px) { .help__list { columns: 1; } }
/* Phones: the card gets the whole page and the start button stays in reach. */
@media (max-width: 680px) {
  .is-help .marquee { display: none; }
  .is-help .stage { padding-top: 6px; }
  .panel--help h2 { margin-bottom: 8px; font-size: 1.15rem; }
  .help__card { padding: 8px 10px; }
  .help__card h3 { margin-bottom: 2px; font-size: .95rem; }
  .help__card p, .help__list { font-size: .84rem; line-height: 1.4; }
  .help__list li { margin-bottom: 2px; }
  .help__icon { flex-basis: 22px; width: 22px; height: 22px; }
  .panel--help .check { margin-top: 8px; }
  .panel--help .row { position: sticky; bottom: 8px; }
}

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field.is-dim { opacity: .5; }

.controls { margin-top: 28px; }
.controls h2 { font-size: 1.1rem; color: var(--mint); margin: 0 0 8px; }

.controls table {
  border-collapse: collapse;
  width: min(560px, 100%);
  font-size: .9rem;
}

.controls th, .controls td {
  text-align: left;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid #3a2b52;
}

.controls th { color: #cbbcd8; font-weight: 600; }

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

/* Small screens: menus get the full width instead of sitting on the screen */
@media (max-width: 680px) {
  .stage { padding: 12px 10px 32px; }
  .marquee { margin-bottom: 12px; }
  .cabinet { padding: 8px; }
  body:not(.is-playing) #screen { display: none; }
  body:not(.is-playing) .panel { position: static; background: none; width: 100%; }
  .panel__inner { width: 100%; }
  .fields { grid-template-columns: 1fr; gap: 0; }
  input, select, .btn { min-height: 46px; font-size: 16px; }
}

/* Touch devices while a game runs: nothing but screen, status and buttons.
   The screen shrinks so that the buttons always stay inside the viewport. */
.touch.is-playing { overscroll-behavior: none; }
.touch.is-playing .marquee,
.touch.is-playing .controls { display: none; }
.touch.is-playing .stage { padding: 4px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
.touch.is-playing .cabinet { padding: 4px; border-width: 2px; }
.touch.is-playing #screen {
  width: min(100%, calc((100vh - 190px) * 320 / 224));
  width: min(100%, calc((100dvh - 190px) * 320 / 224));
}

@media (max-width: 480px) {
  .touch.is-playing .netstate { display: none; }
  .touch.is-playing .toolbar { justify-content: center; }
  .touch.is-playing .toolbar__buttons { gap: 6px; }
  .touch.is-playing .tool { width: 44px; }
  .touch.is-playing .tool--wide { width: auto; min-width: 54px; padding: 0 6px; }
}

/* Phones held sideways: the screen takes the full height and the controls
   move into the free space left and right of it. */
@media (orientation: landscape) and (max-height: 540px) {
  .touch.is-playing .stage { padding: 4px; width: 100%; }
  .touch.is-playing .cabinet { margin: 0 auto; width: fit-content; }
  .touch.is-playing #screen {
    width: min(calc(100vw - 316px), calc((100vh - 20px) * 320 / 224));
    width: min(calc(100vw - 316px), calc((100dvh - 20px) * 320 / 224));
  }
  .touch.is-playing .toolbar {
    position: fixed;
    top: 6px;
    right: calc(6px + env(safe-area-inset-right, 0px));
    margin: 0;
    flex-direction: column;
    align-items: flex-end;
    width: 142px;
  }
  .touch.is-playing .toolbar__buttons { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .touch.is-playing .tool { width: 42px; height: 34px; }
  .touch.is-playing .tool--wide { width: auto; }
  .touch.is-playing .pad { margin: 0; }
  .touch.is-playing .pad__cluster {
    --size: min(150px, 54vh);
    position: fixed;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .touch.is-playing .pad__cluster--move { left: calc(6px + env(safe-area-inset-left, 0px)); }
  .touch.is-playing .pad__cluster--act { right: calc(6px + env(safe-area-inset-right, 0px)); }
  .touch.is-playing .pad--lefty .pad__cluster--move { left: auto; right: calc(6px + env(safe-area-inset-right, 0px)); }
  .touch.is-playing .pad--lefty .pad__cluster--act { right: auto; left: calc(6px + env(safe-area-inset-left, 0px)); }
  /* Left-handed: the tools move away from the movement thumb. */
  .touch.is-playing:has(.pad--lefty) .toolbar { right: auto; left: calc(6px + env(safe-area-inset-left, 0px)); align-items: flex-start; }
  .touch.is-playing:has(.pad--lefty) .toolbar__buttons { justify-content: flex-start; }
  /* Weapons sit above the movement cluster, opposite the tool buttons. */
  .touch.is-playing .netstate { display: none; }
  .touch.is-playing .toolbar { width: 150px; }
  .touch.is-playing .tool, .touch.is-playing .tool--wide { width: 46px; min-width: 0; height: 34px; padding: 0; font-size: .68rem; }
  .touch.is-playing .wbar {
    position: fixed;
    width: 150px;
    flex-wrap: wrap;
    gap: 4px;
    bottom: calc(166px + env(safe-area-inset-bottom, 0px));
    left: calc(6px + env(safe-area-inset-left, 0px));
  }
  .touch.is-playing .wbar__btn { flex: 1 1 28%; height: 40px; max-width: none; }
  .touch.is-playing:has(.pad--lefty) .wbar { left: auto; right: calc(6px + env(safe-area-inset-right, 0px)); }
}

/* Ranking in the menu */
.ranking { margin-top: 16px; }
.ranking h3 { margin: 0 0 6px; font-size: .95rem; color: var(--mint); }
.ranking .players li { padding: 4px 10px; font-size: .88rem; }
.ranking[hidden] { display: none; }

/* Optional rules in the menu */
.opts { margin: 4px 0 6px; padding: 6px 10px 8px; border: 2px solid #4a3866; border-radius: 6px; }
.opts legend { padding: 0 4px; font-size: .85rem; color: #cbbcd8; }
.opts .check { margin-top: 4px; font-size: .88rem; }