*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}#root{isolation:isolate}button{appearance:none}.app{background:linear-gradient(140deg,#fff9c4 0%,#fce4ec 100%);flex-direction:column;min-height:100dvh;font-family:"M PLUS Rounded 1c",sans-serif;display:flex}.header{flex-direction:column;align-items:center;gap:10px;padding:20px 16px 12px;display:flex}.title{color:#7b1fa2;letter-spacing:.06em;text-shadow:2px 3px #7b1fa226;margin:0;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:900}.score-area{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.score-badge{color:#f57f17;background:#fff;border-radius:999px;padding:6px 22px;font-size:clamp(1rem,3vw,1.4rem);font-weight:800;box-shadow:0 3px 8px #0000001f}.streak-badge{color:#e65100;background:#fff3e0;border-radius:999px;padding:6px 18px;font-size:clamp(.9rem,2.5vw,1.2rem);font-weight:800;animation:.3s cubic-bezier(.175,.885,.32,1.275) pop-in;box-shadow:0 3px 8px #0000001f}.main{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:16px;display:flex}.problem-card{background:#fff;border-radius:28px;flex-direction:column;align-items:center;gap:16px;width:min(90vw,580px);padding:28px 24px 32px;transition:background-color .35s;display:flex;box-shadow:0 8px 32px #00000021,0 2px 8px #00000012}.problem-card.correct{background-color:#e8f5e9;animation:.55s cubic-bezier(.36,.07,.19,.97) bounce}.problem-card.wrong{background-color:#ffebee;animation:.55s cubic-bezier(.36,.07,.19,.97) shake}.feedback{opacity:0;min-height:2.6rem;font-size:clamp(1.2rem,3.5vw,1.8rem);font-weight:900;line-height:2.6rem;transition:opacity .2s}.feedback.visible{opacity:1}.feedback.correct{color:#2e7d32}.feedback.wrong{color:#c62828}.feedback.hint{color:#e65100}.kuku-equation{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.kuku-eq-num{color:#1a237e;font-size:clamp(2.6rem,8vw,4.5rem);font-weight:900;line-height:1.1}.kuku-eq-sym{color:#6a1b9a;font-size:clamp(2.2rem,7vw,4rem);font-weight:900;line-height:1.1}.kuku-answer-box{color:#1565c0;background:#e3f2fd;border:3px dashed #90caf9;border-radius:18px;justify-content:center;align-items:center;min-width:clamp(80px,14vw,120px);height:clamp(70px,12vw,100px);padding:0 16px;font-size:clamp(2.6rem,8vw,4.5rem);font-weight:900;transition:background-color .3s,border-color .3s,color .3s;display:flex}.kuku-answer-box.active{background:#bbdefb;border-color:#1565c0;animation:1.2s ease-in-out infinite cursor-pulse}.kuku-answer-box.filled{border-style:solid;border-color:#1565c0}.kuku-answer-box.correct{color:#2e7d32;background:#c8e6c9;border-style:solid;border-color:#2e7d32}.kuku-answer-box.wrong{color:#c62828;background:#ffcdd2;border-style:solid;border-color:#c62828}.problem-vertical{flex-direction:column;gap:2px;display:inline-flex}.vrow{justify-content:flex-end;align-items:center;gap:6px;display:flex}.vline{border:none;border-top:5px solid #1a237e;border-radius:3px;margin:6px 0}.vop-hidden{visibility:hidden}.num,.op{font-size:clamp(2.2rem,7vw,4rem);font-weight:900;line-height:1.2}.num{color:#1a237e;text-align:right;min-width:2ch}.op{color:#6a1b9a;text-align:center;flex-shrink:0;width:1.4em}.answer-slot{text-align:right;color:#1565c0;background:#e3f2fd;border:3px dashed #1565c0;border-radius:14px;min-width:2ch;padding:2px 12px;font-size:clamp(2.2rem,7vw,4rem);font-weight:900;line-height:1.3;transition:background-color .3s,border-color .3s,color .3s}.answer-slot.correct{color:#2e7d32;background:#c8e6c9;border-style:solid;border-color:#2e7d32}.answer-slot.wrong{color:#c62828;background:#ffcdd2;border-style:solid;border-color:#c62828}.digit-cells{gap:8px;display:flex}.num-cell{color:#1a237e;justify-content:center;align-items:center;width:clamp(52px,8.5vw,78px);height:clamp(60px,10vw,88px);font-size:clamp(2.2rem,7vw,4rem);font-weight:900;line-height:1;display:flex}.digit-boxes-wrapper{flex-direction:column;align-items:stretch;gap:4px;display:inline-flex}.digit-boxes{justify-content:flex-end;gap:8px;display:flex}.kuku-equation .digit-boxes{gap:10px}.digit-box{text-align:center;color:#1565c0;background:#e3f2fd;border:3px dashed #90caf9;border-radius:14px;justify-content:center;align-items:center;width:clamp(52px,8.5vw,78px);height:clamp(60px,10vw,88px);font-size:clamp(2.2rem,7vw,4rem);font-weight:900;line-height:1;transition:background-color .3s,border-color .3s,color .3s;display:flex}.digit-box.active{background:#bbdefb;border-color:#1565c0;animation:1.2s ease-in-out infinite cursor-pulse}.digit-box.filled{border-style:solid;border-color:#1565c0}.digit-box.correct{color:#2e7d32;background:#c8e6c9;border-style:solid;border-color:#2e7d32}.digit-box.wrong{color:#c62828;background:#ffcdd2;border-style:solid;border-color:#c62828}.digit-box.wrong[data-pos="0"]{color:#2e7d32;background:#e8f5e9;border-color:#66bb6a}.digit-box.wrong[data-pos="1"]{color:#e65100;background:#fff3e0;border-color:#ffa726}.digit-box.wrong[data-pos="2"]{color:#1565c0;background:#e3f2fd;border-color:#64b5f6}.hissan-container{flex-direction:column;align-items:center;gap:16px;width:100%;display:flex;position:relative}.hint-connector-svg{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible}.hint-lines{flex-direction:column;gap:14px;width:100%;display:flex}.hint-label{white-space:nowrap;font-size:clamp(.75rem,2vw,.9rem);font-weight:700}.hint-detail{color:#4a148c;font-size:clamp(.9rem,2.5vw,1.1rem);font-weight:700}.hint-line{border-radius:14px;flex-wrap:wrap;align-items:baseline;gap:4px;margin-top:12px;padding:10px 14px;display:flex;position:relative}.hint-line:before{content:"";top:-10px;left:var(--arrow-left,20px);border:10px solid #0000;border-top:0;width:0;height:0;position:absolute}.hint-line.hint-pos-0{background:#e8f5e9;border:2px solid #66bb6a}.hint-line.hint-pos-0:before{border-bottom-color:#66bb6a}.hint-line.hint-pos-0 .hint-label{color:#2e7d32}.hint-line.hint-pos-1{background:#fff3e0;border:2px solid #ffa726}.hint-line.hint-pos-1:before{border-bottom-color:#ffa726}.hint-line.hint-pos-1 .hint-label{color:#e65100}.hint-line.hint-pos-2{background:#e3f2fd;border:2px solid #64b5f6}.hint-line.hint-pos-2:before{border-bottom-color:#64b5f6}.hint-line.hint-pos-2 .hint-label{color:#1565c0}.hint-done-btn{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:linear-gradient(175deg,#ffb74d,#f57c00);border:none;border-radius:999px;padding:16px 40px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:clamp(1.1rem,3vw,1.4rem);font-weight:900;transition:transform 80ms,box-shadow 80ms;box-shadow:0 5px #00000038}.hint-done-btn:active{transform:translateY(4px);box-shadow:0 1px #00000038}.digit-labels{justify-content:flex-end;gap:8px;display:flex}.digit-label{text-align:center;color:#9e9e9e;letter-spacing:.03em;width:clamp(52px,8.5vw,78px);font-size:clamp(.65rem,1.8vw,.8rem);font-weight:700}.numpad{grid-template-columns:repeat(3,1fr);gap:12px;width:min(90vw,420px);display:grid}.digit-btn,.delete-btn,.submit-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:none;border-radius:18px;height:clamp(60px,10vw,80px);font-family:"M PLUS Rounded 1c",sans-serif;font-weight:900;transition:transform 80ms,box-shadow 80ms;box-shadow:0 5px #00000038}:is(.digit-btn,.delete-btn,.submit-btn):active:not(:disabled){transform:translateY(4px);box-shadow:0 1px #00000038}:is(.digit-btn,.delete-btn,.submit-btn):disabled{opacity:.38;cursor:default}.digit-btn{color:#fff;background:linear-gradient(175deg,#7986cb,#5c6bc0);font-size:clamp(1.5rem,4vw,2rem)}.delete-btn{color:#fff;background:linear-gradient(175deg,#ff8a65,#f4511e);font-size:clamp(1rem,2.8vw,1.3rem)}.submit-btn{color:#fff;background:linear-gradient(175deg,#66bb6a,#388e3c);font-size:clamp(1rem,2.8vw,1.3rem)}@keyframes bounce{0%,to{transform:scale(1)}20%{transform:scale(1.04)}40%{transform:scale(.98)}60%{transform:scale(1.02)}80%{transform:scale(.99)}}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-9px)}30%{transform:translate(9px)}45%{transform:translate(-6px)}60%{transform:translate(6px)}75%{transform:translate(-3px)}90%{transform:translate(3px)}}@keyframes pop-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes cursor-pulse{0%,to{background:#bbdefb}50%{background:#90caf9}}.level-heading{color:#6a1b9a;text-align:center;margin:0 0 16px;font-size:clamp(1.2rem,3.5vw,1.6rem);font-weight:900}.level-grid{grid-template-columns:1fr 1fr;gap:16px;width:min(90vw,500px);display:grid}.level-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:none;border-radius:22px;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;font-family:"M PLUS Rounded 1c",sans-serif;font-weight:900;transition:transform 80ms,box-shadow 80ms;display:flex;box-shadow:0 6px #0003}.level-btn:active{transform:translateY(4px);box-shadow:0 2px #0003}.level-btn.easy{color:#fff;background:linear-gradient(160deg,#a5d6a7,#43a047)}.level-btn.hard{color:#fff;background:linear-gradient(160deg,#9fa8da,#3949ab)}.level-icon{font-size:clamp(1.8rem,5vw,2.4rem)}.level-label{text-align:center;white-space:pre-line;font-size:clamp(.9rem,2.5vw,1.15rem);line-height:1.4}.progress-area{flex-wrap:wrap;justify-content:center;gap:7px;display:flex}.progress-dot{background:#00000026;border-radius:50%;width:18px;height:18px;transition:background-color .3s}.progress-dot.filled{background:#f57f17;box-shadow:0 0 0 2px #fff,0 0 0 4px #f57f17}.clear-card{background:#fff;border-radius:32px;flex-direction:column;align-items:center;gap:16px;padding:48px 40px;animation:.5s cubic-bezier(.175,.885,.32,1.275) pop-in;display:flex;box-shadow:0 10px 40px #00000026,0 3px 10px #00000014}.clear-emoji{font-size:clamp(3rem,12vw,5rem);animation:.7s cubic-bezier(.36,.07,.19,.97) .3s both bounce}.clear-title{color:#f57f17;letter-spacing:.06em;font-size:clamp(2.2rem,8vw,3.5rem);font-weight:900}.clear-score{color:#2e7d32;font-size:clamp(1rem,3.5vw,1.5rem);font-weight:800}.retry-btn{cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:linear-gradient(175deg,#7986cb,#5c6bc0);border:none;border-radius:999px;margin-top:8px;padding:14px 40px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:clamp(1rem,3vw,1.3rem);font-weight:900;transition:transform 80ms,box-shadow 80ms;box-shadow:0 5px #00000038}.retry-btn:active{transform:translateY(4px);box-shadow:0 1px #00000038}.kuku-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;color:#fff;background:linear-gradient(160deg,#f48fb1,#c2185b);border:none;border-radius:22px;justify-content:center;align-items:center;gap:12px;width:min(90vw,500px);padding:20px 12px;font-family:"M PLUS Rounded 1c",sans-serif;font-weight:900;transition:transform 80ms,box-shadow 80ms;display:flex;box-shadow:0 6px #0003}.kuku-btn:active{transform:translateY(4px);box-shadow:0 2px #0003}.kuku-heading{color:#c2185b;margin:0;font-size:clamp(1.4rem,4vw,1.8rem);font-weight:900}.kuku-dan-heading{color:#6a1b9a;margin:0;font-size:clamp(1rem,3vw,1.3rem);font-weight:900}.kuku-dan-list{grid-template-columns:auto 1fr 1fr;align-items:center;gap:8px;width:min(90vw,400px);display:grid}.kuku-dan-list-col-label{color:#888;text-align:center;font-family:"M PLUS Rounded 1c",sans-serif;font-size:clamp(.75rem,2.2vw,.9rem);font-weight:900}.kuku-dan-label{color:#6a1b9a;white-space:nowrap;padding-right:8px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:clamp(1rem,3vw,1.2rem);font-weight:900}.kuku-order-btn,.kuku-shuffle-btn{cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:none;border-radius:14px;width:100%;padding:12px 4px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:clamp(.9rem,2.5vw,1.1rem);font-weight:900;transition:transform 80ms,box-shadow 80ms;box-shadow:0 4px #0003}:is(.kuku-order-btn,.kuku-shuffle-btn):active{transform:translateY(4px);box-shadow:0 0 #0003}.kuku-order-btn{background:linear-gradient(160deg,#9575cd,#5e35b1)}.kuku-shuffle-btn{background:linear-gradient(160deg,#f06292,#c2185b)}.back-btn{cursor:pointer;color:#555;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#00000014;border:none;border-radius:999px;padding:8px 24px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:clamp(.85rem,2.5vw,1rem);font-weight:800;transition:background-color .15s}.back-btn:hover{background:#00000024}.hint-btn{cursor:pointer;color:#1565c0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#64b5f633;border:none;border-radius:999px;padding:8px 24px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:clamp(.85rem,2.5vw,1rem);font-weight:800;transition:background-color .15s}.hint-btn:hover{background:#64b5f659}
