: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/game-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 ── */
.pw-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pw-bg-glow{position:absolute;border-radius:50%;filter:blur(40px);opacity:.18}
.pw-bg-glow--a{width:500px;height:400px;top:-100px;left:-100px;background:radial-gradient(ellipse,#c97a35 0%,transparent 70%);animation:ppGlow 14s ease-in-out infinite alternate}
.pw-bg-glow--b{width:400px;height:300px;bottom:80px;right:-80px;background:radial-gradient(ellipse,#8B5E3C 0%,transparent 70%);animation:ppGlow 18s ease-in-out infinite alternate-reverse}
.pw-bg-glow--c{width:300px;height:200px;top:38%;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,#7A5030 0%,transparent 70%);opacity:.10;animation:ppGlowC 23s ease-in-out infinite alternate}
@keyframes ppGlow{to{transform:translate(40px,30px) scale(1.1)}}
@keyframes ppGlowC{to{transform:translateX(-50%) translate(40px,30px) scale(1.1)}}

/* ── Header ── */
.pw-topbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(26,15,9,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--pp-border);
  height:var(--pp-topbar-h)
}
.pw-topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px 6px;
  max-width:520px;margin:0 auto;height:100%
}
.pw-topbar-left,.pw-topbar-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.pw-topbar-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(22px,5.5vw,38px);
  font-weight:400;color:#f2e8d0;
  text-shadow:0 2px 20px rgba(0,0,0,.7);
  min-width:0;overflow:hidden
}
.pw-topbar-em{font-style:italic;color:#c97a35}
.pw-home-logo{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  opacity:.75;transition:opacity .2s;
  text-decoration:none;flex-shrink:0;
  -webkit-tap-highlight-color:transparent
}
.pw-home-logo:hover{opacity:1}
.pw-home-logo img{display:block;width:32px;height:32px}
/* ── 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 ── */
.pp-scorebar{display:none;grid-template-columns:repeat(3,1fr);gap:7px}
.pp-stat{
  background:rgba(255,230,180,.08);
  border:1px solid var(--pp-border);
  border-radius:14px;padding:8px 6px;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.18)
}
.pp-stat span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pp-muted);font-weight:800}
.pp-stat strong{display:block;margin-top:2px;font-size:18px;color:#fff1cf}

/* ── 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
}

/* ── 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.pp-bad{animation:ppBad .28s ease}
@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)}
.pp-help{
  display:block;
  width:fit-content;
  max-width:min(92vw,620px);
  margin:2px auto 0;
  padding:8px 14px;
  border-radius:16px;
  background:rgba(48,25,11,.42);
  color:#f7ecd6;
  font-size:12px;
  font-weight:600;
  text-align:center;
  line-height:1.45;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:0 8px 22px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.12)
}

/* ── 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-mico{font-size:44px;margin-bottom:8px}
.pp-mtit{font-family:'Cormorant Garamond',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/game-wallpaper.webp')}
.pp-light .pw-topbar{background:rgba(244,234,214,.92)}
.pp-light .pw-topbar-title{color:#1a0f09;text-shadow:none}
.pp-light .pw-topbar-em{color:#a85e1a}
.pp-light .pw-home-logo{color:#2c1a0a;background:transparent;border:0;box-shadow:none}
.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,.pp-light .pp-mico{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-light .pw-home-logo img{filter:brightness(0) saturate(100%) invert(13%) sepia(45%) saturate(766%) hue-rotate(345deg) brightness(92%) contrast(95%);opacity:1}
.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 */
.pp-light .pp-stat{
  background:rgba(255,248,232,.62);
  border-color:rgba(95,56,26,.26);
  box-shadow:0 8px 22px rgba(60,35,15,.14), inset 0 1px 0 rgba(255,255,255,.45);
}
.pp-light .pp-stat span{color:#6f4b33;}
.pp-light .pp-stat strong{color:#3a2212;text-shadow:0 1px 0 rgba(255,255,255,.35);}
.pp-light .pp-help{
  background:rgba(255,248,232,.74);
  color:#3b2110;
  border:1px solid rgba(95,56,26,.18);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  box-shadow:0 8px 22px rgba(60,35,15,.14), inset 0 1px 0 rgba(255,255,255,.45);
}


/* 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 */
.light .pw-home-logo,
.light .cp-home-logo,
.light .cm-home-logo,
.light .pp-home-logo,
body.light .pw-home-logo,
body.light .cp-home-logo,
body.light .cm-home-logo,
body.light .pp-home-logo {
  opacity: 1;
}
.light .pw-home-logo img,
.light .cp-home-logo img,
.light .cm-home-logo img,
.light .pp-home-logo img,
body.light .pw-home-logo img,
body.light .cp-home-logo img,
body.light .cm-home-logo img,
body.light .pp-home-logo img {
  filter: brightness(0) saturate(100%) sepia(23%) saturate(740%) hue-rotate(346deg) brightness(78%) contrast(92%);
  opacity: 1;
}

/* 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/game-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/game-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 .pw-bg-glow { display: none; opacity: 0; }
body.pp-light .pp-app,
body.pp-light .pp-main,
body.pp-light main { position: relative; z-index: 10; }
body.pp-light .pw-topbar { z-index: 200; }
@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);
}

@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 Paw Words
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

/* Icon buttons & streak badge are now centralised in styles.css (see v1.5.283 pass) */

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

/* Panel: max-width 360px, 1.5px border, 24px radius, Paw Words padding */
#pp-name .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: Bree Serif 22px matching Paw Words (was Cormorant 38px) */
#pp-name .pp-mtit{
  font-family:'Bree Serif',Georgia,serif;
  font-size:22px;
  font-weight:700;
  color:#f4cf8a;
  margin-bottom:0;
}

/* Score sub-line: small muted text matching Paw Words */
#pp-name .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 Paw Words */
#pp-name .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);
}
#pp-name .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);
}
#pp-name .pp-close span{
  position:relative;
  z-index:1;
}

/* Input: 2px gold border, 12px radius, rgba(255,255,255,0.12) bg - Paw Words match */
#pp-name .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;
}
#pp-name .pp-name-input:focus{
  border-color:#c97a35;
}
#pp-name .pp-name-input::placeholder{
  color:rgba(245,237,216,0.65);
}

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

/* Submit button: gold gradient flat style matching Paw Words */
#pp-name .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;
}
#pp-name .pp-btn:not(.pp-btn--dark):active{
  transform:scale(0.98);
  box-shadow:none;
}

/* Skip button: underline text matching Paw Words */
#pp-name .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;
}
#pp-name .pp-btn--dark:active{
  transform:none;
  box-shadow:none;
}

/* ── Score-submission light mode (pp-light) ──────────────────────────────── */
body.pp-light #pp-name .pp-modal{
  background:linear-gradient(160deg,#fdf5e4,#f5edd8);
  border-color:rgba(26,15,9,0.14);
}
body.pp-light #pp-name .pp-mtit{
  color:#2c1a0a;
}
body.pp-light #pp-name .pp-msub{
  color:rgba(44,26,10,0.65);
}
body.pp-light #pp-name .pp-close{
  color:#6b3810;
}
body.pp-light #pp-name .pp-close::before{
  background:rgba(26,15,9,0.06);
  border-color:rgba(26,15,9,0.14);
}
body.pp-light #pp-name .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 #pp-name .pp-name-input::placeholder{
  color:rgba(44,26,10,0.48);
}
body.pp-light #pp-name .pp-btn--dark{
  color:rgba(44,26,10,0.52);
}

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