/* ============================================================
   Dominion HD Web — Main Stylesheet
   War-room computer aesthetic: neon on black, military/tech feel
   ============================================================ */

/* --- Fonts --- */
@font-face {
  font-family: 'Kremlin';
  src: url('/assets/fonts/kremlin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OCR-A';
  src: url('/assets/fonts/ocra10.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Color Palette (CSS custom properties) --- */
:root {
  --color-black: #000000;
  --color-dark-blue: #0a0a1a;
  --color-cyan: #66cccc;
  --color-red: #cc3333;
  --color-green: #5c8a2e;
  --color-amber: #cccc66;
  --color-white: #ffffff;
  --color-hud-bg: rgba(10, 10, 26, 0.75);
  --color-overlay-backdrop: rgba(0, 0, 0, 0.7);
  --font-title: 'Kremlin', 'Impact', sans-serif;
  --font-body: 'OCR-A', 'Courier New', monospace;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-x: hidden;
  background: var(--color-black);
  color: var(--color-cyan);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* --- App Container --- */
#app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* --- Canvas --- */
#gameCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Screen Overlays --- */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.hidden {
  display: none !important;
}

/* --- Main Menu --- */
#mainMenu {
  background: var(--color-black);
}

.menu-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.menu-world {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 70%;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

.menu-title {
  position: relative;
  z-index: 2;
  max-width: 500px;
  width: 60%;
  margin-bottom: 30px;
}

.menu-title-text {
  font-family: 'Kremlin', sans-serif;
  font-size: clamp(28px, 8vw, 64px);
  color: #e8d5a0;
  text-shadow: 0 3px 6px rgba(0,0,0,0.7), 0 0 20px rgba(200,170,80,0.4);
  letter-spacing: clamp(2px, 1vw, 6px);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 30px 0;
  padding: 0;
  max-width: 90vw;
  overflow: hidden;
}

.menu-buttons {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.menu-buttons .img-btn img {
  width: 220px;
  height: auto;
  max-height: none;
}

/* --- Image Buttons (original assets as backgrounds) --- */
.img-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-block;
  line-height: 0;
}

.img-btn img {
  display: block;
  height: auto;
  max-height: 48px;
}

.img-btn .img-btn-sel {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.img-btn:hover .img-btn-sel,
.img-btn:active .img-btn-sel {
  opacity: 1;
}

.img-btn:focus-visible {
  outline: 1px solid var(--color-cyan);
  outline-offset: 2px;
}

/* --- Screen Headers & Footers --- */
.screen-header {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px 30px;
  text-align: center;
}

.screen-header h2 {
  font-family: var(--font-title);
  font-size: 28px;
  color: var(--color-cyan);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.screen-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* --- Map Selection --- */
#mapSelect {
  background: var(--color-black);
}

.map-grid {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 900px;
  padding: 10px 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  overflow-y: auto;
  align-content: start;
}

.map-card {
  background: #111;
  border: 2px solid #333;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.map-card:hover {
  border-color: #666;
}

.map-card.selected {
  border-color: var(--color-cyan);
  box-shadow: 0 0 12px rgba(102, 204, 204, 0.4);
}

.map-card-preview {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #000;
}

.map-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-card-name {
  padding: 8px;
  text-align: center;
  font-size: 14px;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Game Setup --- */
#gameSetup {
  background: var(--color-black);
}

.setup-panel {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 700px;
  padding: 10px 30px;
  overflow-y: auto;
}

/* --- Settings --- */
#settingsScreen {
  background: var(--color-black);
}

.settings-panel {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 500px;
  padding: 10px 30px;
  overflow-y: auto;
}

/* --- In-Game HUD --- */
#gameHUD {
  pointer-events: none;
  z-index: 20;
}

#hudTopBar,
#hudBottomBar {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: auto;
}

#hudTopBar {
  top: 0;
}

#hudBottomBar {
  bottom: 0;
}

.hud-bar-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
}

.hud-top-content,
.hud-bottom-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  min-height: 48px;
}

#hudTurnInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 1;
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
}

#hudPlayerName {
  font-family: var(--font-title);
  font-size: 20px;
  letter-spacing: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  text-shadow: 0 0 8px currentColor;
}

#hudPhaseLabel {
  font-size: 13px;
  color: var(--color-amber);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
}

#hudTopActions {
  display: flex;
  align-items: center;
  gap: 4px;
}

