*{box-sizing:border-box} :root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color-scheme:dark;--bg:#102b27;--panel:#173e36;--panel-solid:#17392f;--text:#f6f3e6;--muted:#bbcec2;--line:rgba(230,244,220,.15);--accent:#b9d799;--accent-ink:#183c2b;--gold:#e6c782;--soft:rgba(255,255,255,.055);--shade:rgba(4,18,15,.46);--safe-top:0px;--safe-bottom:0px;--safe-left:0px;--safe-right:0px}
:root[data-color="light"]{color-scheme:light;--bg:#e7eadc;--panel:#f4f4e9;--panel-solid:#f8f7ed;--text:#203e33;--muted:#526c60;--line:rgba(38,74,51,.18);--accent:#50794d;--accent-ink:#fffef2;--gold:#947020;--soft:rgba(43,70,39,.055);--shade:rgba(36,58,35,.16)}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;background-position:center;background-size:cover;background-attachment:fixed}body:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(8,31,25,.89),rgba(9,32,25,.70) 48%,rgba(8,31,25,.88));pointer-events:none}:root[data-color="light"] body:before{background:rgba(236,240,220,.84)}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{cursor:default;opacity:.45}button,button svg{flex-shrink:0}button{transition:background .16s,transform .16s,box-shadow .16s}button:active:not(:disabled){transform:translateY(1px) scale(.98)}button svg{width:23px;height:23px;display:block}button:focus:not(:focus-visible){outline:none}h1,h2,h3,p{margin:0}h1{font-size:clamp(28px,3.5vw,43px);font-weight:750;letter-spacing:-1.8px;line-height:1.06}h2{font-size:27px;letter-spacing:-.7px;line-height:1.16}h3{font-size:17px;letter-spacing:-.25px}small{font-size:12px}button span{min-width:0}.sr-only{position:absolute!important;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}.ico{display:inline-flex;align-items:center;justify-content:center} [hidden]{display:none!important}
#app{position:relative;width:100%;height:100vh;height:100dvh;padding:calc(18px + var(--safe-top)) calc(20px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(20px + var(--safe-left));display:grid;grid-template-columns:190px minmax(0,1fr) 96px;gap:22px;isolation:isolate}.left-rail,.right-rail{min-height:0;display:flex;flex-direction:column;align-items:stretch}.brand{display:flex;align-items:center;gap:10px;margin:10px 0 35px}.brand img{width:41px;height:45px}.brand-word{font-size:16px;font-weight:750;letter-spacing:.1px;line-height:1.2}.brand-word span{display:block;color:var(--muted);font-size:10px;font-weight:650;letter-spacing:2.7px;text-transform:uppercase;margin-top:5px}.eyebrow{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:750;letter-spacing:1.7px;text-transform:uppercase;color:var(--gold)}.eyebrow svg{width:15px;height:15px}.rail-level{font-size:30px;font-weight:750;letter-spacing:-1px;line-height:1.12;margin:12px 0 10px;overflow-wrap:anywhere}.rail-mode{font-size:13px;color:var(--muted);line-height:1.5}.progress-card{margin-top:24px;padding:19px 18px;background:var(--soft);border:1px solid var(--line);border-radius:20px}.stat-label{color:var(--muted);font-size:12px;line-height:1.4}.pairs-number{display:flex;align-items:baseline;gap:7px;margin:7px 0 13px}.pairs-number b{font-size:39px;font-weight:700;letter-spacing:-2px}.pairs-number span{font-size:17px;color:var(--muted)}.progress-track{height:5px;border-radius:5px;background:var(--line);overflow:hidden}.progress-fill{height:100%;width:0;background:var(--accent);border-radius:5px;transition:width .22s ease}.rail-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.rail-stats b{font-size:22px;display:block;margin-top:5px;font-variant-numeric:tabular-nums}.rail-note{font-size:13px;color:var(--muted);line-height:1.65;margin:24px 3px 0}.rail-note b{display:block;color:var(--text);font-weight:650;margin-bottom:5px}.rail-bottom{margin-top:auto;display:grid;gap:9px;padding-top:15px}.rail-chip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--soft);border-radius:13px;text-align:left;padding:12px;min-height:47px;font-size:13px;font-weight:650}.rail-chip svg{width:19px;height:19px;color:var(--accent)}
.right-rail{gap:10px;padding:10px 0}.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:74px;padding:13px 4px;border-radius:18px;background:var(--soft);border:1px solid var(--line);font-size:12px;font-weight:650;line-height:1.15;text-align:center;overflow-wrap:anywhere}.tool svg{width:25px;height:25px;color:var(--accent)}.tool.primary-tool{background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:0 6px 20px #03190d22}.tool.primary-tool svg{color:inherit}.tool-spacer{flex:1;min-height:5px}.tool.small-tool{min-height:56px;flex-direction:row;gap:0}.tool.small-tool span.label{display:none}.right-rail .tool:hover:not(:disabled){background:color-mix(in srgb,var(--panel) 70%,white 10%)}.right-rail .primary-tool:hover:not(:disabled){background:var(--accent);filter:brightness(1.06)}
#stage{position:relative;min-width:0;min-height:0;border-radius:27px;isolation:isolate;background:linear-gradient(145deg,rgba(241,238,208,.08),rgba(24,61,43,.04) 40%,rgba(4,23,18,.18));box-shadow:inset 0 1px 0 rgba(240,240,215,.12);overflow:hidden}#board{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;outline-offset:-5px}#stage:after{content:"";position:absolute;inset:0;border:1px solid rgba(240,240,215,.06);border-radius:inherit;pointer-events:none}.stage-caption{position:absolute;left:14px;right:14px;bottom:7px;text-align:center;font-size:11px;letter-spacing:.35px;color:var(--muted);pointer-events:none;opacity:.8}.guide{position:absolute;z-index:2;left:50%;top:10px;transform:translateX(-50%);max-width:min(440px,90%);border-radius:14px;padding:11px 16px;background:var(--panel-solid);border:1px solid var(--line);box-shadow:0 7px 20px #00170e1f;text-align:center;font-size:13px;line-height:1.4;pointer-events:none}.combo{position:absolute;top:7%;left:50%;transform:translateX(-50%);pointer-events:none;color:var(--gold);font-weight:800;font-size:25px;opacity:0;transition:opacity .15s}.combo.show{opacity:1}.phone-header,.phone-tools{display:none}
.btn{min-height:46px;min-width:46px;padding:12px 18px;border-radius:13px;background:var(--soft);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:680;line-height:1.3;text-align:center}.btn.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);box-shadow:0 6px 20px #00160d1a}.btn.wide{width:100%;min-height:55px}.btn.quiet{background:transparent}.icon-btn{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:13px;background:var(--soft)}.btn-row{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end;margin-top:22px}.btn-row .primary{flex:1}.soft-text{font-size:14px;line-height:1.65;color:var(--muted)}.section-label{color:var(--muted);font-size:11px;font-weight:750;letter-spacing:1.5px;text-transform:uppercase;margin:24px 0 11px}
#sheet-layer{position:fixed;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(18px + var(--safe-top)) calc(18px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(18px + var(--safe-left));background:rgba(3,18,13,.58);backdrop-filter:none}.sheet{width:min(760px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;background:var(--panel-solid);border:1px solid var(--line);border-radius:26px;box-shadow:0 25px 80px #00190d55;padding:26px;animation:sheet-in .2s ease;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.sheet.small-sheet{max-width:480px}.sheet-head{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;margin-bottom:20px}.sheet-head p{margin-top:7px}.sheet-head .icon-btn{margin:-5px -4px 0 0}.sheet-head>div{min-width:0}.welcome-sheet{max-width:940px;padding:0;overflow:hidden;display:grid;grid-template-columns:.95fr 1.05fr}.welcome-art{position:relative;min-height:530px;background:linear-gradient(0deg,rgba(10,43,26,.88),rgba(15,50,30,.04)),url('assets/forest.webp') center/cover;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff9e9}.welcome-art .brand{position:absolute;top:22px;left:27px;margin:0}.welcome-art .brand-word{font-size:13px;color:#edf4df}.welcome-art .brand-word span{color:#d2ddc9}.welcome-art h1{font-size:39px;margin-top:24px}.welcome-art p{margin-top:14px;color:#e1ecdb;font-size:14px;line-height:1.6;max-width:280px}.hero-tiles{position:absolute;top:145px;left:50%;width:214px;height:135px;transform:translateX(-50%)}.hero-tile{position:absolute;width:103px;height:112px;padding:10px;background:linear-gradient(135deg,#fffef7,#e6e5d5);border:1px solid #fffcf5;border-radius:20px;box-shadow:0 7px 0 #9baf98,0 20px 25px #03210e55;transform:rotate(-12deg)}.hero-tile:last-child{left:105px;top:12px;transform:rotate(12deg)}.hero-tile>*{width:100%;height:100%;display:block}.welcome-content{padding:28px 30px;overflow:auto;max-height:calc(100dvh - 36px);display:flex;flex-direction:column}.welcome-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.welcome-heading h2{font-size:23px}.welcome-heading .icon-btn{width:44px;height:44px}.mode-grid{display:grid;gap:10px;margin:18px 0}.mode-card{padding:15px 13px;display:flex;align-items:center;gap:13px;min-height:82px;text-align:left;background:var(--soft);border:1px solid var(--line);border-radius:16px}.mode-card[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel-solid))}.mode-icon{display:grid;place-items:center;width:45px;height:45px;background:var(--soft);border-radius:13px;color:var(--accent);flex:none}.mode-card b{font-size:15px;display:block}.mode-card small{display:block;color:var(--muted);line-height:1.45;margin-top:5px}.mode-card .mode-check{margin-left:auto;color:var(--accent);width:18px;height:18px;visibility:hidden}.mode-card[aria-pressed="true"] .mode-check{visibility:visible}.welcome-options{display:flex;gap:8px;margin-bottom:15px}.welcome-options .btn{flex:1;font-size:12px;padding:10px}.welcome-content>.primary{margin-top:auto}.welcome-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:15px;color:var(--muted);font-size:11px;gap:10px}.text-button{background:transparent;color:var(--muted);padding:8px;min-height:44px;font-size:12px}.welcome-mobile-title{display:none}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.choice{min-width:0;border-radius:17px;border:1px solid var(--line);background:var(--soft);padding:15px 12px;text-align:left;position:relative}.choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.choice b{display:block;font-size:15px;margin-top:10px}.choice p{font-size:12px;line-height:1.5;color:var(--muted);margin-top:6px}.choice .mini-layout{width:100%;height:100px;display:block;overflow:visible}.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.theme-choice{border:1px solid var(--line);border-radius:17px;overflow:hidden;background:var(--soft);text-align:left;padding:0;min-height:150px}.theme-choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.theme-preview{height:113px;display:flex;align-items:center;justify-content:center;gap:7px;background-size:cover;background-position:center;position:relative;isolation:isolate}.theme-preview:before{content:"";position:absolute;inset:0;background:#0a231b40;z-index:-1}.theme-preview.ivory{background:linear-gradient(125deg,#ede6ce,#cfd8bc)}.mini-tile{width:43px;height:47px;border-radius:8px;background:linear-gradient(135deg,#fffdf5,#dce1cf);border:1px solid #fffbed;box-shadow:0 3px 0 #899d87,0 7px 10px #10281240;padding:5px}.mini-tile>*{width:100%;height:100%;display:block}.mini-tile:nth-child(2){transform:translateY(-7px)}.theme-choice b{display:block;padding:12px 14px;font-size:14px}.deck-grid{display:flex;gap:12px}.deck-grid .choice{flex:1}.deck-symbols{display:flex;height:60px;align-items:center;justify-content:center}.deck-symbols>*{width:48px;height:48px}.language-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.language-grid .btn{justify-content:space-between}.language-grid .btn.selected{border-color:var(--accent);color:var(--accent)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}.setting-row>div:first-child{min-width:0}.setting-row p{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4}.toggle{width:60px;min-width:60px;height:44px;padding:8px;background:transparent;border:0}.toggle i{display:block;height:28px;width:46px;border-radius:20px;background:var(--line);padding:4px;transition:background .15s}.toggle i:after{content:"";display:block;width:20px;height:20px;background:var(--muted);border-radius:50%;transition:transform .15s}.toggle[aria-checked="true"] i{background:var(--accent)}.toggle[aria-checked="true"] i:after{transform:translateX(18px);background:var(--accent-ink)}.segments{display:flex;gap:5px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.segments button{background:transparent;border-radius:9px;min-height:44px;padding:8px 13px;font-size:13px;flex:1}.segments button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.level-card{padding:9px;min-height:118px;border-radius:16px;background:var(--soft);border:1px solid var(--line);text-align:left;position:relative}.level-card.done{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}.level-card .mini-layout{height:66px;width:100%;display:block}.level-label{display:flex;justify-content:space-between;font-size:12px;gap:5px;align-items:center;margin-top:8px}.level-label svg{width:14px;height:14px;color:var(--gold)}.world-tabs{display:flex;gap:7px;margin-bottom:17px}.world-tabs .btn{flex:1;font-size:12px;padding:10px 8px}.world-tabs .selected{background:var(--accent);color:var(--accent-ink)}.rules-list{display:grid;gap:16px;margin:22px 0}.rule{display:flex;gap:14px;align-items:flex-start}.rule-num{width:30px;height:30px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);border-radius:10px;font-size:13px;font-weight:700;flex:none}.rule p{font-size:14px;line-height:1.6;color:var(--muted)}.rules-demo{height:145px;position:relative;display:flex;justify-content:center;align-items:center;gap:58px;background:var(--soft);border-radius:17px;margin:18px 0;overflow:hidden}.rules-demo .mini-tile{width:66px;height:71px;z-index:1}.rules-demo>svg{position:absolute;width:220px;height:114px;stroke:var(--gold);stroke-width:3;fill:none;overflow:visible}.win-mark{display:grid;place-items:center;width:75px;height:75px;border-radius:25px;background:var(--soft);color:var(--gold);margin:3px auto 21px;border:1px solid var(--line)}.win-mark svg{width:40px;height:40px}.center{text-align:center}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:22px 0}.result-stat{padding:17px 6px;border-radius:15px;background:var(--soft);border:1px solid var(--line)}.result-stat b{display:block;font-size:24px;margin-bottom:7px}.result-stat span{font-size:11px;color:var(--muted)}.score-list{display:grid;gap:8px;margin-top:18px}.score-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);min-height:47px;font-size:14px}.score-row .who{flex:1;overflow-wrap:anywhere}.score-row .position{color:var(--gold);font-weight:700;width:25px}.score-row b{font-variant-numeric:tabular-nums}.empty-state{padding:25px 8px;text-align:center;font-size:14px;color:var(--muted);line-height:1.7}
#toast{position:fixed;z-index:50;left:50%;bottom:calc(28px + var(--safe-bottom));transform:translateX(-50%);background:var(--panel-solid);border:1px solid var(--line);border-radius:15px;padding:13px 20px;box-shadow:0 8px 35px #011e1355;font-size:14px;line-height:1.5;max-width:min(540px,calc(100vw - 26px));width:max-content;text-align:center;pointer-events:none;animation:sheet-in .17s ease}.high-contrast #stage{background:#153d2a}.high-contrast .rail-note,.high-contrast .stat-label{color:var(--text)}
@keyframes sheet-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}@media(hover:hover){.btn:hover:not(:disabled),.icon-btn:hover:not(:disabled),.choice:hover:not(:disabled),.theme-choice:hover:not(:disabled),.mode-card:hover:not(:disabled),.level-card:hover:not(:disabled){filter:brightness(1.07)}}
@media(max-width:1150px) and (min-width:721px){#app{grid-template-columns:150px minmax(0,1fr) 77px;gap:13px;padding:calc(13px + var(--safe-top)) calc(13px + var(--safe-right)) calc(13px + var(--safe-bottom)) calc(13px + var(--safe-left))}.brand{gap:7px}.brand img{width:33px}.brand-word{font-size:14px}.rail-level{font-size:25px}.progress-card{padding:15px 12px}.rail-note{font-size:12px}.tool{font-size:11px;min-height:69px}.rail-chip{padding:10px;font-size:12px}.rail-stats b{font-size:19px}.welcome-sheet{max-width:850px}}
@media(max-width:720px) and (min-height:501px){#app{padding:calc(10px + var(--safe-top)) calc(8px + var(--safe-right)) calc(9px + var(--safe-bottom)) calc(8px + var(--safe-left));grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:5px}.left-rail,.right-rail{display:none}.phone-header{display:block;padding:0 3px 4px}.phone-title-row{display:flex;align-items:center;gap:10px;height:46px}.phone-title-row .icon-btn{width:44px;height:44px;border-radius:13px}.phone-title{flex:1;min-width:0}.phone-title h1{font-size:18px;letter-spacing:-.55px;line-height:1.05}.phone-title p{color:var(--muted);font-size:11px;margin-top:5px}.phone-stats{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:10px 4px 0}.phone-stats>div{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center}.phone-stats b{font-size:14px;color:var(--text);font-variant-numeric:tabular-nums}.phone-progress{height:3px;margin:10px 4px 0;background:var(--line);border-radius:4px;overflow:hidden}.phone-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:5px 2px 0}.phone-tools .tool{min-height:62px;border-radius:15px;gap:6px;padding:8px 2px;font-size:10px;line-height:1.2}.phone-tools .tool svg{width:23px;height:23px}#stage{border-radius:20px}.stage-caption{bottom:3px;font-size:10px}.guide{top:5px;padding:8px 12px;font-size:12px;max-width:94%;width:max-content}.combo{top:7%;font-size:20px}#sheet-layer{padding:calc(10px + var(--safe-top)) calc(10px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(10px + var(--safe-left));align-items:center}.sheet{padding:21px 18px;border-radius:23px}.sheet h2{font-size:25px}.welcome-sheet{display:block;padding:0;max-width:460px}.welcome-art{display:none}.welcome-content{padding:22px 21px;max-height:calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom))}.welcome-mobile-title{display:flex;align-items:center;gap:12px;margin:0 0 18px}.welcome-mobile-title img{width:44px;height:48px}.welcome-mobile-title h1{font-size:25px;letter-spacing:-.9px;line-height:1.1}.welcome-mobile-title p{font-size:12px;margin-top:4px;color:var(--muted)}.welcome-heading h2{font-size:18px}.mode-card{min-height:74px;padding:12px;gap:10px}.mode-card b{font-size:14px}.mode-card small{font-size:11px}.mode-icon{width:40px;height:40px}.mode-grid{margin:14px 0;gap:8px}.welcome-bottom{margin-top:7px}.choice-grid{gap:8px}.choice{padding:12px 9px}.choice b{font-size:13px}.choice p{font-size:11px}.choice .mini-layout{height:86px}.theme-grid{gap:10px}.theme-preview{height:92px}.theme-choice{min-height:132px}.theme-choice b{font-size:13px;padding:11px}.mini-tile{width:35px;height:39px;padding:4px}.level-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.world-tabs .btn{font-size:11px}.level-card{min-height:113px}.sheet-head{gap:8px}.setting-row{gap:12px}.setting-row .segments button{font-size:11px;padding:8px}.sheet-head p{font-size:13px}#toast{bottom:calc(86px + var(--safe-bottom));font-size:13px;padding:12px 15px}.result-grid{gap:6px}.result-stat b{font-size:21px}.result-stat span{font-size:10px}}
@media(max-height:500px){#app{padding:calc(7px + var(--safe-top)) calc(8px + var(--safe-right)) calc(7px + var(--safe-bottom)) calc(8px + var(--safe-left));grid-template-columns:64px minmax(0,1fr) 61px;gap:7px}.left-rail{align-items:center;overflow:hidden}.brand{margin:0 0 8px}.brand img{width:29px;height:32px}.brand-word,.rail-mode,.rail-note,.rail-stats,.rail-chip .label,.rail-level,.left-rail>.eyebrow{display:none}.progress-card{padding:10px 4px;margin-top:0;width:100%;border-radius:13px;text-align:center}.stat-label{font-size:10px}.pairs-number{gap:2px;justify-content:center;margin:4px 0 8px}.pairs-number b{font-size:25px;letter-spacing:-1px}.pairs-number span{font-size:12px}.rail-bottom{width:100%;gap:7px;padding-top:9px}.rail-chip{padding:0;justify-content:center;min-height:44px;border-radius:12px}.rail-chip svg{width:20px;height:20px}.right-rail{padding:0;gap:5px}.tool{min-height:44px;padding:5px 2px;gap:3px;border-radius:12px;font-size:10px}.tool svg{width:22px;height:22px}.right-rail .tool .label{display:none}.right-rail .primary-tool .label{display:block;font-size:10px}.tool.small-tool{min-height:44px}.tool-spacer{min-height:0}.tool[data-action="sound"]{display:none}#stage{border-radius:17px}.guide{font-size:11px;top:3px;padding:6px 10px;max-width:88%}.stage-caption{font-size:10px;bottom:2px}.sheet{max-height:100%;padding:20px}.sheet-head{margin-bottom:13px}.sheet h2{font-size:23px}.welcome-sheet{display:grid;grid-template-columns:1fr 1.1fr;max-width:780px;padding:0}.welcome-art{display:flex;min-height:340px;padding:22px}.welcome-art .brand{top:17px;left:22px}.welcome-art .brand-word{display:block}.welcome-art h1{font-size:29px;margin-top:0}.welcome-art p{font-size:12px;margin-top:10px}.hero-tiles{top:85px;scale:.7;transform-origin:top left}.welcome-content{padding:17px 20px;max-height:calc(100dvh - 36px)}.welcome-mobile-title{display:none}.welcome-heading h2{font-size:18px}.welcome-heading .icon-btn{height:44px;width:44px}.mode-grid{margin:10px 0;gap:6px}.mode-card{min-height:57px;padding:8px 10px;gap:9px}.mode-card b{font-size:13px}.mode-card small{font-size:10px;margin-top:3px}.mode-icon{width:32px;height:32px}.mode-icon svg{width:19px;height:19px}.welcome-options{margin-bottom:10px}.welcome-options .btn{min-height:44px;padding:7px;font-size:11px}.welcome-content>.primary{min-height:47px}.welcome-bottom{margin-top:5px}.choice .mini-layout{height:65px}.theme-preview{height:75px}.theme-choice{min-height:115px}.rules-demo{height:110px}.level-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.level-card{min-height:100px}.level-card .mini-layout{height:50px}.phone-header,.phone-tools{display:none}}
@media(max-width:360px) and (min-height:501px){.phone-title h1{font-size:16px}.phone-title-row{gap:7px}.phone-stats{gap:5px}.phone-stats>div{font-size:10px}.phone-tools{gap:4px}.phone-tools .tool{font-size:10px;min-height:60px}.welcome-content{padding:17px}.welcome-mobile-title{margin-bottom:12px}.welcome-mobile-title h1{font-size:23px}.mode-card{min-height:68px}.mode-card small{font-size:10px}.mode-icon{width:34px;height:34px}.welcome-options .btn{font-size:11px;padding:8px}.choice-grid{grid-template-columns:1fr}.choice{display:grid;grid-template-columns:68px 1fr;gap:0 12px}.choice .mini-layout{grid-row:1/3;height:64px}.choice b{margin-top:8px}.choice p{margin-top:4px}.result-stat b{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.reduced-motion *{animation:none!important;transition:none!important}

/* Compact, icon-only controls keep labels inside the mobile frame. */
.icon-btn .label{display:none}.sheet:focus{outline:none}.sr-only{top:0;left:0}.short-label{display:none}
@media(max-width:720px) and (min-height:501px){.phone-tools .tool[data-action="hint"] .label{display:none}.phone-tools .tool .short-label{display:block}.phone-tools .tool{font-size:11px}.phone-tools .tool .label{overflow-wrap:normal}}
@media(max-height:700px) and (max-width:720px) and (min-height:501px){#app{padding-top:calc(5px + var(--safe-top));padding-bottom:calc(5px + var(--safe-bottom));gap:3px}.phone-header{padding-bottom:0}.phone-title-row{height:44px}.phone-stats{margin-top:3px}.phone-progress{margin-top:4px}.phone-tools{padding-top:2px}.phone-tools .tool{min-height:55px;gap:3px;padding:6px 2px}.phone-title p{margin-top:3px}.phone-title-row .icon-btn{height:44px}.phone-tools .tool svg{width:21px;height:21px}}

.segments button{min-width:44px}.language-grid .btn{padding-left:12px;padding-right:12px;gap:6px}.language-grid .btn>span{flex-shrink:0}.language-grid .btn svg{width:18px;height:18px}
.result-stars{display:flex;justify-content:center;gap:10px;margin:18px 0 12px;color:var(--line)}.result-stars svg{width:32px;height:32px}.result-stars .earned{color:var(--gold)}.result-stars .earned svg{fill:currentColor}.star-rule{color:var(--muted);font-size:12px;line-height:1.5;max-width:370px;margin:auto}
@media(max-width:360px) and (min-height:501px){.welcome-options .btn{gap:5px;padding:8px 6px}.welcome-options .btn svg{width:18px;height:18px}.setting-row:has(.segments){flex-direction:column;align-items:stretch;gap:8px}.language-grid .btn{font-size:13px;padding-left:10px;padding-right:10px}}
/* On the shortest portrait phones, the header carries the tutorial so the complete 60-tile board retains distinct touch targets. */
@media(max-width:720px) and (min-height:501px) and (max-height:620px){#app{padding-top:calc(4px + var(--safe-top));padding-bottom:calc(4px + var(--safe-bottom));gap:2px}.phone-header{position:relative;height:44px;padding:0 3px}.phone-title-row{height:44px}.phone-title{align-self:flex-start;padding-top:3px}.phone-title h1{display:none}.phone-title p{margin:0;font-size:11px;line-height:14px}.phone-stats{position:absolute;left:58px;right:58px;bottom:2px;margin:0;gap:5px}.phone-stats>div:nth-child(2){display:none}.phone-stats b{font-size:13px}.phone-stats>div{font-size:10px;gap:4px}.phone-progress{display:none}.phone-tools{padding-top:0}.phone-tools .tool{min-height:50px;padding:4px 1px;gap:3px;font-size:10px}.phone-tools .tool svg{width:20px;height:20px}.stage-caption{display:none}.compact-guide .phone-title,.compact-guide .phone-stats{visibility:hidden}.guide{position:fixed;left:50%;top:calc(5px + var(--safe-top));width:calc(100% - 132px);max-width:none;max-height:43px;padding:0;background:transparent;border:0;box-shadow:none;font-size:11px;line-height:14px;display:flex;align-items:center;justify-content:center;height:42px}.combo{top:4%;font-size:18px}}

@media(max-width:720px) and (min-height:501px){.phone-tools .tool .label{display:none}.phone-tools .tool .short-label{display:block;white-space:nowrap}}