:root{--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--font-display: "Baloo 2", var(--font-ui);--sat: env(safe-area-inset-top, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px);--sar: env(safe-area-inset-right, 0px);--fs-caption: clamp(15px, 3.8vmin, 19px);--fs-body: clamp(17px, 4.3vmin, 22px);--fs-label: clamp(18px, 4.8vmin, 24px);--fs-heading: clamp(24px, 6vmin, 34px);--c-bg: #182a54;--c-surface: #1e3160;--c-fill-1: rgba(255, 255, 255, .05);--c-fill-2: rgba(255, 255, 255, .04);--c-fill-3: rgba(255, 255, 255, .12);--c-fill-3-active: rgba(255, 255, 255, .22);--c-border: rgba(255, 255, 255, .1);--c-border-soft: rgba(255, 255, 255, .08);--c-overlay: rgba(9, 14, 32, .72);--c-text: #ffffff;--c-text-soft: #e8eefc;--c-text-muted: #a9bdf0;--c-text-dim: #8ea2d6;--c-ink: #101720;--c-ink-warm: #3b2a00;--c-primary: #5b6ff0;--c-yellow: #f7c94b;--c-green: #7fd3a2;--c-orange: #f0b073;--c-success: #3fbf7f;--c-danger: #e5695f;--c-tile-easy: #8fd6ac;--c-tile-medium: #f4c98a;--c-tile-hard: #a8c2f7;--c-tile-practice: #f0c07a;--c-tile-timed: #67c8f0;--c-medal-gold: #f0d27a;--c-medal-silver: #d7dee7;--c-medal-bronze: #d9a36e;--c-answer-1: #f7c94b;--c-answer-2: #67c8f0;--c-answer-3: #f58f6f;--c-answer-4: #8fd6ac;--c-answer-5: #c79ce8;--c-answer-6: #8fb8f5;--c-answer-7: #f4a7c8;--c-answer-8: #a7e08f;--c-answer-9: #f0c07a;--c-answer-10: #9ad9d0;--radius-pill: 999px;--radius-1: 8px;--radius-2: 12px;--radius-3: 16px;--radius-btn: clamp(12px, 3vw, 18px);--radius-btn-lg: clamp(16px, 4vw, 28px);--radius-tile: clamp(20px, 5vw, 44px);--shadow-bevel: inset 0 -4px 0 rgba(0, 0, 0, .2);--shadow-bevel-active: inset 0 -1px 0 rgba(0, 0, 0, .2);--shadow-bevel-lg: inset 0 -6px 0 rgba(0, 0, 0, .2);--shadow-modal: 0 20px 60px rgba(0, 0, 0, .45);--shadow-pop: 0 8px 20px rgba(0, 0, 0, .3)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;width:100%;font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--c-bg)}body{overflow:hidden}.app{width:100%;height:100%;background:var(--c-bg);display:flex;flex-direction:column}.app.loading{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--c-text)}.screen{width:100%;height:100%;display:flex;flex-direction:column;background:var(--c-bg);padding:0}.btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;box-shadow:var(--shadow-bevel);transition:filter .15s}.btn:active{filter:brightness(1.1)}.score-pill{display:flex;align-items:center;gap:4px;padding:clamp(3px,1vw,6px) clamp(8px,2vw,12px);background:var(--c-yellow);border-radius:var(--radius-pill);color:var(--c-ink-warm);font-size:var(--fs-caption);font-weight:800;white-space:nowrap;flex-shrink:0}.star{display:inline-block}.hamburger-btn,.user-btn{width:clamp(44px,9vmin,60px);height:clamp(44px,9vmin,60px);border:none;border-radius:var(--radius-2);background:var(--c-fill-3);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(3px,1.4vmin,6px);transition:background .2s;flex-shrink:0;padding:0}.hamburger-btn:active,.user-btn:active{background:var(--c-fill-3-active)}.user-btn{color:var(--c-text-soft)}.user-btn svg{width:55%;height:55%}.user-btn[data-signed-in]{background:var(--c-success);color:var(--c-ink)}.hamburger-line{display:block;width:45%;height:2px;border-radius:var(--radius-pill);background:var(--c-text-soft)}.setup-screen{padding:clamp(8px,3vh,16px) clamp(12px,4vw,28px) clamp(12px,3vh,20px);gap:clamp(8px,2vh,16px)}.setup-header{display:flex;flex-shrink:0}.setup-header .hamburger-btn{margin-left:auto}.setup-body{display:flex;gap:clamp(16px,5vw,56px);flex:1;min-height:0;--tile: clamp(56px, 18vh, 200px)}.setup-panel{flex:1;display:flex;flex-direction:column;min-width:0}.pick-list{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:min(calc(var(--tile) * .26),7%);flex:1;min-height:0;overflow:hidden}.pick-tile{display:flex;align-items:center;gap:calc(var(--tile) * .24);width:min(100%,calc(var(--tile) * 3));height:min(var(--tile),28%);flex:0 0 auto;padding:0;border:none;background:none;cursor:pointer;font-family:inherit}.pick-tile-icon{flex-shrink:0;aspect-ratio:1 / 1;height:100%;border-radius:22%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-bevel);opacity:.82;transition:opacity .15s,box-shadow .15s,filter .15s,transform .1s}.pick-tile-icon svg{width:74%;height:74%}.pick-tile-label{font-size:calc(var(--tile) * .3);font-weight:800;color:var(--c-text);text-align:left}.pick-tile[data-selected] .pick-tile-icon{opacity:1;filter:brightness(1.04);box-shadow:0 0 0 clamp(3px,calc(var(--tile) * .05),9px) var(--c-text),var(--shadow-bevel)}.pick-tile:active .pick-tile-icon{transform:translateY(1px)}.pick-tile.easy .pick-tile-icon{background:var(--c-tile-easy)}.pick-tile.medium .pick-tile-icon{background:var(--c-tile-medium)}.pick-tile.hard .pick-tile-icon{background:var(--c-tile-hard)}.pick-tile.practice .pick-tile-icon{background:var(--c-tile-practice)}.pick-tile.timed .pick-tile-icon{background:var(--c-tile-timed)}.setup-actions{flex-shrink:0;display:flex;justify-content:center;padding-top:clamp(4px,1.5vh,14px)}.start-btn{min-width:min(50%,clamp(220px,42vh,460px));height:clamp(46px,13vh,96px);border-radius:var(--radius-btn-lg);font-size:clamp(20px,5vh,40px);font-weight:800;background:var(--c-primary);color:var(--c-text);padding:0 clamp(20px,5vw,48px)}.game-screen{padding:clamp(8px,3vh,16px) clamp(12px,3vw,20px) clamp(8px,3vh,16px);gap:clamp(4px,2vh,8px)}.game-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:clamp(48px,12vh,80px);gap:clamp(10px,3vw,20px);flex-shrink:0}.game-header .back-btn{justify-self:start}.header-right{justify-self:end;display:flex;align-items:center;gap:clamp(6px,1.6vw,12px)}.help-btn{width:clamp(40px,9vmin,48px);height:clamp(40px,9vmin,48px);padding:0;border:none;border-radius:50%;background:var(--c-fill-3);color:var(--c-text-soft);font-family:inherit;font-size:var(--fs-label);font-weight:800;cursor:pointer;flex-shrink:0}.help-btn:active{background:var(--c-fill-3-active)}.back-btn{width:clamp(44px,8vw,56px);height:clamp(40px,8vh,52px);border:none;border-radius:var(--radius-2);background:var(--c-fill-3);color:var(--c-text-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0;padding:0}.back-btn:active{background:var(--c-fill-3-active)}.back-btn svg{width:clamp(20px,4.5vw,28px);height:clamp(20px,4.5vw,28px);stroke-width:2.5}.time-display{flex:1;display:flex;justify-content:center;min-width:0}.time-pill{text-align:center;font-family:var(--font-mono);font-size:clamp(28px,6vw,40px);font-weight:500;padding:clamp(4px,1vh,8px) clamp(14px,3.5vw,24px);border:3px solid currentColor;border-radius:var(--radius-pill);color:var(--c-green);letter-spacing:.03em;white-space:nowrap;transition:color .3s}.game-header .score-pill{gap:8px;padding:clamp(6px,2vw,12px) clamp(14px,3.5vw,22px);font-size:clamp(20px,4.5vw,28px)}.task-container{display:flex;align-items:center;justify-content:center;flex:1;min-height:clamp(40px,12vh,80px);padding:clamp(8px,2vh,12px) 0;overflow:hidden}.task{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,32px);font-weight:800;line-height:1;max-width:100%}.task .number{font-size:clamp(52px,16vh,140px);color:var(--c-text-dim);font-family:var(--font-ui)}.task .operator{font-size:clamp(40px,12vh,110px);font-weight:800}.task .operator[data-op=plus]{color:var(--c-green)}.task .operator[data-op=minus]{color:var(--c-orange)}.task .equals{font-size:clamp(32px,9vh,84px);color:var(--c-text-dim)}.task .q-slot{font-weight:800;transition:color .3s;min-width:clamp(44px,12vh,110px);text-align:center}.task .q-slot[data-op=plus]{color:var(--c-green)}.task .q-slot[data-op=minus]{color:var(--c-orange)}.task .q-slot[data-op=mixed]{color:var(--c-yellow)}.task .q-slot[data-revealed]{color:var(--c-success)}.task.wide{gap:clamp(8px,2vw,24px)}.answers-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:clamp(8px,2.5vw,22px);flex:0 0 25vh;min-height:110px;padding:0;margin:0}.answer-btn{border:none;border-radius:var(--radius-btn-lg);background:var(--answer-color, var(--c-yellow));color:var(--c-ink);font-size:clamp(20px,8vh,72px);font-weight:800;cursor:pointer;transition:background-color .1s,color .1s,opacity .1s,box-shadow .1s,transform .1s;box-shadow:var(--shadow-bevel);display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit;opacity:1}.answers-grid[data-count="5"]{grid-template-rows:1fr}.answers-grid[data-count="5"] .answer-btn{font-size:clamp(28px,14vh,110px)}.answer-btn:nth-child(1){--answer-color: var(--c-answer-1)}.answer-btn:nth-child(2){--answer-color: var(--c-answer-2)}.answer-btn:nth-child(3){--answer-color: var(--c-answer-3)}.answer-btn:nth-child(4){--answer-color: var(--c-answer-4)}.answer-btn:nth-child(5){--answer-color: var(--c-answer-5)}.answer-btn:nth-child(6){--answer-color: var(--c-answer-6)}.answer-btn:nth-child(7){--answer-color: var(--c-answer-7)}.answer-btn:nth-child(8){--answer-color: var(--c-answer-8)}.answer-btn:nth-child(9){--answer-color: var(--c-answer-9)}.answer-btn:nth-child(10){--answer-color: var(--c-answer-10)}.answer-btn[data-state=correct]{--answer-color: var(--c-success);color:var(--c-ink);opacity:1}.answer-btn[data-state=dim]{--answer-color: rgba(255, 255, 255, .1);color:var(--c-text-dim);opacity:.6}.answer-btn:active:not(:disabled){transform:translateY(1px);box-shadow:var(--shadow-bevel-active)}.answer-btn:disabled{cursor:not-allowed}.result-screen{padding:clamp(16px,5vh,24px) clamp(12px,3vw,20px);justify-content:center;align-items:center}.result-content{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,8vh,40px);width:100%}.result-title{font-size:var(--fs-heading);font-weight:700;color:var(--c-text-muted);text-align:center}.medal-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(16px,5vw,40px);position:relative}.medal-icon{width:clamp(110px,32vh,240px);height:clamp(110px,32vh,240px)}.smile-icon{width:clamp(100px,26vh,180px);height:clamp(100px,26vh,180px)}.score-display{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,1vh,4px)}.score-number{font-size:clamp(56px,18vh,120px);font-weight:800;color:var(--c-text);line-height:1;font-family:var(--font-ui);white-space:nowrap}.score-number.fraction{font-size:clamp(36px,12vh,76px)}.score-display.gold .score-number{color:var(--c-medal-gold)}.score-display.silver .score-number{color:var(--c-medal-silver)}.score-display.bronze .score-number{color:var(--c-medal-bronze)}.score-label{font-size:var(--fs-body);font-weight:700;color:var(--c-text-muted);letter-spacing:.06em;text-transform:uppercase}.result-actions{display:flex;justify-content:center;width:100%}.btn-ok{min-width:min(55%,320px);height:clamp(44px,11vh,64px);border-radius:var(--radius-btn);font-size:clamp(18px,3.5vw,24px);padding:0 clamp(14px,2.5vw,20px);background:var(--c-primary);color:var(--c-text)}.results-list-screen{padding:clamp(8px,3vh,16px) clamp(12px,3vw,20px);gap:clamp(8px,2vh,12px)}.results-header{display:flex;align-items:center;height:clamp(44px,9vh,56px);gap:clamp(8px,2vw,12px);flex-shrink:0}.results-title{flex:1;margin:0;font-size:var(--fs-heading);font-weight:700;color:var(--c-text);text-align:center}.results-header-spacer{width:clamp(36px,8vw,52px);flex-shrink:0}.mode-tabs{display:flex;gap:clamp(6px,1.5vw,10px);flex-shrink:0}.mode-tab{flex:1;height:clamp(38px,7vh,46px);border:none;border-radius:var(--radius-2);background:var(--c-fill-1);color:var(--c-text-dim);font-size:var(--fs-body);font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}.mode-tab.active{background:var(--c-primary);color:var(--c-text)}.level-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.6vw,14px);flex:1;min-height:0}.level-column{display:flex;flex-direction:column;background:var(--c-fill-1);border-radius:var(--radius-3);overflow:hidden}.level-column-head{padding:clamp(8px,2vh,14px) clamp(8px,1.6vw,14px);border-bottom:1px solid var(--c-border-soft);display:flex;flex-direction:column;gap:clamp(4px,1vh,8px);flex-shrink:0}.level-column-name{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:800;color:var(--c-text)}.level-column-name svg{flex-shrink:0;width:clamp(20px,3.4vw,26px);height:clamp(20px,3.4vw,26px)}.level-column-stats{display:flex;gap:clamp(10px,2vw,18px);font-size:var(--fs-body);color:var(--c-text-dim)}.level-column-stats b{color:var(--c-text)}.level-column-body{flex:1;overflow-y:auto;padding:clamp(6px,1.4vw,10px);display:flex;flex-direction:column;gap:clamp(5px,1vh,8px)}.level-column-body::-webkit-scrollbar{width:clamp(4px,1vw,8px)}.level-column-body::-webkit-scrollbar-track{background:var(--c-fill-2);border-radius:4px}.level-column-body::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:4px}.level-result{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:clamp(7px,1.4vh,10px) clamp(8px,1.6vw,12px);background:var(--c-fill-2);border-radius:var(--radius-2);flex-shrink:0}.level-result-date{font-size:var(--fs-caption);color:var(--c-text-dim)}.level-result-score{display:flex;align-items:center;gap:clamp(6px,1.2vw,10px);font-size:var(--fs-label);font-weight:800;color:var(--c-text)}.level-result-score svg{flex-shrink:0;width:clamp(18px,3vw,22px);height:clamp(18px,3vw,22px)}.level-column-empty{padding:clamp(12px,3vh,20px) 8px;text-align:center;color:var(--c-text-dim);font-size:var(--fs-caption)}.results-footer{padding:clamp(8px,2vh,12px);text-align:center;color:var(--c-text-dim);font-size:var(--fs-caption);flex-shrink:0;border-top:1px solid var(--c-border)}.results-footer p{margin:0}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--c-overlay);display:flex;align-items:center;justify-content:center;--mpad: clamp(12px, min(5vw, 5vh), 40px);padding:calc(var(--mpad) + var(--sat)) calc(var(--mpad) + var(--sar)) calc(var(--mpad) + var(--sab)) calc(var(--mpad) + var(--sal));z-index:100}.modal-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-3);padding:clamp(14px,5vh,32px) clamp(20px,5vw,32px);max-width:440px;width:100%;display:flex;flex-direction:column;gap:clamp(8px,2vh,14px);text-align:center;box-shadow:var(--shadow-modal);max-height:100%;overflow-y:auto}.modal-title{font-size:var(--fs-heading);font-weight:800;color:var(--c-text)}.modal-text{line-height:1.35;font-size:var(--fs-body);color:var(--c-text-muted)}.modal-actions{display:flex;gap:clamp(10px,2.5vw,16px);margin-top:clamp(4px,1vh,8px)}.modal-btn{flex:1;height:clamp(44px,10vh,56px);border-radius:var(--radius-btn);font-size:var(--fs-label)}.modal-btn-cancel{background:var(--c-primary);color:var(--c-text)}.modal-btn-danger{background:var(--c-danger);color:var(--c-text)}.modal-icon-actions{display:flex;gap:clamp(16px,4vw,28px);margin-top:clamp(4px,1vh,8px)}.modal-icon-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.5vh,12px);height:clamp(72px,22vh,150px);border-radius:var(--radius-btn-lg);font-weight:800;font-size:var(--fs-label)}.modal-icon-btn svg{width:clamp(36px,9vw,56px);height:clamp(36px,9vw,56px)}.modal-icon-btn-no{background:var(--c-danger);color:var(--c-text)}.modal-icon-btn-yes{background:var(--c-success);color:var(--c-ink)}.app{padding:var(--sat) var(--sar) var(--sab) var(--sal)}input,textarea,select{font-size:16px}body{height:100vh;height:100dvh}@media (orientation: landscape){html,body,#root{height:100%;width:100%}}@media (orientation: landscape) and (max-height: 420px){.setup-screen{padding:6px clamp(12px,4vw,28px) 8px;gap:6px}.setup-actions{padding-top:2px}.start-btn{height:clamp(38px,12vh,96px);font-size:clamp(17px,5vh,40px)}.hamburger-btn,.user-btn{width:40px;height:40px}}@media (orientation: portrait){.setup-screen{gap:clamp(10px,3vw,20px)}.setup-body{flex-direction:column;flex:1;justify-content:center;gap:clamp(16px,5vw,36px);align-items:stretch;--tile: clamp(52px, 16vw, 168px)}.setup-panel{flex:0 0 auto}.setup-panel:first-child{border-bottom:2px solid var(--c-border);padding-bottom:clamp(16px,5vw,36px)}.pick-list{flex:0 0 auto;align-items:flex-start;padding-left:clamp(20px,10vw,96px);gap:calc(var(--tile) * .3);overflow:visible}.pick-tile{width:auto;height:var(--tile)}.answers-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);flex:0 0 44vh;gap:clamp(8px,2.5vw,18px)}.answer-btn{font-size:clamp(22px,9vw,58px)}.answers-grid[data-count="5"]{grid-template-rows:repeat(2,1fr)}.answers-grid[data-count="5"] .answer-btn{font-size:clamp(30px,15vw,96px)}.task{gap:clamp(8px,3vw,22px)}.task.wide{gap:clamp(4px,1.8vw,14px)}.task .number{font-size:clamp(38px,13vw,120px)}.task .operator{font-size:clamp(30px,10vw,96px)}.task .equals{font-size:clamp(26px,8vw,76px)}.task .q-slot{min-width:clamp(36px,11vw,96px)}.medal-container{flex-direction:column;gap:clamp(12px,4vw,28px)}.medal-icon{width:clamp(100px,34vw,220px);height:clamp(100px,34vw,220px)}.smile-icon{width:clamp(90px,30vw,190px);height:clamp(90px,30vw,190px)}.score-number{font-size:clamp(52px,20vw,130px)}.score-number.fraction{font-size:clamp(38px,15vw,90px)}.btn-ok{min-width:min(80%,360px)}.level-columns{display:flex;flex-direction:column;gap:clamp(8px,2.5vw,14px);overflow-y:auto}.level-column{flex:0 0 auto}.level-column-body{max-height:32vh}}body{overflow:hidden;position:fixed;width:100%;height:100%}#root{overflow:hidden}.menu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--c-overlay);z-index:100}.menu-card{position:absolute;top:calc(var(--sat) + clamp(44px,9vmin,60px) + clamp(12px,4vh,24px));right:calc(var(--sar) + clamp(12px,4vw,28px));min-width:min(260px,80vw);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-3);padding:clamp(6px,1.6vh,10px);display:flex;flex-direction:column;gap:clamp(2px,.8vh,6px);box-shadow:var(--shadow-modal);max-height:calc(100% - var(--sat) - clamp(44px,9vmin,60px) - clamp(12px,4vh,24px) - var(--sab) - 8px);overflow-y:auto}.menu-item{display:flex;align-items:center;gap:clamp(10px,2.4vmin,14px);min-height:44px;padding:6px;border:none;border-radius:var(--radius-2);background:transparent;color:var(--c-text);font-family:inherit;font-size:var(--fs-label);text-align:left;cursor:pointer}.menu-item:active{background:var(--c-fill-3)}.menu-item-icon{width:clamp(40px,8vmin,52px);height:clamp(40px,8vmin,52px);border-radius:22%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-bevel)}.menu-item-icon svg{width:56%;height:56%}.menu-item-icon.results{background:var(--c-tile-hard);color:var(--c-ink)}.menu-item-icon.collection{background:var(--c-yellow);color:var(--c-ink-warm)}.menu-item-icon.sound{background:var(--c-tile-easy);color:var(--c-ink)}.menu-item-icon.sound.off{background:var(--c-fill-3);color:var(--c-text-muted);box-shadow:none}.menu-item-badge{margin-left:auto;padding:2px 9px;border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:800;color:var(--c-yellow);background:color-mix(in srgb,var(--c-yellow) 18%,transparent)}.menu-item-badge.off{color:var(--c-text-muted);background:var(--c-fill-3)}.puzzle{display:block;width:100%;height:100%}.pz-locked{fill:var(--c-fill-1)}.pz-missing{fill:var(--c-fill-3);stroke:var(--c-text-dim);stroke-width:1.5;stroke-dasharray:4 4}.pz-seam{fill:none;stroke:var(--c-bg);stroke-opacity:.6;stroke-width:1.5}.pz-new{fill:none;stroke:var(--c-yellow);stroke-width:4;animation:pz-pulse .9s ease-in-out infinite alternate}.pz-question{fill:var(--c-text-dim);font-size:64px;font-weight:800;font-family:var(--font-display)}@keyframes pz-pulse{0%{opacity:.45}to{opacity:1}}@media (prefers-reduced-motion: reduce){.pz-new,.piece-star{animation:none}}.collection-screen{padding:clamp(8px,3vh,16px) clamp(12px,3vw,20px);gap:clamp(8px,2vh,12px)}.collection-pill{min-width:clamp(36px,8vw,52px);padding:5px 12px;border-radius:var(--radius-pill);background:var(--c-fill-3);color:var(--c-text-soft);font-size:var(--fs-body);font-weight:700;text-align:center;white-space:nowrap;flex-shrink:0}.collection-bands{flex:1;min-height:0;container-type:size}.bands-inner{--gap: clamp(4px, 1.2vmin, 8px);--chip: clamp(28px, 5.5vmin, 36px);--bgap: clamp(6px, 2.2vmin, 16px);--cols: 15;--th: min( calc((100cqw - 14 * var(--gap) - 8px) / 15), calc((100cqh - 3 * (var(--chip) + 6px) - 2 * var(--bgap) - 8px) / 3), 96px );height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--bgap)}.collection-band{display:flex;flex-direction:column;gap:6px}.collection-band.tier-1{--tier: var(--c-tile-easy)}.collection-band.tier-2{--tier: var(--c-tile-medium)}.collection-band.tier-3{--tier: var(--c-tile-hard)}.band-grid{display:grid;grid-template-columns:repeat(var(--cols),var(--th));gap:var(--gap)}.collection-thumb{position:relative;width:var(--th);height:var(--th);padding:0;border:none;border-radius:max(6px,calc(var(--th) * .16));overflow:hidden;background:var(--c-fill-1);cursor:pointer}.collection-thumb:active{transform:scale(.95)}.collection-thumb img{display:block;width:100%;height:100%;object-fit:cover}.collection-thumb.partial{overflow:visible;background:none;box-shadow:0 0 0 3px var(--tier)}.partial-count{position:absolute;right:-4px;bottom:-4px;padding:0 5px;border-radius:var(--radius-pill);background:var(--tier);color:var(--c-ink);font-size:max(12px,calc(var(--th) * .24));font-weight:800;line-height:1.35}.collection-thumb.locked{cursor:default}.collection-thumb.locked:active{transform:none}.blurred-thumb{filter:blur(max(3px,calc(var(--th, 120px) * .09))) brightness(.6) saturate(.8);transform:scale(1.2)}.lock-badge{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#ffffffd9;pointer-events:none}.lock-badge svg{width:38%;height:38%}.level-chip{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;height:var(--chip, 34px);padding:0 12px 0 3px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--chip-color) 20%,transparent);color:var(--chip-color);font-size:var(--fs-caption);font-weight:800;white-space:nowrap}.level-chip.easy{--chip-color: var(--c-tile-easy)}.level-chip.medium{--chip-color: var(--c-tile-medium)}.level-chip.hard{--chip-color: var(--c-tile-hard)}.level-chip-icon{height:calc(100% - 6px);aspect-ratio:1;border-radius:50%;background:var(--chip-color);display:flex;align-items:center;justify-content:center}.level-chip-icon svg{width:88%;height:88%}.collection-pill.pack-switch{display:inline-flex;align-items:center;gap:6px;border:none;font-family:inherit;cursor:pointer}.collection-pill.pack-switch:active{background:var(--c-fill-3-active)}.collection-pill.pack-switch svg{width:1em;height:1em}.modal-card.pack-picker{max-width:680px;text-align:left}.pack-picker-head{display:flex;align-items:center;gap:12px}.pack-picker-head .modal-title{flex:1}.pack-picker-close{--btn: clamp(40px, 8vmin, 48px)}.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(110px,24vmin,150px),1fr));gap:clamp(8px,2vmin,14px);overflow-y:auto;min-height:0}.pack-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border:3px solid transparent;border-radius:var(--radius-3);background:var(--c-fill-1);color:var(--c-text);font-family:inherit;cursor:pointer}.pack-card[data-active]{border-color:var(--c-yellow)}.pack-card:active{background:var(--c-fill-3)}.pack-cover{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-2)}.pack-name{font-size:var(--fs-label);font-weight:800}.pack-star{color:var(--c-yellow)}.pack-progress{font-size:var(--fs-caption);font-weight:700;color:var(--c-text-muted)}.pick-tile-icon{position:relative}.pick-tile-badge{position:absolute;top:2%;right:-16%;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:var(--radius-pill);background:var(--c-yellow);color:var(--c-ink-warm);font-size:clamp(12px,calc(var(--tile) * .17),22px);font-weight:800;line-height:1.2;box-shadow:var(--shadow-pop)}.pick-tile-icon .pick-tile-badge svg{width:.95em;height:.95em}.viewer-overlay{--btn: clamp(44px, 9vmin, 56px);--vgap: clamp(8px, 3vw, 28px);--vpad: clamp(12px, 3vmin, 28px);position:fixed;top:0;right:0;bottom:0;left:0;z-index:110;background:var(--c-overlay);display:flex;align-items:center;justify-content:center;gap:var(--vgap);padding:calc(var(--vpad) + var(--sat)) calc(var(--vpad) + var(--sar)) calc(var(--vpad) + var(--sab)) calc(var(--vpad) + var(--sal))}.viewer-figure{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.5vh,12px)}.viewer-image{display:block;width:min(calc((100vh - var(--sat) - var(--sab)) * .7),640px,calc(100vw - var(--sal) - var(--sar) - 2 * (var(--btn) + var(--vgap) + var(--vpad))));aspect-ratio:1;object-fit:cover;border-radius:var(--radius-3);background:var(--c-surface)}.viewer-puzzle{background:none}.viewer-name{font-size:var(--fs-label);font-weight:700;color:var(--c-text);text-align:center}.viewer-index{font-weight:400;color:var(--c-text-muted)}.viewer-btn{width:var(--btn);height:var(--btn);flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-2);background:var(--c-fill-3);color:var(--c-text);cursor:pointer}.viewer-btn:active{background:var(--c-fill-3-active)}.viewer-btn svg{width:45%;height:45%}.viewer-btn-next svg{transform:rotate(180deg)}.viewer-close{position:absolute;top:calc(var(--sat) + clamp(8px,2vmin,16px));right:calc(var(--sar) + clamp(8px,2vmin,16px))}.piece-reward{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1vh,8px);padding-left:clamp(14px,4vw,32px);border-left:1px solid var(--c-border)}.piece-reward-image{position:relative;width:clamp(84px,22vh,150px);aspect-ratio:1}.piece-reward-tag{padding:3px 12px;border-radius:var(--radius-pill);font-size:var(--fs-body);font-weight:800;white-space:nowrap;color:var(--c-yellow);background:color-mix(in srgb,var(--c-yellow) 18%,transparent)}.piece-reward.locked .piece-reward-image{overflow:hidden;border-radius:var(--radius-2)}.piece-reward.locked .blurred-thumb{display:block;width:100%;height:100%;filter:blur(7px) brightness(.6) saturate(.8)}.piece-reward-image.pack-done{display:flex;align-items:center;justify-content:center;font-size:clamp(56px,16vh,110px);line-height:1;color:var(--c-yellow)}.piece-reward-note{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:240px;font-size:var(--fs-body);font-weight:800;line-height:1.3;text-align:center;color:var(--c-text-soft)}.piece-reward-note .level-chip{align-self:center}.piece-reward.done .piece-reward-tag{color:var(--c-success);background:color-mix(in srgb,var(--c-success) 18%,transparent)}.piece-star{position:absolute;line-height:1;color:var(--c-yellow);font-size:clamp(14px,3.6vh,24px);animation:pz-pulse .9s ease-in-out infinite alternate}.piece-star.s1{top:-6%;left:-10%}.piece-star.s2{top:2%;right:-12%;animation-delay:.3s}.piece-star.s3{bottom:12%;right:-14%;animation-delay:.6s}@media (orientation: portrait){.piece-reward{padding-left:0;border-left:none}.piece-reward-image{width:clamp(96px,16vh,150px)}.bands-inner{--cols: 5;--th: min( calc((100cqw - 4 * var(--gap) - 8px) / 5), calc((100cqh - 3 * (var(--chip) + 6px) - 2 * var(--bgap) - 3 * var(--gap) - 8px) / 6), 120px )}}.task[data-digits="3"] .number{font-size:clamp(44px,14vh,120px)}.task.wide[data-digits="3"] .number{font-size:clamp(34px,9vw,110px)}.task.wide[data-digits="3"] .operator{font-size:clamp(28px,7vw,86px)}.task.wide[data-digits="3"] .equals{font-size:clamp(24px,6vw,66px)}@media (orientation: portrait){.task[data-digits="3"] .number{font-size:clamp(34px,11vw,108px)}.task.wide[data-digits="3"] .number{font-size:clamp(26px,8.4vw,88px)}.task.wide[data-digits="3"] .operator{font-size:clamp(22px,6.6vw,70px)}.task.wide[data-digits="3"] .equals{font-size:clamp(20px,5.2vw,56px)}.task.wide[data-digits="3"]{gap:clamp(3px,1.2vw,10px)}}.menu-item-icon.rules{background:var(--c-tile-medium);color:var(--c-ink)}.rules-screen{padding:clamp(8px,3vh,16px) clamp(12px,3vw,20px);gap:clamp(8px,2vh,12px)}.rules-body{flex:1;min-height:0;overflow-y:auto;width:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(8px,2vh,14px)}.rules-intro{margin:0;font-size:var(--fs-body);line-height:1.35;color:var(--c-text-muted)}.rules-list{display:flex;flex-direction:column;gap:clamp(8px,1.6vh,12px)}.rules-row{display:flex;align-items:center;gap:clamp(12px,3vmin,20px);min-height:56px;padding:clamp(8px,1.8vh,14px) clamp(12px,3vmin,18px);border:none;border-radius:var(--radius-3);background:var(--c-fill-1);color:var(--c-text);font-family:inherit;text-align:left;cursor:pointer}.rules-row:active{background:var(--c-fill-3)}.rules-check{flex-shrink:0;width:clamp(36px,8vmin,48px);height:clamp(36px,8vmin,48px);border:3px solid var(--c-text-dim);border-radius:var(--radius-2);display:flex;align-items:center;justify-content:center;color:var(--c-ink)}.rules-row[data-on] .rules-check{background:var(--c-success);border-color:var(--c-success)}.rules-check svg{width:70%;height:70%}.rules-title{flex:1;font-size:var(--fs-label);font-weight:700}.rules-range{padding:3px 14px;border-radius:var(--radius-pill);background:var(--c-fill-3);font-size:var(--fs-label);font-weight:800;white-space:nowrap}.rules-note{margin:0;min-height:1.35em;font-size:var(--fs-body);line-height:1.35;color:var(--c-text-muted)}.rules-note.warn{color:var(--c-yellow);font-weight:700}.modal-card.pin-card{max-width:440px}.pin-display{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vmin,24px)}.pin-dots{display:flex;gap:clamp(10px,3vmin,16px)}.pin-dots i{width:clamp(16px,4vmin,24px);height:clamp(16px,4vmin,24px);border:3px solid var(--c-text-dim);border-radius:50%}.pin-dots i.on{background:var(--c-text);border-color:var(--c-text)}.pin-dots.wrong i{background:var(--c-danger);border-color:var(--c-danger)}.pin-dots.wrong{animation:pin-shake .35s}@keyframes pin-shake{20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.pin-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,1.6vmin,10px)}.pin-key{height:clamp(44px,10vh,60px);padding:0;border:none;border-radius:var(--radius-2);background:var(--c-fill-3);color:var(--c-text);font-family:inherit;font-size:var(--fs-heading);font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center}.pin-key:active{background:var(--c-fill-3-active)}.pin-erase{width:clamp(44px,10vh,60px);flex-shrink:0}.pin-erase svg{width:55%;height:55%}@media (prefers-reduced-motion: reduce){.pin-dots.wrong{animation:none}}.task[data-roman]{--g: clamp(6px, 2vw, 22px);--avail: calc(100vw - var(--sal) - var(--sar) - 2 * clamp(12px, 3vw, 20px) - 8px);--rf: clamp( 20px, calc((var(--avail) - (var(--n) - 1) * var(--g)) / var(--cw)), 16vh );gap:var(--g)}.task[data-roman] .number{font-size:var(--rf)}.task[data-roman] .operator{font-size:calc(var(--rf) * .8)}.task[data-roman] .equals{font-size:calc(var(--rf) * .7)}.task[data-roman] .q-slot{text-align:center}@media (orientation: portrait){.task[data-roman]{--rf: clamp( 20px, calc((var(--avail) - (var(--n) - 1) * var(--g)) / var(--cw)), 13vw )}}.modal-card.roman-help{max-width:460px}.roman-base{display:flex;justify-content:center;gap:clamp(16px,5vmin,36px);font-size:var(--fs-heading);font-weight:700;color:var(--c-text)}.roman-base b{color:var(--c-yellow)}.roman-tips{display:grid;grid-template-columns:1fr 1fr;gap:clamp(4px,1vh,8px) clamp(12px,4vw,28px);font-size:var(--fs-label);font-weight:700;color:var(--c-text-soft);text-align:left;justify-items:center}.roman-rule{font-size:var(--fs-body);line-height:1.35;color:var(--c-text-muted)}@media (max-width: 379px){.game-header{gap:8px}.game-header .time-pill{font-size:22px;padding:4px 10px}.game-header .score-pill{padding:6px 10px;font-size:20px;gap:4px}.help-btn{width:36px;height:36px}.header-right{gap:5px}}@media (orientation: landscape) and (max-height: 420px){.rules-screen{gap:4px}.rules-body,.rules-list{gap:6px}.rules-row{min-height:44px;padding:4px 12px}.rules-check{width:34px;height:34px}.rules-note{min-height:0;font-size:var(--fs-caption)}}