/* ============================================================================
 * File:    fun/l-game/css/style.css
 * App:     L-Game
 * Version: 1.0.4
 * Build:   2026-06-30
 *
 * Game layout + the signature element: a raised board whose pieces cast real
 * shadows and lift while held. Depth is done with SVG feDropShadow filters
 * (see index.html <defs>) plus a CSS box-shadow on the board frame. Tokens
 * come from ../../shared/theme.css.
 * ========================================================================== */

#app {
  max-width: 432px;   /* content = 400px, matches the board width (16px padding each side) */
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
  display: flex; flex-direction: column; align-items: center;
}

/* ---- top bar: title + global controls ---- */
.topbar {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .5rem;
}
.title {
  font-size: var(--fs-title); font-weight: 700; letter-spacing: -.01em;
  margin: 0; line-height: 1;
}
.home-btn { text-decoration: none; }
/* title + (Rules) link, baseline-aligned so Rules sits at the title's bottom */
.title-wrap { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.rules-link { font-size: var(--fs-small); color: var(--text-dim); text-decoration: none; white-space: nowrap; }
.rules-link:hover { color: var(--text); text-decoration: underline; }

/* ---- mode + bot level row ---- */
.config-row {
  width: 100%;
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  justify-content: center; margin: .35rem 0 .25rem;
}
.field { display: flex; align-items: center; gap: .4rem; }
.field > label {
  font-size: var(--fs-small); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .06em;
}
.field select {
  height: 36px; background: var(--btn-bg); color: var(--btn-text);
  border: 1px solid var(--btn-border); border-radius: var(--radius-sm);
  padding: 0 .55rem; font-family: var(--font); font-size: var(--fs-small);
  cursor: pointer;
}
.field select:focus-visible { outline: 2px solid var(--piece-blue); outline-offset: 2px; }

/* ---- score / players ---- */
.score {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin: .4rem 0 .8rem;
}
.score-side { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.score-side.right { flex-direction: row-reverse; }
.player-name {
  font-weight: 600; font-size: 1rem;
  background: none; border: none; color: var(--text);
  font-family: var(--font); padding: 2px 4px; border-radius: 4px;
  max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.player-name.editable { cursor: text; border-bottom: 1px dashed var(--line-strong); }
.player-name.editable:hover { background: var(--btn-bg-hover); }
.player-name:focus-visible { outline: 2px solid var(--piece-blue); outline-offset: 1px; }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.dot.red { background: var(--piece-red); }
.dot.blue { background: var(--piece-blue); }
.score-value { font-weight: 700; font-size: 1.35rem; min-width: 1.2ch; text-align: center; }
.score-colon { color: var(--text-dim); font-weight: 600; }

/* ---- board ---- */
.board-wrap {
  width: 100%; max-width: 400px; aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: var(--shadow-board);
  padding: 8px;
  transition: background var(--t-med), box-shadow var(--t-med);
}
#board { width: 100%; height: 100%; display: block; touch-action: none; }

/* board cells */
.cell { fill: var(--cell); stroke: var(--cell-line); stroke-width: 1; }

/* pieces — filled rounded rects / circles, each casts a shadow via filter */
.l-piece { rx: 4; }
.l-piece.red  { fill: var(--piece-red); }
.l-piece.blue { fill: var(--piece-blue); }
.neutral { fill: var(--neutral); }

.cast { filter: url(#pieceShadow); }
.cast-lift { filter: url(#pieceShadowLift); }

.neutral.selected { stroke: #f1c40f; stroke-width: 4; }
.paint { fill: var(--piece-red); opacity: .55; rx: 4; }

/* bot move animation hooks */
.anim-move { animation: pop var(--t-med) ease; }
@keyframes pop { 0% { transform: scale(.86); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.fade-out { animation: fadeout var(--t-med) ease forwards; }
@keyframes fadeout { to { opacity: 0; } }

/* ---- status line ---- */
.status {
  min-height: 1.5em; margin: .9rem 0 .5rem; text-align: center;
  font-weight: 500; font-size: 1.02rem;
}
.status.win  { color: var(--win); font-weight: 700; }
.status.lose { color: var(--lose); font-weight: 700; }
.status.bot  { color: var(--piece-blue); }

/* ---- controls ---- */
.controls { display: flex; gap: .6rem; margin-bottom: .6rem; justify-content: center; flex-wrap: wrap; }
/* New Game is used at a different stage than Undo/Done — set it apart with a wider gap. */
.newgame { margin-left: 1.5rem; }
.btn {
  min-width: 110px; height: 44px; padding: 0 1rem;
  background: var(--btn-bg); color: var(--btn-text);
  border: 1px solid var(--btn-border); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover:not(:disabled) { background: var(--btn-bg-hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { background: var(--btn-disabled-bg); color: var(--btn-disabled-text); cursor: default; }
.btn:focus-visible { outline: 2px solid var(--piece-blue); outline-offset: 2px; }
.btn-primary {
  background: var(--accent); color: var(--accent-text); border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }

/* ---- remote-mode panel ---- */
.remote-panel {
  width: 100%; margin: .6rem 0; padding: .8rem 1rem;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius-sm); text-align: center;
}
.remote-panel[hidden] { display: none; }
.share-row { display: flex; gap: .5rem; margin-top: .5rem; }
.share-row input {
  flex: 1; min-width: 0; height: 38px; padding: 0 .6rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--btn-border); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: var(--fs-small);
}

/* ---- responsive ---- */
@media (max-width: 420px) {
  .config-row { gap: .5rem; }
  .btn { min-width: 96px; }
  .player-name { max-width: 6.5rem; }
}