#hudActionButtons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hud-burger-btn {
  display: none;
  font-size: 22px;
  color: var(--color-cyan);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

#hudTopActions {
  display: flex;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
}

#hudActionArea {
  display: flex;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
}

/* --- HUD Buttons --- */
.hud-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  pointer-events: auto;
  flex-shrink: 1;
  min-width: 0;
}

.hud-btn img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 100%;
}

.hud-btn:active img {
  opacity: 0.7;
}

/* --- Overlays (pause, dialogs) --- */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay-backdrop);
}

.overlay-panel {
  position: relative;
  z-index: 1;
  background: var(--color-dark-blue);
  border: 1px solid var(--color-cyan);
  padding: 30px 40px;
  min-width: 280px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  text-align: center;
  box-sizing: border-box;
}

@media screen and (max-width: 500px) {
  .overlay-panel {
    padding: 20px 16px;
    min-width: 0;
    max-width: 95vw;
    width: 95vw;
  }
}

.overlay-panel h2 {
  font-family: var(--font-title);
  font-size: 24px;
  color: var(--color-cyan);
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.overlay-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* --- General Text Styling --- */
h1, h2, h3 {
  font-family: var(--font-title);
  color: var(--color-cyan);
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-black);
}

::-webkit-scrollbar-thumb {
  background: var(--color-cyan);
  border-radius: 3px;
}

/* --- Landscape Orientation Lock Hint --- */
@media screen and (orientation: portrait) {
  /* In portrait, shift layout to still be usable but hint at landscape */
  .menu-title {
    width: 50%;
    max-width: 300px;
    margin-bottom: 20px;
  }

  .menu-buttons {
    gap: 8px;
  }

  .img-btn img {
    max-height: 40px;
  }

  .map-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 10px 16px;
  }

  .screen-header {
    padding: 15px 16px;
  }

  .screen-header h2 {
    font-size: 22px;
  }

  .screen-footer {
    padding: 15px 16px;
  }

  .setup-panel {
    padding: 10px 16px;
  }

  .lobby-section {
    padding: 16px;
    max-width: 100%;
  }

  .nickname-form {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hud-btn img {
    height: 24px;
  }

  .hud-top-content,
  .hud-bottom-content {
    padding: 4px 6px;
    min-height: 32px;
  }

  #hudPlayerName {
    font-size: 15px;
    letter-spacing: 2px;
  }

  #hudPhaseLabel {
    font-size: 11px;
  }

  /* Collapse action buttons into burger on mobile */
  #hudActionButtons {
    display: none;
  }

  #hudActionButtons.hud-actions-open {
    display: flex;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-dark-blue);
    border: 1px solid var(--color-cyan);
    padding: 4px;
    z-index: 100;
    flex-direction: column;
    gap: 4px;
  }

  .hud-burger-btn {
    display: block !important;
  }
}

/* --- Small screens (phones) --- */
@media screen and (max-height: 500px) {
  .menu-title {
    width: 40%;
    max-width: 300px;
    margin-bottom: 15px;
  }

  .menu-buttons {
    gap: 6px;
  }

  .img-btn img {
    max-height: 36px;
  }

  .screen-header h2 {
    font-size: 20px;
    padding: 10px 20px;
  }

  .screen-footer {
    padding: 10px 20px;
  }

  .overlay-panel {
    padding: 20px 24px;
  }
}

/* ============================================================
   Game Buttons (styled text buttons used in dialogs/HUD)
   ============================================================ */

.game-btn {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-cyan);
  background: rgba(102, 204, 204, 0.1);
  border: 1px solid var(--color-cyan);
  padding: 8px 18px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.game-btn:hover {
  background: rgba(102, 204, 204, 0.25);
}

.game-btn:active {
  background: rgba(102, 204, 204, 0.4);
}

.game-btn.btn-disabled,
.game-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   HUD Turn Number
   ============================================================ */

.hud-turn-number {
  font-size: 10px;
  color: rgba(102, 204, 204, 0.6);
  letter-spacing: 1px;
}

/* ============================================================
   Reinforce Bar (above bottom HUD during reinforce phase)
   ============================================================ */

.reinforce-bar {
  position: absolute;
  bottom: 56px;
  left: 0;
  width: 100%;
  pointer-events: auto;
  z-index: 25;
  animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.reinforce-bar-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 20px;
  background: var(--color-hud-bg);
  border-top: 1px solid rgba(102, 204, 204, 0.3);
  flex-wrap: wrap;
}

