/* Mobile-first Matgo Table UI Stylesheet */

:root {
  --bg-page: #091a13;
  --bg-table: #154734;
  --bg-table-accent: #0f3627;
  --bg-table-subtle: rgba(0, 0, 0, 0.22);
  --bg-card: #fffdfa;
  --bg-card-selected: #fff3c4;
  --bg-card-facedown: #7f1d1d;
  --border-card: #27272a;
  --text-dark: #18181b;
  --text-light: #f4f4f5;
  --text-muted: #a1a1aa;

  --color-gwang: #dc2626;
  --color-animal: #2563eb;
  --color-ribbon: #d97706;
  --color-pi: #4b5563;

  --color-go: #e11d48;
  --color-stop: #1d4ed8;
  --color-focus: #facc15;

  --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

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

html, body {
  width: 100%;
  min-height: 100%;
  background-color: var(--bg-page);
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

/* App container */
.app-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-table);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Prototype Disclaimer Banner */
.prototype-banner {
  background-color: #451a03;
  color: #fef3c7;
  padding: 5px 8px;
  border-bottom: 2px solid #b45309;
  flex-shrink: 0;
}

.banner-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.prototype-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 4px;
  background-color: #f59e0b;
  color: #78350f;
  border-radius: 4px;
}

.prototype-tagline {
  font-size: 9.5px;
  font-weight: 700;
  color: #fef3c7;
  opacity: 0.95;
}

.prototype-notice {
  font-size: 9.5px;
  line-height: 1.25;
  color: #fde68a;
}

/* Main Table Surface */
.table-surface {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 4px 6px;
  gap: 4px;
}

