:root { font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif; color: #244b50; background: #dbeeed; font-synthesis: none; --ink: #244b50; --muted: #5c787c; --accent: #31696c; --line: #b7d3d2; --panel: #f7fcf8b0; --board: #accdceb0; --cell: #edf8f3ad; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: linear-gradient(166deg,#cde9ed 0%,#e7f1df 55%,#f4ecd5 100%); transition: background 1.2s; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #9d5821; outline-offset: 4px; }
button { border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sky-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sky-orb { position: absolute; width: 300px; height: 300px; border-radius: 50%; top: 12%; right: -160px; background: #ffedac; box-shadow: 0 0 0 35px #fff5c020,0 0 0 70px #fff5c012; opacity: .7; }
.cloud-bank { width: 600px; height: 180px; border-radius: 50%; background: #ffffff50; position: absolute; box-shadow: -150px 35px 0 10px #ffffff50,170px 50px 0 15px #ffffff50; }
.cloud-bank:before,.cloud-bank:after { content:''; position: absolute; background: #ffffff60; border-radius: 50%; width: 210px; height: 160px; top: -55px; left: 80px; }
.cloud-bank:after { width: 270px; height: 190px; left: 250px; top: -85px; }
.cloud-bank-a { bottom: -90px; left: -280px; animation: drift 30s ease-in-out infinite alternate; }
.cloud-bank-b { top: 22%; left: -420px; opacity: .35; transform: scale(.8); animation: drift 40s ease-in-out infinite alternate-reverse; }
.horizon { position: absolute; bottom: -180px; left: 38%; height: 280px; width: 1000px; border-radius: 50%; background: #eef3dc70; transform: rotate(-8deg); }
.sky-stars { position: absolute; inset: 0; opacity: 0; background-image: radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 2px),radial-gradient(circle at 80% 13%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 92% 53%,#fff 0 1px,transparent 2px),radial-gradient(circle at 9% 73%,#fff 0 1px,transparent 2px),radial-gradient(circle at 36% 7%,#fff 0 1px,transparent 2px); }
.topbar, main, .footer { position: relative; z-index: 1; }
.topbar { max-width: 1336px; padding: 30px 44px; margin: auto; display: flex; align-items: center; gap: 24px; }
.wordmark { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: 29px; font-weight: bold; letter-spacing: -1.3px; white-space: nowrap; }
.brand-icon { display: grid; place-items: center; font-family: sans-serif; background: var(--accent); color: #ffedbb; border-radius: 12px; width: 35px; height: 35px; font-size: 26px; line-height: 1; box-shadow: 0 3px 0 #1d555725; }
.version-tag { font: 9px 'Segoe UI',sans-serif; padding: 3px 5px; letter-spacing: .8px; border: 1px solid #77999a70; border-radius: 5px; margin-top: 5px; }
.tagline { font-size: 12px; color: var(--muted); letter-spacing: .4px; padding-left: 16px; border-left: 1px solid var(--line); }
.header-actions { margin-left: auto; display: flex; gap: 9px; }
.icon-button { width: 39px; height: 39px; display: inline-grid; place-items: center; border-radius: 50%; background: #ffffff59; border: 1px solid #ffffff95; transition: background .2s, transform .2s; }
.icon-button:hover { background: #ffffffe0; transform: translateY(-1px); }
.icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.game-layout { max-width: 1164px; margin: 22px auto 0; display: grid; grid-template-columns: minmax(185px,224px) minmax(350px,500px) minmax(180px,224px); gap: 38px; align-items: start; padding: 0 24px; }
.play-area { min-width: 0; }
.level-heading { text-align: center; margin: 0 0 21px; }
.eyebrow { display: block; font-size: 9px; font-weight: 700; letter-spacing: 2px; line-height: 1.5; }
.level-heading .eyebrow { color: var(--muted); letter-spacing: 2.4px; }
h1,h2,h3,p { margin: 0; }
h1 { font-family: Georgia,'Times New Roman',serif; font-weight: normal; font-size: 33px; letter-spacing: -.8px; margin-top: 7px; }
.level-heading p { font-size: 12px; color: var(--muted); margin-top: 7px; }
.panel { background: var(--panel); border: 1px solid #ffffffb3; box-shadow: 0 8px 30px #52777708; border-radius: 22px; }
.goals-panel { margin-top: 110px; padding: 26px 23px 20px; }
.goals-panel .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
.goals-panel h2 { font: normal 25px Georgia,serif; margin: 10px 0 10px; letter-spacing: -.5px; }
.goals-panel>p { font-size: 11px; line-height: 1.75; color: var(--muted); }
.goals { display: grid; gap: 19px; margin-top: 25px; }
.goal { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.goal-art { width: 42px; height: 42px; filter: drop-shadow(0 3px 2px #36575c20); }
.goal-text { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 7px; gap: 4px; }
.goal-text b { font-weight: 600; }
.goal-text span { color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-meter { height: 5px; background: #97b9b333; border-radius: 6px; overflow: hidden; }
.goal-meter>div { height: 100%; background: #608d75; border-radius: inherit; transition: width .25s; }
.goal.done .goal-text { color: #3b7b55; }
.level-note { border-top: 1px solid var(--line); margin-top: 23px; padding-top: 17px; display: flex; gap: 10px; align-items: start; }
.level-note>span { font-size: 25px; line-height: 1; color: #b8934a; }
.level-note p { font: italic 12px/1.65 Georgia,serif; color: var(--muted); }
.save-status { margin-top: 23px; font-size: 9px; color: var(--muted); letter-spacing: .1px; }
.save-status.warning { color: #97502f; }
.board-shell { padding: 15px 14px 0; border-radius: 27px; background: #ffffff5e; box-shadow: 0 14px 50px #3b666b16,inset 0 0 0 1px #ffffffa6; border: 1px solid #fff9; }
.board-top { display: flex; align-items: center; margin: 0 4px 13px; gap: 15px; }
.moves { display: flex; gap: 10px; align-items: center; }
.moves strong { width: 44px; height: 44px; border-radius: 14px; background: var(--accent); color: #f7fff1; display: grid; place-items: center; font-size: 25px; font-weight: 500; font-variant-numeric: tabular-nums; box-shadow: 0 2px 4px #254f5b16; }
.moves span,.score>span { font-size: 8px; font-weight: 700; letter-spacing: 1.2px; }
.moves.low strong { background: #a66441; }
.score { margin-left: auto; display: grid; text-align: right; gap: 2px; }
.score>span { color: var(--muted); }
.score strong { font-weight: 500; font-size: 17px; font-variant-numeric: tabular-nums; }
.board-top .icon-button { width: 34px; height: 34px; }
.board { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); grid-template-rows: repeat(7,minmax(0,1fr)); aspect-ratio: 1; gap: 5px; padding: 9px; background: var(--board); border: 1px solid #72999e47; border-radius: 18px; box-shadow: inset 0 2px 6px #476f7516; touch-action: none; user-select: none; -webkit-user-select: none; position: relative; }
.tile { aspect-ratio: 1; min-width: 0; min-height: 0; padding: 4px; position: relative; border-radius: 11px; background: var(--cell); box-shadow: inset 0 1px 0 #ffffffc4,0 2px 2px #426c7310; border: 1px solid #ffffff7a; display: grid; place-items: center; transition: background .14s, box-shadow .14s, transform .14s; }
.board-row { display: contents; }
.tile:nth-child(2n) { background: #e8f4ef99; }
.tile:hover { background: #ffffffdd; }
.tile:focus-visible { outline-offset: -1px; z-index: 2; }
.tile.selected { background: #fff7d0; outline: 2.5px solid #ba7e38; outline-offset: -1px; transform: scale(1.04); z-index: 3; }
.tile.hinted { box-shadow: inset 0 0 0 2px #a17132,0 0 0 2px #fff8; background: #fff7cf; }
.tile.hinted:after { content:''; position: absolute; inset: -3px; border: 2px solid #c28d41; border-radius: 13px; animation: breathe 1.8s ease-in-out infinite; pointer-events: none; }
.piece-art { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); pointer-events: none; overflow: visible; filter: drop-shadow(0 2px 1px #234f5b2b); z-index: 1; transition: transform .16s; }
.tile:hover .piece-art { transform: translateY(-2px); }
.tile.fog { background: #b1c4d7c2; border-color: #899fb9a8; }
.tile.fog:before { content:''; position: absolute; inset: 3px; border: 1px dashed #5f7e9a9c; border-radius: 8px; background: repeating-linear-gradient(-30deg,transparent,transparent 7px,#eef6ff2e 7px,#eef6ff2e 9px); }
.tile.fog .piece-art { filter: drop-shadow(0 1px 1px #264a5760); }
.special-badge { position: absolute; right: -2px; bottom: -2px; min-width: 20px; height: 18px; border-radius: 8px; font-size: 14px; font-weight: 700; display: grid; place-items: center; color: #fff7d9; background: #3b6475; border: 1.5px solid #fff8dc; z-index: 3; line-height: 1; box-shadow: 0 1px 3px #345b7040; }
.special-burst .special-badge { color: #fff; background: #ba713e; }
.special-rainbow { background: #f4e5f5cf!important; box-shadow: inset 0 0 0 1px #bc91c36b,0 0 10px #fff6; }
.tile-symbol { position: absolute; top: 1px; left: 2px; color: #193f4e; font-size: 8px; font-weight: 800; line-height: 1.3; padding: 1px 2px; background: #fffef2e8; border-radius: 3px; z-index: 4; }
.board.locked { pointer-events: none; }
.tile.clearing .piece-art { animation: pop .32s ease-in forwards; }
.tile.clearing:after { content:'✧'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff7ba; font-size: 34px; z-index: 4; animation: sparkle .35s ease-out forwards; text-shadow: 0 0 8px #94733c; }
.tile.creating { animation: create .45s ease-out; }
.tile.falling .piece-art,.tile.falling .special-badge,.tile.falling .tile-symbol { animation: fall .37s cubic-bezier(.2,.75,.3,1) both; opacity: 1; transition: none; }
.tile.swapping .piece-art { animation: swap-in .18s ease-out; }
.board.shuffling .piece-art { animation: shuffle .45s ease-in-out; }
.tile.invalid { animation: shake .25s ease-in-out; }
.board-bottom { height: 34px; padding: 0 5px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }
.tiny-spark { font-size: 20px; color: #a98f52; }
.coach { min-height: 52px; display: flex; align-items: center; gap: 10px; background: #fff8e5b5; border: 1px solid #fffaf0; border-radius: 14px; padding: 10px 13px; margin-top: 14px; }
.coach-star { font-size: 22px; color: #ac8543; }
.coach p { font-size: 11px; line-height: 1.5; flex: 1; }
.text-button { font-size: 11px; color: var(--muted); text-decoration: underline; background: transparent; padding: 9px 4px; }
.coach[hidden] { display: none; }
.game-actions { display: flex; justify-content: center; gap: 10px; margin-top: 17px; }
.action-button { display: inline-flex; gap: 6px; align-items: center; justify-content: center; padding: 8px 13px; min-height: 38px; border-radius: 11px; border: 1px solid #ffffff85; background: #ffffff4a; font-size: 10px; transition: background .2s; }
.action-button:hover { background: #ffffffa0; }
.action-button .icon { width: 15px; height: 15px; }
.comfort-line { margin-top: 17px; text-align: center; color: var(--muted); font: italic 12px Georgia,serif; }
.journey-panel { margin-top: 114px; padding-left: 4px; }
.journey-panel h2 { margin-top: 10px; font: normal 25px Georgia,serif; letter-spacing: -.6px; }
.journey-panel>p { font-size: 11px; line-height: 1.7; color: var(--muted); margin-top: 10px; }
.journey { display: grid; gap: 24px; margin-top: 27px; }
.chapter { position: relative; }
.chapter-label { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 10px; font-weight: 600; }
.chapter-label>span { font-size: 18px; width: 22px; text-align: center; color: #a18c52; }
.chapter-label small { margin-left: auto; font-size: 8px; color: var(--muted); font-weight: 400; }
.level-dots { display: flex; gap: 8px; }
.level-dot { width: 33px; height: 33px; border-radius: 50%; font-size: 11px; background: #ffffff3b; border: 1px solid #678e8b40; position: relative; }
.level-dot:not(:disabled):hover { background: #fff; }
.level-dot.current { background: var(--accent); color: #fffbe8; border-color: transparent; box-shadow: 0 0 0 3px #f6fff0a0,0 0 0 4px #5477773b; }
.level-dot.complete:after { content:'✓'; position: absolute; top: -4px; right: -3px; font-size: 9px; border-radius: 50%; background: #3f7d61; color: white; padding: 1px 3px; }
.level-dot:disabled { opacity: .45; border-style: dashed; }
.discovery { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 29px; }
.discovery svg { height: 40px; width: 38px; flex-shrink: 0; filter: drop-shadow(0 2px 2px #5f768528); }
.discovery p { display: grid; gap: 5px; font-size: 10px; line-height: 1.5; }
.discovery strong { font-weight: 600; }
.discovery span { color: var(--muted); }
.footer { max-width: 1248px; margin: 32px auto 0; padding: 20px 24px 24px; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); opacity: .75; font-size: 8px; letter-spacing: 1.3px; }
.footer>span:last-child { letter-spacing: .4px; }
.toast { position: fixed; z-index: 5; bottom: 24px; left: 50%; transform: translate(-50%,14px); max-width: min(92vw,440px); padding: 12px 19px; background: #294f54; color: #fffde8; box-shadow: 0 8px 30px #183a5330; border-radius: 14px; font-size: 12px; line-height: 1.5; opacity: 0; pointer-events: none; transition: opacity .2s,transform .2s; text-align: center; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
dialog { border: 1px solid #ffffffb0; border-radius: 26px; padding: 30px; width: min(90vw,440px); max-height: 88vh; color: #244b50; background: #f4f8ef; box-shadow: 0 25px 100px #203e5466; }
dialog::backdrop { background: #1e42566b; backdrop-filter: blur(5px); }
dialog h2 { font: normal 31px Georgia,serif; margin: 8px 0 12px; letter-spacing: -.6px; }
dialog p { font-size: 13px; line-height: 1.7; color: #5c787c; }
.modal-top { display: flex; justify-content: space-between; align-items: center; }
.close-button { background: #dce8dd; border-radius: 50%; width: 31px; height: 31px; font-size: 21px; line-height: 1; }
.modal-actions { display: flex; gap: 9px; margin-top: 24px; flex-wrap: wrap; }
.primary-button,.secondary-button { border-radius: 13px; padding: 13px 19px; font-size: 12px; font-weight: 600; flex: 1; }
.primary-button { background: #31696c; color: #fffceb; }
.secondary-button { background: #e1eade; color: #365d61; }
.primary-button:hover { background: #244e54; }
.secondary-button:hover { background: #d0dfcd; }
.settings-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; border-bottom: 1px solid #cbdccd; padding: 16px 0; font-size: 13px; }
.settings-row span { display: grid; gap: 4px; }
.settings-row small { font-size: 11px; color: #5c787c; }
input[type="checkbox"] { accent-color: #31696c; width: 21px; height: 21px; }
input[type="range"] { accent-color: #31696c; width: 130px; }
.settings-note { margin-top: 17px; font-size: 11px; }
.help-intro { margin-bottom: 18px; }
.help-rule { display: flex; gap: 13px; align-items: center; margin: 17px 0; font-size: 12px; line-height: 1.6; }
.help-rule svg { width: 43px; height: 43px; flex-shrink: 0; }
.help-rule strong { display: block; }
.help-rule span { color: #5c787c; }
.help-combos { background: #e6eee3; border-radius: 12px; padding: 13px 16px; margin-top: 18px; }
.help-combos summary { cursor: pointer; font-size: 12px; font-weight: 600; }
.help-combos p { font-size: 11px; margin-top: 10px; }
.result-art { display: flex; justify-content: center; gap: 12px; margin: 14px 0 22px; }
.result-art svg { width: 65px; height: 65px; }
.result-art svg:nth-child(2) { transform: translateY(-10px); }
.result-stat { display: grid; grid-template-columns: 1fr 1fr; text-align: center; border: 1px solid #cadccf; border-radius: 13px; padding: 15px; margin-top: 20px; }
.result-stat strong { font-size: 23px; font-weight: 500; display: block; }
.result-stat span { font-size: 10px; color: #5c787c; }
.modal-journey .journey { margin-bottom: 12px; }
.modal-journey .level-dots { gap: 16px; }
.modal-journey .level-dot { width: 48px; height: 48px; }
.noscript { background: white; color: #244b50; padding: 30px; position: fixed; inset: 30% 10%; z-index: 9; }
body[data-theme="sunset"] { background: linear-gradient(160deg,#e5cad7 0%,#f5d6c0 55%,#f4e6c9 100%); --ink: #594a5b; --muted: #826977; --accent: #765f80; --line: #d9bac2; --panel: #fff6edb0; --board: #c5b0c6b0; --cell: #fff2eab0; color: var(--ink); }
body[data-theme="sunset"] .tile:nth-child(2n) { background: #f3e2e6ac; }
body[data-theme="sunset"] .sky-orb { background: #ffd795; top: 35%; }
body[data-theme="night"] { background: linear-gradient(160deg,#273f60 0%,#425678 60%,#6c738c 100%); --ink: #e4eee7; --muted: #b7c8d2; --accent: #4e7185; --line: #90a7b54d; --panel: #d7e6ec12; --board: #203b5899; --cell: #b1c6d94f; color: var(--ink); }
body[data-theme="night"] .sky-orb { background: #e6e7ca; width: 180px; height: 180px; top: 14%; right: -80px; }
body[data-theme="night"] .sky-stars { opacity: .8; }
body[data-theme="night"] .cloud-bank,body[data-theme="night"] .horizon { opacity: .16; }
body[data-theme="night"] .board-shell { background: #c3dbec18; border-color: #c1d2e34d; box-shadow: 0 18px 50px #11284533,inset 0 0 0 1px #ffffff1a; }
body[data-theme="night"] .tile { border-color: #d5e7f947; box-shadow: inset 0 1px 0 #ffffff30,0 2px 2px #152d4826; }
body[data-theme="night"] .tile:nth-child(2n) { background: #a6c5d63f; }
body[data-theme="night"] .tile:hover { background: #aecbdc85; }
body[data-theme="night"] .tile.hinted,body[data-theme="night"] .tile.selected { background: #e8d9b3bb; }
body[data-theme="night"] .tile.fog { background: #8293b8a6; }
body[data-theme="night"] .coach { background: #263e5e66; border-color: #abb8cd40; }
body[data-theme="night"] .panel { border-color: #c0d7df40; }
body[data-theme="night"] .goal.done .goal-text { color: #b7e4bb; }
body[data-theme="night"] .icon-button,body[data-theme="night"] .action-button { background: #afc6d321; border-color: #dae5ea40; }
body[data-theme="night"] .icon-button:hover,body[data-theme="night"] .action-button:hover { background: #afc6d34a; }
body[data-theme="night"] .level-dot:not(:disabled):hover { background: #8195a4; }
body[data-theme="night"] .tile-symbol { color: #193f4e; }
body[data-theme="night"] .save-status.warning { color: #ffd59b; }
@keyframes drift { to { translate: 30px -10px; } }
@keyframes breathe { 50% { opacity: .4; scale: 1.05; } }
@keyframes pop { 25% { transform: scale(1.15); } to { transform: scale(.3); opacity: 0; } }
@keyframes sparkle { from { scale: .4; opacity: 0; } 50% { opacity: 1; } to { scale: 1.3; opacity: 0; } }
@keyframes create { 40% { box-shadow: 0 0 0 8px #fffbc399; transform: scale(1.08); } }
@keyframes fall { 0% { transform: translateY(var(--fall-from)); } 76% { transform: translateY(0); } 88% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes swap-in { from { transform: scale(.75); } to { transform: none; } }
@keyframes shake { 30% { translate: -3px; } 60% { translate: 3px; } }
@keyframes shuffle { 50% { transform: scale(.5) rotate(20deg); opacity: .3; } }
.reduced-motion *, .reduced-motion *:before, .reduced-motion *:after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
@media(prefers-reduced-motion:reduce) { body:not(.motion-enabled) *,body:not(.motion-enabled) *:before,body:not(.motion-enabled) *:after { animation: none!important; transition: none!important; } }

/* Permanent play/menu tracks. Panel contents never participate in board sizing. */
body { --header-height:60px; height:100dvh; min-height:360px; overflow:hidden; }
.topbar { height:var(--header-height); max-width:none; padding:8px 20px; gap:20px; }
.wordmark { font-size:25px; letter-spacing:-1px; }
.brand-icon { width:32px; height:32px; font-size:25px; }
.topbar .level-heading { display:flex; align-items:baseline; gap:12px; text-align:left; margin:0; min-width:0; }
.level-heading .eyebrow { font-size:9px; letter-spacing:1px; white-space:nowrap; }
h1 { font-size:22px; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sound-button { margin-left:auto; flex-shrink:0; width:42px; height:42px; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; width:100%; height:calc(100dvh - var(--header-height) - 12px); max-width:none; margin:0; padding:0 18px; align-items:stretch; }
.play-area { display:grid; grid-template-rows:56px minmax(0,1fr) 100px; gap:8px; height:100%; width:100%; max-width:none; margin:0; min-width:0; min-height:0; }
.board-top { display:flex; align-items:center; gap:18px; margin:0; padding:0 8px; min-width:0; }
.moves { gap:8px; flex-shrink:0; }
.moves strong { width:46px; height:46px; font-size:29px; border-radius:15px; }
.moves span { line-height:1.5; }
.goals { display:flex; align-items:center; justify-content:center; flex:1; margin:0; gap:18px; min-width:0; }
.goal { display:grid; grid-template-columns:34px minmax(76px,112px); gap:6px; min-width:0; }
.goal-art { width:34px; height:34px; }
.goal-text { gap:6px; margin-bottom:5px; font-size:11px; }
.goal-text span { white-space:nowrap; }
.goal-meter { height:4px; }
.score { display:none; }
.board-shell { min-height:0; padding:5px; border-radius:22px; }
.board { width:100%; height:100%; aspect-ratio:auto; padding:8px; gap:6px; overflow:hidden; }
.tile { aspect-ratio:auto; border-radius:12px; }
.piece-art { opacity:1; }
.board.locked .tile:hover .piece-art { transform:none; }
.play-messages { min-width:0; height:100%; display:grid; grid-template-rows:22px 32px 38px; gap:4px; overflow:hidden; }
.status-strip { position:relative; display:grid; place-items:center; font-size:11px; color:var(--muted); text-align:center; padding:2px 6px; min-width:0; overflow:hidden; }
.toast { position:absolute; inset:0; transform:none; max-width:none; padding:2px 6px; border-radius:7px; font-size:11px; line-height:1.35; box-shadow:none; display:grid; place-items:center; background:var(--accent); color:#fffceb; }
.toast.visible { transform:none; }
.status-strip:has(.toast.visible) #board-status { visibility:hidden; }
.coach { height:38px; min-height:0; padding:3px 10px; margin:0; gap:8px; border-radius:10px; }
.coach p { font-size:11px; line-height:1.25; }
.coach-star { font-size:19px; }
.text-button { padding:7px; min-height:32px; }
.context-panel { display:grid; grid-template-rows:46px minmax(0,1fr); gap:12px; min-width:0; min-height:0; height:100%; padding:12px; border:1px solid #ffffffb0; border-radius:22px; background:#f4f8ef; color:#244b50; box-shadow:0 8px 32px #203e5420; }
.game-actions { margin:0; padding:0; gap:6px; display:flex; align-items:stretch; }
.action-button { flex:1; min-width:0; min-height:44px; padding:6px 4px; font-size:11px; border-radius:11px; border-color:#c8dacf; background:#e1eade; }
.action-button .icon { width:16px; height:16px; }
.action-button[aria-expanded="true"] { box-shadow:inset 0 0 0 2px #31696c; }
.context-body { position:relative; min-height:0; min-width:0; overflow:hidden; }
#context-home { height:100%; padding:10px 4px 12px; overflow:auto; overscroll-behavior:contain; }
#context-home[hidden] { display:none; }
#context-home h2 { font:normal 28px Georgia,serif; margin:10px 0 14px; letter-spacing:-.5px; }
#context-home p { font-size:12px; line-height:1.65; color:#5c787c; }
#context-home .option-grid { margin-top:22px; }
.context-summary { display:grid; gap:8px; border-top:1px solid #cbdccd; margin-top:24px; padding-top:16px; font-size:11px; color:#5c787c; }
.context-wait { margin-top:24px; padding:16px 12px; background:#e1eade; border-radius:12px; }
.context-body dialog { position:absolute; inset:0; margin:0; width:100%; height:100%; max-width:none; max-height:none; border:0; padding:8px 4px 12px; border-radius:0; background:transparent; box-shadow:none; overflow:auto; overscroll-behavior:contain; color:#244b50; }
.context-body dialog:not([open]) { display:none; }
dialog h2 { font-size:27px; margin:6px 0 12px; }
dialog p { font-size:12px; line-height:1.6; }
.modal-top { position:sticky; top:-8px; background:#f4f8ef; z-index:2; padding-block:4px; }
.modal-top .eyebrow { font-size:8px; letter-spacing:1px; }
.close-button { width:42px; height:42px; flex-shrink:0; }
.panel-tip { margin-top:16px; font-size:10px; color:#5c787c; }
.option-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.option-grid button { display:flex; align-items:center; gap:8px; text-align:left; min-height:46px; padding:9px; border-radius:12px; background:#e1eade; color:#365d61; font-size:12px; }
.option-grid button:hover { background:#d0dfcd; }
.option-note { margin-top:16px; }
.settings-row { padding:12px 0; }
.settings-row small { max-width:155px; }
input[type="range"] { width:100px; flex-shrink:0; }
.modal-actions { gap:8px; margin-top:16px; }
.primary-button,.secondary-button { padding:12px; min-height:44px; }
.result-art { margin:12px 0; gap:6px; }
.result-art svg { width:48px; height:48px; }
.result-stat { margin-top:12px; padding:10px; }
.journey { gap:18px; margin-top:16px; }
.modal-journey .level-dots { gap:12px; }
.modal-journey .level-dot { width:44px; height:44px; }
body[data-theme="night"] .context-panel .action-button { background:#e1eade; border-color:#c8dacf; color:#244b50; }
@media(min-width:701px) and (max-width:1100px) {
  .game-layout { grid-template-columns:minmax(0,1fr) 280px; gap:12px; padding-inline:12px; }
  .goals { gap:10px; }
  .goal { grid-template-columns:28px 42px; gap:4px; }
  .goal-art { width:28px; height:28px; }
  .goal-text b { display:none; }
}
@media(max-width:700px) and (orientation:portrait) {
  body { --header-height:56px; height:auto; min-height:100dvh; overflow-y:auto; overflow-x:hidden; }
  .topbar { padding:7px 12px; gap:12px; }
  .wordmark { font-size:21px; gap:6px; }
  .brand-icon,.version-tag { display:none; }
  .topbar .level-heading { display:block; margin-left:auto; }
  .level-heading .eyebrow { font-size:7px; letter-spacing:.5px; }
  h1 { font-size:15px; margin-top:2px; max-width:180px; letter-spacing:-.3px; }
  #sound-button { margin-left:0; width:38px; height:38px; }
  .game-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:clamp(440px,calc(100svh - 300px),660px) 360px; height:auto; gap:12px; padding:0 6px max(12px,env(safe-area-inset-bottom)); }
  .play-area { grid-template-rows:50px minmax(0,1fr) 90px; gap:6px; }
  .board-top { gap:10px; padding:0 4px; }
  .moves { display:grid; justify-items:center; gap:1px; }
  .moves strong { width:40px; height:35px; font-size:24px; border-radius:10px; }
  .moves span { font-size:7px; letter-spacing:.7px; }
  .moves br { display:none; }
  .goals { gap:12px; justify-content:space-evenly; }
  .goal { grid-template-columns:28px minmax(36px,65px); gap:5px; }
  .goal-art { width:28px; height:28px; }
  .goal-text { font-size:10px; gap:3px; }
  .goals:has(.goal:nth-child(2)) .goal-text b { display:none; }
  .board-shell { padding:3px; border-radius:17px; }
  .board { padding:4px; gap:4px; border-radius:13px; }
  .tile { border-radius:9px; }
  .piece-art { inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); }
  .play-messages { grid-template-rows:20px 30px 36px; gap:2px; }
  .status-strip,.toast { font-size:10px; }
  .coach { height:36px; padding:2px 8px; }
  .coach p { font-size:10px; }
  .context-panel { padding:10px; grid-template-rows:44px minmax(0,1fr); gap:8px; }
  .action-button { font-size:12px; }
  #context-home { padding:4px; }
  #context-home h2 { font-size:22px; margin:4px 0 6px; }
  #context-home .eyebrow { font-size:8px; }
  #context-home .option-grid { margin-top:12px; }
  #context-home p { font-size:11px; }
  .option-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .option-grid button { display:grid; justify-items:center; text-align:center; gap:3px; padding:6px 3px; font-size:10px; }
  dialog h2 { font-size:23px; }
  .context-summary { margin-top:14px; padding-top:10px; }
  .special-badge { min-width:16px; height:15px; font-size:11px; }
}
@media(max-height:500px) and (orientation:landscape) {
  body { --header-height:38px; height:auto; overflow-y:auto; }
  .topbar { padding:2px 12px; }
  .wordmark { font-size:20px; }
  .brand-icon,.version-tag { display:none; }
  .topbar .level-heading { gap:10px; }
  h1 { font-size:18px; }
  #sound-button { height:34px; width:38px; }
  .game-layout { grid-template-columns:minmax(0,1fr) 254px; height:max(350px,calc(100dvh - 50px)); gap:10px; padding:0 10px 6px; }
  .play-area { grid-template-rows:42px minmax(0,1fr) 72px; gap:4px; }
  .board-top { gap:10px; padding:0 2px; }
  .moves strong { height:36px; width:40px; font-size:24px; }
  .goals { gap:8px; }
  .goal { grid-template-columns:24px 35px; gap:3px; }
  .goal-art { width:24px; height:24px; }
  .goal-text { font-size:10px; }
  .goal-text b { display:none; }
  .board-shell { padding:2px; border-radius:14px; }
  .board { gap:3px; padding:3px; border-radius:10px; }
  .tile { border-radius:6px; }
  .piece-art { inset:1px; width:calc(100% - 2px); height:calc(100% - 2px); }
  .tile:hover .piece-art { transform:none; }
  .play-messages { grid-template-rows:17px 24px 27px; gap:2px; }
  .status-strip,.toast { font-size:9px; }
  .coach { height:27px; padding-block:0; }
  .coach p { font-size:9px; }
  .text-button { min-height:26px; padding:3px 8px; }
  .context-panel { padding:8px; grid-template-rows:40px minmax(0,1fr); gap:8px; }
  .action-button { min-height:38px; font-size:10px; }
}
@media(max-width:360px) and (orientation:portrait) {
  .topbar { gap:8px; padding-inline:9px; }
  .wordmark { font-size:19px; }
  h1 { max-width:145px; font-size:14px; }
  .goals { gap:6px; }
  .goal { grid-template-columns:24px minmax(32px,1fr); gap:3px; }
  .board { gap:3px; padding:3px; }
}

/* Weather gifts and goal markers stay light enough to read every silhouette. */
body { background: linear-gradient(160deg,var(--sky-progress,#cde9ed),#e7f1df 145%); }
body[data-theme="sunset"] { background: linear-gradient(160deg,var(--sky-progress,#e5cad7),#f4e6c9 145%); }
body[data-theme="night"] { background: linear-gradient(160deg,var(--sky-progress,#273f60),#6c738c 145%); }
.piece-art { filter: drop-shadow(0 3px 1px #234f5b45); }
.weather-bar { display:grid; grid-template-columns:auto minmax(40px,1fr) auto; align-items:center; gap:10px; min-height:22px; font-size:10px; color:var(--ink); padding:0 8px; }
.weather-bar>span { white-space:nowrap; }
.weather-meter { height:6px; border-radius:8px; background:#6a8c9733; overflow:hidden; }
.weather-meter>span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#5ca9c5,#bea5e4,#efd582); transition:width .2s; }
.weather-meter.ready { box-shadow:0 0 0 1px #ddba70; }
.frosted { background:#bee5f0bb!important; }
.ice-shell { position:absolute; inset:3px; border:2px solid #e6fcff; background:linear-gradient(135deg,#d7f8ff44,transparent 45%,#b0dff34d); clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%); z-index:2; pointer-events:none; }
.ice-shell:after { content:''; position:absolute; inset:10%; border-top:2px solid #ffffffb0; border-right:2px solid #ffffffb0; transform:rotate(-18deg); }
.thawing .ice-shell { animation:thaw .32s ease-out forwards; }
.stormy { box-shadow:inset 0 0 0 2px #758ba5,0 2px 2px #426c7310; }
.storm-mark { position:absolute; left:1px; bottom:0; width:27px; height:25px; z-index:3; pointer-events:none; }
.storm-mark svg { width:100%; height:100%; }
.storm-mark b { position:absolute; right:-2px; bottom:0; background:#294966; color:#fff; font-size:9px; line-height:12px; width:12px; border-radius:6px; text-align:center; }
.delivery-piece { background:#cbe4ed9c!important; box-shadow:inset 0 0 0 1.5px #6d9cb7; }
.delivery-piece:after { content:'↓'; position:absolute; right:4px; bottom:1px; color:#315a7e; font-size:15px; font-weight:bold; }
.special-lunar .special-badge { color:#fff; background:#7963a8; }
.fall-trail { position:absolute; left:48%; top:14%; height:32%; width:4px; border-radius:4px; background:linear-gradient(transparent,#fffbd7); pointer-events:none; z-index:1; animation:trail .37s ease-out both; }
.fall-trail:after { content:'✦'; position:absolute; bottom:0; left:-3px; color:#fff7c4; font-size:10px; line-height:1; }
.tile.falling .ice-shell { animation:fall .37s cubic-bezier(.2,.75,.3,1) both; }
.tile.exiting .piece-art { animation:star-exit .28s ease-in forwards; opacity:1; }
.board-effect { position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit; }
.effect-lightning { background:linear-gradient(transparent calc(var(--sweep-row,50%) - 1px),#ffedb8 var(--sweep-row,50%),transparent calc(var(--sweep-row,50%) + 2px)); animation:lightning .4s ease-out both; }
.effect-rainbow { box-shadow:inset 0 0 0 4px #dea9db,inset 0 0 0 8px #f4da8f,inset 0 0 0 12px #9bdad6; animation:gift .4s ease-out both; }
.effect-eclipse:before { content:''; position:absolute; width:25%; aspect-ratio:1; left:37.5%; top:30%; border-radius:50%; background:#34495e; border:4px solid #ffe7a2; box-shadow:0 0 18px #ffc974; animation:eclipse .33s ease-out both; }
.effect-cross { background:linear-gradient(transparent 49.7%,#fff4ae99 50%,transparent 50.3%),linear-gradient(90deg,transparent 49.7%,#fff4ae99 50%,transparent 50.3%); animation:gift .3s ease-out both; }
.effect-sunburst { box-shadow:inset 0 0 25px #ffd16c70; animation:gift .3s ease-out both; }
@keyframes thaw { to { scale:1.12; opacity:0; } }
@keyframes trail { 0% { transform:translateY(var(--fall-from)); opacity:.65; } 76% { transform:translateY(0); opacity:.5; } 100% { transform:translateY(0); opacity:0; } }
@keyframes star-exit { to { transform:translateY(var(--exit-distance)); } }
@keyframes lightning { from { opacity:0; clip-path:inset(0 100% 0 0); } 30% { opacity:.9; } to { opacity:0; clip-path:inset(0); } }
@keyframes gift { from { opacity:.8; } to { opacity:0; } }
@keyframes eclipse { from { scale:.3; opacity:.4; } 50% { opacity:.9; } to { scale:1.4; opacity:0; } }
.reduced-motion .fall-trail,.reduced-motion .board-effect { display:none; }
@media(max-width:700px) { .weather-bar { font-size:9px; gap:7px; min-height:20px; } .storm-mark { width:22px; height:20px; } }

@media(max-height:500px) and (orientation:landscape) { .weather-bar { min-height:17px; font-size:8px; } }

/* The celestial page shell is outside the fixed play tracks. No piece artwork,
   board metrics, or page-shell animation participates in board layout. */
body { background:radial-gradient(ellipse at 22% -20%,#fff4ce99,transparent 60%),linear-gradient(155deg,var(--sky-progress),#c7dddd 115%); }
body[data-theme="sunset"] { background:radial-gradient(ellipse at 10% 0,#ffe2b680,transparent 65%),linear-gradient(155deg,var(--sky-progress),#baa8c5 115%); }
body[data-theme="night"] { background:radial-gradient(ellipse at 12% -20%,#7892af55,transparent 65%),linear-gradient(155deg,var(--sky-progress),#394666 115%); }
.sky-scene:before { content:''; position:absolute; width:76vw; height:76vw; border:1px solid #fff6; border-radius:50%; right:-35vw; top:-52vw; box-shadow:0 0 0 30px #fff1,0 0 0 31px #fff3,0 0 0 95px #fff1; }
.sky-scene:after { content:''; position:absolute; inset:0; opacity:.45; background-image:radial-gradient(ellipse at 3% 12%,#fff 0 1px,transparent 2px),radial-gradient(ellipse at 72% 3%,#fff 0 2px,transparent 3px),radial-gradient(ellipse at 98% 82%,#ffe3a7 0 2px,transparent 3px); }
.cloud-bank { opacity:.35; }
.topbar { background:linear-gradient(#ffffff24,transparent); }
.sky-logo { width:42px; height:42px; flex:none; filter:drop-shadow(0 2px 2px #254b5829); }
.wordmark { gap:10px; font-size:25px; font-weight:normal; letter-spacing:-.7px; line-height:1.02; }
.wordmark small { display:block; margin-top:4px; font:600 7px/1.2 'Segoe UI',sans-serif; letter-spacing:1.6px; }
.version-tag { font-size:8px; background:#fff3; }
.context-panel { --menu-ink:#29495e; --menu-muted:#526b7e; --menu-paper:#f8f5e9; grid-template-rows:46px minmax(0,1fr) 62px; color:var(--menu-ink); border:1px solid #fff9; background:radial-gradient(ellipse at 85% 0,#f3dfb85c,transparent 60%),var(--menu-paper); box-shadow:0 8px 32px #203e5420,inset 0 0 0 4px #ffffff38; }
.context-panel .eyebrow { color:#7c6944; letter-spacing:1.6px; }
.context-panel .action-button { color:var(--menu-ink); background:#dce7e8; border-color:#b9cdcf; }
.context-panel .action-button:hover { background:#c8dbdf; }
.context-panel .action-button[aria-expanded="true"] { background:#294f66; color:#fff3d6; box-shadow:inset 0 0 0 1px #526f7b; }
#context-home h2 { color:var(--menu-ink); }
#context-home p,.context-panel p,.context-summary { color:var(--menu-muted); }
.context-panel .option-grid button { background:#e7e9df; color:var(--menu-ink); border:1px solid #cdd5ca; box-shadow:inset 0 1px #fffa; }
.context-panel .option-grid button:hover { background:#d5e2dc; border-color:#9bb8b7; }
.context-panel .option-grid .icon { color:#6f8269; }
.context-body dialog { color:var(--menu-ink); }
.context-panel .modal-top { background:var(--menu-paper); }
.context-panel .primary-button { color:#fff5d9; background:#2c576c; }
.context-panel .primary-button:hover { background:#213f55; }
.context-panel .secondary-button { color:var(--menu-ink); background:#e2e7dd; }
.context-panel .close-button { color:#29495e; background:#e2e7dd; }
.context-panel .settings-row { border-color:#cbd6d1; }
.context-panel .level-dot { color:#29495e; background:#e2e7dd; border-color:#c2d0c8; }
.context-panel .level-dot.current { color:#fff3d6; background:#2c576c; }
.context-panel .level-dot.complete:not(.current) { color:#2c576c; background:#d2e3d4; }
.context-panel .level-dot:not(:disabled):hover { background:#aacacc; }
.context-summary { border-color:#cbd6d1; }
.context-wait { background:#e3e9e1; }
.context-footer { display:grid; justify-items:center; align-content:center; gap:4px; border-top:1px solid #cbd6d1; color:#63767d; }
.context-footer svg { width:74px; height:16px; fill:none; stroke:#ab8a51; stroke-width:1.2; }
.context-footer span { font-size:8px; font-weight:650; letter-spacing:1.8px; }
.context-footer small { font:italic 11px Georgia,serif; }
@media(max-width:1100px) { .wordmark small { display:none; } }
@media(max-width:700px) and (orientation:portrait) {
  .sky-logo { width:32px; height:32px; }
  .wordmark { font-size:20px; gap:6px; }
  .wordmark .version-tag { display:none; }
  .context-panel { grid-template-rows:44px minmax(0,1fr) 24px; }
  .context-footer { grid-template-columns:45px auto; justify-content:center; gap:8px; }
  .context-footer svg { width:45px; height:14px; }
  .context-footer small { display:none; }
}
@media(max-height:500px) and (orientation:landscape) {
  .sky-logo { width:28px; height:28px; }
  .wordmark { font-size:19px; gap:6px; }
  .context-panel { grid-template-rows:40px minmax(0,1fr) 24px; }
  .context-footer { grid-template-columns:45px auto; justify-content:center; gap:8px; }
  .context-footer svg { width:45px; height:14px; }
  .context-footer small { display:none; }
}

/* Match accents use engine group/wave metadata. They are paint-only overlays;
   full opacity and positional gravity remain exclusively on falling pieces. */
.match-effect,.cascade-accent { position:absolute; pointer-events:none; z-index:5; }
.match-effect svg { width:100%; height:100%; display:block; overflow:visible; }
.match-sparks { animation:match-spark .32s ease-out both; }
.match-sparks path { fill:none; stroke:#fff9d4; stroke-width:2.2; stroke-linecap:round; filter:drop-shadow(0 1px 1px #866737); }
.match-streak,.match-streak-glow { stroke:#fff8c4; stroke-width:3; stroke-linecap:round; stroke-dasharray:1; animation:match-streak .32s ease-out both; }
.match-streak-glow { stroke:#a6e9ed; stroke-width:10; opacity:.7; }
.match-effect-five svg,.match-effect-junction svg { animation:match-starburst .32s ease-out both; }
.match-halo { fill:none; stroke:#c3b9ee; stroke-width:2; }
.match-ray { fill:#ffeb9b; stroke:#fffce4; stroke-width:1; }
.match-ray:nth-child(3n) { fill:#afe4e5; }
.match-ray:nth-child(3n+1) { fill:#ddc4ed; }
.match-core { fill:#fff7d1; stroke:#e5bb68; stroke-width:1; }
.match-effect-junction .match-halo { stroke:#efc67b; }
.match-effect-junction .match-ray { fill:#efc67b; }
.tile.clearing.match-four:after,.tile.clearing.match-five:after,.tile.clearing.match-junction:after { display:none; }
.cascade-accent { inset:1px; border-radius:inherit; border:2px solid #ece1ab; box-shadow:inset 0 0 calc(3px * var(--cascade-strength)) #c6eff480; animation:cascade-glow .32s ease-out both; }
@keyframes match-spark { from { transform:scale(.45); opacity:.1; } 35% { opacity:1; } to { transform:scale(1.6); opacity:0; } }
@keyframes match-streak { from { stroke-dashoffset:1; } 60% { opacity:1; stroke-dashoffset:0; } to { opacity:0; stroke-dashoffset:-.2; } }
@keyframes match-starburst { from { transform:scale(.3) rotate(-10deg); opacity:.5; } 45% { opacity:1; } to { transform:scale(1.08) rotate(5deg); opacity:0; } }
@keyframes cascade-glow { from { opacity:.2; } 40% { opacity:.8; } to { opacity:0; } }
.reduced-motion .match-effect,.reduced-motion .cascade-accent { display:none; }
@media(prefers-reduced-motion:reduce) { body:not(.motion-enabled) .match-effect,body:not(.motion-enabled) .cascade-accent { display:none; } }

/* Modes live inside the existing fixed contextual track. */
.mode-list { display:grid; gap:10px; margin:18px 0; }
.mode-list button { display:grid; gap:7px; text-align:left; padding:15px; background:#e7e9df; color:#29495e; border:1px solid #c6d1c7; border-radius:14px; }
.mode-list button:hover:not(:disabled) { background:#d6e5df; }
.mode-list button[aria-pressed="true"] { border-color:#748d9b; box-shadow:inset 3px 0 #52778d; }
.mode-list strong { font:normal 21px Georgia,serif; }
.mode-list span { font-size:12px; line-height:1.45; }
.mode-list small { font-size:9px; letter-spacing:.8px; color:#526b7e; }
.mode-stamp,.bonus-summary { padding:10px; margin-top:12px; border:1px solid #c8d5d2; border-radius:10px; background:#e5eeea; font-size:11px!important; }
.bonus-summary.earned { background:#e2edda; border-color:#9eb38e; }
.bonus-summary.expired { background:#efeee6; }
.constellation-card { margin:12px 0; padding:10px; border-radius:14px; background:linear-gradient(140deg,#28455f,#40516c); color:#e6eadf; text-align:center; }
.constellation-card svg { width:100%; height:130px; display:block; }
.constellation-card line { stroke:#8496a859; stroke-width:1; stroke-linecap:round; }
.constellation-card line.lit { stroke:#e8cf8c; }
.constellation-card circle { stroke:#b5bfca; fill:#40516c; stroke-width:1; }
.constellation-card circle.lit { stroke:#fff5bf; fill:#ffe7a0; }
.constellation-card figcaption { font-size:10px; margin-top:8px; line-height:1.5; }
.share-label { display:block; margin-top:14px; font-size:12px; }
.result-text { resize:vertical; width:100%; min-height:185px; padding:12px; margin-top:8px; border:1px solid #adc1c4; border-radius:10px; background:#fffdf4; color:#29495e; font:12px/1.6 'Segoe UI',sans-serif; }
.result-text:focus-visible { outline:3px solid #9d5821; outline-offset:2px; }
.relaxed-caption { font-size:9px; color:var(--muted); }
@media(max-width:700px) and (orientation:portrait) { .constellation-card svg { height:105px; } .mode-list button { padding:12px; } }
@media(max-width:700px) and (orientation:portrait) {
  dialog[data-kind="modes"] .mode-list { grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
  dialog[data-kind="modes"] .mode-list button { padding:10px; min-height:72px; gap:5px; }
  dialog[data-kind="modes"] .mode-list strong { font-size:17px; }
  dialog[data-kind="modes"] .mode-list span { display:none; }
  dialog[data-kind="modes"] #modal-content>p { font-size:10px; line-height:1.4; }
  dialog[data-kind="modes"] h2 { font-size:21px; margin-bottom:7px; }
}