.reinforce-label {
  font-size: 12px;
  color: var(--color-amber);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.reinforce-count {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--color-white);
  min-width: 30px;
  text-align: center;
}

.reinforce-remaining {
  font-size: 11px;
  color: rgba(102, 204, 204, 0.6);
}

.star-trade-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid rgba(102, 204, 204, 0.2);
}

.star-icon {
  width: 20px;
  height: 20px;
}

.star-count {
  font-size: 14px;
  color: var(--color-amber);
  font-weight: bold;
}

.trade-stars-btn {
  font-size: 11px;
  padding: 4px 10px;
}

/* ============================================================
   Dialog Panel (wider for game dialogs)
   ============================================================ */

.dialog-panel-wide {
  min-width: min(340px, 95vw);
  max-width: min(520px, 95vw);
  overflow: hidden;
  box-sizing: border-box;
}

.dialog-content {
  text-align: center;
}

.dialog-content h2 {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--color-cyan);
  letter-spacing: 3px;
  margin-bottom: 16px;
}

.dialog-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

/* ============================================================
   Attack Dialog
   ============================================================ */

.attack-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.attack-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
}

.attacker-name,
.defender-name {
  font-family: var(--font-title);
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.attack-units-label {
  font-size: 12px;
  color: rgba(102, 204, 204, 0.7);
}

.attack-vs {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--color-amber);
  letter-spacing: 2px;
}

/* Dice selector buttons */
.dice-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.dice-selector-label {
  font-size: 12px;
  color: var(--color-amber);
  text-transform: uppercase;
  margin-right: 4px;
}

.dice-btn {
  padding: 4px;
  background: none;
  border: 1px solid transparent;
}

.dice-btn:hover:not(:disabled) {
  border-color: var(--color-cyan);
  background: rgba(102, 204, 204, 0.15);
}

.dice-btn-img {
  height: 36px;
  width: auto;
  display: block;
}

.dice-btn.btn-disabled .dice-btn-img,
.dice-btn:disabled .dice-btn-img {
  opacity: 0.3;
}

@media screen and (max-width: 500px) {
  .dice-btn-img {
    height: 28px;
  }
  .dice-btn {
    padding: 2px;
  }
  .dice-selector {
    gap: 2px;
  }
}

/* Dice display area */
.dice-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  min-height: 50px;
}

.dice-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.dice-vs {
  font-family: var(--font-title);
  font-size: 12px;
  color: var(--color-amber);
  letter-spacing: 2px;
}

/* ============================================================
   CSS Dice Faces
   ============================================================ */

.die {
  --die-color: #66cccc;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: var(--die-color);
  display: grid;
  padding: 6px;
  position: relative;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: dieAppear 0.3s ease-out;
}

@keyframes dieAppear {
  from { transform: scale(0.5) rotate(90deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);    opacity: 1; }
}

.die-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

/* Die face layouts using CSS grid */
.die-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}

.die-2 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}
.die-2 .die-dot:nth-child(1) { justify-self: end; align-self: start; }
.die-2 .die-dot:nth-child(2) { justify-self: start; align-self: end; }

.die-3 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.die-3 .die-dot:nth-child(1) { justify-self: end; align-self: start; }
.die-3 .die-dot:nth-child(2) { justify-self: center; align-self: center; }
.die-3 .die-dot:nth-child(3) { justify-self: start; align-self: end; }

.die-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
}

.die-5 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.die-5 .die-dot:nth-child(1) { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; }
.die-5 .die-dot:nth-child(2) { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
.die-5 .die-dot:nth-child(3) { grid-column: 2; grid-row: 2; justify-self: center; align-self: center; }
.die-5 .die-dot:nth-child(4) { grid-column: 1; grid-row: 3; justify-self: start; align-self: end; }
.die-5 .die-dot:nth-child(5) { grid-column: 3; grid-row: 3; justify-self: end; align-self: end; }

.die-6 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  place-items: center;
}

/* ============================================================
   Attack Result Text
   ============================================================ */

.attack-result-text {
  font-size: 13px;
  color: var(--color-cyan);
  min-height: 20px;
  margin-bottom: 8px;
}

