/* ── Super Tic-Tac-Toe · Style ───────────────────────────────────────────── */
:root {
  --bg:       #0a0a0f;
  --surface:  #0f0f1a;
  --surface2: #141425;
  --border:   #1e2a3a;
  --border2:  #2a3a50;
  --text:     #e0e0f0;
  --text2:    #8090a8;
  --accent:   #00bcd4;
  --danger:   #ef4444;
  --success:  #22c55e;

  --micro:    clamp(14px, 4.2vw, 20px);  /* micro cell size */
  --mgap:     1px;                        /* micro cell gap */
  --Mgap:     4px;                        /* macro cell gap */
  --Mpad:     3px;                        /* macro cell inner padding */
  --Mborder:  2px;                        /* macro cell border */
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', monospace;
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ── Shared Buttons ─────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-danger-sm {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-primary   { background: var(--accent); color: #000; }
.btn-primary:hover { filter: brightness(1.15); }
.btn-secondary { background: transparent; border: 1px solid var(--border2); color: var(--text2); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger-sm { background: transparent; border: 1px solid var(--danger); color: var(--danger); padding: 8px 16px; font-size: 0.85rem; }
.btn-danger-sm:hover { background: var(--danger); color: #fff; }

/* ── Setup Screen ────────────────────────────────────────────────────────── */
#game-setup {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 24px 16px;
}
.setup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.setup-logo { font-size: 3rem; text-align: center; color: var(--accent); }
.setup-card h1 { text-align: center; font-size: 1.8rem; letter-spacing: 0.1em; }
.setup-subtitle { text-align: center; color: var(--text2); font-size: 0.85rem; }

.blink { animation: blink 1s step-end infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }

.form-row { display: flex; flex-direction: column; gap: 10px; }
.form-row input[type=text] {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 10px 14px;
  outline: none;
  width: 100%;
}
.form-row input:focus { border-color: var(--accent); }

.settings-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.settings-row label { color: var(--text2); font-size: 0.9rem; }
.settings-row select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 6px 10px;
  outline: none;
  cursor: pointer;
}

#game-buttons { display: flex; flex-direction: column; gap: 10px; }
.status-msg { text-align: center; color: var(--text2); font-size: 0.85rem; min-height: 1.2em; }
.invite-hint { color: var(--accent); text-align: center; font-size: 0.9rem; }
.or-divider  { text-align: center; color: var(--border2); font-size: 0.8rem; margin: 4px 0; }

/* Open games list */
#open-games-section { display: flex; flex-direction: column; gap: 8px; }
#open-games-list    { display: flex; flex-direction: column; gap: 6px; }
.open-games-empty   { text-align: center; color: var(--text2); font-size: 0.85rem; padding: 8px; }
.og-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  gap: 10px;
}
.og-info { flex: 1; }
.og-name { font-size: 0.9rem; font-weight: 600; }
.og-host { font-size: 0.78rem; color: var(--text2); }
.og-players-badge {
  font-size: 0.8rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 2px 8px;
}
.og-join-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.og-join-btn:hover { filter: brightness(1.2); }

/* ── QR Lobby Screen ─────────────────────────────────────────────────────── */
#qrcode-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 24px 16px;
}
.qr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.qr-card h2 { font-size: 1.2rem; color: var(--accent); }
.qr-card p  { color: var(--text2); font-size: 0.85rem; text-align: center; }
#qrcode-with-id { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#qrcode canvas, #qrcode img { border-radius: 8px; border: 4px solid #fff; }
#qrcode-id { font-size: 1rem; color: var(--text2); letter-spacing: 0.1em; }

.lobby-players { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.lobby-player {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border-radius: 8px;
  padding: 8px 12px;
}
.lp-sym {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.lp-name { flex: 1; font-size: 0.9rem; }
.lp-you  { font-size: 0.75rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 10px; padding: 1px 6px; }
.lobby-waiting { text-align: center; color: var(--text2); font-size: 0.85rem; }

/* ── Dice Roll Phase ─────────────────────────────────────────────────────── */
#diceroll-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 16px;
  min-height: 100vh;
}
.phase-header { text-align: center; }
.phase-header h2 { font-size: 1.3rem; color: var(--accent); margin-bottom: 6px; }
.phase-header p  { color: var(--text2); font-size: 0.9rem; }

#dice-players-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.dice-player-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 130px;
}
.dp-sym {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.dp-name { flex: 1; font-size: 0.9rem; }
.dp-roll {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--accent);
  min-width: 24px;
  text-align: center;
}
.dp-waiting { color: var(--text2); font-size: 0.75rem; }

#dice-roll-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  perspective: 400px;
}
.dice-cube {
  width: 80px; height: 80px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.1s;
}
.dice-cube.rolling { animation: dice-tumble 0.6s ease-out forwards; }

