:root {
  color-scheme: dark;
  --bg: #0b1020; --fg: #e8eefc; --muted: #8a97b8; --panel: #121a33; --line: #2a3555;
  --light: #d9dfef; --dark: #5b6b9a;
  --a: #3b82f6; --b: #f97316;
  --info-h: 10dvh; --choices-h: 20dvh;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; overscroll-behavior: none; }
#app { height: 100dvh; display: grid; grid-template-rows: var(--info-h) 1fr var(--choices-h); }

#info { display: flex; align-items: stretch; gap: .35rem; padding: calc(env(safe-area-inset-top) + .3rem) .45rem .3rem;
  border-bottom: 1px solid var(--line); background: var(--panel); }
/* Player cards: you on the left, opponent mirrored on the right. */
.card { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; justify-content: center; gap: .1rem;
  padding: .2rem .45rem .4rem; border-radius: .55rem; background: rgba(255,255,255,.03); transition: background .2s, box-shadow .2s; }
.card.active { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--line); }
.card.pulse { animation: card-pulse .45s ease-out; }
@keyframes card-pulse { 0% { box-shadow: inset 0 0 0 2px var(--fg); } 100% { box-shadow: inset 0 0 0 1px var(--line); } }

/* AI Avatar thinking animation */
.card.thinking {
  box-shadow: inset 0 0 0 1.5px #3b82f6, 0 0 12px rgba(59, 130, 246, 0.3) !important;
}
.card.thinking .flag {
  display: inline-block;
  animation: avatar-thinking 0.85s ease-in-out infinite alternate;
}
@keyframes avatar-thinking {
  0% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)); }
  100% { transform: scale(1.22) translateY(-2px); filter: drop-shadow(0 0 8px #60a5fa); }
}

.card-top { display: flex; align-items: center; gap: .3rem; white-space: nowrap; overflow: hidden; font-weight: 600; font-size: .95rem; min-height: 1.3rem; }
.card-opp .card-top, .card-opp .card-bottom { flex-direction: row-reverse; }
.card .name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card .flag { flex-shrink: 0; }
.card-bottom { display: flex; align-items: center; gap: .35rem; min-height: 1rem; font-size: .75rem; color: var(--muted); }
.caps { display: flex; align-items: center; }
.card-opp .caps { flex-direction: row-reverse; }
.caps img { width: .95rem; height: .95rem; margin-right: -.3rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.card-opp .caps img { margin-right: 0; margin-left: -.3rem; }
.caps:empty { display: none; }\n.material { font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.material:empty { display: none; }
/* Clock slot, reserved for time controls. Shown only when a clock is active. */
.clock { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg); }
.card-opp .clock { margin-left: 0; margin-right: auto; }
.clock[hidden] { display: none; }
.card.low-time .clock { color: #ef4444; animation: clock-pulse 1s ease-in-out infinite; }
@keyframes clock-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

#center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-width: 2.6rem; }
#move-no { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; text-align: center; line-height: 1; }
#move-no b { display: block; font-size: 1.05rem; color: var(--fg); letter-spacing: 0; margin-bottom: .1rem; }
#conn { width: .45rem; height: .45rem; border-radius: 50%; transition: background .3s; }
.conn-p2p { background: #22c55e; box-shadow: 0 0 6px #22c55e88; } .conn-relay { background: #f59e0b; } .conn-lost { background: #ef4444; } .conn-none { background: var(--line); }
#status { font-size: .68rem; font-weight: 700; color: #fbbf24; text-align: center; white-space: nowrap; line-height: 1.1; }
#status:empty { display: none; }
#status.bad { color: #ef4444; }

.pip { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; flex-shrink: 0; }
.pip:empty:not([class*="pip-"]) { display: none; }
.pip-w { background: #ffffff; border: 1.5px solid #2a3555; box-shadow: 0 0 4px rgba(255,255,255,0.4); }
.pip-b { background: #1a2035; border: 1.5px solid #8a97b8; box-shadow: 0 0 4px rgba(0,0,0,0.5); }
.card .you { font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0; cursor: pointer; border-bottom: 1px dashed var(--muted); text-align: left; }
.card .name-edit { font: inherit; font-weight: 600; color: var(--fg); background: var(--bg); border: 1px solid var(--a); border-radius: .3rem; padding: .05rem .3rem; width: 100%; min-width: 0; }
.muted { color: var(--muted); font-size: .85rem; margin: .25rem 0 .5rem; }
dialog input[type=text] { margin-left: .5rem; padding: .3rem .5rem; border-radius: .4rem; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: 1rem; width: 11rem; }
#settings-btn { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: .5rem;
  font-size: .95rem; width: 1.9rem; height: 1.9rem; align-self: center; cursor: pointer; flex-shrink: 0; }

#board-wrap { position: relative; display: grid; place-items: center; padding: .5rem; min-height: 0; }
#board { width: min(100%, calc(100dvh - var(--info-h) - var(--choices-h) - 1rem)); aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border-radius: .6rem; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); user-select: none; }
.sq { position: relative; display: grid; place-items: center; user-select: none; }
.sq.light { background-color: var(--light); }
.sq.dark { background-color: var(--dark); }

/* Coordinates */
.coord { position: absolute; font-size: clamp(0.55rem, 1.8vmin, 0.72rem); font-weight: 700; line-height: 1; pointer-events: none; user-select: none; opacity: 0.7; z-index: 1; }
.sq.light .coord { color: #5b6b9a; }
.sq.dark .coord { color: #d9dfef; }
.coord-file { right: 3px; bottom: 2px; }
.coord-rank { left: 3px; top: 2px; }

/* Last move */
.sq.last { background-color: #cbd47c !important; }

/* In check */
.sq.in-check {
  background-color: #b94a48 !important;
}

/* Illumination overlay layer - sits cleanly above the tile without destroying the tile background */
.sq::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, box-shadow .18s ease;
  z-index: 1;
}

/* Illuminated candidate origin squares */
.sq.from-a::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.32) 0%, rgba(59, 130, 246, 0.08) 100%);
  box-shadow: inset 0 0 0 3px var(--a), inset 0 0 16px rgba(59, 130, 246, 0.45);
}
.sq.from-b::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.32) 0%, rgba(249, 115, 22, 0.08) 100%);
  box-shadow: inset 0 0 0 3px var(--b), inset 0 0 16px rgba(249, 115, 22, 0.45);
}
.sq.from-a.from-b::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.32) 0%, rgba(168, 85, 247, 0.08) 100%);
  box-shadow: inset 0 0 0 3px #a855f7, inset 0 0 16px rgba(168, 85, 247, 0.45);
}

