:root{--bg-color:#111;--text-color:#3f3;--border-color:#3f3;--panel-bg:#000c;--highlight-color:#ff0;--font-main:"VT323", "SimSun", monospace;--font-heading:"Press Start 2P", "SimSun", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:none;margin:0;font-size:24px;line-height:1.2}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);text-transform:uppercase;margin-bottom:1rem}a{color:var(--highlight-color);text-decoration:none}a:hover{text-decoration:underline}button{font-family:var(--font-heading);color:var(--text-color);border:2px solid var(--border-color);cursor:pointer;text-transform:uppercase;background-color:#0000;padding:10px 15px;font-size:14px;transition:all .2s}button:hover{background-color:var(--text-color);color:var(--bg-color)}button:active{transform:scale(.95)}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--bg-color);border-left:2px solid var(--border-color)}::-webkit-scrollbar-thumb{background:var(--border-color)}::-webkit-scrollbar-thumb:hover{background:var(--highlight-color)}@media (width<=768px){body{font-size:18px}h1,h2,h3{margin-bottom:.5rem}button{padding:8px 12px;font-size:12px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{border-left:none}}.app-container{flex-direction:column;width:100vw;max-width:1400px;height:100vh;margin:0 auto;padding:20px;display:flex;overflow:hidden}.game-title{text-align:center;text-shadow:2px 2px #000;letter-spacing:2px;margin-bottom:20px;font-size:24px}.main-content{flex-direction:column;flex:1;min-height:0;display:flex}.game-layout{flex:1;gap:20px;min-height:0;display:flex}.sidebar{flex-direction:column;gap:20px;width:280px;display:flex}.panel{border:4px solid var(--border-color);background-color:var(--panel-bg);box-shadow:0 0 10px var(--border-color);flex-direction:column;padding:15px;display:flex}.panel h2{color:var(--highlight-color);border-bottom:2px solid var(--border-color);text-align:center;margin-bottom:10px;padding-bottom:5px;font-size:16px}.stat-line{justify-content:space-between;margin-bottom:8px;display:flex}.stat-val{font-weight:700}.stat-val.hp{color:#f33}.stat-val.mp{color:#39f}.stat-val.gold{color:#ff0}.inventory-panel ul{flex:1;margin:0;padding:0;list-style:none;overflow-y:auto}.inventory-panel li{color:#ccc;margin-bottom:5px}.viewport{flex-direction:column;flex:1;gap:20px;min-height:0;display:flex}.visual-area{border:4px solid var(--border-color);background-color:var(--panel-bg);box-shadow:0 0 10px var(--border-color);flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.scene-image{object-fit:cover;object-position:center;width:100%;height:100%;image-rendering:pixelated;opacity:.8;transition:opacity .5s;display:block}.placeholder-text{font-family:var(--font-heading);color:var(--border-color);font-size:16px;animation:1.5s infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.chat-area{border:4px solid var(--border-color);background-color:var(--panel-bg);height:340px;box-shadow:0 0 10px var(--border-color);flex-direction:column;padding:10px;display:flex}.chat-history{flex-direction:column;flex:1;gap:10px;margin-bottom:10px;padding-right:10px;display:flex;overflow-y:auto}.message{margin-bottom:8px}.message.dm{color:var(--highlight-color)}.message.player{color:#fff;text-align:right}.action-row{border-top:2px dashed var(--border-color);flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;padding-top:10px;display:flex}.dice-btn{color:var(--highlight-color);border:2px dashed var(--highlight-color);font-family:var(--font-main);background-color:#0000;padding:6px 16px;font-size:18px}.dice-btn:hover{background-color:var(--highlight-color);color:var(--bg-color)}.input-area{gap:10px;margin-top:auto;display:flex}.input-field{border:2px solid var(--border-color);color:var(--text-color);font-family:var(--font-main);background-color:#0000;outline:none;flex:1;padding:5px 10px;font-size:24px}.input-field:focus{border-color:var(--highlight-color);box-shadow:0 0 5px var(--highlight-color)}.paint-badge{border:1px solid var(--border-color);color:var(--border-color);z-index:2;pointer-events:none;background:#000000b3;padding:4px 10px;font-size:13px;animation:1.6s infinite badge-blink;position:absolute;top:10px;right:12px}@keyframes badge-blink{0%,to{opacity:.9}50%{opacity:.45}}.start-screen{justify-content:center;align-items:center}.start-btn{font-family:var(--font-heading);color:var(--highlight-color);border:4px solid var(--highlight-color);cursor:pointer;box-shadow:0 0 15px var(--highlight-color);background-color:#0000;padding:20px 40px;font-size:24px;transition:all .3s;animation:2s infinite pulse}.start-btn:hover{background-color:var(--highlight-color);color:var(--bg-color)}@keyframes pulse{0%{box-shadow:0 0 15px var(--highlight-color)}50%{box-shadow:0 0 30px var(--highlight-color)}to{box-shadow:0 0 15px var(--highlight-color)}}.choice-btn{background-color:var(--panel-bg);color:var(--highlight-color);border:2px solid var(--highlight-color);font-family:var(--font-main);text-align:left;cursor:pointer;flex:0 auto;padding:6px 16px;font-size:18px;transition:all .2s}.choice-btn:hover{background-color:var(--highlight-color);color:var(--bg-color)}.game-over-overlay{z-index:2;color:#fff;background:#960000cc;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.game-over-overlay h1{text-shadow:3px 3px #000;margin-bottom:20px;font-size:48px;animation:2s infinite pulse}.class-select{gap:24px;margin-top:30px;display:flex}.class-card{background-color:var(--panel-bg);border:4px solid var(--border-color);cursor:pointer;width:250px;font-family:var(--font-main);color:var(--text-color);text-align:center;padding:22px 18px;transition:all .2s}.class-card:hover{background-color:var(--panel-bg);color:var(--text-color);border-color:var(--highlight-color);box-shadow:0 0 18px var(--highlight-color);transform:translateY(-5px)}.class-card:hover h2{text-shadow:0 0 8px var(--highlight-color)}.class-card h2{color:var(--highlight-color);margin-bottom:10px;font-size:22px}.class-card p{color:#aaa;margin-bottom:14px;font-size:14px}.class-stats{margin-bottom:6px;font-size:14px}.class-items{color:#888;margin-top:12px;font-size:12px;line-height:1.6}.menu-btns{gap:24px;margin-top:30px;display:flex}.quest-line{text-align:center;font-size:14px;line-height:1.8}.quest-line .gems{color:gold;letter-spacing:6px;text-shadow:0 0 6px #ffd70099;font-size:20px}.type-dot{vertical-align:middle;width:8px;height:8px;margin-right:8px;display:inline-block}.td-weapon{background:#f84}.td-armor{background:#4af}.td-consumable{background:#4f8}.td-tool{background:#cc4}.td-quest{background:gold;box-shadow:0 0 4px gold}.td-misc{background:#999}.equipped-tag{color:var(--highlight-color);margin-left:6px;font-size:12px}.item-modal-backdrop{z-index:10;background:#000000a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.item-modal{background-color:var(--panel-bg);border:4px solid var(--highlight-color);width:420px;max-width:90vw;box-shadow:0 0 20px var(--highlight-color);padding:24px;animation:.25s ease-out forwards loot-pop}.item-modal h2{color:var(--highlight-color);margin-bottom:10px;font-size:20px}.type-badge{border:2px solid;margin-bottom:14px;padding:3px 10px;font-size:12px;display:inline-block}.tb-weapon{color:#f84}.tb-armor{color:#4af}.tb-consumable{color:#4f8}.tb-tool{color:#cc4}.tb-quest{color:gold}.tb-misc{color:#999}.item-desc{color:#ccc;margin-bottom:12px;font-size:15px;line-height:1.7}.item-effect{color:#4f8;margin-bottom:18px;font-size:14px;line-height:1.6}.item-actions{gap:10px;display:flex}.invite-input{flex:2;font-size:18px}.invite-hint{color:#aaa;text-align:center;margin:10px 0 24px;font-size:16px}.invite-form{align-items:stretch;gap:12px;display:flex}.invite-gate-input{width:320px;font-size:20px}.invite-gate-btn{padding:10px 24px;font-size:16px;animation:none}.invite-error{color:#f33;margin-top:16px;font-size:15px}.item-actions button{font-family:var(--font-main);border:2px solid var(--highlight-color);color:var(--highlight-color);cursor:pointer;background:0 0;flex:1;padding:8px 0;font-size:15px;transition:all .15s}.item-actions button:hover:not(:disabled){background:var(--highlight-color);color:var(--bg-color)}.item-actions button:disabled{opacity:.4;cursor:not-allowed}.inventory-panel .item-btn{color:#ccc;font-family:var(--font-main);font-size:inherit;cursor:pointer;text-align:left;background:0 0;border:none;width:100%;padding:0}.inventory-panel .item-btn:hover:not(:disabled){color:var(--highlight-color);text-shadow:0 0 4px var(--highlight-color)}.inventory-panel .item-btn:disabled{cursor:default;opacity:.6}.dice-btn.pending{color:gold;border-style:solid;border-color:gold;animation:1s infinite dice-pulse}@keyframes dice-pulse{0%,to{box-shadow:0 0 4px #ffd70066}50%{box-shadow:0 0 16px #ffd700e6}}.dice-btn.pending:hover{color:var(--bg-color);background-color:gold}.victory-overlay{z-index:2;color:gold;background:#2d2300e0;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.victory-overlay h1{text-shadow:3px 3px #000,0 0 20px #ffd700cc;margin-bottom:20px;font-size:48px;animation:2s infinite pulse}.restart-btn{font-family:var(--font-main);color:inherit;cursor:pointer;background:0 0;border:3px solid;margin-top:24px;padding:10px 32px;font-size:18px;transition:all .2s}.restart-btn:hover{color:#000;background:#fff;border-color:#fff}.loot-toast-container{z-index:2;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:8%;left:50%;transform:translate(-50%)}.loot-toast{color:gold;letter-spacing:1px;text-shadow:1px 1px #000;white-space:nowrap;opacity:0;background:#000000c7;border:2px solid gold;padding:8px 20px;font-size:16px;animation:.45s ease-out forwards loot-pop;box-shadow:0 0 10px #ffd70073}@keyframes loot-pop{0%{opacity:0;transform:translateY(16px)scale(.85)}70%{opacity:1;transform:translateY(-3px)scale(1.04)}to{opacity:1;transform:translateY(0)scale(1)}}.float-num{font-family:var(--font-heading);z-index:4;pointer-events:none;opacity:0;text-shadow:3px 3px #000;font-size:44px;animation:1.4s ease-out forwards float-up;position:absolute;top:38%;left:50%}.float-num.dmg{color:#f33}.float-num.heal{color:#4f8}@keyframes float-up{0%{opacity:0;transform:translate(-50%,20px)scale(.8)}15%{opacity:1;transform:translate(-50%)scale(1.18)}30%{transform:translate(-50%,-8px)scale(1)}to{opacity:0;transform:translate(-50%,-64px)scale(1)}}.damage-overlay{z-index:3;pointer-events:none;background:radial-gradient(#ff000026 0%,#b4000099 100%);animation:.55s ease-out forwards damage-flash;position:absolute;inset:0}@keyframes damage-flash{0%{opacity:0}15%{opacity:1}to{opacity:0}}.visual-area.shaking{animation:.45s shake}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-7px,4px)}30%{transform:translate(6px,-5px)}45%{transform:translate(-5px,3px)}60%{transform:translate(4px,-3px)}75%{transform:translate(-3px,2px)}90%{transform:translate(2px,-1px)}}.app-container:after{content:" ";z-index:2;pointer-events:none;background:linear-gradient(#12101000 50%,#00000040 50%) 0 0/100% 4px,linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f) 0 0/6px 100%;display:block;position:absolute;inset:0}.mobile-tabs,.mobile-panel-toggle{display:none}@media (width<=768px){.app-container{max-width:100%;height:100dvh;padding:8px}.app-container:after{display:none}.game-title{letter-spacing:1px;margin-bottom:8px;font-size:12px}.game-layout{flex-direction:column;gap:8px}.sidebar{order:2;gap:0;width:100%}.sidebar .panel{box-shadow:none;border-width:2px;padding:10px}.sidebar .panel h2{margin-bottom:6px;padding-bottom:4px;font-size:12px}.stat-line{margin-bottom:4px;font-size:16px}.sidebar .panel.mobile-hidden{display:none}.sidebar .panel.mobile-visible{display:flex}.quest-line{font-size:13px;line-height:1.5}.quest-line .gems{letter-spacing:4px;font-size:16px}.inventory-panel li{margin-bottom:3px;font-size:15px}.mobile-panel-toggle{width:100%;font-family:var(--font-main);text-align:center;background:var(--panel-bg);color:var(--border-color);border:2px solid var(--border-color);cursor:pointer;text-transform:none;opacity:.7;order:1;padding:6px 0;font-size:15px;transition:all .15s;display:block}.mobile-panel-toggle:hover{opacity:1;color:var(--highlight-color);border-color:var(--highlight-color);background:var(--panel-bg)}.mobile-tabs{order:1;gap:0;width:100%;display:flex}.mobile-tabs.mobile-collapsed,.sidebar.mobile-collapsed{display:none}.mobile-tab{font-family:var(--font-main);text-align:center;color:var(--text-color);border:2px solid var(--border-color);cursor:pointer;text-transform:none;opacity:.5;background:0 0;border-bottom:none;flex:1;padding:8px 0;font-size:16px;transition:all .15s}.mobile-tab.active{opacity:1;color:var(--highlight-color);border-color:var(--highlight-color);background:#ffff000f;box-shadow:0 0 8px #ffff0026}.viewport{order:0;gap:8px}.visual-area{min-height:120px;max-height:32vh;box-shadow:none;border-width:2px}.chat-area{height:auto;min-height:180px;box-shadow:none;border-width:2px;flex:1;padding:8px}.chat-history{gap:6px;margin-bottom:6px;padding-right:4px}.message{margin-bottom:4px;font-size:16px;line-height:1.4}.action-row{gap:6px;margin-bottom:6px;padding-top:6px}.dice-btn,.choice-btn{padding:5px 10px;font-size:14px}.input-area{gap:6px}.input-field{padding:6px 8px;font-size:16px}.start-screen{padding:20px 16px}.start-btn{padding:14px 24px;font-size:14px}.invite-hint{margin:8px 0 16px;padding:0 10px;font-size:14px}.invite-form{flex-direction:column;gap:10px;width:100%;padding:0 10px}.invite-gate-input{width:100%;font-size:16px}.invite-gate-btn{width:100%;padding:10px 20px;font-size:14px}.invite-error{font-size:13px}.menu-btns{flex-direction:column;gap:16px;width:100%;padding:0 20px}.menu-btns .start-btn{width:100%}.class-select{flex-direction:column;gap:16px;width:100%;margin-top:16px;padding:0 10px}.class-card{border-width:2px;width:100%;padding:16px 14px}.class-card h2{margin-bottom:6px;font-size:16px}.class-card p{margin-bottom:8px;font-size:13px}.class-stats{font-size:13px}.class-items{margin-top:8px;font-size:11px}.item-modal{border-width:2px;width:92vw;max-width:92vw;padding:18px}.item-modal h2{font-size:16px}.item-desc{font-size:14px}.item-effect{margin-bottom:14px;font-size:13px}.item-actions{flex-wrap:wrap;gap:8px}.item-actions button{flex:calc(50% - 4px);min-width:calc(50% - 4px);padding:8px 0;font-size:13px}.float-num{font-size:32px}.game-over-overlay h1,.victory-overlay h1{margin-bottom:12px;font-size:28px}.game-over-overlay p,.victory-overlay p{text-align:center;padding:0 20px;font-size:14px}.restart-btn{margin-top:16px;padding:8px 24px;font-size:14px}.loot-toast{padding:6px 14px;font-size:14px}.paint-badge{padding:3px 8px;font-size:11px}}
