:root{
  --pp-bg:#1a0f09;
  --pp-surface:rgba(255,230,180,.07);
  --pp-border:rgba(255,210,140,.18);
  --pp-cream:#F5EDD8;
  --pp-caramel:#c97a35;
  --pp-muted:rgba(245,237,216,.58);
  --pp-topbar-h:64px;
  --pp-gap:4px
}
@media(min-width:480px){:root{--pp-topbar-h:72px;--pp-gap:5px}}

/* ── Body ── */
.pp-body{
  background-color:var(--pp-bg);background-image:linear-gradient(rgba(10,5,2,0.60),rgba(10,5,2,0.60)),url('images/wallpaper.webp');background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;
  min-height:100vh;min-height:100dvh;
  overflow-x:hidden;
  font-family:'DM Sans',system-ui,sans-serif;
  color:var(--pp-cream)
}
@supports(-webkit-touch-callout:none){.pp-body{background-attachment:scroll}}
.pp-body #cp-footer-placeholder{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Background glows ── */





@keyframes ppGlow{to{transform:translate(40px,30px) scale(1.1)}}
@keyframes ppGlowC{to{transform:translateX(-50%) translate(40px,30px) scale(1.1)}}

/* ── Header ── */

/* ── Layout ── */
.pp-wrap{
  position:relative;z-index:1;
  min-height:100vh;min-height:100dvh;
  padding:calc(var(--pp-topbar-h) + 10px) 10px 16px;
  display:flex;justify-content:center
}
@media(min-width:600px){.pp-wrap{padding-top:calc(var(--pp-topbar-h) + 40px)}}
.pp-shell{width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px}

/* ── Score bar ── */


/* ── Board card ── */
.pp-card{
  background:linear-gradient(160deg,rgba(67,38,17,.92),rgba(32,18,10,.94));
  border:1px solid var(--pp-border);
  border-radius:20px;padding:10px;
  box-shadow:0 22px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)
}

/* ── Board wrapper + canvas overlay ── */
.pp-board-wrap{position:relative;width:100%;touch-action:none;user-select:none}
.pp-board{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:var(--pp-gap);
  width:100%
}
.pp-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:5
}

/* ── Loading overlay (shown only if the puzzle takes a moment) ── */
.pp-loading{
  position:absolute;inset:0;z-index:6;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(26,15,9,.78);border-radius:12px;
  color:var(--pp-cream);font-weight:600;text-align:center
}
.pp-loading.show{display:flex}
.pp-loading-paw{font-size:2.4rem;animation:pp-load-pulse 1.1s ease-in-out infinite}
.pp-loading-sub{font-size:.8rem;font-weight:400;color:var(--pp-muted)}
@keyframes pp-load-pulse{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.08);opacity:1}}
@media(prefers-reduced-motion:reduce){.pp-loading-paw{animation:none}}