/* Illuminated candidate destination squares */
.sq.to-a::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.12) 100%);
  box-shadow: inset 0 0 0 3px var(--a), inset 0 0 20px rgba(59, 130, 246, 0.55);
}
.sq.to-b::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, rgba(249, 115, 22, 0.12) 100%);
  box-shadow: inset 0 0 0 3px var(--b), inset 0 0 20px rgba(249, 115, 22, 0.55);
}

/* Faint illuminated path squares (waypoints) */
.sq.path-a::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, transparent 80%);
  box-shadow: inset 0 0 0 1.5px rgba(59, 130, 246, 0.3);
}
.sq.path-b::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.16) 0%, transparent 80%);
  box-shadow: inset 0 0 0 1.5px rgba(249, 115, 22, 0.3);
}
.sq.path-a.path-b::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, transparent 80%);
  box-shadow: inset 0 0 0 1.5px rgba(168, 85, 247, 0.35);
}

/* Subtle connecting path waypoint indicator */
.sq.path-a::after, .sq.path-b::after {
  content: '';
  position: absolute;
  width: 14%;
  height: 14%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  transition: opacity .18s ease, background .18s ease, box-shadow .18s ease;
}
.sq.path-a::after { background: var(--a); opacity: 0.65; box-shadow: 0 0 6px var(--a); }
.sq.path-b::after { background: var(--b); opacity: 0.65; box-shadow: 0 0 6px var(--b); }
.sq.path-a.path-b::after { background: #a855f7; opacity: 0.75; box-shadow: 0 0 6px #a855f7; }

/* Badges on squares (A and B tags on both initial and target squares) */
.badges-wrap {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 2px;
  z-index: 5;
  pointer-events: none;
}
.sq-badge {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: .28rem;
  color: #fff;
  font-size: .74rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
  animation: badge-pop .15s ease-out;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
@keyframes badge-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.badge-a { background: var(--a); border: 1px solid rgba(255, 255, 255, 0.85); }
.badge-b { background: var(--b); border: 1px solid rgba(255, 255, 255, 0.85); }

/* Spotlight Mode: Focus A */
#board.focus-a .from-b:not(.from-a)::before,
#board.focus-a .to-b:not(.path-a)::before,
#board.focus-a .path-b:not(.path-a)::before {
  opacity: 0.08;
}
#board.focus-a .path-b:not(.path-a)::after {
  opacity: 0.06;
}
#board.focus-a .badge-b {
  opacity: 0.15;
  transform: scale(0.85);
}
#board.focus-a .from-a::before {
  box-shadow: inset 0 0 0 3.5px var(--a), inset 0 0 24px rgba(59, 130, 246, 0.65);
}
#board.focus-a .to-a::before {
  box-shadow: inset 0 0 0 3.5px var(--a), inset 0 0 26px rgba(59, 130, 246, 0.75);
}
#board.focus-a .to-a::after {
  opacity: 0;
}
#board.focus-a .badge-a {
  transform: scale(1.15);
  box-shadow: 0 0 12px var(--a), 0 3px 8px rgba(0,0,0,0.5);
}
#board.focus-a .sq.path-a::before {
  opacity: 1 !important;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 80%) !important;
  box-shadow: inset 0 0 0 1.5px rgba(59, 130, 246, 0.45) !important;
}
#board.focus-a .sq.path-a::after {
  background: var(--a) !important;
  opacity: 0.8 !important;
  box-shadow: 0 0 8px var(--a) !important;
}