.attack-result-text.result-captured {
  color: var(--color-amber);
  font-family: var(--font-title);
  font-size: 16px;
  letter-spacing: 2px;
  animation: captureFlash 0.6s ease-out;
}

@keyframes captureFlash {
  0%   { color: var(--color-white); text-shadow: 0 0 20px var(--color-amber); }
  100% { color: var(--color-amber); text-shadow: none; }
}

/* Retreat button */
.retreat-btn {
  color: var(--color-red);
  border-color: var(--color-red);
  background: rgba(204, 51, 51, 0.1);
}
.retreat-btn:hover {
  background: rgba(204, 51, 51, 0.25);
}

/* ============================================================
   Capture Move Panel (after territory capture)
   ============================================================ */

.capture-move-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(102, 204, 204, 0.2);
}

.capture-move-label {
  display: block;
  font-size: 12px;
  color: var(--color-amber);
  margin-bottom: 8px;
}

/* Counter controls (+/- buttons with number) */
.counter-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.counter-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.move-count,
.fortify-count {
  font-family: var(--font-title);
  font-size: 20px;
  color: var(--color-white);
  min-width: 30px;
  text-align: center;
}

.counter-separator {
  font-size: 14px;
  color: rgba(102, 204, 204, 0.4);
}

.move-max,
.fortify-max {
  font-size: 14px;
  color: rgba(102, 204, 204, 0.5);
  min-width: 20px;
}

/* ============================================================
   Fortify Dialog
   ============================================================ */

.fortify-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}

.fortify-label {
  font-size: 12px;
  color: rgba(102, 204, 204, 0.7);
}

.region-label {
  font-family: var(--font-title);
  font-size: 16px;
  color: var(--color-cyan);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.fortify-controls {
  margin-bottom: 16px;
}

.fortify-confirm {
  color: var(--color-green);
  border-color: var(--color-green);
  background: rgba(92, 138, 46, 0.1);
}
.fortify-confirm:hover {
  background: rgba(92, 138, 46, 0.25);
}

/* ============================================================
   End of Turn Dialog
   ============================================================ */

.end-turn-captured {
  font-size: 13px;
  color: var(--color-amber);
  margin-bottom: 12px;
}

.objective-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.obj-btn {
  font-size: 12px;
  padding: 6px 12px;
  text-align: left;
}

.invasion-bonus-btn {
  margin-bottom: 12px;
  color: var(--color-amber);
  border-color: var(--color-amber);
  background: rgba(204, 204, 102, 0.1);
}
.invasion-bonus-btn:hover {
  background: rgba(204, 204, 102, 0.25);
}

.bonus-result {
  font-size: 13px;
  color: var(--color-amber);
  margin-bottom: 12px;
}

.end-turn-btn {
  min-width: 120px;
}

/* ============================================================
   Game Over Overlay
   ============================================================ */

.gameover-panel {
  text-align: center;
  min-width: 300px;
}

.gameover-title {
  font-family: var(--font-title);
  font-size: 36px;
  letter-spacing: 6px;
  margin-bottom: 12px;
}

.gameover-winner {
  font-family: var(--font-title);
  font-size: 20px;
  margin-bottom: 24px;
  letter-spacing: 2px;
}

.gameover-panel .overlay-buttons {
  flex-direction: row;
  justify-content: center;
}

/* ============================================================
   Dialog show/hide transitions
   ============================================================ */

.overlay:not(.hidden) {
  animation: overlayFadeIn 0.2s ease-out;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.overlay:not(.hidden) .overlay-panel,
.overlay:not(.hidden) .dialog-panel-wide {
  animation: dialogSlideIn 0.25s ease-out;
}

@keyframes dialogSlideIn {
  from { transform: translateY(-20px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1);        opacity: 1; }
}

/* ============================================================
   Selection info in HUD
   ============================================================ */

.hud-selection-info {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--color-cyan);
}

.hud-selection-info span {
  white-space: nowrap;
}

/* ============================================================
   Safe area insets for notched devices
   ============================================================ */

@supports (padding: env(safe-area-inset-left)) {
  .hud-top-content,
  .hud-bottom-content {
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }

  #hudTopBar {
    padding-top: env(safe-area-inset-top);
  }

  #hudBottomBar {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================================
   Online Lobby
   ============================================================ */

#onlineLobby {
  background: var(--color-black);
  z-index: 10;
}

