*{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;
}