:root {
  --bg: #0b0d12;
  --panel: #141821;
  --ink: #e6e8ee;
  --muted: #8a93a6;
  --line: #232938;
  --accent: #6ea8ff;
  --you: #f59e0b;
  --opp: #6ea8ff;
  --danger: #f87171;
  --good: #4ade80;
  --red: #dc2626;
  --black: #1f2937;
  --royal: #a855f7;
  --no: #facc15;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100vh;       /* fallback */
  height: 100dvh;      /* dynamic viewport — handles iOS Safari URL bar */
  overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  user-select: none;
}
body {
  display: flex;
  flex-direction: column;
  /* respect iPhone home-indicator / notch safe areas */
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

main#game {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: .5rem;
  padding: .5rem;
  min-height: 0;
}

.game-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .65rem 1rem;
}
.player-block { display: flex; align-items: center; gap: .75rem; }
.player-block.opponent { color: var(--opp); justify-content: flex-start; }
.player-block.self { color: var(--you); justify-content: flex-end; }
.player-block .player-name { font-weight: 700; }
.player-block .hand-count { color: var(--muted); font-size: .85rem; }
.player-block .score {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  background: var(--bg);
  padding: .15rem .65rem;
  border-radius: 6px;
  min-width: 2.5rem;
  text-align: center;
}
.vs-divider { color: var(--muted); font-size: .9rem; letter-spacing: .15em; }

/* Hands (player face-up, opponent face-down) */
.opponent-hand, .player-hand {
  display: flex;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  padding: .25rem;
  min-height: 110px;
}
.opponent-hand .card, .player-hand .card {
  flex: 0 0 80px;
}

