:root{color-scheme:dark;--ink: #e8e4f5;--dim: #9d93b8;--gold: #f2c14e;--cream: #ffe66d;--teal: #4ecdc4;--pink: #e0559e;--bad: #e4572e;--panel: rgba(12, 8, 19, .92);--line: rgba(120, 96, 170, .55)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#08060c;overflow:hidden;font-family:-apple-system,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;user-select:none}#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#17102a,#08060c 70%)}#stage{position:relative;width:1440px;height:810px;--u: 3px;box-shadow:0 0 0 calc(var(--u) * 1) #7860aa59,0 30px 90px #000000bf}#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}.hud{position:absolute;inset:0;pointer-events:none;color:var(--ink);font-size:calc(var(--u) * 9)}.hud-top{position:absolute;left:0;right:0;top:0;height:calc(var(--u) * 58);display:flex;align-items:center;gap:calc(var(--u) * 6);padding:0 calc(var(--u) * 8);background:linear-gradient(180deg,#0a0710f7,#0a0710db);border-bottom:calc(var(--u) * 1) solid var(--line)}.hud-left{display:flex;flex-direction:column;gap:calc(var(--u) * 1.6);min-width:calc(var(--u) * 64)}.roomlabel{font-size:calc(var(--u) * 5.4);color:#9d93b8;letter-spacing:calc(var(--u) * .4);white-space:nowrap}.hearts{display:flex;gap:calc(var(--u) * 2);font-size:calc(var(--u) * 13);line-height:1;color:#e8465c;text-shadow:0 0 calc(var(--u) * 3) rgba(232,70,92,.55)}.heart.off{color:#3a2a3f;text-shadow:none}.wordpanel{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 6);min-width:0}.wp-icon{font-size:calc(var(--u) * 17);line-height:1;filter:drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0,0,0,.6))}.wp-mid{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 1)}.wp-letters{display:flex;align-items:center;gap:calc(var(--u) * 2.6);font-family:Arial Black,Impact,system-ui,sans-serif;font-size:calc(var(--u) * 19);line-height:1;letter-spacing:calc(var(--u) * .6)}.wp-letters .ch{color:#f6f2ff;text-shadow:0 calc(var(--u) * 1.5) 0 rgba(0,0,0,.55)}.wp-letters .ch.filled{color:var(--cream);animation:pop-in .22s ease-out}.wp-letters .slot{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--u) * 15);height:calc(var(--u) * 19);border:calc(var(--u) * 1) dashed rgba(242,193,78,.5);border-radius:calc(var(--u) * 2);background:#281e3c8c;color:transparent}.wp-letters .slot.hot{border-color:var(--gold);box-shadow:0 0 calc(var(--u) * 5) #f2c14e73}.wp-meta{font-size:calc(var(--u) * 6.4);color:var(--dim);letter-spacing:calc(var(--u) * .3);display:flex;gap:calc(var(--u) * 3);align-items:center}.wp-meta .zh{color:#cfc6e6}.wp-meta .stars{color:var(--gold);letter-spacing:calc(var(--u) * .6)}.hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--u) * 1.5);min-width:calc(var(--u) * 78)}.score{font-family:Arial Black,system-ui,sans-serif;font-size:calc(var(--u) * 12);color:var(--cream);text-shadow:0 calc(var(--u) * 1.5) 0 rgba(0,0,0,.6);letter-spacing:calc(var(--u) * .4)}.mom{display:flex;align-items:center;gap:calc(var(--u) * 3)}.mom-x{font-family:Arial Black,system-ui,sans-serif;font-size:calc(var(--u) * 8);color:#ffb454}.mom-bar{width:calc(var(--u) * 40);height:calc(var(--u) * 3.4);background:#ffffff1a;border-radius:99px;overflow:hidden}.mom-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#ff8a3d,#ffe66d);border-radius:99px;transition:width .12s linear}.orbs{display:flex;gap:calc(var(--u) * 1.6);margin-bottom:calc(var(--u) * .6)}.orb-chip{width:calc(var(--u) * 11);height:calc(var(--u) * 11);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(var(--u) * 6);font-family:Arial Black,system-ui,sans-serif;color:#1a1226;border:calc(var(--u) * 1) solid rgba(255,255,255,.35)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto}.overlay[hidden]{display:none}.card-screen{background:radial-gradient(ellipse at 50% 50%,#180e28db,#06040af0);backdrop-filter:blur(2px);flex-direction:column;gap:calc(var(--u) * 7)}.screen-title{font-size:calc(var(--u) * 10);color:var(--gold);letter-spacing:calc(var(--u) * 1.2);text-transform:uppercase}.cards{display:flex;gap:calc(var(--u) * 8)}.card{width:calc(var(--u) * 104);padding:calc(var(--u) * 7) calc(var(--u) * 6) calc(var(--u) * 6);background:linear-gradient(180deg,#2c1e46fa,#181026fa);border:calc(var(--u) * 1) solid var(--line);border-radius:calc(var(--u) * 4);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 2.5);cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;position:relative}.card:hover{transform:translateY(calc(var(--u) * -2));border-color:var(--gold);box-shadow:0 0 calc(var(--u) * 12) #f2c14e47}.card .kbd{position:absolute;top:calc(var(--u) * 2);left:calc(var(--u) * 3);font-size:calc(var(--u) * 5.5);color:var(--dim)}.card .emoji{font-size:calc(var(--u) * 22);line-height:1}.card .zh{font-size:calc(var(--u) * 8);color:#d8d0ee}.card .mask{font-family:Arial Black,Impact,system-ui,sans-serif;font-size:calc(var(--u) * 12);letter-spacing:calc(var(--u) * 1.6);color:#fff;display:flex;gap:calc(var(--u) * 1.2);align-items:center}.card .mask .b{color:var(--gold);opacity:.75}.card .stars{color:var(--gold);font-size:calc(var(--u) * 6.5);letter-spacing:calc(var(--u) * .8)}.card .tag{font-size:calc(var(--u) * 6);color:var(--teal);border:calc(var(--u) * .6) solid rgba(78,205,196,.4);border-radius:99px;padding:calc(var(--u) * .8) calc(var(--u) * 3)}.panel{background:linear-gradient(180deg,#1e1432f7,#0e0918fa);border:calc(var(--u) * 1) solid var(--line);border-radius:calc(var(--u) * 5);padding:calc(var(--u) * 9) calc(var(--u) * 12);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 5);box-shadow:0 0 calc(var(--u) * 30) #0009}.title-main{font-family:Arial Black,system-ui,sans-serif;font-size:calc(var(--u) * 26);letter-spacing:calc(var(--u) * 1);color:var(--cream);text-shadow:0 calc(var(--u) * 3) 0 #7a4a10,0 0 calc(var(--u) * 22) rgba(242,193,78,.35);line-height:1}.title-sub{font-size:calc(var(--u) * 8);color:var(--dim);letter-spacing:calc(var(--u) * 2)}.howto{font-size:calc(var(--u) * 6.5);color:#b9aed4;line-height:1.9;text-align:left}.howto b{color:var(--gold);font-weight:600}.howto .key{display:inline-block;min-width:calc(var(--u) * 8);text-align:center;padding:0 calc(var(--u) * 1.5);margin:0 calc(var(--u) * .8);border:calc(var(--u) * .8) solid var(--line);border-radius:calc(var(--u) * 1.5);color:#fff;font-size:calc(var(--u) * 5.6)}.btn{pointer-events:auto;cursor:pointer;font-family:inherit;font-size:calc(var(--u) * 8);color:#1a1226;background:linear-gradient(180deg,#ffd873,#f2b93e);border:none;border-radius:calc(var(--u) * 3);padding:calc(var(--u) * 3) calc(var(--u) * 12);box-shadow:0 calc(var(--u) * 2) 0 #9a6a12;transition:transform .08s ease,box-shadow .08s ease;letter-spacing:calc(var(--u) * .6)}.btn:hover{transform:translateY(calc(var(--u) * -.5))}.btn:active{transform:translateY(calc(var(--u) * 1.5));box-shadow:0 calc(var(--u) * .5) 0 #9a6a12}.btn.ghost{background:transparent;color:var(--ink);border:calc(var(--u) * 1) solid var(--line);box-shadow:none;font-size:calc(var(--u) * 6.5);padding:calc(var(--u) * 2) calc(var(--u) * 6)}.opts{display:flex;gap:calc(var(--u) * 5);flex-wrap:wrap;justify-content:center}.opt{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 1.5);font-size:calc(var(--u) * 5.5);color:var(--dim)}.seg{display:flex;border:calc(var(--u) * 1) solid var(--line);border-radius:calc(var(--u) * 2);overflow:hidden}.seg button{font-family:inherit;font-size:calc(var(--u) * 6);color:var(--dim);background:transparent;border:none;padding:calc(var(--u) * 1.5) calc(var(--u) * 3);cursor:pointer}.seg button.on{background:#f2c14e2e;color:var(--gold)}.dead-stats{display:grid;grid-template-columns:auto auto;gap:calc(var(--u) * 2) calc(var(--u) * 8);font-size:calc(var(--u) * 7)}.dead-stats .k{color:var(--dim);text-align:right}.dead-stats .v{color:var(--cream);font-family:Arial Black,system-ui,sans-serif}.words-list{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 2);max-width:calc(var(--u) * 260);justify-content:center}.words-list span{font-size:calc(var(--u) * 6);color:#d8d0ee;background:#5a468259;padding:calc(var(--u) * .8) calc(var(--u) * 2.4);border-radius:99px}.hint-line{font-size:calc(var(--u) * 5.6);color:#8d82a8}@keyframes pop-in{0%{transform:scale(1.45);filter:brightness(1.8)}to{transform:scale(1);filter:brightness(1)}}.toast{position:absolute;left:50%;bottom:calc(var(--u) * 10);transform:translate(-50%);font-size:calc(var(--u) * 7);color:var(--cream);background:#0a0710d9;border:calc(var(--u) * 1) solid rgba(242,193,78,.35);border-radius:99px;padding:calc(var(--u) * 1.5) calc(var(--u) * 6);opacity:0;transition:opacity .25s ease;pointer-events:none}.toast.show{opacity:1}html,body{touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}#app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.actions{position:absolute;right:calc(var(--u) * 4);bottom:calc(var(--u) * 4);display:flex;gap:calc(var(--u) * 2.4);pointer-events:none}.actions[hidden]{display:none}.act{pointer-events:auto;width:calc(var(--u) * 30);height:calc(var(--u) * 30);padding:0;border-radius:50%;border:calc(var(--u) * 1) solid rgba(140,116,190,.5);background:#120c1ec2;color:var(--ink);font-size:calc(var(--u) * 12);font-family:inherit;line-height:1;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:transform .08s ease,background .08s ease;cursor:pointer}.act:active{background:#463468f2;transform:scale(.92)}#rotate{position:fixed;inset:0;z-index:9999;background:#08060c;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center}#rotate.show{display:flex}.rotate-icon{font-size:64px;animation:rotate-tilt 1.8s ease-in-out infinite}.rotate-title{font-size:22px;color:#f2c14e;margin-top:18px;letter-spacing:2px}.rotate-inner .hint-line{margin-top:8px;font-size:13px;color:#8d82a8}@keyframes rotate-tilt{0%,40%{transform:rotate(0)}60%,to{transform:rotate(90deg)}}@media(max-height:460px){.hud{font-size:calc(var(--u) * 9.5)}.card{width:calc(var(--u) * 104)}}.shop-score{font-size:calc(var(--u) * 7);color:var(--dim);letter-spacing:calc(var(--u) * .6)}.shop-score b{color:var(--cream);font-family:Arial Black,system-ui,sans-serif;font-size:1.35em}.shop-cards .card{width:calc(var(--u) * 88);padding-top:calc(var(--u) * 6)}.card.offer .offer-desc{font-size:calc(var(--u) * 5.6);color:#8d82a8;text-align:center;line-height:1.4}.card.offer .price{font-family:Arial Black,system-ui,sans-serif;font-size:calc(var(--u) * 7);color:var(--cream);letter-spacing:calc(var(--u) * .3)}.card.offer.poor{opacity:.45;cursor:not-allowed}.card.offer.poor .price{color:#8a5a5a}.card.offer.bought{opacity:.35;cursor:default}.card.offer.bought .price{color:var(--teal)}.btn-row{display:flex;gap:calc(var(--u) * 3.5);align-items:center;justify-content:center;flex-wrap:nowrap}.panel-compact{padding:calc(var(--u) * 6) calc(var(--u) * 9);gap:calc(var(--u) * 3.2)}.panel-compact .title-main{font-size:calc(var(--u) * 18)}.panel-compact .dead-stats{font-size:calc(var(--u) * 6.2);gap:calc(var(--u) * 1.6) calc(var(--u) * 7)}.panel-compact .words-list span{font-size:calc(var(--u) * 5.4);padding:calc(var(--u) * .7) calc(var(--u) * 2)}.panel-compact .words-list{max-width:calc(var(--u) * 250)}.panel-compact .btn.ghost{font-size:calc(var(--u) * 6);padding:calc(var(--u) * 2) calc(var(--u) * 5)}.codex-panel{width:calc(var(--u) * 330);max-width:96%;height:calc(var(--u) * 226);max-height:94%;background:linear-gradient(180deg,#1e1432fb,#0c0816fc);border:calc(var(--u) * 1) solid var(--line);border-radius:calc(var(--u) * 5);padding:calc(var(--u) * 5) calc(var(--u) * 6);display:flex;flex-direction:column;gap:calc(var(--u) * 2.6);box-shadow:0 0 calc(var(--u) * 30) #000000b3}.codex-head{display:flex;align-items:baseline;justify-content:space-between}.codex-title{font-family:inherit;font-size:calc(var(--u) * 10);letter-spacing:calc(var(--u) * 2);color:var(--gold)}.codex-count{font-size:calc(var(--u) * 6);color:var(--dim)}.codex-count b{color:var(--cream);font-family:Arial Black,system-ui,sans-serif;font-size:1.6em}.codex-bar{height:calc(var(--u) * 3);background:#ffffff17;border-radius:99px;overflow:hidden}.codex-bar i{display:block;height:100%;background:linear-gradient(90deg,#4ecdc4,#ffe66d);border-radius:99px;transition:width .25s ease}.codex-filters{align-self:flex-start}.codex-filters button{font-size:calc(var(--u) * 5.2);padding:calc(var(--u) * 1.2) calc(var(--u) * 2.6)}.codex-grid{flex:1;overflow-y:auto;touch-action:pan-y;display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u) * 56),1fr));gap:calc(var(--u) * 2);padding:calc(var(--u) * 1) calc(var(--u) * 1.5) calc(var(--u) * 1) 0;-webkit-overflow-scrolling:touch}.codex-grid::-webkit-scrollbar{width:calc(var(--u) * 2)}.codex-grid::-webkit-scrollbar-thumb{background:#8c74be66;border-radius:99px}.cx-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u) * .8);padding:calc(var(--u) * 2.4) calc(var(--u) * 1);min-height:calc(var(--u) * 33);border-radius:calc(var(--u) * 2.5);background:linear-gradient(180deg,#3a2a5cd9,#241a3cd9);border:calc(var(--u) * 1) solid rgba(120,96,170,.35);cursor:pointer;transition:transform .08s ease,border-color .08s ease}.cx-cell:not(.locked):active{transform:scale(.95)}.cx-cell:not(.locked):hover{border-color:var(--gold)}.cx-cell.locked{background:#1c142c99;border-color:#5a488040;cursor:default;opacity:.55}.cx-emoji{font-size:calc(var(--u) * 11.5);line-height:1}.cx-word{font-family:Arial Black,system-ui,sans-serif;font-size:calc(var(--u) * 6.2);color:#f6f2ff;letter-spacing:calc(var(--u) * .2);white-space:nowrap}.cx-cell.locked .cx-word{color:#6b5f88}.cx-n{margin-left:calc(var(--u) * 1);font-size:calc(var(--u) * 4);color:var(--gold)}.cx-zh{font-size:calc(var(--u) * 5.2);color:#9d93b8;white-space:nowrap}.codex-empty{grid-column:1 / -1;text-align:center;color:var(--dim);font-size:calc(var(--u) * 6);padding:calc(var(--u) * 14) 0}.codex-panel>.btn{align-self:center;padding-left:calc(var(--u) * 16);padding-right:calc(var(--u) * 16)}.tutorial{gap:calc(var(--u) * 3.4);max-width:calc(var(--u) * 300)}.tut-step{display:flex;align-items:flex-start;gap:calc(var(--u) * 3.5);align-self:stretch;font-size:calc(var(--u) * 7);color:#d8d0ee;line-height:1.5;text-align:left}.tut-step b{color:var(--gold);font-weight:600}.tut-num{flex:0 0 auto;width:calc(var(--u) * 11);height:calc(var(--u) * 11);border-radius:50%;background:#f2c14e29;border:calc(var(--u) * 1) solid rgba(242,193,78,.5);color:var(--gold);font-family:Arial Black,system-ui,sans-serif;font-size:calc(var(--u) * 6);display:flex;align-items:center;justify-content:center;margin-top:calc(var(--u) * .4)}.tut-extra{font-size:calc(var(--u) * 6);color:var(--teal);background:#4ecdc41a;border-radius:calc(var(--u) * 2);padding:calc(var(--u) * 2) calc(var(--u) * 4);align-self:stretch;text-align:center}
