/* ==========================================================================
   game.css - console, dice, tokens, settings dialog, winner overlay
   ========================================================================== */

/* ------------------------------ console -------------------------------- */

.console-card {
  width: 100%;
  margin: 0;
  padding: 22px;
  background: var(--paper);
  border: 1.6px solid var(--ink);
  border-radius: 16px;
  box-shadow: 7px 8px 0 -2px rgba(24, 21, 18, .82);
}

.scoreboard { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }

.scoreboard .side {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  transition: border-color .2s, background-color .2s;
}
.scoreboard .side.is-turn { border-color: var(--ink); background: rgba(24, 21, 18, .055); }

.scoreboard .dot {
  width: 14px; height: 14px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--ink);
}
.scoreboard .name {
  font-family: var(--font-display);
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scoreboard .sq {
  margin-left: auto;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.scoreboard .vs {
  font-family: var(--font-display);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}

/* -------------------------------- dice --------------------------------- */

/* dice stacked, with the roll button underneath them */
.dice-row { display: flex; flex-direction: column; gap: 13px; }

/* the bars, stacked one above the other.  align-self: stretch (rather than
   centre) gives .dice-pair a definite width so the bars can cap themselves
   with max-width: 100% instead of overflowing a narrow card. */
.dice-pair {
  display: flex; flex-direction: column; gap: 8px;
  flex: none; align-self: stretch; align-items: center;
}

/* smaller than the stock button — it sits under the dice, not beside them */
.dice-row .btn { padding: 11px 18px; font-size: .72rem; }

/* A brass bar rather than a cube: a long turned rod with a pointed cap at one
   end, a chamfered cap at the other, a fine seam running its length, and
   recessed pips.
   The body is background-clip: content-box so the caps stand proud of it.
   Without that the square body would poke out through the triangular gaps
   beside each point and the silhouette would read as a rectangle again.
   There is deliberately no border: a border traces the border-box, so it would
   draw a rectangle behind the points.  The outline is a 0-blur drop-shadow
   instead, which follows the clipped silhouette. */
.die {
  position: relative;
  width: 158px; max-width: 100%; height: 38px;
  flex: none;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  /* turned brass: a bright band above centre falling away to a shaded base,
     plus the fine seam down the middle.  Keep the top edge only slightly
     darker than the highlight -- a dark rim here reads as a frame around the
     bar rather than a lit cylinder. */
  background:
    linear-gradient(180deg,
      rgba(72, 50, 10, 0) calc(50% - .5px), rgba(72, 50, 10, .38) calc(50% - .5px),
      rgba(72, 50, 10, .38) calc(50% + .5px), rgba(72, 50, 10, 0) calc(50% + .5px)),
    linear-gradient(180deg,
      #b8973f 0%, #d4b96e 8%, #f6ecc2 30%, #eadd9e 48%,
      #cdae5f 70%, #a5822f 90%, #8e6f28 100%);
  background-clip: content-box, content-box;
  filter:
    drop-shadow(0 0 .5px #2f2007)
    drop-shadow(2px 3px 0 rgba(24, 21, 18, .78));
}

/* the two turned end caps.  16px against 15px of padding, so they overlap the
   body by a hairline — butting them up exactly risks a seam at some zoom. */
.die::before, .die::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 16px;
  background: linear-gradient(180deg,
    #b8994a 0%, #9c7c30 28%, #836424 58%, #6d5219 84%, #5e4515 100%);
}
/* pointed end */
.die::before {
  left: 0;
  clip-path: polygon(0 50%, 46% 0, 100% 0, 100% 100%, 46% 100%);
}
/* chamfered end */
.die::after {
  right: 0;
  clip-path: polygon(0 0, 62% 0, 100% 26%, 100% 74%, 62% 100%, 0 100%);
}

.die .pip {
  width: 10px; height: 10px; border-radius: 50%;
  /* pips read as drilled into the metal: dark well, lit lower lip, raised rim */
  background: radial-gradient(circle at 36% 30%,
    #8a6b24 0%, #523c11 45%, #2b1f06 100%);
  box-shadow:
    inset 0 1.5px 2px rgba(0, 0, 0, .75),
    inset 0 -1px 1.5px rgba(255, 240, 195, .38),
    0 1px 0 rgba(255, 249, 222, .62),
    0 0 0 1px rgba(58, 40, 8, .55);
  opacity: 0;
  justify-self: center; align-self: center;
  transition: opacity .1s;
}
.die.is-rolling { animation: die-shake .28s linear infinite; }

/* a longer body needs a shallower shake, or the ends sweep too far */
@keyframes die-shake {
  0%   { transform: rotate(-5deg) translateY(0); }
  50%  { transform: rotate(5deg) translateY(-3px); }
  100% { transform: rotate(-5deg) translateY(0); }
}

/* Pip faces.  Two of them are laid out for a LONG body rather than a square:
   3 is a row along the middle (matching the reference bar) instead of the
   usual diagonal, and 6 is two rows of three instead of two columns — two
   columns would bunch at the far ends and leave the middle of the bar empty. */
.die[data-value="1"] .p5,
.die[data-value="2"] .p1, .die[data-value="2"] .p9,
.die[data-value="3"] .p4, .die[data-value="3"] .p5, .die[data-value="3"] .p6,
.die[data-value="4"] .p1, .die[data-value="4"] .p3, .die[data-value="4"] .p7, .die[data-value="4"] .p9,
.die[data-value="5"] .p1, .die[data-value="5"] .p3, .die[data-value="5"] .p5, .die[data-value="5"] .p7, .die[data-value="5"] .p9,
.die[data-value="6"] .p1, .die[data-value="6"] .p2, .die[data-value="6"] .p3,
.die[data-value="6"] .p7, .die[data-value="6"] .p8, .die[data-value="6"] .p9 { opacity: 1; }

/* -------------------------------- hint --------------------------------- */

.hint {
  margin: 16px 0 0; min-height: 1.35em;
  font-size: .86rem; letter-spacing: .02em; color: var(--ink-soft);
}

/* --------------------------------- log --------------------------------- */

.log {
  margin-top: 14px; max-height: 148px; overflow-y: auto;
  padding: 12px 12px 4px;
  background: rgba(24, 21, 18, .045);
  border-radius: 10px;
  font-size: .83rem; line-height: 1.5;
}
.log p {
  margin: 0 0 8px; padding-left: 11px;
  border-left: 3px solid rgba(24, 21, 18, .25);
  color: var(--ink-soft);
}
.log p.good { border-left-color: var(--green); color: var(--green); }
.log p.bad  { border-left-color: #9d4a20;      color: #9d4a20; }
.log p.warn { border-left-color: #b8860b;      color: #8a6408; }
.log p b { color: var(--ink); }

.console-card #newGameBtn { margin-top: 14px; }

/* ---------------------------- icon button ------------------------------ */

.icon-btn {
  margin-left: auto;
  flex: none;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .18s, color .18s, transform .3s;
}
.icon-btn:hover { background: var(--ink); color: var(--cream); }
.icon-btn:hover svg { transform: rotate(45deg); }
.icon-btn svg { width: 19px; height: 19px; transition: transform .35s ease; }

/* --------------------------- settings dialog ---------------------------- */

.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.settings-modal[hidden] { display: none; }

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 21, 18, .48);
  backdrop-filter: blur(2px);
}

.settings-panel {
  position: relative;
  width: min(390px, 100%);
  padding: 26px 24px 22px;
  background: var(--paper);
  border: 1.6px solid var(--ink);
  border-radius: 16px;
  box-shadow: 9px 10px 0 -3px rgba(24, 21, 18, .85);
}
.settings-panel h3 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.settings-panel label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.settings-panel input {
  width: 100%;
  margin-bottom: 18px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
}
.settings-panel input:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.settings-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ------------------------------- tokens -------------------------------- */

.token-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

/* Just the symbol — no disc, border or fill behind it.  The colour is set on
   the element from the player's colour and the icon picks it up through
   currentColor.  The box is a little wider than the symbol looks, because the
   glyph only fills ~60% of its viewBox.  THIS IS THE ONE KNOB for symbol size;
   if you change it, scale the spread in layoutTokens() (js/game.js) to match or
   two tokens sharing a square will collide. */
.token {
  position: absolute;
  width: 5.04%;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%);
  transition: left .17s linear, top .17s linear;
  will-change: left, top;
  z-index: 1;
}
.token svg { width: 100%; height: 100%; display: block; }

/* With no disc there is nothing to ring, so the active player's symbol is
   outlined in gold instead: four stacked shadows trace its own silhouette. */
.token.is-active { z-index: 6; }
.token.is-active svg {
  filter:
    drop-shadow(0 1px 0 rgba(247, 207, 58, .95))
    drop-shadow(0 -1px 0 rgba(247, 207, 58, .95))
    drop-shadow(1px 0 0 rgba(247, 207, 58, .95))
    drop-shadow(-1px 0 0 rgba(247, 207, 58, .95));
}

.token.is-gliding {
  z-index: 7;
  transition: left .62s cubic-bezier(.42, -0.25, .5, 1.25),
              top  .62s cubic-bezier(.42, -0.25, .5, 1.25);
}

.token.is-hopping { animation: token-hop .17s ease; }

@keyframes token-hop {
  50% { transform: translate(-50%, -50%) scale(1.22); }
}

/* ------------------------------- winner -------------------------------- */

.winner {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center;
  background: rgba(253, 246, 230, .93);
  backdrop-filter: blur(3px);
}
.winner[hidden] { display: none; }

.winner .dot {
  width: 54px; height: 54px; margin-bottom: 4px;
  border-radius: 50%; border: 2.5px solid var(--ink);
}
.winner h3 {
  margin: 0;
  /* wraps instead of overflowing the board when a long player name wins */
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
  font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
}
.winner p {
  margin: 0 0 8px; max-width: 34ch;
  font-size: .93rem; color: var(--ink-soft);
}

/* ------------------------------ responsive ----------------------------- */

@media (max-width: 880px) {
  .console-card { max-width: none; }
}