/* Layout: two mirrored player halves on a green card table with a score strip
   between them. Portrait: top half is rotated to face the far player.
   Landscape (tablet / laptop): halves sit side by side, both upright. */
:root {
  color-scheme: dark;
  --felt: #1d6b47;
  --felt-dark: #134d33;
  --card: #fffdf7;
  --card-ink: #17312a;
  --p1: #3b8cff;
  --p2: #ff6b6b;
  --gold: #ffd166;
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.75);
  --font: "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--felt-dark);
  color: var(--ink);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(255, 255, 255, 0.07), transparent 70%),
    var(--felt);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ---------- player half ---------- */
.half {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 8px;
  padding: 10px max(14px, env(safe-area-inset-left, 0px)) 12px;
  position: relative;
  border-top: 5px solid var(--pc);
}
.half[data-player="0"] { --pc: var(--p1); }
.half[data-player="1"] { --pc: var(--p2); transform: rotate(180deg); }

.head { display: flex; justify-content: space-between; align-items: center; }
.name { font-weight: 900; font-size: 18px; color: var(--pc); letter-spacing: 0.5px; }
.pips { display: flex; gap: 5px; }
.pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--pc); }
.pips i.on { background: var(--pc); }

.status {
  font-size: 15px;
  color: var(--ink-soft);
  text-align: center;
  min-height: 20px;
  font-variant-numeric: tabular-nums;
}
.status.bad { color: #ffb4a8; }

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  min-height: 0;
}
.card {
  border: 0;
  border-radius: 16px;
  background: var(--card);
  color: var(--card-ink);
  font: 900 clamp(26px, 6.5vh, 54px) var(--font);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  min-height: 0;
}
.card.frac { font-size: clamp(22px, 5vh, 40px); }
.card.selected { transform: translateY(-3px); box-shadow: 0 0 0 4px var(--pc), 0 8px 0 rgba(0, 0, 0, 0.25); }
.card.empty { visibility: hidden; }
.card.pop { animation: pop 0.22s ease; }
.card.shake { animation: shake 0.35s ease; }
.card.win { background: var(--gold); }
.cards.hidden .card { color: transparent; background: rgba(255, 255, 255, 0.85); }

.ops, .actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.actions { grid-template-columns: repeat(3, 1fr); }
.ops button, .actions button {
  border: 0;
  border-radius: 12px;
  font: 900 26px var(--font);
  padding: 8px 0;
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
.ops button.on { background: var(--pc); }
.actions button { font-size: 15px; padding: 10px 0; background: rgba(0, 0, 0, 0.18); }
.actions button.waiting { background: var(--gold); color: #2a1a00; }
button:disabled { opacity: 0.4; cursor: default; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* in-half banner: countdown, round result, match result */
.banner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  background: rgba(10, 40, 28, 0.95);
  z-index: 2;
}
.banner .big { font-size: clamp(30px, 7vh, 56px); font-weight: 900; color: var(--gold); line-height: 1.05; }
.banner .big.count { font-size: clamp(60px, 14vh, 110px); color: var(--ink); }
.banner .small { font-size: 17px; color: var(--ink-soft); }
.banner .expr { font-size: clamp(20px, 4vh, 28px); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- middle strip ---------- */
.mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px;
  background: var(--felt-dark);
  min-height: 52px;
}
.score { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; display: flex; gap: 8px; align-items: center; }
.score .s1 { color: var(--p1); }
.score .s2 { color: var(--p2); }
.score .to { font-size: 12px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.mid button {
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font: 800 15px var(--font);
  padding: 8px 12px;
  cursor: pointer;
}
.mid .end-buttons { display: flex; gap: 8px; }
.mid .end-buttons button { background: var(--gold); color: #2a1a00; }

/* ---------- start screen ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px));
  background: var(--felt);
  text-align: center;
}
.logo { margin: 0; font-size: clamp(44px, 12vw, 72px); font-weight: 900; line-height: 0.95; letter-spacing: 1px; }
.logo span { color: var(--gold); display: block; font-size: 0.7em; letter-spacing: 6px; }
.lede { max-width: 30em; margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.45; }
.rules { max-width: 26em; margin: 0; padding: 0; list-style: none; text-align: left; display: grid; gap: 6px; font-size: 15px; }
.rules b { color: var(--gold); }
.target { display: flex; gap: 8px; align-items: center; }
.target span { color: var(--ink-soft); font-size: 15px; }
.target button {
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--ink);
  font: 900 18px var(--font);
  border-radius: 10px;
  padding: 8px 16px;
  cursor: pointer;
}
.target button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #2a1a00; }
.start {
  border: 0;
  border-radius: 14px;
  background: var(--gold);
  color: #2a1a00;
  font: 900 24px var(--font);
  padding: 14px 48px;
  cursor: pointer;
}
.hint { font-size: 13px; color: var(--ink-soft); }

@keyframes pop { from { transform: scale(0.7); } to { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

@media (orientation: landscape) and (min-width: 700px) {
  #app { flex-direction: row; }
  .half[data-player="1"] { transform: none; order: 3; }
  .half { border-top: 0; border-bottom: 5px solid var(--pc); }
  .mid { flex-direction: column; justify-content: center; min-width: 120px; order: 2; }
  .half[data-player="0"] { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card.pop, .card.shake { animation: none; transition: none; }
}