:root{
  /* WC26 luxury gold theme — matches wc26coin.xyz */
  --bg:#070605;
  --bg2:#0c0a07;
  --surface:#131210;
  --surface2:#1c1a16;
  --panel:rgba(20,18,14,.82);
  --panel-solid:#131210;
  --line:rgba(255,255,255,.08);
  --line2:rgba(201,162,75,.22);
  --txt:#f5f3ee;
  --muted:#b0a892;
  --gold:#d8b25a;
  --gold-2:#9c7a32;
  --gold-hi:#f3e3b3;
  --green:#19e08a;
  --green-2:#0fb86e;
  --red:#ff5566;
  --blue:#4f7fd6;
  --shadow:0 30px 70px -25px rgba(0,0,0,.85);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Sora',system-ui,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -10%, #1d1810 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, #14100a 0%, transparent 55%),
    var(--bg);
  color:var(--txt);
  display:flex;align-items:center;justify-content:center;
  min-height:100%;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
}

/* ===================== Ambient luxury background ===================== */
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 40% at 78% -8%,rgba(201,162,75,.05),transparent 60%),radial-gradient(55% 45% at 12% 0%,rgba(201,162,75,.07),transparent 62%),linear-gradient(180deg,#040403,var(--bg2));
  animation:drift 20s ease-in-out infinite alternate;}
@keyframes drift{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-2%) scale(1.05)}}
.net{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(201,162,75,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(201,162,75,.06) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(130% 80% at 50% 0%,#000 30%,transparent 82%);mask-image:radial-gradient(130% 80% at 50% 0%,#000 30%,transparent 82%);}
.waves{position:fixed;left:0;right:0;bottom:0;height:55vh;z-index:-1;pointer-events:none;opacity:.22;}
.waves svg{position:absolute;bottom:0;width:200%;height:100%;}
.waves .w{animation:waveMove linear infinite;}
.waves .w1{animation-duration:18s;opacity:.5;}
.waves .w2{animation-duration:26s;opacity:.35;}
.waves .w3{animation-duration:34s;opacity:.22;}
@keyframes waveMove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.spot{position:fixed;top:-50%;left:-30%;width:55%;height:200%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.05),transparent);animation:sweep 11s linear infinite;will-change:transform;}
@keyframes sweep{0%{transform:rotate(9deg) translateX(-30%)}100%{transform:rotate(9deg) translateX(330%)}}
@media (prefers-reduced-motion:reduce){.glow,.waves .w,.spot{animation:none}}

#game-wrap{
  position:relative;
  width:min(96vw, calc(92vh * 1.6));
  aspect-ratio:16/10;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow), 0 0 0 1px rgba(201,162,75,.18), 0 0 70px -12px rgba(201,162,75,.2);
  background:#0a0805;
}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:filter .35s ease;}
#game-canvas.blur{filter:blur(5px) saturate(1.1) brightness(.78);}

