
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  color-scheme:dark;
  --bg:#07150c;--panel:#101c14;--panel2:#15271a;--line:#294331;
  --text:#edf7ef;--muted:#9cb2a1;--accent:#ffd34d;--green:#34c869;
  --blue:#4f92ff;--red:#ff5b52;--danger:#ff6b62;
}
html,body{margin:0;min-height:100%;background:radial-gradient(120% 90% at 50% 0,#174c27,#061008 78%);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text)}
body{overscroll-behavior:none}.hidden{display:none!important}
#app{min-height:100vh;max-width:760px;margin:auto;padding:14px 14px 88px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.brand{font-weight:900;letter-spacing:.2px}.brand span{color:var(--accent)}
.user{display:flex;align-items:center;gap:8px}.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#24352a}
.balance{background:#19291e;border:1px solid var(--line);border-radius:999px;padding:8px 11px;font-weight:800;white-space:nowrap}
.card{background:rgba(13,28,18,.94);border:1px solid var(--line);border-radius:18px;padding:15px;margin-bottom:12px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.hero{padding:22px;text-align:center}.hero h1{margin:4px 0 6px;font-size:28px}.hero p{margin:0;color:var(--muted);line-height:1.5}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
button,.btn{border:0;border-radius:13px;padding:12px 14px;background:var(--green);color:#04210e;font:800 14px inherit;cursor:pointer}
button.secondary{background:#203225;color:var(--text);border:1px solid var(--line)}
button.gold{background:var(--accent);color:#211800}button.danger{background:#50231f;color:#ffd8d5;border:1px solid #7d302b}
button:disabled{opacity:.42;cursor:not-allowed}.tile{background:#14251a;border:1px solid var(--line);border-radius:15px;padding:15px;text-align:center;cursor:pointer}
.tile.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.tile b{display:block;font-size:18px}.tile small{color:var(--muted)}
.section-title{display:flex;align-items:center;gap:8px;margin:6px 0 10px;font-weight:900}.section-title:after{content:"";height:1px;background:var(--line);flex:1}
.notice{padding:11px 12px;border-radius:12px;background:#17251a;border:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.5}
.notice.warn{border-color:#715d24;background:#2a2512;color:#f4dc87}.notice.bad{border-color:#74332f;background:#2d1715;color:#ffc7c2}
.list{display:flex;flex-direction:column;gap:8px}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#122018;border:1px solid var(--line);padding:11px;border-radius:13px}
.row .meta{min-width:0}.row .meta b{display:block}.row .meta small{color:var(--muted)}
.skin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.skin{position:relative;text-align:center;padding:12px 5px;border:1px solid var(--line);border-radius:14px;background:#132319}
.skin.owned{border-color:#3c6b49}.skin.equipped{box-shadow:0 0 0 2px var(--accent) inset}.skin .emoji{font-size:28px}.skin img{width:44px;height:44px;border-radius:50%;object-fit:cover}.skin small{display:block;color:var(--muted);margin-top:4px}.skin button{margin-top:8px;padding:7px 8px;font-size:11px;width:100%}
.tabs{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:80;width:min(730px,calc(100% - 20px));display:grid;grid-template-columns:repeat(4,1fr);gap:7px;background:#0e1912e8;border:1px solid var(--line);padding:7px;border-radius:17px;backdrop-filter:blur(12px)}
.tabs button{background:transparent;color:var(--muted);padding:9px 4px}.tabs button.active{background:#203226;color:var(--text)}
#gameView{position:fixed;inset:0;z-index:100;background:#07140b;display:flex;align-items:center;justify-content:center;overflow:hidden}
#gameCanvas{display:block;touch-action:none}.gameTop{position:fixed;top:10px;left:10px;right:10px;z-index:110;display:flex;justify-content:space-between;pointer-events:none}
.gameTop button{pointer-events:auto;background:#1b2820;color:#fff;border:1px solid #38503f;padding:8px 12px}
.queueBox{text-align:center}.spinner{width:34px;height:34px;border-radius:50%;border:4px solid #2f4937;border-top-color:var(--accent);margin:12px auto;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.score{display:flex;justify-content:center;gap:40px;font-size:27px;font-weight:900;margin-top:2px}.score .b{color:var(--blue)}.score .r{color:var(--red)}
.turn{font-size:13px;color:var(--muted);text-align:center;margin-top:3px}
.modal{position:fixed;inset:0;z-index:200;background:#000a;display:flex;align-items:center;justify-content:center;padding:16px}.modal .card{width:min(480px,100%);margin:0}
input,select{width:100%;background:#0d1911;color:var(--text);border:1px solid var(--line);border-radius:11px;padding:11px}
@media(max-width:460px){.skin-grid{grid-template-columns:repeat(3,1fr)}.hero h1{font-size:24px}.grid3{grid-template-columns:1fr 1fr 1fr}}

.rewardAttention{
  position:relative;
  overflow:visible;
  background:linear-gradient(135deg,#ffd54d,#ffb300)!important;
  color:#2b1b00!important;
  border:1px solid #ffe58a!important;
  box-shadow:0 0 0 0 rgba(255,200,40,.65);
  animation:rewardGlow 1.7s ease-in-out infinite;
}
@keyframes rewardGlow{
  0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(255,200,40,.48),0 8px 24px rgba(255,184,0,.18)}
  50%{transform:translateY(-2px);box-shadow:0 0 0 8px rgba(255,200,40,0),0 12px 32px rgba(255,184,0,.32)}
}
.giftBounce{display:inline-block;margin-right:6px;animation:giftBounce 1.1s ease-in-out infinite}
@keyframes giftBounce{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(7deg) scale(1.17)}}
.rewardBadge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 7px;margin-left:7px;border-radius:999px;
  background:#3b2500;color:#ffe680;font-size:12px;font-weight:900;
}
.rewardHero{
  display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:12px;
  background:linear-gradient(135deg,#392b09,#241c08);border:1px solid #80631d;border-radius:15px;
}
.rewardHero b{display:block;font-size:17px;color:#ffe178}
.rewardHero small{display:block;color:#d7c58f;margin-top:3px}
.giftPulse{font-size:34px;animation:giftBounce 1.1s ease-in-out infinite}
.rewardCard{
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:12px;border:1px solid var(--line);border-radius:14px;background:#122018;
}
.rewardCard.available{border-color:#80631d;background:linear-gradient(100deg,#172016,#2b230d)}
.rewardCard.claimed{opacity:.58;filter:saturate(.55)}
.rewardIcon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#233429;font-weight:900}
.rewardCard.available .rewardIcon{background:#4a390b;color:#ffd54d}
.rewardInfo b{display:block}
.rewardInfo small{display:block;color:var(--muted);margin:3px 0 4px;line-height:1.35}
.rewardInfo span{font-size:13px;color:#ffd85d;font-weight:900}
.claimBtn{padding:9px 12px;min-width:76px}
.goldPulse{
  background:linear-gradient(180deg,#ffe05e,#ffb300)!important;color:#2a1900!important;
  animation:claimPulse 1.5s ease-in-out infinite;
}
@keyframes claimPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,205,60,.55)}50%{box-shadow:0 0 0 7px rgba(255,205,60,0)}}
.claimBtn.neutral{background:#27352b!important;color:#91a297!important;border:1px solid #36483c}

.tabs5{grid-template-columns:repeat(5,1fr)}
.seasonCard{background:linear-gradient(135deg,#142a1b,#102318 55%,#26300f);border-color:#4f5a23}
.seasonHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.seasonHead small{display:block;color:#a8bd88;font-size:10px;font-weight:900;letter-spacing:1px}.seasonHead b{display:block;font-size:18px;margin-top:3px}.rankChip{padding:7px 10px;border-radius:999px;background:#ffd34d;color:#2b2000;font-weight:900}
.seasonStats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.seasonStats span{text-align:center;background:#0c1911;border:1px solid #2b4633;border-radius:11px;padding:9px 4px}.seasonStats b{display:block;font-size:18px}.seasonStats small{display:block;color:#91a799;font-size:10px;margin-top:2px}
.leaderRow{display:grid;grid-template-columns:46px minmax(0,1fr) 58px;gap:9px;align-items:center;padding:11px;background:#122018;border:1px solid var(--line);border-radius:13px}.leaderRow.me{border-color:#ffd34d;background:#29240d}.leaderRank{text-align:center;font-size:18px;font-weight:900}.leaderName b{display:block}.leaderName small{display:block;color:var(--muted);margin-top:2px}.leaderPoints{text-align:right;font-size:20px;font-weight:900;color:#ffd34d}.leaderPoints small{display:block;font-size:9px;color:var(--muted)}
.historyRow{display:grid;grid-template-columns:50px minmax(0,1fr) 52px;gap:9px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:13px;background:#122018}.historyRow.win{border-left:4px solid #38cf70}.historyRow.loss{border-left:4px solid #e95c54}.historyResult{font-size:11px;font-weight:900}.historyRow.win .historyResult{color:#6ee7b7}.historyRow.loss .historyResult{color:#fca5a5}.historyMeta b{display:block}.historyMeta small{display:block;color:var(--muted);margin-top:3px;text-transform:capitalize}.historyScore{text-align:right;font-size:21px;font-weight:900}
.skin.featured:before{content:'FEATURED';position:absolute;top:-5px;right:-5px;background:#ffd34d;color:#2b2000;padding:3px 5px;border-radius:6px;font-size:8px;font-weight:900}
@media(max-width:430px){.tabs button{font-size:11px}.seasonStats b{font-size:16px}}

.roomWaitHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.roomWaitHead small{color:#a7b9aa;font-size:10px;letter-spacing:1px;font-weight:900}.roomWaitHead h2{margin:3px 0 0}.privateCode{margin:14px 0;padding:14px;border-radius:14px;text-align:center;background:linear-gradient(135deg,#30270c,#171c0d);border:1px solid #7b651d}.privateCode small{display:block;color:#d1bd74;font-size:10px;letter-spacing:1px}.privateCode b{display:block;font-size:28px;letter-spacing:5px;color:#ffe16e;margin:7px 0 10px}.openRoomCard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:#122018}.openRoomMain{display:flex;align-items:center;gap:10px;min-width:0}.openRoomMain b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.openRoomMain small{display:block;color:var(--muted);margin-top:4px}.roomPrivacyIcon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#203126;font-size:19px}

.modeCards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modeCard{display:flex;align-items:center;gap:12px;text-align:left;padding:18px;border-radius:17px;min-height:92px}
.modeCard span:last-child{display:block}.modeCard b{display:block;font-size:17px}.modeCard small{display:block;margin-top:5px;line-height:1.35}
.modeIcon{font-size:30px}.publicMode{background:linear-gradient(135deg,#1c6637,#2b9a52);color:#f1fff5}.privateMode{background:linear-gradient(135deg,#3b2d0c,#77601c);color:#fff4c9}
@media(max-width:430px){.modeCards{grid-template-columns:1fr}}

.privateFee{margin-top:14px;padding:14px;border:1px solid #74601e;border-radius:14px;background:linear-gradient(135deg,#2b250d,#171b0e)}
.privateFee span{display:block;color:#d4c077;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px}
.privateFee b{display:block;color:#ffe06a;font-size:25px;margin:4px 0}
.privateFee small{display:block;color:#bdb28a;line-height:1.4}
.rulesCard{max-height:min(720px,90vh);overflow:auto;text-align:left}.rulesCard h2{text-align:center;margin-top:0}
.rulesList{display:flex;flex-direction:column;gap:8px}.rulesList>div{padding:10px 11px;border-radius:11px;background:#111f16;border:1px solid var(--line)}
.rulesList b{display:block;color:#ffd75a;margin-bottom:3px}.rulesList span{display:block;color:#b5c3b8;font-size:13px;line-height:1.42}

.profilePreview{display:flex;align-items:center;gap:14px;padding:14px;background:#112017;border:1px solid var(--line);border-radius:14px;margin-bottom:12px}
.profilePreview b{display:block;font-size:18px}.profilePreview small{display:block;color:var(--muted);margin-top:3px}
.pawnPreview{width:62px;height:62px;border-radius:50%;background:#e8ece9;border:5px solid #667269;display:flex;align-items:center;justify-content:center;font-size:34px;overflow:hidden}
.pawnPreview img{width:100%;height:100%;object-fit:cover}
.pawnChoiceGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.pawnChoice{background:#132319;color:var(--text);border:1px solid var(--line);border-radius:14px;padding:10px 6px}
.pawnChoice.selected{border-color:#ffd34d;box-shadow:0 0 0 2px #ffd34d inset}
.pawnChoice span{width:45px;height:45px;margin:auto;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e9edea;font-size:28px;overflow:hidden}
.pawnChoice img{width:100%;height:100%;object-fit:cover}.pawnChoice small{display:block;margin-top:6px;color:#a7b7aa}
@media(max-width:430px){.pawnChoiceGrid{grid-template-columns:repeat(2,1fr)}}


/* ===== Striker Arena lobby v5.4 ===== */
:root{
  --lobby-gold:#ffc62f;
  --lobby-gold2:#ff9417;
  --lobby-blue:#1a8fff;
  --lobby-blue2:#073f8f;
  --lobby-metal:#101822;
  --lobby-metal2:#05090e;
}
html,body{
  background:
    radial-gradient(120% 70% at 50% 0,#0b3970 0,#071728 35%,#03100a 72%,#020806 100%);
}
#app{max-width:760px;padding:12px 12px 98px}
.lobbyPage{margin:-2px -2px 0}
.lobbyTop{
  position:relative;z-index:20;
  margin:0 0 8px;
  padding:4px 0 8px;
}
.playerIdentity{
  display:flex;align-items:center;gap:10px;
  background:transparent!important;border:0!important;padding:0!important;color:#fff!important;
  text-align:left;
}
.avatarRing{
  position:relative;width:55px;height:55px;border-radius:50%;
  padding:3px;background:linear-gradient(145deg,#fff1a1,#f7a80f,#6f4000);
  box-shadow:0 0 0 2px #392400,0 0 18px #ffb31e55;
}
.avatarRing:after{
  content:"";position:absolute;inset:5px;border-radius:50%;
  box-shadow:inset 0 0 0 2px #151515;
  pointer-events:none;
}
.avatarRing .avatar,.avatarRing #avatarFallback{
  width:100%;height:100%;border-radius:50%;object-fit:cover;background:#19232a;
}
#avatarFallback{display:flex;align-items:center;justify-content:center;font-size:26px}
.playerIdentityText b{display:block;font-size:17px;line-height:1;color:#fff;text-shadow:0 2px 3px #000}
.playerIdentityText small{display:block;margin-top:6px;color:#ffd34d;font-size:10px;font-weight:900;letter-spacing:.8px}
.topCurrencies{display:flex;align-items:center;gap:8px}
.currencyPill{
  height:44px;padding:0 7px 0 8px!important;border-radius:14px!important;
  display:flex;align-items:center;gap:7px!important;color:#fff!important;
  background:linear-gradient(#162331,#070c12)!important;border:1px solid #50606d!important;
  box-shadow:inset 0 1px #82909a55,0 5px 15px #0008;
}
.currencyPill b{font-size:13px;white-space:nowrap}
.coinIcon{
  display:flex;width:27px;height:27px;align-items:center;justify-content:center;border-radius:50%;
  background:radial-gradient(circle at 35% 25%,#fff5a2,#ffc127 42%,#9f5900 78%);
  color:#7f4600;border:2px solid #f9df72;font-size:14px;
}
.plus{
  display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;
  background:linear-gradient(#4ce46c,#0b8c31);color:#fff;font-size:18px;line-height:1;border:1px solid #83ff9d;
}
.squareTopBtn{
  position:relative;width:45px;height:44px;padding:0!important;border-radius:13px!important;
  background:linear-gradient(#17222c,#080d12)!important;border:1px solid #52616d!important;color:#fff!important;font-size:20px;
}
.miniBadge,.railBadge{
  position:absolute;display:flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:#e53b27;color:#fff;font:900 10px/1 system-ui;border:2px solid #fff;
}
.miniBadge{right:-5px;top:-6px}.railBadge{right:-4px;top:-5px}
.lobbyBackdrop{
  position:relative;min-height:760px;padding:2px 0 14px;overflow:hidden;border-radius:24px;
}
.stadiumGlow{
  position:absolute;z-index:-2;inset:0 -12px auto;height:440px;
  background:
    radial-gradient(55% 32% at 50% 35%,#38a8ff77,transparent 65%),
    radial-gradient(65% 28% at 50% 48%,#ff9b1933,transparent 75%),
    linear-gradient(180deg,#051324aa,#07101955 55%,transparent);
}
.stadiumGlow:after{
  content:"";position:absolute;inset:90px 0 0;
  background-image:radial-gradient(circle,#58a9ff44 1px,transparent 1.5px);
  background-size:19px 15px;mask-image:linear-gradient(#000,transparent 70%);
}
.lobbyQuickRail{
  position:absolute;z-index:8;top:22px;left:0;display:flex;flex-direction:column;gap:7px;width:73px;
}
.railBtn{
  position:relative;min-height:66px;padding:8px 4px!important;border-radius:12px!important;
  background:linear-gradient(150deg,#141c23,#05080c)!important;color:#fff!important;
  border:1px solid #5f6d78!important;box-shadow:inset 0 1px #ffffff20,0 5px 12px #0008;
}
.railBtn .railIcon{display:block;font-size:24px;line-height:1}
.railBtn b{display:block;font-size:9px;margin-top:5px}
.lobbyHero{
  min-height:205px;padding:18px 84px 0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;
}
.brandBall{font-size:48px;filter:drop-shadow(0 0 14px #3f9cff);margin-bottom:-18px;z-index:2}
.brandLogo{position:relative;display:flex;flex-direction:column;align-items:center;transform:skew(-4deg);text-shadow:0 4px 2px #000,0 0 15px #000}
.brandTop{
  font-size:42px;font-weight:1000;letter-spacing:-2px;line-height:.9;color:#f5f7fa;
  -webkit-text-stroke:2px #17212d;filter:drop-shadow(0 5px 0 #18222f);
}
.brandBottom{
  margin-top:2px;font-size:41px;font-weight:1000;letter-spacing:-2px;line-height:.95;
  background:linear-gradient(#ffe76e,#ffb400 55%,#ed7300);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px #805000;
}
.brandLogo small{margin-top:8px;padding:4px 12px;background:#101820;color:#fff;border:1px solid #384956;letter-spacing:1px;font-weight:900;font-size:9px}
.arenaStage{
  position:relative;height:220px;margin:0 -10px 12px;perspective:700px;
}
.arenaField{
  position:absolute;left:3%;right:3%;top:6px;bottom:2px;border-radius:24px;
  transform:rotateX(55deg) scaleY(1.18);transform-origin:50% 55%;
  overflow:hidden;
  background:
    repeating-linear-gradient(90deg,#237c3a 0 42px,#1b6c32 42px 84px);
  border:7px solid #5c3719;
  box-shadow:0 12px 0 #2b180b,0 20px 45px #000b,inset 0 0 0 3px #b88942;
}
.arenaField:before{
  content:"";position:absolute;inset:9px;border:2px solid #ffffffaa;border-radius:4px;
}
.fieldLine.centerLine{position:absolute;left:8%;right:8%;top:50%;height:2px;background:#ffffffaa}
.fieldCircle{position:absolute;left:50%;top:50%;width:84px;height:84px;border:2px solid #ffffffaa;border-radius:50%;transform:translate(-50%,-50%)}
.goal{position:absolute;left:37%;width:26%;height:22px;border:3px solid #f6f6f6;border-bottom:0}
.goalTop{top:8px}.goalBottom{bottom:8px;transform:rotate(180deg)}
.arenaBall,.arenaPawn{
  position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;
  transform:rotateX(-55deg) scaleY(.85);
  box-shadow:0 9px 13px #0009;
}
.arenaBall{left:50%;top:50%;width:43px;height:43px;margin:-21px;font-size:37px;background:#eee;z-index:5}
.arenaPawn{width:48px;height:48px;color:#fff;font-size:18px;border:5px solid #d9e1e7}
.arenaPawn.red{background:radial-gradient(circle at 35% 25%,#ff8b75,#d5201d 55%,#68120c);border-color:#ffb4a9}
.arenaPawn.blue{background:radial-gradient(circle at 35% 25%,#79c9ff,#126bd9 55%,#07306f);border-color:#a9d9ff}
.arenaPawn.p1{left:22%;top:64%}.arenaPawn.p2{left:35%;top:24%}.arenaPawn.p3{right:22%;top:64%}.arenaPawn.p4{right:35%;top:24%}
.primaryModes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.playCard{
  position:relative;min-height:145px;padding:15px 12px 13px!important;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;
  border-radius:18px!important;color:#fff!important;border:2px solid!important;
  box-shadow:inset 0 1px #ffffff55,0 8px 20px #0008;
}
.publicCard{
  background:linear-gradient(145deg,#073167,#0968be 56%,#072442)!important;border-color:#38a8ff!important;
}
.privateCard{
  background:linear-gradient(145deg,#493000,#a26302 56%,#392100)!important;border-color:#ffc43b!important;
}
.playCard:after{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 20%,#fff4,transparent 24%),linear-gradient(135deg,transparent 45%,#fff1 46%,transparent 65%);
}
.modeWatermark{position:absolute;right:8px;top:15px;font-size:58px;opacity:.42;filter:drop-shadow(0 4px 3px #000)}
.playCardTitle{position:relative;z-index:2;font-size:19px;font-weight:1000;letter-spacing:.2px}
.playCardSub{position:relative;z-index:2;font-size:11px;margin:3px 0 12px;color:#d9e9ff}
.privateCard .playCardSub{color:#ffe4a5}
.playCardCta{
  position:relative;z-index:2;align-self:stretch;text-align:center;padding:10px 8px;border-radius:11px;font-size:13px;font-weight:1000;
  background:linear-gradient(#24a9ff,#0562bd);border:1px solid #77d0ff;box-shadow:inset 0 1px #fff8;
}
.privateCard .playCardCta{background:linear-gradient(#ffc23d,#e47b00);border-color:#ffe187}
.lobbyTiles{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:10px}
.lobbyTile{
  min-height:86px;padding:9px 5px!important;border-radius:13px!important;
  background:linear-gradient(155deg,#141f28,#05090d)!important;color:#fff!important;border:1px solid #52616c!important;
  box-shadow:inset 0 1px #ffffff20,0 6px 14px #0007;
}
.lobbyTile>span{display:block;font-size:23px}.lobbyTile>b{display:block;font-size:11px;margin-top:5px}.lobbyTile>small{display:block;color:#8fc4ff;font-size:8px;margin-top:3px;line-height:1.15}
.lobbySeason{margin:0 0 8px!important;padding:10px!important;background:#0a1118cc!important;border-color:#394b58!important}
.lobbySeason .seasonHead{margin-bottom:7px}.lobbySeason .seasonStats span{padding:6px 3px;background:#09100d}.lobbySeason .seasonStats b{font-size:14px}
.tabs5{
  width:min(730px,calc(100% - 18px));bottom:7px;padding:5px;gap:3px;border-radius:18px;
  background:linear-gradient(#121c24ee,#060a0eee)!important;border:1px solid #52616d!important;
  box-shadow:0 7px 25px #000c,inset 0 1px #ffffff22;
}
.tabs5 button{
  min-width:0;padding:7px 2px!important;border-radius:13px!important;background:transparent!important;color:#9cabb5!important;
}
.tabs5 button span{display:block;font-size:20px;line-height:1}.tabs5 button b{display:block;font-size:8px;margin-top:5px;letter-spacing:.4px}
.tabs5 button.active{
  color:#ffd047!important;background:linear-gradient(#27323b,#10171d)!important;
  box-shadow:inset 0 0 0 1px #6d7981,0 0 15px #ffb40018;
}
@media(max-width:520px){
  .brandTop{font-size:35px}.brandBottom{font-size:35px}.lobbyHero{min-height:180px;padding-left:78px;padding-right:78px}
  .arenaStage{height:190px}.playCard{min-height:132px}.lobbyTile{min-height:80px}
}
@media(max-width:390px){
  #app{padding-left:8px;padding-right:8px}.lobbyQuickRail{width:64px}.railBtn{min-height:59px}
  .lobbyHero{padding-left:66px;padding-right:66px}.brandTop,.brandBottom{font-size:31px}.brandBall{font-size:39px}
  .primaryModes{gap:7px}.playCardTitle{font-size:16px}.playCardSub{font-size:9px}.lobbyTiles{gap:5px}
  .lobbyTile>b{font-size:9px}.lobbyTile>small{font-size:7px}
}

.adminLogoImage{max-width:92%;max-height:150px;object-fit:contain;filter:drop-shadow(0 8px 8px #000a);margin:4px auto}
.lobbyTile,.playCard{background-size:cover!important;background-position:center!important}
body{background-size:cover;background-position:center;background-repeat:no-repeat}

/* v5.5.1 — 2.5D arcade bottom dock */
.tabs5{
  overflow:visible!important;
  padding:6px 7px 8px!important;
  gap:5px!important;
  border-radius:20px!important;
  border:1px solid #697986!important;
  background:
    linear-gradient(180deg,#303e49 0,#17232d 9%,#0a1117 64%,#03070a 100%)!important;
  box-shadow:
    0 8px 0 #020406,
    0 13px 26px #000c,
    inset 0 2px 0 #a8b5be66,
    inset 0 -2px 0 #000!important;
  perspective:700px;
}
.tabs5:before{
  content:"";position:absolute;left:8px;right:8px;top:5px;height:1px;
  background:linear-gradient(90deg,transparent,#d9e7ee88,transparent);pointer-events:none;
}
.tabs5 button{
  position:relative;min-height:58px!important;
  border:1px solid #455865!important;
  border-bottom-color:#020507!important;
  border-radius:13px!important;
  background:
    linear-gradient(180deg,#263541 0,#15212a 50%,#0a1117 51%,#060a0e 100%)!important;
  box-shadow:
    inset 0 1px 0 #a9bac655,
    inset 0 -3px 0 #020406,
    0 4px 5px #0008!important;
  transform:translateY(0) rotateX(3deg);
  transition:transform .12s ease,filter .12s ease;
}
.tabs5 button:active{transform:translateY(3px) rotateX(3deg);box-shadow:inset 0 1px 0 #8798a355,0 1px 2px #000!important}
.tabs5 button span{
  font-size:22px!important;
  filter:drop-shadow(0 2px 0 #000);
}
.tabs5 button b{
  font-size:8px!important;
  text-shadow:0 2px 0 #000;
}
.tabs5 button.active{
  color:#ffd342!important;
  border-color:#d89a15!important;
  background:
    linear-gradient(180deg,#4c3b16 0,#2e2613 48%,#19140a 49%,#0c0904 100%)!important;
  box-shadow:
    inset 0 2px 0 #fff3a266,
    inset 0 -3px 0 #5e3700,
    0 4px 0 #130b00,
    0 0 15px #ffb30033!important;
}
.tabs5 button.active span{filter:drop-shadow(0 0 8px #ffbd25) drop-shadow(0 2px 0 #000)}
/* Raised center PLAY button like the approved reference */
.tabs5 button[data-page="playPage"]{
  min-height:69px!important;
  margin-top:-17px!important;
  border-radius:18px 18px 14px 14px!important;
  border:2px solid #6b7d89!important;
  background:
    radial-gradient(circle at 50% 25%,#455663,#18252f 48%,#071017 75%)!important;
  transform:translateY(0) rotateX(4deg) scale(1.06);
  z-index:4;
  box-shadow:
    inset 0 2px 0 #c2d1da66,
    inset 0 -5px 0 #020506,
    0 7px 0 #020405,
    0 11px 18px #000b!important;
}
.tabs5 button[data-page="playPage"].active{
  border-color:#f0b322!important;
  background:
    radial-gradient(circle at 50% 28%,#6b551c,#30240e 50%,#100b04 78%)!important;
}
.tabs5 button[data-page="playPage"] span{font-size:29px!important}
@media(max-width:390px){
  .tabs5{gap:3px!important;padding-left:4px!important;padding-right:4px!important}
  .tabs5 button{min-height:54px!important}
  .tabs5 button[data-page="playPage"]{min-height:64px!important;margin-top:-14px!important}
}

/* v5.5.4: a custom full-page artwork replaces the generated lobby artwork. */
body.customLobbyBackground .stadiumGlow,
body.customLobbyBackground .arenaStage{
  display:none!important;
}
body.customLobbyBackground .lobbyHero{
  min-height:250px;
  background:transparent!important;
}
body.customLobbyBackground .brandBall,
body.customLobbyBackground .brandLogo{
  display:none!important;
}
body.customLobbyBackground .lobbyBackdrop{
  background:transparent!important;
}
body.customLobbyBackground .primaryModes{
  margin-top:12px;
}
/* If the admin explicitly uploads a logo, allow it even on a custom page background. */
body.customLobbyBackground #adminLogoImage:not(.hidden){
  display:block!important;
  margin:42px auto 18px;
  max-height:180px;
}


/* ==================================================================
   v5.6.0 — Locked Mini App shell + reference-style 2.5D chrome
   ================================================================== */

/* The Telegram WebView itself must not rubber-band the whole UI. */
html,body{
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:manipulation;
}
body{
  position:fixed;
  inset:0;
}
#app{
  width:100%;
  max-width:760px;
  height:100dvh;
  min-height:0!important;
  margin:0 auto;
  padding:0 12px!important;
  overflow:hidden!important;
}
#main{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
}

/* Header is a fixed-height shell member; it never scrolls with the page. */
.lobbyTop{
  flex:0 0 auto;
  min-height:88px;
  margin:0!important;
  padding:9px 3px 10px!important;
  z-index:300;
  position:relative;
  background:linear-gradient(180deg,rgba(3,10,16,.98),rgba(3,10,16,.88));
  border-bottom:1px solid rgba(255,187,27,.18);
}
.lobbyTop:after{
  content:"";
  position:absolute;
  left:76px;right:3px;bottom:3px;height:1px;
  background:linear-gradient(90deg,#d79d14aa,transparent 72%);
}
.playerIdentity{
  min-width:0;
  flex:1;
}
.avatarFrame{
  position:relative;
  width:68px;height:68px;
  flex:0 0 68px;
}
.avatarRing{
  width:64px!important;height:64px!important;
  border-radius:50%;
  padding:4px!important;
  background:
    linear-gradient(145deg,#fff5a6 0,#ffca29 23%,#c57a00 55%,#ffcf33 78%,#654000 100%)!important;
  border:2px solid #ffd447;
  box-shadow:
    0 0 0 2px #4d2a00,
    inset 0 2px 0 #fff9b3,
    0 0 18px rgba(255,178,20,.35)!important;
}
.avatarRing .avatar,.avatarRing #avatarFallback{
  border:2px solid #111a20;
  background:#18232c;
}
.levelBadge{
  position:absolute;
  right:-2px;bottom:-2px;
  min-width:25px;height:24px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  border-radius:5px;
  background:linear-gradient(#ffe142,#f6a800);
  color:#211500;
  border:2px solid #6f4300;
  box-shadow:0 2px 0 #1f1300;
  font:1000 11px/1 system-ui;
}
.playerIdentityText{
  min-width:0;
  padding-left:2px;
}
.nameLine{
  display:flex;align-items:center;gap:7px;
}
.playerIdentityText b{
  max-width:130px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:19px!important;
  letter-spacing:.3px;
  text-shadow:0 2px 2px #000;
}
.onlineDot{
  width:9px;height:9px;border-radius:50%;background:#1dea3b;
  box-shadow:0 0 8px #21ff42;
}
.rankLine{
  display:flex;align-items:center;gap:6px;margin-top:7px;
}
.trophyMini{font-size:16px;filter:drop-shadow(0 2px #000)}
.playerIdentityText small{
  margin:0!important;
  font-size:12px!important;
  color:#ffcf32!important;
  font-weight:1000!important;
  letter-spacing:.7px!important;
}
.topCurrencies{
  flex:0 0 auto;
  gap:7px!important;
}
.currencyPill{
  height:52px!important;
  min-width:142px;
  border-radius:15px!important;
  padding:0 6px 0 8px!important;
  background:
    linear-gradient(180deg,#1a2530 0,#101820 45%,#060a0e 100%)!important;
  border:2px solid #4a5a65!important;
  box-shadow:
    inset 0 2px 0 #c7d3da3a,
    inset 0 -3px 0 #020304,
    0 5px 0 #020304,
    0 7px 13px #0009!important;
}
.currencyPill .coinIcon{
  width:37px;height:37px;
  font-size:18px;
  background:radial-gradient(circle at 34% 25%,#fff8a5 0,#ffd539 25%,#e29300 62%,#704000 100%);
  border:3px solid #f7ca42;
  box-shadow:inset 0 2px 0 #fff8af,0 2px 0 #4b2a00;
}
.currencyPill b{
  font-size:14px!important;
}
.currencyPill .plus{
  width:31px;height:31px;border-radius:7px;
  background:linear-gradient(#45ea62,#079d2b)!important;
  border:2px solid #61f879!important;
  box-shadow:inset 0 2px 0 #d2ffda88,0 2px 0 #034d14;
}
.squareTopBtn{
  width:50px!important;height:52px!important;
  border-radius:13px!important;
  border:2px solid #4b5b67!important;
  background:
    linear-gradient(180deg,#202c35 0,#121a21 50%,#070b0f 100%)!important;
  box-shadow:
    inset 0 2px 0 #d9e4ea42,
    inset 0 -3px 0 #020304,
    0 5px 0 #020304,
    0 7px 13px #0009!important;
  font-size:22px!important;
}
.settingsTopBtn span{font-size:26px;filter:drop-shadow(0 2px #000)}

/* Exactly one visible page owns the middle viewport. */
.page{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:8px 2px 18px;
}
.page::-webkit-scrollbar{display:none}
.lobbyPage{
  padding-top:0!important;
}
.lobbyBackdrop{
  min-height:100%;
}

/* Footer is a second fixed shell member and never moves with the page. */
.tabs5{
  position:relative!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  flex:0 0 92px;
  width:100%!important;
  margin:0!important;
  padding:8px 8px 11px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr 1.17fr 1fr 1fr!important;
  gap:0!important;
  overflow:visible!important;
  border-radius:18px 18px 0 0!important;
  border:2px solid #536470!important;
  border-bottom:0!important;
  background:
    linear-gradient(180deg,#34444f 0,#1a2730 10%,#0a1117 56%,#03070a 100%)!important;
  box-shadow:
    0 -4px 16px #0007,
    inset 0 2px 0 #b8c5cc55,
    inset 0 -3px 0 #020304!important;
  z-index:320;
  perspective:900px;
}
.tabs5 button{
  position:relative;
  min-width:0!important;
  min-height:67px!important;
  margin:0!important;
  padding:8px 2px 6px!important;
  border-radius:0!important;
  border:1px solid #475762!important;
  border-right-width:0!important;
  color:#d3dbe0!important;
  background:
    linear-gradient(180deg,#2b3943 0,#18242d 46%,#0c141a 48%,#05090c 100%)!important;
  box-shadow:
    inset 0 2px 0 #aebbc34a,
    inset 0 -4px 0 #020405,
    0 4px 0 #020405!important;
  transform:none!important;
}
.tabs5 button:first-child{
  border-radius:12px 0 0 12px!important;
}
.tabs5 button:nth-last-child(1){
  border-radius:0 12px 12px 0!important;
  border-right-width:1px!important;
}
.tabs5 button .footerIcon{
  display:block;
  font-size:28px!important;
  height:31px;
  line-height:31px;
  color:#d8e0e4;
  filter:drop-shadow(0 3px 0 #000)!important;
}
.tabs5 button b{
  display:block;
  margin-top:5px!important;
  color:#d1d9de;
  font-size:10px!important;
  font-weight:1000!important;
  letter-spacing:.2px;
  text-shadow:0 2px 0 #000!important;
}
.tabs5 button.active{
  color:#ffd33b!important;
  border-color:#b27a10!important;
  background:
    linear-gradient(180deg,#4a3b18 0,#2a210d 48%,#161005 50%,#090603 100%)!important;
  box-shadow:
    inset 0 2px 0 #fff2a04d,
    inset 0 -4px 0 #4a2b00,
    0 4px 0 #190d00,
    0 0 15px rgba(255,177,21,.25)!important;
}
.tabs5 button.active .footerIcon,
.tabs5 button.active b{
  color:#ffcf2e!important;
}

/* Raised central MATCH tile — pentagonal / medal-like 2.5D silhouette. */
.tabs5 .footerMatch{
  z-index:8;
  min-height:90px!important;
  margin:-24px -5px 0!important;
  padding-top:10px!important;
  border:3px solid #566873!important;
  border-right-width:3px!important;
  border-radius:18px 18px 22px 22px!important;
  clip-path:polygon(17% 0,83% 0,100% 19%,92% 76%,50% 100%,8% 76%,0 19%);
  background:
    radial-gradient(circle at 50% 28%,#3d4c55 0,#1c2830 45%,#0b1217 72%,#030609 100%)!important;
  box-shadow:
    inset 0 3px 0 #d7e3e75f,
    inset 0 -7px 0 #020304,
    0 8px 0 #020304,
    0 11px 20px #000b!important;
}
.tabs5 .footerMatch .matchBall{
  width:45px;height:45px;margin:0 auto;
  display:flex!important;align-items:center;justify-content:center;
  border-radius:50%;
  font-size:36px!important;
  background:radial-gradient(circle,#f6cd38,#8d5c00);
  box-shadow:0 0 0 4px #aa7208,0 0 18px rgba(255,186,30,.45);
}
.tabs5 .footerMatch b{
  font-size:13px!important;
  color:#ffc82f!important;
  margin-top:4px!important;
}
.tabs5 .footerMatch.active{
  border-color:#d9a522!important;
  background:
    radial-gradient(circle at 50% 28%,#5d4a19 0,#2d220c 50%,#0d0903 80%)!important;
}
.tabs5 button:active:not(.footerMatch){
  transform:translateY(3px)!important;
}
.tabs5 .footerMatch:active{
  transform:translateY(3px)!important;
}

/* Uploaded art wins over every built-in gradient. */
.playCard.customAdminArt,
.lobbyTile.customAdminArt{
  background-color:#090d12!important;
  border-color:#83919a!important;
}
.playCard.customAdminArt:after{
  display:none!important;
}
.playCard.customAdminArt .modeWatermark{
  display:none!important;
}
.lobbyTile.customAdminArt>span{
  display:none!important;
}
/* Keep text readable on uploaded art while removing our old fake imagery. */
.playCard.customAdminArt .playCardTitle,
.playCard.customAdminArt .playCardSub,
.playCard.customAdminArt .playCardCta,
.lobbyTile.customAdminArt>b,
.lobbyTile.customAdminArt>small{
  position:relative;z-index:3;
  text-shadow:0 2px 4px #000,0 0 7px #000;
}
.playCard.customAdminArt .playCardCta{
  background:rgba(5,10,15,.64)!important;
  border-color:#ffffff66!important;
}

/* Phone widths: preserve the reference proportions without horizontal scroll. */
@media(max-width:560px){
  .lobbyTop{min-height:82px}
  .avatarFrame{width:60px;height:60px;flex-basis:60px}
  .avatarRing{width:56px!important;height:56px!important}
  .playerIdentityText b{max-width:92px;font-size:16px!important}
  .rankLine{margin-top:5px}
  .playerIdentityText small{font-size:10px!important}
  .currencyPill{min-width:126px;height:47px!important}
  .currencyPill .coinIcon{width:33px;height:33px}
  .currencyPill b{font-size:12px!important}
  .squareTopBtn{width:44px!important;height:47px!important}
  .tabs5{flex-basis:86px;padding-left:4px!important;padding-right:4px!important}
  .tabs5 button{min-height:62px!important}
  .tabs5 button .footerIcon{font-size:24px!important}
  .tabs5 button b{font-size:8px!important}
  .tabs5 .footerMatch{min-height:84px!important;margin-top:-20px!important}
  .tabs5 .footerMatch .matchBall{width:41px;height:41px;font-size:32px!important}
  .tabs5 .footerMatch b{font-size:11px!important}
}
@media(max-width:390px){
  #app{padding-left:7px!important;padding-right:7px!important}
  .topCurrencies{gap:4px!important}
  .currencyPill{min-width:116px;padding-left:5px!important}
  .squareTopBtn{width:40px!important}
  .playerIdentityText b{max-width:78px}
  .tabs5 button .footerIcon{font-size:22px!important}
}

/* v5.7.0: Telegram-stable shell and fully replaceable icons */
#app{
  height:var(--app-stable-height,var(--tg-viewport-stable-height,100dvh))!important;
  max-height:var(--app-stable-height,var(--tg-viewport-stable-height,100dvh))!important;
  padding-top:var(--app-safe-top,var(--tg-content-safe-area-inset-top,0px))!important;
  padding-bottom:var(--app-safe-bottom,var(--tg-content-safe-area-inset-bottom,0px))!important;
}
#main{height:100%!important}
.customIconImage{overflow:hidden}
.customIconImage img{width:100%;height:100%;display:block;object-fit:contain;object-position:center;pointer-events:none}
.iconHidden{display:none!important}
#iconHeaderCoin.customIconImage{padding:2px}
#iconHeaderGift.customIconImage,#iconHeaderSettings.customIconImage{width:28px;height:28px;margin:auto}
#iconHeaderTrophy.customIconImage{width:19px;height:19px}
.railIcon.customIconImage{width:32px;height:32px;margin:0 auto}
.modeWatermark.customIconImage{width:72px;height:72px}
.lobbyTile>span.customIconImage{width:31px;height:31px;margin:0 auto}
.footerIcon.customIconImage{width:31px;height:31px;margin:0 auto}
.footerMatch .footerIcon.customIconImage{width:45px!important;height:45px!important;padding:3px}
.playCardTitle:empty,.playCardSub:empty,.playCardCta:empty,.railBtn b:empty,.lobbyTile>b:empty,.lobbyTile>small:empty,.brandTop:empty,.brandBottom:empty,.brandLogo small:empty{display:none!important}

/* ==========================================================
   v5.8.0 — Major lobby/game UI update
   ========================================================== */

/* Lobby has no footer. Other pages may keep it as secondary navigation. */
body.homeActive .tabs5{display:none!important}
body.homeActive #main{padding-bottom:0!important}

/* Move the central lobby actions lower now that footer is removed. */
body.homeActive.customLobbyBackground .primaryModes{margin-top:clamp(72px,9vh,118px)!important}
body.homeActive .lobbyTiles{margin-top:12px}

/* Header sizing changes */
.avatarRing{
  padding:2px!important;
  border-width:1px!important;
  box-shadow:0 0 0 1px #4d2a00,inset 0 1px 0 #fff9b3,0 0 12px rgba(255,178,20,.26)!important;
}
.currencyPill{
  min-width:88px!important;
  height:32px!important;
  padding:0 4px!important;
  border-radius:10px!important;
  border-width:1px!important;
  box-shadow:inset 0 1px 0 #c7d3da32,inset 0 -2px 0 #020304,0 3px 0 #020304,0 4px 8px #0008!important;
}
.currencyPill .coinIcon{width:23px!important;height:23px!important;font-size:12px!important;border-width:2px!important}
.currencyPill b{font-size:11px!important;max-width:62px;overflow:hidden;white-space:nowrap}
.currencyPill .plus{width:22px!important;height:22px!important;font-size:15px!important;border-width:1px!important}
.squareTopBtn{
  width:42px!important;height:44px!important;border-radius:11px!important;
  border-width:1px!important;
  box-shadow:inset 0 1px 0 #d9e4ea38,inset 0 -2px 0 #020304,0 3px 0 #020304,0 5px 10px #0008!important;
}
#iconHeaderGift,#iconHeaderSettings{font-size:20px!important}

/* Side rail now contains only History and Rules. */
.lobbyQuickRail{top:35px!important}
.lobbyQuickRail .railBtn{min-height:76px}

/* Universal back-to-lobby button */
.pageBackBtn{
  display:inline-flex;align-items:center;gap:5px;
  margin:2px 0 10px;padding:9px 13px!important;
  border-radius:12px!important;border:1px solid rgba(255,255,255,.22)!important;
  background:rgba(5,12,18,.48)!important;color:#f5f7f8!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 5px 14px #0006;
}

/* Glass game panels */
#playPage>.hidden{display:none!important}
#playPage .card{
  background:linear-gradient(145deg,rgba(8,25,18,.58),rgba(8,18,24,.40))!important;
  border:1px solid rgba(219,240,228,.22)!important;
  backdrop-filter:blur(16px) saturate(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 12px 30px rgba(0,0,0,.28)!important;
}
#playPage .tile{
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .14s ease,box-shadow .14s ease;
}
#playPage button:active{transform:translateY(2px) scale(.99)}

/* Public = blue / turquoise */
#playPage.themePublic .card{border-color:rgba(63,210,255,.28)!important;background:linear-gradient(145deg,rgba(4,34,56,.62),rgba(5,29,42,.42))!important}
#playPage.themePublic .tile{background:linear-gradient(145deg,rgba(9,77,118,.70),rgba(7,52,75,.56))!important;border-color:rgba(69,221,255,.26)!important}
#playPage.themePublic .tile.active{border-color:#65e5ff!important;box-shadow:inset 0 0 0 1px #1ebde7,0 0 18px rgba(39,211,255,.18)!important}
#playPage.themePublic #startPublicMatch,
#playPage.themePublic #publicMatchBtn{
  background:linear-gradient(135deg,#087cd9,#11c4cc)!important;border-color:#55e8ef!important;color:white!important;
  box-shadow:inset 0 1px rgba(255,255,255,.38),0 6px 0 #034c73,0 10px 20px #001a2a88!important;
}

/* Private = gold / red */
#playPage.themePrivate .card,#playPage.themeTournament .card{
  border-color:rgba(255,190,72,.28)!important;
  background:linear-gradient(145deg,rgba(54,26,8,.60),rgba(48,8,12,.38))!important;
}
.privateActionGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.privateAction{min-height:64px;border-radius:14px!important;color:#fff!important;font-weight:850!important}
.createRoomAction{background:linear-gradient(135deg,#b82e23,#ef7133)!important;border-color:#ff9864!important;box-shadow:inset 0 1px #ffd2bd88,0 5px 0 #66160f!important}
.findRoomAction,.privateSecondary{background:linear-gradient(135deg,#8c5a06,#e0a51f)!important;border-color:#ffd75a!important;color:#fff!important;box-shadow:inset 0 1px #fff0a877,0 5px 0 #5b3900!important}
.tournamentAction,.tournamentPrimary{background:linear-gradient(135deg,#7a151d,#d39019 58%,#f0bd3b)!important;border-color:#ffd770!important;color:white!important;box-shadow:inset 0 1px #fff1bc77,0 5px 0 #4e1711!important}
.privateActionGrid .tournamentAction{grid-column:1/-1}
#playPage.themePrivate .privateFee,#playPage.themeTournament .privateFee{background:linear-gradient(135deg,rgba(92,43,7,.66),rgba(91,11,18,.56))!important}

/* Tournament */
.grid2form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fieldBlock{display:flex;flex-direction:column;gap:6px}
.fieldBlock select{width:100%}
.tournamentHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tournamentHead small{color:#ffd66f;font-size:10px;letter-spacing:1px;font-weight:900}
.tournamentHead h2{margin:3px 0 0}
.tournamentRow{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;padding:11px;border:1px solid rgba(255,205,94,.18);border-radius:13px;background:rgba(29,13,8,.42)}
.tournamentRow small{display:block;color:#cbbda9;margin-top:4px}
.compactList .row{padding:8px 4px}
.nextMatchBox{margin-top:12px;padding:12px;border-radius:13px;background:rgba(109,47,7,.34);border:1px solid rgba(255,197,73,.25)}
.nextMatchBox b,.nextMatchBox small{display:block}.nextMatchBox small{color:#d4c7b1;margin-top:4px}
.championBox{padding:14px;margin:10px 0;border-radius:14px;text-align:center;background:linear-gradient(135deg,#4c2208,#a6700b);border:1px solid #ffd65f;font-size:26px}
.championBox b,.championBox small{display:block}.championBox small{font-size:11px;color:#ffe9a7;margin-top:4px}
.tableScroll{overflow:auto}.tTable{width:100%;border-collapse:collapse;font-size:12px}.tTable th,.tTable td{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.10);text-align:center}.tTable th:nth-child(2),.tTable td:nth-child(2){text-align:left}
.bracket{display:flex;gap:10px;overflow-x:auto;padding-bottom:7px}.bracketRound{min-width:180px}.bracketRound>b{display:block;color:#ffd66f;margin-bottom:7px}.bracketMatch{padding:7px;border-radius:10px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);margin-bottom:7px}.bracketMatch span{display:block;padding:5px}.bracketMatch .winner{color:#ffd45b;font-weight:900}

/* Cards with uploaded artwork: never draw our text/buttons unless admin left them configured. */
.playCard.customAdminArt .playCardTitle:empty,
.playCard.customAdminArt .playCardSub:empty,
.playCard.customAdminArt .playCardCta:empty{display:none!important}

/* Responsive */
@media(max-width:430px){
  .privateActionGrid,.grid2form{grid-template-columns:1fr}
  .privateActionGrid .tournamentAction{grid-column:auto}
  .currencyPill{min-width:82px!important}
  .playerIdentityText b{max-width:72px}
}

/* =========================================================
   v5.9.0
   ========================================================= */

/* Header controls another ~30% smaller */
.currencyPill{
  min-width:62px!important;
  height:24px!important;
  border-radius:8px!important;
  padding:0 3px!important;
}
.currencyPill .coinIcon{width:17px!important;height:17px!important;font-size:9px!important;border-width:1px!important}
.currencyPill b{font-size:9px!important;max-width:45px!important}
.currencyPill .plus{width:16px!important;height:16px!important;font-size:11px!important}
.squareTopBtn{
  width:30px!important;height:31px!important;
  min-width:30px!important;
  border-radius:8px!important;
}
#iconHeaderGift,#iconHeaderSettings{font-size:15px!important;width:18px!important;height:18px!important}
.miniBadge{min-width:14px!important;height:14px!important;font-size:8px!important}

/* The page sections must always occupy the main viewport. */
#main>.page{width:100%;flex:1 1 auto;min-height:0}

/* Public progressive wizard */
.gameChoiceGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gameArtButton{
  position:relative;overflow:hidden;min-height:108px;padding:13px 8px!important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:16px!important;
  color:#fff!important;
  border:1px solid rgba(106,222,255,.26)!important;
  background:linear-gradient(145deg,rgba(6,90,142,.74),rgba(5,44,74,.62))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 6px 0 rgba(0,35,60,.72),0 10px 18px rgba(0,0,0,.24)!important;
  text-shadow:0 2px 4px #000;
}
.gameArtButton:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 34%,rgba(0,0,0,.16));pointer-events:none}
.gameArtButton>*{position:relative;z-index:2}
.gameChoiceIcon{font-size:29px;margin-bottom:6px;filter:drop-shadow(0 3px 3px #0008)}
.gameArtButton b{font-size:18px}.gameArtButton small{margin-top:3px;color:#c7efff}
.gameArtButton.active{border-color:#7df1ff!important;box-shadow:inset 0 0 0 2px #28cfea,0 6px 0 #035174,0 0 22px #2fdcff3d!important;transform:translateY(-2px)}
.wizardStep{margin-top:15px;animation:wizardIn .22s ease}
@keyframes wizardIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.stepDivider{display:flex;align-items:center;gap:9px;margin:4px 0 10px;color:#a9eaff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px}
.stepDivider:before,.stepDivider:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#3ec9e2aa)}
.stepDivider:after{background:linear-gradient(90deg,#3ec9e2aa,transparent)}
.stakeChoiceGrid .gameArtButton{min-height:88px}
.stakeChoiceGrid .gameChoiceIcon{font-size:23px}
.selectedMatchSummary{padding:12px;border-radius:13px;background:rgba(4,39,59,.55);border:1px solid rgba(83,215,241,.25);text-align:center}
.selectedMatchSummary span{display:block;color:#8fd8e7;font-size:10px;text-transform:uppercase;letter-spacing:.8px}
.selectedMatchSummary b{display:block;font-size:18px;margin-top:3px}
.confirmActions{display:grid;grid-template-columns:2fr 1fr;gap:9px;margin-top:10px}
.publicStartAction{
  min-height:57px!important;border-radius:14px!important;background:linear-gradient(135deg,#047bd0,#15cbc7)!important;border:1px solid #72eff1!important;color:#fff!important;
  box-shadow:inset 0 1px #d5ffff66,0 5px 0 #034e72!important;
}
.publicStartAction span{font-size:20px;margin-right:7px}

/* Uploaded backgrounds win for game buttons */
.hasGameAdminBg{background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important}
.hasGameAdminBg:after{background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.30))!important}

/* Private hub */
.privateHubCard{padding:17px!important}
.privateMainActions{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.privateVisualAction{
  min-height:128px!important;padding:15px!important;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;
  border-radius:18px!important;color:#fff!important;overflow:hidden;position:relative;
  text-shadow:0 2px 5px #000;
}
.privateVisualAction>span{position:relative;z-index:2}
.privateVisualAction>span:last-child b{display:block;font-size:19px}
.privateVisualAction>span:last-child small{display:block;margin-top:4px;line-height:1.3;color:#f7e9d1}
.privateVisualIcon{font-size:31px;margin-bottom:11px;filter:drop-shadow(0 3px 4px #0009)}
.privateCreateVisual{background:linear-gradient(145deg,#9e201d,#df6d2c)!important;border:1px solid #ff9564!important;box-shadow:inset 0 1px #ffd8c366,0 6px 0 #54110e!important}
.privateFindVisual{background:linear-gradient(145deg,#8a5205,#d89d1b)!important;border:1px solid #ffd55a!important;box-shadow:inset 0 1px #fff1a066,0 6px 0 #583400!important}
.tournamentIntro{
  display:flex;gap:11px;align-items:center;margin:20px 2px 10px;padding:12px;
  border-radius:14px;background:rgba(83,36,7,.42);border:1px solid rgba(255,200,82,.23);
}
.tournamentIntroIcon{font-size:29px}.tournamentIntro b{display:block;color:#ffd86b}.tournamentIntro small{display:block;margin-top:4px;color:#e1d2ba;line-height:1.35}
.tournamentVisual{
  width:100%;min-height:112px!important;
  background:linear-gradient(135deg,#67141a,#a7461d 45%,#c89115)!important;
  border:1px solid #ffd269!important;box-shadow:inset 0 1px #fff1b366,0 6px 0 #44100c!important;
}
.roomSearchBox{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;padding:7px;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid rgba(255,207,97,.22)}
.roomSearchBox>span{font-size:22px;padding-left:5px}.roomSearchBox input{width:100%;border:0;background:transparent}.privateSearchSubmit{background:linear-gradient(135deg,#8c5608,#d89e1c)!important;border-color:#ffd65b!important}
.privateCreateSubmit{background:linear-gradient(135deg,#a2231e,#d6871b)!important;border-color:#ffce5a!important;color:#fff!important;border-radius:14px!important;box-shadow:0 5px 0 #57130e!important}

/* Other pages: guarantee visible card and back button after DOM fix */
#shopPage,#walletPage,#profilePage,#leaderboardPage,#historyPage,#rewardsPage,#topupPage{
  padding-top:8px!important;
}
#shopPage>.card,#walletPage>.card,#profilePage>.card,#leaderboardPage>.card,#historyPage>.card,#rewardsPage>.card,#topupPage>.card{
  display:block!important;
  background:rgba(7,20,16,.68)!important;
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.15)!important;
}

@media(max-width:430px){
  .gameChoiceGrid{grid-template-columns:1fr 1fr 1fr;gap:7px}
  .gameArtButton{min-height:93px;padding:10px 5px!important}.gameChoiceIcon{font-size:24px}.gameArtButton b{font-size:15px}
  .privateMainActions{grid-template-columns:1fr 1fr;gap:8px}
  .privateVisualAction{min-height:116px!important;padding:12px!important}
}

/* v5.9.1 — no footer anywhere */
.tabs5{display:none!important}
#main{padding-bottom:0!important}
.page{padding-bottom:18px!important}

.pageTopActions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:2px 0 10px;
}
.pageTopActions .pageBackBtn{margin:0!important}
.historyActionBtn{
  margin-left:auto;
  padding:9px 14px!important;
  border-radius:12px!important;
  border:1px solid rgba(93,220,255,.28)!important;
  background:linear-gradient(135deg,rgba(8,70,105,.78),rgba(8,123,142,.66))!important;
  color:#fff!important;
  font-weight:800!important;
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 4px 12px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* v5.10.0 — Telegram Stars coin store */
.coinPackGrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px!important;
}
.coinPackCard{
  position:relative;overflow:hidden;
  min-height:220px;padding:14px 11px 12px;
  border-radius:17px;
  border:1px solid rgba(255,202,61,.28);
  background:
    radial-gradient(circle at 50% 15%,rgba(255,191,28,.18),transparent 34%),
    linear-gradient(155deg,rgba(31,42,49,.92),rgba(8,14,20,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 18px rgba(0,0,0,.28);
  text-align:center;
}
.coinPackCard.featured{border-color:#ffcb3f;box-shadow:inset 0 1px #fff2a65c,0 0 18px #ffb00026,0 8px 20px #0007}
.bestBadge{position:absolute;top:8px;right:-25px;transform:rotate(38deg);padding:4px 27px;background:#e48b09;color:#fff;font-size:8px;font-weight:1000;letter-spacing:.6px}
.packCoinBurst{font-size:39px;filter:drop-shadow(0 0 9px #f5ac17);margin-top:4px}
.packName{display:block;margin-top:4px;font-size:13px;color:#f4f7f8}
.packCoins{display:block;margin-top:5px;font-size:22px;color:#ffd344}.packCoins small{font-size:10px;color:#c9d2d7}
.bonusBadge,.baseBadge{display:inline-block;margin-top:7px;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:900}
.bonusBadge{background:#176a3d;color:#8affb8;border:1px solid #2d9b5f}.baseBadge{background:#27333c;color:#dce5ea}
.bonusCoins{display:block;margin-top:4px;color:#83e8ad;font-size:9px}
.coinPackCard button{
  width:100%;margin-top:11px!important;padding:9px 8px!important;border-radius:12px!important;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#b46f05,#e6aa1c)!important;border:1px solid #ffd55b!important;color:#fff!important;
  box-shadow:inset 0 1px #fff1a86b,0 4px 0 #633d00!important;
}
.coinPackCard button:disabled{opacity:.45;filter:grayscale(.5)}
@media(max-width:380px){.coinPackGrid{grid-template-columns:1fr 1fr}.coinPackCard{min-height:205px;padding-left:8px;padding-right:8px}.packCoins{font-size:19px}}

/* v5.10.2 — turn countdown and precision touch feedback */
.turnTimerHud{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:5px;
  min-width:150px;
}
.turnTimerTrack{
  width:92px;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
}
.turnTimerFill{
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#56d990,#ffd24c);
  transition:width .10s linear,background .15s ease;
}
.turnTimerHud b{
  width:28px;
  text-align:right;
  font-size:11px;
  color:#d5dee4;
  font-variant-numeric:tabular-nums;
}
.turnTimerHud.mine b{color:#ffda58}
.turnTimerHud.urgent .turnTimerFill{background:linear-gradient(90deg,#ffb02e,#f04444)}
.turnTimerHud.urgent b{color:#ff6b62;animation:turnUrgentPulse .65s ease-in-out infinite}
@keyframes turnUrgentPulse{50%{transform:scale(1.12);text-shadow:0 0 8px #ff3d32}}
#gameCanvas{
  touch-action:none!important;
  -webkit-user-select:none;
  user-select:none;
}

/* v5.12.1 — corrective immersive arena */
body.gameActive{overflow:hidden!important;background:#050806!important}
body.gameActive #app{display:none!important}
#gameView{position:fixed!important;inset:0!important;z-index:10000!important;background:#030604!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
#gameView.hidden{display:none!important}
#gameCanvas{display:block!important;max-width:100vw!important;max-height:100dvh!important;touch-action:none!important;user-select:none!important;-webkit-user-select:none!important}
.gameTop{position:fixed!important;top:max(8px,var(--tg-content-safe-area-inset-top,0px))!important;left:8px!important;right:8px!important;z-index:10020!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;pointer-events:none!important}
.gameTop>.card{pointer-events:none!important;background:rgba(4,8,6,.58)!important;border:1px solid rgba(255,255,255,.14)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;box-shadow:0 4px 14px #0007!important}
.gameTop button{pointer-events:auto!important;background:rgba(5,10,7,.72)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:10px!important;color:#fff!important}

/* v5.13.0 — Tournament Mother Room architecture */
.tournamentArchitectureInfo{margin-top:12px;padding:13px;border-radius:14px;background:linear-gradient(135deg,rgba(86,37,8,.56),rgba(65,13,22,.48));border:1px solid rgba(255,204,91,.24)}
.tournamentArchitectureInfo b,.tournamentArchitectureInfo span{display:block}.tournamentArchitectureInfo b{color:#ffd66e;font-size:14px}.tournamentArchitectureInfo span{margin-top:5px;color:#d8cbb7;font-size:12px;line-height:1.45}
.motherRoomMeta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0 10px;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.055);border:1px solid rgba(255,212,105,.14);font-size:11px;color:#ffd979;font-weight:800}
.motherRoomNotice{padding:10px 11px;margin-bottom:12px;border-left:3px solid #d79a1d;background:rgba(85,47,11,.28);color:#d8ccba;font-size:11px;line-height:1.45}
.tournamentPlayerRow{gap:9px!important}.slotLetter{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(#e3ab27,#895807);color:#fff;font-weight:1000;border:1px solid #ffd666;box-shadow:0 2px 0 #4d2e00}.botMini{display:inline-block;margin-left:5px;padding:2px 5px;border-radius:999px;background:#33404a;color:#a9f2ff;font-size:8px;vertical-align:middle}
.tournamentSubrooms{display:grid;gap:8px}.subroomCard{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:11px 12px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:rgba(5,12,16,.44)}.subroomCard small,.subroomCard b,.subroomCard span{display:block}.subroomCard small{color:#d4ad53;font-size:9px;font-weight:900}.subroomCard b{margin-top:3px;font-size:12px}.subroomCard span{margin-top:4px;color:#a7b6bf;font-size:10px}.subroomCard.in_progress{border-color:#46c9f050;background:linear-gradient(135deg,rgba(5,76,100,.42),rgba(8,32,44,.42))}.subroomCard.finished{opacity:.78}.subroomCard button{min-width:70px;background:linear-gradient(135deg,#087caf,#13bdc9)!important;border-color:#6cecf1!important;color:#fff!important}
.tournamentPodium{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 14px}.tournamentPodium>div{padding:10px 6px;border-radius:12px;text-align:center;background:rgba(53,31,7,.5);border:1px solid rgba(255,209,83,.25)}.tournamentPodium b,.tournamentPodium span{display:block}.tournamentPodium b{margin-top:4px;font-size:11px}.tournamentPodium span{margin-top:4px;color:#ffd666;font-size:9px}
.leaveMotherConfirm{margin-top:9px;padding:12px;border-radius:13px;background:rgba(96,15,19,.44);border:1px solid rgba(255,100,92,.3)}.leaveMotherConfirm b,.leaveMotherConfirm small{display:block}.leaveMotherConfirm small{margin:5px 0 10px;color:#d7b9b6;line-height:1.4}.leaveMotherConfirm .row button{flex:1}
.bracketMatch>small{color:#d6a848!important;font-size:8px!important;letter-spacing:.7px;margin-bottom:3px}
@media(max-width:430px){.tournamentPodium{grid-template-columns:1fr}.subroomCard{grid-template-columns:1fr auto}}

/* v5.13.1 — compact match HUD, formation editor, lobby progression */
#gameView{align-items:flex-start!important}
.gameTop{height:68px!important;align-items:center!important;top:max(4px,var(--tg-content-safe-area-inset-top,0px))!important}
.gameScoreDock{pointer-events:none;min-width:172px;padding:5px 10px 6px;border-radius:13px;background:rgba(3,8,6,.76);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(10px);box-shadow:0 3px 12px #0008;text-align:center}
.scoreMini{display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:1000}.scoreMini #blueScore{color:#4f92ff}.scoreMini #redScore{color:#ff625a}.scoreMini b{color:#d7ded9}.gameScoreDock .turn{font-size:10px;margin-top:1px}.gameScoreDock .turnTimerHud{margin-top:2px;min-width:140px}.gameScoreDock .turnTimerTrack{width:80px;height:4px}.gameScoreDock #turnTimerText{font-size:9px}
#leaveGame{padding:6px 10px!important;font-size:11px!important;border-radius:9px!important}

.formationSection{margin-top:18px;padding-top:6px}.formationHelp{font-size:11px;line-height:1.45;margin:0 0 10px}.formationEditor{position:relative;width:min(310px,100%);aspect-ratio:1/1.18;margin:0 auto;border:2px solid rgba(255,255,255,.62);border-radius:12px;background:linear-gradient(90deg,#1b6f39 0 20%,#237d43 20% 40%,#1b6f39 40% 60%,#237d43 60% 80%,#1b6f39 80%);overflow:hidden;touch-action:none;box-shadow:inset 0 0 25px #001d0e99}.formationEditor:before{content:"";position:absolute;left:0;right:0;top:0;height:50%;border-bottom:2px solid #ffffff88}.formationHalfLine{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#ffffff28}.formationGoal{position:absolute;left:35%;bottom:-1px;width:30%;height:10%;border:2px solid #fff9;border-bottom:0}.formationPawn{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;padding:0!important;background:radial-gradient(circle at 35% 30%,#ffe26e,#c98a05 55%,#473001)!important;border:2px solid #fff5bd!important;color:#201400!important;font-weight:1000!important;box-shadow:0 3px 9px #0009;touch-action:none;z-index:3}.formationSave{display:block;width:min(310px,100%);margin:10px auto 0;background:linear-gradient(135deg,#1b8d50,#37ca73)!important;border-color:#76efa6!important;color:#fff!important}
.gameConfirmCard{text-align:center;max-width:360px!important}.confirmIcon{font-size:40px}.gameConfirmCard h2{margin:5px 0}.gameConfirmCard p{color:#b8c5bc}.confirmButtons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.confirmButtons button{width:100%}
#levelBadge{min-width:25px!important;padding:0 5px!important}
#homeRankText{color:#65df83!important;font-size:11.5px!important;font-weight:900!important;transform:translateX(5px);display:inline-block!important}
#leaderboardBtn b{font-size:14px!important}

/* v5.13.3 — points badge + lobby rank positioning */
.levelBadge{
  min-width:28px!important;
  padding:0 5px!important;
  font-variant-numeric:tabular-nums;
}

/* Green lobby rank label: rank only, slightly right and lower. */
#lobbyRankText,
#lobbyRank,
.lobbyRankText,
.rankStatusText{
  transform:translate(8px,5px)!important;
  position:relative!important;
  text-align:left!important;
}

/* =========================================================
   v5.13.4 — lobby points/rank, match result, arena controls
   ========================================================= */

/* Header corner badge is now raw season points, not level. */
#levelBadge{
  min-width:27px!important;
  max-width:46px;
  height:23px!important;
  padding:0 5px!important;
  font-size:10px!important;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Lobby rank: ONLY #rank, 20% smaller, right aligned, one line lower. */
#homeRankText{
  width:100%!important;
  display:block!important;
  color:#65df83!important;
  font-size:9.2px!important;
  line-height:1.15!important;
  font-weight:900!important;
  text-align:right!important;
  transform:translate(7px,9px)!important;
  position:relative!important;
}

/* Live score: icon/name on both sides without covering the field. */
.gameScoreDock{
  min-width:250px!important;
  max-width:min(330px,72vw)!important;
  padding:5px 9px 6px!important;
}
.scoreTeams{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:7px;
}
.scoreTeam{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
}
.scoreTeam.redTeam{flex-direction:row-reverse;text-align:right}
.teamHudIcon{
  width:23px;height:23px;min-width:23px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:#172129;
  border:1px solid rgba(255,255,255,.24);
  font-size:13px;
}
.teamHudIcon img{width:100%;height:100%;object-fit:cover;display:block}
.scoreTeam small{
  display:block;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:8.5px;
  font-weight:800;
  color:#e7eeea;
}
.scoreMini{gap:6px!important;font-size:17px!important}

/* Profile formation orientation matches the blue player's live field:
   own goal at bottom, opponent goal at top. */
.formationEditor:after{
  content:"ATTACK ↑";
  position:absolute;top:5px;left:0;right:0;
  text-align:center;font-size:8px;font-weight:900;letter-spacing:.8px;
  color:rgba(255,255,255,.55);pointer-events:none;
}
.formationGoal{bottom:-1px!important;top:auto!important}

/* Match-complete overlay */
.matchResultCard{
  width:min(360px,92vw)!important;
  text-align:center;
  padding:22px 18px!important;
  background:linear-gradient(160deg,rgba(13,26,23,.97),rgba(5,10,13,.98))!important;
  border:1px solid rgba(255,213,76,.32)!important;
  box-shadow:0 22px 55px #000b,inset 0 1px rgba(255,255,255,.10)!important;
}
.resultIcon{font-size:45px;filter:drop-shadow(0 4px 8px #0008)}
.matchResultCard h1{margin:5px 0 7px;font-size:29px}
.resultWin{color:#72eda0!important}.resultLoss{color:#ff726a!important}
.resultScore{font-size:36px;font-weight:1000;letter-spacing:2px;color:#fff;margin:5px 0}
.resultOutcome{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1.3px;color:#cdd9d2}
.resultCoins{
  display:inline-block;margin:13px auto 5px;padding:7px 13px;
  border-radius:999px;font-size:14px;font-weight:1000;
}
.resultCoins.positive{background:#164d30;color:#7effad;border:1px solid #2d8d58}
.resultCoins.negative{background:#591f20;color:#ff9892;border:1px solid #963b3e}
.resultCoins.neutral{background:#26323a;color:#d5e0e6;border:1px solid #43535e}
.matchResultCard #resultReason{font-size:10px;color:#83938b;margin:7px 0 14px}
.matchResultCard #resultClose{width:100%;padding:11px!important;border-radius:13px!important}

@media(max-width:390px){
  .gameScoreDock{min-width:224px!important;max-width:70vw!important}
  .scoreTeam small{font-size:7.7px}
  .teamHudIcon{width:20px;height:20px;min-width:20px}
}

/* v5.14.6 - result dialog must sit above immersive match */
#resultModal{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.66)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
#resultModal.hidden{display:none!important}

/* ==========================================================
   v5.14.7 — Choose Game Mode football redesign
   Reference-driven visual redesign; logic/IDs unchanged.
   ========================================================== */

#playPage{
  position:relative;
  min-height:100vh;
  overflow:hidden;
}
#playPage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg,rgba(0,17,8,.10) 0%,rgba(0,10,5,.28) 46%,rgba(0,0,0,.82) 100%),
    url('/client/assets/arena-2.png') center 32%/cover no-repeat;
  filter:saturate(1.05) brightness(.85);
}
#playPage::after{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  bottom:0;
  height:32%;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 95%,rgba(255,255,255,.12),transparent 17%),
    linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  pointer-events:none;
}

.playLobbyBack{
  position:relative;
  z-index:2;
  margin:12px 0 8px 22px!important;
  padding:10px 18px!important;
  border-radius:15px!important;
  border:1px solid rgba(255,255,255,.26)!important;
  background:rgba(5,15,18,.72)!important;
  color:#f7f7f7!important;
  font-size:16px!important;
  box-shadow:0 8px 18px #0006!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.footballModeHub{
  position:relative;
  z-index:1;
  padding:2px 16px 26px;
}
.gameModeShowcase{
  padding:12px 0 0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.gameModeTitle{
  text-align:center;
  font-size:28px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.3px;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 3px 10px #000;
  margin:8px 0 5px;
}
.gameModeTitle b{
  color:#61d93e;
  font-weight:1000;
}
.gameModeDivider{
  width:170px;
  margin:10px auto 18px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#62dd45;
  font-size:10px;
}
.gameModeDivider i{
  display:block;
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,#62dd45);
}
.gameModeDivider i:last-child{
  background:linear-gradient(90deg,#62dd45,transparent);
}

.footballModeCards{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
}
.footballModeCard{
  position:relative!important;
  min-height:150px!important;
  width:100%!important;
  padding:0 72px 0 18px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
  text-align:left!important;
  isolation:isolate;
  box-shadow:0 16px 30px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.12)!important;
  transform:translateZ(0);
}
.publicFootballCard{
  background:
    radial-gradient(circle at 75% 48%,rgba(102,255,78,.15),transparent 35%),
    linear-gradient(112deg,#063d17 0%,#0a6926 44%,#0a1f12 100%)!important;
  border:2px solid rgba(102,255,78,.75)!important;
}
.privateFootballCard{
  background:
    radial-gradient(circle at 74% 48%,rgba(255,199,52,.18),transparent 35%),
    linear-gradient(112deg,#382302 0%,#6e4b05 46%,#211506 100%)!important;
  border:2px solid rgba(237,183,39,.72)!important;
}

.modeCardBackdrop{
  position:absolute;
  inset:0;
  z-index:-3;
  opacity:.26;
  background-size:cover;
  background-position:center;
}
.modeCardBackdropPublic{
  background:
    linear-gradient(90deg,rgba(0,30,5,.20),rgba(0,0,0,.62)),
    url('/client/assets/arena-2.png') center/cover no-repeat;
}
.modeCardBackdropPrivate{
  background:
    linear-gradient(90deg,rgba(31,21,0,.16),rgba(0,0,0,.68)),
    url('/client/assets/arena-4.png') center/cover no-repeat;
  filter:sepia(.25) saturate(.85);
}

.footballModeIcon{
  position:relative;
  z-index:3;
  width:70px!important;
  height:70px!important;
  min-width:70px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  font-size:38px!important;
  background:rgba(0,0,0,.38)!important;
  border:3px solid rgba(93,229,65,.85)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 8px 18px #0008!important;
}
.privateLockIcon{
  border-radius:17px!important;
  border-color:rgba(241,189,45,.68)!important;
  background:linear-gradient(160deg,#6d4808,#241803)!important;
}
.modeCopy{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:7px;
  max-width:58%;
}
.modeCopy b{
  color:#fff!important;
  font-size:25px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.2px!important;
  text-shadow:0 3px 9px #000;
}
.modeCopy small{
  color:rgba(255,255,255,.80)!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:700!important;
}
.modeArrow{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  color:#fff;
  font-size:48px;
  font-weight:300;
  line-height:1;
  text-shadow:0 3px 10px #000;
}

/* Decorative football */
.modeBallArt{
  position:absolute;
  right:34px;
  bottom:-14px;
  width:120px;
  height:120px;
  border-radius:50%;
  z-index:2;
  opacity:.96;
  background:
    radial-gradient(circle at 50% 50%,#111 0 11%,transparent 12%),
    radial-gradient(circle at 28% 34%,#111 0 9%,transparent 10%),
    radial-gradient(circle at 72% 34%,#111 0 9%,transparent 10%),
    radial-gradient(circle at 34% 72%,#111 0 9%,transparent 10%),
    radial-gradient(circle at 68% 70%,#111 0 9%,transparent 10%),
    radial-gradient(circle at 50% 50%,#f5f5f5 0 48%,#b7b7b7 49% 54%,#191919 55% 57%,transparent 58%);
  box-shadow:0 14px 26px rgba(0,0,0,.52);
}
.modeTunnelArt{
  position:absolute;
  right:30px;
  top:24px;
  width:145px;
  height:102px;
  z-index:2;
  border-radius:13px 13px 2px 2px;
  background:
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.60)),
    url('/client/assets/arena-6.png') center/cover no-repeat;
  box-shadow:
    inset 0 0 0 12px rgba(39,27,4,.50),
    inset 0 0 30px rgba(0,0,0,.66),
    0 12px 22px #0008;
  opacity:.92;
}

.footballRulesBtn{
  width:100%!important;
  min-height:75px!important;
  margin-top:14px!important;
  padding:0 24px!important;
  border-radius:21px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
  color:#fff!important;
  background:linear-gradient(112deg,rgba(8,45,20,.96),rgba(8,23,15,.98))!important;
  border:2px solid rgba(99,236,70,.54)!important;
  box-shadow:0 13px 24px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.06)!important;
}
.footballRulesIcon{
  font-size:31px;
  filter:hue-rotate(40deg) saturate(1.45);
}
.footballRulesBtn span:last-child{
  font-size:21px;
  font-weight:1000;
  letter-spacing:.3px;
}

@media(max-width:420px){
  .footballModeHub{padding-left:14px;padding-right:14px}
  .gameModeTitle{font-size:25px}
  .footballModeCard{min-height:137px!important;padding-left:14px!important}
  .footballModeIcon{width:62px!important;height:62px!important;min-width:62px!important;font-size:33px!important}
  .modeCopy{max-width:54%}
  .modeCopy b{font-size:21px!important}
  .modeCopy small{font-size:12px!important}
  .modeBallArt{width:105px;height:105px;right:32px}
  .modeTunnelArt{width:118px;height:88px;right:30px}
  .footballRulesBtn{min-height:68px!important}
}

/* v5.2.1 football pages */
.footballShell{margin:14px 14px 26px;padding:22px 16px 18px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,rgba(3,18,11,.66),rgba(2,10,7,.91)),var(--football-page-image,none);background-size:cover;background-position:center;border:2px solid rgba(96,224,69,.40);box-shadow:0 22px 52px #0007,inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.footballTitle{text-align:center;color:#fff;font-size:29px;font-weight:1000;line-height:1;text-transform:uppercase;text-shadow:0 3px 10px #000}.footballTitle b{color:#64df47}.footballDivider{width:180px;margin:10px auto 14px;display:flex;align-items:center;gap:9px;color:#63dc46;font-size:10px}.footballDivider i{height:1px;flex:1;background:linear-gradient(90deg,transparent,#63dc46)}.footballDivider i:last-child{background:linear-gradient(90deg,#63dc46,transparent)}.footballIntro{text-align:center;color:#d7e2da;margin:0 auto 20px;font-size:14px;line-height:1.4}
.privateFootballGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}.footballSquareCard{position:relative;min-height:190px;border-radius:24px!important;overflow:hidden;padding:18px 12px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:flex-start!important;text-align:left!important;box-shadow:0 15px 28px #0006!important}.createFootballCard{border:2px solid #63df49!important;background:linear-gradient(180deg,#0001,#05290deb),url('/client/assets/arena-2.png') center/cover!important}.findFootballCard{border:2px solid #4c9fff!important;background:linear-gradient(180deg,#0001,#061b31eb),url('/client/assets/arena-6.png') center/cover!important}.footballSquareIcon{position:absolute;top:21px;left:50%;transform:translateX(-50%);width:72px;height:72px;display:flex;align-items:center;justify-content:center;font-size:52px}.footballSquareCard b{color:#fff;font-size:19px;font-weight:1000}.footballSquareCard small{color:#d9e1dc;font-size:10px;line-height:1.4}
.footballWideCard{position:relative;width:100%;min-height:125px;margin-bottom:13px;border-radius:24px;overflow:hidden;padding:18px 48px 18px 108px;display:flex;align-items:center;text-align:left;box-shadow:0 15px 28px #0006}.footballGoldInfo{border:2px solid #d5a536;background:linear-gradient(90deg,#0003,#352504dd),url('/client/assets/arena-4.png') center/cover}.footballPurpleCard{border:2px solid #b449df!important;background:linear-gradient(90deg,#0003,#380647e8),url('/client/assets/arena-6.png') center/cover!important}.footballWideIcon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:84px;height:84px;display:flex;align-items:center;justify-content:center;font-size:62px}.footballWideCard>span:not(.footballWideIcon){display:flex;flex-direction:column;gap:8px}.footballWideCard b{color:#f1be42;font-size:17px;font-weight:1000}.footballPurpleCard b{color:#d768ff}.footballWideCard small{font-size:10px;color:#dfe5e0;line-height:1.42}.footballWideCard>i{position:absolute;right:15px;font-style:normal;font-size:42px;color:#fff}
.footballBackButton{width:100%;min-height:62px;border-radius:20px!important;background:linear-gradient(110deg,#0a4120,#081b12)!important;border:1px solid #4ba33d!important;color:#fff!important;font-size:18px!important;font-weight:900!important}
.tournamentHero{width:105px;height:105px;margin:-7px auto 0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:72px;background:radial-gradient(circle,#e8b6372b,#0002 68%,transparent 69%)}.tournamentFootballCard{position:relative;width:100%;border-radius:25px!important;overflow:hidden;margin-bottom:14px;text-align:left!important;box-shadow:0 16px 30px #0006!important}.createTournamentFootball{min-height:260px;padding:20px 48px 20px 200px!important;border:2px solid #d8a62f!important;background:linear-gradient(90deg,#0001,#000d),url('/client/assets/arena-4.png') center/cover!important}.findTournamentFootball{min-height:145px;padding:18px 48px 18px 110px!important;border:2px solid #5fdd47!important;background:linear-gradient(90deg,#0001,#042b12e8),url('/client/assets/arena-2.png') center/cover!important}.tournamentCardArt{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:170px;height:180px;display:flex;align-items:center;justify-content:center;font-size:120px}.tournamentFindArt{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:86px;height:86px;display:flex;align-items:center;justify-content:center;font-size:62px}.tournamentCardCopy{display:flex;flex-direction:column;gap:9px}.tournamentCardCopy>b{font-size:22px;color:#f3c03e;font-weight:1000}.findTournamentFootball .tournamentCardCopy>b{color:#64df47}.tournamentCardCopy>small{font-size:12px;color:#d9e1dc;line-height:1.42}.tournamentFeatures{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:13px}.tournamentFeatures em{display:flex;flex-direction:column;align-items:center;text-align:center;font-style:normal;color:#efbc39;font-size:20px}.tournamentFeatures em small{font-size:8px;color:#dfe3df;line-height:1.2}.tournamentFootballCard>i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;color:#fff;font-size:42px}
.skinSlot.hasSkin{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;color:transparent!important;text-shadow:none!important}.botBadge{display:inline-block;margin-left:5px;padding:2px 5px;border-radius:5px;background:#263b31;color:#79e79a;font-size:7px;vertical-align:middle}.leaderRow.botRow{opacity:.94}
@media(max-width:420px){.footballShell{margin-left:10px;margin-right:10px;padding:18px 11px 15px}.footballTitle{font-size:25px}.privateFootballGrid{gap:9px}.footballSquareCard{min-height:170px;padding:14px 9px!important}.footballSquareIcon{width:60px;height:60px;font-size:44px}.footballWideCard{padding-left:96px}.createTournamentFootball{min-height:360px;padding:165px 42px 18px 14px!important}.tournamentCardArt{left:50%;top:10px;transform:translateX(-50%);width:145px;height:145px;font-size:102px}.tournamentCardCopy>b{font-size:18px}.tournamentCardCopy>small{font-size:10px}.tournamentFeatures em{font-size:17px}.tournamentFeatures em small{font-size:7px}.findTournamentFootball{padding-left:100px!important}}
