/**
 * PAIRS - Core Structural Layout (Shared by all skins)
 * This file dictates ONLY structure (flex, grid, layout, padding, margin, position).
 * It MUST NOT contain any colors, borders, or font-families to allow skins to swap cleanly.
 */

body {
  margin: 0; padding: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

.screen-container {
  width: 100%; height: calc(100dvh - 56px); /* 56px is standard header height */
  display: flex; flex-direction: column;
  max-width: 390px; margin: 0 auto;
  position: relative; overflow: hidden;
  box-sizing: border-box;
}

.view {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: absolute; top: 0; left: 0;
  text-align: center;
  box-sizing: border-box;
}

.hidden { display: none !important; }

/* --- APP HEADER --- */
.app-header { padding: 10px; width: 100%; box-sizing: border-box; }
.app-logo-container {
  display: flex; flex-direction: column; line-height: 1.2; text-decoration: none;
}
.logo-game { margin-top: 2px; }

/* --- TITLE VIEW --- */
#title-screen { padding: 20px; }
.lang-selector-retro { position: absolute; top: 20px; display: flex; gap: 8px; justify-content: center; width: 100%; }
.lang-btn { cursor: pointer; padding: 4px 8px; }
.title-main-area { margin-bottom: 1.5rem; width: 100%; display: flex; flex-direction: column; align-items: center; }
.game-title { margin: 0 0 1rem 0; }
.menu-list { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: 100%; }
.main-menu-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; width: 100%; align-items: center; }
.menu-item { cursor: pointer; padding: 5px; }

/* --- SETTINGS STRUCTURE --- */
.settings-container { margin-top: 0.5rem; width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; }
/* Fixed label column + fixed control column so gauge icons of different
   counts (5 stars vs 3 zaps) and selects all share the same left edge. */
