/* Fitdoku — punoqun.com skin.
 *
 * Loaded after the prototype's own css/style.css, which is vendored verbatim
 * from the game repo and must stay editable upstream. Everything here is an
 * override layer: it re-points the prototype's design tokens at the "Bone"
 * palette from the game's art direction (docs/art-audio.md §3.1), adds a dark
 * column, and lifts the chrome — layout structure and behaviour are untouched.
 *
 * Selectors deliberately mirror css/style.css so equal specificity is resolved
 * by source order rather than by piling on !important.
 */

:root {
  color-scheme: light dark;

  /* --- Bone, light --- */
  --bg: #ECE7DD;
  --board-bg: #F5F2EA;
  --ink: #2A251D;
  --line-thin: #DFD8C7;
  --line-heavy: #8A8069;
  --given-bg: #EAE4D6;
  --given-ink: #201C15;
  --piece-bg: #FCFBF8;
  --piece-border: #C7BFAF;
  --piece-selected-bg: #FCFBF8;
  --piece-selected-border: #35618E;
  --conflict-bg: #F7DEDA;
  --conflict-ink: #97331F;
  --conflict-border: #C0563C;
  --success: #2E7D5B;
  --disabled: #A79E8A;
  --shadow: 0 1px 2px rgba(32, 28, 21, .06), 0 8px 24px rgba(32, 28, 21, .07);

  /* --- skin-only tokens --- */
  --surface-raised: #F5F2EA;
  --surface-sunken: #E4DED1;
  --hairline: #D2CAB8;
  --ink-muted: #6A6250;
  --accent: #35618E;
  --accent-ink: #FCFBF8;
  --accent-wash: rgba(53, 97, 142, .12);
  --hint: #1E7A8C;
  --success-bg: #DCEEE3;
  --placed-ring: rgba(138, 128, 105, .32);
  --scrim: rgba(32, 28, 21, .5);
  --shadow-lift: 0 2px 4px rgba(32, 28, 21, .08), 0 18px 44px rgba(32, 28, 21, .12);
  --radius: 12px;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13120E;
    --board-bg: #1E1B15;
    --ink: #E9E1CF;
    --line-thin: #322D24;
    --line-heavy: #8B8166;
    --given-bg: #191610;
    --given-ink: #F2ECDC;
    --piece-bg: #332E23;
    --piece-border: #4A4331;
    --piece-selected-bg: #332E23;
    --piece-selected-border: #6BA6DE;
    --conflict-bg: #3A1F1A;
    --conflict-ink: #F3B5A5;
    --conflict-border: #B4553C;
    --success: #54BE86;
    --disabled: #726E5D;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);

    --surface-raised: #1B1913;
    --surface-sunken: #0E0D0A;
    --hairline: #2E2A21;
    --ink-muted: #9A927C;
    --accent: #6BA6DE;
    --accent-ink: #13120E;
    --accent-wash: rgba(107, 166, 222, .16);
    --hint: #47B3C6;
    --success-bg: #183227;
    --placed-ring: rgba(167, 155, 124, .42);
    --scrim: rgba(0, 0, 0, .62);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 44px rgba(0, 0, 0, .5);
  }
}

/* ---------- shell ---------- */

body {
  min-height: 100dvh;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--surface-raised) 0%, transparent 62%),
    var(--bg);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

#app {
  --gutter: 14px;
  max-width: 468px;
  min-height: 100dvh;
  padding: 0 var(--gutter);
  gap: 0;
}

/* On anything roomier than a phone the app reads as a single raised panel
   instead of a narrow column stranded on an empty page. */
@media (min-width: 560px) and (min-height: 720px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
  }

  #app {
    --gutter: 22px;
    min-height: 0;
    padding: 6px var(--gutter) 0;
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    box-shadow: var(--shadow-lift);
  }
}

/* ---------- top bar ---------- */

#topbar {
  padding: 16px 0 12px;
  gap: 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 14px;
}

#brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--given-ink);
}

/* The accent square doubles as the favicon mark. */
#brand::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  order: 1;
}

#brand .tag {
  order: 2;
  margin-left: 1px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

#hud {
  gap: 8px;
}

#clock {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  min-width: 104px;
  color: var(--given-ink);
}

#conflict-badge {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 999px;
}

#hints-used {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

#puzzle-picker-wrap {
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

#puzzle-picker {
  flex: 1;
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  cursor: pointer;
}

/* ---------- board ---------- */

