/* ==========================================================================
   DAILY PAWS — PAWDLE, IN THE NEW DESIGN
   shared/css/pawdle.css · loaded AFTER pawdle.css, restyles only what sits on top
   --------------------------------------------------------------------------
   DELIBERATELY DOES NOT TOUCH THE WALLPAPER.

   Pawdle's two backgrounds are drawn by `body.pw-body::before` in pawdle.css:
   the same photograph under a dark wash at night and a cream wash by day,
   plus the mobile crop rules. Nothing in this file sets a background on
   `body`, on `body::before` or on `body::after`, and nothing touches
   `.pw-bg` or its glows. The photograph and both washes stay exactly as
   they are; everything here is the furniture standing in front of them.

   Nothing here renames a class or an id either, so every hook
   pawdle-page.js drives — state-correct / state-present / state-absent,
   is-flipping, is-current-row, is-winning, is-shaking, pw-hc, light —
   keeps working untouched.
   ========================================================================== */

/* ── Tokens, scoped to the page ────────────────────────────────────────── */
body.pw-body{
  /* Pawdle's own stylesheet never set a body colour; it inherited cream from
     the site-wide body rule that has since moved to the edition's ink. Stated
     here so the board keeps the colour it has always had. */
  color: var(--cream);

  /* Type: the edition's three faces, with the old stacks as fallback */
  --pw-font-ui:   "DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pw-font-game: "Fraunces",Georgia,"Times New Roman",serif;
  --pw-font-head: "Fraunces",Georgia,serif;
  --pw-font-mono: "DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* The board's own surface — a table for the tiles to sit on */
  /* Translucent on purpose: the card gives the tiles a surface to sit on
     while the wallpaper behind it stays clearly in view. */
  --pwx-card:        radial-gradient(120% 120% at 32% -12%,rgba(58,38,18,.56) 0%,
                                     rgba(26,17,8,.62) 58%,rgba(18,12,6,.66) 100%);
  --pwx-card-line:   rgba(244,234,214,.18);
  --pwx-card-shadow: 0 30px 64px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(244,234,214,.10);

  /* Tile states, matched to the front page's Pawdle preview */
  --pw-correct: #55764A;
  --pw-present: #C98526;

  --pwx-ink:   #1F150C;
  --pwx-cream: #F4EAD6;
  --pwx-rust:  #BF4E1C;
  --pwx-rust-deep:#8F380F;
  --pwx-amber: #C98526;
  --pwx-e-out: cubic-bezier(.16,.84,.44,1);
  --pwx-e-spring: cubic-bezier(.32,1.32,.5,1);

  /* No card any more, so nothing extra to reserve: the board gets the full
     height between the masthead and the keyboard back. */
  --pw-topbar-h: calc(var(--nav-h,64px) + 8px);
}
body.pw-body.light{
  --pwx-card:        linear-gradient(168deg,rgba(252,247,238,.70) 0%,rgba(243,234,218,.66) 100%);
  --pwx-card-line:   rgba(31,21,12,.18);
  --pwx-card-shadow: 0 24px 54px -30px rgba(64,40,14,.4), inset 0 1px 0 rgba(255,255,255,.7);
}

/* ── The board ────────────────────────────────────────────────────────
   No card, by design. An earlier pass put a translucent panel behind the
   grid and it buried the dogs in the wallpaper; the board is meant to float
   on the photograph, which is what made the original read so well. The
   tiles carry their own edges, so nothing else is needed to hold the
   letters. Only the padding around the grid is kept, for breathing room. */
.pw-grid-wrap{ padding:clamp(10px,3vw,20px) clamp(14px,4vw,26px) }

/* ── Tiles ─────────────────────────────────────────────────────────────── */
.pw-tile{
  border-radius:clamp(8px,2.2vw,11px);
  border-width:1.5px;
  border-color:rgba(255,210,140,.30);
  background:rgba(255,210,140,.08);
  color:var(--pwx-cream);
  font-weight:700;
  letter-spacing:.02em;
  font-optical-sizing:auto;
  box-shadow:none;
}
/* A tile with a letter in it is solid: the letter is the thing being read,
   so it gets a proper ground. Only the empty boxes stay see-through. */
