*{box-sizing:border-box}
:root{
  --bg:#eef2f8; --panel:#ffffff; --line:#c8d2e3; --text:#132033; --muted:#5a6882;
  --brand:#1344b8; --brand-dark:#0f2e80; --brand-soft:#e8efff; --hero-tint:#0e389d;
  --light-teal:#f2f5fb; --selected:#ffd966; --correct:#edf2fc; --wrong:#fee2e2;
  --shade1:#ffffff; --shade2:#cfd5dd; --shade3:#9ea7b2; --grid-line:#b7c2ce;
  --shadow:0 10px 28px rgba(15,23,42,.06); --radius-xl:26px; --radius-lg:20px;
  --key-size:48px; --key-gap:8px; --control-width:92px;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif}
body{min-height:100vh}
.app-shell{width:min(100%,780px);margin:0 auto;padding:10px 12px 22px}
.topbar{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:0;background:var(--hero-tint);border:1px solid #1b4ab8;border-radius:20px 20px 0 0;padding:5px 10px 4px;position:relative}
.menu-btn{position:absolute;right:8px;top:5px;padding:3px 9px;font-size:.85rem;min-width:auto;color:#eaf0ff;border-color:#7f9de0;background:rgba(255,255,255,.08)}
.brand-lockup{text-align:center}
.brand-title,.daily-hero h1,.section-card h2,.compact-card h2{
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;letter-spacing:0.04em
}
.brand-title{font-size:clamp(2.3rem,6.6vw,3.25rem);font-weight:900;line-height:1;color:#ffffff}
.tm{font-size:.38em;vertical-align:super}
.tagline,.section-copy,.small-note,.bottom-note,.habit-line{color:var(--muted)}
.daily-hero{text-align:center;margin-bottom:0;background:var(--hero-tint);color:#fff;padding:0 10px 4px;border-left:1px solid #1b4ab8;border-right:1px solid #1b4ab8}
.daily-hero h1{margin:0 0 2px;font-size:clamp(1.15rem,2.8vw,1.4rem);font-weight:700;color:#eaf0ff;text-transform:uppercase;letter-spacing:.06em}
.daily-hero p{margin:0 auto;max-width:570px;font-size:.9rem;color:#d9e4ff;line-height:1.35}
.instruction-row{display:flex;align-items:center;justify-content:center;gap:8px;max-width:620px;margin:2px auto 0}
.play-card,.section-card,.compact-card,.help-panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow)
}
.hero-tint,.support-tint{background:var(--brand-soft)}
.light-teal-tint{background:var(--light-teal)}
.plain-card{background:var(--panel)}
.play-card{padding:7px 9px 8px;margin-bottom:6px;border-top-left-radius:0;border-top-right-radius:0}
.board-wrap{display:flex;justify-content:center}
.puzzle-grid{display:grid;gap:8px}
.cell{
  width:clamp(70px,18.5vw,90px);height:clamp(70px,18.5vw,90px);
  border:2px solid var(--grid-line);border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:clamp(1.4rem,5vw,2rem);font-weight:400;color:var(--text);cursor:pointer;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.4)
}
.cell,
.digit-btn,
.primary-pill,
.secondary-pill,
.ghost-pill,
.compact-pill,
.menu-btn{
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}
.cell.given-cell{box-shadow:inset 0 0 0 3px rgba(19,68,184,.28)}
.cell.selected{outline:4px solid var(--selected);outline-offset:1px}
.cell.correct{background:var(--correct)!important;box-shadow:inset 0 0 0 2px #d2dcf2}
.cell.wrong{background:var(--wrong)!important}
.shade-1{background:var(--shade1)} .shade-2{background:var(--shade2)} .shade-3{background:var(--shade3)} .final-cell{background:#fff}
.entry-panel{margin:1px auto 0;background:#ffffff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:5px;display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%}
.status-bar{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin:0 auto 3px;max-width:420px}
.status-pill{font-size:.8rem;color:#335078;background:#f5f8ff;border:1px solid #d5def0;border-radius:999px;padding:4px 8px}
.feedback-chip{margin:0 auto 4px;display:inline-block;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:.85rem}
.feedback-chip.hidden{display:none}
.keypad-panel{display:flex;flex-direction:column;align-items:center;gap:var(--key-gap);width:fit-content;padding:2px}
.digit-pad{display:grid;grid-template-columns:repeat(3,var(--key-size));gap:var(--key-gap);justify-content:center;margin:0 auto}
.digit-btn{width:var(--key-size);height:var(--key-size);min-width:var(--key-size);max-width:var(--key-size);padding:0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.digit-btn.empty{visibility:hidden;pointer-events:none}
.small-controls{display:grid;grid-template-columns:var(--control-width) var(--key-size) var(--control-width);grid-template-areas:"back zero reset";gap:var(--key-gap);align-items:center;justify-content:center;width:max-content;max-width:100%;margin:var(--key-gap) 0 0}
.compact-controls{max-width:none}
.compact-pill{padding:0;min-width:0}
#backspace-btn{grid-area:back;width:var(--control-width);height:var(--key-size);box-sizing:border-box}
#zero-btn{grid-area:zero;width:var(--key-size);height:var(--key-size);min-width:var(--key-size);max-width:var(--key-size)}
#reset-btn{grid-area:reset;width:var(--control-width);height:var(--key-size);box-sizing:border-box}
.primary-pill,.secondary-pill,.ghost-pill,.digit-btn,.compact-pill{
  height:48px;border-radius:14px;font-size:.95rem;font-weight:700;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  text-decoration:none;text-align:center;font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif
}
.primary-pill{background:var(--brand);color:#fff}
.secondary-pill{background:#ffffff;color:var(--brand-dark);border:1px solid #b7c9ef}
.ghost-pill{background:#fff;color:var(--text);border:1px solid var(--line)}
.digit-btn:disabled,
.primary-pill:disabled,
.secondary-pill:disabled,
.ghost-pill:disabled,
.compact-pill:disabled{
  opacity:.45;
  cursor:default;
  pointer-events:none;
}
.share-result-btn{margin:4px auto 2px;min-width:140px}
.completion-card{width:100%;margin:4px auto 8px;padding:12px 14px;border-radius:16px;background:var(--brand);color:#fff;text-align:center}
.completion-card h2{margin:0 0 8px;font-size:1.08rem;color:#fff}
.completion-card div{margin:3px 0;font-weight:700;color:#fff}
.completion-card .share-result-btn{margin:10px auto 0;background:#fff;color:var(--brand-dark);border-color:#b7c9ef}
.habit-line{text-align:center;font-size:.84rem;margin:5px 0 0}
.section-card,.compact-card{padding:12px 12px;margin-bottom:8px}
.section-card h2,.compact-card h2{margin:0 0 7px;font-size:clamp(1.08rem,2.9vw,1.3rem);text-align:center;font-weight:700;color:#0f2239}
.legend-grid{display:grid;gap:7px}
.legend-card{display:grid;grid-template-columns:32px 1fr;gap:7px;align-items:center;padding:7px;border:1px solid var(--line);border-radius:12px;background:#ffffff}
.key-box{width:30px;height:30px;border-radius:8px;border:2px solid var(--grid-line)}
.compact-clue .small-note{margin-top:6px;font-size:.9rem}
.action-stack{display:grid;gap:8px;max-width:420px;margin:0 auto}
.compact-actions{max-width:420px}
.center-copy,.center{text-align:center}
.bottom-note{text-align:center;padding:6px 0 4px;font-size:.84rem;line-height:1.2}
.rules-modal{position:fixed;inset:0;background:rgba(8,19,47,.45);display:flex;align-items:center;justify-content:center;padding:14px;z-index:50}
.rules-modal.hidden{display:none}
.rules-card{width:min(100%,420px);background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.rules-card h3{margin:0 0 8px;color:#17356e}
.rules-card ul{margin:0 0 10px 18px;padding:0;color:#334a72;font-size:.92rem;line-height:1.35}
.rules-close-btn{width:100%}
.menu-actions{display:grid;gap:7px}
#menu-rules-btn,#rules-btn{cursor:pointer}
.footer-line{display:block;width:108px;height:1px;background:var(--line);margin:0 auto 7px}
@media (min-width:760px){.legend-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){
  .app-shell{padding:9px 10px 16px}
  .play-card,.section-card,.compact-card,.help-panel{border-radius:20px;padding-left:10px;padding-right:10px}
  .topbar{padding-top:4px;padding-bottom:4px}
  .menu-btn{right:7px;top:4px;padding:3px 8px;font-size:.74rem}
  .brand-title{font-size:clamp(2rem,8vw,2.5rem)}
  .instruction-row{gap:6px}
   :root{--key-size:44px; --key-gap:6px; --control-width:86px}
  .compact-pill{font-size:.88rem}
  .entry-panel{margin-top:1px;padding:4px}
  .status-bar{margin-bottom:1px}
  .challenge-line{font-size:.98rem;}
  .keypad-panel{
    display:grid;
    grid-template-columns:repeat(5,var(--key-size));
    grid-auto-rows:var(--key-size);
    gap:var(--key-gap);
    justify-content:center;
  }
  .digit-pad{display:contents}
  .small-controls{display:contents}
  #zero-btn{
    grid-column:5;
    grid-row:2;
    width:var(--key-size);
    height:var(--key-size);
    min-width:var(--key-size);
    max-width:var(--key-size);
  }
  #backspace-btn{
    grid-column:1 / 3;
    grid-row:3;
    width:calc(var(--key-size) * 2 + var(--key-gap));
    justify-self:end;
  }
  #reset-btn{
    grid-column:4 / 6;
    grid-row:3;
    width:calc(var(--key-size) * 2 + var(--key-gap));
    justify-self:start;
  }
}


.challenge-line{
  margin:0 0 8px;
  text-align:center;
  color:#eef3ff;
  font-weight:700;
  font-size:1rem;
}
.compact-actions .primary-pill{
  background:var(--brand);
  color:#fff;
}
.compact-actions .secondary-pill{
  background:#fff;
  color:var(--brand-dark);
}
.daily-title{
  font-size:clamp(1.15rem,2.8vw,1.4rem)!important;
}