@keyframes dice-tumble {
  0%   { transform: rotateX(0)   rotateY(0)   rotateZ(0); }
  25%  { transform: rotateX(180deg) rotateY(90deg)  rotateZ(45deg); }
  60%  { transform: rotateX(360deg) rotateY(270deg) rotateZ(90deg); }
  100% { transform: var(--dice-final, rotateX(0) rotateY(0)); }
}

.dice-face {
  position: absolute;
  width: 80px; height: 80px;
  background: #f5f5f5;
  border: 2px solid #ccc;
  border-radius: 12px;
  display: grid;
  padding: 10px;
  box-sizing: border-box;
}
.dice-face .dot {
  width: 12px; height: 12px;
  background: #111;
  border-radius: 50%;
  justify-self: center;
  align-self: center;
}
.dice-face.dice-1 { grid-template-areas: ". . ." ". c ." ". . ."; }
.dice-face.dice-2 { grid-template-areas: ". . a" ". . ." "b . ."; }
.dice-face.dice-3 { grid-template-areas: ". . a" ". c ." "b . ."; }
.dice-face.dice-4 { grid-template-areas: "a . b" ". . ." "c . d"; }
.dice-face.dice-5 { grid-template-areas: "a . b" ". c ." "d . e"; }
.dice-face.dice-6 { grid-template-areas: "a . b" "c . d" "e . f"; }
.dice-face.dice-1 .dot:nth-child(1) { grid-area: c; }
.dice-face.dice-2 .dot:nth-child(1) { grid-area: a; }
.dice-face.dice-2 .dot:nth-child(2) { grid-area: b; }
.dice-face.dice-3 .dot:nth-child(1) { grid-area: a; }
.dice-face.dice-3 .dot:nth-child(2) { grid-area: c; }
.dice-face.dice-3 .dot:nth-child(3) { grid-area: b; }
.dice-face.dice-4 .dot:nth-child(1) { grid-area: a; }
.dice-face.dice-4 .dot:nth-child(2) { grid-area: b; }
.dice-face.dice-4 .dot:nth-child(3) { grid-area: c; }
.dice-face.dice-4 .dot:nth-child(4) { grid-area: d; }
.dice-face.dice-5 .dot:nth-child(1) { grid-area: a; }
.dice-face.dice-5 .dot:nth-child(2) { grid-area: b; }
.dice-face.dice-5 .dot:nth-child(3) { grid-area: c; }
.dice-face.dice-5 .dot:nth-child(4) { grid-area: d; }
.dice-face.dice-5 .dot:nth-child(5) { grid-area: e; }
.dice-face.dice-6 .dot:nth-child(1) { grid-area: a; }
.dice-face.dice-6 .dot:nth-child(2) { grid-area: b; }
.dice-face.dice-6 .dot:nth-child(3) { grid-area: c; }
.dice-face.dice-6 .dot:nth-child(4) { grid-area: d; }
.dice-face.dice-6 .dot:nth-child(5) { grid-area: e; }
.dice-face.dice-6 .dot:nth-child(6) { grid-area: f; }