.lobby-section {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 600px;
  padding: 20px;
}

.lobby-section h2 {
  font-family: var(--font-title);
  font-size: 28px;
  color: var(--color-cyan);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.lobby-subtitle {
  font-size: 12px;
  color: rgba(102, 204, 204, 0.6);
  letter-spacing: 1px;
}

/* --- Nickname Form --- */

.nickname-form {
  display: flex;
  gap: 12px;
  align-items: center;
}

.lobby-input {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-cyan);
  background: rgba(102, 204, 204, 0.05);
  border: 1px solid var(--color-cyan);
  padding: 10px 16px;
  min-width: min(240px, 60vw);
  outline: none;
  letter-spacing: 1px;
}

.lobby-input::placeholder {
  color: rgba(102, 204, 204, 0.3);
}

.lobby-input:focus {
  border-color: var(--color-white);
  background: rgba(102, 204, 204, 0.1);
  box-shadow: 0 0 8px rgba(102, 204, 204, 0.2);
}

/* --- Auth Forms --- */

.auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 300px;
}

.auth-option-btn {
  font-size: 14px;
  padding: 12px 24px;
  letter-spacing: 2px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 360px;
}

.auth-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-hint {
  font-size: 10px;
  color: rgba(102, 204, 204, 0.4);
  line-height: 1.3;
  margin-top: 2px;
}

.auth-error {
  font-size: 12px;
  color: #ff6b6b;
  background: rgba(220, 50, 50, 0.15);
  padding: 8px 12px;
  border: 1px solid rgba(220, 50, 50, 0.3);
  text-align: center;
}

.auth-message {
  font-size: 12px;
  padding: 8px 12px;
  text-align: center;
}

.auth-message-success {
  color: #6bff6b;
  background: rgba(50, 180, 50, 0.15);
  border: 1px solid rgba(50, 180, 50, 0.3);
}

.auth-message-error {
  color: #ff6b6b;
  background: rgba(220, 50, 50, 0.15);
  border: 1px solid rgba(220, 50, 50, 0.3);
}

.lobby-text-link {
  font-size: 11px;
  color: rgba(102, 204, 204, 0.5);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px;
}

.lobby-text-link:hover {
  color: var(--color-cyan);
}

/* --- Pause Menu Guest Register --- */

.pause-register-btn {
  font-size: 11px;
  padding: 8px 16px;
  color: var(--color-amber);
  border-color: var(--color-amber);
  background: rgba(200, 168, 78, 0.1);
  letter-spacing: 1px;
}

.pause-register-btn:hover {
  background: rgba(200, 168, 78, 0.2);
}

/* --- Upgrade Overlay --- */

.upgrade-subtitle {
  font-size: 12px;
  color: rgba(102, 204, 204, 0.6);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.lobby-back-link {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(102, 204, 204, 0.5);
  border-color: rgba(102, 204, 204, 0.3);
  background: transparent;
}

.lobby-back-link:hover {
  color: var(--color-cyan);
  border-color: var(--color-cyan);
}

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

.lobby-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.lobby-select {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-cyan);
  background: rgba(102, 204, 204, 0.05);
  border: 1px solid rgba(102, 204, 204, 0.4);
  padding: 6px 12px;
  outline: none;
}

.lobby-select option {
  background: var(--color-dark-blue);
  color: var(--color-cyan);
}

/* --- Create Game Options --- */

.create-game-options {
  width: 100%;
  max-width: 400px;
}

.create-game-options .setup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(102, 204, 204, 0.1);
}

.create-game-options label {
  font-size: 13px;
  color: var(--color-amber);
  text-transform: uppercase;
  letter-spacing: 1px;
}

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

.game-list-container {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  margin: 8px 0;
}

.game-list-empty {
  text-align: center;
  padding: 30px 20px;
  color: rgba(102, 204, 204, 0.4);
  font-size: 13px;
}

.game-list-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border: 1px solid rgba(102, 204, 204, 0.2);
  margin-bottom: 6px;
  background: rgba(102, 204, 204, 0.03);
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-wrap: wrap;
  gap: 6px;
}

.game-list-card:hover {
  background: rgba(102, 204, 204, 0.08);
  border-color: rgba(102, 204, 204, 0.4);
}