.option-row {
  display: grid; grid-template-columns: 76px 200px;
  column-gap: 14px; align-items: center; justify-content: center;
  margin-bottom: 10px; width: 100%;
}
.option-row .sl { text-align: right; min-width: 0; }
.option-row .gauge-group { justify-content: flex-start; }
.option-row .lv-band { grid-column: 2; text-align: left; font-size: 11px; opacity: 0.75; min-height: 13px; }
.option-row .retro-select, .option-row .sound-toggle { width: 100%; max-width: none; box-sizing: border-box; }
.gauge-group { display: flex; gap: 10px; align-items: center; }
.gauge-btn { cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.gauge-btn svg { width: 20px; height: 20px; stroke-width: 2.5px; }
.sl { min-width: 70px; text-align: right; display: inline-block; }

/* --- LARGE SETUP MODAL --- */
#online-setup { display: flex; align-items: center; justify-content: center; padding: 5px; z-index: 100; }
.large-modal {
  width: 98%; height: auto; max-height: 98%;
  display: flex; flex-direction: column;
  padding: 15px; box-sizing: border-box; overflow: hidden;
}
.modal-title { margin-bottom: 15px; text-align: center; }
.setup-grid { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.setup-section-title { padding: 4px 10px; margin: 8px 0 5px 0; text-align: left; }
.setup-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 0 10px; }
.setup-row .sl { text-align: left; min-width: 80px; }
.retro-select { padding: 4px 8px; outline: none; flex: 1; max-width: 180px; }
.room-id-area { padding-top: 10px; margin-top: 10px; text-align: center; }
.retro-input { padding: 8px; text-align: center; width: 100%; margin-bottom: 10px; box-sizing: border-box; }
.modal-actions { display: flex; gap: 15px; justify-content: center; width: 100%; }
.btn-retro { padding: 10px 20px; cursor: pointer; }
.mini-btn { padding: 8px 15px; margin-top: 10px; align-self: center; }
.footer-info { position: absolute; bottom: 10px; opacity: 0.7; }

/* --- GAME BOARD STRUCTURE --- */
.hud { width: 100%; padding: 12px; flex-shrink: 0; box-sizing: border-box; }
.hud-top { display: flex; justify-content: space-between; align-items: stretch; width: 100%; margin-bottom: 5px; }
.p-panel { display: flex; flex-direction: column; align-items: center; }
.p-panel.solo-hidden { visibility: hidden; }
.p-name { margin-bottom: 5px; }
.hud-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; }
.game-timer { font-variant-numeric: tabular-nums; }
.combo-indicator { font-size: 0.8em; }
.combo-indicator.pulse { animation: comboPulse 0.3s ease-out; }
@keyframes comboPulse { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
.item-btn { cursor: pointer; margin-top: 4px; padding: 2px 8px; }
.item-btn:disabled { opacity: 0.4; cursor: default; }
.message-box { width: 100%; padding: 8px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }

.board-area { flex: 1; width: 100%; padding: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; position: relative; }
.board { display: grid; gap: 6px; width: 100%; height: 100%; max-width: 360px; max-height: 100%; }

/* 3D tilted "card carpet" view.
   NOTE: the board must stay flattened (no preserve-3d) — tilting with
   preserve-3d breaks browser hit-testing so taps fall through to the grid. */
.board-area.view-3d { perspective: 900px; }
.board-area.view-3d .board { transform: rotateX(13deg); }

.board.shake { animation: boardShake 0.35s; }
@keyframes boardShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* Floating score popup */
.score-pop { position: absolute; z-index: 6; pointer-events: none; font-weight: bold; animation: scorePop 0.9s ease-out forwards; }
@keyframes scorePop {
  0% { transform: translate(-50%, -40%) scale(0.7); opacity: 0; }
  20% { transform: translate(-50%, -70%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(1); opacity: 0; }
}

/* --- CARD LOGIC --- */
.card-scene { width: 100%; height: 100%; perspective: 600px; }
.card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.4s; cursor: pointer; }
.card.is-flipped { transform: rotateY(180deg); }
/* Territory capture: matched cards stay on board, tinted by owner */
.card.is-matched { pointer-events: none; transform: rotateY(180deg); animation: capturePop 0.5s ease; }
@keyframes capturePop { 0% { transform: rotateY(180deg) scale(1); } 40% { transform: rotateY(180deg) scale(1.12); } 100% { transform: rotateY(180deg) scale(1); } }
.card.is-matched .card-back::after { content: ""; position: absolute; inset: 0; background: var(--capture-color, transparent); opacity: 0.38; pointer-events: none; }
.card.is-matched.owner-0 { --capture-color: var(--p1-color, #2979ff); }
.card.is-matched.owner-1 { --capture-color: var(--p2-color, #ff1744); }
.card.is-matched .card-back { box-shadow: inset 0 0 0 2px var(--capture-color, transparent); }
.card.is-locked { cursor: not-allowed; }
.card.is-locked .card-front { filter: grayscale(0.9) brightness(0.55); }
.card.is-locked .card-front::before { content: "🔒"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 2; }
.card-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 2px; box-sizing: border-box; }
.card-back { transform: rotateY(180deg); }
.concept-text { word-break: break-all; overflow-wrap: anywhere; text-align: center; width: 100%; display: block; }

/* --- GAME TOP BAR (control strip: quit left / sound right) --- */
.game-topbar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; box-sizing: border-box; flex-shrink: 0; }
.topbar-btn { cursor: pointer; padding: 4px 12px; line-height: 1.4; }
.topbar-title { flex: 1; text-align: center; }

/* --- TITLE MENU: two-stage (modes first, settings in modal) --- */
.menu-settings-row { margin-top: 1.2rem; width: 100%; display: flex; justify-content: center; }
.btn-settings-entry { cursor: pointer; padding: 8px 22px; }
.settings-box { width: 94%; max-width: 340px; text-align: center; height: auto; max-height: 96%; overflow: auto; }
.settings-box .settings-container { max-width: none; }
.sound-toggle { cursor: pointer; text-align: center; flex: 1; }

/* --- RESULT MODAL STRUCTURE --- */
.result-box { width: 92%; max-width: 340px; text-align: center; height: auto; max-height: 96%; overflow: auto; }
.result-rank { font-size: 64px; line-height: 1; margin: 4px 0 0; }
.result-rank:empty { display: none; }
.result-headline { margin: 6px 0 10px; }
.result-new-record { margin-bottom: 8px; }
.result-area-bar { width: 90%; height: 14px; margin: 0 auto 10px; overflow: hidden; background: var(--p2-color, #ff1744); }
.result-area-bar .rab-p1 { height: 100%; background: var(--p1-color, #2979ff); transition: width 0.6s ease; }
.result-stats { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.result-stats .rs-row { display: flex; justify-content: space-between; padding: 2px 16px; }
.result-words-title { margin-top: 8px; }
.result-words { list-style: none; margin: 6px 0 10px; padding: 0 10px; max-height: 130px; overflow: auto; text-align: left; }
.result-words li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 6px; }
.result-words .rw-target { text-align: right; }

/* Helper classes for dynamic board variations */
.grid-4x4 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); padding: 15% 0; }
.grid-4x6 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); padding: 10% 0; }
.grid-4x7 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(7, 1fr); padding: 5% 0; }
.grid-4x8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(8, 1fr); padding: 2% 0; }
.grid-5x8 { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(8, 1fr); padding: 2% 0; }
.grid-5x9 { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(9, 1fr); padding: 0; }