.auth-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 40%,#1a0e00,#0a0500,#000);overflow:hidden;transition:opacity .8s ease,visibility .8s ease}.auth-hidden{opacity:0;visibility:hidden;pointer-events:none}.auth-poetry-bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.poetry-char{position:absolute;left:var(--x);top:var(--y);font-size:var(--size);font-family:Ma Shan Zheng,cursive;color:transparent;background:linear-gradient(180deg,#d4a017,#8b6914,#4a3000);-webkit-background-clip:text;background-clip:text;opacity:0;text-shadow:none;filter:blur(1px);animation:poetryFloat var(--dur) ease-in-out var(--delay) infinite;-webkit-user-select:none;user-select:none;will-change:transform,opacity}@keyframes poetryFloat{0%{opacity:0;transform:translateY(30px) scale(.8) rotate(-5deg);filter:blur(3px)}15%{opacity:.18;transform:translateY(0) scale(1) rotate(0);filter:blur(1px)}50%{opacity:.22;transform:translateY(-20px) scale(1.05) rotate(3deg);filter:blur(.5px)}85%{opacity:.15;transform:translateY(-40px) scale(.95) rotate(-2deg);filter:blur(2px)}to{opacity:0;transform:translateY(-60px) scale(.8) rotate(5deg);filter:blur(4px)}}.auth-overlay:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(180,120,10,.12) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 80% 30%,rgba(212,160,23,.08) 0%,transparent 70%),radial-gradient(ellipse 30% 40% at 60% 80%,rgba(139,90,20,.1) 0%,transparent 70%);pointer-events:none;animation:glowPulse 6s ease-in-out infinite alternate}@keyframes glowPulse{0%{opacity:.6}to{opacity:1}}.auth-card{position:relative;z-index:10;width:min(440px,92vw);background:#0f0902bf;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(180,130,20,.45);border-radius:20px;padding:36px 36px 28px;box-shadow:0 0 0 1px #d4a0171f,0 4px 60px #000c,inset 0 1px #d4a01733,0 0 80px #8b5a0a26;animation:cardAppear .9s cubic-bezier(.16,1,.3,1) both}@keyframes cardAppear{0%{opacity:0;transform:translateY(32px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.auth-card:before{content:"";position:absolute;top:0;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,#d4a017,#ffe88a,#d4a017,transparent);border-radius:2px;animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{opacity:.6}50%{opacity:1}}.auth-logo{text-align:center;margin-bottom:28px}.auth-logo-title{font-family:Ma Shan Zheng,cursive;font-size:2.8rem;letter-spacing:14px;color:#d4a017;text-shadow:0 0 20px rgba(212,160,23,.6),0 0 40px rgba(212,160,23,.3);line-height:1.1;animation:logoGlow 3s ease-in-out infinite alternate}@keyframes logoGlow{0%{text-shadow:0 0 20px rgba(212,160,23,.5),0 0 40px rgba(212,160,23,.2)}to{text-shadow:0 0 30px rgba(212,160,23,.9),0 0 60px rgba(212,160,23,.5),0 0 90px rgba(180,120,10,.3)}}.auth-logo-sub{font-size:.72rem;color:#8b6914;letter-spacing:4px;margin-top:6px;opacity:.85}.auth-panel{display:block}.auth-panel-hidden{display:none!important}.auth-panel-title{font-family:Ma Shan Zheng,cursive;font-size:1.25rem;color:#e8c870;text-align:center;letter-spacing:6px;margin:0 0 6px}.auth-panel-desc{font-size:.8rem;color:#7a6040;text-align:center;margin:0 0 20px;letter-spacing:1px}.auth-field{margin-bottom:14px}.auth-label{display:block;font-size:.75rem;color:#8b6914;letter-spacing:3px;margin-bottom:6px}.auth-input{width:100%;box-sizing:border-box;background:#1e1204cc;border:1px solid rgba(139,105,20,.4);border-radius:8px;padding:11px 14px;color:#e8d5a0;font-size:.9rem;font-family:"Noto Serif SC",serif;outline:none;transition:border-color .25s,box-shadow .25s,background .25s}.auth-input::placeholder{color:#4a3520}.auth-input:focus{border-color:#d4a017b3;background:#281805e6;box-shadow:0 0 0 3px #d4a0171f,inset 0 1px 3px #0006}.auth-input-code{font-size:1.5rem;text-align:center;letter-spacing:10px;font-weight:700;color:#d4a017}.auth-input-row{display:flex;gap:8px;align-items:stretch}.auth-input-row .auth-input{flex:1;min-width:0}.auth-btn{width:100%;padding:12px 20px;border:none;border-radius:10px;font-family:"Noto Serif SC",serif;font-size:.95rem;font-weight:600;letter-spacing:3px;cursor:pointer;transition:all .25s;margin-top:10px;position:relative;overflow:hidden}.auth-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,transparent 60%);pointer-events:none}.auth-btn-primary{background:linear-gradient(135deg,#8b6914,#d4a017,#b8880f);color:#0a0500;box-shadow:0 2px 16px #d4a0174d,inset 0 1px #ffe6644d}.auth-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#a07a1a,#e8b820,#c89910);box-shadow:0 4px 24px #d4a01780,inset 0 1px #ffe66466;transform:translateY(-1px)}.auth-btn-primary:active:not(:disabled){transform:translateY(0)}.auth-btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}.auth-btn-secondary{background:#322008e6;color:#d4a017;border:1px solid rgba(212,160,23,.4);width:auto;white-space:nowrap;flex-shrink:0;font-size:.78rem;padding:0 14px;margin-top:0;letter-spacing:1px}.auth-btn-secondary:hover:not(:disabled){background:#50340ce6;border-color:#d4a017b3}.auth-btn-secondary:disabled{opacity:.5;cursor:not-allowed}.auth-btn-ghost{background:transparent;color:#7a6040;border:1px solid rgba(122,96,64,.3);font-size:.82rem;margin-top:8px;letter-spacing:2px}.auth-btn-ghost:hover{color:#a08050;border-color:#a0805080}.auth-msg{font-size:.8rem;padding:9px 14px;border-radius:7px;margin:10px 0 4px;text-align:center;letter-spacing:1px;display:none;animation:msgFade .3s ease}@keyframes msgFade{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.auth-msg-error{background:#78141466;border:1px solid rgba(200,60,60,.4);color:#f08080;display:block}.auth-msg-success{background:#14501466;border:1px solid rgba(60,160,60,.4);color:#80d080;display:block}.auth-msg-info{background:#14325066;border:1px solid rgba(60,120,200,.4);color:#80b0e0;display:block}.auth-link-text{text-align:center;font-size:.78rem;color:#5a4525;margin:12px 0 0;letter-spacing:1px}.auth-link{color:#c8980a;text-decoration:none;border-bottom:1px solid rgba(200,152,10,.3);transition:color .2s,border-color .2s}.auth-link:hover{color:#e8b820;border-bottom-color:#e8b82099}.auth-footer-verse{text-align:center;font-size:.68rem;color:#3a2a10;letter-spacing:3px;margin-top:24px;padding-top:16px;border-top:1px solid rgba(100,70,20,.2);font-family:Ma Shan Zheng,cursive}:root{--font-serif: "Noto Serif SC", "Songti SC", SimSun, serif;--font-calligraphy: "Ma Shan Zheng", cursive, serif;--color-bg: #0d1117;--color-tang-gold: #d4a359;--color-tang-gold-bright: #f3c77c;--color-tang-red: #a73322;--color-tang-ink: #1c1a17;--color-tang-jade: #438274;--color-tang-paper: #f4ede2;--color-tang-silk: rgba(244, 237, 226, .08);--glass-bg: rgba(26, 24, 21, .88);--glass-border: rgba(212, 163, 89, .45);--shadow-warm: 0 12px 35px rgba(0, 0, 0, .75), 0 0 25px rgba(212, 163, 89, .25)}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--color-bg);font-family:var(--font-serif);color:var(--color-tang-paper);cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 4 L18 16 L12 18 L16 26 L12 28 L8 20 L4 24 Z' fill='%23f3c77c' stroke='%232a1a08' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='18' r='2' fill='%23fff'/%3E%3C/svg%3E") 4 4,auto}#game-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}body.cursor-locked,body.cursor-locked #game-container{cursor:none!important}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none}.store-welcome-toast{position:absolute;top:76px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:10px 24px;background:linear-gradient(135deg,#221c16f2,#141210f2);border:1.5px solid var(--color-tang-gold-bright);border-radius:30px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 30px #000c,0 0 20px #d4a35966;z-index:20;pointer-events:none;animation:toastFadeIn .4s ease-out;transition:opacity .4s,transform .4s}.store-welcome-toast.hidden{opacity:0;transform:translate(-50%) translateY(-20px)}.store-welcome-toast .store-icon{font-size:1.3rem}.store-welcome-toast .store-msg{font-family:var(--font-serif);font-size:1.05rem;font-weight:600;color:var(--color-tang-gold-bright);letter-spacing:2px;text-shadow:0 2px 6px rgba(0,0,0,.8)}@keyframes toastFadeIn{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.hud-top{position:absolute;top:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;pointer-events:auto}.hud-badge{display:flex;align-items:center;gap:8px;padding:8px 18px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:24px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 16px #00000080}.hud-badge .icon{font-size:1.2rem}.hud-badge .label{font-size:.8rem;color:#c2b8a7;letter-spacing:1px}.hud-badge .value{font-weight:600;color:var(--color-tang-gold-bright)}.title-banner h1{font-family:var(--font-calligraphy);font-size:2.3rem;font-weight:400;letter-spacing:5px;color:var(--color-tang-gold-bright);text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 25px rgba(212,163,89,.5)}.control-hints{position:absolute;bottom:24px;left:24px;padding:8px 18px;background:var(--glass-bg);border:1px solid rgba(212,163,89,.3);border-radius:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.85rem;color:#e5dec9;letter-spacing:1px;transition:opacity .3s}.hint-key{color:var(--color-tang-gold-bright);font-weight:700}.btn-lock-badge{display:inline-flex;align-items:center;gap:4px;background:#d4a35938;border:1px solid var(--color-tang-gold);border-radius:12px;color:#ffe099;font-family:var(--font-serif);font-size:.8rem;padding:3px 10px;margin-left:6px;cursor:pointer;pointer-events:auto;transition:all .2s ease}.btn-lock-badge:hover{background:var(--color-tang-gold);color:#1a150c;box-shadow:0 0 10px #d4a35980}.game-crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--color-tang-gold-bright);font-size:1.4rem;text-shadow:0 0 8px rgba(243,199,124,.8),0 0 2px #000;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:99}body.cursor-locked .game-crosshair{opacity:.85}.interaction-prompt{position:absolute;bottom:110px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--glass-bg);border:1.5px solid var(--color-tang-gold);border-radius:30px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px #0009,0 0 15px #d4a3594d;pointer-events:auto;cursor:pointer;animation:pulse-glow 2s infinite ease-in-out;transition:all .3s cubic-bezier(.2,.8,.2,1)}.interaction-prompt.hidden{opacity:0;transform:translate(-50%) translateY(20px) scale(.95);pointer-events:none}.prompt-key{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--color-tang-gold);color:var(--color-tang-ink);font-weight:900;border-radius:50%;box-shadow:0 0 10px #d4a35999}.prompt-text{display:flex;flex-direction:column}.prompt-text .title{font-weight:600;font-size:1.1rem;color:#fff}.prompt-text .sub{font-size:.75rem;color:var(--color-tang-gold-bright)}@keyframes pulse-glow{0%,to{box-shadow:0 8px 24px #0009,0 0 12px #d4a35940}50%{box-shadow:0 8px 28px #000000b3,0 0 24px #d4a35999}}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#08080cd1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;pointer-events:auto;transition:opacity .3s ease}.modal-backdrop.hidden{opacity:0;pointer-events:none}.character-card-panel{position:relative;width:92%;max-width:780px;background:linear-gradient(135deg,#221e1afa,#141210fa);border:2px solid var(--color-tang-gold);border-radius:20px;padding:26px;box-shadow:var(--shadow-warm);display:flex;gap:26px;animation:cardPopup .35s cubic-bezier(.175,.885,.32,1.275)}@keyframes cardPopup{0%{transform:scale(.92) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.card-visual-col{flex:0 0 210px;display:flex;flex-direction:column;align-items:center}.portrait-frame{position:relative;width:100%;height:280px;border-radius:12px;overflow:hidden;border:2px solid var(--color-tang-gold);box-shadow:0 8px 20px #000c}.portrait-frame img{width:100%;height:100%;object-fit:cover;display:block}.character-identity{margin-top:12px;text-align:center}.character-identity h3{font-family:var(--font-calligraphy);font-size:1.7rem;color:var(--color-tang-gold-bright);letter-spacing:2px}.character-identity .character-title{font-size:.82rem;color:#b5a995;margin-top:2px}.card-dialogue-col{flex:1;display:flex;flex-direction:column;justify-content:space-between}.dialogue-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px dashed rgba(212,163,89,.3)}.favor-stars{font-size:.9rem;color:#e57373;letter-spacing:2px}.stamp-tag{font-size:.75rem;padding:3px 10px;background:#a7332240;border:1px solid var(--color-tang-red);color:#ff8a80;border-radius:10px}.dialogue-bubble{position:relative;background:#00000073;border:1px solid rgba(212,163,89,.3);border-radius:12px;padding:18px;margin:14px 0 12px;line-height:1.7;font-size:1rem;color:#f0e6d6}.category-selector-box{margin-bottom:12px}.category-selector-box .cat-title{font-size:.82rem;color:var(--color-tang-gold);letter-spacing:1px;margin-bottom:6px;display:block}.category-chips{display:flex;flex-wrap:wrap;gap:8px}.cat-chip{padding:6px 12px;font-family:var(--font-serif);font-size:.82rem;background:#ffffff0d;border:1px solid rgba(212,163,89,.35);border-radius:16px;color:#c8bfae;cursor:pointer;transition:all .2s ease}.cat-chip:hover{border-color:var(--color-tang-gold-bright);color:#fff}.cat-chip.active{background:linear-gradient(135deg,#d4a35959,#a7332240);border-color:var(--color-tang-gold-bright);color:var(--color-tang-gold-bright);font-weight:700;box-shadow:0 0 12px #d4a3594d}.custom-trouble-input-box{margin-bottom:16px}.custom-trouble-input-box input{width:100%;padding:10px 14px;background:#00000080;border:1px solid rgba(212,163,89,.4);border-radius:8px;color:#fff;font-family:var(--font-serif);font-size:.88rem;outline:none;transition:border-color .2s;user-select:text;-webkit-user-select:text}.custom-trouble-input-box input:focus{border-color:var(--color-tang-gold-bright);box-shadow:0 0 10px #d4a35959}.card-action-buttons{display:flex;gap:12px}.scroll-panel{position:relative;width:90%;max-width:580px;max-height:85vh;overflow-y:auto;background:linear-gradient(145deg,#201c18fa,#141210fa);border:2px solid var(--color-tang-gold);border-radius:16px;padding:32px 28px;box-shadow:var(--shadow-warm)}.close-btn{position:absolute;top:16px;right:16px;width:32px;height:32px;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#bbb;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:5}.close-btn:hover{color:#fff;border-color:var(--color-tang-gold);transform:rotate(90deg)}.scroll-header{text-align:center;margin-bottom:24px}.scroll-header h2{font-family:var(--font-calligraphy);font-size:2rem;color:var(--color-tang-gold-bright);letter-spacing:3px;margin-bottom:6px}.scroll-header .subtitle{font-size:.85rem;color:#9d9486;letter-spacing:1px}.coins-arena{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px;background:#00000059;border-radius:12px;border:1px dashed rgba(212,163,89,.3);margin-bottom:24px}.coins-row{display:flex;gap:20px}.coin{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:1.1rem;font-weight:900;border:3px solid #8f682d;box-shadow:inset 0 0 10px #000c,0 4px 10px #00000080;position:relative;transition:transform .6s cubic-bezier(.175,.885,.32,1.275)}.coin:after{content:"";position:absolute;width:16px;height:16px;border:2px solid #5a421a;background:transparent}.coin-front{background:radial-gradient(circle,#e2b467,#a47632);color:#38270b}.coin-back{background:radial-gradient(circle,#9d7b42,#5a421a);color:#dac7a6}.coin.flipping{animation:flipCoin .6s ease-in-out infinite alternate}@keyframes flipCoin{0%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(90deg) translateY(-25px)}to{transform:rotateY(180deg) translateY(0)}}.btn-tang{padding:12px 24px;font-family:var(--font-serif);font-size:.95rem;letter-spacing:2px;border-radius:24px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease}.btn-tang.primary{background:linear-gradient(135deg,var(--color-tang-gold-bright),var(--color-tang-gold));color:var(--color-tang-ink);font-weight:700;box-shadow:0 4px 15px #d4a35966}.btn-tang.primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #d4a35999}.btn-tang.success{background:linear-gradient(135deg,#4fa794,var(--color-tang-jade));color:#fff;font-weight:600;box-shadow:0 4px 15px #43827466}.btn-tang.ghost{background:transparent;border:1px solid var(--color-tang-gold);color:var(--color-tang-gold-bright)}.hexagram-visual{display:flex;flex-direction:column;gap:12px;padding:20px 24px;background:#0e0c0aa6;border:1px solid rgba(212,163,89,.35);border-radius:12px;margin-bottom:24px;box-shadow:inset 0 0 15px #0009}.yao-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:28px}.yao-label{width:48px;font-family:var(--font-calligraphy);font-size:1.05rem;color:#dfd7c9;letter-spacing:2px;text-align:left;-webkit-user-select:none;user-select:none}.yao-track{flex:1;height:100%;display:flex;align-items:center;position:relative}.yao-bar-placeholder{width:100%;height:18px;border:1px dashed rgba(212,163,89,.22);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#dcd2be4d;font-size:.75rem;letter-spacing:4px;font-family:var(--font-serif)}.yao-bar.yang-bar{width:100%;height:18px;background:linear-gradient(90deg,#966723,#f7cf7e,#966723);border-radius:4px;box-shadow:0 0 12px #f7cf7e73;border:1px solid rgba(255,235,180,.4);animation:yaoPopIn .35s cubic-bezier(.175,.885,.32,1.275)}.yao-bar.yin-bar{width:100%;height:18px;display:flex;align-items:center;justify-content:space-between;animation:yaoPopIn .35s cubic-bezier(.175,.885,.32,1.275)}.yao-bar.yin-bar .yin-segment{width:44%;height:100%;background:linear-gradient(90deg,#446979,#82b0c4,#446979);border-radius:4px;box-shadow:0 0 10px #82b0c459;border:1px solid rgba(160,215,240,.3)}.yao-bar.yin-bar .yin-gap{width:12%;height:100%}@keyframes yaoPopIn{0%{transform:scaleY(.4);opacity:.5}to{transform:scaleY(1);opacity:1}}.yao-result-tag{width:96px;font-family:var(--font-serif);font-size:.82rem;letter-spacing:1px;text-align:right;color:#777;-webkit-user-select:none;user-select:none}.yao-result-tag.yang-tag{color:#ffd88a;font-weight:700;text-shadow:0 0 8px rgba(255,216,138,.4)}.yao-result-tag.yin-tag{color:#9cd4e6;font-weight:700;text-shadow:0 0 8px rgba(156,212,230,.4)}.divination-result{margin-top:16px;padding:20px;background:#d4a35914;border:1px solid var(--color-tang-gold);border-radius:12px;animation:fadeIn .5s ease}.divination-result.hidden{display:none}.gua-title{font-family:var(--font-calligraphy);font-size:1.8rem;color:var(--color-tang-gold-bright);text-align:center;margin-bottom:8px}.gua-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}.gua-meta .tag{padding:4px 10px;border-radius:12px;font-size:.75rem}.tag.category-tag{background:#d4a35940;border:1px solid var(--color-tang-gold-bright);color:var(--color-tang-gold-bright);font-weight:600}.tag.wuxing{background:#43827433;border:1px solid var(--color-tang-jade);color:#7ddbc6}.tag.nature{background:#a7332233;border:1px solid var(--color-tang-red);color:#fca595}.gua-text{font-style:italic;text-align:center;font-size:.95rem;color:#d1c8b9;margin-bottom:16px;padding:8px 12px;border-left:3px solid var(--color-tang-gold);background:#0003}.ai-interpretation{background:#0006;padding:14px;border-radius:8px;margin-bottom:18px}.ai-avatar{font-size:.9rem;font-weight:600;color:var(--color-tang-gold-bright);margin-bottom:6px}.ai-content{font-size:.88rem;line-height:1.7;color:#e5dec9;white-space:pre-line}.result-actions{display:flex;flex-direction:column;gap:10px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.joystick-zone{position:absolute;top:0;left:0;width:50%;height:100%;pointer-events:auto;touch-action:none}.joystick-base{position:absolute;width:110px;height:110px;border-radius:50%;background:#d4a35926;border:2px solid rgba(212,163,89,.4);transform:translate(-50%,-50%);pointer-events:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity .2s}.joystick-base.hidden{opacity:0}.joystick-thumb{position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,var(--color-tang-gold-bright),var(--color-tang-gold));border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 0 15px #d4a35999}.mobile-action-btn{position:absolute;bottom:40px;right:32px;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,var(--color-tang-gold-bright),var(--color-tang-gold));border:3px solid rgba(255,255,255,.8);box-shadow:0 8px 24px #0009,0 0 20px #d4a35980;display:flex;align-items:center;justify-content:center;font-family:var(--font-calligraphy);font-size:1.4rem;color:var(--color-tang-ink);pointer-events:auto;cursor:pointer;transition:transform .15s}.mobile-action-btn:active{transform:scale(.92)}.mobile-action-btn.hidden{display:none}@media (max-width: 768px){.title-banner h1{font-size:1.5rem}.hud-badge{padding:6px 10px}.hud-badge .label,.control-hints{display:none}.character-card-panel{flex-direction:column;padding:20px;gap:16px;max-height:90vh;overflow-y:auto}.card-visual-col{flex:0 0 auto;width:100%}.portrait-frame{height:200px;width:150px}.card-action-buttons{flex-direction:column}.scroll-panel{padding:24px 18px;max-height:90vh}.coin{width:50px;height:50px}}