/* Spotlight Mode: Focus B */
#board.focus-b .from-a:not(.from-b)::before,
#board.focus-b .to-a:not(.path-b)::before,
#board.focus-b .path-a:not(.path-b)::before {
  opacity: 0.08;
}
#board.focus-b .path-a:not(.path-b)::after {
  opacity: 0.06;
}
#board.focus-b .badge-a {
  opacity: 0.15;
  transform: scale(0.85);
}
#board.focus-b .from-b::before {
  box-shadow: inset 0 0 0 3.5px var(--b), inset 0 0 24px rgba(249, 115, 22, 0.65);
}
#board.focus-b .to-b::before {
  box-shadow: inset 0 0 0 3.5px var(--b), inset 0 0 26px rgba(249, 115, 22, 0.75);
}
#board.focus-b .to-b::after {
  opacity: 0;
}
#board.focus-b .badge-b {
  transform: scale(1.15);
  box-shadow: 0 0 12px var(--b), 0 3px 8px rgba(0,0,0,0.5);
}
#board.focus-b .sq.path-b::before {
  opacity: 1 !important;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.2) 0%, transparent 80%) !important;
  box-shadow: inset 0 0 0 1.5px rgba(249, 115, 22, 0.45) !important;
}
#board.focus-b .sq.path-b::after {
  background: var(--b) !important;
  opacity: 0.8 !important;
  box-shadow: 0 0 8px var(--b) !important;
}

/* Pieces & Animation */
.sq .p {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}
.ghost-captured {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.ghost-captured.fading {
  opacity: 0;
  transform: scale(0.75);
}

#overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,16,32,.75); z-index: 20; }
#overlay[hidden] { display: none; }
#overlay-card { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem 2rem; text-align: center; max-width: min(90vw, 22rem); }
#overlay-card h2 { margin: 0 0 .5rem; } #overlay-card p { margin: 0 0 1rem; color: var(--muted); white-space: pre-line; }
.overlay-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
#alt-btn { font-size: 1rem; padding: .6rem 1.1rem; border-radius: .6rem; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; }
#alt-btn[hidden] { display: none; }
#again-btn[hidden] { display: none; }
#again-btn { font-size: 1.1rem; padding: .6rem 1.4rem; border-radius: .6rem; border: none; background: var(--fg); color: var(--bg); cursor: pointer; }

/* Choice buttons: 95% focus on A and B, secondary info in small/low-contrast font */
#choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  padding: .6rem .75rem;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.1rem;
  color: #fff;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease, opacity .15s ease, box-shadow .15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.choice:hover:not(:disabled) { filter: brightness(1.08); }
.choice:active:not(:disabled) { transform: scale(.97); }
.choice:disabled { opacity: .3; cursor: default; box-shadow: none; }
#btn-a { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); }
#btn-b { background: linear-gradient(180deg, #f97316 0%, #ea580c 100%); }

/* Choice buttons thinking state */
.choice.thinking {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px dashed rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  animation: choice-thinking 1.1s ease-in-out infinite alternate;
  cursor: wait;
}
@keyframes choice-thinking {
  0% { opacity: 0.4; border-color: rgba(255, 255, 255, 0.15); }
  100% { opacity: 0.75; border-color: rgba(96, 165, 250, 0.45); }
}
.choice.thinking .tag {
  opacity: 0.35;
  animation: tag-dots 1s ease-in-out infinite;
}
@keyframes tag-dots {
  0%, 100% { transform: translateY(-0.18rem) scale(0.95); opacity: 0.25; }
  50% { transform: translateY(-0.18rem) scale(1.08); opacity: 0.6; }
}
.choice.thinking .choice-sub {
  opacity: 0.85;
  color: #93c5fd;
  font-weight: 600;
}

.choice .tag {
  font-size: clamp(2.8rem, 8vmin, 4.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transform: translateY(-0.18rem);
}

.choice-sub {
  position: absolute;
  bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.55;
  color: rgba(255, 255, 255, 0.85);
  font-family: ui-monospace, Menlo, monospace;
}
.choice .choice-detail:empty { display: none; }

dialog { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem 1.5rem; min-width: 16rem; }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h3 { margin: 0 0 .75rem; } dialog label { display: block; margin: .5rem 0; }
dialog select { margin-left: .5rem; } dialog menu { display: flex; gap: .5rem; justify-content: flex-end; padding: 0; margin: 1rem 0 0; }
dialog button { padding: .4rem .9rem; border-radius: .5rem; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; }
#settings-meta { color: var(--muted); font-size: .8rem; font-family: ui-monospace, Menlo, monospace; }

/* PWA rows in settings */
#install-btn { width: 100%; }
#install-hint .share-glyph { display: inline-block; padding: 0 .15rem; }