* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  /* iOS Safari inflates text when rotated to landscape unless told not to */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #241a14;
  color: #f5e9da;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

/* ---------- Lobby ---------- */

#lobby {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(58, 42, 31, 0.55) 0%, rgba(24, 15, 10, 0.88) 75%),
    url("../assets/arena.jpg") center / cover no-repeat,
    #241a14;
}

/* The lobby is landscape-first: one wide two-column card, auto-scaled by
   main.js (zoom) so it ALWAYS fits the screen — no scrolling, no clipping. */
.card {
  width: 840px;
  max-width: none;
  flex-shrink: 0;
  background: #33261d;
  border: 1px solid #4a3728;
  border-radius: 22px;
  padding: 14px 24px 12px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.card h1 { font-size: 22px; margin-bottom: 0; }
.tag { font-size: 13px; margin-bottom: 12px; }

/* One device-specific fullscreen tip, impossible to miss, easy to dismiss. */
.fsTip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px auto 12px;
  padding: 8px 8px 8px 14px;
  max-width: 640px;
  background: #57422f;
  border: 2px solid #ff9a62;
  border-radius: 14px;
  color: #ffe3c2;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 0 0 4px rgba(255, 154, 98, 0.12);
}
.fsTip span { flex: 1; }
.fsTip b { color: #ffd9a0; }
.fsTip button {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  font-size: 13px;
  background: #241a12;
  color: #f5e9da;
  border: 2px solid #5a4432;
}

.homeCols {
  display: flex;
  gap: 28px;
  align-items: center;
}

.pickers { flex: 1.15; min-width: 0; }

.actions {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pickers .livesRow:last-child { margin-bottom: 0; }
#updateBtn { margin-bottom: 10px; }

.botMain {
  background: #3a2a4a;
  color: #d9c9f0;
}

.botRow {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.botRow button {
  flex: 1;
  padding: 11px 8px;
  border-radius: 14px;
  background: #241a12;
  border: 2px solid #5a4432;
  color: #c9b39e;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.card h1 {
  color: #ffe3c2;
}

.tag {
  color: #c9b39e;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  touch-action: manipulation; /* WebKit: no double-tap zoom on the target itself */
  color: #2b1a10;
  background: #ff9a62;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.08s, filter 0.15s;
}
button:active { transform: scale(0.96); filter: brightness(1.1); }
button:disabled { opacity: 0.55; cursor: default; }

button.big {
  width: 100%;
  padding: 12px 18px;
  font-size: 17px;
}

button.small {
  padding: 9px 22px;
  font-size: 14px;
  background: #57422f;
  color: #f5e9da;
  margin-top: 14px;
}

button.update {
  background: #7fc76f;
  margin-bottom: 14px;
}

.divider {
  margin: 8px 0;
  color: #8d745e;
  font-size: 14px;
}

.livesRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.livesRow span {
  color: #c9b39e;
  font-size: 15px;
  font-weight: 600;
}

#livesPicker {
  display: flex;
  gap: 6px;
}

#livesPicker button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #241a12;
  border: 2px solid #5a4432;
  color: #c9b39e;
  font-size: 16px;
  font-weight: 700;
}

#livesPicker button.sel {
  background: #ff9a62;
  border-color: #ff9a62;
  color: #2b1a10;
}

#modePicker {
  display: flex;
  flex-wrap: wrap;         /* five modes: let the row break cleanly */
  justify-content: flex-end;
  gap: 6px;
}

#modePicker button {
  padding: 9px 10px;
  border-radius: 12px;
  background: #241a12;
  border: 2px solid #5a4432;
  color: #c9b39e;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

#modePicker button.sel {
  background: #ff9a62;
  border-color: #ff9a62;
  color: #2b1a10;
}

#charPicker {
  display: flex;
  gap: 8px;
}

#charPicker button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 14px;
  background: #241a12;
  border: 2px solid #5a4432;
  color: #c9b39e;
  font-size: 14px;
  font-weight: 700;
}

#charPicker button img {
  height: 42px;
  width: auto;
}