/* ===================== Screens / panels ===================== */
.screen{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:min(4vw,40px);
  background:radial-gradient(900px 600px at 50% 35%, rgba(20,17,11,.55), rgba(5,4,3,.9));
  backdrop-filter:blur(2px);
  animation:fade .35s ease;
}
.hidden{display:none !important;}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.panel{
  width:min(960px,100%);
  max-height:100%;
  background:linear-gradient(165deg,rgba(22,20,15,.92),rgba(10,9,7,.86));
  border:1px solid var(--line2);
  border-radius:20px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  padding:clamp(16px,3vw,34px);
  animation:pop .4s cubic-bezier(.2,.8,.2,1);
  overflow:auto;
}
.panel-title{
  font-family:'Unbounded',sans-serif;font-weight:700;letter-spacing:-.5px;
  font-size:clamp(22px,3.4vw,32px);text-transform:uppercase;margin-bottom:18px;
  background:linear-gradient(180deg,#f3e3b3,#d8b25a 50%,#9c7a32);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ===================== Menu ===================== */
.menu-inner{text-align:center;animation:pop .5s cubic-bezier(.2,.8,.2,1);}
.trophy{animation:float 3.4s ease-in-out infinite;line-height:0;}
.trophy img{height:clamp(84px,13vw,150px);width:auto;display:inline-block;filter:drop-shadow(0 12px 30px rgba(201,162,75,.5)) drop-shadow(0 0 16px rgba(247,213,122,.35));}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.kicker{font-size:clamp(9px,1.4vw,13px);letter-spacing:3px;color:var(--gold);font-weight:600;margin-top:6px;text-transform:uppercase;}
.title{
  font-family:'Unbounded',sans-serif;font-weight:900;line-height:.9;
  font-size:clamp(40px,9.5vw,104px);letter-spacing:-2px;margin:8px 0 2px;
  background:linear-gradient(180deg,#fff6da 0%,#f3d27a 52%,#d8b25a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 14px 50px rgba(201,162,75,.22);
}
.title span{display:block;
  background:linear-gradient(180deg,#e9d7a6,#9c7a32);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:.6em;letter-spacing:8px;
}
.tagline{color:var(--muted);max-width:520px;margin:14px auto 0;font-size:clamp(13px,1.7vw,16px);line-height:1.6;}
.menu-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px;}
.credit{color:var(--muted);font-size:12px;margin-top:18px;opacity:.7;}

/* ===================== Buttons ===================== */
.btn{
  font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(14px,1.7vw,16px);
  padding:13px 24px;border-radius:13px;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
  color:#231400;letter-spacing:.3px;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  box-shadow:0 12px 30px -8px rgba(201,162,75,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -8px rgba(201,162,75,.7);}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4);transform:none;box-shadow:none;}
.btn-ghost{
  background:rgba(201,162,75,.1);color:var(--txt);border:1px solid var(--line2);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:rgba(201,162,75,.2);transform:translateY(-2px);}

.icon-btn{
  width:42px;height:42px;border-radius:12px;border:1px solid var(--line2);
  background:rgba(20,17,11,.6);color:var(--txt);font-size:18px;cursor:pointer;backdrop-filter:blur(8px);
  transition:background .2s, transform .12s;
}
.icon-btn:hover{background:rgba(201,162,75,.18);transform:translateY(-1px);}
#util-bar{position:absolute;top:12px;right:12px;z-index:30;display:flex;gap:8px;align-items:center;}
.vol-slider{width:88px;height:42px;cursor:pointer;accent-color:var(--gold);
  background:rgba(20,17,11,.6);border:1px solid var(--line2);border-radius:12px;padding:0 8px;}
@media (orientation:portrait){ .vol-slider{width:66px;} #util-bar{top:60px;} }

/* ===================== How to play ===================== */
.howto-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.howto-card{background:rgba(201,162,75,.05);border:1px solid var(--line);border-radius:14px;padding:16px;}
.howto-ico{font-size:30px;margin-bottom:8px;}
.howto-card h3{font-family:'Unbounded',sans-serif;font-weight:700;letter-spacing:-.3px;font-size:16px;margin-bottom:6px;}
.howto-card p{color:var(--muted);font-size:13.5px;line-height:1.5;}
.howto-card b{color:var(--txt);}
.green{color:var(--green);font-weight:600;}
.panel-buttons{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px;}

/* ===================== Team select ===================== */
.vs-bar{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:6px;}
.slot{
  flex:1;max-width:340px;display:flex;align-items:center;gap:12px;
  background:rgba(201,162,75,.05);border:2px solid var(--line);border-radius:14px;
  padding:12px 16px;cursor:pointer;color:var(--txt);transition:border-color .2s, background .2s;
  min-height:74px;
}
.slot:hover{background:rgba(201,162,75,.1);}
.slot-you.active{border-color:var(--green);box-shadow:0 0 0 3px rgba(25,224,138,.18);}
.slot-opp.active{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,85,102,.18);}
.slot-tag{font-size:10px;letter-spacing:2px;color:var(--muted);position:absolute;transform:translateY(-26px);}
.slot{position:relative;}
.slot-flag{width:54px;height:36px;object-fit:cover;border-radius:5px;box-shadow:0 3px 10px rgba(0,0,0,.5);}
.slot-name{font-weight:600;font-size:clamp(15px,2.2vw,20px);}
.slot-you .slot-name{color:#9be8c4;}
.slot-opp .slot-name{color:#ffc2c9;}
.vs-text{font-family:'Unbounded';font-weight:900;font-size:26px;color:var(--gold);}

.pick-prompt{text-align:center;color:var(--muted);font-size:13.5px;margin:10px 0 14px;min-height:18px;}
.pick-prompt b{color:var(--txt);}

.select-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.search{
  flex:1;min-width:160px;background:rgba(0,0,0,.3);border:1px solid var(--line2);color:var(--txt);
  padding:10px 14px;border-radius:11px;font-family:inherit;font-size:14px;outline:none;
}
.search:focus{border-color:var(--gold);}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  font-size:12px;font-weight:600;padding:7px 12px;border-radius:20px;cursor:pointer;
  background:rgba(201,162,75,.06);border:1px solid var(--line);color:var(--muted);transition:.15s;
}
.chip:hover{color:var(--txt);}
.chip.active{background:linear-gradient(90deg,var(--gold),var(--gold-2));color:#231400;border-color:transparent;}

.team-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;
  max-height:min(40vh,320px);overflow:auto;padding:4px 4px 8px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.team-grid::-webkit-scrollbar{width:8px;}
.team-grid::-webkit-scrollbar-thumb{background:rgba(201,162,75,.3);border-radius:8px;}
.team-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:rgba(201,162,75,.05);border:2px solid transparent;border-radius:12px;
  padding:9px 6px;cursor:pointer;transition:transform .12s, background .15s, border-color .15s;
}
.team-card:hover{transform:translateY(-3px);background:rgba(201,162,75,.12);}
.team-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.45);background:#221d14;}
.team-card .tn{font-size:11px;font-weight:600;text-align:center;line-height:1.1;color:#e8dfca;}
.team-card .star{position:absolute;top:5px;right:6px;font-size:11px;filter:drop-shadow(0 1px 2px #000);}
.team-card.sel-you{border-color:var(--green);background:rgba(25,224,138,.14);}
.team-card.sel-opp{border-color:var(--red);background:rgba(255,85,102,.14);}
.team-card .badge{
  position:absolute;top:-7px;left:-7px;font-size:9px;font-weight:700;letter-spacing:.5px;
  padding:3px 6px;border-radius:8px;color:#231400;
}
.team-card.sel-you .badge{background:var(--green);}
.team-card.sel-opp .badge{background:var(--red);color:#fff;}
.select-buttons{justify-content:space-between;}

/* ===================== HUD ===================== */
#hud{
  position:absolute;top:0;left:0;right:0;z-index:15;
  display:flex;align-items:stretch;gap:8px;padding:10px 12px;
  background:linear-gradient(180deg,rgba(7,6,5,.88),rgba(7,6,5,0));
  pointer-events:none;
}
.hud-team{display:flex;align-items:center;gap:10px;flex:1;}
.hud-opp{justify-content:flex-end;}
.hud-team img{width:42px;height:28px;object-fit:cover;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.6);}
.hud-team-info{display:flex;flex-direction:column;gap:3px;}
.hud-team-info.right{align-items:flex-end;}
.hud-name{font-family:'Unbounded';font-weight:700;font-size:clamp(13px,2vw,18px);letter-spacing:.5px;}
.hud-score{font-family:'JetBrains Mono';font-weight:700;font-size:clamp(24px,4vw,38px);min-width:30px;text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.6);}
.dots{display:flex;gap:4px;}
.dot{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:transparent;transition:.2s;}
.dot.scored{background:var(--green);border-color:var(--green);box-shadow:0 0 8px rgba(25,224,138,.7);}
.dot.missed{background:var(--red);border-color:var(--red);}
.dot.missed::after{content:"";}
.hud-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:120px;}
.hud-round{font-family:'Unbounded';font-weight:700;font-size:clamp(13px,1.8vw,17px);color:var(--gold);letter-spacing:1px;}
.hud-status{font-size:clamp(10px,1.4vw,12.5px);color:var(--muted);text-align:center;max-width:240px;}

/* ===================== Action banner ===================== */
#action-banner{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:18;
  font-family:'Unbounded',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(40px,9vw,104px);letter-spacing:2px;pointer-events:none;text-align:center;
  text-shadow:0 6px 30px rgba(0,0,0,.6);
}
#action-banner.show{animation:bannerPop .5s cubic-bezier(.2,1.4,.4,1);}
@keyframes bannerPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1)}}
.banner-goal{background:linear-gradient(180deg,#fff,#19e08a);-webkit-background-clip:text;background-clip:text;color:transparent;}
.banner-save{background:linear-gradient(180deg,#fff,#4f7fd6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.banner-miss{background:linear-gradient(180deg,#fff,#ff5566);-webkit-background-clip:text;background-clip:text;color:transparent;}
.banner-info{background:linear-gradient(180deg,#fff6da,#d8b25a);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ===== In-play move controls (shot type / stay) ===== */
.play-controls{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);z-index:17;display:flex;gap:8px;}
.shot-btn{font-family:'Sora',sans-serif;font-weight:600;font-size:13px;color:var(--txt);
  background:rgba(20,16,10,.7);border:1.5px solid var(--line2);border-radius:11px;padding:9px 14px;cursor:pointer;
  backdrop-filter:blur(6px);transition:transform .12s, background .15s, border-color .15s;white-space:nowrap;}
.shot-btn:hover{background:rgba(201,162,75,.15);transform:translateY(-1px);}
.shot-btn.sel{background:linear-gradient(90deg,var(--gold),var(--gold-2));color:#231400;border-color:transparent;box-shadow:0 6px 16px rgba(201,162,75,.4);}
#stay-btn{background:rgba(79,127,214,.28);border-color:rgba(79,127,214,.6);}
#stay-btn:hover{background:rgba(79,127,214,.5);}
.hog-btn{background:linear-gradient(180deg,#ffe9a8,#d8a93a);color:#2a1c05;border-color:rgba(255,233,168,.7);box-shadow:0 0 18px rgba(216,178,90,.55), inset 0 1px 0 rgba(255,255,255,.55);animation:hogPulse 1.6s ease-in-out infinite;}
.hog-btn:hover{background:linear-gradient(180deg,#fff3cc,#e3b648);box-shadow:0 0 28px rgba(216,178,90,.8);transform:translateY(-1px);}
.hog-btn.used{background:rgba(255,255,255,.05);color:var(--muted);border-color:var(--line);box-shadow:none;animation:none;opacity:.5;cursor:not-allowed;}
@keyframes hogPulse{0%,100%{box-shadow:0 0 16px rgba(216,178,90,.45), inset 0 1px 0 rgba(255,255,255,.55)}50%{box-shadow:0 0 27px rgba(216,178,90,.85), inset 0 1px 0 rgba(255,255,255,.55)}}
@media (orientation:portrait){
  .play-controls{bottom:auto;top:calc(56px + 62.5vw);}
  .shot-btn{font-size:12px;padding:8px 11px;}
}

/* ===================== Result screen ===================== */
.result-panel{text-align:center;max-width:640px;}
.result-title{font-family:'Unbounded';font-weight:900;font-size:clamp(40px,8vw,80px);letter-spacing:-1px;}
.result-title.win{background:linear-gradient(180deg,#fff6da,#d8b25a);-webkit-background-clip:text;background-clip:text;color:transparent;}
.result-title.lose{background:linear-gradient(180deg,#fff,#ff5566);-webkit-background-clip:text;background-clip:text;color:transparent;}
.result-teams{display:flex;align-items:center;justify-content:center;gap:22px;margin:18px 0 8px;}
.result-team{display:flex;flex-direction:column;align-items:center;gap:8px;width:120px;}
.result-team img{width:88px;height:58px;object-fit:cover;border-radius:7px;box-shadow:0 6px 18px rgba(0,0,0,.5);}
.result-team span{font-weight:600;font-size:14px;}
.result-score{font-family:'JetBrains Mono';font-weight:700;font-size:clamp(34px,7vw,60px);}
.result-detail{color:var(--muted);margin:6px 0 4px;font-size:15px;}
.result-panel .panel-buttons{justify-content:center;margin-top:22px;}

/* ===================== Online / Lobby ===================== */
.btn-online{
  background:linear-gradient(180deg,#5a86d6,#2f5499);color:#fff;
  box-shadow:0 12px 30px -10px rgba(79,127,214,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-online:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(79,127,214,.65);}
.btn-cup{background:linear-gradient(180deg,#9a63e8,#6a39c0);color:#fff;
  box-shadow:0 12px 30px -10px rgba(122,63,216,.5), inset 0 1px 0 rgba(255,255,255,.25);}
.btn-cup:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(122,63,216,.65);}
.mode-choice{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:10px 0;}
.mode-btn{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:215px;padding:18px 22px;font-size:18px;line-height:1.2;}
.mode-btn small{font-weight:500;font-size:12px;opacity:.85;max-width:200px;}
@media (max-width:560px){ .mode-btn{min-width:0;width:100%;} }
.online-panel{max-width:560px;text-align:center;}
.online-sub{color:var(--muted);font-size:15px;margin-bottom:22px;line-height:1.5;}
.online-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
.join-row{display:flex;gap:10px;max-width:420px;margin:0 auto;}
.room-code-input{flex:1;text-align:center;letter-spacing:4px;font-weight:700;text-transform:uppercase;}
.online-panel .panel-buttons{justify-content:center;margin-top:22px;}

.lobby-panel{max-width:880px;}
.room-code-box{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;
  font-size:13px;letter-spacing:1px;color:var(--muted);font-weight:600;
}
.room-code-box span{
  font-family:'JetBrains Mono';font-weight:700;font-size:28px;letter-spacing:6px;color:var(--gold);
  background:rgba(201,162,75,.1);padding:2px 14px;border-radius:10px;border:1px solid rgba(201,162,75,.3);
}
.ready-badge{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:var(--green);color:#06140c;font-size:11px;font-weight:700;letter-spacing:1px;
  padding:4px 9px;border-radius:8px;
}
.slot-opp .ready-badge{background:var(--green);}

/* name field + open-rooms browser */
.name-row{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:14px;}
.name-row label{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap;}
.name-row .search{max-width:240px;text-align:center;}
.rooms-section{margin-top:18px;text-align:left;}
.rooms-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;
  font-size:12px;letter-spacing:1px;color:var(--muted);font-weight:700;text-transform:uppercase;}
.mini-btn{background:rgba(201,162,75,.08);border:1px solid var(--line);color:var(--muted);
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:8px;cursor:pointer;transition:.15s;}
.mini-btn:hover{color:var(--txt);background:rgba(201,162,75,.16);}
.rooms-list{display:flex;flex-direction:column;gap:8px;max-height:210px;overflow:auto;
  border:1px solid var(--line);border-radius:12px;padding:8px;background:rgba(0,0,0,.22);}
.rooms-empty{color:var(--muted);font-size:13px;text-align:center;padding:20px 8px;}
.room-row{display:flex;align-items:center;gap:10px;background:rgba(201,162,75,.05);
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;}
.room-flag{width:34px;height:23px;object-fit:cover;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.4);}
.room-flag.ph{display:flex;align-items:center;justify-content:center;font-size:15px;background:rgba(201,162,75,.08);}
.room-name{font-weight:600;font-size:14px;color:var(--txt);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.room-team{font-size:12px;color:var(--muted);font-weight:600;min-width:44px;text-align:right;}
.room-count{font-size:12px;font-weight:700;color:var(--green);background:rgba(25,224,138,.14);
  border:1px solid rgba(25,224,138,.4);border-radius:8px;padding:3px 8px;min-width:42px;text-align:center;}
.room-count.full{color:var(--red);background:rgba(255,85,102,.14);border-color:rgba(255,85,102,.4);}
.room-join{padding:7px 14px;font-size:13px;border-radius:9px;}

/* tournament */
.tour-panel{max-width:760px;}
.tour-progress{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 16px;}
.tp-step{font-family:'Unbounded',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;color:var(--muted);
  padding:4px 10px;border-radius:8px;border:1px solid var(--line2);}
.tp-step.cur{color:#231400;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-color:transparent;}
.tp-step.done{color:var(--green);border-color:rgba(25,224,138,.5);}
.tp-sep{color:var(--muted);font-weight:700;}
.tour-matches{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px;}
.tour-match{display:flex;align-items:center;gap:8px;background:rgba(201,162,75,.05);
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;justify-content:space-between;}
.tour-match.tm-mine{border-color:var(--gold);background:rgba(216,178,90,.1);box-shadow:0 0 0 2px rgba(216,178,90,.15);}
.tm-side{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
.tm-side img{width:26px;height:18px;object-fit:cover;border-radius:3px;}
.tm-side span{font-weight:600;font-size:13px;}
.tm-side.tm-win span{color:var(--green);}
.tm-side.tm-lose{opacity:.4;}
.tm-vs{font-size:11px;color:var(--muted);font-weight:700;padding:0 2px;}
.tour-next{text-align:center;color:var(--muted);font-size:14px;margin:6px 0 12px;}
.tour-next b{color:var(--txt);}

/* online tournament lobby */
.tlobby-panel{max-width:820px;}
.tslots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px;}
.tslot{position:relative;display:flex;align-items:center;gap:6px;background:rgba(201,162,75,.05);
  border:1px solid var(--line);border-radius:9px;padding:6px 8px;min-height:42px;font-size:12px;}
.tslot.empty{border-style:dashed;opacity:.55;justify-content:center;}
.tslot.me{border-color:var(--green);background:rgba(25,224,138,.12);}
.tslot img{width:24px;height:16px;object-fit:cover;border-radius:3px;flex:none;}
.tslot-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tslot-empty{color:var(--muted);font-size:11px;}
.tslot-q{width:24px;height:16px;display:inline-flex;align-items:center;justify-content:center;background:rgba(201,162,75,.1);border-radius:3px;flex:none;}
.tslot-host{position:absolute;top:-7px;left:-4px;font-size:8px;font-weight:700;background:var(--gold);color:#231400;padding:2px 5px;border-radius:6px;letter-spacing:.5px;}
.tslot-bot{font-size:9px;color:var(--muted);font-weight:700;margin-left:auto;}
@media (max-width:560px){ .tslots{grid-template-columns:repeat(2,1fr);} }

@media (max-width:560px){
  .howto-grid{grid-template-columns:1fr;}
  .vs-bar{flex-direction:column;}
  .slot{max-width:none;width:100%;}
  .online-actions{flex-direction:column;}
}

/* ---- Portrait / mobile: canvas fills width; menus + HUD use the full screen ---- */
@media (orientation:portrait){
  body{align-items:flex-start;}
  #game-wrap{width:100vw;border-radius:0;box-shadow:none;margin-top:54px;}
  .screen{position:fixed;}            /* break out of the short canvas band */
  .panel{max-height:100dvh;}
  /* HUD pinned to the top of the viewport, clear of the pitch */
  #hud{position:fixed;top:0;left:0;right:0;padding:6px 8px;gap:6px;
       background:linear-gradient(180deg,rgba(7,6,5,.96),rgba(7,6,5,.72));}
  .hud-center{min-width:0;}
  .hud-team img{width:28px;height:19px;}
  .hud-name{font-size:12px;}
  .hud-score{font-size:22px;min-width:20px;}
  .hud-round{font-size:12px;}
  .hud-status{font-size:10px;max-width:140px;line-height:1.15;}
  .dot{width:8px;height:8px;}
  #util-bar{top:60px;}
}
@media (orientation:portrait) and (max-width:520px){
  .team-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));max-height:46vh;}
  .name-row{flex-direction:column;gap:6px;}
  .name-row .search{max-width:none;width:100%;}
  .join-row{flex-wrap:wrap;}
  .tour-matches{grid-template-columns:1fr;}
}