:root{--bg-primary: #e8f4ff;--bg-gradient: linear-gradient(180deg, #d6ecff 0%, #c8f0e6 100%);--card-bg: #ffffff;--card-border: #b8dcf0;--text-primary: #1a3a5c;--text-secondary: #5c7a96;--accent: #1a7ad9;--accent-2: #ff8c1a;--accent-3: #00c4a8;--accent-4: #ffc83d;--primary-shadow: #1559a8;--secondary-shadow: #cc6f0f;--tertiary-shadow: #008f7a;--correct: #2ecc63;--correct-shadow: #1f9e48;--wrong: #ff4d4d;--wrong-shadow: #cc2828;--shadow-soft: 0 4px 0 rgba(26, 58, 92, .15);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{background:var(--bg-gradient);color:var(--text-primary);font-family:Hiragino Maru Gothic ProN,"M PLUS Rounded 1c",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;justify-content:center;align-items:center;-webkit-text-size-adjust:100%}#app{width:100%;max-width:460px;height:100dvh;display:flex;flex-direction:column;padding-left:var(--safe-left);padding-right:var(--safe-right);overflow:hidden}button{font-family:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}.screen{display:flex;flex-direction:column;height:100%;padding:clamp(12px,4vw,20px);padding-top:calc(clamp(12px,4vw,20px) + var(--safe-top));padding-bottom:calc(clamp(12px,4vw,20px) + var(--safe-bottom))}.title-screen{justify-content:flex-start;align-items:center;gap:clamp(16px,4vh,28px);padding-top:calc(clamp(28px,7vh,56px) + var(--safe-top))}.title{font-size:clamp(1.3rem,6.5vw,1.9rem);font-weight:900;color:var(--accent);white-space:nowrap;text-shadow:2px 2px 0 #ffffff,4px 4px 0 rgba(26,122,217,.25);letter-spacing:.02em}.subtitle{font-size:clamp(.85rem,3.5vw,1rem);font-weight:700;color:var(--text-secondary);text-align:center;line-height:1.5}.range-section{width:100%}.range-label{font-size:clamp(.9rem,3.5vw,1rem);font-weight:700;color:var(--text-primary);margin-bottom:14px;text-align:center}.range-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,2.5vw,12px)}.range-btn{padding:clamp(14px,4vw,18px) 8px;border-radius:16px;font-size:clamp(.95rem,4vw,1.1rem);font-weight:800;background:var(--card-bg);color:var(--text-primary);transition:transform .1s,box-shadow .1s;text-align:center;box-shadow:var(--shadow-soft);border:3px solid transparent}.range-btn:nth-child(1){border-color:#4dd2ff}.range-btn:nth-child(2){border-color:#ffb84d}.range-btn:nth-child(3){border-color:#00c4a8}.range-btn:nth-child(4){border-color:#ffc83d}.range-btn:nth-child(5){border-color:#2ecc63}.range-btn:nth-child(6){border-color:#6a7fff}.range-btn:nth-child(7){border-color:#4dd2ff}.range-btn:nth-child(8){border-color:#ffb84d}.range-btn:nth-child(9){border-color:#00c4a8}.range-btn:active{transform:translateY(2px);box-shadow:0 2px #1a3a5c26}.range-btn.all-btn{grid-column:1 / -1;background:linear-gradient(135deg,#1a7ad9,#00c4a8);color:#fff;border-color:transparent;box-shadow:0 4px 0 var(--primary-shadow)}.range-btn.all-btn:active{box-shadow:0 2px 0 var(--primary-shadow)}.app-footer{font-size:clamp(.7rem,2.8vw,.8rem);font-weight:600;color:var(--text-secondary);text-align:center;margin-top:auto;padding-top:16px}.app-footer a{color:var(--accent);text-decoration:none;font-weight:800}.app-footer a:hover{text-decoration:underline}.game-screen{padding:0;gap:0}.game-header{flex-shrink:0;padding:calc(clamp(18px,3vh,32px) + var(--safe-top)) clamp(14px,4vw,20px) 10px;position:relative}.quit-btn{position:absolute;top:calc(clamp(8px,1.5vh,14px) + var(--safe-top));right:clamp(10px,3vw,16px);width:36px;height:36px;border-radius:50%;border:2px solid var(--card-border);background:var(--card-bg);color:var(--text-secondary);font-size:1.05rem;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);transition:transform .05s,box-shadow .05s}.quit-btn:active{transform:translateY(2px);box-shadow:0 1px #1a3a5c26}.game-title-text{font-size:clamp(1.2rem,5.5vw,1.6rem);font-weight:900;color:var(--accent);text-align:center;text-shadow:2px 2px 0 #ffffff,4px 4px 0 rgba(26,122,217,.2);letter-spacing:.02em}.game-range-text{font-size:clamp(.7rem,3vw,.85rem);font-weight:700;color:var(--text-secondary);text-align:center;margin-top:4px;margin-bottom:clamp(10px,2vh,16px)}.status-section{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;padding:0 4px}.status-value{font-size:clamp(1rem,4vw,1.2rem);font-weight:900;color:var(--text-primary);font-variant-numeric:tabular-nums}.progress-bar-container{width:100%;height:10px;background:var(--card-bg);border-radius:5px;overflow:hidden;border:2px solid var(--card-border)}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#00c4a8,#1a7ad9);transition:width .3s ease-out}.problem-area{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(10px,2.5vh,18px);padding:clamp(12px,3vh,22px) clamp(12px,4vw,20px)}.problem{font-size:clamp(1.8rem,8vw,2.6rem);font-weight:900;letter-spacing:.05em;color:var(--text-primary);text-shadow:2px 2px 0 #ffffff,4px 4px 0 rgba(26,122,217,.2);white-space:nowrap;line-height:1.1}.input-display{font-size:clamp(2rem,9vw,2.8rem);font-weight:900;min-width:clamp(160px,50vw,200px);min-height:clamp(60px,10vh,78px);padding:8px 24px;text-align:center;background:var(--card-bg);border-radius:16px;line-height:1.2;color:var(--accent);border:4px solid var(--accent-3);box-shadow:var(--shadow-soft);font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center}.input-display.empty{color:var(--text-secondary);opacity:.5}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.8vw,10px);padding:clamp(6px,2vw,12px) clamp(8px,3vw,14px) 0;flex-shrink:0}.numpad-btn{height:clamp(44px,7.5vh,66px);border-radius:14px;font-size:clamp(1.2rem,5vw,1.55rem);font-weight:900;background:var(--card-bg);color:var(--text-primary);border:3px solid var(--card-border);display:flex;align-items:center;justify-content:center;box-shadow:0 4px #1a3a5c1f;transition:transform .05s,box-shadow .05s}.numpad-btn:active{transform:translateY(2px);box-shadow:0 2px #1a3a5c1f}.numpad-btn.delete-btn{background:linear-gradient(135deg,#ff8c1a,#ffb84d);color:#fff;border-color:transparent;box-shadow:0 4px 0 var(--secondary-shadow)}.numpad-btn.delete-btn:active{box-shadow:0 2px 0 var(--secondary-shadow)}.numpad-btn.zero-btn{grid-column:1 / span 2;aspect-ratio:auto}.submit-btn-large{margin:clamp(8px,1.8vh,14px) clamp(8px,3vw,14px) clamp(8px,1.8vh,14px);margin-bottom:calc(clamp(8px,1.8vh,14px) + var(--safe-bottom));padding:clamp(12px,3vh,18px);border-radius:16px;border:none;font-size:clamp(1.05rem,4.5vw,1.3rem);font-weight:900;background:linear-gradient(135deg,#1a7ad9,#00c4a8);color:#fff;flex-shrink:0;box-shadow:0 5px 0 var(--primary-shadow);letter-spacing:.1em}.submit-btn-large:active{transform:translateY(3px);box-shadow:0 2px 0 var(--primary-shadow)}@keyframes flash-correct{0%{background-color:var(--correct);border-color:var(--correct-shadow);color:#fff}to{background-color:var(--card-bg);border-color:var(--accent-3);color:var(--accent)}}@keyframes flash-wrong{0%,50%{background-color:var(--wrong);border-color:var(--wrong-shadow);color:#fff;transform:translate(-6px)}25%,75%{transform:translate(6px)}to{background-color:var(--card-bg);border-color:var(--accent-3);color:var(--accent);transform:translate(0)}}.feedback-correct{animation:flash-correct .4s ease-out}.feedback-wrong{animation:flash-wrong .4s ease-out}.result-screen{justify-content:flex-start;align-items:center;gap:clamp(18px,3.5vh,28px);padding-top:calc(clamp(32px,7vh,56px) + var(--safe-top))}.result-title{font-size:clamp(1.6rem,7vw,2.2rem);font-weight:900;color:var(--accent);text-shadow:2px 2px 0 #ffffff,4px 4px 0 rgba(26,122,217,.25)}.big-time{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:-10px}.big-time-value{font-size:clamp(3.5rem,17vw,5.5rem);font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:2px 2px 0 #ffffff,4px 4px 0 rgba(26,122,217,.25);line-height:1}.big-time-unit{font-size:clamp(1.2rem,5vw,1.7rem);font-weight:900;color:var(--accent)}.big-time-label{font-size:clamp(.85rem,3.5vw,1rem);font-weight:700;color:var(--text-secondary);margin-top:-16px}.result-stats{display:flex;flex-direction:column;gap:clamp(8px,1.8vh,14px);width:100%;align-items:stretch}.stat-item{display:flex;justify-content:space-between;align-items:center;background:var(--card-bg);border-radius:16px;padding:clamp(12px,3vw,18px) clamp(16px,5vw,24px);border:3px solid var(--card-border);box-shadow:var(--shadow-soft)}.stat-label{font-size:clamp(.9rem,3.8vw,1.05rem);font-weight:800;color:var(--text-secondary)}.stat-value{font-size:clamp(1.6rem,7vw,2.2rem);font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}.stat-value small{font-size:clamp(.85rem,3.5vw,1rem);font-weight:700;margin-left:2px}.result-buttons{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:auto;padding-bottom:var(--safe-bottom)}.action-btn{width:100%;padding:clamp(14px,4vw,20px);border-radius:16px;border:none;font-size:clamp(1rem,4.5vw,1.2rem);font-weight:900;letter-spacing:.05em}.action-btn:active{transform:translateY(3px)}.primary-btn{background:linear-gradient(135deg,#1a7ad9,#00c4a8);color:#fff;box-shadow:0 5px 0 var(--primary-shadow)}.primary-btn:active{box-shadow:0 2px 0 var(--primary-shadow)}.secondary-btn{background:var(--card-bg);color:var(--text-primary);border:3px solid var(--card-border);box-shadow:var(--shadow-soft)}.secondary-btn:active{box-shadow:0 1px #1a3a5c1f}@media (max-height: 640px){.title-screen{padding-top:calc(16px + var(--safe-top));gap:12px}.range-btn{padding:10px 8px}.game-header{padding-top:calc(14px + var(--safe-top))}.quit-btn{top:calc(6px + var(--safe-top));width:32px;height:32px}.numpad-btn{height:clamp(38px,6.5vh,54px)}.input-display{min-height:52px}.problem{font-size:clamp(1.6rem,7vw,2.2rem)}}