:root{--bg: #fff8f0;--surface: #ffffff;--primary: #ff6b35;--primary-dark: #e55a2b;--accent: #ffd166;--success: #00b894;--error: #d63031;--text: #2d3436;--text-muted: #636e72;--shadow: 0 8px 32px rgba(255, 107, 53, .15);--gold: #f9ca24;font-family:"M PLUS Rounded 1c",system-ui,sans-serif;line-height:1.6;color:var(--text);background:var(--bg)}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;min-height:100dvh;-webkit-tap-highlight-color:transparent}.app-shell{min-height:100vh;min-height:100dvh}.page{max-width:480px;margin:0 auto;padding:max(1.5rem,env(safe-area-inset-top)) max(1.5rem,env(safe-area-inset-right)) max(1.5rem,env(safe-area-inset-bottom)) max(1.5rem,env(safe-area-inset-left));min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:1.5rem}.home-topbar,.play-header-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.home-mute{display:flex;justify-content:flex-end}.home-topbar .eyebrow{margin-bottom:0}.play-header-row{width:100%}.play-header-row h1{flex:1}.home-page{position:relative;gap:.75rem;overflow:hidden}.home-page .site-footer{position:absolute;left:0;right:0;bottom:max(.5rem,env(safe-area-inset-bottom));margin:0;padding:0 1rem;border-top:none;z-index:2}.home-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;min-height:0;padding-bottom:2rem}.home-brand{text-align:center}.home-brand h1{font-size:clamp(1.6rem,7vw,2rem);line-height:1.25}.home-stage .mode-nav{width:100%;margin-top:.25rem}.home-stage .clock-character.hero{gap:.65rem}.home-stage .clock-character.hero .character-name{font-size:1.3rem}.eyebrow{font-size:.75rem;font-weight:700;color:var(--primary);letter-spacing:.1em;margin-bottom:.25rem}h1{font-size:1.75rem;font-weight:800;color:var(--primary)}.tagline{color:var(--text-muted);font-size:.95rem;margin-top:.35rem}.loading-text{text-align:center;color:var(--text-muted)}.status-error{color:var(--error);text-align:center;font-size:.9rem}.btn-primary,.btn-secondary,.choice-btn,.mute-btn{font-family:inherit;font-weight:700;border:none;border-radius:14px;cursor:pointer;transition:transform .15s,box-shadow .15s;touch-action:manipulation;min-height:48px;min-width:48px}.btn-primary{background:var(--primary);color:#fff;padding:.85rem 1.5rem;box-shadow:var(--shadow)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);background:var(--primary-dark)}.btn-secondary{background:var(--surface);color:var(--text-muted);padding:.85rem 1.5rem;border:2px solid #dfe6e9}.btn-large{display:block;width:100%;text-align:center;text-decoration:none;font-size:1.05rem}button:disabled,.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.mode-nav{display:flex;flex-direction:column;gap:.75rem}.clock-character{display:flex;flex-direction:column;align-items:center;gap:.5rem}.clock-character.compact{flex-direction:row;align-items:center;justify-content:center;gap:.85rem;width:100%;padding:.65rem .85rem;background:var(--surface);border-radius:16px;box-shadow:0 4px 16px #ff6b351f;border:2px solid rgba(255,107,53,.2)}.clock-character.compact .character-info{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;min-width:0;flex:0 1 auto}.clock-character.compact .character-name{font-size:1rem}.clock-character.compact .character-stats{justify-content:flex-start;font-size:.75rem;gap:.35rem .65rem}.clock-character.compact .character-body{flex-shrink:0}.clock-character.compact.level-3 .muscle,.clock-character.compact.level-4 .muscle,.clock-character.compact.level-5 .muscle,.clock-character.compact.level-6 .muscle,.clock-character.compact.level-7 .muscle{width:10px;height:20px}.clock-character.compact .arm-left{left:-4px}.clock-character.compact .arm-right{right:-4px}.clock-character.compact .aura{inset:-6px;border-width:2px}.character-body{position:relative;display:flex;align-items:center;justify-content:center}.character-info{display:flex;flex-direction:column;align-items:center;gap:.35rem}.character-name{font-weight:800;font-size:1.15rem}.character-stats{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;font-size:.8rem;color:var(--text-muted)}.streak{color:var(--primary);font-weight:700}.wrong-streak{color:var(--error);font-weight:700}.to-next{color:var(--text-muted)}.clock-character.level-1 .analog-clock circle{stroke-width:3;opacity:.85}.clock-character.level-2 .analog-clock circle{stroke-width:4}.clock-character.level-3 .analog-clock,.clock-character.level-4 .analog-clock,.clock-character.level-5 .analog-clock,.clock-character.level-6 .analog-clock,.clock-character.level-7 .analog-clock{filter:drop-shadow(0 4px 8px rgba(255,107,53,.3))}.clock-character.level-3 .muscle,.clock-character.level-4 .muscle,.clock-character.level-5 .muscle,.clock-character.level-6 .muscle,.clock-character.level-7 .muscle{position:absolute;width:18px;height:36px;background:var(--primary);border-radius:10px;top:50%}.clock-character .arm-left{left:-8px;transform:rotate(25deg)}.clock-character .arm-right{right:-8px;transform:rotate(-25deg)}.clock-character.level-5 .muscle,.clock-character.level-6 .muscle,.clock-character.level-7 .muscle{width:24px;height:44px}.clock-character.level-6 .analog-clock circle,.clock-character.level-7 .analog-clock circle{stroke:var(--gold);stroke-width:5}.clock-character.level-6 .aura,.clock-character.level-7 .aura{position:absolute;inset:-12px;border-radius:50%;border:3px dashed var(--gold);animation:spin 8s linear infinite;opacity:.6}.clock-character.level-7 .aura{border-style:solid;box-shadow:0 0 20px #f9ca24a6}.legend-crown{position:absolute;top:-28px;left:50%;z-index:2;color:var(--gold);font-size:1.6rem;transform:translate(-50%);text-shadow:0 2px 6px rgba(249,202,36,.6)}.mute-btn{background:var(--surface);border:2px solid #dfe6e9;font-size:1.25rem;padding:.5rem;border-radius:50%;line-height:1;flex-shrink:0}.level-up{position:relative;overflow:visible;background:linear-gradient(135deg,#fff3cd,#ffeaa7);border-radius:12px;padding:.75rem;margin-bottom:1rem}.evolution-burst{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.level-up-label{font-weight:800;color:var(--primary);font-size:1.1rem}.level-up-name{font-weight:700;font-size:1rem}.level-down{background:#f1f2f6;border-radius:12px;padding:.75rem;margin-bottom:1rem}.level-down-label{color:var(--text-muted);font-size:1.1rem;font-weight:800}.level-down-name{font-weight:700}.level-down-hint{color:var(--text-muted);font-size:.8rem;margin-top:.25rem}.burst-particle{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold)}@keyframes spin{to{transform:rotate(360deg)}}.analog-clock .hand{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}.play-header{display:flex;flex-direction:column;gap:.25rem}.back-link{color:var(--text-muted);text-decoration:none;font-size:.85rem}.play-header h1{font-size:1.25rem}.question-section{display:flex;flex-direction:column;gap:1rem}.question-prompt{text-align:center;font-size:clamp(1.05rem,4.5vw,1.2rem);font-weight:700;line-height:1.5}.answer-choices{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.choice-btn{background:var(--surface);color:var(--text);padding:1rem .75rem;font-size:clamp(.95rem,4vw,1.05rem);border:2px solid #dfe6e9;box-shadow:0 2px 8px #0000000d}.choice-btn:hover:not(:disabled){border-color:var(--primary);transform:translateY(-2px)}.choice-btn:active:not(:disabled){transform:scale(.97)}.time-calc-scene{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:.5rem;width:100%;padding:1rem .75rem;background:#eef2f7;border-radius:18px;border:2px solid #cbd5e1}.problem-clock-label{font-size:.75rem;font-weight:800;color:#475569;letter-spacing:.06em}.read-mode-label{text-align:center;margin-bottom:-.25rem}.play-page.time-mode{gap:1rem}.play-page.time-mode .question-section{flex:1}.time-pair{display:flex;align-items:center;gap:.75rem}.time-block{display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:.75rem;color:var(--text-muted);font-weight:700}.time-arrow{font-size:1.25rem;color:var(--primary);font-weight:800}.duration-hint{font-size:.9rem;color:var(--text-muted);font-weight:700}.result-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:100;animation:fadeIn .2s ease}.result-card{background:var(--surface);border-radius:20px;padding:2rem 1.5rem;text-align:center;max-width:320px;width:100%;box-shadow:0 16px 48px #0003;animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}.result-card.correct{border:3px solid var(--success)}.result-card.incorrect{border:3px solid var(--accent)}.result-title{font-size:2rem;font-weight:800;color:var(--primary)}.result-sub{margin:.5rem 0 1.25rem;color:var(--text-muted)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.analog-clock .hand{transition:none}}@media(max-width:380px){.answer-choices{grid-template-columns:1fr}.time-pair{flex-direction:column}.time-arrow{transform:rotate(90deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.site-footer{margin-top:1.5rem;padding-top:.75rem;border-top:1px solid #eceff1}.legal-page .site-footer{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}.site-footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem .75rem}.site-footer-link{font-size:.68rem;color:#b2bec3;text-decoration:none}.site-footer-link:hover{color:var(--text-muted);text-decoration:underline}.legal-page{gap:1rem;padding-bottom:.5rem}.legal-header h1{font-size:1.35rem;margin-top:.25rem}.legal-body{font-size:.88rem;color:var(--text);line-height:1.75}.legal-body h2{font-size:.95rem;font-weight:800;color:var(--text);margin:1.25rem 0 .5rem}.legal-body p{margin-bottom:.75rem}.legal-body ul{margin:0 0 .75rem 1.1rem}.legal-body li{margin-bottom:.35rem}.legal-body a{color:var(--primary)}.legal-updated{font-size:.8rem;color:var(--text-muted)}.legal-contact{font-size:1rem;font-weight:700}.legal-operator{margin-top:1.5rem;font-size:.8rem;color:var(--text-muted)}