.pw-tile[data-letter]{
  border-color:rgba(255,210,140,.50);
  background:#2C1E11;
  box-shadow:inset 0 1px 0 rgba(255,230,160,.14);
  text-shadow:none;
}
body.pw-body.light .pw-tile{
  border-color:rgba(26,15,9,.20);
  background:rgba(255,255,255,.55);
  color:var(--pwx-ink);
  box-shadow:0 2px 8px -5px rgba(26,15,9,.3), inset 0 1px 0 rgba(255,255,255,.7);
}
body.pw-body.light .pw-tile[data-letter]{
  border-color:rgba(26,15,9,.38);
  background:#FFFDF8;
  box-shadow:0 3px 10px -5px rgba(26,15,9,.3), inset 0 1px 0 #FFFFFF;
}

/* Scored tiles read the same in both themes, as they did before */
.pw-tile.state-correct,
body.pw-body.light .pw-tile.state-correct{
  background:var(--pw-correct); border-color:var(--pw-correct); color:#FCF7EC;
  box-shadow:0 6px 18px -10px rgba(85,118,74,.9);
}
.pw-tile.state-present,
body.pw-body.light .pw-tile.state-present{
  background:var(--pw-present); border-color:var(--pw-present); color:#2A1B08;
  box-shadow:0 6px 18px -10px rgba(201,133,38,.9);
}
/* Scored-and-absent still holds a letter, so it stays solid too — just
   quieter than the green and amber. */
.pw-tile.state-absent{
  background:#241708; border-color:rgba(244,234,214,.12);
  color:rgba(244,234,214,.68); box-shadow:none; text-shadow:none;
}
body.pw-body.light .pw-tile.state-absent{
  background:#DCD3C4; border-color:rgba(26,15,9,.16);
  color:rgba(26,15,9,.56); box-shadow:none; text-shadow:none;
}

/* Active row: the same idea, drawn in the edition's rust and amber */
body.pw-body{
  --pw-tile-active-bg:  rgba(255,206,138,.16);
  --pw-row-active-border: rgba(201,133,38,.92);
  --pw-row-active-glow:   rgba(201,133,38,.34);
}
body.pw-body.light{
  --pw-tile-active-bg:  rgba(255,243,230,.92);
  --pw-row-active-border: #BF4E1C;
  --pw-row-active-glow:   rgba(191,78,28,.34);
}
.pw-row.is-current-row{ box-shadow:0 0 20px 3px var(--pw-row-active-glow) }
/* The row you are on is the single most important cue on the board, so its
   ring is stated outright. The extra `body.pw-body` is load-bearing: without
   it the themed .pw-tile rules above win on specificity and eat the border. */
body.pw-body .pw-row.is-current-row .pw-tile{
  border-color:var(--pw-row-active-border);
  box-shadow:0 0 0 1.5px var(--pw-row-active-border), 0 0 12px 1px var(--pw-row-active-glow);
}
body.pw-body .pw-row.is-current-row .pw-tile:not([data-letter]){
  background:var(--pw-tile-active-bg);
}

/* ── Keyboard ──────────────────────────────────────────────────────────
   The wrapper's height still comes from --pw-kb-h, which the grid maths
   depends on, so only the look inside it changes. */
