@font-face{font-family:Nunito;src:url('./fonts/nunito-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('./fonts/nunito-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url('./fonts/nunito-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Baloo;src:url('./fonts/baloo-2-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--paper:#fbf3e2;--card:#fffdf6;--ink:#463a54;--soft:#6e6180;--berry:#b23a5f;--line:#ded3d1;--green:#486a38;font:16px/1.4 Nunito,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 0 30%,#f8e7dc80,transparent 50%),var(--paper)}button,select,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible,a:focus-visible{outline:3px solid var(--berry);outline-offset:3px}button{transition:background .12s,transform .1s}button:active:not(:disabled){transform:translateY(1px)}svg{width:22px;height:22px;flex-shrink:0}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.topbar{max-width:600px;margin:auto;padding:8px 20px 2px;display:flex;align-items:center;justify-content:space-between;min-height:64px}.wordbar{display:block;line-height:0;border-radius:6px}.wordbar-logo{display:block;object-fit:contain;width:52px;height:auto}.topbar nav{display:flex;align-items:center;gap:10px}.icon-btn{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;width:58px;min-height:50px;background:transparent;border:1px solid transparent;border-radius:12px;padding:4px}.icon-btn span{font-size:14px;font-weight:700}.icon-btn:hover{background:#fff9ee;border-color:var(--line)}.icon-btn.is-silent{position:relative}.icon-btn.is-silent:after{content:'';position:absolute;width:24px;height:2px;top:15px;background:var(--berry);transform:rotate(-45deg);border:1px solid var(--paper)}
main{max-width:560px;padding:5px 18px 0;margin:auto}.intro{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;margin-bottom:10px}.intro h1{font:700 28px/1.05 Baloo,Nunito,sans-serif;letter-spacing:-.8px;margin:0}.intro h1 span{color:var(--berry)}.subtitle{grid-column:1/-1;margin:0;font-size:16px;color:var(--ink);line-height:1.4}.entry-toggle-wrap{margin:0;padding:0}.optional-note{display:none}.entry-toggle-wrap .primary{background:transparent;color:var(--berry);border:0;box-shadow:none;font-size:16px;min-height:36px;padding:2px 0;font-weight:700}.entry-toggle-wrap .primary svg{width:17px;height:17px}.entering .entry-toggle-wrap .primary svg{display:none}
.puzzle-card{background:var(--card);border:1.5px solid #c5b8c1;border-radius:20px;padding:16px 18px 0;box-shadow:0 5px 0 #e9dfd8,0 12px 30px #55404808}.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.little-label{font-size:14px;font-weight:700;color:var(--soft);margin:0}.style-select{display:flex;align-items:center;position:relative}.style-select select{appearance:none;max-width:185px;border:1px solid #dacbd6;border-radius:10px;background:#f3edf5;font-size:14px;min-height:36px;padding:5px 29px 5px 10px;cursor:pointer}.style-select svg{position:absolute;width:14px;height:14px;right:9px;pointer-events:none}.entering .card-head{display:none}
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 12px}.number-tile{display:grid;place-items:center;height:64px;border:1.4px solid #8f7c8b;border-radius:12px;font-size:32px;font-weight:800;line-height:1;box-shadow:0 2px 0 #49384c13;background:#fde7c2;font-variant-numeric:lining-nums}.number-tile:nth-child(2){background:#d8ecf7}.number-tile:nth-child(3){background:#e6dcf6}.number-tile:nth-child(4){background:#dff2e1}.number-key{position:relative}.number-key.used{opacity:.4;box-shadow:none}.number-key.used:after{content:'✓';position:absolute;right:6px;top:3px;font-size:14px}.entering .numbers{margin:0 0 7px}.entering .number-tile{height:48px;font-size:28px;border-radius:10px}
.your-answers{padding:0 0 8px;margin-bottom:9px;border-bottom:1px solid var(--line)}.answers-heading{display:flex;justify-content:space-between;align-items:center;min-height:22px;margin-bottom:4px}.answers-heading .text-button{font-size:14px;min-height:24px;padding:0}.small-answer{display:flex;align-items:baseline;gap:7px;font-size:16px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}.answer-check{color:var(--green);font-size:16px;flex-shrink:0}.display-area{margin:0 0 9px}.expression-display{min-height:48px;border:1.4px solid #c9bac7;border-radius:11px;background:#f7f1e9;padding:10px 11px;font-size:21px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;white-space:pre-wrap}.expression-display .placeholder{font-size:16px;font-weight:400;color:var(--soft)}
.answer-area{padding:0;border:0}.keypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.key{display:grid;place-items:center;background:#fffdf9;border:1.4px solid #b9aabd;border-radius:9px;min-height:48px;font-size:23px;font-weight:700;box-shadow:0 2px 0 #d9cbd060}.key:hover:not(:disabled){filter:brightness(.98)}.key.operation{background:#f5eff4}.key.edit-key{font-size:16px;background:#f5eff4}.primary{display:flex;justify-content:center;align-items:center;gap:8px;background:var(--berry);border:1px solid #8b2e4e;color:#fffdf7;border-radius:10px;min-height:46px;font-size:16px;font-weight:800;padding:9px 17px;box-shadow:0 2px 0 #832a4640}.primary:hover:not(:disabled){background:#9f3053}.primary:disabled{opacity:.5}.check-button{width:100%;margin-top:8px;justify-content:space-between}.check-button span{opacity:.65}.feedback{min-height:27px;padding:5px 0 0;font-size:16px;line-height:1.35;color:var(--berry);font-weight:700}.feedback.correct{color:var(--green)}.keypad-note{display:none}
.puzzle-info{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}.count-line{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:700}.tiny-spark{display:none}.info-btn{display:grid;place-items:center;font-size:14px;font-weight:700;width:20px;height:20px;border:1px solid #9c8ba0;border-radius:50%;background:transparent;padding:0;position:relative}.info-btn:after{content:'';position:absolute;inset:-7px}.rules-dropdown{position:relative;text-align:left}.rules-dropdown>summary{list-style:none;cursor:pointer;display:flex;gap:7px;align-items:center;min-height:40px;padding:5px 0 5px 8px;font-size:16px;font-weight:700;color:var(--berry);border-radius:8px}.rules-dropdown>summary::-webkit-details-marker{display:none}.rules-dropdown[open]>summary span{transform:rotate(180deg)}.rules-content{position:fixed;z-index:40;top:50%;left:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 28px));max-height:calc(100svh - 28px);overflow:auto;text-align:left;border:1.5px solid #bbaabd;border-radius:18px;background:var(--card);padding:20px;box-shadow:0 10px 40px #463a5440;font-size:16px;line-height:1.45}.rules-content strong{font:700 24px/1.2 Baloo,Nunito,sans-serif}.rules-content ul{padding-left:19px;margin:13px 0}.rules-content li{margin:8px 0}.rules-content p{margin:12px 0;font-size:16px}.rules-content .text-button{display:block;margin-left:auto;min-height:40px}
.reveal-zone{border-top:1px solid var(--line);padding:3px 0 7px;text-align:center}.reveal-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;width:100%;margin:auto;border:0;background:transparent;color:var(--berry);font-size:16px;font-weight:700;padding:5px 0}.reveal-button svg{width:18px;height:18px}.reveal-button:disabled{color:var(--soft);opacity:1}.reveal-zone p{display:none}.below-card{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:12px}.new-puzzle{display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid #b7a6b5;border-radius:11px;padding:8px 15px;min-height:44px;font-size:16px;font-weight:700}.new-puzzle:hover{background:#fff9ee}.new-puzzle svg{width:18px;height:18px}.new-puzzle:disabled{opacity:.5}.text-button{border:0;background:transparent;color:var(--berry);font-size:16px;font-weight:700;padding:6px 0;min-height:36px;text-align:left}.previous-button{font-size:14px;color:var(--soft)}.quiet-footer{font-size:16px;color:var(--soft);margin:12px 0 0;text-align:center}.entering .quiet-footer{display:none}.site-footer{display:flex;align-items:center;justify-content:space-between;max-width:560px;margin:10px auto 0;padding:0 18px max(10px,env(safe-area-inset-bottom));font-size:14px;color:var(--soft)}.site-footer button{background:transparent;border:0;text-decoration:underline;text-underline-offset:3px;font-size:14px;min-height:36px}.entering .site-footer{display:none}.storage-note{font-size:14px;line-height:1.5;text-align:center;color:var(--berry);margin:12px 0}
.dialog,dialog{width:min(520px,calc(100% - 28px));max-height:calc(100svh - 28px);overflow:auto;border:1.5px solid #bbaabd;background:var(--card);color:var(--ink);border-radius:20px;padding:20px;box-shadow:0 20px 90px #463a5433}dialog::backdrop{background:#463a5444;backdrop-filter:blur(3px)}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.modal-head h2{font:700 25px/1.15 Baloo,Nunito,sans-serif;margin:0}.close-modal{font-size:27px;flex-shrink:0;width:42px;min-height:42px;background:#f2e9ed;border-radius:50%}#modalBody{font-size:16px;line-height:1.45}#modalBody p{margin:12px 0}#modalBody ul{padding-left:20px}.callout{background:#f3edf5;border-radius:11px;padding:13px 15px;margin:13px 0;font-weight:700}.record{border-top:1px solid var(--line);padding:15px 0 6px}.record-numbers{font-size:18px;font-weight:800;letter-spacing:3px}.record-date{display:block;font-size:14px;color:var(--soft);letter-spacing:0;font-weight:400;margin-top:2px}.record-expression{font-size:16px;overflow-wrap:anywhere;margin:8px 0}.record-actions{display:flex;gap:22px}.preview-tool{width:100%;margin:8px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f3edf5;text-align:left;font-size:16px}.music-title{font-size:20px;font-weight:800;margin-bottom:3px!important}.music-title span{display:block;font-size:14px;color:var(--soft);font-weight:400}.sound-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;border-bottom:1px solid var(--line);font-size:16px;font-weight:700}.sound-row input{accent-color:var(--berry);width:23px;height:23px;cursor:pointer}.volume-label{display:block;font-size:16px;font-weight:700;margin:16px 0 5px}#volumeInput{width:100%;accent-color:var(--berry);min-height:36px}.sound-footnote{font-size:14px;line-height:1.45;color:var(--soft)}
.reveal-modal{width:min(720px,calc(100% - 24px));padding:18px}.reveal-hand{font-size:20px;font-weight:800;letter-spacing:3px;margin:6px 0!important}.reveal-hand span{font-size:16px;font-weight:400;letter-spacing:0;color:var(--soft)}.reveal-note{font-size:14px;line-height:1.4;color:var(--soft);margin:8px 0 12px!important}.answers-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.reveal-answer{display:flex;align-items:baseline;gap:7px;background:#f6f0e9;border:1px solid #e6dbe0;border-radius:9px;padding:6px 10px;font-size:16px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}.reveal-answer.found{background:#edf2e7;border-color:#b6c8a8}.found-legend{font-size:14px;color:var(--green);margin:9px 0!important}.modal-done{width:100%;margin-top:12px;min-height:44px}.own-answers-list{display:grid;gap:10px;font-size:16px}.own-answers-list>div{background:#f4f0e7;border-radius:9px;padding:10px}
@media(max-width:600px){.topbar{padding:6px 16px 0;min-height:60px}.wordbar-logo{width:50px}.topbar nav{gap:5px}.icon-btn{width:54px;min-height:48px}main{padding:3px 14px 0}.intro{margin-bottom:8px;gap:0 8px}.intro h1{font-size:26px}.entry-toggle-wrap .primary{font-size:16px;min-height:34px}.entry-toggle-wrap .primary svg{display:none}.subtitle{font-size:16px}.puzzle-card{padding:12px 14px 0;border-radius:18px}.card-head{margin-bottom:10px}.your-answers{padding-bottom:6px;margin-bottom:8px}.small-answer{font-size:16px;line-height:1.35}.numbers{gap:6px}.number-tile{height:56px;font-size:30px}.entering .number-tile{height:48px;font-size:26px}.keypad{gap:5px}.key{min-height:46px}.check-button{margin-top:7px;min-height:44px}.feedback{font-size:16px;min-height:26px;padding-top:4px}.puzzle-info{min-height:40px}.count-line{font-size:16px;gap:5px}.rules-dropdown>summary{font-size:16px;min-height:38px}.reveal-button{font-size:16px;min-height:36px}.reveal-zone{padding-top:1px;padding-bottom:5px}.below-card{margin-top:10px;gap:14px}.new-puzzle{min-height:42px;padding:7px 14px}.previous-button{font-size:14px}.site-footer{padding-left:14px;padding-right:14px}.answers-grid{grid-template-columns:1fr;gap:4px}.reveal-modal{padding:14px}.reveal-answer{font-size:16px;padding:4px 9px}.reveal-modal .modal-head{margin-bottom:4px}.reveal-hand{font-size:18px;margin:4px 0!important}.reveal-note{font-size:14px;margin:6px 0 9px!important}.modal-done{margin-top:10px}.found-legend{margin:7px 0!important}}
@media(max-width:350px){.topbar{padding-left:13px;padding-right:13px}main{padding-left:10px;padding-right:10px}.puzzle-card{padding-left:11px;padding-right:11px}.count-line{font-size:15px}.entry-toggle-wrap .primary{font-size:15px}.reveal-answer{padding-left:6px;padding-right:6px}.intro h1{font-size:25px}}
@media(max-height:700px) and (max-width:600px){.topbar{padding-top:3px;min-height:53px}.wordbar-logo{width:45px}.topbar .icon-btn{min-height:44px}.intro{margin-bottom:6px}.intro h1{font-size:24px}.puzzle-card{padding-top:10px}.your-answers{padding-bottom:5px;margin-bottom:7px}.display-area{margin-bottom:7px}.display-area .expression-display{min-height:44px;padding-top:8px;padding-bottom:8px}.entering .numbers{margin-bottom:5px}.key{min-height:44px}.check-button{min-height:42px;margin-top:6px}.puzzle-info{min-height:38px}.rules-dropdown>summary{min-height:36px}.reveal-button{min-height:34px}.below-card{margin-top:8px}.new-puzzle{min-height:40px}.reveal-answer{padding-top:3px;padding-bottom:3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
.numbers .number-tile:first-child{background:#fde7c2}
body{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(max-width:600px){.key{min-height:48px}.check-button{min-height:46px}}
/* Installed-app layout: centred brand, familiar title and one permanent calculator. */
.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;max-width:560px;padding:5px 18px 0}.nav-side{display:flex;justify-content:flex-start}.nav-side.nav-right{justify-content:flex-end}.wordbar{justify-self:center}.wordbar-logo{width:49px}.topbar .icon-btn{width:67px;min-height:48px}.intro{display:block;text-align:center;margin:3px 0 9px}.intro .eyebrow{font-size:14px;line-height:1.3;letter-spacing:1.7px;color:var(--soft);font-weight:800;margin:0 0 2px}.intro h1{display:inline-block;position:relative;font:700 42px/1.05 Baloo,Nunito,sans-serif;letter-spacing:-1.5px;margin:0 0 3px}.intro h1 span{color:var(--berry)}.title-spark{position:absolute;right:-24px;top:3px;width:20px;height:23px}.intro .subtitle{font-size:16px;line-height:1.35;color:var(--soft)}.solved-summary{font-size:14px;font-weight:700;line-height:1.4;margin:5px 0 0;color:var(--ink)}.below-card{flex-wrap:nowrap;justify-content:space-between;gap:12px}.below-card>.new-puzzle{flex:1}.below-card .style-select{flex:1;min-width:0}.below-card .style-select select{width:100%;max-width:none;min-height:42px;font-size:16px;background:var(--card);border-color:#b7a6b5}.install-row{display:flex;justify-content:center;margin-top:3px}.install-row .text-button{font-size:14px;min-height:30px}.progress-total{font-size:23px;font-weight:800;margin:3px 0!important}.save-status,.progress-footnote{font-size:14px;color:var(--soft);line-height:1.45}.progress-filter{display:flex;align-items:center;gap:10px;margin:15px 0 9px;font-size:16px}.progress-filter select{min-height:42px;flex:1;padding:6px 10px;border:1px solid #bbaabd;border-radius:9px;background:#fffdf6;font-size:16px}.history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;border-top:1px solid var(--line);padding:12px 0}.history-row strong{font-size:18px;letter-spacing:1px}.history-status{display:block;font-size:14px;color:var(--soft);margin-top:2px}.history-answers{grid-column:1/-1;font-size:16px}.history-answers summary{cursor:pointer;color:var(--berry);padding:5px 0}.history-answers p{font-size:16px;margin:6px 0!important}.progress-tools{display:flex;flex-wrap:wrap;gap:7px 18px;border-top:1px solid var(--line);padding-top:12px;margin-top:10px}.progress-tools .text-button{font-size:16px}.install-steps{font-size:16px;line-height:1.5;padding-left:22px}.install-steps li{margin:10px 0}.install-status{font-weight:700;color:var(--green)}
@media(max-width:600px){.topbar{padding-left:14px;padding-right:14px;min-height:55px}.wordbar-logo{width:46px}.intro{margin-top:2px;margin-bottom:8px}.intro h1{font-size:37px}.intro .eyebrow{font-size:14px;letter-spacing:1.4px}.intro .subtitle{font-size:16px}.title-spark{width:18px;height:21px;right:-22px;top:3px}.solved-summary{margin-top:4px;font-size:14px}.install-row .text-button{min-height:28px}.below-card{margin-top:9px}.below-card .style-select select{min-height:42px}}
@media(max-height:760px) and (max-width:600px){.intro .eyebrow{display:none}.intro h1{font-size:35px;margin-bottom:2px}.intro{margin-bottom:7px}.topbar{min-height:52px}.wordbar-logo{width:43px}.solved-summary{margin-top:3px}.install-row{margin-top:1px}}
/* v1.1: language switch (as WordBar Dictation's EN | 繁 | 简), Chinese fonts, check label */
.lang-switch{display:inline-flex;gap:2px;padding:3px;margin:0 0 4px;border:1px solid #d6c8d2;border-radius:999px;background:#fff9ee}.lang-switch button{min-width:44px;min-height:32px;padding:2px 10px;border:0;border-radius:999px;background:transparent;font-size:14px;font-weight:800;color:var(--soft)}.lang-switch button[aria-pressed="true"]{background:var(--berry);color:#fffdf7}
.check-button .check-label{opacity:1}
:lang(zh-Hant-HK){font-family:Nunito,"PingFang HK","Noto Sans HK","Microsoft JhengHei","Noto Sans CJK TC",system-ui,sans-serif}
:lang(zh-Hans){font-family:Nunito,"PingFang SC","Noto Sans SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif}
:lang(zh-Hant-HK) .rules-content strong,:lang(zh-Hans) .rules-content strong,:lang(zh-Hant-HK) .modal-head h2,:lang(zh-Hans) .modal-head h2{font-family:Baloo,"PingFang HK","PingFang SC","Microsoft JhengHei","Microsoft YaHei",sans-serif}
@media(max-height:700px) and (max-width:600px){.lang-switch{margin-bottom:2px}.lang-switch button{min-height:30px}}
.lang-switch{display:flex;width:max-content;margin:0 auto 2px}.lang-switch button{min-height:30px;min-width:42px}
/* v1.2: your answers sit below the calculator (after Add to Home Screen), so the keys never move down. */
.your-answers.below{margin:10px 0 14px;padding:10px 14px 10px;border:1.5px solid #c5b8c1;border-radius:16px;background:var(--card);border-bottom-width:1.5px}
.your-answers.below .small-answer+.small-answer{margin-top:2px}
/* ===== v1.3 layout (28 Oct 2026) ===== */
/* Header: WordBar logo top-left; language and Sound top-right. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;grid-template-columns:none}
.topbar .wordbar{justify-self:auto}.wordbar-logo{width:46px}
.top-right{display:flex;align-items:center;gap:6px}
.top-right .lang-switch{margin:0;width:auto}.top-right .lang-switch button{min-width:38px;min-height:34px;padding:2px 8px}
.topbar .icon-btn{width:56px;min-height:46px}
.intro{margin-top:0}.intro h1{margin-top:2px}
button.solved-summary{display:inline-block;border:0;background:transparent;color:var(--berry);font:inherit;font-size:14px;font-weight:800;padding:4px 8px;min-height:30px;border-radius:8px;cursor:pointer}
button.solved-summary:hover{background:#fff4e2}
/* The puzzle: the four numbers sit in their own tray, labelled as the question, with the target. */
.question{background:#fff6e4;border:1.5px solid #e9c98d;border-radius:16px;padding:10px 10px 10px;margin:0 0 10px}
.question-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 8px}
.question-kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#9a6a12}
.question h2{margin:1px 0 0;font:800 16px/1.25 Nunito,system-ui,sans-serif;color:var(--ink)}
.target{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;padding:3px 8px 4px;border-radius:12px;background:var(--berry);color:#fffdf7;line-height:1;flex-shrink:0}
.target span{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;opacity:.9}
.target b{font:700 26px/1 Baloo,Nunito,sans-serif}
.question .numbers{margin:0}
.entering .question .number-tile{height:54px;font-size:28px}
.display-area{margin:0 0 9px}
/* Rules is now a button that opens the How to play sheet. */
.rules-button{border:0;background:transparent;color:var(--berry);font-size:16px;font-weight:700;min-height:40px;padding:5px 0 5px 8px;cursor:pointer}
/* Countdown */
.reveal-zone p{display:block;margin:0 0 4px;font-size:14px;color:var(--soft)}
.reveal-button{font-variant-numeric:tabular-nums}
.reveal-button.ready{color:var(--berry)}
/* Action row: My record, Share, Add to Home Screen */
.action-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:10px}
.action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;padding:6px 4px;border:1px solid #d9c9d3;border-radius:12px;background:#fffdf6;color:var(--ink);font-size:13px;font-weight:800;line-height:1.15;text-align:center}
.action-btn svg{width:21px;height:21px;color:var(--berry)}
.action-btn:hover{background:#fff4e2}
.install-row{display:none}
/* How to play sheet */
.rules-lead{font-weight:800}
.rules-list{padding-left:20px;margin:8px 0}.rules-list li{margin:6px 0}
.privacy-box{margin-top:12px;padding:10px 12px;border-radius:12px;background:#f6f0e9;border:1px solid #e6dbe0;font-size:14px}
.privacy-box p{margin:6px 0!important;font-size:14px}
.privacy-box .sound-row{min-height:44px;border-bottom:0;font-size:15px}
.privacy-box a{color:var(--berry);font-weight:700}
.share-link{width:100%;min-height:44px;padding:8px 10px;border:1px solid #bbaabd;border-radius:9px;background:#fff;font-size:15px}
.history-answers small{color:var(--soft);font-size:13px;margin-left:6px}
#modalBody ul{margin:8px 0}
@media(max-width:360px){.top-right .lang-switch button{min-width:34px;padding:2px 6px}.topbar .icon-btn{width:50px}.wordbar-logo{width:42px}.question h2{font-size:15px}.target{min-width:52px}.action-btn{font-size:12px}}
@media(max-height:700px) and (max-width:600px){.entering .question .number-tile{height:48px;font-size:26px}.question{padding:8px;margin-bottom:8px}.question-head{margin-bottom:6px}.action-btn{min-height:52px}}
/* v1.4: Share sits in the header next to Sound; subtitle removed; bottom row is My record + Add to Home Screen. */
.top-right{gap:4px}.topbar .icon-btn{width:52px;min-height:46px}.topbar .icon-btn span{font-size:13px}
.intro h1{margin-bottom:0}
@media(max-width:360px){.topbar{padding-left:10px;padding-right:10px}.top-right{gap:2px}.topbar .icon-btn{width:46px}.topbar .icon-btn span{font-size:12px}.top-right .lang-switch button{min-width:32px;padding:2px 5px}}
.intro button.solved-summary{display:block;margin:0 auto}
/* v1.5: Safari and other phone browsers float their toolbar over the bottom of the page.
   Leave room below the last row so it can always be scrolled clear, and keep sheets above it. */
main{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
dialog{margin:max(12px,env(safe-area-inset-top,0px)) auto auto;max-height:calc(100svh - 130px - env(safe-area-inset-top,0px));max-height:calc(100dvh - 130px - env(safe-area-inset-top,0px))}
/* the main button of a sheet stays visible while the sheet scrolls */
#modalBody .modal-done{position:sticky;bottom:0;z-index:1;box-shadow:0 -10px 14px var(--card),0 2px 0 #832a4640}
/* a little tighter so more fits above the toolbar */
.puzzle-info{min-height:36px}.reveal-zone{padding-bottom:6px}.reveal-zone p{font-size:13px;line-height:1.35}
.below-card{margin-top:8px}.action-row{margin-top:8px}.action-btn{min-height:52px}
/* v1.6: shorter page so the whole game sits above a phone browser's floating toolbar, with room to spare. */
main{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
.topbar{min-height:48px;padding-top:4px}.wordbar-logo{width:40px}.topbar .icon-btn{min-height:42px}
.intro{margin:0 0 6px}.intro h1{font-size:31px;line-height:1}
.title-spark{width:15px;height:18px;right:-19px;top:0}
.tagline{margin:1px 0 0;font-size:13px;font-style:italic;letter-spacing:.2px;color:var(--soft)}
.intro button.solved-summary{font-size:13px;min-height:24px;padding:1px 8px}
.puzzle-card{padding-top:10px}
.question{padding:7px 8px 8px;margin-bottom:8px}.question-head{margin-bottom:5px}.question h2{font-size:15px}
.target{min-width:50px;padding:2px 7px 3px}.target b{font-size:22px}
.entering .question .number-tile{height:46px;font-size:26px}
.display-area{margin-bottom:7px}.display-area .expression-display{min-height:42px;padding-top:7px;padding-bottom:7px}
.keypad{gap:5px}.key{min-height:42px!important}
.check-button{min-height:42px!important;margin-top:6px}
.feedback{min-height:22px;padding-top:3px}
.puzzle-info{min-height:32px}.rules-button{min-height:32px}
.reveal-zone{padding:2px 0 5px}.reveal-button{min-height:30px}
.below-card{margin-top:7px}.new-puzzle,.below-card .style-select select{min-height:40px}
.action-row{margin-top:7px}.action-btn{flex-direction:row;gap:7px;min-height:42px;font-size:14px}
.tagline{margin:2px 0 0;line-height:1.3}.tagline button.solved-summary,.intro .tagline button.solved-summary{display:inline;margin:0;padding:2px 4px;min-height:24px;font-style:normal;vertical-align:baseline}
/* v1.7: tagline only, centred under the title */
.intro{text-align:center}.tagline{display:block;text-align:center;margin:3px auto 0}