#board {
  width: 100%;
  background: var(--board-bg);
  border: 2px solid var(--line-heavy);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cell {
  font-size: clamp(15px, 4.6vw, 23px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  border-right-color: var(--line-thin);
  border-bottom-color: var(--line-thin);
  transition: background-color 110ms ease, box-shadow 110ms ease;
}

.cell.box-right { border-right: 2px solid var(--line-heavy); }
.cell.box-bottom { border-bottom: 2px solid var(--line-heavy); }

.cell.given {
  background: var(--given-bg);
  color: var(--given-ink);
  font-weight: 700;
}

/* Placed cells read as pieces you dropped: brighter fill, quiet silhouette. */
.cell.placed {
  background: var(--piece-bg);
  box-shadow: inset 0 0 0 1px var(--placed-ring);
}

.cell.conflict {
  background: var(--conflict-bg);
  color: var(--conflict-ink);
  font-weight: 700;
  box-shadow: none;
}

.cell.conflict::after {
  border-width: 0 34% 34% 0;
}

.cell.drop-target-ok {
  background: var(--accent-wash);
  outline: 2px solid var(--piece-selected-border);
  outline-offset: -2px;
}

.cell.drop-target-bad {
  outline: 2px solid var(--conflict-border);
  outline-offset: -2px;
}

#full-not-solved-banner {
  margin-top: 12px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
}

/* ---------- tray ---------- */

#tray-wrap {
  margin-top: 14px;
  padding: 0;
  overflow: visible;
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

#tray {
  --pc-size: 28px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: 0;
  padding: 12px 10px;
}

/* Upstream paints the tile background behind the cells, which fills a
   polyomino's concave holes and makes every piece read as a rectangle. The
   silhouette has to come from the cells themselves instead. */
.piece-tile {
  gap: 1px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(32, 28, 21, .16));
  transition: transform 120ms ease, filter 120ms ease;
}

.piece-tile:hover { transform: translateY(-2px); }

.piece-tile.selected {
  transform: translateY(-2px);
  filter: drop-shadow(0 3px 4px rgba(32, 28, 21, .22));
}

.piece-tile.unplaceable {
  opacity: .35;
  filter: grayscale(.7);
  transform: none;
}

.piece-tile .pc {
  width: var(--pc-size);
  height: var(--pc-size);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--piece-selected-bg);
  box-shadow: inset 0 0 0 1px var(--piece-border);
  border-radius: 4px;
}

.piece-tile .pc.empty {
  background: transparent;
  box-shadow: none;
}

.piece-tile.selected .pc:not(.empty) {
  color: var(--piece-selected-border);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1.5px var(--piece-selected-border);
}

#drag-ghost {
  opacity: .95;
  transform: scale(1.25);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}

/* ---------- action bar ---------- */

#actionbar {
  gap: 8px;
  padding: 14px 0 16px;
  background: linear-gradient(to top, var(--surface-raised) 62%, transparent);
}

@media (max-width: 559px) {
  /* Fills the viewport, so balance the play area instead of stranding it at
     the top with a gap above the sticky action bar. */
  #board-wrap { margin-top: auto; }
  #actionbar { background: linear-gradient(to top, var(--bg) 62%, transparent); }
}

#actionbar button {
  padding: 12px 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

#actionbar button:hover:not(:disabled) {
  background: var(--board-bg);
  border-color: var(--line-heavy);
}

#actionbar button:disabled {
  color: var(--disabled);
  border-color: var(--hairline);
  background: transparent;
  cursor: default;
}

/* Hint is the one action that costs you something — mark it. */
#btn-hint:not(:disabled) {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

#btn-hint:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  filter: brightness(1.08);
}

#hint-cooldown-ring circle {
  stroke: currentColor;
  stroke-width: 5;
}

/* ---------- overlays ---------- */

#win-overlay {
  background: var(--scrim);
  backdrop-filter: blur(3px);
  padding: 20px;
}

#win-card {
  padding: 32px 36px;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
}

#win-card h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
}

#win-card p {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

#win-card button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 10px;
  cursor: pointer;
}

#toast {
  bottom: 96px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--given-ink);
  box-shadow: var(--shadow-lift);
}

/* ---------- focus & motion ---------- */

:focus-visible {
  outline: 2px solid var(--piece-selected-border);
  outline-offset: 2px;
}

.piece-tile:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .piece-tile:hover,
  .piece-tile.selected { transform: none; }
}