#match-page{max-width:1020px;min-height:70vh;margin:30px auto 80px;padding:0 28px}
#match-page .club-heading{margin:36px 0 22px}
.match-summary{display:flex;align-items:center;gap:12px;max-width:900px;margin-bottom:22px;padding:14px 18px;border:1px solid #d2eadc;border-radius:18px;background:linear-gradient(110deg,#f8fffae8,#eaf5fbe8);box-shadow:0 10px 25px #357d7014;color:#346b55;font-size:13px;font-weight:800}
.match-summary-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#d7f1e0;color:#328369}.match-summary-icon .sf-icon{width:23px;height:23px}.match-summary strong{font:900 21px "Sweet Nunito",sans-serif;font-variant-numeric:tabular-nums}.match-summary small{margin-left:auto;color:#648174;font-size:11px;font-weight:650}
.match-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:900px}.match-mode{display:grid;grid-template-columns:49px minmax(0,1fr);column-gap:13px;row-gap:4px;min-height:101px;padding:16px;border:1px solid #d8e9dc;border-radius:19px;background:linear-gradient(145deg,#ffffffd9,#eaf7efca);box-shadow:0 10px 25px #38786b13,inset 0 1px #fff;text-align:left;transition:transform .2s,border-color .2s,box-shadow .2s}.match-mode:hover{transform:translateY(-3px);box-shadow:0 15px 30px #38786b22}.match-mode.selected{border-color:#55ae8c;box-shadow:0 0 0 2px #8ed9b693,0 15px 30px #38786b20}.match-mode:focus-visible{outline:3px solid #238776;outline-offset:3px}.match-mode-icon{display:grid;grid-row:1/4;place-items:center;width:49px;height:49px;border-radius:15px;background:linear-gradient(135deg,#d9f3e1,#dceffa);color:#297f68}.match-mode.selected .match-mode-icon{background:linear-gradient(130deg,#b9e9c9,#c9e8ec)}.match-mode-icon .sf-icon{width:28px;height:28px}.match-mode>strong{align-self:end;color:#275f4c;font:400 20px "Sweet Round",sans-serif}.match-mode-online,.match-mode-waiting{color:#5e7c6e;font-size:11px;font-weight:750}.match-mode-online i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#49b889}.match-mode-online strong,.match-mode-waiting strong{font-variant-numeric:tabular-nums;color:#2d765b}.match-mode-waiting{grid-column:2;color:#7d8894}
.match-start{margin-top:20px;min-width:235px}.match-message{min-height:1.5em;margin:12px 0;color:#aa5349;font-size:12px;font-weight:750}.match-login{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#4c7563;font-size:13px}.match-login a{display:inline-flex;min-height:44px;align-items:center;color:#1f8064;font-weight:900;text-decoration:underline;text-underline-offset:3px}
.match-searching,.match-found{position:relative;overflow:hidden;isolation:isolate;max-width:640px;margin:20px auto 0;padding:35px 24px;border:1px solid #d3e8dc;border-radius:26px;background:radial-gradient(circle at 50% 20%,#f9fffd,#e7f5ef 68%,#e9effb);box-shadow:0 18px 39px #327d6c20;text-align:center}.match-searching[hidden],.match-found[hidden]{display:none!important}.match-search-title,.match-found h2{margin:12px 0 5px;color:#255e4a;font:400 30px "Sweet Round",sans-serif}.match-search-sub,.match-found-copy{margin:5px 0 20px;color:#5c7e6d;font-size:12px}.match-cancel{min-height:44px;padding:9px 18px;border:1px solid #9fcdb9;border-radius:12px;background:#fff9;color:#2d7058;font-weight:850}.match-cancel:hover{background:#e9f7ee}.match-cancel:focus-visible{outline:3px solid #238776;outline-offset:3px}
.match-orbit{position:relative;display:grid;place-items:center;width:112px;height:112px;margin:4px auto 14px;border:1px dashed #99c9af;border-radius:50%;animation:match-turn 5s linear infinite}.match-orbit:before,.match-orbit:after{content:"";position:absolute;inset:12px;border:1px solid #b7dfca;border-radius:50%}.match-orbit:after{inset:24px;background:#e7f6e9}.match-orbit>span{z-index:1;display:grid;place-items:center;width:60px;height:60px;border-radius:19px;background:linear-gradient(130deg,#bdf0bf,#d6edf6);color:#2d8268;transform:rotate(-8deg)}.match-orbit>span .sf-icon{width:39px;height:39px}.match-orbit i{position:absolute;top:-5px;left:50%;width:11px;height:11px;border-radius:50%;background:#54b899;box-shadow:0 0 0 5px #c8efdc}.match-orbit i:last-child{top:auto;bottom:0;left:12%;width:8px;height:8px;background:#87a6d6;box-shadow:0 0 0 4px #dce8f8}@keyframes match-turn{to{transform:rotate(360deg)}}
.match-found{padding:40px 24px 35px;border-color:#b9e7cd;background:radial-gradient(circle at center 10%,#fff6d9,#e9f9e9 56%,#e6f0fb);animation:match-found-in .55s cubic-bezier(.2,1.3,.4,1) both}.match-found-icon{position:relative;z-index:1;display:grid;place-items:center;width:90px;height:90px;margin:0 auto 13px;border-radius:28px;background:linear-gradient(140deg,#6dcca1,#468cb2);box-shadow:0 14px 30px #338c8290;color:#fff;animation:match-pop .8s cubic-bezier(.2,1.5,.4,1) both}.match-found-icon .sf-icon{width:49px;height:49px}.match-found-game{position:relative;z-index:1;color:#397a62;font-size:15px}.match-found h2,.match-found-copy{position:relative;z-index:1}.match-found-rays{position:absolute;inset:-25%;background:repeating-conic-gradient(from 0deg at 50% 45%,#9adab623 0 16deg,transparent 16deg 32deg);animation:match-turn 12s linear infinite}@keyframes match-found-in{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}@keyframes match-pop{from{transform:scale(.2) rotate(-45deg)}70%{transform:scale(1.15) rotate(7deg)}to{transform:scale(1) rotate(-7deg)}}
.match-duel{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;max-width:340px;margin:19px auto 12px}.match-duel span{display:flex;align-items:center;gap:9px;min-width:0;padding:7px 10px;border:1px solid #d0e6d8;border-radius:14px;background:#ffffffab;text-align:left}.match-duel img{width:32px;height:32px;flex:none;border-radius:10px;object-fit:cover;background:#d9f1df}.match-duel strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#315f4c;font-size:12px}.match-duel b{color:#6b9e87;font:900 12px "Sweet Nunito",sans-serif}.match-found-copy{margin-bottom:0}
@media(max-width:650px){#match-page{padding:0 17px;margin-top:25px}.match-summary{padding:12px}.match-summary small{font-size:9px}.match-modes{grid-template-columns:1fr;gap:10px}.match-mode{min-height:90px;padding:13px}.match-mode>strong{font-size:18px}.match-start{width:100%}.match-searching,.match-found{padding:30px 18px}.match-search-title,.match-found h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){.match-orbit,.match-found,.match-found-icon,.match-found-rays{animation:none!important}.match-mode:hover{transform:none}}
.lobby-presence{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}.lobby-online{display:inline-flex;align-items:center;gap:7px;color:#346f59;font-size:13px;font-weight:850}.lobby-online i{width:8px;height:8px;border-radius:50%;background:#4bb889;box-shadow:0 0 0 4px #d8f2df}.lobby-online strong{font:900 17px "Sweet Nunito",sans-serif;font-variant-numeric:tabular-nums}.lobby-online-link,.match-online-link{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 13px;border:1px solid #b6dcc7;border-radius:13px;background:linear-gradient(135deg,#fafffb,#eaf7f1);color:#286f55;font-size:12px;font-weight:850;text-decoration:none;box-shadow:0 5px 15px #327d6c14;transition:transform .2s,background .2s}.lobby-online-link:hover,.match-online-link:hover{transform:translateY(-2px);background:#e0f5e9}.lobby-online-link:focus-visible,.match-online-link:focus-visible{outline:3px solid #238776;outline-offset:3px}.lobby-online-link .sf-icon{width:15px;height:15px}.match-online-link{margin-left:8px;white-space:nowrap}
#online-page{max-width:1020px;min-height:70vh;margin:30px auto 80px;padding:0 28px}#online-page .club-heading{margin:36px 0 22px}.online-summary{display:flex;align-items:center;gap:18px;max-width:900px;min-height:124px;padding:22px 24px;border:1px solid #cce8db;border-radius:24px;background:radial-gradient(circle at 15% 0,#f9fffc,#e8f6f1 65%,#ebeffb);box-shadow:0 15px 32px #327d6c18}.online-summary-icon{display:grid;place-items:center;flex:none;width:62px;height:62px;border-radius:20px;background:linear-gradient(140deg,#bde9cd,#cde9f3);color:#297a62}.online-summary-icon .sf-icon{width:36px;height:36px}.online-summary>div{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;color:#3a7059;font-weight:800}.online-summary strong{color:#276b51;font:900 38px "Sweet Nunito",sans-serif;font-variant-numeric:tabular-nums}.online-summary p{flex-basis:100%;margin:0;color:#637f70;font-size:12px;font-weight:700}.online-summary>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-left:auto;padding:9px 16px;border-radius:14px;background:linear-gradient(120deg,#377f60,#428f8c);color:white;font-size:13px;font-weight:850;text-decoration:none;white-space:nowrap}.online-summary>a:focus-visible{outline:3px solid #238776;outline-offset:3px}.online-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:900px;margin:30px 0 3px}.online-list-heading h2{margin:0;color:#2a644d;font:400 25px "Sweet Round",sans-serif}.online-refresh{min-height:44px;padding:8px 15px;border:1px solid #b6dcc7;border-radius:12px;background:#f9fffb;color:#287255;font-size:12px;font-weight:850}.online-refresh:hover{background:#e4f6e9}.online-refresh:focus-visible{outline:3px solid #238776;outline-offset:3px}.online-refresh:disabled{opacity:.58;cursor:wait}.online-note,.online-status{max-width:900px;margin:0 0 16px;color:#688273;font-size:12px;line-height:1.6}.online-status{margin-top:16px}.online-player-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:900px}.online-player-card{display:flex;align-items:center;gap:13px;min-width:0;min-height:82px;padding:12px 15px;border:1px solid #d5eadf;border-radius:18px;background:linear-gradient(135deg,#ffffffdf,#ecf7f3c7);box-shadow:0 9px 22px #357d7012}.online-player-avatar{width:50px;height:50px;flex:none;border:2px solid #fff;border-radius:16px;object-fit:cover;background:#d9f1df;box-shadow:0 4px 12px #327d6c22}.online-player-detail{display:flex;flex-direction:column;gap:3px;min-width:0}.online-player-detail strong{overflow-wrap:anywhere;color:#285f4b;font-size:15px}.online-player-detail span{color:#718778;font-size:11px}.online-player-badge{margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex:none;color:#318263;font-size:11px;font-weight:850}.online-player-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:#4ab789}.online-empty,.online-more{grid-column:1/-1;padding:22px;border:1px dashed #b8d9c6;border-radius:18px;background:#f8fdf9;color:#5c7c6a;font-size:13px;text-align:center}
@media(max-width:650px){.lobby-presence{gap:7px}.lobby-online-link{min-height:42px;padding:0 10px;font-size:11px}.match-summary{flex-wrap:wrap}.match-summary small{margin-left:0}.match-online-link{margin-left:auto}#online-page{padding:0 17px;margin-top:25px}.online-summary{gap:12px;padding:17px;flex-wrap:wrap}.online-summary-icon{width:50px;height:50px;border-radius:16px}.online-summary-icon .sf-icon{width:29px;height:29px}.online-summary strong{font-size:31px}.online-summary>a{width:100%;margin-left:0}.online-player-list{grid-template-columns:1fr}.online-player-card{min-height:76px}.online-list-heading h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){.lobby-online-link:hover,.match-online-link:hover{transform:none}}
@media(max-width:650px){.site-header{position:relative;row-gap:8px}.site-header nav{justify-content:flex-start;gap:12px}.site-header nav .account-chip{position:absolute;top:12px;right:14px;max-width:145px;margin:0}.site-header nav .account-chip-name{max-width:69px}}@media(max-width:380px){.site-header nav .account-chip{max-width:120px}.site-header nav .account-chip-name{max-width:48px}}