:root{color-scheme:light;color:#1f2937;background-color:#f4f7fb;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:600;color:#4c6fff;text-decoration:none}a:hover{color:#3d5bff}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:2.2rem;line-height:1.15}button{border-radius:12px;border:1px solid transparent;padding:.6em 1.1em;font-size:1em;font-weight:700;font-family:inherit;background-color:#f0f3ff;cursor:pointer;transition:border-color .25s,background .2s,transform .08s ease}button:hover{border-color:#9db0ff;background:#e6ebff;transform:translateY(-1px)}button:focus,button:focus-visible{outline:4px auto #b8c6ff}:root{--bg: #f4f7fb;--bg-accent: linear-gradient(180deg, #f6f9ff 0%, #f4f7fb 100%);--text: #1f2937;--muted: #6b7280;--primary: #4c6fff;--primary-600: #3d5bff;--primary-200: #dfe6ff;--mint-50: #effcf6;--mint-200: #c9f1df;--mint-400: #35b37e;--lav-50: #f5f2ff;--lav-200: #e5deff;--lav-450: #6e59d9;--rose-50: #fff1f1;--rose-200: #ffd7d7;--rose-600: #b23434;--amber-50: #fff8ec;--amber-200: #ffe3b3;--amber-700: #915f12;--slate-100: #eef1f6;--slate-200: #e3e8f3;--slate-400: #c6cedf}.page{max-width:1100px;margin:0 auto;padding:24px;color:var(--text);background:var(--bg-accent);min-height:100dvh;box-sizing:border-box}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.branding{display:flex;align-items:center;gap:10px}.logo-dot{width:14px;height:14px;border-radius:50%;background:conic-gradient(from 180deg at 50% 50%,#4c6fff,#6e59d9,#35b37e,#4c6fff);box-shadow:0 0 0 4px #4c6fff1f}.title{margin:0;font-size:2rem;color:#222a3a;letter-spacing:.3px}.meta{display:flex;gap:8px;flex-wrap:wrap}.pill{background:#eaf1ff;border:1px solid #d7e3ff;color:#2d3f7a;padding:6px 10px;border-radius:999px;font-size:.9rem}.pill.alt{background:#f1f5ff;border-color:#e1e8ff;color:#42508e}.pill.open{background:#eaf9f1;border-color:#cdebd9;color:#245d3b}.pill.connecting{background:#fff7e6;border-color:#ffe3a6;color:#7a5c12}.pill.closed{background:#fdeaea;border-color:#f3c3c3;color:#7a1e1e}.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 20px}.summary-item{background:#fff;border:1px solid var(--slate-200);border-radius:14px;padding:12px 14px;box-shadow:0 2px 10px #4c6fff0f}.label{display:block;color:var(--muted);font-size:.8rem;margin-bottom:2px}.value{color:#101827;font-weight:700}.controls{display:flex;gap:12px;margin-bottom:12px}.primary{background:linear-gradient(180deg,var(--primary) 0%,var(--primary-600) 100%);border:1px solid #3348d3;color:#fff;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer;transition:transform .08s ease,box-shadow .15s ease,filter .15s ease;box-shadow:0 6px 16px #4c6fff47}.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}.primary:active{transform:translateY(0)}.game-area{display:flex;gap:2rem;margin-top:.5rem}.card-box{flex:1;background:#fff;border:2px solid var(--slate-200);border-radius:18px;padding:18px;box-shadow:0 10px 26px #00000014;transition:transform .12s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease}.card-box:hover{transform:translateY(-2px);box-shadow:0 14px 28px #0000001a}.card-box.you{background:var(--mint-50);border-color:var(--mint-200)}.card-box.opponent{background:var(--lav-50);border-color:var(--lav-200)}.card-title{display:flex;align-items:baseline;justify-content:space-between;font-size:1.25rem;margin:0 0 10px;color:#24314d}.card-title .animal{font-size:1rem;color:#4b5566;background:#ffffffc4;border:1px solid var(--slate-200);padding:2px 10px;border-radius:999px}.stats{list-style:none;padding:0;margin:0}.stat-row+.stat-row{margin-top:8px}.stat-button{display:flex;justify-content:space-between;align-items:center;width:100%;background:#f5f7ff;color:#24314d;border:1px solid var(--primary-200);border-radius:12px;padding:10px 12px;cursor:pointer;transition:background .2s ease,transform .08s ease,box-shadow .2s ease,border-color .2s ease;box-shadow:0 3px 10px #4c6fff1f}.stat-button:hover{background:#e9edff;border-color:var(--primary);transform:translateY(-1px);box-shadow:0 6px 14px #4c6fff2e}.stat-button:active{transform:translateY(0)}.stat-label{display:flex;justify-content:space-between;align-items:center;background:#ffffffc4;border:1px solid var(--slate-200);border-radius:12px;padding:10px 12px}.stat-name{font-weight:700;color:#2b3445}.stat-value{font-variant-numeric:tabular-nums;color:#3b455c}.stat-row.win .stat-label,.stat-row.win .stat-button{border-color:var(--mint-200);background:var(--mint-50)}.stat-row.win .stat-name,.stat-row.win .stat-value{color:var(--mint-400)}.stat-row.lose .stat-label,.stat-row.lose .stat-button{border-color:var(--rose-200);background:var(--rose-50)}.stat-row.lose .stat-name,.stat-row.lose .stat-value{color:var(--rose-600)}.stat-row.tie .stat-label,.stat-row.tie .stat-button{border-color:var(--amber-200);background:var(--amber-50)}.stat-row.tie .stat-name,.stat-row.tie .stat-value{color:var(--amber-700)}.log-section{margin-top:24px}.h2{margin:0 0 8px;color:#25324a}.log-box{background:#fff;border:1px solid var(--slate-200);color:#3b3f46;border-radius:14px;padding:12px;max-height:260px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;box-shadow:inset 0 2px 6px #0000000a;white-space:pre-wrap;text-align:left}.muted{color:var(--muted)}@media (max-width: 900px){.summary{grid-template-columns:repeat(2,minmax(0,1fr))}.game-area{flex-direction:column}}.animal-img{display:block;margin:0 auto 1.5rem;border-radius:12px;background:#f5f7ff;box-shadow:0 2px 8px #4c6fff14;width:200px;height:auto}