:root{--cocoa:#2a1c16;--mocha:#3a2a20;--cream:#f6e7d3;--berry:#ef8f9f;--mint:#9fd8c0;--caramel:#e8b04b;--panel:#43302433}*{box-sizing:border-box}html,body{color:var(--cream);background:#1c110c;height:100%;margin:0;font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,sans-serif}#root{height:100%}.stage{background:radial-gradient(900px 500px at 80% -10%,#ef8f9f1f,#0000 60%),radial-gradient(700px 500px at 10% 110%,#9fd8c01a,#0000 60%),linear-gradient(#170d09,#241610 60%,#1c110c);justify-content:center;align-items:center;min-height:100dvh;display:flex}.phone{background:var(--cocoa);cursor:default;-webkit-user-select:none;user-select:none;border:6px solid #120a06;border-radius:34px;width:min(520px,100vw);height:min(1080px,100dvh - 24px);position:relative;overflow:hidden;box-shadow:0 0 0 1.5px #e8b04b40,0 30px 80px #000000b3}@media (width<=560px),(height<=720px){.phone{width:100vw;height:100dvh;box-shadow:none;border:none;border-radius:0}}button{font-family:inherit}button.primary{background:linear-gradient(180deg, #f4c06a, var(--caramel));color:#3a230d;cursor:pointer;border:none;border-radius:14px;padding:14px 30px;font-size:17px;font-weight:800;transition:transform .1s,box-shadow .1s;box-shadow:0 4px #a97b28,0 8px 20px #0006}button.primary:hover{transform:translateY(-2px);box-shadow:0 6px #a97b28,0 10px 24px #0006}button.primary:active{transform:translateY(2px);box-shadow:0 2px #a97b28}button.primary.big{padding:16px 40px;font-size:20px}button.ghost{color:#f6e7d3b3;cursor:pointer;background:0 0;border:1px solid #f6e7d34d;border-radius:12px;margin-top:10px;padding:10px 22px}.home{text-align:center;background-position:bottom;background-size:cover;flex-direction:column;align-items:center;height:100%;padding:34px 20px 30px;display:flex}.home-title h1{letter-spacing:10px;color:var(--cream);text-shadow:0 0 24px #e8b04b8c,0 3px #6b4a1f;margin:0;font-size:44px}.home-title p{letter-spacing:4px;color:#f6e7d3bf;margin:8px 0 0;font-size:12px}.home-levels{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1a0e09b8;border:1px solid #e8b04b4d;border-radius:14px;flex-direction:column;gap:6px;margin-top:auto;padding:12px 18px;font-size:13px;display:flex}.home-level b{color:var(--caramel);margin-right:6px}.home-level small{color:var(--mint);margin-left:6px}.home .primary.big{margin-top:16px}.home-hint{color:#f6e7d399;letter-spacing:2px;font-size:11px}.level-screen{background-position:50%;background-size:cover;flex-direction:column;align-items:center;gap:8px;height:100%;padding:10px 10px 12px;display:flex;position:relative}.level-screen .board{margin-top:auto}.level-screen .item-bar{margin-bottom:auto}.screen-shake{animation:.35s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(2px,-2px)}50%{transform:translate(-2px,2px)}75%{transform:translate(1px,1px)}}.hud{justify-content:space-between;align-items:center;gap:8px;width:100%;padding:4px 6px;display:flex}.level-code{color:var(--caramel);text-shadow:0 0 10px #e8b04b66;font-size:18px;font-weight:800}.level-sub{color:#f6e7d399;letter-spacing:1px;font-size:10px}.hud-mid{text-align:center}.score{color:var(--cream);text-shadow:0 0 14px #e8b04b80;font-size:26px;font-weight:900}.mult{color:#f6e7d3b3;background:#f6e7d31f;border-radius:999px;margin-top:2px;padding:1px 10px;font-size:12px;font-weight:700;transition:transform .15s;display:inline-block}.mult.hot{background:linear-gradient(90deg, var(--berry), var(--caramel));color:#3a1a10}.mult.up{animation:.5s mult-pop}@keyframes mult-pop{0%{transform:scale(1)}40%{transform:scale(1.5)rotate(-4deg)}to{transform:scale(1)}}.hud-right{text-align:right}.hearts .heart{margin-left:2px;font-size:16px}.hearts .heart.lost{filter:grayscale();opacity:.45}.timer{color:#f6e7d3b3;margin-top:2px;font-size:12px}.timer.frozen{color:var(--mint);text-shadow:0 0 8px #9fd8c099}.board{aspect-ratio:1;background:#241711;border:3px solid #6b4a2a;border-radius:12px;grid-template-columns:repeat(9,1fr);width:min(94vw,480px);display:grid;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000080,inset 0 0 20px #0006}.cell{color:#4a2f18;cursor:pointer;background:#f9efdd;border:1px solid #6b4a2a73;border-top:none;border-left:none;justify-content:center;align-items:center;padding:0;font-size:clamp(16px,4.4vw,24px);font-weight:700;transition:background .12s;display:flex;position:relative}.cell.br{border-right:2px solid #6b4a2a}.cell.bb{border-bottom:2px solid #6b4a2a}.cell.given{color:#2a1c16;background:#efdfc4}.cell.peer{background:#f2e2c8}.cell.same{background:#ffd9a0}.cell.selected{box-shadow:inset 0 0 0 2.5px var(--caramel);z-index:2;background:#ffca7a}.cell.rainbow{background:linear-gradient(135deg,#ffe3ec,#dff5ec,#fff3d6);animation:1.2s infinite rainbow-pulse}@keyframes rainbow-pulse{0%,to{filter:saturate()}50%{filter:saturate(1.6)}}.cell.oracle{box-shadow:inset 0 0 0 3px var(--mint)}.cell .sym,.cell .key-img{object-fit:contain;width:78%;height:78%}.sym-emoji{font-size:clamp(14px,4vw,22px)}.cell.fx-pop{animation:.4s cell-pop}@keyframes cell-pop{0%{background:#fff3d6;transform:scale(.5)}55%{background:#ffe1a1;transform:scale(1.18)}to{transform:scale(1)}}.cell.fx-shake{animation:.45s cell-shake;background:#f7c8c8!important}@keyframes cell-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.cell.fx-flash{animation:.9s cell-flash}@keyframes cell-flash{0%{background:#ffe9b0;box-shadow:inset 0 0 18px #e8b04be6}60%{background:#ffd98a}to{background:#f9efdd}}.notes{color:#8a6a48;grid-template-columns:repeat(3,1fr);width:100%;height:100%;font-size:clamp(6px,1.6vw,9px);font-weight:600;display:grid}.notes i{justify-content:center;align-items:center;font-style:normal;display:flex}.score-fly{color:var(--caramel);text-shadow:0 0 10px #e8b04bcc,0 2px 3px #00000080;pointer-events:none;z-index:30;font-size:18px;font-weight:900;animation:1.1s ease-out forwards fly-up;position:absolute;transform:translate(-50%)}@keyframes fly-up{0%{opacity:0;transform:translate(-50%)translateY(0)scale(.7)}15%{opacity:1;transform:translate(-50%)translateY(-6px)scale(1.15)}to{opacity:0;transform:translate(-50%)translateY(-56px)scale(1)}}.legend{color:var(--mint);letter-spacing:1px;font-size:11px}.keypad{grid-template-columns:repeat(9,1fr);gap:5px;width:min(94vw,480px);display:grid}.keypad.rainbow-pending .key:not(.tool){animation:1s infinite rainbow-pulse;box-shadow:0 0 12px #9fd8c0cc}.key{background:linear-gradient(180deg, #4a3323, var(--mocha));color:var(--cream);cursor:pointer;border:1px solid #6b4a2a;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:7px 0 5px;transition:transform 80ms,box-shadow 80ms;display:flex;box-shadow:0 3px #241711}.key:hover{transform:translateY(-1px)}.key:active{transform:translateY(2px);box-shadow:0 1px #241711}.key.done{opacity:.35}.key.tool.on{color:#1d3a2e;background:linear-gradient(#9fd8c0,#6faf95);box-shadow:0 3px #4a7a64}.key-glyph{font-size:18px;font-weight:800;line-height:1}.key-img{object-fit:contain;width:24px;height:24px}.key-count{color:#f6e7d399;font-size:9px}.key.tool .key-count{font-size:8px}.item-bar{gap:6px;width:min(94vw,480px);display:flex}.item-btn{color:var(--cream);cursor:pointer;background:#433024bf;border:1px solid #e8b04b59;border-radius:12px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 2px 6px;transition:transform .1s,box-shadow .15s;display:flex}.item-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 14px #0006,0 0 10px #e8b04b4d}.item-btn.empty{opacity:.35;cursor:default}.item-btn.pending{color:#1d3a2e;background:linear-gradient(#9fd8c0,#6faf95);animation:1s infinite rainbow-pulse}.item-btn.tool.on{color:#1d3a2e;background:linear-gradient(#9fd8c0,#6faf95)}.item-btn.tool{flex:.8}.item-emoji{font-size:20px}.item-img{object-fit:contain;width:30px;height:30px}.dc-img{object-fit:contain;flex-shrink:0;width:40px;height:40px}.hearts .heart img{object-fit:contain;vertical-align:-3px;width:18px;height:18px}.item-name{font-size:10px;font-weight:700}.item-count{color:var(--caramel);font-size:9px}.item-btn.pending .item-count{color:#1d3a2e}.oracle-tip{border:1px solid var(--mint);color:var(--cream);z-index:40;background:#1a0e09eb;border-radius:10px;max-width:88%;padding:8px 14px;font-size:12px;animation:.3s tip-in;position:absolute;top:76px;left:50%;transform:translate(-50%)}@keyframes tip-in{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)}}.level-banner{pointer-events:none;z-index:60;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.lb-card{border:2px solid var(--caramel);text-align:center;background:#1a0e09eb;border-radius:18px;padding:22px 34px;animation:2.6s forwards banner;box-shadow:0 0 40px #e8b04b59}.lb-sub{letter-spacing:3px;color:var(--mint);font-size:11px}.lb-code{color:var(--caramel);letter-spacing:6px;text-shadow:0 0 18px #e8b04b99;margin:6px 0;font-size:34px;font-weight:900}.lb-flavor{color:#f6e7d3cc;max-width:250px;font-size:12px;line-height:1.6}@keyframes banner{0%{opacity:0;transform:scale(.85)}12%{opacity:1;transform:scale(1.03)}18%{transform:scale(1)}82%{opacity:1}to{opacity:0;transform:scale(.98)}}.overlay{z-index:80;background:#120a06c7;justify-content:center;align-items:center;padding:18px;animation:.25s ov-in;display:flex;position:absolute;inset:0}@keyframes ov-in{0%{opacity:0}to{opacity:1}}.panel{text-align:center;background:linear-gradient(#3a2a20,#2d1f16);border:2px solid #e8b04b80;border-radius:20px;width:100%;max-width:420px;padding:24px 26px;animation:.35s panel-in;box-shadow:0 24px 60px #0009}@keyframes panel-in{0%{opacity:0;transform:translateY(16px)scale(.96)}to{opacity:1;transform:none}}.panel h2{color:var(--caramel);margin:0 0 12px;font-size:22px}.settle{flex-direction:column;gap:8px;margin:14px 0 18px;display:flex}.settle-row{background:#00000040;border-radius:9px;justify-content:space-between;padding:8px 14px;font-size:14px;display:flex}.settle-row b{color:var(--cream)}.settle-row.perfect{border:1px solid var(--mint);color:var(--mint)}.settle-row.total{border:1px solid var(--caramel);font-size:16px}.settle-row.total b{color:var(--caramel);font-size:18px}.draft-hint{color:#f6e7d3b3;margin-bottom:14px;font-size:12px}.draft-cards{flex-direction:column;gap:10px;display:flex}.draft-card{text-align:left;color:var(--cream);cursor:pointer;background:#00000047;border:1px solid #f6e7d333;border-radius:14px;align-items:center;gap:12px;padding:12px 16px;transition:transform .12s,border-color .12s,box-shadow .12s;display:flex}.draft-card:hover{border-color:var(--caramel);transform:translateY(-2px)scale(1.01);box-shadow:0 8px 20px #e8b04b40}.dc-emoji{font-size:28px}.draft-card b{color:var(--caramel);font-size:15px;display:block}.draft-card small{color:#f6e7d3a6;font-size:11px;line-height:1.4}.failed-emoji{font-size:44px}.failed-panel p{color:#f6e7d3bf;font-size:13px;line-height:1.7}.victory{background:radial-gradient(600px 400px at 50% 0%, #e8b04b2e, transparent 65%), var(--cocoa);flex-direction:column;justify-content:center;align-items:center;gap:10px;height:100%;padding:20px;display:flex;position:relative;overflow:hidden}.victory h1{color:var(--caramel);text-shadow:0 0 24px #e8b04b99;margin:0;font-size:38px}.victory-score{color:var(--cream);text-shadow:0 0 30px #e8b04b80;font-size:52px;font-weight:900}.victory-rating{font-size:30px}.victory-levels{flex-direction:column;gap:6px;width:min(88%,360px);margin:8px 0;display:flex}.vl-row{background:#0000004d;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px;font-size:13px;display:flex}.vl-row small{color:#f6e7d38c;font-size:10px}.vl-row b{color:var(--caramel)}.candy-rain{pointer-events:none;position:absolute;inset:0}.candy-rain span{font-size:22px;animation:3.2s linear infinite candy-fall;position:absolute;top:-8%}@keyframes candy-fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:.7;transform:translateY(115vh)rotate(340deg)}}@media (prefers-reduced-motion:reduce){.candy-rain span,.screen-shake,.cell.fx-pop,.cell.fx-shake,.mult.up{animation:none!important}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}