/* ── Cells ── */
.pp-cell{
  aspect-ratio:1;
  border-radius:10px;
  background:rgba(245,237,216,.10);
  border:1px solid rgba(245,237,216,.06);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.22);
  cursor:crosshair;
  position:relative
}
.pp-cell:focus-visible{outline:3px solid #f3b56d;outline-offset:-3px;z-index:2}
.pp-light .pp-cell:focus-visible{outline-color:#7b3214}
@keyframes ppBad{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

/* ── Controls ── */
.pp-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;margin:0 auto}
.pp-btn{
  border:0;border-radius:16px;padding:13px 8px;
  font-family:'DM Sans',system-ui,sans-serif;font-weight:900;font-size:14px;
  color:#2f1b0d;background:#F5EDD8;
  box-shadow:0 5px 0 #9a6531,0 14px 22px rgba(0,0,0,.25);
  cursor:pointer;-webkit-tap-highlight-color:transparent
}
.pp-btn--dark{background:#7b4a25;color:#F5EDD8;box-shadow:0 5px 0 #3b2110,0 14px 22px rgba(0,0,0,.25)}
.pp-btn--practice{background:#F5EDD8;color:#2f1b0d;box-shadow:0 5px 0 #9a6531,0 14px 22px rgba(0,0,0,.25)}
.pp-btn--solution{background:#ba7a38;color:#fff7e8;box-shadow:0 5px 0 #7b4a25,0 14px 22px rgba(0,0,0,.22)}
.pp-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #9a6531,0 8px 15px rgba(0,0,0,.2)}
.pp-btn--dark:active{box-shadow:0 2px 0 #3b2110,0 8px 15px rgba(0,0,0,.2)}

/* ── Toast ── */
.pp-toast{
  position:fixed;left:50%;top:calc(var(--pp-topbar-h,64px) + 8px);bottom:auto;
  transform:translateX(-50%) translateY(-10px);
  z-index:700;background:#F5EDD8;color:#30190b;
  border-radius:999px;padding:10px 16px;
  font-weight:900;box-shadow:0 14px 40px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:.22s;
  white-space:nowrap
}
.pp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Overlays / Modals ── */
.pp-overlay{
  position:fixed;inset:0;z-index:180;
  background:rgba(10,6,3,.46);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:18px
}
.pp-overlay[hidden]{display:none}
.pp-modal{
  width:min(94vw,440px);
  background:linear-gradient(160deg,#2e1a0c,#1e1008);
  border:1.5px solid rgba(255,210,140,.22);border-radius:24px;
  padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.55);
  text-align:center;position:relative
}
.pp-mtit{font-family:'Fraunces',Georgia,serif;font-size:38px;color:#F5EDD8}
.pp-msub{color:var(--pp-muted);line-height:1.55;margin:8px 0 16px}
.pp-practice-note{margin:0 0 14px;color:#f1b16e;font-size:13px;font-weight:800;line-height:1.35}
.pp-mbtns{display:grid;gap:9px}
.pp-close{
  position:absolute;right:12px;top:12px;
  width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,210,140,.10);color:rgba(245,237,216,.65);
  font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s
}
.pp-close:hover{background:rgba(255,210,140,.20);color:#F5EDD8}
.pp-name-input{
  width:100%;border:1px solid var(--pp-border);
  background:rgba(255,255,255,.08);border-radius:16px;
  padding:14px;color:#fff;
  font:700 16px 'DM Sans',system-ui,sans-serif;
  margin:8px 0 12px;outline:none
}
.pp-name-input:focus{border-color:var(--pp-caramel)}


/* ── Light mode ── */
.pp-light{--pp-bg:#f4ead6;--pp-cream:#3a2212;--pp-muted:rgba(58,34,18,.62);--pp-border:rgba(95,56,26,.18);background-image:url('images/wallpaper.webp')}
.pp-light .pp-card{background:linear-gradient(160deg,rgba(255,248,232,.92),rgba(238,221,190,.94))}
.pp-light .pp-cell{background:rgba(85,50,20,.08);border-color:rgba(85,50,20,.08)}
.pp-light .pp-btn{background:#3a2212;color:#F5EDD8;box-shadow:0 5px 0 #1a0f09,0 14px 22px rgba(0,0,0,.2)}
.pp-light .pp-btn--dark{background:#F5EDD8;color:#2f1b0d;box-shadow:0 5px 0 #c4a98a,0 14px 22px rgba(0,0,0,.15)}
.pp-light .pp-btn--practice{background:#d78237;color:#fff7e8;box-shadow:0 5px 0 #9a4f1f,0 14px 22px rgba(0,0,0,.15)}
.pp-light .pp-btn--solution{background:#a86128;color:#fff7e8;box-shadow:0 5px 0 #6f3b17,0 14px 22px rgba(0,0,0,.15)}
.pp-light .pp-modal{
  background:linear-gradient(160deg,#fdf5e4,#f5edd8);
  border-color:rgba(26,15,9,.12);
  color:#2b170b
}
.pp-light .pp-mtit{color:#3a2212}
.pp-light .pp-close{
  color:rgba(58,34,18,.62);
  background:rgba(58,34,18,.08);
  border:1px solid rgba(58,34,18,.14)
}
.pp-light .pp-close:hover{background:rgba(58,34,18,.16);color:#3a2212}
.pp-light .pp-toast{background:#3a2212;color:#F5EDD8}


/* v1.5.156 fixes */

.pp-overlay#pp-win .pp-modal{position:relative}
.pp-overlay#pp-win .pp-close{display:flex}


/* v1.5.157 fixes */
.pp-light .pp-name-input{
  color:#3a2212;
  background:rgba(255,255,255,.38);
  border-color:rgba(95,56,26,.22);
}
.pp-light .pp-name-input::placeholder{
  color:rgba(58,34,18,.58);
}


/* v1.0.26 - mobile wallpaper crop (light-mode override moved below the light-mode wallpaper block - see v1.5.284) */
@media (max-width: 700px){
  .pp-body{
    background-size: auto 112dvh;
    background-position: center 78%;
  }}

/* Light-mode modal contrast */
.pp-light .pp-mtit,
.pp-light .pp-msub{
  color:#2b170b;
  opacity:1;
  text-shadow:none;
}
.pp-light .pp-msub{
  color:rgba(43,23,11,.82);
}


/* v1.5.170 Paw Paths light-mode contrast + cards */



/* Softer light overlay while the navbar remains clear */
.pp-light .pp-overlay, body.pp-light .pp-overlay{
  background:rgba(245,237,216,.24);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}


/* v1.5.176 - make light-mode home logo fully visible */


/* v1.5.178 - light-mode overlay test: less washout, dark unchanged */


/* Light mode - wallpaper (12% cream wash) */
body.pp-light,
.pp-light {
  position: relative;
  background-color: #f7f0e0;
  background-image: linear-gradient(rgba(245,237,216,0.12), rgba(245,237,216,0.12)), url('images/wallpaper.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
}
body.pp-light::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(245,237,216,0.12), rgba(245,237,216,0.12)), url('images/wallpaper.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: none;
  opacity: 1;
}
body.pp-light .pw-bg { z-index: 1; opacity: 1; }

body.pp-light main { position: relative; z-index: 10; }
@media (max-width: 900px) {
  body.pp-light::before {
    background-size: auto 100dvh;
    background-position: center center;
  }}
@media (max-width: 900px) and (orientation: landscape) {
  body.pp-light::before { background-size: cover; background-position: center center; }}

/* v1.5.284 - mobile wallpaper crop for light mode (positioned after light-mode block so cascade wins without !important) */
@media (max-width: 700px){
  body.pp-light,
  .pp-body.pp-light{
    background-size: auto 112dvh;
    background-position: center 78%;
  }}

/* v1.0.230 - leaderboard panel clears navbar */
#pp-lb {
  align-items: flex-start;
  overflow-y: auto;
  padding-top: calc(var(--pp-topbar-h, 64px) + 10px);
}
#pp-lb .lb-panel,
body.pp-light #pp-lb .lb-panel { --lb-accent: #C98526; }

@media (max-width:520px){.pp-controls{gap:8px}.pp-btn{font-size:clamp(13px,3.2vw,18px);padding:13px 8px}}


/* v1.5.245 - Consistency pass: align icon buttons, streak, modals, and toast with Pawdle
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

/* Icon buttons & streak badge are styled in shared/css/nav.css */

/* ── Score-submission modal (#pp-name) aligned with Pawdle ──────────────── */

/* Panel: max-width 360px, 1.5px border, 24px radius, Pawdle padding */
:is(#pp-name,#pp-confirm) .pp-modal{
  max-width:360px;
  border:1.5px solid rgba(255,210,140,0.22);
  border-radius:24px;
  padding:22px 18px 20px;
  box-sizing:border-box;
}

/* Title: Fraunces 22px matching Pawdle (was Cormorant 38px) */
:is(#pp-name,#pp-confirm) .pp-mtit{
  font-family:'Fraunces',Georgia,serif;
  font-size:22px;
  font-weight:700;
  color:#f4cf8a;
  margin-bottom:0;
}

/* Score sub-line: small muted text matching Pawdle */
:is(#pp-name,#pp-confirm) .pp-msub{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px;
  color:rgba(245,237,216,0.65);
  text-align:center;
  margin:4px 0 18px;
  line-height:1.35;
}

/* Close button: circular 44×44, 14px × mark, matching Pawdle */
:is(#pp-name,#pp-confirm) .pp-close{
  width:44px;
  height:44px;
  border-radius:50%;
  background:transparent;
  font-size:14px;
  top:10px;
  right:10px;
  color:rgba(245,237,216,0.65);
}
:is(#pp-name,#pp-confirm) .pp-close::before{
  content:'';
  position:absolute;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(255,210,140,0.1);
  border:1px solid rgba(255,210,140,0.2);
}
:is(#pp-name,#pp-confirm) .pp-close span{
  position:relative;
  z-index:1;
}

/* Input: 2px gold border, 12px radius, rgba(255,255,255,0.12) bg - Pawdle match */
:is(#pp-name,#pp-confirm) .pp-name-input{
  border:2px solid rgba(244,207,138,0.85);
  border-radius:12px;
  background:rgba(255,255,255,0.12);
  padding:12px 16px;
  margin:0 0 16px;
  font-weight:400;
  color:#fff;
  -webkit-text-fill-color:#fff;
}
:is(#pp-name,#pp-confirm) .pp-name-input:focus{
  border-color:#c97a35;
}
:is(#pp-name,#pp-confirm) .pp-name-input::placeholder{
  color:rgba(245,237,216,0.65);
}

/* Buttons: flat layout, no 3D shadow */
:is(#pp-name,#pp-confirm) .pp-mbtns{
  gap:0;
}

/* Submit button: gold gradient flat style matching Pawdle */
:is(#pp-name,#pp-confirm) .pp-btn:not(.pp-btn--dark){
  background:linear-gradient(135deg,#f4cf8a,#c97a35);
  color:#2c1a0a;
  padding:14px;
  border-radius:16px;
  font-size:15px;
  font-weight:700;
  box-shadow:none;
  border:none;
}
:is(#pp-name,#pp-confirm) .pp-btn:not(.pp-btn--dark):active{
  transform:scale(0.98);
  box-shadow:none;
}

/* Skip button: underline text matching Pawdle */
:is(#pp-name,#pp-confirm) .pp-btn--dark{
  background:none;
  box-shadow:none;
  border:none;
  color:rgba(245,237,216,0.65);
  font-size:13px;
  padding:6px;
  text-decoration:underline;
  font-weight:400;
  margin-top:4px;
}
:is(#pp-name,#pp-confirm) .pp-btn--dark:active{
  transform:none;
  box-shadow:none;
}

/* ── Score-submission light mode (pp-light) ──────────────────────────────── */
body.pp-light :is(#pp-name,#pp-confirm) .pp-modal{
  background:linear-gradient(160deg,#fdf5e4,#f5edd8);
  border-color:rgba(26,15,9,0.14);
}
body.pp-light :is(#pp-name,#pp-confirm) .pp-mtit{
  color:#2c1a0a;
}
body.pp-light :is(#pp-name,#pp-confirm) .pp-msub{
  color:rgba(44,26,10,0.65);
}
body.pp-light :is(#pp-name,#pp-confirm) .pp-close{
  color:#6b3810;
}
body.pp-light :is(#pp-name,#pp-confirm) .pp-close::before{
  background:rgba(26,15,9,0.06);
  border-color:rgba(26,15,9,0.14);
}
body.pp-light :is(#pp-name,#pp-confirm) .pp-name-input{
  background:rgba(0,0,0,0.07);
  border-color:rgba(168,94,26,0.75);
  color:#2c1a0a;
  -webkit-text-fill-color:#2c1a0a;
}
body.pp-light :is(#pp-name,#pp-confirm) .pp-name-input::placeholder{
  color:rgba(44,26,10,0.48);
}
body.pp-light :is(#pp-name,#pp-confirm) .pp-btn--dark{
  color:rgba(44,26,10,0.52);
}

/* v1.5.255 - name modal close span above ::before ring */
:is(#pp-name,#pp-confirm) .pp-close span{
  position:relative;
  z-index:1;
  line-height:1;
}

/* ─────────────────────────────────────────────────────────
   Safari iOS viewport orientation fix
   Prevent Safari from caching viewport height during rotation
   ───────────────────────────────────────────────────────── */
html,body{height:100%}
body{min-height:100vh;min-height:100dvh;height:var(--viewport-height,100dvh)}

/* Ensure proper layout on orientation change */
@supports (height: 100dvh) {
  html,body{height:auto}
  body{min-height:100dvh}}

/* Fallback for older iOS Safari versions */
@media(max-height:500px) and (orientation:landscape){
  body{min-height:auto}}