:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e7f7f1;background:#071015;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden}button{min-height:40px;border:1px solid #8de9d7;border-radius:6px;padding:0 14px;color:#04100d;background:#8de9d7;font:inherit;font-weight:700;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.52}button:hover{background:#c8fff0}button:disabled:hover{background:#8de9d7}input{min-height:44px;border:1px solid rgba(141,233,215,.34);border-radius:6px;padding:0 12px;color:#e7f7f1;background:#030a0dd1;font:inherit}.app-shell{position:relative;width:100vw;height:100vh;background:linear-gradient(180deg,#0710154d,#071015e0),#071015}.start-screen{display:grid;width:100vw;min-height:100vh;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(141,233,215,.12),transparent 34%),#071015}.start-panel{display:grid;width:min(420px,calc(100vw - 32px));gap:14px;border:1px solid rgba(141,233,215,.22);border-radius:8px;padding:24px;background:#050e12db;box-shadow:0 20px 50px #00000057}.start-panel h1{margin:0;font-size:34px;line-height:1}.start-panel label{font-size:13px;font-weight:700;color:#9dded3}.app-shell canvas{display:block}.hud{position:absolute;display:flex;align-items:center;gap:12px;border:1px solid rgba(141,233,215,.22);background:#050e12c2;box-shadow:0 18px 44px #00000047;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.hud-top{top:18px;left:18px;min-height:44px;border-radius:6px;padding:0 14px}.hud-stats{right:18px;top:18px;min-height:52px;border-radius:6px;padding:10px}.hud-target{top:18px;left:50%;display:grid;width:min(360px,calc(100vw - 36px));min-height:68px;gap:8px;transform:translate(-50%);border-radius:6px;padding:10px 12px}.hud-stats span,.hud-top span,.hud-top strong{white-space:nowrap}.player-panel{left:50%;bottom:96px;display:grid;width:min(520px,calc(100vw - 36px));gap:8px;transform:translate(-50%);border-radius:6px;padding:12px}.panel-title{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:12px}.panel-title span{color:#9dded3;font-size:12px;white-space:nowrap}.panel-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metric{display:grid;gap:2px;min-width:58px}.metric small{color:#9dded3;font-size:11px}.metric strong{font-size:14px}.ghost-button{min-height:32px;border-color:#8de9d752;color:#e7f7f1;background:transparent}.ghost-button:hover{background:#8de9d724}.skill-bar{position:absolute;left:50%;bottom:18px;display:grid;width:min(480px,calc(100vw - 36px));grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;transform:translate(-50%)}.skill-button{position:relative;display:grid;overflow:hidden;min-width:0;min-height:66px;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;gap:2px 8px;align-items:center;border-color:#facc1561;color:#f9fafb;background:#12181bd1;text-align:left}.skill-button:after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:#0f172abd;content:"";transform:scaleY(var(--cooldown-progress, 0));transform-origin:bottom}.skill-button:hover{background:#2c3437eb}.skill-button>*{position:relative;z-index:1}.skill-button span{display:grid;width:28px;height:28px;grid-row:1 / 3;place-items:center;border-radius:6px;color:#111827;background:#facc15;font-weight:800}.skill-button strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.skill-button small{color:#9dded3}.meter-row{display:grid;grid-template-columns:32px minmax(90px,1fr) 72px;gap:8px;align-items:center;font-size:12px}.meter-row>span{color:#9dded3;font-weight:700}.meter-row>strong{justify-self:end;font-size:12px}.meter-track{overflow:hidden;height:8px;border-radius:999px;background:#94a3b842}.meter-fill{height:100%;border-radius:inherit;transition:width .12s linear}.meter-hp,.meter-enemy{background:#ef6461}.meter-mp{background:#60a5fa}.meter-xp{background:#c4b5fd}.meter-cast{background:#facc15}.status-pills{display:flex;flex-wrap:wrap;gap:4px}.status-pills span{border:1px solid rgba(141,233,215,.24);border-radius:999px;padding:2px 7px;color:#d9fff4;background:#8de9d71a;font-size:11px}.casting-panel{position:absolute;left:50%;bottom:250px;display:grid;width:min(420px,calc(100vw - 36px));gap:8px;transform:translate(-50%);border:1px solid rgba(250,204,21,.28);border-radius:6px;padding:10px 12px;background:#050e12c7;box-shadow:0 18px 44px #00000047;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.inventory-panel{position:absolute;right:18px;bottom:18px;display:grid;grid-template-columns:repeat(5,42px);gap:6px;border:1px solid rgba(141,233,215,.2);border-radius:6px;padding:8px;background:#050e12c2;box-shadow:0 18px 44px #00000047;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.inventory-slot{position:relative;display:grid;min-height:42px;width:42px;place-items:center;border-color:#94a3b83d;padding:0;color:#e7f7f1;background:#0f172ab8}.inventory-slot:hover{background:#1e293beb}.inventory-slot span{display:grid;width:24px;height:24px;place-items:center;border-radius:999px;color:#111827;background:#facc15;font-size:13px;font-weight:800}.inventory-slot strong{position:absolute;right:3px;bottom:1px;color:#f8fafc;font-size:11px}.death-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;align-content:center;gap:16px;background:#030a0da8}.death-overlay strong{font-size:30px}.combat-log{position:absolute;left:18px;bottom:18px;display:grid;width:min(360px,calc(100vw - 36px));gap:6px;border-radius:6px;color:#fef3c7;font-size:13px;pointer-events:none}.joining-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#030a0d9e;pointer-events:none}.joining-overlay strong{border:1px solid rgba(141,233,215,.26);border-radius:6px;padding:14px 18px;background:#050e12d1}.status-dot{width:10px;height:10px;border-radius:999px;background:#9ca3af}.status-online{background:#34d399}.status-joining,.status-connecting{background:#f59e0b}.status-rejected{background:#ef6461}@media (max-width: 680px){.hud-top{right:12px;left:12px;top:12px}.hud-stats{top:68px;right:12px;left:12px;flex-wrap:wrap}.hud-target{top:130px;right:12px;left:12px;width:calc(100vw - 24px);transform:none}.player-panel{right:12px;bottom:156px;left:12px;width:calc(100vw - 24px);transform:none}.skill-bar{right:12px;left:12px;bottom:12px;width:calc(100vw - 24px);grid-template-columns:repeat(2,minmax(0,1fr));transform:none}.casting-panel{right:12px;bottom:312px;left:12px;width:calc(100vw - 24px);transform:none}.inventory-panel,.combat-log{display:none}}