*{box-sizing:border-box} :root{--ink:#0c2340;--blue:#1261a0;--green:#1d8b65;--gold:#d7a928;--line:#dce3ea;--soft:#f4f7f9}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#fff}
header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);border-bottom:1px solid #edf0f2}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink)}.brand .logo{display:grid;place-items:center;width:39px;height:39px;border-radius:10px;background:var(--ink);color:white;font-size:22px;font-weight:800}
.brand b{display:block;letter-spacing:2px}.brand small{display:block;font-size:9px;letter-spacing:5px;color:var(--green);font-weight:800}
nav{display:flex;gap:30px}nav a{text-decoration:none;color:#526170;font-size:14px}
main{width:min(1180px,92%);margin:auto}.intro{display:flex;justify-content:space-between;align-items:end;padding:48px 0 30px}
.eyebrow,.label{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--blue)}h1{font-size:clamp(38px,5vw,66px);line-height:.96;margin:12px 0 14px;letter-spacing:-3px}h1 em{font-style:normal;color:var(--green)}
.intro p{color:#6b7783;margin:0}.daily{border-left:3px solid var(--gold);padding:8px 18px;display:grid;gap:3px}.daily span{font-size:10px;font-weight:800;color:var(--gold);letter-spacing:1px}.daily b{font-size:20px}.daily small{color:#71808d}
.app{display:grid;grid-template-columns:190px minmax(360px,600px) 270px;gap:28px;align-items:start;padding:26px;border:1px solid #e6ebef;border-radius:22px;box-shadow:0 18px 50px rgba(12,35,64,.08)}
.levels{display:grid;gap:8px}.levels button,.new{border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px;text-align:left;font-weight:700;color:#536270;cursor:pointer}.levels button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.stats{margin:24px 0;border-top:1px solid var(--line)}.stats div{display:flex;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--line);font-size:13px}.stats span{color:#7b8791}.new{width:100%;text-align:center;background:var(--blue);color:white;border:0}
.board{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;border:3px solid var(--ink);background:var(--ink);gap:1px}
.cell{background:white;display:grid;place-items:center;position:relative;font-size:clamp(18px,2.2vw,30px);font-weight:650;cursor:pointer;user-select:none}.cell.given{background:#f5f7f8;color:var(--ink);font-weight:800}.cell.user{color:var(--blue)}.cell.selected{background:#dcebf7}.cell.peer{background:#f1f6f9}.cell.same{background:#e6f0f7}.cell.error{background:#fff0f0;color:#c53333}
.cell:nth-child(3n){border-right:2px solid var(--ink)}.cell:nth-child(9n){border-right:0}.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--ink)}
.notesgrid{position:absolute;inset:3px;display:grid;grid-template-columns:repeat(3,1fr);font-size:9px;color:#647687;text-align:center;align-items:center}.message{text-align:center;min-height:28px;padding:8px;font-weight:700;color:var(--green)}
.setting{display:flex;justify-content:space-between;gap:10px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}.setting b{display:block;font-size:13px}.setting small{color:#82909b;font-size:11px}
.switch input{display:none}.switch span{display:block;width:42px;height:24px;border-radius:20px;background:#cbd3da;position:relative;cursor:pointer}.switch span:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:3px;left:3px;transition:.2s}.switch input:checked+span{background:var(--green)}.switch input:checked+span:after{left:21px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.keypad button{aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:white;font-size:22px;font-weight:750;color:var(--ink);cursor:pointer}.keypad button:hover{background:var(--soft)}
.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.actions button{border:1px solid var(--line);background:white;border-radius:10px;padding:10px 5px;color:var(--ink);font-size:18px;cursor:pointer}.actions span{display:block;font-size:10px;margin-top:3px}.actions button.on{background:var(--ink);color:white}
.ad{height:90px;margin-top:18px;border:1px dashed #c9d1d8;border-radius:10px;display:grid;place-items:center;font-size:9px;color:#a1abb3;letter-spacing:1px}
.how{max-width:700px;margin:70px auto;text-align:center}.how h2{font-size:34px;margin:10px}.how p{color:#6d7a85;line-height:1.7}
footer{border-top:1px solid #edf0f2;padding:28px max(5vw,24px);display:flex;gap:25px;align-items:center;color:#788591;font-size:13px}footer b{color:var(--ink)}footer a{margin-left:auto;color:#788591}
@media(max-width:900px){nav{display:none}.intro{align-items:start;gap:25px}.daily{display:none}.app{grid-template-columns:1fr;padding:16px}.left{display:grid;grid-template-columns:1fr 1fr;gap:12px}.left .label{grid-column:1/-1}.levels{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.levels button{text-align:center}.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin:4px 0}.stats div{display:grid;text-align:center}.new{grid-column:1/-1}.right{display:grid}.keypad{grid-template-columns:repeat(5,1fr)}.keypad button{aspect-ratio:auto;padding:14px 0}.actions{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){main{width:96%}.intro{padding:30px 8px 20px}h1{letter-spacing:-2px}.app{border-radius:14px;gap:16px}.cell{font-size:22px}.keypad{grid-template-columns:repeat(5,1fr)}footer span{display:none}}


/* v3 interaction polish */
.brand .logo{display:grid;place-items:center;width:42px;height:42px;color:var(--ink);background:transparent}
.brand .logo svg{width:42px;height:42px;display:block}

.app{position:relative;overflow:hidden}
.cell{transition:background-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease}
.cell.selected{box-shadow:inset 0 0 0 2px rgba(18,97,160,.55)}
.cell.same-number{background:#d8ebf7 !important;color:var(--blue);font-weight:850}
.cell.number-path{background:#f3f8fb}
.cell.complete-flash{animation:completeFlash .72s ease}
.cell.block-flash{animation:blockFlash .78s ease}
@keyframes completeFlash{
  0%{transform:scale(1);background:#fff}
  30%{transform:scale(1.045);background:#dff5e9}
  70%{transform:scale(1.015);background:#eef9f3}
  100%{transform:scale(1);background:#fff}
}
@keyframes blockFlash{
  0%{transform:scale(1);background:#fff}
  35%{transform:scale(1.055);background:#fff3cb}
  72%{transform:scale(1.02);background:#fff9e7}
  100%{transform:scale(1);background:#fff}
}

.board.win-pulse{animation:boardWin .7s ease}
@keyframes boardWin{
  0%{transform:scale(1)}
  35%{transform:scale(1.012);box-shadow:0 0 0 8px rgba(29,139,101,.08)}
  100%{transform:scale(1);box-shadow:none}
}

.celebration{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(12,35,64,.12);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:20
}
.celebration.show{opacity:1;pointer-events:auto}
.celebration-card{
  width:min(420px,88%);background:#fff;border-radius:22px;padding:30px;text-align:center;
  box-shadow:0 24px 70px rgba(12,35,64,.22);transform:translateY(20px) scale(.96);
  transition:transform .32s cubic-bezier(.2,.8,.2,1)
}
.celebration.show .celebration-card{transform:translateY(0) scale(1)}
.celebration-mark{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;
  background:var(--green);color:#fff;font-size:34px;font-weight:900;
  animation:popMark .65s cubic-bezier(.2,1.2,.2,1)
}
@keyframes popMark{0%{transform:scale(.25) rotate(-20deg)}60%{transform:scale(1.12) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.celebration-card h2{margin:0 0 8px;font-size:28px}.celebration-card p{margin:0 0 18px;color:#6c7883}
.celebration-card button{border:0;background:var(--ink);color:#fff;border-radius:10px;padding:12px 18px;font-weight:800;cursor:pointer}

.confetti{position:absolute;width:8px;height:14px;border-radius:2px;top:-20px;z-index:30;pointer-events:none;animation:confettiFall 1.8s linear forwards}
@keyframes confettiFall{
  to{transform:translate(var(--drift),110vh) rotate(720deg);opacity:.2}
}


/* v4 accessibility/highlight improvements */
.cell.number-path{
  background:#e7edf2 !important;
  box-shadow:inset 0 0 0 1px #a8b5c2;
}
.cell.same-number{
  background:#c9d8e6 !important;
  color:#071b2f !important;
  font-weight:900;
  box-shadow:inset 0 0 0 2px #49657f;
}
.cell.selected.same-number{
  box-shadow:inset 0 0 0 3px #0c2340, 0 0 0 2px rgba(12,35,64,.12);
}
.cell.peer.number-path{
  background:#dfe7ed !important;
}

/* finished-state bar shown after closing celebration */
.finished-bar{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f7faf8;
}
.finished-bar.show{display:flex}
.finished-bar .result{display:grid;gap:2px}
.finished-bar .result b{font-size:14px}
.finished-bar .result small{color:#71808d}
.finished-bar button{
  border:0;background:var(--ink);color:#fff;border-radius:10px;
  padding:10px 14px;font-weight:800;cursor:pointer;white-space:nowrap
}
@media(max-width:520px){
  .finished-bar{align-items:stretch;flex-direction:column}
  .finished-bar button{width:100%}
}

/* v6 — invitation for user feedback */
.feedback-section{max-width:1180px;margin:56px auto 34px;padding:0 22px}
.feedback-card{
  text-align:center;padding:42px 28px;border:1px solid var(--line);
  border-radius:20px;background:#f8fafc;box-shadow:0 12px 36px rgba(12,35,64,.05)
}
.feedback-kicker{display:block;font-size:11px;font-weight:900;letter-spacing:.16em;color:#6b7b8b;margin-bottom:9px}
.feedback-card h2{margin:0 0 10px;font-size:27px;color:var(--ink)}
.feedback-card>p{max-width:650px;margin:0 auto 20px;color:#687887;line-height:1.6}
.feedback-button,.feedback-submit{
  border:0;border-radius:10px;background:var(--ink);color:#fff;
  padding:12px 18px;font-weight:800;cursor:pointer
}
.feedback-form{display:none;max-width:600px;margin:25px auto 0;text-align:left}
.feedback-form.show{display:grid;gap:15px}
.feedback-form label{display:grid;gap:7px;font-size:13px;font-weight:800;color:var(--ink)}
.feedback-form label small{font-weight:500;color:#758492}
.feedback-form textarea,.feedback-form input{
  width:100%;box-sizing:border-box;border:1px solid #cbd5de;border-radius:10px;
  padding:12px 13px;background:#fff;color:var(--ink);font:inherit;outline:none
}
.feedback-form textarea:focus,.feedback-form input:focus{border-color:#6e879d;box-shadow:0 0 0 3px rgba(73,101,127,.1)}
.feedback-submit{justify-self:start}
.feedback-note{color:#83909b}

/* v7 — contextual feedback invitation under New Game */
.feedback-invite{
  margin-top:14px;
  padding:14px;
  border:1px solid #cfd8df;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%,#f6f9fb 100%);
  box-shadow:0 8px 24px rgba(12,35,64,.05);
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px 11px;
  align-items:start;
}
.feedback-invite-icon{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:#0c2340;color:#fff;
  font-size:16px;font-weight:900;
}
.feedback-invite-copy{display:grid;gap:3px}
.feedback-invite-copy strong{font-size:13px;line-height:1.25;color:var(--ink)}
.feedback-invite-copy span{font-size:11px;line-height:1.45;color:#73818d}
.feedback-invite button{
  grid-column:1/-1;
  border:1px solid #9fb0bf;
  background:#fff;
  color:var(--ink);
  border-radius:9px;
  padding:9px 11px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
}
.feedback-invite button:hover{background:#f0f4f7}

/* v8 — feedback shortcut integrated into the product UI, not card/ad-like */
.feedback-invite{
  margin-top:16px;
  padding:15px 2px 2px;
  border:0;
  border-top:1px solid #d8e0e6;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:grid;
  grid-template-columns:22px 1fr;
  gap:8px;
  align-items:start;
}
.feedback-invite-icon{
  width:22px;height:22px;border-radius:0;
  display:grid;place-items:center;
  background:transparent;color:var(--ink);
  font-size:14px;font-weight:900;
}
.feedback-invite-copy{display:grid;gap:4px}
.feedback-invite-copy strong{font-size:12px;line-height:1.3;color:var(--ink)}
.feedback-invite-copy span{font-size:11px;line-height:1.45;color:#73818d}
.feedback-invite .feedback-invite-copy button{
  display:inline;
  grid-column:auto;
  border:0;
  background:transparent;
  color:var(--blue);
  border-radius:0;
  padding:0;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.feedback-invite .feedback-invite-copy button:hover{
  background:transparent;
  text-decoration:underline;
}


/* v15 — concise indexable content for search visitors */
.seo-content{max-width:900px;margin:0 auto 64px;padding:0 24px}
.seo-content h2{margin:8px 0 14px;font-size:clamp(26px,3vw,38px);color:var(--ink)}
.seo-content p{max-width:780px;margin:0 0 10px;color:#61707c;line-height:1.7}