/* =========================================
   Duck War -- game styles
   =========================================
   Loaded via public/index.html alongside main.css / battle-ducks.css /
   liars-dice.css. Game-namespaced via .dw-* prefix; DW tokens scoped under
   the DW screen selectors below (house convention).

   Visual direction (DUCK-WAR-DESIGN.md V1 §5): NAVY felt — same table
   fantasy as Liar's Dice, different room. Cards reuse the platform
   war-card components in main.css. No emoji, no glyph icons, no audio.
   ========================================= */

.dw-player-screen,
.dw-player-screen * {
  --dw-font: 'Nunito', system-ui, -apple-system, sans-serif;

  /* Navy felt */
  --dw-felt:        #1c2a4d;
  --dw-felt-deep:   #131f3b;
  --dw-felt-line:   rgba(255,255,255,0.10);

  /* Surfaces on felt */
  --dw-surface:     rgba(255,255,255,0.07);
  --dw-surface-hi:  rgba(255,255,255,0.14);

  /* Text on felt */
  --dw-text:        #eef1f7;
  --dw-text-muted:  #aab6cc;

  /* Accent (platform gold family) */
  --dw-accent:      #f5c842;
  --dw-accent-deep: #c9990a;
  --dw-accent-text: #1a1a1a;

  /* Semantic */
  --dw-danger:      #e05555;
  --dw-win:         #5cdb5c;
  --dw-win-bg:      rgba(92,219,92,0.14);
}

/* ── Screen shell ──────────────────────────────────────────────────────── */

.dw-player-screen {
  font-family: var(--dw-font, 'Nunito', sans-serif);
  background:
    radial-gradient(ellipse at 50% 0%, var(--dw-felt, #1c2a4d) 0%, var(--dw-felt-deep, #131f3b) 78%);
  color: var(--dw-text, #eef1f7);
  border-radius: 14px;
  padding: 16px 12px 24px;
  min-height: 74vh;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: inset 0 0 0 2px var(--dw-felt-line, rgba(255,255,255,0.10)),
              0 6px 22px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
}

.dw-player-screen h1, .dw-player-screen h2, .dw-player-screen h3 {
  color: var(--dw-text, #eef1f7);
}
.dw-player-screen .text-muted { color: var(--dw-text-muted, #aab6cc) !important; }
.dw-player-screen .dw-win-text { color: var(--dw-win, #5cdb5c); }

.dw-btn-primary {
  background: var(--dw-accent, #f5c842);
  color: var(--dw-accent-text, #1a1a1a);
  border: none;
  border-radius: 10px;
}
.dw-btn-primary:hover { background: var(--dw-accent-deep, #c9990a); color: var(--dw-accent-text, #1a1a1a); }

/* Bootstrap's grey outline vanishes on felt — retint (LD-012 pattern) */
.dw-player-screen .btn-outline-secondary {
  color: var(--dw-text-muted, #aab6cc);
  border-color: var(--dw-text-muted, #aab6cc);
}
.dw-player-screen .btn-outline-secondary:hover {
  color: var(--dw-accent-text, #1a1a1a);
  background: var(--dw-text-muted, #aab6cc);
}

/* ── Status line ───────────────────────────────────────────────────────── */

.dw-status {
  min-height: 34px;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  padding: 4px 8px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.dw-status-war {
  color: var(--dw-danger, #e05555);
  background: rgba(224,85,85,0.12);
  animation: dw-war-pulse 0.8s ease-in-out infinite;
}
.dw-status-win {
  color: var(--dw-win, #5cdb5c);
  background: var(--dw-win-bg, rgba(92,219,92,0.14));
}

@keyframes dw-war-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* ── The table ─────────────────────────────────────────────────────────── */

.dw-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-content: start;
}
/* 5+ players: 3 columns + tighter tiles so all 8 fit above the FLIP button
   on a phone (2 columns pushed the thumb-zone button below the fold). */
.dw-table:has(.dw-tile:nth-child(5)) { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dw-table:has(.dw-tile:nth-child(5)) .dw-tile { min-height: 112px; padding: 6px 4px 4px; }
.dw-table:has(.dw-tile:nth-child(5)) .dw-tile-name { font-size: 0.68rem; }
.dw-table:has(.dw-tile:nth-child(5)) .dw-tile-card { min-height: 48px; }
.dw-table:has(.dw-tile:nth-child(5)) .dw-slot-empty { width: 32px; height: 45px; }

.dw-tile {
  position: relative;
  background: var(--dw-surface, rgba(255,255,255,0.07));
  border: 1px solid var(--dw-felt-line, rgba(255,255,255,0.10));
  border-radius: 12px;
  padding: 8px 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 132px;
}
.dw-tile-me        { background: var(--dw-surface-hi, rgba(255,255,255,0.14)); }
.dw-tile-war       { border-color: var(--dw-danger, #e05555); }
.dw-tile-winner    { border-color: var(--dw-win, #5cdb5c); box-shadow: 0 0 14px rgba(92,219,92,0.35); }
.dw-tile-sidelined { opacity: 0.55; }
.dw-tile-elim      { opacity: 0.35; }
.dw-tile-elim .dw-tile-duck { filter: grayscale(1); }

.dw-tile-duck { line-height: 0; }
.dw-tile-name {
  font-weight: 700;
  font-size: 0.78rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dw-tile-card { min-height: 58px; display: flex; align-items: center; justify-content: center; }
.dw-slot-empty {
  width: 40px; height: 56px;
  border: 1.5px dashed var(--dw-felt-line, rgba(255,255,255,0.10));
  border-radius: 5px;
}
.dw-slot-out {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--dw-danger, #e05555);
}
.dw-tile-count {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--dw-accent, #f5c842);
}
.dw-tile-note {
  min-height: 14px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dw-text-muted, #aab6cc);
}
.dw-burns { display: inline-flex; gap: 2px; }
.dw-burns .war-card { transform: scale(0.5); transform-origin: top center; }

/* ── Actions (thumb zone) ──────────────────────────────────────────────── */

.dw-actions {
  margin-top: auto;
  padding-top: 14px;
  text-align: center;
}
.dw-flip-btn {
  width: 100%;
  max-width: 320px;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  border-radius: 14px;
  padding: 16px 0;
  border: none;
  background: var(--dw-accent, #f5c842);
  color: var(--dw-accent-text, #1a1a1a);
}
.dw-flip-btn:hover:not(:disabled) { background: var(--dw-accent-deep, #c9990a); color: var(--dw-accent-text, #1a1a1a); }
.dw-flip-btn:disabled { opacity: 0.45; }

.dw-spec-note {
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--dw-accent, #f5c842);
  padding: 14px 0;
}

/* ── Game over ceremony ────────────────────────────────────────────────── */

.dw-go-duck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,200,66,0.22) 0%, rgba(245,200,66,0.05) 62%, transparent 72%);
  box-shadow: 0 0 0 3px var(--dw-accent, #f5c842),
              0 0 34px rgba(245,200,66,0.35);
  margin: 0 auto 18px;
  animation: dw-go-glow 2.2s ease-in-out infinite;
}

@keyframes dw-go-glow {
  0%, 100% { box-shadow: 0 0 0 3px var(--dw-accent, #f5c842), 0 0 26px rgba(245,200,66,0.28); }
  50%      { box-shadow: 0 0 0 3px var(--dw-accent, #f5c842), 0 0 44px rgba(245,200,66,0.5); }
}