* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: radial-gradient(circle at top, #233755, #03060b 65%);
  color: #f6f7ee;
  font-family: "Segoe UI", Arial, sans-serif;
}
body.playing { width: 100vw; height: 100dvh; overflow: hidden; }
body:not(.authenticated) .setup-card,
body:not(.playing) #live-screen,
body.playing .setup-card { display: none; }
body.authenticated .login-card { display: none; }
.card {
  width: min(92vw, 720px);
  margin: 5vh auto;
  padding: 24px;
  border: 1px solid #7a8eaa;
  border-radius: 18px;
  background: #101a28f2;
  box-shadow: 0 20px 70px #0008;
}
.login-card { width: min(92vw, 390px); margin-top: 12vh; }
.login-card form { display: grid; gap: 10px; }
.account, .actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
h1 { margin: 0 0 10px; }
h2 { margin: 22px 0 10px; color: #ffd75a; font-size: 17px; }
p, label { color: #bdc9d8; }
label { display: grid; gap: 6px; }
label input, label select { width: 100%; min-width: 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gift-map-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 54px 1fr 1fr;
  gap: 10px;
  align-items: end;
}
.gift-map-row img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border: 1px solid #526b8f;
  border-radius: 10px;
  background: #07111f;
}
.keyboard-guide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.keyboard-guide span {
  padding: 10px;
  border-radius: 9px;
  background: #07111f;
  color: #dce9f8;
}
kbd {
  padding: 2px 7px;
  border: 1px solid #7187a5;
  border-radius: 5px;
  background: #17283d;
  color: white;
  font: inherit;
  font-weight: 800;
}
input, select, button {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #526b8f;
  border-radius: 10px;
  background: #07111f;
  color: #f6f7ee;
  font: inherit;
}
button {
  cursor: pointer;
  border-color: #ffca43;
  background: linear-gradient(135deg, #ff9d24, #ffd84f);
  color: #231605;
  font-weight: 900;
}
button.secondary { background: #17283d; color: #eef6ff; border-color: #6985aa; }
.actions { justify-content: flex-start; margin-top: 20px; }
.status { margin-top: 12px; padding: 11px; border-radius: 10px; background: #07111f; color: #ffe477; }
.error { min-height: 22px; margin-top: 10px; color: #ff7d87; }

#live-screen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  background: #010204;
}
body.playing #live-screen { display: grid; }
.game-shell {
  display: grid;
  grid-template-rows: 27.5% 42.1875% 30.3125%;
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  overflow: hidden;
  background: #0a1018;
  box-shadow: 0 0 80px #000;
}
body.exact-unity .game-shell { grid-template-rows: 27.5% 72.5%; }
body.exact-unity .controls { display: none; }
.gift-area {
  min-height: 0;
  padding: max(12px, env(safe-area-inset-top)) 12px 10px;
  border-bottom: 2px solid #ffbc34;
  background: linear-gradient(#24354d, #111b29);
}
.gift-title {
  margin-bottom: 8px;
  color: #ffe679;
  text-align: center;
  font-weight: 1000;
  letter-spacing: .13em;
}
#trigger-guide {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 7px;
}
.trigger-card {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.trigger-card img {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.trigger-card span {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  overflow: hidden;
  padding: 3px 2px;
  transform: translateY(-50%);
  background: transparent;
  color: white;
  font-size: clamp(7px, 1.7vw, 11px);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-weight: 900;
  text-align: center;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  text-shadow: 0 1px 2px #000;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(#24354d, #111b29);
}
canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  aspect-ratio: 4 / 3;
  image-rendering: auto;
  touch-action: none;
}
canvas[hidden] { display: none; }
#unity-game {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  aspect-ratio: 8 / 5;
  border: 0;
  background: #000;
  overflow: hidden;
}
#unity-game[hidden] { display: none; }
.round, .reset {
  position: absolute;
  z-index: 3;
}
.controls, .controls * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.leave { top: 12px; left: 12px; }
.reset { top: 8px; right: 8px; max-width: calc(100% - 110px); min-height: 28px; padding: 4px 7px; font-size: 9px; }
#banner {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 74px;
  left: 74px;
  color: #fff5a6;
  font-weight: 1000;
  text-align: center;
  text-shadow: 2px 2px #000;
}
.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(#24354d, #111b29);
}
.control-group { display: flex; gap: 6px; }
.controls .round, .stage .round {
  position: static;
  width: clamp(40px, 7.5vw, 46px);
  height: clamp(40px, 7.5vw, 46px);
  min-height: 0;
  padding: 0;
  border: 2px solid #ffe06f;
  border-radius: 50%;
  background: #15243bd9;
  color: white;
  font-size: 20px;
  touch-action: none;
  user-select: none;
}
.stage .leave {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #17283dd9;
  font-size: 26px;
}
.controls .action-button { border-color: #78c7ff; font-size: 10px; }
.controls .shoot { background: #8b2d20; border-color: #ff8a6e; }
.controls .grenade { background: #5a4212; border-color: #ffd34e; }
.controls .duck { background: #243654; border-color: #8fc5ff; }

@media (max-width: 700px) {
  .card { padding: 16px; }
  .grid { grid-template-columns: 1fr; }
  .gift-map-row { grid-template-columns: 48px 1fr; }
  .gift-map-row label:last-child { grid-column: 2; }
  .actions { flex-direction: column; }
  .actions button { width: 100%; }
}
@media (max-width: 430px) {
  .gift-area { padding-right: 8px; padding-left: 8px; }
  #trigger-guide { gap: 5px; }
  .controls { gap: 4px; padding-right: 8px; padding-left: 8px; }
  .control-group { gap: 3px; }
  .controls .round { width: 38px; height: 38px; font-size: 13px; }
  .controls .action-button { font-size: 7px; }
}