#charPicker button.sel {
  background: #57422f;
  border-color: #ff9a62;
  color: #ffe3c2;
}

.joinRow {
  display: flex;
  gap: 10px;
}

.joinRow input {
  flex: 1;
  min-width: 0;
  background: #241a12;
  border: 2px solid #5a4432;
  border-radius: 14px;
  color: #ffe3c2;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 6px;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
  outline: none;
}
.joinRow input:focus { border-color: #ff9a62; }
.joinRow button.big { width: auto; padding: 12px 26px; }

.code {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 10px;
  color: #ffd9a0;
  margin: 12px 0 6px;
  text-indent: 10px; /* balance letter-spacing */
}

.status { color: #c9b39e; font-size: 14px; }

.status.pulse::after {
  content: "…";
  animation: dots 1.2s steps(4) infinite;
}

.error {
  margin-top: 16px;
  color: #ff8d7a;
  font-size: 14px;
}

.hint {
  margin-top: 10px;
  color: #8d745e;
  font-size: 11px;
  line-height: 1.55;
}

/* ---------- 🎮 Couch Party ---------- */

.couchMain { background: #7fc76f; color: #1f2e12; margin-top: 8px; }

.couchHead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 12px;
}
.couchHead h2 { color: #ffe3c2; font-size: 19px; flex: 1; text-align: left; }
.couchHead span { color: #c9b39e; font-size: 13px; font-weight: 600; }
#couchBack {
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  background: #241a12; border: 2px solid #5a4432; color: #ffd9a0; font-size: 20px;
}

#couchSeats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.seat {
  min-height: 200px;
  border-radius: 16px;
  padding: 10px 8px;
  background: #241a12;
  border: 2px dashed #5a4432;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #c9b39e;
  cursor: pointer;
}
.seat.seated { border-style: solid; border-color: #ff9a62; background: #2e2117; }
.seat.ready { border-style: solid; border-color: #7fc76f; background: #263320; }
.seat.locked { opacity: 0.4; cursor: default; }
.seat img { height: 92px; width: auto; pointer-events: none; }
.seatName { font-weight: 800; font-size: 15px; color: #ffe3c2; }
.seatWho { font-size: 12.5px; font-weight: 600; color: #f5e9da; }
.seatStatus {
  font-size: 12px; font-weight: 600; color: #c9b39e;
  text-align: center; line-height: 1.3; margin-top: auto;
}
.seat.ready .seatStatus { color: #7fc76f; font-size: 14px; }
.seatStatus.listening { color: #7fc76f; animation: dots 1.2s steps(4) infinite; }
.seatBtns { display: flex; gap: 6px; }
.seatBtns button {
  width: 38px; height: 30px; border-radius: 10px; padding: 0;
  background: #57422f; color: #f5e9da; font-size: 14px;
}
.seatBtns button.wide { width: auto; padding: 0 9px; font-size: 12px; }
.seatMap { font-size: 11px; font-weight: 600; color: #ffd9a0; white-space: nowrap; }
.seatTeam {
  width: auto; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; color: #f5e9da;
}
.seatTeam.t0 { background: #3b5a8a; }
.seatTeam.t1 { background: #8a3b3b; }
.seatTeam:disabled { opacity: 0.8; cursor: default; }
#couchTeamMode { margin-left: 8px; padding: 7px 12px; font-size: 12.5px; }

/* Gamepad menu navigation: the highlighted control */
.padFocus { outline: 4px solid #ffd9a0 !important; outline-offset: 3px; }

/* ---------- Game ---------- */

#game {
  position: fixed;
  inset: 0;
  display: block;
  touch-action: none;
}

@keyframes dots { to { width: 1.5em; } }

/* ---------- ⚙️ Settings ---------- */

#settingsBtn, #fsBtn {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #241a12;
  border: 2px solid #5a4432;
  font-size: 20px;
  padding: 0;
}
#fsBtn {
  right: auto;
  left: 12px;
  color: #ffd9a0;
  font-size: 22px;
}

.card { position: relative; }

#settingsPopup {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 8, 4, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.setPanel {
  width: 620px;
  max-width: 96vw;
  max-height: 92vh;
  overflow-y: auto;
  background: #241a12;
  border: 2px solid #5a4432;
  border-radius: 18px;
  padding: 14px 18px 16px;
}

.setHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.setHead h2 { color: #ffe3c2; font-size: 19px; }
#setClose, #soundToggle {
  width: 38px; height: 38px; border-radius: 50%;
  background: #57422f; color: #f5e9da; font-size: 16px; padding: 0;
}
#soundToggle { margin-right: 8px; background: #241a12; border: 2px solid #5a4432; }

#setTabs { display: flex; gap: 6px; margin-bottom: 12px; }
#setTabs button {
  flex: 1;
  padding: 9px 6px;
  border-radius: 12px;
  background: #180f09;
  border: 2px solid #5a4432;
  color: #c9b39e;
  font-size: 13px;
  font-weight: 700;
}
#setTabs button.sel { background: #ff9a62; border-color: #ff9a62; color: #2b1a10; }

.profTabs { display: flex; gap: 6px; margin-bottom: 6px; }
.profTabs button {
  flex: 1; padding: 7px 4px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  background: #180f09; border: 2px solid #5a4432; color: #c9b39e;
}
.profTabs button.sel { background: #57422f; border-color: #ff9a62; color: #ffe3c2; }

.padRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid #3a2b1e;
}
.padRow span { flex: 1; color: #f5e9da; font-size: 14px; font-weight: 600; }
.padRow b { color: #ffd9a0; font-size: 14px; min-width: 84px; text-align: center; }
.padRow b.listening { color: #7fc76f; animation: dots 1.2s steps(4) infinite; }
.padRow button {
  padding: 7px 14px; border-radius: 10px; font-size: 13px;
  background: #57422f; color: #f5e9da;
}

.setHint { color: #8d745e; font-size: 12.5px; margin: 10px 2px; line-height: 1.5; }
.setSmall {
  padding: 8px 16px; border-radius: 10px; font-size: 13px;
  background: #57422f; color: #f5e9da;
}
button.tut { background: #7fc76f; margin-top: 10px; }

#modeBriefList { display: flex; flex-wrap: wrap; gap: 6px; }
#modeBriefList button {
  padding: 8px 11px; border-radius: 11px; font-size: 13px; font-weight: 700;
  background: #180f09; border: 2px solid #5a4432; color: #c9b39e;
}
#modeBriefList button.sel { background: #57422f; border-color: #ff9a62; color: #ffe3c2; }
#briefPanel {
  margin-top: 10px; background: #180f09; border: 1px solid #3a2b1e;
  border-radius: 12px; padding: 10px 13px;
}
#briefPanel h3 { color: #ffd9a0; font-size: 15px; margin-bottom: 6px; }
#briefPanel p { color: #e8d9c5; font-size: 13.5px; line-height: 1.55; }

/* ---------- Pajama color picker (hold a character to open) ---------- */

#colorPopup {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 8, 4, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

#colorPopup.hidden { display: none; }

.colorPanel {
  background: #241a12;
  border: 2px solid #5a4432;
  border-radius: 18px;
  padding: 18px 22px;
  text-align: center;
}

.colorPanel h2 {
  color: #ffe3c2;
  font-size: 18px;
  margin-bottom: 14px;
}

#colorOptions {
  display: flex;
  gap: 10px;
}

#colorOptions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #180f09;
  border: 2px solid #5a4432;
  color: #c9b39e;
  font-size: 13px;
  font-weight: 700;
}

#colorOptions button img { height: 74px; width: auto; }

#colorOptions button.sel {
  background: #57422f;
  border-color: #ff9a62;
  color: #ffe3c2;
}

#charPicker button {
  /* Long-press opens the color picker: the browser must not turn the held
     touch into text selection, image callout, or a scroll (pointercancel). */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#charPicker button img,
#colorOptions button img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}