:root{--bg: #0a0b0f;--bg2: #12141b;--panel: #161922;--panel2: #1d212c;--line: #2a2f3d;--text: #eef0f5;--muted: #9aa1b2;--gold: #e3bf5e;--gold2: #b8902f;--accent: #4f8bff;--good: #5ed39a;--warn: #ffb74d;--bad: #ff6b6b;--radius: 12px;--font: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;--display: "Oswald", "Arial Narrow", sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}body{background:radial-gradient(1200px 600px at 50% -200px,#1c2233 0%,var(--bg) 60%) fixed}a{color:var(--gold);text-decoration:none}button{font:inherit}.app{max-width:1280px;margin:0 auto;padding:0 16px 48px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:18px}.brand{font-family:var(--display);font-weight:700;letter-spacing:.12em;font-size:20px;color:var(--text)}.brand span{color:var(--gold)}.topbar .who{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;flex-wrap:nowrap}.topbar .who>*{white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:600;transition:background .12s,border-color .12s,transform 80ms;min-height:42px}.btn:hover{border-color:#48506a}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(180deg,#f2d27a,#c9962b);color:#1a1406;border-color:#c9962b}.btn.ghost{background:transparent}.btn.small{padding:6px 10px;min-height:32px;font-size:13px}.btn.danger{border-color:#6b2b2b;color:#ffb3b3}.panel{background:linear-gradient(180deg,var(--panel) 0%,#12151d 100%);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.panel h2,.panel h3{margin:0 0 12px;font-family:var(--display);letter-spacing:.04em;font-weight:600}.panel h2{font-size:20px}.panel h3{font-size:16px;color:var(--muted)}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.spread{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:11px}.display{font-family:var(--display)}input,select,textarea{font:inherit;color:var(--text);background:#0e1016;border:1px solid var(--line);border-radius:8px;padding:9px 11px;min-height:40px}input:focus,select:focus{outline:2px solid #3d5a9e;outline-offset:0}label.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.error{color:#ffb3b3;background:#2a1414;border:1px solid #5a2323;padding:8px 12px;border-radius:8px;font-size:14px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);z-index:50;max-width:calc(100% - 32px)}.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:#0f1118;font-size:12px;color:var(--muted)}.chip.on{border-color:var(--gold2);color:var(--gold)}.tabs{display:flex;gap:6px;flex-wrap:wrap}.tabs button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:13px;min-height:34px}.tabs button.on{background:#2a2412;border-color:var(--gold2);color:var(--gold)}table.tbl{width:100%;border-collapse:collapse;font-size:14px}table.tbl th,table.tbl td{padding:8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}table.tbl th{color:var(--muted);font-weight:500;font-size:12px}table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}.scroll-x{overflow-x:auto}.hero{text-align:center;padding:18px 0 8px}.hero h1{font-family:var(--display);font-size:clamp(30px,6vw,54px);letter-spacing:.08em;margin:0}.hero h1 span{color:var(--gold)}.hero p{color:var(--muted);margin:6px 0 18px}.mode-card{display:flex;flex-direction:column;gap:10px}.mode-card .title{font-family:var(--display);font-size:22px;letter-spacing:.04em}.showcase{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0 24px}.seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.seat{border:1px solid var(--line);border-radius:10px;padding:12px;background:#0f1118;min-height:74px}.seat .name{font-weight:700}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#555}.dot.on{background:var(--good)}.code{font-family:var(--display);font-size:34px;letter-spacing:.25em;color:var(--gold)}.draft-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}.pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.pool .slot{position:relative}.pool .taken{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-12deg);background:#000000c7;border:1px solid var(--line);padding:3px 8px;border-radius:6px;font-size:11px;white-space:nowrap;pointer-events:none}.turn-banner{position:sticky;top:0;z-index:10;padding:10px 14px;border-radius:10px;background:#151925ee;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line);margin-bottom:12px}.turn-banner.mine{border-color:var(--gold2);box-shadow:0 0 0 1px #6b5418 inset}.timer{font-family:var(--display);font-size:28px;font-variant-numeric:tabular-nums;min-width:52px;text-align:right}.timer.low{color:var(--bad)}.order-strip{display:flex;gap:3px;overflow-x:auto;padding-bottom:4px}.order-strip .o{flex:none;width:18px;height:18px;border-radius:4px;font-size:10px;display:flex;align-items:center;justify-content:center;color:#111;opacity:.35}.order-strip .o.done{opacity:.15}.order-strip .o.now{opacity:1;outline:2px solid #fff}.plist{display:flex;flex-direction:column;gap:6px}.prow{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;background:#0f1118;border:1px solid transparent;font-size:13px;min-height:40px}.prow.clickable{cursor:pointer}.prow.selected{border-color:var(--gold2);background:#241e0e}.prow .ovr{font-family:var(--display);font-weight:700;width:26px;text-align:center;font-size:16px}.prow .pos{font-family:var(--display);color:var(--muted);width:34px;font-size:13px}.prow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rar-common{color:#c9ccd2}.rar-rare{color:#8fb2ff}.rar-epic{color:#c39bff}.rar-legendary{color:#f2d27a}.rar-icon{color:#a7f3ec}.lineup-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}.pitch{position:relative;width:100%;aspect-ratio:68 / 100;max-height:640px;margin:0 auto;border-radius:10px;background:repeating-linear-gradient(180deg,#17402a 0 10%,#1a4a30 10% 20%),#17402a;border:2px solid #2f6b47;overflow:hidden}.pitch svg.lines{position:absolute;inset:0;width:100%;height:100%}.pitch .pslot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;width:76px;text-align:center}.pitch .pslot .lbl{font-size:11px;background:#000000a6;padding:1px 6px;border-radius:6px;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pitch .pslot .rt{font-family:var(--display);font-size:12px;padding:0 5px;border-radius:4px}.pitch .pslot.sel .lbl{outline:2px solid var(--gold)}.fit-good{background:#1f6b3e}.fit-ok{background:#6b5a1f}.fit-bad{background:#6b1f1f}.meter{height:8px;border-radius:99px;background:#0e1016;overflow:hidden;border:1px solid var(--line)}.meter>div{height:100%;background:linear-gradient(90deg,#c9962b,#f2d27a)}.tactics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:linear-gradient(180deg,#1b1f2b,#11141c);border:1px solid var(--line)}.scoreboard .team{font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scoreboard .team.away{text-align:right}.scoreboard .score{font-family:var(--display);font-size:40px;text-align:center;line-height:1}.scoreboard .clock{text-align:center;color:var(--gold);font-family:var(--display);font-size:14px}.match-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}.board{position:relative;width:100%;aspect-ratio:105 / 68;border-radius:10px;overflow:hidden;background:#17402a;border:2px solid #2f6b47}.board svg{width:100%;height:100%;display:block}.goal-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:clamp(36px,8vw,72px);letter-spacing:.12em;color:var(--gold);text-shadow:0 4px 24px #000;background:#00000059;animation:flash 1.8s ease-out forwards;pointer-events:none}@keyframes flash{0%{opacity:0;transform:scale(.8)}15%{opacity:1;transform:scale(1.05)}80%{opacity:1}to{opacity:0}}.events{display:flex;flex-direction:column;gap:4px;max-height:420px;overflow-y:auto;font-size:13px}.ev{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:5px 8px;border-radius:6px;background:#0f1118}.ev.goal{background:#2a2412;border:1px solid var(--gold2)}.ev .min{font-family:var(--display);color:var(--muted)}.statbar{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center;font-size:13px;margin:6px 0}.statbar .bars{display:flex;flex-direction:column;gap:3px}.statbar .lbl{text-align:center;color:var(--muted);font-size:12px}.statbar .track{display:flex;height:6px;border-radius:99px;overflow:hidden;background:#0e1016}.modal-bg{position:fixed;inset:0;background:#000000b3;z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}.modal{width:min(960px,100%)}.rank-1{color:#f2d27a}.rank-2{color:#d9dde6}.rank-3{color:#e0a26b}@media(max-width:960px){.draft-layout,.lineup-layout,.match-layout,.grid3{grid-template-columns:minmax(0,1fr)}}@media(max-width:640px){.brand{font-size:16px;letter-spacing:.08em}.topbar .who .uname{display:none}.grid2{grid-template-columns:minmax(0,1fr)}.seats{grid-template-columns:repeat(2,minmax(0,1fr))}.pool{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}.tactics{grid-template-columns:minmax(0,1fr)}.scoreboard .score{font-size:30px}.pitch .pslot{width:58px}.pitch .pslot .lbl{max-width:58px;font-size:10px}}.tier-badge{display:inline-flex;align-items:baseline;gap:6px;padding:2px 10px;border:1px solid;border-radius:999px;font-family:var(--display);letter-spacing:.06em;font-size:13px;background:#0f1118;white-space:nowrap}.tier-badge .tier-rating{color:var(--text)}.tier-badge.large{font-size:22px;padding:4px 16px}.mode-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;margin-bottom:12px;border:1px solid var(--line);border-radius:10px;background:#0f1118}.mode-banner.ranked{border-color:#6fd3c955}.mode-banner.solo{border-color:#e3bf5e55}.mode-banner.event{border-color:#c58bff55}.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}.stat{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#0f1118}.stat .label{font-size:11px;color:var(--muted)}.stat .value{font-family:var(--display);font-size:24px}.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.table th{color:var(--muted);font-weight:500}.table tr.me td{background:#e3bf5e14}.delta-up{color:var(--good)}.delta-down{color:var(--bad)}.stars{color:var(--gold);letter-spacing:2px}.result-box{text-align:center;padding:14px;border-radius:12px;border:1px solid var(--line);background:#0f1118}.result-box.good{border-color:var(--good)}.result-box.bad{border-color:var(--bad)}.event-card{display:flex;flex-direction:column;gap:8px}.event-card .name{font-family:var(--display);font-size:20px;letter-spacing:.04em}
