*{-webkit-tap-highlight-color:transparent}:root{--cp-bg:#1a0f09;--cp-surface:rgba(255,230,180,0.07);--cp-border:rgba(255,210,140,0.18);--cp-cream:#F5EDD8;--cp-gold:#E8801C;--cp-caramel:#c97a35;--cp-muted:rgba(245,237,216,0.45);--cp-topbar-h:62px;--cp-card-empty:rgba(255,210,140,0.08);--cp-card-filled:rgba(255,210,140,0.14);--cp-card-sel:rgba(200,114,42,0.85);--cp-band-1:color-mix(in srgb,var(--rust) 88%,transparent);--cp-band-2:rgba(172,125,22,0.88);--cp-band-3:rgba(100,62,22,0.88);--cp-band-4:color-mix(in srgb,var(--moss) 88%,transparent);--cp-max-w:480px}body{background:var(--cp-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-attachment:fixed;min-height:100vh;min-height:100dvh;overflow-x:hidden;font-family:'DM Sans',system-ui,sans-serif;color:var(--cp-cream)}#cp-footer-placeholder{display:none}.cp-main{position:relative;z-index:1;padding-top:var(--cp-topbar-h);max-width:var(--cp-max-w);margin:0 auto;padding-left:14px;padding-right:14px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0))}.cp-page{display:none}.cp-page.active{display:block}#cp-solved{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}.cp-solved-group{border-radius:10px;padding:10px 14px;animation:cpReveal 0.4s cubic-bezier(0.34,1.5,0.64,1) both}@keyframes cpReveal{from{opacity:0;transform:scale(0.96) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}.cp-solved-group[data-level="0"]{background:var(--cp-band-1)}.cp-solved-group[data-level="1"]{background:var(--cp-band-2)}.cp-solved-group[data-level="2"]{background:var(--cp-band-3)}.cp-solved-group[data-level="3"]{background:var(--cp-band-4)}.cp-solved-name{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:rgba(255,255,255,0.95)}.cp-solved-words{font-size:0.75rem;color:rgba(255,255,255,0.75);margin-top:2px;font-weight:600}.cp-oneaway{text-align:center;font-size:0.78rem;font-weight:700;color:var(--cp-gold);height:18px;margin-bottom:4px}#cp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}.cp-card{aspect-ratio:1.05/1;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 3px;background:var(--cp-card-empty);border:1.5px solid var(--cp-border);border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,230,160,0.05);font-family:'DM Sans',sans-serif;font-size:clamp(0.58rem,2.6vw,0.74rem);font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--cp-cream);cursor:pointer;user-select:none;touch-action:manipulation;transition:background 0.12s,border-color 0.12s,transform 0.12s;line-height:1.2}.cp-card:hover{background:rgba(255,210,140,0.18);border-color:rgba(255,210,140,0.35)}.cp-card.selected{background:var(--cp-card-sel);border-color:var(--cp-caramel);color:#fff;transform:translateY(-2px) scale(1.04);box-shadow:0 4px 16px rgba(200,114,42,0.35)}.cp-card.wrong-shake{animation:cpWrongShake 0.38s ease}@keyframes cpWrongShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}.cp-card.correct-pop{animation:cpCorrectPop 0.32s cubic-bezier(0.34,1.56,0.64,1)}@keyframes cpCorrectPop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}.cp-timer-row{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 0 6px}.cp-timer-label{font-size:0.7rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--cp-muted)}.cp-timer-val{font-family:'Fraunces',serif;font-size:1rem;font-weight:400;color:var(--cp-caramel);min-width:42px;text-align:center}.cp-mistakes-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}.cp-mistakes-label{font-size:0.7rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--cp-muted)}.cp-dots{display:flex;gap:6px}.cp-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,210,140,0.15);border:1.5px solid rgba(255,210,140,0.20);transition:background 0.25s,transform 0.25s}.cp-dot.used{background:var(--cp-caramel);border-color:var(--cp-gold);transform:scale(0.82)}.cp-btn-row{display:flex;gap:7px}.cp-btn{flex:1;height:46px;border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;transition:all 0.16s}.cp-btn-secondary{background:rgba(26,15,9,0.70);color:var(--cp-cream);border:1px solid var(--cp-border)}.cp-btn-secondary:hover{background:rgba(255,210,140,0.12);border-color:rgba(255,210,140,0.30)}.cp-btn-primary{background:var(--cp-caramel);color:#fff;box-shadow:0 3px 12px rgba(200,114,42,0.35)}.cp-btn-primary:hover{background:var(--cp-gold);transform:translateY(-1px)}.cp-btn-primary:disabled{background:rgba(255,210,140,0.10);color:var(--cp-muted);box-shadow:none;transform:none;cursor:not-allowed}#cp-toast{position:fixed;top:calc(var(--cp-topbar-h) + 48px);left:50%;transform:translateX(-50%) translateY(-8px);background:rgba(26,15,9,0.95);border:1px solid rgba(255,210,140,0.25);color:var(--cp-cream);padding:8px 18px;border-radius:20px;font-size:0.82rem;font-weight:700;white-space:nowrap;pointer-events:none;opacity:0;z-index:300;backdrop-filter:blur(6px);transition:opacity 0.2s,transform 0.2s}#cp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}#cp-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:55vh;gap:16px}@keyframes cpPawPulse{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.14);opacity:1}}.cp-loading-text{font-family:'Fraunces',serif;font-size:1rem;font-style:italic;color:var(--cp-caramel);opacity:0.8}#cp-error{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:55vh;gap:14px;text-align:center;padding:20px}#cp-error.visible{display:flex}.cp-error-title{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:400;color:var(--cp-cream)}.cp-error-msg{font-size:0.82rem;color:var(--cp-muted);max-width:260px;line-height:1.5}#cp-completion{display:none;flex-direction:column;align-items:center;gap:14px;padding:10px 0 20px;text-align:center;animation:cpFadeUp 0.4s ease both}#cp-completion.visible{display:flex}@keyframes cpFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes cpBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}.cp-share-grid{background:rgba(26,15,9,0.55);border:1px solid var(--cp-border);border-radius:10px;padding:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;width:100%}.cp-share-cell{aspect-ratio:1;border-radius:3px}.cp-overlay{position:fixed;inset:0;z-index:180;display:flex;align-items:center;justify-content:center;background:rgba(14,8,3,0.46);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:20px;animation:cpOverlayIn 0.22s ease}.cp-overlay[hidden]{display:none}@keyframes cpOverlayIn{from{opacity:0}to{opacity:1}}@keyframes cpPanelUp{from{transform:translateY(30px) scale(0.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.cp-panel-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;background:rgba(255,210,140,0.1);border:1px solid rgba(255,210,140,0.2);color:var(--cp-muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}.cp-panel-close:hover{background:rgba(255,210,140,0.2);color:var(--cp-cream)}.cp-panel-title{font-family:'Fraunces',serif;font-size:22px;color:var(--cp-cream);margin-bottom:6px;text-align:center}.cp-panel-sub{font-size:13px;color:var(--cp-muted);text-align:center;margin-bottom:18px}.cp-lb-list{display:flex;flex-direction:column;gap:14px;margin-top:22px;margin-bottom:20px}.cp-name-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;z-index:99999;animation:cpOverlayIn 0.18s ease}.cp-name-modal[hidden]{display:none}.cp-name-panel{background:linear-gradient(160deg,#2e1a0c,#1e1008);border:1.5px solid rgba(255,210,140,0.22);border-radius:24px;padding:22px 18px 20px;width:90%;max-width:360px;position:relative}.cp-name-input{width:100%;box-sizing:border-box;background:rgba(255,255,255,0.12);border:2px solid rgba(244,207,138,0.85);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:16px;color:#fff;outline:none;display:block;-webkit-appearance:none;min-height:52px;-webkit-text-fill-color:#fff;font-family:'DM Sans',sans-serif}.cp-name-input:focus{border-color:#c97a35}.cp-name-input::placeholder{color:var(--cp-muted)}.cp-name-submit{display:block;width:100%;padding:14px;border-radius:16px;border:none;background:linear-gradient(135deg,#f4cf8a,#c97a35);color:#2c1a0a;font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif}.cp-name-skip{width:100%;background:none;border:none;color:var(--cp-muted);font-size:13px;cursor:pointer;padding:8px;text-decoration:underline;margin-top:6px;font-family:'DM Sans',sans-serif}#cp-char-popup{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(120%);z-index:400;pointer-events:none;display:flex;align-items:flex-end;gap:10px;transition:transform 0.38s cubic-bezier(0.34,1.5,0.64,1);max-width:var(--cp-max-w);padding:0 14px;will-change:transform}#cp-char-popup.show{transform:translateX(-50%) translateY(0)}.cp-comp-character{display:flex;align-items:flex-end;gap:12px;margin-bottom:4px}@keyframes cpCharBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}}:focus-visible{outline:2px solid var(--cp-caramel);outline-offset:2px;border-radius:4px}


/* ================================================================
   LIGHT MODE
================================================================ */
/* ── wallpaper & body (was .light body - BUG: light is ON body, not parent) ── */
body.light {
  background: #f7f0e0 url('images/wallpaper.webp') center center / cover no-repeat;
  color: #1a0f09;
}
@supports (-webkit-touch-callout: none) {
  body.light { background-attachment: scroll; }}

/* ── topbar ── */


/* ── floating particles – dark so they show on cream ── */


/* ── game glows off ── */
.light 

/* ── cards ── */
.light .cp-card {
  background: rgba(255,255,255,0.72);
  border-color: rgba(26,15,9,0.13);
  color: #1a0f09;
  box-shadow: 0 2px 8px rgba(26,15,9,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}
.light .cp-card:hover {
  background: rgba(255,255,255,0.90);
  border-color: rgba(26,15,9,0.22);
  box-shadow: 0 4px 14px rgba(26,15,9,0.11);
}
.light .cp-card.selected {
  background: var(--cp-card-sel);
  color: #fff;
  border-color: #a85e1a;
  box-shadow: 0 4px 16px rgba(168,94,26,0.28);
}

/* ── misc elements ── */
.light .cp-dot { background: rgba(26,15,9,0.10); border-color: rgba(26,15,9,0.15); }
.light .cp-dot.used { background: #a85e1a; border-color: #a85e1a; }
.light .cp-timer-label, .light .cp-mistakes-label { color: rgba(26,15,9,0.80); }
.light .cp-timer-val { color: #a85e1a; }
.light .cp-btn-secondary { background: rgba(255,255,255,0.55); color: #1a0f09; border-color: rgba(26,15,9,0.16); }
.light .cp-btn-secondary:hover { background: rgba(255,255,255,0.80); }
.light .cp-btn-primary:disabled { background: rgba(255,255,255,0.55); color: rgba(26,15,9,0.55); border: 1px solid rgba(26,15,9,0.16); box-shadow: none; }
.light .cp-overlay { background: rgba(245,237,216,0.24); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.light #cp-toast { background: rgba(26,15,9,0.90); color: #F5EDD8; }
.light .cp-loading-text { color: #a85e1a; }
.light .cp-share-grid { background: rgba(26,15,9,0.05); border-color: rgba(26,15,9,0.12); }
.light .cp-oneaway { color: #a85e1a; }


/* ── light-mode wallpaper system (::before pseudo-element) ──
   body carries plain cream; wallpaper lives in ::before for clean
   mobile crop control. Light mode uses a 25% cream wash. */
body.light{
  position:relative;
  background-color:#f7f0e0;
  background-image:none;
  background-attachment:scroll;
}
body.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.light::after{
  content:none;
  display:none;
}
body.light 
body.light 
body.light .cp-main{position:relative;z-index:10;}
/* Mobile: scale to viewport height so content stays visible - intentional crop */
@media (max-width:900px){
  body.light::before{
    background-size:auto 100dvh;
    background-position:center center;
  }}
@media (max-width:900px) and (orientation:landscape){
  body.light::before{background-size:cover;background-position:center center;}}

/* ── home logo light-mode visibility ── */


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

/* ── light-mode leaderboard panel text ── */
.light .cp-panel-title,
body.light .cp-panel-title{
  color:#2c1a0a;
}
.light .cp-panel-sub,
body.light .cp-panel-sub{
  color:rgba(44,26,10,.65);
}
.light .cp-panel-close,
body.light .cp-panel-close{
  color:rgba(44,26,10,.55);
}
.light .cp-panel-close::before,
body.light .cp-panel-close::before{
  background:rgba(26,15,9,.08);
  border-color:rgba(26,15,9,.14);
}

/* ── mobile light-mode alignment fix ── */
/* ── stats pair (TIME + MISTAKES) - equal-width boxes matching button style ── */
.cp-stats-pair{display:flex;gap:7px;margin-bottom:10px;}
.cp-stat-pill{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  height:46px;
  padding:6px 10px;
  background:rgba(26,15,9,0.70);
  border:1.5px solid rgba(255,210,140,0.30);
  border-radius:10px;
  box-sizing:border-box;
}
.cp-stat-pill .cp-timer-label,
.cp-stat-pill .cp-mistakes-label{
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--cp-muted);
}
.cp-stat-pill .cp-timer-val{
  font-family:'Fraunces',serif;
  font-size:0.9rem;
  font-weight:400;
  color:var(--cp-caramel);
  text-align:center;
}
.cp-stat-pill .cp-dots{display:flex;gap:5px;}
.cp-stat-pill .cp-dot{width:10px;height:10px;}
body.light .cp-stat-pill{
  background:rgba(255,255,255,0.80);
  border-color:rgba(26,15,9,0.14);
}
body.light .cp-stat-pill .cp-timer-label,
body.light .cp-stat-pill .cp-mistakes-label{color:rgba(44,26,10,0.55);}
body.light .cp-stat-pill .cp-timer-val{color:#2c1a0a;}

/* v1.5.208 - mobile light-mode alignment fix */
body.light .cp-stats-pair{
  display:flex;
  align-items:stretch;
  gap:7px;
  width:100%;
}
body.light .cp-stats-pair #cp-timer-row,
body.light .cp-stats-pair #cp-mistakes-row{
  flex:1 1 0;
  width:auto;
  min-width:0;
  max-width:none;
  margin:0;
  height:46px;
  padding:6px 10px;
  box-sizing:border-box;
}
body.light #cp-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
}
body.light #cp-grid .cp-card{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
@media (max-width:480px){
  body.light .cp-main{padding-left:14px;padding-right:14px;}}

/* v1.5.221 - Connect Paws name prompt light-mode styling */
body.light .cp-name-modal {
  background: rgba(245,237,216,0.82);
}
body.light .cp-name-panel {
  background: linear-gradient(160deg,#fdf5e4,#f5edd8);
  border-color: rgba(26,15,9,0.14);
  box-shadow: 0 18px 46px rgba(44,26,10,0.18);
}
body.light .cp-name-panel .cp-panel-title {
  color: #2c1a0a;
}
body.light .cp-name-panel .cp-panel-sub {
  color: rgba(44,26,10,0.68);
}
body.light .cp-name-panel .cp-panel-close {
  background: rgba(26,15,9,0.06);
  border-color: rgba(26,15,9,0.14);
  color: rgba(44,26,10,0.55);
}
body.light .cp-name-input {
  background: rgba(255,255,255,0.72);
  border-color: rgba(168,94,26,0.75);
  color: #2c1a0a;
  -webkit-text-fill-color: #2c1a0a;
}
body.light .cp-name-input::placeholder {
  color: rgba(44,26,10,0.48);
}
body.light .cp-name-skip {
  color: rgba(44,26,10,0.52);
}


/* v1.5.228: add a small breathing gap above solved Connect Paws answers */
#cp-solved{padding-top:12px;}


/* v1.5.245 - Consistency pass: align icon buttons, streak, panel close, and sub text with Pawdle
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

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

/* Light mode: sub text muted in dark brown */
body.light .cp-panel-sub,.light .cp-panel-sub{color:rgba(44,26,10,0.55)}


/* v1.5.254 - Score-submission modal aligned with Pawdle reference
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Submit title: Fraunces 22px matching Pawdle ────────────────────────── */
.cp-submit-title{
  font-family:'Fraunces',Georgia,serif;
  font-size:22px;
  font-weight:700;
  color:#f4cf8a;
  text-align:center;
  margin-bottom:6px;
}

/* ── Light mode submit title ──────────────────────────────────────────────── */
body.light .cp-submit-title,
.light .cp-submit-title{
  color:#2c1a0a;
}

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