/* Seats (Computer & Player) */
.seat {
  background: var(--bg-table-accent);
  border-radius: 6px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.seat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.seat-title {
  font-size: 11px;
  font-weight: 700;
  color: #fafafa;
}

.seat-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge {
  font-size: 9.5px;
  background: rgba(255, 255, 255, 0.15);
  padding: 1px 4px;
  border-radius: 3px;
}

.player-badge {
  background: #047857;
  color: #ecfdf5;
  font-weight: 700;
}

.score-display {
  font-size: 10.5px;
  color: #fde047;
}

/* Captured Zone */
.captured-zone {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-bottom: 3px;
}

.captured-group {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  padding: 2px 2px;
  text-align: center;
}

.captured-label {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 1px;
}

.placeholder-tag {
  font-size: 9.5px;
  font-weight: 600;
  color: #e4e4e7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card Racks */
.card-rack {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 4px;
  padding: 2px;
  align-items: center;
  overflow-x: auto !important;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.card-rack::-webkit-scrollbar {
  height: 3px;
}
.card-rack::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.opponent-rack {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  outline: none;
}

.opponent-rack .card-slot {
  width: 30px;
  height: 42px;
  font-size: 9px;
  padding: 2px 1px;
}

.player-rack {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow-x: auto !important;
  white-space: nowrap;
}

/* Base Card Slot */
.card-slot {
  flex: 0 0 auto;
  width: 44px;
  height: 60px;
  border-radius: 5px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2px 1px;
  border: 1.5px solid var(--border-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  user-select: none;
}

/* Face-down opponent cards */
.card-facedown {
  background-color: var(--bg-card-facedown);
  border-color: #991b1b;
  color: #fca5a5;
  justify-content: center;
  opacity: 0.85;
}

/* Interactive Player Cards */
button.player-card {
  background-color: var(--bg-card);
  color: var(--text-dark);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  font-family: inherit;
  touch-action: manipulation;
  min-height: 48px;
  min-width: 44px;
}

button.player-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

button.player-card:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  transform: translateY(-2px);
}

button.player-card.is-selected {
  background-color: var(--bg-card-selected);
  border: 2px solid #ca8a04;
  transform: translateY(-3px);
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.7);
}

/* Card details typography */
.card-key-hint {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 8px;
  font-weight: 700;
  color: #71717a;
}

.card-month {
  font-size: 9.5px;
  font-weight: 800;
  margin-top: 5px;
}

.card-name {
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.card-type {
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 2px;
  border-radius: 2px;
  margin-bottom: 1px;
  white-space: nowrap;
}

.type-gwang {
  background-color: #fee2e2;
  color: var(--color-gwang);
  border: 1px solid #f87171;
}

.type-animal {
  background-color: #dbeafe;
  color: var(--color-animal);
  border: 1px solid #60a5fa;
}

.type-ribbon {
  background-color: #fef3c7;
  color: var(--color-ribbon);
  border: 1px solid #fbbf24;
}

.type-pi {
  background-color: #f3f4f6;
  color: var(--color-pi);
  border: 1px solid #9ca3af;
}

/* Field / Ground Area */
.field-area {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 4px 6px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.field-title {
  font-size: 10.5px;
  font-weight: 600;
  color: #e4e4e7;
}

.deck-indicator {
  font-size: 9.5px;
  color: #a1a1aa;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  justify-items: center;
}

.field-card {
  background-color: var(--bg-card);
  color: var(--text-dark);
  cursor: pointer;
  transition: transform 0.12s ease;
  min-height: 48px;
  min-width: 44px;
}

.field-card:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.field-card:hover {
  transform: scale(1.02);
}

/* Feedback section */
.feedback-section {
  padding: 0;
  flex-shrink: 0;
}

.feedback-box {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: rgba(24, 24, 27, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 10.5px;
  color: #fafafa;
  min-height: 28px;
}

.feedback-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.feedback-message {
  flex: 1;
  line-height: 1.2;
}

/* Controls Area (Go / Stop) */
.controls-area {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
  padding-bottom: max(2px, var(--safe-bottom));
  flex-shrink: 0;
}

.controls-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 2px solid transparent;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.action-btn:active {
  transform: scale(0.97);
}

.action-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.btn-go {
  background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
  box-shadow: 0 2px 5px rgba(225, 29, 72, 0.35);
}

.btn-go:hover {
  filter: brightness(1.1);
}

.btn-stop {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 2px 5px rgba(29, 78, 216, 0.35);
}

.btn-stop:hover {
  filter: brightness(1.1);
}

.btn-primary-text {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.btn-subtext {
  font-size: 9px;
  opacity: 0.9;
  font-weight: 500;
}

.controls-sub {
  display: flex;
  justify-content: center;
}

/* Secondary Button with >= 48px touch target */
.btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-light);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  touch-action: manipulation;
}

.btn-secondary:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn-secondary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Footer */
.app-footer {
  text-align: center;
  padding: 4px 8px;
  background-color: #0b1e16;
  font-size: 9px;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* Responsive adjustment for extra narrow screens (320px) */
@media (max-width: 330px) {
  html, body {
    font-size: 11.5px;
  }
  .card-slot {
    width: 40px;
    height: 56px;
    padding: 2px 1px;
  }
  .card-month {
    font-size: 8.5px;
    margin-top: 4px;
  }
  .card-name {
    font-size: 8px;
  }
  .card-type {
    font-size: 7.5px;
    padding: 0 1px;
  }
  .btn-primary-text {
    font-size: 13px;
  }
  .btn-subtext {
    font-size: 8px;
  }
  .opponent-rack .card-slot {
    width: 26px;
    height: 38px;
    font-size: 8px;
  }
}

/* Small Viewport Height or Large Font (prevents overlap, preserves scrollability) */
@media (max-height: 640px) {
  .app-container {
    min-height: 100vh;
  }
  .table-surface {
    overflow-y: auto;
  }
}

/* Desktop Wide Layout (e.g. 1280x800) */
@media (min-width: 900px) {
  html, body {
    font-size: 14px;
  }

  .app-container {
    max-width: 1200px;
    min-height: 100vh;
    padding: 0 16px;
    background-color: var(--bg-table);
  }

  .prototype-banner {
    padding: 10px 16px;
    border-radius: 0 0 8px 8px;
  }

  .banner-top {
    gap: 10px;
  }

  .prototype-badge {
    font-size: 12px;
    padding: 2px 8px;
  }

  .prototype-tagline {
    font-size: 12px;
  }

  .prototype-notice {
    font-size: 12px;
  }

  /* Desktop Multi-column Layout: 2-column or 3-part layout */
  .table-surface {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "field computer"
      "field player"
      "feedback controls";
    gap: 14px;
    padding: 14px 0;
  }

  .computer-seat {
    grid-area: computer;
    padding: 10px;
  }

  .opponent-rack .card-slot {
    width: 36px;
    height: 52px;
    font-size: 10px;
  }

  .field-area {
    grid-area: field;
    padding: 12px;
    display: flex;
    flex-direction: column;
  }

  .field-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 10px 0;
    align-content: center;
    flex: 1;
  }

  .field-card {
    width: 60px;
    height: 88px;
    padding: 6px 4px;
  }

  .field-card .card-month {
    font-size: 12px;
    margin-top: 8px;
  }
  .field-card .card-name {
    font-size: 12px;
  }
  .field-card .card-type {
    font-size: 11px;
    padding: 2px 5px;
  }

  .player-seat {
    grid-area: player;
    padding: 10px;
  }

  button.player-card {
    width: 54px;
    height: 80px;
    padding: 5px 3px;
  }

  button.player-card .card-month {
    font-size: 11.5px;
    margin-top: 8px;
  }
  button.player-card .card-name {
    font-size: 11px;
  }
  button.player-card .card-type {
    font-size: 10.5px;
    padding: 2px 4px;
  }
  button.player-card .card-key-hint {
    font-size: 10px;
    top: 2px;
    left: 4px;
  }

  .feedback-section {
    grid-area: feedback;
  }

  .feedback-box {
    font-size: 13px;
    min-height: 48px;
    padding: 10px 14px;
  }

  .controls-area {
    grid-area: controls;
    margin-top: 0;
    padding-bottom: 0;
  }

  .action-btn {
    min-height: 54px;
  }

  .btn-primary-text {
    font-size: 17px;
  }

  .btn-subtext {
    font-size: 11px;
  }

  .btn-secondary {
    font-size: 12px;
  }

  .app-footer {
    padding: 12px;
    font-size: 11px;
    border-radius: 8px 8px 0 0;
  }
}

/* Initial-deal preview; racks scroll internally on small screens. */
.table-surface > *, .seat, .field-area, .card-rack { min-width: 0; }
.dealer-control { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.dealer-control select { min-height: 48px; min-width: 100px; font: inherit; }
.dealer-control select:focus-visible { outline: 3px solid var(--color-focus); }
.prototype-notice, .prototype-tagline, .prototype-badge { font-size: 12px; }
.seat-title, .field-title, .badge, .deck-indicator { font-size: 12px; }
.zone-label, .empty-zone, #conservation-status { font-size: 12px; padding: 2px 0; }
.card-slot { min-width: 64px; min-height: 48px; }
.public-card, button.player-card {
  min-width: 64px; justify-content: center; font-size: 11px; background: var(--bg-card);
  color: var(--text-dark); overflow-wrap: anywhere; white-space: normal;
}
.public-card { cursor: default; }
.public-card.is-match { border: 3px solid #0369a1; background: #e0f2fe; text-align: center; }
.choice-card { cursor: pointer; font-family: inherit; }
.choice-card:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
button.player-card:disabled { cursor: default; opacity: 0.7; }
.field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 66px; }
.card-rack { min-height: 66px; }
#player-captured, #computer-captured { min-height: 32px; }
#player-captured .public-card, #computer-captured .public-card { height: 56px; min-height: 56px; text-align: center; }
.action-btn { font-size: 12px; }
.action-btn:disabled { opacity: 0.5; cursor: default; }
.feedback-box { font-size: 12px; }
#conservation-status { color: #bbf7d0; }
.seat-header, .field-header { gap: 6px; flex-wrap: wrap; }
@media (max-width: 899px) {
  .field-grid { display: flex; gap: 6px; overflow-x: auto; padding: 3px 0; }
}

.score-display { font-size: 18px; font-weight: 800; padding: 4px 0; }
.score-breakdown { font-size: 12px; color: #dcfce7; margin-bottom: 4px; overflow-wrap: anywhere; }
#match-result:not([hidden]) { padding: 12px; margin: 6px 0; border: 2px solid #facc15; border-radius: 6px; font-size: 18px; color: #fef08a; }

/* Original vector faces retain the same public-only labels and touch controls. */
.public-card, button.player-card, #player-captured .public-card, #computer-captured .public-card {
  width:72px; height:122px; min-height:122px; padding:3px; justify-content:flex-start; gap:2px;
}
.card-face { display:block; width:64px; height:88px; flex:0 0 auto; border-radius:3px; }
.face-caption { font-size:10px; line-height:1.2; text-align:center; }
.match-label { position:absolute; top:4px; left:4px; border-radius:2px; background:#075985; color:white; font-size:10px; padding:1px 3px; }
.card-rack { align-items:stretch; }
.card-slot.is-new { animation:card-appear .18s ease-out; }
#match-result:not([hidden]) { animation:card-appear .2s ease-out; }
@keyframes card-appear { from { opacity:.35; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .card-slot.is-new, #match-result:not([hidden]) { animation:none; } button.player-card { transition:none; } }

.card-rack[hidden] { display:none!important; }
.card-rack.is-empty { min-height:28px; align-items:center!important; }
.card-face { width:100%; max-width:64px; }
#game-settings { padding:6px 0; }
#game-settings summary { cursor:pointer; font-size:13px; padding:12px 4px; min-height:44px; }
#game-settings .btn-secondary { display:flex; width:100%; margin-top:4px; }