/* Face positions */
.dice-face.dice-1 { transform: translateZ(40px); }
.dice-face.dice-6 { transform: rotateY(180deg) translateZ(40px); }
.dice-face.dice-2 { transform: rotateY(-90deg) translateZ(40px); }
.dice-face.dice-5 { transform: rotateY(90deg)  translateZ(40px); }
.dice-face.dice-3 { transform: rotateX(90deg)  translateZ(40px); }
.dice-face.dice-4 { transform: rotateX(-90deg) translateZ(40px); }

.dice-result { color: var(--accent); font-size: 1rem; min-height: 1.5em; text-align: center; }
#roll-dice-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Playing Phase ──────────────────────────────────────────────────────── */
#playing-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  min-height: 100vh;
}

/* Turn bar */
#players-turn-bar {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#players-symbols-bar {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.pbar-card {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  transition: all 0.2s;
}
.pbar-card.current-player {
  border-color: var(--player-color, var(--accent));
  box-shadow: 0 0 10px var(--player-color, var(--accent));
}
.pbar-sym {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.pbar-name { font-size: 0.8rem; }
.pbar-you  { font-size: 0.7rem; color: var(--text2); }

#turn-indicator-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text2);
}
.turn-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}
.turn-dot.my-turn {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.turn-dot.their-turn { background: var(--text2); animation: none; }

/* Forced board hint */
#forced-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,188,212,0.1);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.85rem;
  color: var(--accent);
}
#forced-hint.free-choice {
  background: rgba(102,187,106,0.1);
  border-color: #66bb6a;
  color: #66bb6a;
}

/* ── Super Board ─────────────────────────────────────────────────────────── */
#super-board-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

#super-board {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: var(--Mgap);
  background: var(--border2);
  border: 3px solid var(--border2);
  border-radius: 10px;
  padding: 3px;
}

/* Macro cell */
.macro-cell {
  background: var(--surface2);
  border: var(--Mborder) solid var(--border);
  border-radius: 5px;
  padding: var(--Mpad);
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.macro-cell.forced {
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px var(--accent);
}
.macro-cell.available {
  border-color: rgba(0,188,212,0.4);
}
.macro-cell.available:hover {
  border-color: var(--accent);
}
.macro-cell.macro-won {
  border-width: 3px;
}
.macro-cell.win-line-cell {
  box-shadow: 0 0 16px var(--win-glow, #fff);
}

/* Micro grid */
.micro-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--micro));
  grid-template-rows: repeat(4, var(--micro));
  gap: var(--mgap);
}

