:root {
  --ink:#111; --muted:#111; --paper:#fafcfb; --mint:#e1f3e9;
  --mint-edge:#c7e3d4; --sage:#79ac94; --green:#285f49; --line:#dfe6e2;
}
html,body {background:#edf2ef}
.phone,.statusbar {background:var(--paper)}
.phone :is(p,small,label,input,li,span,strong,b,h3,em,button,u) {color:#111}
.phone :is(button,input) {font-weight:800}
.phone button {cursor:pointer}
button:focus-visible,a:focus-visible {outline:3px solid var(--sage);outline-offset:3px}
.board-header p {color:var(--green)}
.board-note,.draft h2 {color:#111}
.brand-logo,.brand-logo img {width:38px;height:38px}
.brand {gap:5px}
.brand strong {line-height:1.4}
.menu-button {place-items:center;padding:0;height:48px;width:40px;gap:4px}
.menu-button i {height:2px}
.auth-actions button {display:grid;place-items:center;line-height:1}
.auth-actions .login-button {text-decoration:none}
.hero-banner {height:222px;min-height:222px;padding:0;display:block;background:var(--mint);border:1px solid var(--mint-edge)}
.banner-head {position:absolute;top:11px;right:15px;width:127px;height:127px;object-fit:contain}
.banner-copy {position:absolute;left:18px;right:14px;bottom:19px;width:auto;padding:0;background:transparent;backdrop-filter:none}
.banner-copy p {margin:0 0 9px;color:var(--green);font-size:11px;line-height:1.4}
.banner-copy h3 {margin:0;color:#111;font-size:19px;line-height:1.55;letter-spacing:-.035em}
.games-intro p {font-size:11px;line-height:1.8}
.game-cover>strong {min-height:38px;display:grid;place-items:center;line-height:1.25;padding:8px 10px}
.bottom-nav {padding:0 20px 10px;display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch}
.bottom-nav button {position:relative;display:grid;place-items:center;min-height:60px;padding:8px 0 0;line-height:1}
.bottom-nav button.active:before {position:absolute;top:10px;left:50%;transform:translateX(-50%);width:18px;height:3px;margin:0}
.modal-close {display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;line-height:1;border:1.5px solid #111;background:#fff}
.close-icon {position:relative;width:14px;height:14px;display:block}
.close-icon::before,.close-icon::after {content:'';position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:2px;background:#111;transform:rotate(45deg)}
.close-icon::after {transform:rotate(-45deg)}
.rules-modal li {gap:10px;align-items:center}
.rules-modal li b,.rules-modal li:nth-child(2) b,.rules-modal li:nth-child(3) b {width:25px;height:25px;min-width:25px;display:grid;place-items:center;padding:0;line-height:1;border:1.3px solid #111;border-radius:7px;color:#111;background:#fff;font-size:11px}
.rules-modal li span {flex:1;font-size:11px;line-height:1.6}
.modal-kicker {color:var(--green)!important}
.level-hero,.member-hero {min-height:106px;padding:12px;gap:12px;background:var(--mint);border:1px solid var(--mint-edge)}
.level-hero p {color:var(--green)!important;font-size:11px;line-height:1.5}
.level-hero h3 {font-size:19px;line-height:1.4}
.level-hero span {font-size:10px;line-height:1.5}
.level-scroll {height:calc(100% - 100px)}
.day-cover>i {line-height:1;padding:0}
.day-copy {gap:4px;padding-top:3px}
.day-copy strong {line-height:1.35}
.day-copy span {font-size:10px;line-height:1.3}
.locked-cover {background:#edf1ef}
.lock-icon {transform:translateY(7px);background:#9baaa2}
.lock-icon:before {border-color:#9baaa2}
.primary-button,.number-entry button,.bottom-actions button {display:grid;place-items:center;line-height:1.3;padding:10px}
.page-bar,.game-page-bar {padding:0 14px;height:58px}
.page-bar button,.game-page-bar button {display:grid;place-items:center;padding:0;line-height:1}
.game-page-bar button {font-family:Arial,sans-serif;font-size:23px}
.timer-block b {color:#111;line-height:1.25}
.timer-block.live b {color:#d54f49}
.timer-block.ended b {color:#111}
.game-instruction {font-size:17px;line-height:1.6}
.number-entry {width:210px;max-width:calc(100% - 40px);gap:9px}
.number-entry label {font-size:12px;line-height:1.5}
.number-entry input {width:100%;min-width:0;height:56px;padding:0 8px;text-align:center;line-height:1.2}
.number-entry button {min-height:48px}
.score-preview {width:100%;margin:12px 0 0;padding:14px 16px;min-height:74px;background:#f0f3f1}
.score-preview span {line-height:1.5}
.score-preview small {line-height:1.6}
.score-preview b {font-size:32px;align-self:center;line-height:1.2}
.result-burst {border-color:var(--mint);outline-color:var(--sage)}
.result-burst i {display:none}
.result-burst b,.result-burst span {color:var(--green)!important}
.color-insight {background:var(--mint)}
.streak-card {background:var(--mint);color:#111;border:1px solid var(--mint-edge);display:grid;grid-template-columns:1fr auto;align-items:center}
.streak-card>b {float:none;line-height:1;display:flex;align-items:baseline;gap:3px;color:var(--green)!important}
.streak-card>b small {color:var(--green)}
.streak-card>div {grid-column:1/-1;clear:none;padding-top:20px}
.streak-card i {width:32px;height:32px;padding:0;line-height:1;border:1px solid #8aad9c}
.streak-card i.done {background:#fff;color:#111;border-color:#111}
.streak-card i.today {border:2px solid #285f49}
.record-list article {min-height:71px}
.record-list small {line-height:1.5}
.membership-title {background:var(--mint);border:1px solid var(--mint-edge)}
.membership-title span {color:var(--green)!important;font-size:10px;line-height:1.5}
.membership-title h3 {color:var(--green)!important;font-size:20px;line-height:1.55}
.membership-title p {font-size:11px;line-height:1.5}
.benefit-box {background:#f0f2f1}
.benefit-box p {font-size:11px;line-height:1.5}
.plan-list button {min-height:87px}
.plan-list small {font-size:10px;line-height:1.5}
.plan-list b {display:flex;align-items:baseline;gap:2px;line-height:1.1}
.plan-list u {height:19px;min-width:39px;padding:0 7px;display:grid;place-items:center;line-height:1;color:#fff}
.agreement {font-size:10px;line-height:1.6}
.registration-context {filter:blur(5px)}
.registration-tiles {padding:0 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.registration-tiles>div {height:180px;border-radius:18px}
.registration-tiles .locked-cover {display:grid;place-items:center}
.auth-layer {position:absolute;z-index:60;inset:42px 0 0;padding:22px;background:rgba(32,52,42,.32);backdrop-filter:blur(6px);display:grid;align-items:center;overflow-y:auto}
.auth-dialog {position:relative;padding:25px 22px 12px;border:1px solid #d0dfd6;border-radius:25px;background:#fff;text-align:center;box-shadow:0 20px 60px rgba(23,52,38,.15)}
.auth-close {top:13px;right:13px}
.auth-logo {width:66px;height:66px;object-fit:contain;display:block;margin:0 auto 10px}
.auth-dialog .auth-kicker {margin:0 0 6px;color:var(--green);font-size:10px}
.auth-dialog h3 {margin:0;font-size:24px;line-height:1.5}
.auth-description {margin:4px 0 19px;font-size:11px;line-height:1.5}
.auth-dialog form {display:grid;gap:7px;text-align:left}
.auth-dialog label {line-height:1.4;font-size:12px}
.auth-dialog input {width:100%;min-width:0;height:46px;padding:0 12px;font-size:12px;background:#fff;border:1px solid #111;border-radius:11px;outline-offset:2px}
.auth-dialog input::placeholder {color:#111;opacity:1;font-weight:700}
.auth-dialog label:not(:first-child) {margin-top:8px}
.auth-error {min-height:16px;margin:0;font-size:10px;color:#a22e32!important}
.auth-dialog .primary-button {font-size:13px}
.auth-footer {display:flex;justify-content:center;align-items:center;margin:6px 0 0;font-size:10px}
.auth-switch {min-width:48px;height:42px;padding:0;border:0;background:#fff;text-decoration:underline;text-underline-offset:3px}
.phone input:focus-visible {outline:2px solid var(--sage)}
.phone .answer-banner.correct :is(b,span) {color:#087765}
.phone .answer-banner.wrong :is(b,span) {color:#a22e32}
body.single .board {width:100%}
body.single .phone {width:min(100%,430px);min-height:100dvh;height:max(844px,100dvh);margin:0 auto}
body.single.full-screen .phone {height:auto}
body.single.full-screen .level-scroll {height:auto}
@media(max-width:360px){
  .brand strong {font-size:11px}
  .brand-logo,.brand-logo img {width:32px;height:32px}
  .site-nav {padding:5px 9px}
  .banner-copy {left:15px;right:10px}
  .banner-copy h3 {font-size:17px}
  .level-hero h3 {font-size:17px}
  .level-hero span {font-size:9px}
  .auth-layer {padding:14px}
  .auth-dialog {padding:22px 18px 10px}
  .game-content {padding-left:16px;padding-right:16px}
}