:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius-s:14px;--radius-l:24px;--touch:48px;--font:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;--bg:#fff8f0;--surface:#fff;--text:#2b2340;--text-muted:#6b6380;--border:#f0e2d8;--shadow:0 10px 28px #ff787829;--accent-from:#ff8a5b;--accent-to:#ff5c8a;--accent-text:#fff;--banner:#fff1b8;--danger:#c92a4a;--voice-a:#ff5c8a;--voice-b:#2fa8ff;--lemon:#ffd93d;--blob-1:#ffc9a8;--blob-2:#fff3a0;--blob-3:#b8f2d0;--blob-opacity:.7;--note-color:#ff5c8a80}@media (prefers-color-scheme:dark){:root{--bg:#1a1530;--surface:#262040;--text:#f6f2ff;--text-muted:#b4abcf;--border:#3a3260;--shadow:0 10px 28px #00000059;--banner:#4a3b1c;--danger:#ff8fa3;--blob-1:#ff7a59;--blob-2:#b892ff;--blob-3:#2fa8ff;--blob-opacity:.22;--note-color:#ffd93d73}}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;font-size:16px;line-height:1.5}button,input{font:inherit;color:inherit}:focus-visible{outline-offset:2px;outline:3px solid #3b82f6}.screen{gap:var(--space-4);max-width:480px;min-height:100dvh;padding:calc(env(safe-area-inset-top) + var(--space-4)) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-4));flex-direction:column;margin:0 auto;display:flex}.spacer{flex:1}.topbar{min-height:var(--touch);justify-content:space-between;align-items:center;display:flex}.logo{letter-spacing:-.02em;margin:0;font-size:1.25rem;font-weight:800}.muted{color:var(--text-muted);margin:0;font-size:.875rem}.center{text-align:center}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--touch);padding:0 var(--space-4);border-radius:var(--radius-s);border:1px solid var(--border);background:var(--surface);cursor:pointer;touch-action:manipulation;font-weight:600;transition:transform .12s;display:inline-flex}.btn:active{transform:scale(.96)}.btn--primary{background:linear-gradient(135deg, var(--accent-from), var(--accent-to));min-height:58px;color:var(--accent-text);border:none;border-radius:999px;font-size:1.125rem;font-weight:800;position:relative;overflow:hidden;box-shadow:0 8px 20px #ff5c8a59}.btn--primary:after{content:"";background:linear-gradient(110deg,#0000 30%,#ffffff73 50%,#0000 70%);animation:3.2s ease-in-out 1s infinite shine;position:absolute;inset:0;transform:translate(-120%)}.btn--block{width:100%}.btn--ghost{background:0 0;border-color:#0000}.btn[aria-pressed=true]{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}.btn-stack{gap:var(--space-2);flex-direction:column;display:flex}.btn-row{gap:var(--space-2);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.btn-row .btn{padding:0 var(--space-2);min-width:0}.ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.hero{gap:var(--space-2);padding-top:var(--space-4);flex-direction:column;display:flex}.hero__title{letter-spacing:-.03em;margin:0;font-size:2rem;line-height:1.2}.field{gap:var(--space-1);flex-direction:column;display:flex}.field label{align-items:center;gap:var(--space-2);font-size:.9375rem;font-weight:700;display:flex}.field input{min-height:56px;padding:0 var(--space-4);border-radius:var(--radius-s);border:2px solid var(--border);background:var(--surface);box-shadow:var(--shadow);font-size:1.125rem;transition:border-color .2s,transform .2s}.field input:focus{outline:none;transform:translateY(-2px)}.field--a input:focus{border-color:var(--voice-a)}.field--b input:focus{border-color:var(--voice-b)}.field input[aria-invalid=true]{border-color:var(--danger)}.field__error{color:var(--danger);margin:0;font-size:.875rem}.dot{border-radius:50%;flex:none;width:12px;height:12px}.dot--a{background:var(--voice-a)}.dot--b{background:var(--voice-b)}.recent{gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.recent__header{justify-content:space-between;align-items:center;display:flex}.recent:focus{outline:none}.recent__item{box-shadow:var(--shadow);border-radius:999px;display:flex}.chip{min-height:44px;padding:0 var(--space-3);border:2px solid var(--border);background:var(--surface);cursor:pointer;touch-action:manipulation;font-size:.875rem;font-weight:600}.chip--main{border-right-width:1px;border-radius:999px 0 0 999px}.chip--remove{min-width:44px;padding:0 var(--space-2) 0 var(--space-1);color:var(--text-muted);border-left-width:1px;border-radius:0 999px 999px 0;font-size:1.125rem;line-height:1}.chip--remove:active{background:var(--border)}.btn--small{min-height:44px;padding:0 var(--space-2);color:var(--text-muted);font-size:.875rem}.banner{background:var(--banner);border-radius:var(--radius-s);padding:var(--space-3) var(--space-4);margin:0;font-weight:600}.banner--warn{border:1px solid var(--danger);color:var(--danger);background:0 0;font-size:.875rem;font-weight:500}.names{align-items:center;gap:var(--space-2);letter-spacing:-.02em;word-break:break-all;flex-wrap:wrap;margin:0;font-size:1.75rem;font-weight:800;line-height:1.25;display:flex}.names__a{color:var(--voice-a)}.names__b{color:var(--voice-b)}.roll{background:var(--surface);border-radius:var(--radius-l);padding:var(--space-3);box-shadow:var(--shadow)}.roll__bar{transform-box:fill-box;transform-origin:50%;transition:transform .12s,filter .12s}.roll__bar--active{filter:brightness(1.15)saturate(1.2);transform:scaleY(1.8)}.roll svg{width:100%;height:160px;display:block}.roll__playhead{stroke:var(--lemon);stroke-width:.9px;stroke-linecap:round}.score{text-align:center;margin:0}.score__value{background:linear-gradient(135deg, var(--accent-from), var(--accent-to));color:#0000;font-variant-numeric:tabular-nums;letter-spacing:-.03em;-webkit-background-clip:text;background-clip:text;margin:0;font-size:4rem;font-weight:800;line-height:1.1}.score__title{margin:0;font-size:1.5rem;font-weight:800;animation:.55s cubic-bezier(.2,1.6,.4,1) .6s both pop}.fade-in{animation:.4s ease-out fade-in}.toast{left:50%;bottom:calc(env(safe-area-inset-bottom) + var(--space-5));width:max-content;max-width:calc(100% - 2 * var(--space-4));color:#fff;padding:var(--space-3) var(--space-4);border-radius:var(--radius-s);z-index:10;background:#1c1c1e;font-size:.9375rem;animation:.2s ease-out fade-in;position:fixed;transform:translate(-50%)}.link-box{word-break:break-all;-webkit-user-select:all;user-select:all;white-space:pre-line;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:var(--space-3);margin:0;font-size:.875rem}.backdrop{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.blob{width:70vmax;height:70vmax;opacity:var(--blob-opacity);will-change:transform;border-radius:50%;position:absolute}.blob--1{background:radial-gradient(circle, var(--blob-1) 0, transparent 65%);animation:22s ease-in-out infinite alternate drift-1;top:-30vmax;left:-25vmax}.blob--2{background:radial-gradient(circle, var(--blob-2) 0, transparent 65%);animation:26s ease-in-out infinite alternate drift-2;top:20vh;right:-35vmax}.blob--3{background:radial-gradient(circle, var(--blob-3) 0, transparent 65%);animation:30s ease-in-out infinite alternate-reverse drift-1;bottom:-35vmax;left:-10vmax}.float-note{color:var(--note-color);will-change:transform;font-weight:700;animation:linear infinite rise;position:absolute;bottom:-40px}.buddy{transform-origin:50% 100%;flex:none;display:inline-block;position:relative}.buddy__lift,.buddy__body{width:100%;height:100%;display:block}.buddy__lift{transition:transform .16s cubic-bezier(.3,1.6,.5,1)}.buddy__body{transform-origin:50% 100%}.buddy svg{width:100%;height:100%;display:block;overflow:visible}.buddy--idle{animation:3.6s ease-in-out infinite idle-hop}.buddy--b.buddy--idle,.buddy--b.buddy--hum:after{animation-delay:-1.8s}.buddy--perk{animation:.5s ease-in-out infinite alternate perk}.buddy--happy{animation:.7s cubic-bezier(.3,0,.3,1) 3 hop}.buddy__eyes{transform-box:fill-box;transform-origin:50%;animation:4.2s infinite blink}.buddy--b .buddy__eyes{animation-delay:1.7s}.buddy__antenna{transform-box:fill-box;transform-origin:50% 100%}.buddy--hum.buddy--a .buddy__pupils{animation:7s ease-in-out infinite look-right}.buddy--hum.buddy--b .buddy__pupils{animation:7s ease-in-out infinite look-left}.buddy--live.buddy--a .buddy__pupils{transform:translate(1.5px)}.buddy--live.buddy--b .buddy__pupils{transform:translate(-1.5px)}.buddy__body--hit{animation:squash var(--dur) cubic-bezier(.3, 1.4, .5, 1)}.buddy__body--hit .buddy__open{animation:mouth-open var(--dur) steps(1)}.buddy__body--hit .buddy__smile{animation:mouth-closed var(--dur) steps(1)}.buddy__body--hit .buddy__antenna{animation:lean var(--dur) ease-out}.buddy__particle,.buddy--hum:after{pointer-events:none;font-weight:800;position:absolute;top:-6px;left:50%}.buddy__particle{opacity:0;animation:.9s ease-out forwards emit}.buddy--hum:after{content:"♪";opacity:0;font-size:20px;animation:3.6s ease-out infinite hum}.buddy--a .buddy__particle,.buddy--a.buddy--hum:after{color:var(--voice-a)}.buddy--b .buddy__particle,.buddy--b.buddy--hum:after{color:var(--voice-b)}.duo{justify-content:center;align-items:flex-end;gap:var(--space-3);display:flex}.duo__item{align-items:center;gap:var(--space-1);flex-direction:column;min-width:0;max-width:40%;display:flex}.duo__heart{color:var(--voice-a);align-self:center;font-size:1.75rem;animation:1.4s ease-in-out infinite heartbeat;display:inline-block}.duo__heart--sweet{text-shadow:0 0 14px #ff5c8acc;animation:.45s cubic-bezier(.3,1.8,.5,1) heart-pop}.duo__heart--tense{color:var(--text-muted);animation:.3s linear heart-shake}.duo__heart--rest{animation:none}.enter{animation:.6s cubic-bezier(.2,1.4,.4,1) both enter}.tag{max-width:100%;padding:2px var(--space-3);color:#fff;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;font-size:.875rem;font-weight:800;overflow:hidden}.tag--a{background:var(--voice-a)}.tag--b{background:var(--voice-b)}.tag--empty{opacity:.55}.confetti{pointer-events:none;z-index:20;position:fixed;inset:0;overflow:hidden}.confetti__piece{opacity:0;border-radius:2px;width:9px;height:14px;animation:ease-in forwards fall;position:absolute;top:-16px}.confetti__piece--round{border-radius:50%;width:10px;height:10px}@keyframes shine{0%,60%{transform:translate(-120%)}to{transform:translate(120%)}}@keyframes drift-1{to{transform:translate(12vmax,8vmax)scale(1.1)}}@keyframes drift-2{to{transform:translate(-10vmax,12vmax)scale(.9)}}@keyframes rise{0%{opacity:0;transform:translateY(0)rotate(-10deg)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(-110vh)rotate(15deg)}}@keyframes bob{50%{transform:translateY(-6px)}}@keyframes perk{0%{transform:translateY(0)scale(1)}to{transform:translateY(-8px)scale(1.04,.97)}}@keyframes hop{0%,to{transform:translateY(0)scale(1)}15%{transform:translateY(0)scale(1.08,.9)}45%{transform:translateY(-26px)scale(.95,1.06)}75%{transform:translateY(0)scale(1.06,.94)}}@keyframes blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}@keyframes pop{0%{opacity:0;transform:scale(.6)}}@keyframes idle-hop{0%,60%,to{transform:translateY(0)scale(1)}30%{transform:translateY(-5px)}70%{transform:translateY(0)scale(1.08,.92)}80%{transform:translateY(-18px)scale(.95,1.06)}90%{transform:translateY(0)scale(1.04,.96)}}@keyframes hum{0%,72%{opacity:0;transform:translate(-50%)scale(.6)}80%{opacity:1}to{opacity:0;transform:translate(calc(14px - 50%),-40px)scale(1.1)rotate(12deg)}}@keyframes look-right{0%,35%,to{transform:translate(0)}45%,70%{transform:translate(2.5px)}}@keyframes look-left{0%,35%,to{transform:translate(0)}45%,70%{transform:translate(-2.5px)}}@keyframes squash{0%{transform:scale(calc(1 + .14 * var(--strength)), calc(1 - .14 * var(--strength)))}40%{transform:scale(calc(1 - .06 * var(--strength)), calc(1 + .1 * var(--strength)))}to{transform:scale(1)}}@keyframes mouth-open{0%{opacity:1}75%{opacity:0}}@keyframes mouth-closed{0%{opacity:0}75%{opacity:1}}@keyframes lean{30%{transform:rotate(var(--tilt))}}@keyframes emit{0%{opacity:0;transform:translate(-50%)scale(.6)}20%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--x)), -48px) scale(1.1) rotate(10deg)}}@keyframes heartbeat{0%,40%,to{transform:scale(1)}15%{transform:scale(1.22)}28%{transform:scale(1.08)}}@keyframes heart-pop{0%{transform:scale(.8)}50%{transform:scale(1.45)}to{transform:scale(1.1)}}@keyframes heart-shake{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-3px)rotate(-8deg)}75%{transform:translate(3px)rotate(8deg)}}@keyframes enter{0%{opacity:0;transform:translateY(18px)scale(.9)}}@keyframes fall{0%{opacity:1;transform:translate(0)rotate(0)}to{opacity:1;transform:translate(var(--drift), 110vh) rotate(var(--spin))}}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:reduce){.confetti,.float-note,.btn--primary:after{animation:none;display:none}.blob,.buddy--idle,.buddy--perk,.buddy--happy,.duo__heart--tense{animation:none}.buddy__lift{transition:none;transform:none!important}.buddy__body--hit{animation-name:squash-soft}.buddy__body--hit .buddy__antenna{animation:none}.buddy__particle{animation-name:emit-soft}.buddy--hum:after{animation-name:hum-soft}.duo__heart{animation-name:glow-soft}.duo__heart--sweet{animation-name:glow-soft;animation-duration:.45s;animation-iteration-count:1}.enter,.fade-in,.score__title,.toast{animation-name:fade-only}.field input:focus,.roll__bar--active{transform:none}}@keyframes squash-soft{0%{transform:scale(1.04,.96)}to{transform:scale(1)}}@keyframes emit-soft{0%{opacity:0;transform:translate(-50%,-18px)}30%{opacity:1}to{opacity:0;transform:translate(-50%,-18px)}}@keyframes hum-soft{0%,72%{opacity:0;transform:translate(-50%,-18px)}85%{opacity:1}to{opacity:0;transform:translate(-50%,-18px)}}@keyframes glow-soft{0%,to{text-shadow:none}30%{text-shadow:0 0 14px #ff5c8ae6}}@keyframes fade-only{0%{opacity:0}}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}
