.pg{--ink:#243e38;--green:#236652;--muted:#6a7973;--paper:#faf9f3;--line:#dfE5dc;font-family:PGKai,serif;color:var(--ink);background:var(--paper);font-size:19px;line-height:1.5;min-height:100vh;padding:24px;box-sizing:border-box}.pg *{box-sizing:border-box}.pg [hidden]{display:none!important}.pg button,.pg input,.pg select,.pg textarea{font:inherit}.pg button{cursor:pointer;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);padding:10px 18px;touch-action:manipulation}.pg button:disabled{cursor:default;opacity:.35}.pg button:focus-visible,.pg input:focus-visible,.pg select:focus-visible{outline:3px solid #dfaa45;outline-offset:3px}.pg .primary{background:var(--green);border-color:var(--green);color:white}.pg .quiet{background:transparent}.pg .py{font-family:PGAndika,sans-serif}.pg .wrap{max-width:1160px;margin:auto}.pg header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.pg header small{color:var(--muted);font-size:15px;letter-spacing:2px}.pg h1{font-size:36px;font-weight:400;margin:0}.pg h2{font-size:25px;font-weight:400;margin:0 0 18px}.pg p{margin:8px 0}.pg .tag{font-size:14px;border:1px solid #cdd9d0;padding:4px 10px;border-radius:30px;color:var(--green)}.pg .intro{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}.pg .panel{padding:28px;border:1px solid var(--line);border-radius:22px;background:#fff}.pg label.field{display:block;margin:12px 0}.pg input[type=text],.pg textarea,.pg select{border:1px solid #ccd7cd;border-radius:10px;background:#fff;padding:10px 12px;color:var(--ink)}.pg textarea{width:100%;resize:vertical;min-height:86px;font-size:28px}.pg .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.pg .controls{margin-top:20px;gap:20px}.pg .hint{font-size:16px;color:var(--muted)}.pg .sample{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}.pg .sample button{font-size:17px;padding:5px 12px}.pg .preview-art{min-height:220px;position:relative;display:flex;align-items:center;justify-content:center;background:#eff3eb;border-radius:16px;margin-top:22px}.pg .preview-art .py{font-size:52px;letter-spacing:10px;color:var(--green)}.pg .badge{position:absolute;padding:8px 15px;background:#fff;border:1px solid var(--line);border-radius:12px;font-family:PGAndika;font-size:30px;box-shadow:0 5px 15px #213c3310}.pg .badge:nth-child(2){top:20px;left:22px;transform:rotate(-8deg)}.pg .badge:nth-child(3){right:28px;bottom:20px;transform:rotate(7deg)}.pg .choices{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.pg .choice{padding:12px;border:1px solid var(--line);border-radius:12px;min-width:120px}.pg .choice strong{font-weight:400;font-size:26px;margin-right:10px}.pg .choice input{width:108px;font-family:PGAndika}.pg .choice select{font-family:PGAndika;font-size:17px;max-width:180px}.pg .choice .zh-select{font-family:PGKai}.pg .status{min-height:28px;font-size:16px;color:#8c562b;margin:12px 0}.pg .game-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.pg .prompt{font-size:29px}.pg .prompt button{font-size:30px}.pg .tones{display:flex;gap:14px;justify-content:center;margin:18px 0}.pg .tone{font-family:PGAndika;font-size:36px;line-height:1;width:66px;height:58px;touch-action:none;user-select:none}.pg .tone.selected,.pg .card.selected{outline:3px solid #dfaa45}.pg .arena{height:470px;position:relative;border:1px solid var(--line);border-radius:24px;background:radial-gradient(#b5c7b350 .8px,transparent .8px) 0 0/20px 20px;overflow:hidden;isolation:isolate}.pg .center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:220px;text-align:center;padding:18px 22px 22px;background:#fffdf6;border:1px solid #d9dcca;border-radius:20px;box-shadow:0 8px 28px #193c3210;z-index:1}.pg .center-label{font-size:15px;letter-spacing:3px;color:var(--muted);margin-bottom:4px}.pg .slots{display:flex;justify-content:center;gap:4px}.pg .cell{display:flex;flex-direction:column;align-items:center}.pg .tone-slot{height:38px;width:48px;padding:0;font-family:PGAndika;font-size:30px;line-height:1;border:0;background:transparent}.pg .slot{height:57px;width:48px;padding:0;font-family:PGAndika;font-size:32px;border:1px dashed #c6d4c5;background:#f5f7f0;border-radius:9px}.pg .slot.filled{background:#e2eedf;border:1px solid #b1cbb3;color:var(--green)}.pg .dropover{outline:3px solid #d5a33c;background:#fff0b9!important}.pg .card{position:absolute;min-width:60px;height:62px;font-family:PGAndika;font-size:30px;padding:5px 14px;background:#fff;border:1px solid #d8e0d3;box-shadow:0 4px 0 #dfe6da;touch-action:none;user-select:none;z-index:2}.pg .card.moving{transition:left .5s ease,top .5s ease;pointer-events:none}.pg .card.frozen{pointer-events:none}.pg .ghost{position:fixed;pointer-events:none;z-index:2147483647;opacity:.92;box-shadow:0 10px 22px #213c3340;transform:scale(1.05)}.pg .completion{font-family:PGAndika;font-size:40px;letter-spacing:4px;color:var(--green)}.pg .footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}.pg .dots{display:flex;gap:7px;align-items:center}.pg .dot{width:9px;height:9px;border-radius:50%;background:#d5ded1}.pg .dot.done{background:var(--green)}.pg .remember{text-align:center;padding:52px 20px;min-height:400px;border:1px solid var(--line);border-radius:24px;background:#f1f5eb}.pg .remember .py{font-size:62px;margin:30px 0}.pg .settings{margin-top:20px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}.pg .settings label{display:inline-flex;align-items:center;gap:6px;margin:8px 18px 8px 0;font-size:17px}.pg input[type=checkbox]{accent-color:var(--green);width:18px;height:18px}.pg .breathe{animation:pg-breathe .65s ease-in-out}.pg .flash{animation:pg-flash .5s ease-out}.pg .shake{animation:pg-shake .3s linear}.pg .result{font-size:44px;font-family:PGAndika;overflow-wrap:anywhere}.pg .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes pg-breathe{50%{scale:1.1}}@keyframes pg-flash{50%{box-shadow:0 0 0 8px #d5a33c35;background:#fff2c6}}@keyframes pg-shake{25%,75%{translate:-6px}50%,100%{translate:6px}}
@media(max-width:700px){.pg{padding:14px;font-size:18px}.pg header{margin-bottom:16px}.pg h1{font-size:29px}.pg .intro{grid-template-columns:1fr}.pg .intro aside{display:none}.pg .panel{padding:18px}.pg .arena{height:650px}.pg .center{padding:12px 8px;min-width:190px}.pg .slot,.pg .tone-slot{width:40px}.pg .slot{font-size:29px}.pg .slots{gap:2px}.pg .game-head{align-items:flex-start}.pg .prompt{font-size:24px}.pg .card{min-width:56px;height:56px;font-size:27px;padding:3px 10px}.pg .tones{gap:12px}.pg .remember .py{font-size:44px}.pg .result{font-size:32px}.pg .choice{min-width:108px;padding:9px}}
.pg .tone-slot:not(.filled){border-bottom:1px dashed #d9dfd1;border-radius:0;margin-bottom:3px}
@media(max-width:700px){.pg .arena{height:clamp(430px,calc(100svh - 320px),550px)}.pg .game-head .prompt button{padding:4px 12px}.pg .tones{margin:12px 0}.pg .center{padding-top:8px;padding-bottom:12px}.pg .tone-slot{height:30px}}
@media(prefers-reduced-motion:reduce){.pg *{animation:none!important;transition:none!important}}
/* v0.2: the entire play surface must fit the visible viewport. */
.pg .sound-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px;font-size:15px}.pg .sound-bar button{padding:5px 10px;font-size:15px}.pg .sound-state{color:#47745b;flex:1;min-width:110px;font-size:14px;line-height:1.2}.pg .sound-state[data-state=blocked]{color:#a14425}.pg .sound-state[data-state=playing]{font-weight:bold}.pg .sound-player{width:200px;height:30px}
.pg.game-active{height:100dvh;min-height:0;padding:10px;overflow:hidden}.pg.game-active>.wrap{height:100%;display:flex;flex-direction:column;gap:6px}.pg.game-active header{margin:0;gap:8px;flex-shrink:0}.pg.game-active header small{display:none}.pg.game-active h1{font-size:24px}.pg.game-active header button{padding:5px 10px;font-size:16px}.pg.game-active .tag{font-size:12px;padding:2px 7px}.pg.game-active .sound-bar{margin:0;flex-shrink:0}.pg.game-active [data-view=game]{display:flex;flex-direction:column;flex:1;min-height:0;gap:4px}.pg.game-active .game-head{flex-shrink:0}.pg.game-active .prompt{font-size:22px;max-width:70vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pg.game-active .prompt button{font-size:20px;padding:2px 10px}.pg.game-active .current{font-size:14px}.pg.game-active .tones{margin:0;gap:10px;flex-shrink:0}.pg.game-active .tone{width:52px;height:40px;padding:3px;font-size:30px}.pg.game-active .arena{height:auto!important;min-height:0;flex:1;flex-shrink:1;border-radius:16px}.pg.game-active .center{min-width:170px;width:max-content;max-width:calc(100% - 16px);padding:6px 10px 10px;border-radius:14px}.pg.game-active .center-label{font-size:12px;margin:0}.pg.game-active .slot{width:36px;height:43px;font-size:28px}.pg.game-active .tone-slot{width:36px;height:26px;margin-bottom:2px;font-size:25px}.pg.game-active .slots{gap:3px}.pg.game-active .card{height:48px;min-width:48px;font-size:26px;padding:2px 10px;box-shadow:0 3px 0 #dfe6da}.pg.game-active .footer{margin:0;flex-shrink:0;flex-wrap:nowrap}.pg.game-active .footer .row{gap:6px}.pg.game-active .footer button{padding:4px 10px;font-size:16px}.pg.game-active [data-view=game]>p.hint,.pg.game-active .wrap>.hint{display:none}.pg.game-active .status{margin:0;font-size:13px;min-height:0;max-height:30px;overflow:auto;flex-shrink:0}.pg.game-active .settings{position:fixed;z-index:100;inset:12px;margin:0;overflow:auto;box-shadow:0 0 0 50vmax #243e3870}.pg.game-active .completion{font-size:34px}
@media(max-width:400px){.pg.game-active h1{font-size:20px}.pg.game-active h1 .tag{display:none}.pg.game-active .sound-bar button{font-size:13px;padding:4px 7px}.pg.game-active .sound-state{font-size:12px;min-width:85px}.pg.game-active .mode{max-width:80px}.pg.game-active .footer .dots{display:none}.pg.game-active .footer{justify-content:flex-end}}
@media(max-height:480px){.pg.game-active{padding:6px}.pg.game-active h1{font-size:18px}.pg.game-active header .tag,.pg.game-active .current{display:none}.pg.game-active .game-head .prompt{font-size:18px}.pg.game-active .tone{height:32px;font-size:26px}.pg.game-active .sound-bar{font-size:12px}.pg.game-active .center-label{display:none}.pg.game-active .center{padding:2px 8px 5px}.pg.game-active .slot{height:36px}.pg.game-active .tone-slot{height:22px}.pg.game-active .card{height:44px}}

.pg .intro{display:block}.pg .setup-flow{max-width:920px;margin:auto}.pg .setup-flow h2{margin-top:24px}.pg .setup-flow .audio-prep{margin:24px 0;border-block:1px solid #d6e0d6;padding:12px 0}.pg .setup-flow .choices{margin:14px 0}.pg .choice button{font-size:16px;padding:6px 10px;margin:8px 0}.pg:not(.game-active) .status{position:sticky;bottom:8px;z-index:20;background:#f0f5eb;border:1px solid #cbd8c7;border-radius:12px;padding:12px;box-shadow:0 3px 18px #29412f18;max-height:130px;overflow:auto}.pg .setup-flow details{margin-top:24px}.pg .reading-state{display:inline-block;padding:10px}

.pg .ipa-hint{display:block;font:14px PGAndika;line-height:1.1;color:#276955}.pg .card:has(.ipa-hint),.pg .slot:has(.ipa-hint){line-height:1.05}

.pg.click-mode .card,.pg.click-mode .tone{cursor:pointer;touch-action:manipulation}.pg [data-action="interaction"][aria-pressed="true"]{background:#236652;color:white}

/* v0.5.13: larger central pinyin, constrained to the play surface. */
.pg.game-active .center{min-width:min(280px,calc(100% - 24px));padding:16px 22px 20px;border-radius:20px}
.pg.game-active .center-label{font-size:16px;margin-bottom:8px}
.pg.game-active .completion{font-size:clamp(44px,8vw,64px);line-height:1.45;letter-spacing:4px;overflow-wrap:anywhere}
@media(max-width:400px){.pg.game-active .center{padding:12px 10px 16px}}
@media(max-height:480px){.pg.game-active .center{padding:6px 12px 8px}.pg.game-active .completion{font-size:44px;line-height:1.25}}

/* v0.5.19: classroom presentation only. Teaching Chinese and pinyin keep their own fonts. */
.pg{--ink:#173e36;--green:#23634f;--muted:#68766e;--paper:#f8f8f1;--line:#dce3db;font-family:PGUI,sans-serif;font-size:16px;padding:0 36px}.pg .wrap{max-width:1440px}.pg .mast{min-height:108px;margin:0;border-bottom:1px solid var(--line)}.pg .mast>div{position:relative;padding-left:64px}.pg .brand-mark{position:absolute;left:0;top:2px;display:grid;place-items:center;background:var(--green);color:white;border-radius:15px 15px 15px 3px;width:48px;height:52px;font:38px PGAndika}.pg .mast h1{font-size:27px;line-height:1.6}.pg .mast small{font-size:12px;letter-spacing:2px}.pg .mast .tag{display:none}.pg button{font-size:15px;border-radius:10px;padding:10px 16px}.pg .workspace{display:grid;grid-template-columns:210px minmax(0,1fr);gap:32px;padding-top:26px}.pg .lesson-rail{border-right:1px solid var(--line);padding:18px 24px 10px 0;display:flex;flex-direction:column;gap:8px;min-width:0}.pg .rail-label,.pg .lesson-rail small{color:var(--muted);font-size:12px}.pg .rail-word{font:40px/1.3 PGKai,serif;overflow-wrap:anywhere;max-height:160px;overflow:auto;margin:6px 0}.pg .rail-spec{display:grid;grid-template-columns:1fr auto;gap:13px;font-size:14px;padding:23px 0;border-block:1px solid var(--line);margin:17px 0}.pg .rail-spec span{color:var(--muted)}.pg .rail-spec b{font-weight:400}.pg .mode-switch button{font-size:13px;width:100%;padding:11px 7px;background:#e9eee2;border-color:#e0e7d9}.pg.click-mode .mode-switch button{background:var(--green);color:white}.pg .rail-help{font-size:12px;color:var(--muted);line-height:1.8}.pg .rail-new{border:0;background:transparent;color:var(--green);padding:16px 0;text-align:left}.pg .rail-foot{font-size:12px;color:#6b836e;margin-top:auto;padding-top:22px}.pg .audio-tools{font-size:12px;color:var(--muted);padding-top:16px}.pg .audio-tools summary{cursor:pointer}.pg .audio-tools .sound-bar{margin-top:12px;display:grid;gap:8px}.pg .audio-tools button{font-size:12px;white-space:normal}.pg .audio-tools .hint{font-size:11px}.pg .audio-tools .sound-state{font-size:12px}.pg .sound-player{max-width:100%}.pg .classroom{min-width:0}.pg .stage-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}.pg .stage-location{font-size:13px;color:var(--muted)}.pg .stage-top button{font-size:12px;border:0;color:var(--muted);padding:7px}.pg .remember{min-height:540px;padding:35px 24px;border-radius:24px;background:#f0f4e9;border-color:#dce5d6}.pg .success-kicker{color:#48745a;font-size:15px}.pg .done-zh{font:36px/1.4 PGKai,serif;letter-spacing:5px;margin:24px 0 6px}.pg .result{font:clamp(56px,7vw,100px)/1.4 PGAndika;letter-spacing:2px;margin:0 0 20px}.pg .listen-pill{border:0;border-radius:30px;background:#e1ebd6;color:#315e46;padding:12px 21px}.pg .pronunciation{font-size:13px;color:#64745c;margin:26px 0}.pg .done-actions{justify-content:center;gap:12px;margin-top:22px}.pg .done-actions button{padding:15px 27px;font-size:17px}.pg .finish-note{font-size:12px;letter-spacing:3px;color:#74846b;margin-top:30px}.pg .prompt,.pg .preview-zh,.pg .question,.pg .current,.pg .choice strong,.pg #pg-text{font-family:PGKai,serif}.pg .preview-zh{font-size:48px}.pg .choices [data-pron],.pg .choices [data-py],.pg #pg-unit-preview{font-family:PGAndika,sans-serif}.pg .choices .zh-select{font-family:PGUI,sans-serif}.pg .choice strong{font-size:32px}.pg .hint{font-size:14px;line-height:1.8}.pg .sample button{font:23px PGKai}.pg .setup-flow{max-width:none;background:#fffef9;border-radius:24px;padding:30px;border-color:var(--line)}.pg .setup-flow h2{font:21px PGUI;margin-top:18px}.pg #pg-text{font-size:30px;min-height:104px}.pg select{max-width:100%;font-size:15px}.pg .row{gap:10px}.pg .field{font-size:14px}.pg .choice{border-radius:14px;background:#fff}.pg .audio-prep{padding:24px 0!important}.pg .setup-flow .audio-report{padding:13px 16px;background:#edf3e7;border-radius:9px}.pg .setup-flow details{font-size:14px}.pg .status,.pg:not(.game-active) .status{position:static;margin:14px 0 0;padding:10px 0;box-shadow:none;border:0;background:transparent;font-size:13px;line-height:1.6;min-height:0;max-height:110px;overflow:auto;color:#805d2e}.pg .status:empty{display:none}.pg .page-foot{display:flex;justify-content:space-between;margin:23px 0;padding:0;color:#71806c;font-size:11px}.pg .settings,.pg.game-active .settings{position:fixed;inset:16px 16px 16px auto;width:410px;max-width:calc(100vw - 32px);z-index:100;margin:0;padding:32px 25px;overflow:auto;border-radius:18px;background:#fffef8;box-shadow:0 0 0 100vmax #16392c55}.pg .settings h2{font:24px PGUI;margin-top:35px}.pg .settings label{font-size:15px;line-height:2}.pg .settings .drawer-close{position:absolute;top:12px;right:14px;font:25px PGUI;padding:2px 12px;background:transparent;border:0}.pg .settings .hint{font-size:13px}.pg.game-active{height:100dvh;padding:0 28px;overflow:hidden}.pg.game-active>.wrap{display:flex;gap:0;flex-direction:column;min-height:0}.pg.game-active .mast{min-height:78px;flex-shrink:0}.pg.game-active .mast h1{font-size:23px}.pg.game-active .brand-mark{height:45px;width:42px;font-size:31px;top:0}.pg.game-active .mast>div{padding-left:57px}.pg.game-active .workspace{display:grid;flex:1;min-height:0;padding-top:16px;padding-bottom:12px;gap:25px}.pg.game-active .lesson-rail{min-height:0;overflow:auto;padding-top:12px}.pg.game-active .classroom{display:flex;flex-direction:column;min-height:0}.pg.game-active .stage-top{flex-shrink:0;margin-bottom:10px}.pg.game-active [data-view=game]{flex:1;min-height:0}.pg.game-active .game-head .prompt{font:26px PGKai;max-width:none}.pg.game-active .game-head .current{font:17px PGKai}.pg.game-active .game-head .tag{font-family:PGUI;font-size:12px}.pg.game-active .arena{margin:7px 0;border-radius:20px;min-height:0;background-color:#fafbf5}.pg.game-active .center{padding:15px 20px 19px;min-width:min(260px,calc(100% - 24px))}.pg.game-active .center-label{font:12px PGUI;letter-spacing:4px;margin-bottom:8px}.pg.game-active .card{font-family:PGAndika;font-size:29px;background:#f4f7ed}.pg.game-active .footer button{font-size:14px;padding:7px 12px}.pg.game-active .status{max-height:44px;flex-shrink:0;margin:0;padding:5px 0;font-size:12px}.pg.game-active .page-foot{display:none}.pg .settings .row{display:flex;flex-wrap:wrap}.pg .remember .py{overflow-wrap:anywhere}.pg .setup-flow .choices{flex-wrap:wrap}.pg .setup-flow .choice{max-width:100%}
@media(max-width:850px){.pg{padding:0 18px}.pg .workspace{grid-template-columns:160px minmax(0,1fr);gap:20px}.pg .lesson-rail{padding-right:16px}.pg .rail-word{font-size:33px}.pg .setup-flow{padding:20px}.pg.game-active{padding:0 16px}.pg.game-active .workspace{gap:18px}.pg .done-actions button{padding:12px 18px}.pg .result{font-size:70px}}
@media(max-width:640px){.pg{padding:0 14px}.pg .mast{min-height:88px}.pg .mast h1{font-size:22px}.pg .mast>div{padding-left:52px}.pg .brand-mark{width:40px;height:46px;font-size:30px}.pg .mast small{font-size:10px}.pg .mast>button{font-size:13px;padding:8px 10px}.pg .workspace{display:flex;flex-direction:column;gap:14px;padding-top:14px}.pg .lesson-rail{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;border:0;padding:0;gap:8px}.pg .lesson-rail>.rail-label,.pg .lesson-rail>small,.pg .rail-spec,.pg .rail-foot,.pg .rail-help{display:none}.pg .rail-word{font-size:26px;max-height:60px;max-width:40%;margin:0 auto 0 0}.pg .mode-switch button{font-size:12px;padding:8px}.pg .rail-new{display:none}.pg .audio-tools{padding:0}.pg .audio-tools[open]{width:100%}.pg .stage-top{margin-bottom:10px}.pg .remember{min-height:460px;padding:26px 14px}.pg .result{font-size:clamp(44px,12vw,68px)}.pg .done-zh{font-size:32px}.pg .done-actions{flex-wrap:wrap}.pg .setup-flow{padding:18px 14px}.pg .setup-flow h2{font-size:19px}.pg .setup-flow .row{flex-wrap:wrap}.pg .status{max-height:120px}.pg.game-active .workspace{display:flex;gap:10px;padding-top:10px}.pg.game-active .classroom{flex:1}.pg.game-active .lesson-rail{overflow:visible;flex-shrink:0}.pg.game-active .mast{min-height:64px}.pg.game-active .mast h1{font-size:21px}.pg.game-active .mast>div{padding-left:48px}.pg.game-active .brand-mark{height:37px;width:35px;font-size:26px}.pg.game-active .stage-top{display:none}.pg.game-active .game-head .prompt{font-size:23px}.pg.game-active .center{padding:12px 10px}.pg.game-active .footer .row{gap:5px}.pg.game-active .footer button{font-size:12px;padding:7px 9px}.pg .page-foot{font-size:10px}}
@media(max-height:600px){.pg.game-active .mast{min-height:54px}.pg.game-active .stage-top{display:none}.pg.game-active .workspace{padding-top:8px}.pg.game-active .center{padding:6px 10px}.pg.game-active .center-label{display:none}.pg.game-active .rail-spec{padding:10px 0;margin:10px 0}.pg.game-active .rail-foot{display:none}}

.pg .settings-shade{position:fixed;inset:0;z-index:99;border:0;border-radius:0;padding:0;background:#16392c55}.pg .settings,.pg.game-active .settings{box-shadow:0 12px 50px #173e3626}.pg .mode{white-space:nowrap;max-width:none!important}

/* v0.5.20: user-selected C size, presentation only. */
.pg.game-active{padding:0 14px}.pg.game-active>.wrap{max-width:none}.pg.game-active .mast{min-height:62px}.pg.game-active .workspace{grid-template-columns:156px minmax(0,1fr);gap:16px;padding-top:10px}.pg.game-active .lesson-rail{padding-right:14px}.pg.game-active .stage-top{display:none}.pg.game-active .game-head{min-height:46px}.pg.game-active .card{font-size:52px;min-width:100px;height:100px;padding:4px 12px}.pg.game-active .tone{font-size:56px;width:100px;height:96px;line-height:1.1}.pg.game-active .tones{gap:18px;margin:8px 0}.pg.game-active .center{min-width:min(400px,calc(100% - 24px));padding:20px 26px 25px;border-radius:24px}.pg.game-active .center-label{font-size:16px;margin-bottom:12px}.pg.game-active .slot{width:72px;height:84px;font-size:52px}.pg.game-active .tone-slot{width:72px;height:62px;font-size:56px}.pg.game-active .slots{gap:8px}.pg.game-active .footer button{font-size:16px;padding:8px 16px}.pg.game-active .completion{font-size:76px}
/* Narrow screens keep the chosen letter size; only tile padding and spacing contract. */
@media(max-width:640px){.pg.game-active{height:auto;min-height:100dvh;overflow:visible;padding:0 12px}.pg.game-active>.wrap{height:auto}.pg.game-active .workspace{display:flex}.pg.game-active .lesson-rail{padding-right:0}.pg.game-active .classroom{flex:none}.pg.game-active [data-view=game]{flex:none}.pg.game-active .arena{flex:none;height:660px!important;min-height:660px}.pg.game-active .card{min-width:72px;height:80px;padding:2px 4px}.pg.game-active .tones{gap:10px}.pg.game-active .tone{width:72px;height:76px}.pg.game-active .center{min-width:0;max-width:calc(100% - 16px);padding:16px 8px 20px}.pg.game-active .slots{gap:2px}.pg.game-active .slot,.pg.game-active .tone-slot{width:48px}.pg.game-active .slot{height:70px}.pg.game-active .tone-slot{height:50px}.pg.game-active .completion{font-size:64px}.pg.game-active .footer button{font-size:14px;padding:8px 10px}}
@media(min-width:641px) and (max-width:1100px){.pg.game-active{height:auto;min-height:100dvh;overflow:visible}.pg.game-active>.wrap{height:auto}.pg.game-active .workspace{display:flex;flex-direction:column}.pg.game-active .lesson-rail{display:flex;flex-direction:row;align-items:center;gap:12px;border:0;padding:0}.pg.game-active .lesson-rail>.rail-label,.pg.game-active .lesson-rail>small,.pg.game-active .rail-spec,.pg.game-active .rail-foot,.pg.game-active .rail-help{display:none}.pg.game-active .rail-word{font-size:30px;margin:0 auto 0 0;max-width:45%}.pg.game-active .rail-new{display:none}.pg.game-active .audio-tools{padding:0}.pg.game-active .classroom,.pg.game-active [data-view=game]{flex:none}.pg.game-active .arena{flex:none;height:720px!important;min-height:720px}}
@media(max-width:640px){.pg.game-active .arena{height:980px!important;min-height:980px}}