/* Card visuals */
.card {
  width: 80px;
  height: 110px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.card[data-suit="red"]   { background: linear-gradient(160deg, #ef4444, #991b1b); }
.card[data-suit="black"] { background: linear-gradient(160deg, #374151, #0f172a); }
.card[data-suit="royal"] { background: linear-gradient(160deg, #c084fc, #6b21a8); }
.card[data-suit="no"]    { background: linear-gradient(160deg, #fde047, #b45309); color: #1c1409; }

.card .glyph { font-size: 2.5rem; line-height: 1; }
.card .card-label {
  position: absolute;
  bottom: .25rem;
  left: 0; right: 0;
  text-align: center;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  font-family: ui-monospace, Menlo, monospace;
  text-transform: uppercase;
  opacity: .9;
}

.card.face-down,
.card-back {
  background: linear-gradient(135deg, #2c3e50, #1a1a2e);
  color: rgba(255,255,255,.4);
  cursor: default;
}
.card-back {
  width: 80px;
  height: 110px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  border: 1px solid var(--line);
}

.player-hand .card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(0,0,0,.5); }
.player-hand .card.disabled { cursor: not-allowed; opacity: .4; }
.player-hand .card.disabled:hover { transform: none; }
.player-hand .card.unplayable { /* grayscale-ish */ filter: grayscale(.6) brightness(.7); cursor: not-allowed; }

/* Battle area */
.battle {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 160px;
}
.battle-card { display: flex; align-items: center; justify-content: center; }
.battle-card .card { width: 100px; height: 140px; font-size: 3rem; }
.battle-card .card-back { width: 100px; height: 140px; }
.battle-result {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  min-width: 140px;
}
.battle-result.win { color: var(--good); }
.battle-result.lose { color: var(--danger); }
.battle-result.tie { color: var(--accent); }

/* Status strip */
.status-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .5rem .75rem;
  font-size: .8rem;
  color: var(--muted);
}
.status-strip .deck-counts { white-space: nowrap; font-family: ui-monospace, Menlo, monospace; }
.status-strip .deck-counts strong { color: var(--ink); }
.status-strip .log {
  max-height: 50px; overflow-y: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .7rem;
}
.status-strip .log .entry { padding: .05rem 0; }
.status-strip .log .entry:last-child { color: var(--ink); }
.status-strip .status-meta { display: flex; gap: .5rem; align-items: center; }
/* In-game footer links — bright enough to read on dark bg. Browser-default
   blue/purple was unreadable. Same approach as MoM v1.74. */
.status-strip .rules-link { color: var(--ink); text-decoration: none; font-size: .75rem; opacity: .85; }
.status-strip .rules-link:hover { color: var(--accent); text-decoration: underline; opacity: 1; }
.status-strip .rules-link:visited { color: var(--ink); }
.status-strip .leave-btn {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .25rem .55rem;
  font: inherit; font-size: .75rem;
  cursor: pointer;
}
.status-strip .leave-btn:hover { background: var(--danger); color: var(--bg); border-color: var(--danger); }

/* === Overlays === */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1rem;
  z-index: 100;
}
.overlay.setup-overlay { background: var(--bg); z-index: 200; }
.overlay.no-prompt-overlay { background: rgba(11,13,18,.92); z-index: 150; }
.overlay.die-overlay { background: rgba(11,13,18,.92); z-index: 150; }
.overlay.gameover-overlay { background: rgba(11,13,18,.95); z-index: 250; }

.overlay h1 { margin: 0 0 .25rem; font-size: 2rem; text-align: center; }
.overlay h2 { margin: 0 0 .5rem; font-size: 1.4rem; text-align: center; }
.overlay .tag, .overlay .muted { color: var(--muted); text-align: center; }
.overlay p.small { font-size: .8rem; }
.overlay .actions { display: flex; gap: .75rem; justify-content: center; margin-top: 1rem; }
.overlay button {
  background: var(--accent); color: var(--bg);
  border: 0; border-radius: 6px;
  padding: .65rem 1.5rem;
  font: inherit; font-weight: 600;
  cursor: pointer;
}
.overlay button.secondary {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.overlay button:hover { filter: brightness(1.1); }

/* Setup */
.setup-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  max-width: 460px;
  width: 100%;
}
/* Mode tabs in setup overlay */
.setup-content .mode-tabs {
  display: flex;
  gap: .25rem;
  margin: .75rem 0 1rem;
  border-bottom: 1px solid var(--line);
}
.setup-content .mode-tab {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .5rem .75rem;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.setup-content .mode-tab:hover { color: var(--ink); }
.setup-content .mode-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.setup-content .mode-panel { padding-top: .25rem; }

/* Online actions group */
.setup-content .online-actions {
  display: flex; flex-direction: column; gap: .5rem;
  margin-top: .75rem;
}
.setup-content .online-actions button { width: 100%; }
.setup-content .join-row {
  display: flex; gap: .5rem;
}
.setup-content .join-row input {
  flex: 0 0 5rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: .5rem .65rem; font: inherit; font-size: 1rem;
  text-align: center;
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: .15em;
}
.setup-content .join-row button { flex: 1; }
.setup-content .online-status {
  color: var(--muted); font-size: .85rem; margin-top: .65rem;
  text-align: center; min-height: 1.2em;
}
.setup-content .online-status.err { color: var(--danger); }
.setup-content .online-status.ok  { color: var(--good); }

/* Room badge in status strip */
.status-strip .room-badge {
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: .15rem .5rem;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .75rem;
}
.status-strip .room-badge strong { color: var(--ink); letter-spacing: .1em; }

.setup-content label { display: block; margin: .65rem 0; }
.setup-content label > span { color: var(--muted); font-size: .85rem; display: block; margin-bottom: .25rem; }
.setup-content input[type=text] {
  width: 100%;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: .55rem .65rem; font: inherit; font-size: 1rem;
}
.setup-content input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.setup-version-line { margin-top: 1rem; text-align: center; font-size: .7rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.setup-version-line a { color: var(--ink); text-decoration: none; opacity: .85; }
.setup-version-line a:hover { color: var(--accent); text-decoration: underline; opacity: 1; }
.setup-version-line a:visited { color: var(--ink); }

/* No-card prompt */
.no-prompt {
  background: var(--panel);
  border: 1px solid var(--no);
  border-radius: 12px;
  padding: 1.25rem 2rem;
  max-width: 420px;
  text-align: center;
}
.no-prompt .no-glyph {
  display: inline-block;
  background: linear-gradient(160deg, #fde047, #b45309);
  color: #1c1409;
  padding: .1em .4em;
  border-radius: 4px;
  font-weight: 700;
  font-family: 'Times New Roman', Georgia, serif;
}

/* Die overlay */
.die-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem 2rem;
  text-align: center;
  min-width: 280px;
}
.die-content h2 { color: var(--accent); }
/* Die display: glyph + numeric backup. The unicode dice glyphs (U+2680-2685)
   need a font that has them — Apple Color Emoji on macOS, Segoe UI Emoji on
   Windows. Chromebooks/Linux Chromium often have neither, and the glyphs
   render as tofu boxes (or invisible) — falling back through sans-serif
   doesn't always pick up a Symbols font. So we ALSO show the numeric value
   below the glyph; even if the glyph fails, the player sees the result. */
.die-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: .5rem 0;
  gap: .15rem;
}
.die {
  font-size: 4.5rem;
  line-height: 1;
  /* broader cascade — Noto Sans Symbols2 has the dice; system-ui covers macOS;
     keep emoji fonts for color rendering on Mac/Windows. */
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji',
               'Noto Sans Symbols2', system-ui, sans-serif;
  /* if the glyph font has no glyph, browser falls through to system fallback */
}
.die-number {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .05em;
  /* shows even when unicode glyph fails — guarantees readable result */
}
.die.rolling { animation: dieRoll .12s steps(2) infinite; }
@keyframes dieRoll { 50% { transform: rotate(-15deg); } }

/* Game-over */
.gameover-tally { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 1rem; margin: .75rem 0; text-align: center; }

/* ==================================================================
   Responsive sizing — phones (portrait + landscape)
   ==================================================================
   The fixed 80×110 / 100×140 card sizes overflow on phone-sized
   viewports (5 hand cards = 432 px wide on iPhone Pro Max which is
   430 logical), and the tall stacked layout gets clipped in landscape
   (body is overflow:hidden). These breakpoints scale cards down and
   compact the spacing so everything fits without scrolling. */

/* Tablet & small laptop nudge — slightly trimmed sizes. */
@media (max-width: 700px) {
  .player-block .player-name { font-size: .85rem; }
  .player-block .score { font-size: 1.25rem; }
  .battle-card .card { width: 90px; height: 126px; font-size: 2.4rem; }
  .battle-card .card-back { width: 90px; height: 126px; }
}

/* Phones — portrait. 5 hand cards must fit across ~360-430 px wide. */
@media (max-width: 500px) {
  main#game { padding: .35rem; gap: .35rem; }
  .game-header { padding: .45rem .65rem; gap: .5rem; }
  .player-block .player-name { font-size: .85rem; }
  .player-block .hand-count { font-size: .7rem; }
  .player-block .score { font-size: 1.2rem; padding: .1rem .45rem; min-width: 2rem; }
  .vs-divider { font-size: .75rem; }
  .opponent-hand, .player-hand {
    gap: .25rem;
    min-height: 80px;
    padding: .1rem;
    /* if 5 cards still don't fit (very narrow, large UI scaling), let the
       row scroll horizontally instead of clipping cards. */
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .opponent-hand .card, .player-hand .card { flex: 0 0 60px; }
  .card { width: 60px; height: 84px; font-size: 1.7rem; }
  .card .glyph { font-size: 1.7rem; }
  .card .card-label { font-size: .55rem; bottom: .15rem; }
  .card.face-down, .card-back { width: 60px; height: 84px; font-size: 1.4rem; }
  .battle { padding: .65rem .5rem; min-height: 110px; }
  .battle-card .card { width: 70px; height: 98px; font-size: 2rem; }
  .battle-card .card-back { width: 70px; height: 98px; font-size: 1.5rem; }
  .battle-result { font-size: .85rem; min-width: 80px; }
  .status-strip {
    padding: .35rem .5rem;
    gap: .35rem;
    font-size: .7rem;
    /* status row can wrap if too crowded — better than clipping the room badge / leave btn */
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
  .status-strip .deck-counts { font-size: .65rem; }
  .status-strip .log { max-height: 28px; font-size: .65rem; }
  .status-strip .status-meta { justify-self: end; }
}

/* Very narrow portrait (small phones). Drop card width further. */
@media (max-width: 380px) {
  .opponent-hand .card, .player-hand .card { flex: 0 0 52px; }
  .card { width: 52px; height: 72px; font-size: 1.4rem; }
  .card .glyph { font-size: 1.4rem; }
  .card .card-label { font-size: .5rem; }
  .card.face-down, .card-back { width: 52px; height: 72px; font-size: 1.2rem; }
}

/* Phones — landscape. Height is the constraint here, not width. */
@media (orientation: landscape) and (max-height: 500px) {
  main#game { padding: .25rem; gap: .25rem; }
  .game-header { padding: .25rem .65rem; gap: .35rem; }
  .player-block .player-name { font-size: .8rem; }
  .player-block .hand-count { font-size: .75rem; }
  .player-block .score { font-size: 1.05rem; padding: .05rem .4rem; min-width: 1.8rem; }
  .vs-divider { font-size: .65rem; }
  .opponent-hand, .player-hand {
    gap: .3rem;
    min-height: 70px;
    padding: .1rem;
  }
  .opponent-hand .card, .player-hand .card { flex: 0 0 50px; }
  .card { width: 50px; height: 70px; font-size: 1.5rem; }
  .card .glyph { font-size: 1.5rem; }
  .card .card-label { font-size: .5rem; bottom: .1rem; }
  .card.face-down, .card-back { width: 50px; height: 70px; font-size: 1.2rem; }
  .battle { padding: .35rem .5rem; min-height: 90px; }
  .battle-card .card { width: 62px; height: 86px; font-size: 1.7rem; }
  .battle-card .card-back { width: 62px; height: 86px; font-size: 1.4rem; }
  .battle-result { font-size: .8rem; min-width: 90px; }
  .status-strip { padding: .3rem .5rem; gap: .35rem; font-size: .65rem; }
  .status-strip .log { max-height: 28px; font-size: .6rem; }
}