:root{--bg-top: #0b1020;--bg-mid: #131c34;--bg-bottom: #1b2a4f;--surface: rgba(255, 255, 255, .88);--surface-strong: #ffffff;--stroke: #d7e2f6;--text: #0f1c36;--muted: #63708c;--primary: #0a84ff;--primary-press: #0663bf;--success: #0a9e67;--danger: #cc2a46;--shadow-lg: 0 18px 42px rgba(5, 16, 42, .26);--shadow-sm: 0 6px 18px rgba(10, 22, 49, .12)}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden;font-family:Manrope,Segoe UI,Helvetica Neue,sans-serif;color:var(--text);background:radial-gradient(1200px 700px at 8% -8%,#3d68cb 0%,transparent 55%),radial-gradient(1100px 800px at 95% -15%,#1f8fd8 0%,transparent 52%),linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 45%,var(--bg-bottom) 100%)}button,input,select{font:inherit}button{transition:transform .14s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}.app{height:100dvh;max-width:1160px;margin:0 auto;padding:12px;display:flex;flex-direction:column;gap:10px}.site-footer{display:flex;justify-content:center;gap:14px;padding:4px 0 0;font-size:.9rem}.site-footer a{color:#dfeeff;text-decoration:underline;text-underline-offset:2px;font-weight:700}.site-footer a:hover{color:#fff}header{display:flex;flex-direction:column;gap:10px}.header-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.help-link{width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.36);background:#ffffff29;color:#f2f7ff;font-weight:900;font-size:1.05rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 14px #08142e40}.help-link:hover{background:#ffffff40;color:#fff}h1,h2,h3{margin:0;letter-spacing:-.02em}h1{color:#f2f7ff;font-size:clamp(1.2rem,1rem + 1.3vw,1.7rem);font-weight:800}h2{font-size:clamp(1.05rem,.95rem + .5vw,1.25rem);font-weight:800}nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}nav button{border:1px solid rgba(255,255,255,.22);background:#ffffff14;color:#eef5ff;border-radius:14px;padding:10px;font-weight:700;transition:transform .2s ease,background-color .2s ease}nav button.active{border-color:#fff6;background:#ffffff3b}nav button:hover:not(:disabled){background:#ffffff29}.subnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.class-mode-head{display:flex;justify-content:flex-start}.back-to-main{border:1px solid rgba(255,255,255,.24);background:#ffffff1a;color:#eef5ff;border-radius:12px;padding:8px 12px;font-weight:800}.back-to-main:hover{background:#ffffff2e}.subnav button{border:1px solid rgba(255,255,255,.2);background:#ffffff14;color:#eef5ff;border-radius:12px;padding:9px;font-weight:700}.subnav button.active{border-color:#fff6;background:#ffffff3b}.panel,.game{background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.35);border-radius:22px;padding:12px;box-shadow:var(--shadow-lg);flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow:auto}.game{position:relative}.controls{display:grid;gap:10px}label{display:grid;gap:5px;font-size:.93rem;color:#2a3652;font-weight:600}select,input{border-radius:12px;border:1px solid var(--stroke);padding:10px;background:var(--surface-strong);color:var(--text);box-shadow:inset 0 1px #fffc}select:focus,input:focus{outline:2px solid rgba(10,132,255,.24);border-color:#a7cdfc}.toggle{display:flex;align-items:center;gap:8px}.config-editor{display:grid;gap:12px}.mode-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mode-card{border:1px solid #cfe0fb;background:linear-gradient(180deg,#fff,#f1f7ff);border-radius:16px;padding:10px;display:grid;justify-items:center;gap:6px;color:#29406b;font-weight:800}.mode-card.selected{border-color:#7cb2ff;background:linear-gradient(180deg,#e9f3ff,#d9eaff);box-shadow:inset 0 0 0 1px #0a84ff2e}.mode-card:hover:not(:disabled){border-color:#96beff}.mode-icon{width:36px;height:36px}.mode-icon-shape{fill:#d9ebff;stroke:#0a84ff;stroke-width:1.8}.mode-icon-shape-alt{fill:#0a84ff38;stroke:#0a84ff;stroke-width:1.8}.mode-icon-line{stroke:#1458bb;stroke-width:2.2;stroke-linecap:round}.range-field,.choice-grid{display:grid;gap:8px}.choice-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.choice-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.choice-pill{border:1px solid #c9dbf7;background:#fff;border-radius:12px;min-height:42px;color:#36527e;font-size:1.02rem;font-weight:800;box-shadow:0 3px 10px #12254714}.choice-pill.selected{border-color:#5fa3ff;background:linear-gradient(180deg,#f7fbff,#e7f1ff);color:#0b4aa1;box-shadow:0 6px 16px #0a56b433}.choice-pill:hover:not(:disabled){border-color:#8db9ff}.range-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#2d4068}.range-head strong{color:#0d3f8e}.range-scale{display:flex;justify-content:space-between;font-size:.8rem;color:#6a7da1;font-weight:700}.switch-row{display:flex;justify-content:flex-start;align-items:center;gap:12px;padding:2px 0;font-weight:700;color:#2d4068}.switch-label{min-width:240px}.switch{border:0;width:52px;height:30px;border-radius:999px;background:#bbcae2;padding:3px;display:flex;align-items:center;transition:background-color .2s ease}.switch.on{background:#0a84ff}.switch-knob{width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 3px 8px #0003;transform:translate(0);transition:transform .2s ease}.switch.on .switch-knob{transform:translate(22px)}.time-editor{display:grid;gap:9px;background:#eef5ffd9;border:1px solid #d2e2fb;border-radius:14px;padding:10px}.time-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.preset{border:1px solid #c7d9f7;background:#fff;border-radius:11px;min-height:38px;display:flex;align-items:center;justify-content:center;gap:5px;color:#234173;font-weight:800}.preset.selected{border-color:#77afff;background:#e8f2ff;color:#0b4aa1;box-shadow:0 6px 14px #0a56b426}.preset-icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}.time-stepper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.step-btn{border:1px solid #c7d9f7;background:#fff;border-radius:12px;min-height:38px;color:#27477a;font-weight:800}.primary{border:0;border-radius:14px;background:linear-gradient(135deg,#0a84ff,#2762ff);color:#fff;padding:12px;font-weight:800;letter-spacing:.01em;box-shadow:0 10px 20px #0a56b447}.primary:active{background:linear-gradient(135deg,var(--primary-press) 0%,#1b46bf 100%)}.primary:disabled{opacity:.65}.primary:hover:not(:disabled){box-shadow:0 12px 24px #0a56b459;transform:translateY(-1px)}.secondary{border:1px solid #c9d9f4;border-radius:12px;background:#fff;color:#385583;padding:10px;font-weight:700}.secondary:hover:not(:disabled){border-color:#a8c4f2;background:#f4f8ff}.status-row{display:flex;justify-content:space-between;font-weight:700;font-size:.9rem;color:var(--muted)}.game-head{display:flex;justify-content:flex-start}.abort-mini{border:0;background:transparent;color:#5772a3;font-weight:700;font-size:.9rem;padding:2px 0}.abort-mini:hover{color:#2f4e80}.abort-mini.abort-danger{color:#c7354f;font-weight:800}.abort-mini.abort-danger:hover{color:#a6253d}.check-btn{margin-top:8px}.game-body{display:grid;gap:12px;min-height:0}.game-clock-col,.game-input-col{min-height:0;display:grid;gap:10px}.clock-wrap{display:flex;justify-content:center;align-items:center;flex:1;min-height:0}.clock{width:min(76vw,520px);max-height:100%;filter:drop-shadow(0 12px 24px rgba(19,35,67,.18));user-select:none;-webkit-user-select:none;touch-action:none}.daypart-wrap{display:grid}.daypart-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.daypart-chip{border:1px solid #cfe0fb;background:#eef3ff;border-radius:12px;min-height:46px;display:flex;align-items:center;justify-content:center;gap:9px;color:#2d4a7b;font-weight:800;padding:0 10px}.daypart-chip.active.day{border-color:#f0c458;background:#fff4d7;color:#7a5710}.daypart-chip.active.night{border-color:#8eaef2;background:#e9f0ff;color:#294682}.daypart-legend .daypart-chip.day.active{border-color:#f0c458;background:#fff4d7;color:#7a5710}.daypart-legend .daypart-chip.night.active{border-color:#8eaef2;background:#e9f0ff;color:#294682}.daypart-icon{font-size:1.25rem;line-height:1}.daypart-range{opacity:.9;font-size:.95em}.clock-face{fill:url(#faceGlow);stroke:#cad9f4;stroke-width:3.5}.clock-inner-ring{fill:none;stroke:#d9e4f8;stroke-width:1.6}.tick{stroke:#8394b2;opacity:.9}.hour-number{font-size:20px;font-weight:800;fill:#334464;user-select:none;-webkit-user-select:none;pointer-events:none}.hour-hand{stroke:#1f3359;stroke-width:7;stroke-linecap:round}.minute-hand{stroke:#0a84ff;stroke-width:5;stroke-linecap:round}.clock-center{fill:#1f3359}.drag-hit{fill:#0a84ff14;stroke:#0a84ff8c;stroke-width:1.2;touch-action:none;user-select:none;-webkit-user-select:none}.keypad-block{display:grid;gap:8px}.time-input{text-align:center;font-size:1.45rem;font-weight:800;letter-spacing:.08em;transition:background-color .2s ease,border-color .2s ease}.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.key{border:1px solid #cddcf7;background:linear-gradient(180deg,#f8fbff,#e8f1ff);color:#1a3569;border-radius:12px;min-height:44px;font-size:1.08rem;font-weight:800;box-shadow:var(--shadow-sm);transition:transform .08s ease,background-color .12s ease,box-shadow .12s ease;user-select:none;-webkit-user-select:none}.key:active,.key.pressed{transform:translateY(1px) scale(.98);background:linear-gradient(180deg,#ddecff,#cce2ff);box-shadow:0 2px 8px #0a56b433}.target-time,.set-preview,.result,.wait,.session-meta,.leaderboard{background:#ffffffa6;border:1px solid rgba(208,222,247,.95);border-radius:14px;padding:9px}.target-time{font-weight:800;color:#1b3f80}.halfday-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.halfday-btn{border:1px solid #cfe0fb;background:#f3f8ff;border-radius:12px;min-height:38px;font-weight:800;color:#355582;user-select:none;-webkit-user-select:none}.halfday-btn.active.day{border-color:#f0c458;background:#fff4d7;color:#7a5710}.halfday-btn.active.night{border-color:#8eaef2;background:#e9f0ff;color:#294682}.session-meta{display:grid;justify-items:center;gap:5px}.qr{width:148px;height:148px;border-radius:10px;border:1px solid #cfdef7;background:#fff}.small{color:var(--muted);font-size:.84rem;word-break:break-all}.small.success{color:#1b6f4a;font-weight:700}a{color:#1f5fc2}a:hover{color:#144892}.leaderboard{display:grid;gap:7px}.class-progress{display:grid;gap:8px;background:#ffffffb8;border:1px solid #d3e2fb;border-radius:14px;padding:10px}.class-progress-head{display:flex;justify-content:space-between;gap:8px;align-items:center;color:#27497a}.player-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;background:#fffc;border:1px solid #d6e3f8}.player-row span{display:flex;align-items:center;gap:8px}.connection-state{display:inline-flex;align-items:center;justify-content:center;min-width:54px;border-radius:999px;padding:2px 8px;font-size:.72rem;font-style:normal;font-weight:800}.connection-state.online{background:#e9fff2;border:1px solid #9cdebd;color:#156c47}.connection-state.offline{background:#f1f4fa;border:1px solid #c9d5ea;color:#556684}.player-actions{display:inline-flex;align-items:center;gap:8px}.kick-btn{border:1px solid #efb3be;background:#fff4f6;color:#a52840;border-radius:10px;min-height:28px;padding:2px 10px;font-weight:800}.kick-btn:hover{border-color:#e28799;background:#ffe9ee}.answer-flash{border-radius:12px;padding:9px 10px;text-align:center;font-weight:900}.answer-flash.correct{background:#e9fff2;border:1px solid #9cdebd;color:#12724a}.answer-flash.wrong{background:#ffedf0;border:1px solid #ef98a9;color:#a72b42}.submit-state{display:inline-flex;align-items:center;justify-content:center;min-width:48px;border-radius:999px;padding:2px 8px;font-size:.74rem;font-style:normal;font-weight:800}.submit-state.done{background:#e8fff1;border:1px solid #9bdcbb;color:#176745}.submit-state.pending{background:#fff4e3;border:1px solid #f1cd94;color:#7d4f13}.final-board{display:grid;gap:10px;background:#ffffffb8;border:1px solid #d3e2fb;border-radius:14px;padding:10px}.final-scroll-hint{display:none;color:#57709c;font-weight:700;font-size:.82rem}.final-list{display:grid;gap:7px;max-height:380px;overflow:auto}.player-row.mine{border-color:#87b6ff;background:#edf5ff}.final-rank{display:inline-flex;align-items:center;gap:6px;min-width:54px}.rank-pos{font-weight:900;color:#173968}.rank-icon{font-size:.95rem;line-height:1}.class-finish{display:grid;gap:10px}.my-placement{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid #cfe0fb;background:#eef5ff;border-radius:12px;padding:10px;font-weight:800;color:#234273}.error{color:var(--danger);font-weight:700}.time-input.feedback-correct,.set-preview.feedback-correct{border-color:#52c487;background:#e9fff2}.time-input.feedback-wrong,.set-preview.feedback-wrong{border-color:#ec6a7e;background:#ffedf0}.clock-wrap.feedback-correct .clock-face{stroke:#57c58a}.clock-wrap.feedback-wrong .clock-face{stroke:#ec6a7e}.hint-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0c172f85;display:grid;place-items:center;padding:14px;z-index:10}.hint-card{width:min(480px,100%);background:#fff;border-radius:16px;border:1px solid #d5e3fb;padding:14px;display:grid;gap:10px;box-shadow:0 16px 34px #0a142859}.hint-title{font-size:1.25rem;font-weight:900;color:#173968;text-align:center}.hint-sub{font-weight:700;color:#44608e;text-align:center}@media (max-width: 760px){.app{padding:6px;gap:6px}.site-footer{font-size:.82rem;gap:10px;padding-top:2px}h1{font-size:2rem}.help-link{width:30px;height:30px;font-size:.95rem}.clock{width:min(31vh,170px)}.panel,.game{border-radius:18px;padding:6px;gap:4px;overflow:auto}.status-row{font-size:.76rem}.game-body{gap:4px}.key{min-height:38px;font-size:1rem}.mode-picker{grid-template-columns:1fr}.choice-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.choice-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.time-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.time-input{padding:8px;font-size:1.14rem}.primary,.secondary{padding:8px;min-height:36px}.daypart-chip{min-height:28px;font-size:.8rem;padding:0 6px}.hint-card{padding:10px;gap:8px}.game-input-col{gap:6px}.subnav button,nav button{padding:8px;font-size:.95rem}.back-to-main{padding:7px 10px;font-size:.9rem}.app.in-game h1{font-size:1.45rem}.app.in-game .panel,.app.in-game .game{padding:5px;gap:3px}.app.in-game .game-body{flex:0;display:grid;min-height:0;align-content:start;gap:4px}.app.in-game .game-read-grid .game-clock-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:228px;gap:8px}.app.in-game .game-read-grid .clock-wrap{flex:0 0 auto;min-height:150px}.app.in-game .game-set-grid .game-clock-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:286px;gap:8px}.app.in-game .game-set-grid .clock-wrap{flex:0 0 auto;min-height:236px}.app.in-game .game-set-grid .clock{width:min(78vw,280px)}.app.in-game .game-clock-col{gap:6px}.app.in-game .status-row{font-size:.74rem}.app.in-game .clock{width:min(31vh,210px)}.app.in-game .daypart-chip{min-height:26px;font-size:.76rem}.app.in-game .time-input{font-size:.92rem;padding:5px}.app.in-game .key{min-height:40px;font-size:1rem}.app.in-game .game-input-col{margin-top:0;gap:5px}.app.in-game .primary{min-height:40px;padding:8px;box-shadow:none;margin-top:0}}@media (min-width: 820px){.game-read-grid,.game-set-grid{grid-template-columns:1.08fr 1fr;align-items:stretch}.game-read-grid .clock,.game-set-grid .clock{width:min(46vw,620px)}.game-input-col{align-content:start}}@media (max-width: 760px) and (max-height: 760px){.app.in-game{gap:4px}.app.in-game .site-footer{display:none}.app.in-game h1{font-size:1.28rem}.app.in-game .panel,.app.in-game .game{padding:4px;gap:2px;overflow:hidden}.app.in-game .status-row{font-size:.68rem}.app.in-game .game-read-grid .game-clock-col{min-height:176px;gap:4px}.app.in-game .game-read-grid .clock-wrap{min-height:126px}.app.in-game .game-set-grid .game-clock-col{min-height:230px;gap:4px}.app.in-game .game-set-grid .clock-wrap{min-height:176px}.app.in-game .game-set-grid .clock{width:min(72vw,225px)}.app.in-game .clock{width:min(24vh,170px)}.app.in-game .daypart-chip{min-height:22px;font-size:.72rem}.app.in-game .time-input{padding:4px;font-size:.9rem}.app.in-game .key{min-height:34px;font-size:.92rem}.app.in-game .primary{min-height:34px;padding:6px}}.daypart-svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.time-slider-wrap{display:grid;gap:8px}.time-slider{width:100%;display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;box-shadow:none;height:8px;border-radius:999px;background:linear-gradient(to right,#0a84ff 0%,#0a84ff var(--pct),#d8e6fb var(--pct),#d8e6fb 100%);outline:none}.time-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#0a84ff;border:2px solid #fff;box-shadow:0 4px 14px #0a56b459;cursor:pointer}.time-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#0a84ff;border:2px solid #fff;box-shadow:0 4px 14px #0a56b459;cursor:pointer}.time-slider-marks{position:relative;height:18px;color:#5f7399;font-weight:700;font-size:.84rem;--thumb-size: 22px}.time-slider-marks span{position:absolute;top:0;transform:translate(-50%)}.time-slider-marks .m-start{left:calc(var(--thumb-size) / 2);transform:translate(-50%)}.time-slider-marks .m-30{left:calc((100% - var(--thumb-size)) * .25 + var(--thumb-size) / 2)}.time-slider-marks .m-60{left:calc((100% - var(--thumb-size)) * .625 + var(--thumb-size) / 2)}.time-slider-marks .m-end{left:calc(100% - var(--thumb-size) / 2);transform:translate(-50%)}.result-screen{display:grid;gap:12px;background:#ffffffb3;border:1px solid #d5e3fb;border-radius:18px;padding:14px}.result-banner{border-radius:12px;padding:8px 10px;font-weight:900;text-align:center}.result-banner.ok{background:#e9fff2;border:1px solid #9cdebd;color:#13724a}.result-banner.warn{background:#fff4e5;border:1px solid #f2c480;color:#815418}.result-score{display:grid;justify-items:center;gap:2px}.big-score{font-size:clamp(2rem,1.4rem + 2vw,2.8rem);font-weight:900;letter-spacing:-.02em}.result-sub{color:#4f638c;font-weight:700}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.result-tile{background:#f2f7ff;border:1px solid #d5e3fb;border-radius:12px;padding:10px;display:grid;gap:4px}.result-tile span{color:#5f7399;font-weight:700;font-size:.85rem}.result-tile strong{color:#1e386a;font-size:1.08rem}.result-message{background:#eef5ff;border:1px solid #d4e3fb;color:#2f4e7e;border-radius:12px;padding:10px;font-weight:800;text-align:center}.result-actions{display:grid;gap:8px}@media (max-width: 760px){.result-grid{grid-template-columns:1fr}.switch-label{min-width:180px}}@media (max-width: 760px){.final-scroll-hint{display:block}}