.pw-kb-wrap{ border-top:0; background:transparent }
.pw-keyboard{ gap:7px; padding:10px 0 4px }
.pw-kb-row{ gap:5px }
.pw-key{
  border-radius:clamp(8px,2.2vw,11px);
  border-width:1px;
  border-color:rgba(244,234,214,.20);
  background:rgba(38,25,12,.66);
  color:var(--pwx-cream);
  font-family:var(--pw-font-ui);
  font-weight:600;
  font-size:15px;
  letter-spacing:.01em;
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  box-shadow:0 2px 8px -4px rgba(0,0,0,.6);
}
.pw-key--wide{ font-family:var(--pw-font-mono); font-size:11px; letter-spacing:.12em; font-weight:500 }
.pw-key--enter{
  background:
    linear-gradient(rgba(191,78,28,.42),rgba(191,78,28,.42)),
    rgba(38,25,12,.72);
  border-color:rgba(191,78,28,.62);
  color:#FFEBD8;
}
.pw-key:active,.pw-key.is-pressed{
  transform:scale(.94);
  background:rgba(244,234,214,.20);
  box-shadow:none;
}
body.pw-body.light .pw-key{
  background:rgba(255,253,248,.86);
  border-color:rgba(31,21,12,.14);
  color:var(--pwx-ink);
  box-shadow:0 2px 7px -3px rgba(64,40,14,.35), inset 0 1px 0 rgba(255,255,255,.9);
}
body.pw-body.light .pw-key--enter,
body.pw-body.light .pw-key--enter:not(.state-correct):not(.state-present):not(.state-absent){
  background:
    linear-gradient(rgba(191,78,28,.13),rgba(191,78,28,.13)),
    rgba(255,250,245,.92);
  border-color:rgba(191,78,28,.46);
  color:var(--pwx-rust-deep);
  box-shadow:0 2px 7px -3px rgba(143,56,15,.3), inset 0 1px 0 rgba(255,255,255,.85);
}
body.pw-body.light .pw-key:active,
body.pw-body.light .pw-key.is-pressed{ background:rgba(31,21,12,.12); box-shadow:none }

.pw-key.state-correct,
body.pw-body.light .pw-key.state-correct{
  background:var(--pw-correct); border-color:var(--pw-correct); color:#FCF7EC; box-shadow:none;
}
.pw-key.state-present,
body.pw-body.light .pw-key.state-present{
  background:var(--pw-present); border-color:var(--pw-present); color:#2A1B08; box-shadow:none;
}
/* Used-and-absent is the quietest thing on the board: the letter is spent, so
   the key keeps a whisper of its chestnut tint and the glyph drops to a ghost.
   An earlier pass kept the letter legible, which left spent keys reading as
   live ones next to the untouched keys beside them. */
.pw-key.state-absent{
  background:rgba(58,39,22,.26); border-color:rgba(213,155,91,.12);
  color:rgba(255,247,232,.14); font-weight:600;
  text-decoration:none; opacity:1; box-shadow:none;
}
body.pw-body.light .pw-key.state-absent{
  background:rgba(112,75,44,.22); border-color:rgba(155,104,56,.24);
  color:rgba(255,250,242,.72); font-weight:600;
  text-decoration:none; opacity:1; box-shadow:none;
}
/* High contrast is an accessibility setting and must win outright. The themed
   .state-* rules above are specificity (0,4,1); these are (0,4,2) so the
   high-contrast greens and ambers always beat the house palette, in both
   themes. Only the colours come from high contrast — the new shape stays. */
html body.pw-body.pw-hc .pw-tile.state-correct,
html body.pw-body.pw-hc .pw-key.state-correct{
  background:var(--pw-hc-correct); border-color:var(--pw-hc-correct); color:#fff;
}
html body.pw-body.pw-hc .pw-tile.state-present,
html body.pw-body.pw-hc .pw-key.state-present{
  background:var(--pw-hc-present); border-color:var(--pw-hc-present); color:#fff;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.pw-toast{
  top:calc(var(--nav-h,64px) + 18px);
  background:var(--pwx-ink);
  color:var(--pwx-cream);
  font-family:var(--pw-font-ui);
  font-size:.875rem; font-weight:600; letter-spacing:.005em;
  padding:11px 22px; border-radius:999px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.7);
}
body.pw-body.light .pw-toast{ background:var(--pwx-ink); color:var(--pwx-cream) }

