:root{color:#f7f8fb;background:#0b0f14;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0}button,select{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{height:100vh;min-height:650px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:12px;background:linear-gradient(180deg,#10151bfa,#080a0e),radial-gradient(circle at 20% 0%,rgba(57,214,202,.12),transparent 30%),radial-gradient(circle at 86% 2%,rgba(247,111,142,.11),transparent 28%)}.arena-shell{position:relative;min-height:450px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#090b12;box-shadow:0 18px 44px #00000057}.arena-canvas{width:100%;height:100%;display:block}.top-bar{position:absolute;z-index:20;top:12px;left:12px;right:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;pointer-events:none}.arena-actions{position:absolute;z-index:19;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;transform:translateY(clamp(48px,9vh,76px));pointer-events:none}.arena-pk-button{width:98px;height:98px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.34);border-radius:50%;background:radial-gradient(circle at 35% 25%,#ffffffc7,#fff0 28%),linear-gradient(135deg,#ffe15e,#39d6ca 54%,#f76f8e);color:#061115;font-size:28px;font-weight:950;letter-spacing:0;line-height:1;cursor:pointer;pointer-events:auto;box-shadow:0 16px 34px #00000052,0 0 0 10px #39d6ca21}.arena-pk-button span{transform:translateY(-1px)}.arena-pk-button:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 18px 38px #0000005c,0 0 0 12px #ffe15e26}.arena-pk-button:active{transform:translateY(1px) scale(.98)}.top-bar>*{pointer-events:auto}.brand-block{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:#070a0f9e;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:#39d6ca;color:#071014;font-size:12px;font-weight:950}.brand-block h1{margin:0;color:#fff;font-size:17px;line-height:1.05;letter-spacing:0}.brand-block p{margin:4px 0 0;color:#f7f8fbb8;font-size:12px;font-weight:800;line-height:1}.control-cluster{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.arena-select{min-height:38px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.26);border-radius:8px;padding:0 8px 0 10px;background:#070a0f9e;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.arena-select span{color:#f7f8fbad;font-size:11px;font-weight:850;text-transform:uppercase}.arena-select select{max-width:160px;border:0;background:transparent;color:#fff;font-size:13px;font-weight:850;outline:none}.control-button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:0 13px;background:#070a0fa8;color:#fff;font-size:13px;font-weight:900;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.icon-button{width:38px;min-width:38px;padding:0}.icon-button svg{width:18px;height:18px;display:block}.sound-button[aria-pressed=false]{color:#f7f8fb9e}.record-button{gap:7px;min-width:72px;color:#fff}.record-button-icon{display:block;flex:0 0 auto}.record-button-icon.record-dot{width:9px;height:9px;border-radius:999px;background:#ff3b58;box-shadow:0 0 0 4px #ff3b582e}.record-button-icon.stop-square{width:10px;height:10px;border-radius:3px;background:#fff}.record-button.is-recording{border-color:#ff586ec7;background:#871424c2}.record-button-text{min-width:34px;text-align:left}.control-button.primary{border-color:#39d6cac7;background:#39d6ca;color:#061115}.control-button:disabled,.arena-select select:disabled{opacity:.5;cursor:default}.control-button:not(:disabled):hover{background:#ffffff29}.control-button.primary:not(:disabled):hover{background:#65efe4}.battle-hud{position:absolute;z-index:18;left:18px;right:18px;top:78px;display:grid;grid-template-columns:minmax(160px,320px) auto minmax(160px,320px);align-items:center;gap:12px;pointer-events:none}.fighter-panel{padding:10px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:#070a0f94;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.fighter-panel.right{text-align:right}.fighter-panel-top,.fighter-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.fighter-panel.right .fighter-panel-top,.fighter-panel.right .fighter-meta{flex-direction:row-reverse}.fighter-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:14px;font-weight:950}.fighter-hp,.fighter-meta{color:#f7f8fbb8;font-size:11px;font-weight:850}.hp-track{height:9px;margin-top:8px;overflow:hidden;border-radius:8px;background:#ffffff1f}.hp-track span{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#39d6ca,#ffe15e);transition:width .12s linear}.fighter-panel.right .hp-track span{margin-left:auto;background:linear-gradient(90deg,#ffe15e,#f76f8e)}.fighter-meta{margin-top:7px}.versus{width:44px;height:44px;display:grid;place-items:center;justify-self:center;border:1px solid rgba(255,255,255,.24);border-radius:8px;background:#070a0fa3;color:#ffe15e;font-size:13px;font-weight:950;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.roster-shell{min-height:138px;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#080b10f5}.roster-head{height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 0}.side-switch{display:inline-flex;gap:4px;padding:3px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#ffffff0f}.side-button,.import-button{min-height:30px;border:0;border-radius:6px;padding:0 10px;background:transparent;color:#f7f8fbb8;font-size:12px;font-weight:900;cursor:pointer}.side-button.is-active{background:#f7f8fb;color:#121820}.import-button{border:1px solid rgba(255,255,255,.2);background:#ffffff14;color:#fff}.roster-row{height:94px;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:8px 10px 12px;scrollbar-color:rgba(255,255,255,.28) transparent}.pet-card{position:relative;width:116px;min-width:116px;height:72px;display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:1fr auto;align-items:center;gap:0 8px;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:8px;background:#ffffff0f;color:#fff;cursor:pointer}.pet-card.is-left{border-color:#39d6cac7}.pet-card.is-right{border-color:#f76f8ec7}.pet-card.is-left.is-right{border-color:#ffe15e}.pet-card:hover{background:#ffffff1f}.pet-preview{width:46px;height:46px;grid-row:1 / 3;display:grid;place-items:center;border-radius:8px;background-color:#ffffff1a;background-repeat:no-repeat;background-position:center;background-size:contain;color:#39d6ca;font-size:12px;font-weight:950}.pet-card-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:end;color:#fff;font-size:12px;font-weight:900;text-align:left}.pet-card-tags{min-height:17px;display:flex;gap:4px;align-self:start}.pet-card-tags span{border-radius:5px;padding:2px 5px;background:#ffffff29;color:#f7f8fbc7;font-size:9px;font-weight:950}.toast{position:fixed;z-index:80;left:50%;bottom:18px;transform:translate(-50%,12px);max-width:min(420px,calc(100vw - 28px));border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:10px 12px;background:#070a0fe0;color:#fff;font-size:13px;font-weight:800;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.toast.is-visible{opacity:1;transform:translate(-50%)}@media (max-width: 760px){.app-shell{min-height:100svh;grid-template-rows:minmax(0,1fr) auto;padding:8px;gap:8px}.arena-shell{min-height:420px}.top-bar{top:8px;left:8px;right:8px;flex-direction:column;gap:8px}.brand-block{width:100%}.control-cluster{width:100%;justify-content:flex-start}.arena-pk-button{width:82px;height:82px;margin-top:36px;font-size:24px}.arena-select{flex:1 1 150px}.arena-select select{max-width:100%}.battle-hud{left:8px;right:8px;top:174px;grid-template-columns:1fr;gap:6px}.versus{display:none}.fighter-panel{padding:8px}.roster-shell{min-height:132px}.pet-card{width:108px;min-width:108px}}