@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;0,800;1,800;1,900&family=Space+Mono:wght@400;700&display=swap";:root{--a-1: #3f7fe0;--a-2: #cfe0fb;--a-chip: #5f93e8;--b-1: #ff4f95;--b-2: #d9d0f0;--b-chip: #b48be0;--ink: #10151d;--panel-1: #2c3542;--panel-2: #3a4658;--header-1: #1b212c;--header-2: #414d63;--blue-accent: #4f7cff;--green: #34c759;--green-dark: #21a141}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--ink);font-family:Poppins,sans-serif;color:#fff}.page{min-height:100vh;display:flex;flex-direction:column}header{background:linear-gradient(120deg,var(--header-1),var(--header-2));padding:18px 26px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.header-left{display:flex;align-items:center;gap:14px}.logo-box{border:2px solid var(--blue-accent);border-radius:8px;padding:10px 18px}.logo-box span{color:var(--blue-accent);font-weight:800;font-size:20px;letter-spacing:.03em}.logout-btn{background:none;border:1px solid rgba(255,255,255,.2);color:#cbd2dc;font-family:Poppins,sans-serif;font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:20px;cursor:pointer;transition:all .15s}.logout-btn:hover{border-color:#ff5a5f;color:#ff5a5f}.lang-btn{background:none;border:1px solid rgba(79,124,255,.5);color:var(--blue-accent);font-family:Poppins,sans-serif;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:20px;cursor:pointer;transition:all .15s}.lang-btn:hover{background:#4f7cff1f}.match-timer{font-family:Space Mono,monospace;font-size:22px;font-weight:700;letter-spacing:.04em}.ko-time{font-size:17px;font-weight:500;color:#dfe4ee;display:flex;align-items:center;gap:8px}.arena{display:grid;grid-template-columns:1fr .62fr 1fr;gap:20px;padding:22px 26px 30px;align-items:stretch;background:var(--ink)}@media (max-width: 900px){.arena{grid-template-columns:1fr}}@media (max-width: 480px){header{padding:14px 16px}.logo-box{padding:7px 12px}.logo-box span{font-size:15px}.logout-btn,.lang-btn{font-size:11px;padding:6px 12px}.match-timer{font-size:17px}.ko-time{font-size:13px}.arena{padding:14px 14px 20px;gap:14px}.player{padding:18px 18px 16px}.console{padding:16px 14px}.badge{width:46px;height:46px;font-size:10px}.stat-btn{padding:7px 2px 6px}.stat-num{font-size:16px}.stat-label{font-size:9px}.lag-btn{width:40px;height:40px;font-size:15px}}.player{border-radius:16px;padding:26px 26px 22px;position:relative;overflow:hidden;box-shadow:0 10px 30px -12px #00000080;transition:box-shadow .25s,transform .2s;height:100%;display:flex;flex-direction:column}.player.a{background:linear-gradient(135deg,var(--a-1),var(--a-2))}.player.b{background:linear-gradient(135deg,var(--b-1),var(--b-2))}.player.a.turn-active{box-shadow:0 0 0 3px var(--a-1),0 10px 30px -10px #0009}.player.b.turn-active{box-shadow:0 0 0 3px var(--b-1),0 10px 30px -10px #0009}.p-head{display:flex;justify-content:space-between;align-items:flex-start}.p-name{font-family:Poppins,sans-serif;font-weight:800;font-style:italic;font-size:clamp(20px,4.5vw,30px);background:transparent;border:none;color:#fff;width:62%;text-shadow:0 2px 10px rgba(0,0,0,.15);outline:none;letter-spacing:-.01em;line-height:1.1;white-space:normal;overflow-wrap:break-word;word-break:break-word}.badges{display:flex;flex-direction:column;gap:8px;align-items:center}.badge{width:58px;height:58px;border-radius:50%;background:#0a0f14d1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;line-height:1.15;cursor:pointer;border:2px solid transparent;transition:all .15s}.badge span{display:block}.badge:hover{border-color:#ffffff80}.badge.on{background:#ffc72c;border-color:#ffc72c;color:#1a1400;box-shadow:0 0 0 2px #ffc72c59}.p-score{font-size:clamp(72px,16vw,148px);font-weight:800;line-height:.85;color:#fff;margin:0 0 8px;text-shadow:0 4px 22px rgba(0,0,0,.25);text-align:center}.turn-underline{width:46px;height:4px;border-radius:3px;background:transparent;margin:0 auto 44px;transition:background .2s}.player.turn-active .turn-underline{background:#ff3b3b}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}.stat-btn{background:var(--a-chip);border:none;border-radius:10px;color:#fff;cursor:pointer;padding:10px 4px 8px;text-align:center;transition:transform .12s,filter .12s;font-family:Poppins,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%}.player.b .stat-btn{background:var(--b-chip)}.stat-btn:hover{filter:brightness(1.08)}.stat-btn:active{transform:scale(.94)}.stat-num{font-size:20px;font-weight:800;display:block}.stat-label{font-size:10.5px;font-weight:500;opacity:.95;display:block;margin-top:2px}.breaks-btn{width:100%;margin-top:auto;background:#10141b;color:#fff;border:none;border-radius:8px;padding:13px 0;font-weight:600;font-size:15px;cursor:pointer;font-family:Poppins,sans-serif;transition:all .15s}.breaks-btn:disabled{opacity:.35;cursor:default}.console{background:linear-gradient(160deg,var(--panel-1),var(--panel-2));border-radius:16px;padding:22px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 10px 30px -12px #00000080;height:100%}.format-row{width:100%;text-align:center}.format-select{background:none;border:none;color:#fff;font-family:Poppins,sans-serif;font-weight:700;font-size:19px;text-align:center;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.format-select option{color:#000}.leg-label{font-weight:700;font-size:15px;color:#d9dee6;width:100%;text-align:left;padding-left:6px}.lag-row{width:100%;display:flex;align-items:center;justify-content:space-between;padding:2px 6px}.lag-label{font-size:12px;font-weight:600;letter-spacing:.08em;color:#8a93a3;text-transform:uppercase}.lag-buttons{display:flex;gap:10px}.lag-btn{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:#10141b;color:#cbd2dc;font-family:Poppins,sans-serif;font-weight:700;font-size:18px;cursor:pointer;transition:all .15s}.lag-btn:hover{border-color:var(--blue-accent)}.lag-btn.on{background:var(--blue-accent);border-color:var(--blue-accent);color:#fff}.lag-btn:disabled{opacity:.4;cursor:default}.ring{width:clamp(110px,22vw,168px);height:clamp(110px,22vw,168px);border-radius:50%;border:4px solid var(--blue-accent);display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .3s,box-shadow .3s}.ring.warn{border-color:#ff5a5f;box-shadow:0 0 26px #ff5a5f73}.ring.done{animation:ringFlash .6s infinite}@keyframes ringFlash{0%,to{background:#ff5a5f0d}50%{background:#ff5a5f66}}@keyframes ringActiveBlink{0%,to{box-shadow:0 0 #4f7cff8c}50%{box-shadow:0 0 22px 6px #4f7cff8c}}.ring.active-turn{animation:ringActiveBlink .9s ease-in-out infinite}.ring-num{font-family:Space Mono,monospace;font-weight:700;font-size:clamp(40px,8vw,74px)}.ring.warn .ring-num{color:#ff5a5f}.ext-btn{background:#10141b;color:#fff;border:none;padding:8px 22px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;font-family:Poppins,sans-serif;transition:all .15s}.ext-btn:disabled{opacity:.35;cursor:default}.ext-btn:not(:disabled):hover{background:#1c222c}.row2{display:flex;gap:10px;width:100%;margin-top:-6px}.dark-btn{flex:1;background:#10141b;color:#fff;border:none;padding:12px 0;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;font-family:Poppins,sans-serif;transition:all .15s}.dark-btn:hover{background:#1c222c}.dark-btn:disabled{opacity:.35;cursor:default}.dark-btn:disabled:hover{background:#10141b}.start-btn{width:100%;background:var(--green-dark);border:none;color:#fff;padding:13px 0;border-radius:8px;font-weight:600;font-size:15px;cursor:pointer;font-family:Poppins,sans-serif;transition:transform .15s,filter .15s;margin-top:auto}.start-btn:hover{filter:brightness(1.15)}.start-btn:disabled{background:#2a3038;color:#6b7280;cursor:default}.start-btn:disabled:hover{filter:none}.log-wrap{padding:0 26px 30px;background:var(--ink)}.log-panel{background:#171c25;border-radius:14px;padding:16px 20px;border:1px solid rgba(255,255,255,.06)}.log-panel h2{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#8a93a3;margin:0 0 10px;font-weight:600}.log-list{list-style:none;margin:0;padding:0;max-height:150px;overflow-y:auto;display:flex;flex-direction:column-reverse;gap:5px}.log-list li{font-family:Space Mono,monospace;font-size:12px;color:#a7afbd;display:flex;gap:10px}.log-list li .t{color:#4b5361;flex-shrink:0}footer{text-align:center;padding:4px 0 22px;font-size:11px;color:#454e5e;background:var(--ink)}.match-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#06080cb8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;overflow-y:auto;padding:20px 0}.match-overlay.show{display:flex;opacity:1}.match-modal{position:relative;width:min(420px,88vw);background:linear-gradient(155deg,#1a2130,#0f141d);border:1px solid rgba(255,199,44,.35);border-radius:20px;padding:42px 32px 32px;text-align:center;box-shadow:0 30px 80px -20px #000000b3,0 0 0 1px #ffffff08;transform:scale(.9) translateY(10px);transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}.match-overlay.show .match-modal{transform:scale(1) translateY(0)}.modal-glow{position:absolute;top:-60px;left:50%;transform:translate(-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,199,44,.28),transparent 70%);pointer-events:none}.trophy{font-size:52px;line-height:1;margin-bottom:6px;filter:drop-shadow(0 4px 14px rgba(255,199,44,.45))}.modal-kicker{font-family:Poppins,sans-serif;font-weight:700;letter-spacing:.22em;font-size:13px;color:#ffc72c;margin-bottom:14px}.modal-winner{font-family:Poppins,sans-serif;font-weight:800;font-style:italic;font-size:clamp(24px,6vw,32px);color:#fff;margin-bottom:6px;letter-spacing:-.01em}.modal-score{font-family:Space Mono,monospace;font-weight:700;font-size:clamp(34px,9vw,46px);color:#fff;margin-bottom:6px}.modal-sub{font-size:13.5px;color:#9aa3b2;margin-bottom:26px}.modal-close{background:linear-gradient(180deg,#ffd85c,#ffc72c);border:none;color:#1a1400;font-family:Poppins,sans-serif;font-weight:700;font-size:14px;padding:11px 34px;border-radius:30px;cursor:pointer;transition:filter .15s,transform .15s}.modal-close:hover{filter:brightness(1.05);transform:translateY(-1px)}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:220;background:#06080cb8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;overflow-y:auto;padding:20px 0}.confirm-overlay.show{display:flex;opacity:1}.confirm-modal{width:min(360px,86vw);background:linear-gradient(155deg,#1a2130,#0f141d);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px 26px 24px;text-align:center;box-shadow:0 24px 60px -18px #000000a6;transform:scale(.92) translateY(8px);transition:transform .25s cubic-bezier(.2,.9,.3,1.2)}.confirm-overlay.show .confirm-modal{transform:scale(1) translateY(0)}.confirm-kicker{font-family:Poppins,sans-serif;font-weight:700;letter-spacing:.2em;font-size:11.5px;color:#8a93a3;margin-bottom:12px}.confirm-text{font-family:Poppins,sans-serif;font-weight:600;font-size:17px;color:#fff;margin-bottom:22px;line-height:1.4}.confirm-btn-row{display:flex;gap:10px}.confirm-cancel,.confirm-ok{flex:1;border:none;border-radius:8px;padding:12px 0;font-weight:700;font-size:14px;cursor:pointer;font-family:Poppins,sans-serif;transition:filter .15s,transform .15s}.confirm-cancel{background:#2a3038;color:#cbd2dc}.confirm-cancel:hover{filter:brightness(1.2)}.confirm-ok{background:linear-gradient(180deg,#3ddc6a,var(--green));color:#08260f}.confirm-ok:hover{filter:brightness(1.08);transform:translateY(-1px)}.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,rgba(79,124,255,.1),transparent 55%),radial-gradient(circle at 75% 80%,rgba(255,199,44,.08),transparent 55%),var(--ink);padding:20px;overflow-y:auto}.login-card{width:min(380px,100%);background:linear-gradient(160deg,var(--panel-1),var(--panel-2));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:36px 30px 30px;box-shadow:0 24px 70px -20px #0009}.login-logo{text-align:center;font-family:Poppins,sans-serif;font-weight:800;font-size:15px;letter-spacing:.16em;color:var(--blue-accent);margin-bottom:22px}.login-title{text-align:center;font-family:Poppins,sans-serif;font-weight:700;font-size:22px;color:#fff;margin-bottom:6px}.login-sub{text-align:center;font-size:13px;color:#8a93a3;margin-bottom:26px}.login-field{margin-bottom:16px}.login-field label{display:block;font-size:12px;font-weight:600;color:#c3cad6;margin-bottom:6px;font-family:Poppins,sans-serif;letter-spacing:.02em}.login-field input{width:100%;background:#0e131b;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:11px 13px;color:#fff;font-size:14px;font-family:Poppins,sans-serif;outline:none;transition:border-color .15s}.login-field input:focus{border-color:var(--blue-accent)}.login-error{min-height:18px;color:#ff5a5f;font-size:12.5px;margin-bottom:8px;text-align:center}.login-btn{width:100%;background:linear-gradient(180deg,#5b8bff,var(--blue-accent));border:none;color:#fff;padding:13px 0;border-radius:8px;font-weight:700;font-size:15px;cursor:pointer;font-family:Poppins,sans-serif;margin-top:6px;transition:filter .15s,transform .15s}.login-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
