:root{font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#243b35;background:#f5f7f5;font-synthesis:none;--game-accent:#19745b;--surface:#fff;--ink:#243b35;--muted:#70817a;--line:#e2e9e4;--soft:#f0f5f1;--table:#edf4ef;--red:#ce4f59;color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select,input,summary{-webkit-tap-highlight-color:transparent}button,select,summary{cursor:pointer}a{color:var(--game-accent);text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #71bba3;outline-offset:4px}button:disabled{cursor:default;opacity:.4}[hidden]{display:none!important}.twenty-four-main{max-width:1200px;margin:0 auto;padding:30px 28px 24px}.back-link{font-size:13px;color:var(--muted);display:inline-block;margin-bottom:26px}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:2px;color:var(--game-accent);margin:0 0 12px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#64a98c}h1{font-size:36px;letter-spacing:-1.5px;margin:0 0 8px;font-weight:700}h1 em{font-style:normal;color:var(--game-accent);font-size:43px}.intro{color:var(--muted);font-size:14px;margin:0;letter-spacing:1px}.heading-cards{width:112px;height:75px;position:relative;margin-right:18px}.heading-cards>span{position:absolute;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);width:42px;height:58px;font-size:24px;border-radius:7px;transform:rotate(-18deg);top:2px;left:5px}.heading-cards>span+span{color:var(--red);transform:rotate(12deg);left:40px;top:8px}.heading-cards>b{position:absolute;right:0;bottom:0;border-radius:50%;background:var(--game-accent);color:#fff;padding:8px;font-size:14px}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 308px;gap:26px;align-items:start}.game-panel{padding:28px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 35px #243b3505;min-width:0}.game-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;padding-bottom:22px;border-bottom:1px solid var(--line);gap:16px}.game-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}.mode-label{font-size:11px;display:grid;gap:7px;color:var(--muted);min-width:0}.mode-label select{width:100%;min-width:0;background:var(--soft);border:1px solid var(--line);padding:9px 32px 9px 12px;color:var(--ink);border-radius:9px;font-size:13px}.round-clock{text-align:right;display:grid;gap:5px}.round-clock>span{color:var(--muted);font-size:11px}.round-clock>strong{font-size:22px;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:1px}.table-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:23px 0 15px}.table-label{font-size:12px;font-weight:600}.solvable-badge{font-size:10px;background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:4px 9px;color:var(--game-accent)}.solvable-badge.is-unsolvable{color:var(--red)}.original-cards{display:grid;grid-template-columns:repeat(4,minmax(0,78px));justify-content:center;align-items:start;gap:16px;padding:22px 20px;background:var(--table);border-radius:14px;border:1px solid var(--line)}.playing-card{width:100%;aspect-ratio:5/7;border-radius:8px;background:#fff;border:1px solid #dae5dd;color:#283c36;box-shadow:0 3px 0 #d2dfd7;position:relative;display:block;overflow:hidden;min-width:0;--playing-cards-black:#283c36;--playing-cards-red:#ce4f59}.playing-card.is-red{color:#ce4f59}.target-divider{display:flex;gap:15px;align-items:center;justify-content:center;margin:22px 0 17px}.target-divider>span{height:1px;max-width:100px;flex:1;background:var(--line)}.target-divider>b{font-size:11px;color:var(--muted);font-weight:400;display:flex;align-items:center;gap:8px;letter-spacing:2px}.target-divider strong{font-size:24px;color:var(--game-accent);font-weight:650;letter-spacing:0}.selection-hint{font-size:12px;text-align:center;color:var(--muted);margin:0 0 15px;min-height:20px}.working-cards{display:flex;justify-content:center;align-items:stretch;gap:12px;min-height:87px}.number-card{border:1px solid var(--line);border-bottom-width:3px;background:var(--surface);border-radius:12px;min-width:0;width:105px;padding:13px 7px 10px;color:var(--ink);display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;transition:border-color .15s,background .15s,transform .15s}.number-card>strong{font-size:25px;font-weight:600;word-break:break-word}.number-card>small{font-size:10px;color:var(--muted);overflow-wrap:anywhere;line-height:1.5;max-width:100%}.number-card:hover:not(:disabled){border-color:#84b39c;transform:translateY(-2px)}.number-card.is-selected{border-color:var(--game-accent);background:var(--soft);box-shadow:0 0 0 2px #19745b15}.number-card.is-won{background:#e8f5eb;color:var(--game-accent);opacity:1;border-color:#9cc9ad;min-width:180px}.operations{display:flex;justify-content:center;gap:12px;margin:19px 0 12px}.operations>button{height:46px;width:54px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--game-accent);font-size:26px;line-height:1}.operations>button:hover:not(:disabled),.operations>button[aria-pressed=true]{background:var(--game-accent);color:#fff;border-color:var(--game-accent)}.game-status{font-size:12px;line-height:1.8;text-align:center;color:var(--muted);min-height:44px;margin:14px 0;overflow-wrap:anywhere}.game-status.is-error{color:#bf5650}.game-status.is-success{color:var(--game-accent);background:var(--soft);border-radius:9px;padding:12px}.game-actions{display:flex;gap:9px;justify-content:center}.button{min-height:40px;padding:9px 15px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:500}.button:hover:not(:disabled){border-color:#84b39c;background:var(--soft)}.button.primary{background:var(--game-accent);border-color:var(--game-accent);color:#fff;padding-inline:20px}.button.primary:hover{filter:brightness(1.07)}.history-panel{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;font-size:12px;color:var(--muted)}.history-panel summary{display:flex;justify-content:space-between;list-style:none;min-height:24px;align-items:center}.history-panel summary:before{content:'▸';margin-right:7px}.history-panel[open] summary:before{content:'▾'}.history-panel summary>span{margin-left:auto;font-variant-numeric:tabular-nums}.history-panel ol{padding-left:23px;line-height:2;color:var(--ink);margin:12px 0 0}.help-actions{display:flex;gap:18px;flex-wrap:wrap;padding-top:15px;align-items:center}.help-actions button{background:none;border:0;padding:7px 0;color:var(--game-accent);font-size:12px}.help-actions>span{font-size:10px;color:var(--muted);flex-basis:100%;margin-top:-9px}.answer-panel{margin-top:18px;border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:18px}.answer-panel h2{font-size:14px;margin:0 0 8px}.answer-panel p{font-size:11px;line-height:1.8;color:var(--muted);margin:0}.answer-panel ol{padding-left:23px;line-height:2;font-size:13px;overflow-wrap:anywhere;margin-bottom:0}.guide{display:grid;gap:18px}.guide-card,.stats-card,.custom-card{padding:24px;border:1px solid var(--line);background:var(--surface);border-radius:16px}.guide-kicker{font-size:10px;letter-spacing:1px;color:var(--game-accent)}.guide h2{font-size:17px;margin:8px 0 20px}.guide-card>ol{list-style:none;counter-reset:guide;padding:0;margin:0}.guide-card>ol>li{counter-increment:guide;position:relative;padding-left:27px;margin-top:20px}.guide-card>ol>li:before{content:counter(guide,decimal-leading-zero);position:absolute;left:0;top:1px;color:#8bae9b;font-size:11px;font-weight:600}.guide-card li strong{font-size:12px;font-weight:650}.guide-card li p{font-size:11px;color:var(--muted);line-height:1.9;margin:7px 0 0}.example{border-top:1px solid var(--line);margin-top:24px;padding-top:20px;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}.example>span{padding:8px 14px;background:var(--soft);border-radius:6px;font-size:18px}.example>b{font-size:13px;color:var(--muted);font-weight:400}.example>strong{color:var(--game-accent);font-size:23px}.example small{flex-basis:100%;text-align:center;color:var(--muted);font-size:10px}.stats-card h2{font-size:13px;display:flex;align-items:center;justify-content:space-between;margin:0 0 20px}.stats-card h2>span{font-size:9px;font-weight:400;color:var(--muted)}.stats-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;text-align:center}.stats-grid>div{display:grid;gap:7px;min-width:0}.stats-grid>div+div{border-left:1px solid var(--line)}.stats-grid strong{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums}.stats-grid span{font-size:10px;color:var(--muted)}.stats-card>p{font-size:10px;line-height:1.8;color:var(--muted);margin:18px 0 0}.custom-card{font-size:12px}.custom-card>summary{list-style:none;display:flex;justify-content:space-between;font-weight:600;gap:10px}.custom-card summary>span{color:var(--game-accent)}.custom-card p{color:var(--muted);line-height:1.8;font-size:11px;margin:18px 0 14px}.custom-inputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.custom-inputs label{display:grid;gap:6px;font-size:10px;color:var(--muted)}.custom-inputs input{width:100%;min-width:0;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:9px 4px;color:var(--ink);font-size:14px;text-align:center}.custom-card p.custom-note{margin:10px 0;font-size:10px}.custom-card .button{width:100%;margin-top:3px}.game-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:30px;color:var(--muted);font-size:10px;line-height:2}.game-footer a{color:inherit}.noscript{padding:20px;text-align:center}
:root[data-theme=dark]{--game-accent:#84cdb2;--surface:#1c2d28;--ink:#e1eae5;--muted:#9eb0a7;--line:#34473d;--soft:#243c31;--table:#14291e;--red:#ed8d93;color:var(--ink);background:#14231d;color-scheme:dark}:root[data-theme=dark] .button.primary,:root[data-theme=dark] .operations>button[aria-pressed=true],:root[data-theme=dark] .operations>button:hover:not(:disabled){background:#237d60;color:#fff}:root[data-theme=dark] .number-card.is-won{background:#254b38;color:#b0e5ca;border-color:#518263}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
@media(max-width:900px){.play-layout{grid-template-columns:minmax(0,1fr) 270px;gap:18px}.game-panel{padding:22px}.guide-card,.stats-card,.custom-card{padding:20px}.original-cards{gap:12px;padding:20px 14px}.working-cards{gap:9px}.number-card{width:90px}.number-card>strong{font-size:23px}.twenty-four-main{padding-inline:22px}}
@media(max-width:740px){.play-layout{grid-template-columns:minmax(0,1fr)}.twenty-four-main{max-width:620px}.guide{grid-template-columns:1fr 1fr;align-items:start}.guide-card{grid-column:1 / -1}.guide-card>ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.guide-card>ol>li{margin-top:0}.guide-card h2{margin-bottom:20px}.example{margin-top:20px}.custom-card{height:auto}.heading-cards{margin-right:0}.game-footer{margin-top:22px}}
@media(max-width:480px){.twenty-four-main{padding:20px 14px}.back-link{margin-bottom:20px}.page-heading{margin-bottom:22px}h1{font-size:28px;letter-spacing:-1px}h1 em{font-size:34px}.intro{font-size:12px;letter-spacing:0}.eyebrow{font-size:10px}.heading-cards{transform:scale(.8);transform-origin:right center;width:85px}.game-panel{padding:18px 15px;border-radius:16px}.game-toolbar{padding-bottom:18px}.original-cards{padding:18px 12px;gap:11px}.working-cards{gap:8px}.number-card{padding:12px 4px 9px;width:80px;min-height:82px}.number-card>strong{font-size:23px}.number-card>small{font-size:9px}.operations{gap:12px}.operations>button{height:44px;width:51px}.game-actions{gap:7px}.button{padding:9px 11px;font-size:11px}.button.primary{padding-inline:15px}.game-status{font-size:11px}.guide{grid-template-columns:1fr;gap:14px}.guide-card{grid-column:auto}.guide-card>ol{display:block}.guide-card>ol>li+li{margin-top:18px}.stats-card,.custom-card,.guide-card{padding:21px}.stats-grid strong{font-size:24px}.game-footer{font-size:10px}.help-actions{gap:16px}.number-card.is-won{min-width:160px}}

/* Use the site's readable type scale for instructions and controls. */
.back-link,.intro,.selection-hint,.game-status,.button,.help-actions button,.mode-label select,.answer-panel ol{font-size:var(--font-small,15px)}.guide-card li strong,.custom-card>summary,.stats-card h2,.table-label{font-size:var(--font-small,15px)}.guide-card li p,.custom-card p,.answer-panel p,.stats-card>p{font-size:15px}.guide-kicker,.mode-label,.round-clock>span,.solvable-badge,.stats-grid span,.help-actions>span,.game-footer,.custom-card p.custom-note,.example small{font-size:12px}.history-panel{font-size:14px}.number-card>small{font-size:11px}.guide-card>ol>li{padding-left:29px}.guide h2{font-size:var(--font-lead,18px)}
@media(max-width:900px) and (min-width:741px){.play-layout{grid-template-columns:minmax(0,1fr) 290px}}
@media(max-width:740px){.guide-card>ol{display:block}.guide-card>ol>li+li{margin-top:18px}}
@media(max-width:480px){.game-actions .button{padding-inline:10px;font-size:14px}.help-actions{column-gap:16px}.number-card>small{font-size:10px}.solvable-badge{font-size:11px}.game-status,.selection-hint{font-size:15px}}
/* Keep the cards and arithmetic controls in the first screen. */
.twenty-four-main{padding-top:18px}.back-link{margin-bottom:10px}.page-heading{margin-bottom:20px}.page-heading .eyebrow{line-height:1.4;margin-bottom:7px}.page-heading h1{font-size:30px;line-height:1.15;margin:0 0 5px}.page-heading h1 em{font-size:35px}.game-panel{padding:22px}.game-toolbar{padding-bottom:12px}.table-heading{margin:14px 0 10px}.original-cards{padding:14px 18px}.target-divider{margin:14px 0 10px}.target-divider>b{line-height:1.3}.target-divider strong{font-size:22px}.selection-hint{margin-bottom:10px}.working-cards{min-height:80px}.number-card{padding-top:10px;padding-bottom:8px}.operations{margin-top:14px;margin-bottom:8px}.game-status{margin:10px 0;min-height:30px}.history-panel{margin-top:18px;padding-top:12px}
@media(max-width:480px){.twenty-four-main{padding-top:14px}.back-link{margin-bottom:8px}.page-heading{margin-bottom:18px}.page-heading h1{font-size:27px}.page-heading h1 em{font-size:32px}.game-panel{padding:16px 14px}.original-cards{padding:13px 11px}.number-card{min-height:78px}.game-toolbar{padding-bottom:12px}.heading-cards{height:64px}.operations{margin-top:12px}.game-status{min-height:28px}}

/* Keep both face styles proportional and the two preferences clear on small screens. */
@media(max-width:480px){.game-toolbar{grid-template-columns:minmax(0,1fr);gap:10px}.game-options{gap:12px}.mode-label select{padding-inline:10px 26px}.round-clock{display:flex;justify-content:flex-end;align-items:baseline;gap:8px}.round-clock>strong{font-size:18px}.original-cards{gap:8px}}