/* ── Overlays and panels ───────────────────────────────────────────────── */
.pw-overlay{ background:rgba(14,9,4,.58); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
body.pw-body.light .pw-overlay{ background:rgba(40,26,12,.34) }

.pw-panel{
  border-radius:clamp(18px,4vw,22px);
  border:1px solid var(--pwx-card-line);
  background:radial-gradient(120% 100% at 30% -10%,#31220F 0%,#1E1409 62%,#17100A 100%);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  padding:26px 22px 22px;
}
body.pw-body.light .pw-panel{
  background:linear-gradient(168deg,#FBF6EC,#F2E9D9);
  box-shadow:0 34px 70px -36px rgba(64,40,14,.5);
}
.pw-panel-title{
  font-family:var(--pw-font-head); font-weight:600; font-size:1.5rem;
  letter-spacing:-.018em; line-height:1.08; color:var(--pw-cream);
}
.pw-panel-close::before{ background:rgba(244,234,214,.10); border-color:rgba(244,234,214,.2) }
body.pw-body.light .pw-panel-close::before{ background:rgba(31,21,12,.06); border-color:rgba(31,21,12,.14) }

/* Settings rows */
.pw-setting-name{ font-family:var(--pw-font-ui); font-size:.9375rem; font-weight:600 }
.pw-setting-desc{ font-family:var(--pw-font-ui); font-size:.75rem }
.pw-setting-row{ padding:15px 2px }
.pw-toggle{
  background:rgba(244,234,214,.10); border:1px solid rgba(244,234,214,.28);
}
.pw-toggle::after{ background:rgba(244,234,214,.55) }
body.pw-body.light .pw-toggle{ background:rgba(31,21,12,.07); border-color:rgba(31,21,12,.26) }
body.pw-body.light .pw-toggle::after{ background:rgba(31,21,12,.40) }
.pw-toggle[aria-checked="true"],
body.pw-body.light .pw-toggle[aria-checked="true"]{
  background:var(--pwx-rust); border-color:var(--pwx-rust);
}
.pw-toggle[aria-checked="true"]::after{ background:#FFF6EA }
.pw-settings-about{ font-family:var(--pw-font-ui); font-size:.8125rem; color:rgba(244,234,214,.78) }
body.pw-body.light .pw-settings-about{ color:rgba(31,21,12,.62) }
.pw-settings-about a{ color:var(--pwx-amber); text-decoration:underline; text-underline-offset:2px }
body.pw-body.light .pw-settings-about a{ color:var(--pwx-rust) }

/* Stats and distribution */
.pw-stat-val{ font-family:var(--pw-font-head); font-weight:600; font-size:1.75rem; letter-spacing:-.02em }
.pw-stat-lbl{ font-family:var(--pw-font-mono); font-size:.625rem; font-weight:500; letter-spacing:.16em }

/* How-to-play tiles follow the board */


/* ── Result card ───────────────────────────────────────────────────────── */
.pw-panel--end{ text-align:center }
.pw-end-avatar{
  width:82px; height:82px;
  border:2px solid rgba(201,133,38,.7);
  box-shadow:0 14px 32px -16px rgba(0,0,0,.7);
}
body.pw-body.light .pw-end-avatar{ border-color:rgba(191,78,28,.55) }
.pw-end-title{
  font-family:var(--pw-font-head); font-weight:600; font-size:1.75rem;
  letter-spacing:-.02em; line-height:1.05;
}
.pw-end-word{
  font-family:var(--pw-font-mono); font-weight:500; font-size:1rem;
  letter-spacing:.32em; color:var(--pwx-amber); margin-bottom:6px;
}
body.pw-body.light .pw-end-word{ color:var(--pwx-rust) }
.pw-end-sub{ font-family:var(--pw-font-ui); font-size:.8125rem; line-height:1.55 }
.pw-end-countdown-lbl{ font-family:var(--pw-font-mono); font-size:.625rem; font-weight:500; letter-spacing:.16em }
.pw-end-countdown-val{ font-family:var(--pw-font-mono); font-weight:500; font-size:1.25rem; letter-spacing:.04em }

/* The result card keeps its wallpaper backing in light mode — that rule
   lives in pawdle.css and is left alone; only the frame is restated. */
body.pw-body.light #pw-overlay-end .pw-panel--end{
  border-color:rgba(31,21,12,.16);
  border-radius:clamp(18px,4vw,22px);
  box-shadow:0 34px 70px -36px rgba(64,40,14,.5);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.pw-share-btn,.pw-lb-btn,#pw-overlay-end .pw-lb-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:48px; padding:0 24px;
  border-radius:999px;
  font-family:var(--pw-font-ui); font-size:.9375rem; font-weight:600; letter-spacing:.005em;
  transition:transform .3s var(--pwx-e-spring), background .3s var(--pwx-e-out),
             box-shadow .34s var(--pwx-e-out), color .3s var(--pwx-e-out);
}
.pw-share-btn,#pw-overlay-end .pw-lb-btn{
  background:var(--pwx-rust); border:1px solid var(--pwx-rust); color:#FFF6EA;
  box-shadow:0 12px 26px -16px rgba(191,78,28,.9);
}
.pw-share-btn:hover,#pw-overlay-end .pw-lb-btn:hover{
  background:var(--pwx-rust-deep); border-color:var(--pwx-rust-deep);
  transform:translateY(-1px); box-shadow:0 16px 30px -16px rgba(143,56,15,.9);
}
.pw-lb-btn:not(#pw-end-lb-btn){
  background:transparent; border:1px solid rgba(244,234,214,.30); color:var(--pw-cream);
  box-shadow:none;
}
.pw-lb-btn:not(#pw-end-lb-btn):hover{
  background:rgba(244,234,214,.12); transform:translateY(-1px); box-shadow:none;
}
body.pw-body.light .pw-lb-btn:not(#pw-end-lb-btn){ border-color:rgba(31,21,12,.26); color:var(--pwx-ink) }
body.pw-body.light .pw-lb-btn:not(#pw-end-lb-btn):hover{ background:rgba(31,21,12,.06) }
.pw-name-input{
  border-radius:var(--r-sm); border:1px solid var(--pwx-card-line);
  background:rgba(244,234,214,.08); color:var(--pw-cream);
  font-family:var(--pw-font-ui); -webkit-text-fill-color:currentColor;
}
body.pw-body.light .pw-name-input{ background:rgba(255,255,255,.8); color:var(--pwx-ink) }
.pw-name-input:focus{ border-color:var(--pwx-rust); outline:none }

/* ── Leaderboard ───────────────────────────────────────────────────────
   The board itself is shared/css/leaderboard.css. All this game states is its
   accent; the fonts, radii and avatar ring that used to be patched here are
   the shared component's own now. */
body.pw-body .lb-panel{ --lb-accent:var(--pwx-amber) }

/* ── Focus ─────────────────────────────────────────────────────────────── */
.pw-key:focus-visible,.pw-toggle:focus-visible,.pw-panel-close:focus-visible{
  outline:2px solid var(--pwx-amber); outline-offset:2px;
}
body.pw-body.light .pw-key:focus-visible,
body.pw-body.light .pw-toggle:focus-visible,
body.pw-body.light .pw-panel-close:focus-visible{ outline-color:var(--pwx-rust) }

/* ── Short viewports keep the card tight to the board ──────────────────── */
@media (max-height:700px){
  .pw-grid-wrap{ padding:8px 14px }
  .pw-key{ font-size:14px }}
@media (max-height:600px){
  .pw-grid-wrap{ padding:6px 12px }
  .pw-key{ font-size:13px }
  .pw-keyboard{ gap:5px }
  .pw-kb-row{ gap:4px }}
@media (min-width:480px){
  .pw-key{ font-size:16px }}