/* Micro cell */
.micro-cell {
  width: var(--micro);
  height: var(--micro);
  background: var(--surface);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background 0.15s;
}
.micro-cell.playable {
  cursor: pointer;
  background: rgba(0,188,212,0.08);
}
.micro-cell.playable:hover {
  background: rgba(0,188,212,0.2);
}
.micro-cell.last-move {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

/* ── Symbols ─────────────────────────────────────────────────────────────── */

/* Micro symbols – rendered as CSS shapes */
.sym {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68%; height: 68%;
  pointer-events: none;
}

.sym-circle {
  border-radius: 50%;
  background: var(--pc, #fff);
  width: 65%; height: 65%;
}
.sym-square {
  background: var(--pc, #fff);
  width: 55%; height: 55%;
  border-radius: 1px;
}
.sym-cross {
  position: relative;
  width: 68%; height: 68%;
}
.sym-cross::before,
.sym-cross::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 90%; height: 22%;
  background: var(--pc, #fff);
  transform-origin: center;
  border-radius: 2px;
  translate: -50% -50%;
}
.sym-cross::before { rotate: 45deg; }
.sym-cross::after  { rotate: -45deg; }

.sym-triangle {
  width: 0; height: 0;
  background: transparent !important;
  border-style: solid;
  border-top: 0;
  border-left:  calc(var(--micro) * 0.38) solid transparent;
  border-right: calc(var(--micro) * 0.38) solid transparent;
  border-bottom: calc(var(--micro) * 0.65) solid var(--pc, #fff);
}

/* ── Macro Won Overlay ───────────────────────────────────────────────────── */
.macro-won-overlay {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(1px);
  animation: macro-pop 0.3s ease-out;
}
@keyframes macro-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Large symbols for macro won cells */
.macro-sym {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.macro-sym-circle {
  width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pc, #fff);
  box-shadow: 0 0 16px var(--pc, #fff);
}
.macro-sym-square {
  width: 52%; aspect-ratio: 1;
  background: var(--pc, #fff);
  border-radius: 3px;
  box-shadow: 0 0 16px var(--pc, #fff);
}
.macro-sym-cross {
  position: relative;
  width: 60%; height: 60%;
}
.macro-sym-cross::before,
.macro-sym-cross::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 90%; height: 22%;
  background: var(--pc, #fff);
  transform-origin: center;
  translate: -50% -50%;
  border-radius: 3px;
  box-shadow: 0 0 10px var(--pc, #fff);
}
.macro-sym-cross::before { rotate: 45deg; }
.macro-sym-cross::after  { rotate: -45deg; }
.macro-sym-triangle {
  width: 0; height: 0;
  background: transparent !important;
  border-style: solid;
  border-top: 0;
  filter: drop-shadow(0 0 8px var(--pc, #fff));
}
.macro-cell .macro-sym-triangle {
  border-left:  calc(var(--Mborder) * 6 + var(--micro) * 1.2) solid transparent;
  border-right: calc(var(--Mborder) * 6 + var(--micro) * 1.2) solid transparent;
  border-bottom: calc(var(--Mborder) * 8 + var(--micro) * 2.2) solid var(--pc, #fff);
}

/* Draw macro cell */
.macro-draw-overlay {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  color: var(--text2);
  font-size: calc(var(--micro) * 1.8);
  font-weight: bold;
}

/* ── Game Controls ───────────────────────────────────────────────────────── */
#game-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}

/* ── Zoom Overlay (touch / mobile) ──────────────────────────────────────── */
/* zoom-cell: 4 cells fill ~88vw capped at 380px, minus padding (40px) and gaps (9px) */
:root {
  --zoom-cell: clamp(50px, calc((min(88vw, 380px) - 49px) / 4), 76px);
}

#zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.zoom-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 2px solid var(--border2);
  border-radius: 14px;
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: zoom-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zoom-pop {
  from { transform: scale(0.75); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.zoom-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#zoom-board-label {
  font-size: 0.9rem;
  color: var(--text2);
}
.zoom-close-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 1rem;
  width: 30px; height: 30px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.zoom-close-btn:hover,
.zoom-close-btn:active { border-color: var(--accent); color: var(--accent); }

.zoom-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--zoom-cell));
  grid-template-rows:    repeat(4, var(--zoom-cell));
  gap: 3px;
  position: relative;
  /* Override --micro so sym-triangle scales to zoom cell size */
  --micro: var(--zoom-cell);
}
.zoom-micro-cell {
  width: var(--zoom-cell);
  height: var(--zoom-cell);
  background: var(--surface2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.zoom-micro-cell.playable {
  cursor: pointer;
  background: rgba(0,188,212,0.08);
  border: 1px solid rgba(0,188,212,0.22);
}
.zoom-micro-cell.playable:active {
  background: rgba(0,188,212,0.3);
  transform: scale(0.93);
}
.zoom-micro-cell.last-move {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}
.zoom-won-overlay {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  pointer-events: none;
}
.zoom-hint {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text2);
  padding: 7px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.zoom-hint.my-turn {
  color: var(--accent);
  background: rgba(0,188,212,0.08);
  border-color: rgba(0,188,212,0.3);
}

/* Touch: macro cell is tappable to open zoom */
.macro-cell.touch-zoomable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.macro-cell.touch-zoomable:active { opacity: 0.75; }

/* ── Result Overlay ──────────────────────────────────────────────────────── */
#result-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
#result-content {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: result-pop 0.4s ease-out;
}
@keyframes result-pop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.result-sym-big {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.result-title { font-size: 1.5rem; font-weight: bold; }
.result-subtitle { color: var(--text2); font-size: 0.9rem; }
.result-btns { display: flex; flex-direction: column; gap: 8px; }