.game-list-info {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.game-list-map {
  font-family: var(--font-title);
  font-size: 14px;
  color: var(--color-cyan);
  letter-spacing: 1px;
}

.game-list-mode {
  font-size: 11px;
  color: var(--color-amber);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.game-list-players {
  font-size: 12px;
  color: rgba(102, 204, 204, 0.7);
}

.game-list-host {
  font-size: 11px;
  color: rgba(102, 204, 204, 0.5);
}

.game-list-join-btn {
  font-size: 11px;
  padding: 6px 14px;
}

/* --- My Games Section --- */

.my-games-section {
  width: 100%;
  margin-bottom: 16px;
}

.my-games-title {
  font-family: var(--font-title);
  font-size: 16px;
  color: var(--color-amber);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.my-games-list {
  max-height: 140px;
  overflow-y: auto;
  margin-bottom: 12px;
  border: 1px solid rgba(200, 168, 78, 0.2);
}

.lobby-section-title {
  font-family: var(--font-title);
  font-size: 16px;
  color: var(--color-cyan);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.game-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border: 1px solid rgba(102, 204, 204, 0.2);
  margin-bottom: 6px;
  background: rgba(102, 204, 204, 0.03);
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-wrap: wrap;
  gap: 6px;
}

.game-card:hover {
  background: rgba(102, 204, 204, 0.08);
  border-color: rgba(102, 204, 204, 0.4);
}

.game-card-info {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.game-card-map {
  font-family: var(--font-title);
  font-size: 14px;
  color: var(--color-cyan);
  letter-spacing: 1px;
}

.game-card-mode {
  font-size: 11px;
  color: var(--color-amber);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.game-card-players {
  font-size: 12px;
  color: rgba(102, 204, 204, 0.7);
}

.game-card-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.my-game-card {
  border-left: 3px solid var(--color-amber);
}

.game-card-rejoin-btn {
  font-size: 11px;
  padding: 4px 12px;
  white-space: nowrap;
}

.game-card-time {
  font-size: 10px;
  color: rgba(102, 204, 204, 0.4);
}

.status-waiting {
  color: var(--color-amber);
}

.status-active {
  color: #6bff6b;
}

/* --- Waiting Room --- */

.waiting-game-info {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: var(--color-amber);
  letter-spacing: 1px;
}

.waiting-player-list {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.waiting-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(102, 204, 204, 0.15);
  background: rgba(102, 204, 204, 0.03);
}

.waiting-player-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.waiting-player-name {
  font-size: 14px;
  color: var(--color-cyan);
  letter-spacing: 1px;
}

.waiting-player-host {
  font-size: 10px;
  color: var(--color-amber);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: auto;
}

.waiting-info {
  font-size: 12px;
  color: rgba(102, 204, 204, 0.5);
  letter-spacing: 1px;
  animation: waitingPulse 2s ease-in-out infinite;
}

@keyframes waitingPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* --- Connection Status Indicator --- */

.connection-status {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-hud-bg);
  border: 1px solid rgba(102, 204, 204, 0.3);
  font-size: 11px;
  letter-spacing: 1px;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.connection-text {
  color: rgba(102, 204, 204, 0.7);
}

.connection-connected .connection-dot {
  background: #44cc44;
  box-shadow: 0 0 6px #44cc44;
}

.connection-connecting .connection-dot {
  background: var(--color-amber);
  box-shadow: 0 0 6px var(--color-amber);
  animation: connectionBlink 1s ease-in-out infinite;
}

.connection-disconnected .connection-dot {
  background: var(--color-red);
  box-shadow: 0 0 6px var(--color-red);
}

@keyframes connectionBlink {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* --- Reconnection Overlay --- */

.reconnect-panel {
  text-align: center;
}

.reconnect-spinner {
  width: 40px;
  height: 40px;
  margin: 16px auto;
  border: 3px solid rgba(102, 204, 204, 0.2);
  border-top-color: var(--color-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.reconnect-text {
  font-size: 14px;
  color: var(--color-cyan);
  margin-bottom: 8px;
}

.reconnect-attempt {
  font-size: 11px;
  color: rgba(102, 204, 204, 0.5);
  margin-bottom: 16px;
}

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

.manager-corner-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(102, 204, 204, 0.08);
  border: 1px solid rgba(102, 204, 204, 0.2);
  color: rgba(102, 204, 204, 0.4);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 10px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s ease;
  z-index: 10;
}
.manager-corner-btn:hover {
  color: var(--color-cyan);
  border-color: var(--color-cyan);
  background: rgba(102, 204, 204, 0.15);
}

.music-toggle-btn {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(102, 204, 204, 0.08);
  border: 1px solid rgba(102, 204, 204, 0.2);
  color: rgba(102, 204, 204, 0.6);
  font-size: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  line-height: 1;
}
.music-toggle-btn:hover {
  color: var(--color-cyan);
  border-color: var(--color-cyan);
  background: rgba(102, 204, 204, 0.15);
}
.music-toggle-btn.muted {
  opacity: 0.4;
}

.manager-panel {
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.manager-auth {
  text-align: center;
}

.manager-subtitle {
  font-size: 12px;
  color: rgba(102, 204, 204, 0.6);
  margin-bottom: 12px;
}

.manager-input {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(102, 204, 204, 0.3);
  color: var(--color-cyan);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 14px;
  width: 200px;
  text-align: center;
  outline: none;
}
.manager-input:focus {
  border-color: var(--color-cyan);
}

.manager-auth-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.manager-error {
  color: var(--color-red);
  font-size: 11px;
  margin-top: 8px;
}

.manager-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.manager-filter {
  font-size: 12px;
  padding: 4px 8px;
}

.manager-toolbar-btn {
  font-size: 10px;
  padding: 5px 12px;
}

.manager-danger-btn {
  border-color: rgba(204, 51, 51, 0.5);
  color: var(--color-red);
}
.manager-danger-btn:hover {
  border-color: var(--color-red);
  background: rgba(204, 51, 51, 0.15);
}

.manager-game-list {
  max-height: 45vh;
  overflow-y: auto;
}

.manager-game-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid rgba(102, 204, 204, 0.15);
  margin-bottom: 4px;
  background: rgba(102, 204, 204, 0.02);
  font-size: 12px;
  gap: 10px;
  flex-wrap: wrap;
}

.manager-game-card .game-id {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(102, 204, 204, 0.35);
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manager-game-card .game-map {
  color: var(--color-cyan);
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 1px;
  min-width: 100px;
}

.manager-game-card .game-mode {
  color: var(--color-amber);
  font-size: 10px;
  text-transform: uppercase;
  min-width: 60px;
}

.manager-game-card .game-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 55px;
}

.manager-game-card .game-status.status-waiting {
  color: var(--color-amber);
}
.manager-game-card .game-status.status-active {
  color: var(--color-green);
}
.manager-game-card .game-status.status-finished {
  color: rgba(102, 204, 204, 0.4);
}

.manager-game-card .game-players {
  color: rgba(102, 204, 204, 0.6);
  font-size: 11px;
  min-width: 40px;
}

.manager-game-card .game-date {
  color: rgba(102, 204, 204, 0.35);
  font-size: 10px;
  min-width: 70px;
}

.manager-game-card .game-delete-btn {
  font-size: 9px;
  padding: 3px 10px;
  border-color: rgba(204, 51, 51, 0.4);
  color: var(--color-red);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  letter-spacing: 1px;
}
.manager-game-card .game-delete-btn:hover {
  border-color: var(--color-red);
  background: rgba(204, 51, 51, 0.15);
}

.manager-stats {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(102, 204, 204, 0.5);
  text-align: center;
}

/* --- PIN Gate --- */

.pin-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

.pin-display {
  width: 180px;
  height: 36px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(102, 204, 204, 0.3);
  border-radius: 4px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
}

.pin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-cyan);
  opacity: 0.9;
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 8px;
}

.pin-key {
  width: 64px;
  height: 52px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(102, 204, 204, 0.3);
  border-radius: 6px;
  color: var(--color-cyan);
  font-family: var(--font-body);
  font-size: 22px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-key:active {
  background: rgba(102, 204, 204, 0.2);
  transform: scale(0.95);
}

.pin-key-empty {
  visibility: hidden;
}

.pin-key-del {
  font-size: 18px;
}

.pin-shake {
  animation: pinShake 0.4s ease;
}

@keyframes pinShake {
  0%, 100% { transform: translate(-50%, -50%); }
  20% { transform: translate(calc(-50% + 10px), -50%); }
  40% { transform: translate(calc(-50% - 10px), -50%); }
  60% { transform: translate(calc(-50% + 6px), -50%); }
  80% { transform: translate(calc(-50% - 4px), -50%); }
}