:root{--c-primary: #ff5588;--c-primary-hover: #ff3377;--c-primary-shadow: rgba(255, 85, 136, .35);--c-soft-pink: #ffd7e2;--c-bg-pink: #fff5f7;--c-ink: #b6657a;--c-ink-soft: #777;--c-success: #6abf69;--c-danger: #ff5566;--c-card: #fff;--c-card-border: #ffd7e2;--c-card-shadow: rgba(255, 179, 198, .25);--radius-card: 16px;--radius-btn: 10px;--touch-target: 44px}*{box-sizing:border-box}html,body,#app{height:100%;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--c-bg-pink);color:#333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}#app{display:flex;flex-direction:column;min-height:100%;padding:16px;max-width:480px;margin:0 auto}h1,h2,h3{margin:0 0 12px;color:var(--c-ink);font-weight:700;line-height:1.25}p{margin:0 0 12px;line-height:1.5}.card{background:var(--c-card);border:2px solid var(--c-card-border);border-radius:var(--radius-card);padding:20px;box-shadow:0 2px 12px var(--c-card-shadow);margin-bottom:16px}.card-hero{text-align:center}.btn{display:inline-block;min-height:var(--touch-target);padding:12px 16px;border-radius:var(--radius-btn);border:2px solid transparent;background:var(--c-card);color:var(--c-ink);font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:transform 80ms ease,box-shadow .12s ease,background .12s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.btn:active{transform:translateY(1px) scale(.99)}.btn-primary{background:linear-gradient(135deg,#ff7099 0%,var(--c-primary) 100%);color:#fff;box-shadow:0 3px 10px var(--c-primary-shadow);min-height:56px;font-size:18px;width:100%}.btn-primary:hover{background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-hover) 100%)}.btn-primary:disabled{background:#ccc;color:#fff;box-shadow:none;cursor:not-allowed}.btn-pulse{animation:kb-cta-pulse 1.4s ease-in-out infinite}@keyframes kb-cta-pulse{0%,to{box-shadow:0 3px 10px var(--c-primary-shadow);transform:scale(1)}50%{box-shadow:0 4px 18px #ff55888c,0 0 0 6px #ff558826;transform:scale(1.015)}}.btn-secondary{background:#fff;color:var(--c-ink);border:2px solid var(--c-soft-pink)}.btn-secondary:hover{background:#ffeef3}.btn-ghost{background:transparent;color:var(--c-ink-soft);border-color:transparent;font-weight:500}.input{width:100%;min-height:var(--touch-target);padding:12px 16px;border-radius:var(--radius-btn);border:2px solid var(--c-soft-pink);background:#fff;color:#333;font-family:inherit;font-size:16px;transition:border-color .12s ease,box-shadow .12s ease}.input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-shadow)}.gate-preview{background:var(--c-bg-pink);border:2px solid var(--c-soft-pink);border-radius:12px;padding:12px;margin-top:16px;position:relative}.gate-preview-row{display:flex;align-items:center;gap:10px;padding:4px 0}.gate-preview-sprite{flex:0 0 64px;height:64px;width:64px;image-rendering:pixelated}.gate-preview-info{flex:1 1 auto;min-width:0}.gate-preview-name{font-size:13px;font-weight:700;color:var(--c-ink);margin-bottom:4px}.gate-preview-hp{height:8px;background:#eee;border-radius:4px;overflow:hidden}.gate-preview-hp-fill{height:100%;background:#6abf69;border-radius:4px;transition:width .32s ease}.gate-preview-vs{text-align:center;font-size:11px;color:var(--c-ink-soft);letter-spacing:.15em;font-weight:700;margin:4px 0;opacity:.6}.input-phone{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:22px;letter-spacing:.05em;text-align:center;font-weight:600;color:var(--c-ink)}.input-code{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:32px;letter-spacing:.4em;text-align:center;padding-left:16px;font-weight:700;color:var(--c-ink)}.invite-code{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:56px;font-weight:800;letter-spacing:.25em;color:var(--c-primary);margin:24px 8px 12px;padding-left:16px;user-select:all;-webkit-user-select:all}.text-error{color:var(--c-danger);font-size:14px;margin:0;font-weight:500}.spinner{width:48px;height:48px;margin:16px auto;border:4px solid var(--c-soft-pink);border-top-color:var(--c-primary);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status-pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;margin-bottom:8px}.status-connecting{background:#fff3cd;color:#856404}.status-open{background:#d4edda;color:#155724}.status-closed{background:#f8d7da;color:#721c24}.text-center{text-align:center}.text-muted{color:var(--c-ink-soft);font-size:14px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.battle{display:flex;flex-direction:column;gap:12px}.battle-row{background:var(--c-card);border:2px solid var(--c-card-border);border-radius:var(--radius-card);padding:12px;box-shadow:0 2px 8px var(--c-card-shadow)}.battle-name{font-size:14px;color:var(--c-ink);font-weight:600;margin-bottom:8px}.battle-side-label{display:inline-block;font-size:11px;background:var(--c-soft-pink);color:var(--c-ink);padding:2px 8px;border-radius:999px;margin-right:6px;text-transform:uppercase;letter-spacing:.5px}.active-card{display:flex;align-items:center;gap:12px}.sprite-wrap{flex:0 0 96px;height:96px;display:flex;align-items:center;justify-content:center;background:#f8f2f4;border-radius:12px;overflow:hidden}.sprite{max-width:96px;max-height:96px;image-rendering:pixelated}.sprite-idle:not(.sprite-shake){animation:kb-sprite-bob 2.2s ease-in-out infinite}@keyframes kb-sprite-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.sprite-shake{animation:kb-sprite-shake .5s ease-in-out}@keyframes kb-sprite-shake{0%{transform:translate(0)}15%{transform:translate(-6px) rotate(-2deg)}30%{transform:translate(5px) rotate(2deg)}45%{transform:translate(-4px)}60%{transform:translate(3px)}75%{transform:translate(-2px)}to{transform:translate(0)}}.sprite-attack-front{animation:kb-attack-front .5s cubic-bezier(.4,0,.2,1)!important}.sprite-attack-back{animation:kb-attack-back .5s cubic-bezier(.4,0,.2,1)!important}@keyframes kb-attack-front{0%{transform:translate(0) scale(1)}40%{transform:translate(10px,10px) scale(1.08)}to{transform:translate(0) scale(1)}}@keyframes kb-attack-back{0%{transform:translate(0) scale(1)}40%{transform:translate(-10px,-10px) scale(1.08)}to{transform:translate(0) scale(1)}}.sprite-fainted{font-size:40px;opacity:.4;animation:kb-fade-in .4s ease-out}@keyframes kb-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:.4;transform:translateY(0)}}.active-info{flex:1 1 auto;min-width:0}.species-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px}.species{font-size:16px;color:var(--c-ink);font-weight:700}.level{font-size:12px;color:var(--c-ink-soft)}.status-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;color:#fff;letter-spacing:.5px}.status-brn{background:#f08030}.status-par{background:#f8d030;color:#604}.status-frz{background:#98d8d8;color:#036}.status-slp{background:#888}.status-psn{background:#a040a0}.status-tox{background:#804080}.hp-bar-outer{width:100%;height:10px;background:#eee;border-radius:5px;overflow:hidden;margin-bottom:4px}.hp-bar-inner{height:100%;transition:width .38s ease,background .2s ease;border-radius:5px}.hp-text{font-size:11px;color:var(--c-ink-soft)}.battle{position:relative}.fx-layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:5;border-radius:var(--radius-card)}.fx-layer img{image-rendering:pixelated}.move-banner{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:50;text-align:center;font-size:26px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#fff;pointer-events:none;padding:10px 20px;background:linear-gradient(135deg,#ff7099,#f58,#ff7099);box-shadow:0 4px 16px #ff558873;text-shadow:0 2px 4px rgba(0,0,0,.25);border-radius:6px;max-width:320px;margin:0 auto;animation:kb-move-banner 1.1s cubic-bezier(.2,0,.2,1) forwards}.move-banner-them{background:linear-gradient(135deg,#58f,#47e,#58f);box-shadow:0 4px 16px #5588ff73}@keyframes kb-move-banner{0%{opacity:0;transform:translateY(-50%) scale(.5) rotate(-5deg)}15%{opacity:1;transform:translateY(-50%) scale(1.1) rotate(2deg)}25%{transform:translateY(-50%) scale(1) rotate(0)}75%{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}to{opacity:0;transform:translateY(-50%) scale(.95) rotate(0)}}.battle-log{background:#fff;border:2px solid var(--c-card-border);border-radius:var(--radius-card);padding:10px 12px;max-height:180px;min-height:100px;overflow-y:auto;font-size:13px;line-height:1.4;-webkit-overflow-scrolling:touch}.log-empty{color:var(--c-ink-soft);text-align:center;padding:16px}.log-entry{padding:2px 0}.log-turn{color:var(--c-ink);font-weight:700;margin-top:6px;padding-top:4px;border-top:1px solid var(--c-card-border)}.log-move{color:#333}.log-switch{color:var(--c-ink);font-style:italic}.log-damage{color:#c45}.log-heal{color:#494}.log-status{color:#a04080}.log-effect{color:#c08040;font-weight:600}.log-faint{color:#844;font-weight:700}.log-win{color:var(--c-primary);font-weight:700;font-size:15px}.log-misc{color:var(--c-ink-soft);font-style:italic}.log-raw{color:#aaa;font-family:monospace;font-size:10px}.battle-actions{background:var(--c-card);border:2px solid var(--c-card-border);border-radius:var(--radius-card);padding:14px;box-shadow:0 2px 8px var(--c-card-shadow)}.action-label{font-size:13px;color:var(--c-ink);font-weight:600;margin-bottom:8px}.action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.btn-move{background:linear-gradient(135deg,#fff5f7,#ffe5ee);color:var(--c-ink);border:2px solid var(--c-card-border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:8px}.btn-move:hover{background:linear-gradient(135deg,#ffeef3,#ffd7e2);border-color:var(--c-primary)}.btn-move:disabled{background:#f0f0f0;color:#aaa;cursor:not-allowed}.move-name{font-size:15px;font-weight:700}.move-pp{font-size:10px;color:var(--c-ink-soft)}.action-meta{font-size:11px;color:var(--c-ink-soft);font-weight:400}.forfeit-btn{margin-top:8px}