:root{
  --gold:#c9a35a;
  --gold-bright:#e8c877;
  --ayutthaya:#1e4d8c;
  --ayutthaya-dark:#0f2b52;
  --hongsawadee:#8c1f2b;
  --hongsawadee-dark:#4d0f18;
  --ink:#0e0b08;
  --parchment:#e9dcc0;
  --panel:rgba(14,11,8,0.88);
  --panel-light:rgba(30,22,14,0.92);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;}
html,body{margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#000; font-family:'Noto Sans Thai',sans-serif; color:var(--parchment);}
#renderCanvas{width:100%; height:100%; touch-action:none; outline:none; display:block;}
h1,h2,h3,.display{font-family:'Noto Serif Thai',serif;}


.screen{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:50;
  background-color:#0b0806; background-size:cover; background-position:center; overflow:hidden;
  text-align:center; padding:14px;}
.screen::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201,163,90,0.22), transparent 55%),
    linear-gradient(180deg, rgba(10,7,4,0.78) 0%, rgba(14,11,8,0.5) 45%, rgba(4,3,2,0.94) 100%);
  transition:background .5s ease;}
.screen.has-bg::before{background:
    radial-gradient(ellipse at 50% -10%, rgba(201,163,90,0.28), transparent 55%),
    linear-gradient(180deg, rgba(10,7,4,0.55) 0%, rgba(14,11,8,0.32) 40%, rgba(4,3,2,0.96) 100%);}
.screen .light-rays{
  position:absolute; inset:0; z-index:0; pointer-events:none; mix-blend-mode:screen; opacity:0.5;
  background:conic-gradient(from 200deg at 50% -10%, transparent 0deg, rgba(232,200,119,0.2) 8deg, transparent 22deg,
    transparent 60deg, rgba(232,200,119,0.14) 68deg, transparent 82deg,
    transparent 150deg, rgba(232,200,119,0.16) 158deg, transparent 172deg, transparent 360deg);
  animation: rayDrift 24s linear infinite;}
@keyframes rayDrift{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }
.screen > *{ position:relative; z-index:1; }
.hidden{display:none !important;}

.brand{font-size:clamp(22px,7vw,34px); font-weight:900; color:var(--gold-bright); letter-spacing:0.5px;
  text-shadow:0 2px 0 #000, 0 0 20px rgba(201,163,90,0.35); margin:0 0 3px;}
.brand-sub{font-size:clamp(10px,2.4vw,12px); letter-spacing:3px; color:#a89772; margin-bottom:22px; text-transform:uppercase;}
.rule{width:90px; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:12px auto;}

.faction-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; max-width:560px;}
.faction-card{width:160px; border-radius:6px; cursor:pointer; position:relative; overflow:hidden;
  border:1px solid rgba(201,163,90,0.35); display:flex; flex-direction:column;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
  box-shadow:0 6px 16px rgba(0,0,0,0.45);}
.faction-card::after{content:''; position:absolute; inset:-2px; z-index:2; pointer-events:none; border-radius:8px;
  box-shadow:0 0 0 1px rgba(232,200,119,0.2) inset; opacity:0; transition:opacity .22s ease;}
.faction-card:active{transform:scale(0.97);}
.faction-card:hover{transform:translateY(-4px) scale(1.02); border-color:var(--gold-bright);
  box-shadow:0 12px 28px rgba(0,0,0,0.6), 0 0 24px -8px rgba(232,200,119,0.55); filter:brightness(1.08) saturate(1.12);}
.faction-card:hover::after{opacity:1;}


.faction-card-portrait{position:relative; width:100%; height:130px; flex-shrink:0; overflow:hidden;
  background-size:cover; background-position:center 22%; display:flex; align-items:flex-start; justify-content:flex-start;
  transition:background-image .3s ease;}
.faction-card.ayutthaya .faction-card-portrait{background-image:linear-gradient(160deg, var(--ayutthaya) 0%, var(--ayutthaya-dark) 100%);}
.faction-card.hongsawadee .faction-card-portrait{background-image:linear-gradient(160deg, var(--hongsawadee) 0%, var(--hongsawadee-dark) 100%);}
.faction-card-portrait::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 55%, rgba(20,15,10,0.96) 100%);}
.faction-emblem{position:relative; z-index:1; font-size:26px; margin:8px 0 0 10px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.8)) drop-shadow(0 0 14px rgba(232,200,119,0.35));
  animation:emblemGlow 2.6s ease-in-out infinite;}
@keyframes emblemGlow{
  0%,100%{filter:drop-shadow(0 3px 6px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(232,200,119,0.22));}
  50%{filter:drop-shadow(0 3px 6px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(232,200,119,0.55));}}


.faction-card-info{position:relative; z-index:1; padding:10px 12px 14px; text-align:left; background:var(--panel-light);}
.faction-name{font-family:'Noto Serif Thai',serif; font-weight:700; font-size:15px; color:var(--gold-bright); margin-bottom:4px;}
.faction-desc{font-size:11px; color:#e9dcc0dd; line-height:1.4;}

.char-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:560px; width:100%; padding:0 8px;}
@media (max-width:700px){ .char-grid{grid-template-columns:repeat(2,1fr);} }
.char-card{background:var(--panel-light); border:1px solid rgba(201,163,90,0.25); border-radius:6px; cursor:pointer;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;}
.char-card:hover, .char-card.selected{border-color:var(--gold-bright);
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 10px 22px rgba(0,0,0,0.55), 0 0 18px -6px rgba(232,200,119,0.55); filter:brightness(1.06);}
.char-card.selected{box-shadow:0 0 0 2px var(--gold-bright), 0 10px 22px rgba(0,0,0,0.55), 0 0 22px -4px rgba(232,200,119,0.75);}


.char-card-portrait{position:relative; width:100%; height:130px; flex-shrink:0; overflow:hidden;
  background-color:rgba(201,163,90,0.08); background-size:cover; background-position:center 18%;
  display:flex; align-items:center; justify-content:center;}
.char-card-portrait::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(10,8,6,0.55) 100%);}
.char-card .ic{position:relative; z-index:1; font-size:24px; filter:drop-shadow(0 2px 5px rgba(0,0,0,.7)); transition:opacity .2s ease;}
.char-card.has-bg .char-card-portrait .ic{opacity:0;}


.char-card-info{position:relative; z-index:1; padding:6px 8px 8px; background:rgba(10,8,6,0.35);}
.char-card:hover .char-card-info, .char-card.selected .char-card-info{background:rgba(201,163,90,0.14);}
.char-card .nm{font-size:11px; font-weight:700; color:var(--gold-bright); margin-bottom:6px; min-height:28px; line-height:1.25;}
.stat-row{display:flex; align-items:center; gap:5px; font-size:8px; margin-bottom:2px; color:#c9bda2;}
.stat-bar{flex:1; height:4px; background:#0006; border-radius:3px; overflow:hidden;}
.stat-fill{height:100%; border-radius:3px;}
.stat-fill.hp{background:#5fae5f;}
.stat-fill.spd{background:#5aa7d6;}
.stat-fill.atk{background:#d66a5a;}
.skill-badge{display:inline-block; margin-top:5px; font-size:8px; padding:2px 5px; border-radius:10px; background:var(--gold); color:#241a0a; font-weight:700;}
.skill-detail{margin-top:6px; padding-top:6px; border-top:1px solid rgba(201,163,90,0.25);}
.skill-detail-head{display:flex; align-items:center; gap:4px; margin-bottom:3px;}
.skill-emoji{font-size:11px; flex-shrink:0;}
.skill-detail-name{font-size:9px; font-weight:700; color:var(--gold-bright); flex:1; line-height:1.2;}
.skill-cd{font-size:7px; color:#e9dcc0; background:#0006; border:1px solid rgba(201,163,90,0.35); padding:1px 5px; border-radius:8px; flex-shrink:0; white-space:nowrap;}
.skill-detail-desc{font-size:8px; color:#c9bda2dd; line-height:1.4;}

.btn-primary{margin-top:18px; padding:11px 34px; font-size:14px; font-weight:700; font-family:'Noto Serif Thai',serif;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#241a0a; border:none; border-radius:4px; cursor:pointer;
  box-shadow:0 5px 14px rgba(0,0,0,0.4); letter-spacing:0.5px;}
.btn-primary:disabled{opacity:0.35; cursor:not-allowed;}
.btn-ghost{margin-top:10px; padding:8px 18px; font-size:12px; background:transparent; color:#c9bda2; border:1px solid #c9bda255; border-radius:4px; cursor:pointer;}


.room-box{width:min(340px,92vw); background:var(--panel-light); border:1px solid rgba(201,163,90,0.35); border-radius:10px; padding:16px; max-height:78vh; overflow-y:auto;}
.room-section{text-align:left; margin-bottom:14px;}
.room-section:last-child{margin-bottom:0;}
.room-section-title{font-family:'Noto Serif Thai',serif; font-size:12px; color:var(--gold-bright); font-weight:700;
  letter-spacing:0.3px; margin-bottom:8px; display:flex; align-items:center; gap:6px;}
.room-section-title .rst-icon{font-size:13px;}
.room-code-row{display:flex; gap:6px; align-items:center; margin-bottom:8px;}
#roomCodeInput{flex:1; min-width:0; padding:10px 8px; font-size:16px; letter-spacing:3px; text-transform:uppercase; text-align:center;
  background:#0006; border:1px solid var(--gold); border-radius:6px; color:var(--gold-bright); font-family:'Noto Serif Thai',serif; font-weight:700;}
.btn-icon{width:38px; height:38px; flex-shrink:0; font-size:14px; background:var(--gold); color:#241a0a; border:none;
  border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(0,0,0,0.3);}
.btn-icon:active{transform:scale(0.92);}
.btn-small{padding:7px 12px; font-size:11px; background:var(--gold); color:#241a0a; border:none; border-radius:4px; cursor:pointer; font-weight:700;}
.room-hint{font-size:10px; color:#e8c877cc; line-height:1.4; margin-bottom:10px; background:#0003; border:1px solid rgba(232,200,119,0.18);
  border-radius:6px; padding:7px 9px;}
.room-join-btn{width:100%; margin-top:0;}
.room-divider{height:1px; background:linear-gradient(90deg,transparent,rgba(201,163,90,0.45),transparent); margin:3px 0 14px;}
#roomStatusLine{font-size:11px; color:#e9dcc0cc; margin-bottom:10px; text-align:left;}
.faction-capacity-row{display:flex; gap:8px; margin-bottom:10px;}
.fc-pill{flex:1; display:flex; align-items:center; gap:5px; padding:7px 8px; border-radius:7px; font-size:11px;
  background:#0004; border:1px solid rgba(201,163,90,0.25);}
.fc-pill .fc-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.fc-pill.ayutthaya .fc-dot{background:#4a90d9;}
.fc-pill.hongsawadee .fc-dot{background:#d94a4a;}
.fc-pill .fc-label{color:#e9dcc0cc; flex:1;}
.fc-pill b{color:var(--gold-bright); font-weight:700;}
.fc-pill .fc-max{color:#a89772;}
#roomPlayerList{max-height:160px; overflow-y:auto; margin-bottom:4px; text-align:left; display:flex; flex-direction:column; gap:5px;}
.rp-row{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:6px; background:#0004; font-size:12px;
  border:1px solid rgba(201,163,90,0.12);}
.rp-avatar{width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; background:rgba(201,163,90,0.14); border:1px solid rgba(201,163,90,0.3);}
.rp-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.rp-dot.ayutthaya{background:#4a90d9;}
.rp-dot.hongsawadee{background:#d94a4a;}
.rp-name{flex:1; color:#e9dcc0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rp-you{color:var(--gold-bright); font-weight:700;}
.rp-host{font-size:8px; padding:2px 6px; border-radius:8px; background:var(--gold); color:#241a0a; font-weight:700; flex-shrink:0;}
.rp-rank{font-size:8px; padding:2px 6px; border-radius:8px; background:rgba(201,163,90,0.2); color:var(--gold-bright); font-weight:700; flex-shrink:0; border:1px solid rgba(201,163,90,0.4);}
.room-actions{display:flex; gap:8px; margin-top:12px;}
.room-actions button{flex:1; margin-top:0; width:auto;}
.room-footer-note{font-size:10px; color:#a89772; max-width:320px; margin-top:12px; line-height:1.5; text-align:center;}
#netBadge{position:absolute; bottom:10px; left:50%; transform:translateX(-50%); font-size:9px; color:#c9bda299;
  background:var(--panel); padding:2px 8px; border-radius:10px; border:1px solid rgba(201,163,90,0.3); pointer-events:none;}


#hud{position:fixed; inset:0; pointer-events:none; z-index:30; display:none;}
#hud.active{display:block;}
.hud-top-left{position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:4px; width:min(180px,46vw);}
.name-plate{font-family:'Noto Serif Thai',serif; font-weight:700; font-size:12px; color:var(--gold-bright); text-shadow:0 2px 3px #000;}
.rank-plate{font-size:8px; color:#f0d89a; text-shadow:0 2px 3px #000; letter-spacing:0.3px; margin-top:-2px;}
.bar-shell{width:100%; height:10px; background:#0009; border:1px solid #0007; border-radius:6px; overflow:hidden;}
.bar-fill{height:100%; transition:width .15s ease;}
#hpFill{background:linear-gradient(90deg,#3fae3f,#7bd97b);}
#expFill{background:linear-gradient(90deg,#c9a35a,#e8c877);}
.bar-shell.small{height:6px;}
.lvl-row{display:flex; align-items:center; gap:6px; font-size:9px; color:#e9dcc0;}
.weapon-count{position:absolute; top:8px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:5px;
  background:var(--panel); padding:5px 12px; border-radius:20px; border:1px solid var(--gold); font-size:12px; font-weight:700; color:var(--gold-bright);
  pointer-events:auto; cursor:pointer; user-select:none;}
.weapon-count .wc-toggle{font-size:9px; opacity:0.8; margin-left:2px;}
#skillCd{font-size:10px; color:#e9dcc0; margin-left:3px;}

#weaponBreakdownPanel{position:absolute; top:40px; left:50%; transform:translateX(-50%); width:min(220px,74vw);
  background:var(--panel-light); border:1px solid var(--gold); border-radius:8px; padding:8px 10px; pointer-events:auto;
  box-shadow:0 6px 18px rgba(0,0,0,0.5); max-height:36vh; overflow-y:auto;}
#weaponBreakdownPanel.hidden{display:none;}
.wb-header{font-family:'Noto Serif Thai',serif; font-size:11px; color:var(--gold-bright); font-weight:700; margin-bottom:6px; letter-spacing:0.5px;}
.wb-row{display:flex; align-items:center; gap:6px; padding:4px 5px; border-radius:4px; background:#0004; margin-bottom:4px; font-size:10px;}
.wb-icon{font-size:13px;}
.wb-name{flex:1; color:#e9dcc0;}
.wb-rarity{font-size:9px; font-weight:700; text-transform:uppercase;}
.wb-count{font-weight:700; color:var(--gold-bright);}
.wb-empty{font-size:10px; color:#a89772; text-align:center; padding:6px 0;}
.wb-drop-btn{flex-shrink:0; margin-left:2px; background:rgba(140,31,43,0.35); border:1px solid rgba(224,122,122,0.55);
  color:#ffd9d9; font-size:10px; line-height:1; padding:4px 6px; border-radius:4px; cursor:pointer; pointer-events:auto;}
.wb-drop-btn:active{background:rgba(140,31,43,0.65); transform:scale(0.94);}
.wb-hint{font-size:9px; color:#a89772; margin:-2px 0 6px; line-height:1.35;}
.wb-total{margin-top:5px; padding-top:6px; border-top:1px solid rgba(201,163,90,0.3); font-size:10px; color:#e9dcc0;
  display:flex; justify-content:space-between;}
.wb-total b{color:var(--gold-bright);}

#minimapWrap{position:absolute; top:8px; right:8px; width:100px; height:100px; border-radius:8px; border:2px solid var(--gold);
  background:rgba(10,20,10,0.75); overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,0.5);}
#minimapCanvas{width:100%; height:100%;}
#minimapLabel{position:absolute; top:110px; right:8px; font-size:8px; color:#c9bda299; text-align:right; width:100px;}

#leaderboard{position:absolute; top:144px; right:8px; width:130px; background:var(--panel); border:1px solid rgba(201,163,90,0.4); border-radius:6px;
  padding:6px 8px; font-size:10px; max-height:32vh; overflow:hidden;}
#leaderboard h4{margin:0 0 5px; font-size:10px; color:var(--gold-bright); font-family:'Noto Serif Thai',serif; letter-spacing:0.5px;}
.lb-row{display:flex; justify-content:space-between; padding:2px 0; color:#e9dcc0dd;}
.lb-row.me{color:var(--gold-bright); font-weight:700;}

#killfeed{position:absolute; bottom:120px; left:8px; display:flex; flex-direction:column; gap:3px; font-size:10px; max-width:210px;}
.kf-item{background:#0007; padding:3px 8px; border-radius:4px; border-left:3px solid var(--gold); animation:fadeOut 4s forwards;}
@keyframes fadeOut{0%{opacity:1;} 75%{opacity:1;} 100%{opacity:0;}}


#dragZone{position:absolute; inset:0; pointer-events:auto;}
#dragIndicator{position:absolute; width:74px; height:74px; border-radius:50%; border:2px solid rgba(232,200,119,0.55);
  background:radial-gradient(circle,rgba(201,163,90,0.18),transparent 70%); display:none; pointer-events:none; transform:translate(-50%,-50%);}
#dragStick{position:absolute; width:30px; height:30px; border-radius:50%; background:rgba(232,200,119,0.85); top:50%; left:50%;
  transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,0.4);}

#skillBtn{position:absolute; bottom:20px; right:16px; width:60px; height:60px; border-radius:50%; pointer-events:auto;
  background:radial-gradient(circle at 35% 30%, #ecd48f, #b98a3b 70%); border:3px solid var(--gold-bright); font-size:24px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 5px 12px rgba(0,0,0,0.5); cursor:pointer;}
#skillBtn.cooling{filter:grayscale(0.8) brightness(0.55);}
#skillBtn .cdnum{position:absolute; font-size:16px; font-weight:900; color:#fff; font-family:'Noto Serif Thai',serif;}

#sprintHint{position:absolute; bottom:20px; left:16px; font-size:9px; color:#c9bda299; pointer-events:none; max-width:110px;}


#matchBar{position:absolute; top:44px; left:50%; transform:translateX(-50%); width:min(260px,80vw); pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:3px;}
#matchTimer{font-family:'Noto Serif Thai',serif; font-weight:900; font-size:13px; color:var(--gold-bright); text-shadow:0 2px 4px #000;
  background:var(--panel); padding:2px 10px; border-radius:12px; border:1px solid rgba(201,163,90,0.5);}
#scoreBarShell{width:100%; height:12px; border-radius:8px; overflow:hidden; display:flex; border:1px solid rgba(201,163,90,0.6);
  box-shadow:0 3px 8px rgba(0,0,0,0.4);}
#scoreAyutthaya{background:linear-gradient(90deg,var(--ayutthaya-dark),var(--ayutthaya)); display:flex; align-items:center; justify-content:flex-end;
  padding-right:5px; font-size:9px; font-weight:700; color:#dbe8ff; transition:width .3s ease;}
#scoreHongsawadee{background:linear-gradient(90deg,var(--hongsawadee),var(--hongsawadee-dark)); display:flex; align-items:center; justify-content:flex-start;
  padding-left:5px; font-size:9px; font-weight:700; color:#ffe0e0; transition:width .3s ease;}


#resultScreen{position:fixed; inset:0; background:rgba(5,3,2,0.92); display:none; align-items:center; justify-content:center; z-index:60; flex-direction:column;}
#resultScreen.active{display:flex;}
.res-title{font-size:26px; font-weight:900; margin-bottom:5px; text-shadow:0 3px 10px #000;}
.res-sub{color:#c9bda2; margin-bottom:18px; font-size:11px;}
.res-stats{display:flex; gap:16px; margin-bottom:18px; flex-wrap:wrap; justify-content:center;}
.res-stat{text-align:center;}
.res-stat .v{font-size:18px; font-weight:900; color:var(--gold-bright);}
.res-stat .l{font-size:9px; color:#a89772; letter-spacing:0.5px; text-transform:uppercase;}

#toast{position:fixed; top:14px; left:50%; transform:translateX(-50%); background:var(--panel); border:1px solid var(--gold);
  padding:7px 16px; border-radius:20px; font-size:12px; color:var(--gold-bright); z-index:80; opacity:0; transition:opacity .3s ease; pointer-events:none;}
#toast.show{opacity:1;}

#audioToggleBtn{position:fixed; bottom:10px; left:50%; transform:translateX(-50%); z-index:95;
  width:36px; height:36px; border-radius:50%; background:var(--panel); border:1px solid var(--gold);
  color:var(--gold-bright); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.4); pointer-events:auto;}
#audioToggleBtn:active{transform:translateX(-50%) scale(0.92);}

#loadingScreen{position:fixed; inset:0; background:#0b0806; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center;}
#loadingScreen .brand{margin-bottom:6px;}
.loader-bar{width:180px; height:4px; background:#3332; border-radius:2px; overflow:hidden; margin-top:16px;}
.loader-fill{height:100%; width:0%; background:var(--gold-bright); transition:width .2s ease;}


.rank-lb-cols{display:flex; gap:8px;}
.rank-lb-col{flex:1; min-width:0;}
.rank-lb-col-title{font-size:11px; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:5px; padding-bottom:5px; border-bottom:1px solid rgba(201,163,90,0.25);}
.rank-lb-col-title.ayutthaya{color:#7fb2e8;}
.rank-lb-col-title.hongsawadee{color:#e88f8f;}
.rank-lb-row{display:flex; align-items:center; gap:6px; padding:6px 7px; border-radius:6px; background:#0004; margin-bottom:5px; font-size:10px;}
.rank-lb-pos{width:16px; flex-shrink:0; color:#a89772; font-weight:700; text-align:center;}
.rank-lb-name{flex:1; color:#e9dcc0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rank-lb-title{font-size:8px; padding:2px 5px; border-radius:8px; background:var(--gold); color:#241a0a; font-weight:700; flex-shrink:0;}
.rank-lb-kills{font-size:9px; color:var(--gold-bright); font-weight:700; flex-shrink:0; min-width:38px; text-align:right;}
.rank-lb-empty{font-size:10px; color:#a89772; text-align:center; padding:12px 0;}
.my-rank-box{display:flex; align-items:center; gap:8px; background:#0004; border:1px solid rgba(201,163,90,0.35); border-radius:8px; padding:8px 10px; margin-bottom:12px;}
.my-rank-title{font-size:13px; font-weight:900; color:var(--gold-bright); font-family:'Noto Serif Thai',serif;}
.my-rank-sub{font-size:10px; color:#c9bda2; flex:1;}
.my-rank-next{font-size:9px; color:#a89772;}


.login-box{width:min(300px,90vw); background:var(--panel-light); border:1px solid rgba(201,163,90,0.35); border-radius:10px; padding:22px 18px; display:flex; flex-direction:column; gap:10px;}
.login-hint{font-size:11px; color:#c9bda2; line-height:1.5; margin-bottom:4px;}
.google-btn{display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:6px;
  background:#fff; color:#3c3c3c; font-size:13px; font-weight:700; font-family:'Noto Sans Thai',sans-serif;
  border:none; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.35);}
.google-btn:active{transform:scale(0.97);}
.google-btn .g-icon{width:16px; height:16px; flex-shrink:0;}
.guest-btn{padding:10px 16px; border-radius:6px; background:transparent; color:#c9bda2; border:1px solid #c9bda255;
  font-size:12px; cursor:pointer; font-family:'Noto Sans Thai',sans-serif;}
.login-divider{display:flex; align-items:center; gap:8px; color:#a89772; font-size:10px; margin:2px 0;}
.login-divider::before, .login-divider::after{content:''; flex:1; height:1px; background:rgba(201,163,90,0.25);}
.login-status-line{font-size:10px; color:#a89772; text-align:center; margin-top:3px;}

.user-badge{position:absolute; top:10px; right:10px; display:flex; align-items:center; gap:6px; background:var(--panel);
  border:1px solid rgba(201,163,90,0.4); border-radius:20px; padding:4px 8px 4px 4px; z-index:2;}
.user-badge-avatar{width:22px; height:22px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#241a0a; overflow:hidden; flex-shrink:0;}
.user-badge-avatar img{width:100%; height:100%; object-fit:cover;}
.user-badge-name{font-size:10px; color:#e9dcc0; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.user-badge-logout{font-size:9px; color:#e88f8f; background:none; border:none; cursor:pointer; padding:2px 3px; text-decoration:underline;}


.gold-badge{position:absolute; top:10px; left:10px; display:flex; align-items:center; gap:5px; background:var(--panel);
  border:1px solid rgba(201,163,90,0.4); border-radius:20px; padding:6px 11px; z-index:2; font-size:12px; font-weight:700; color:var(--gold-bright);}
.shop-tabs{display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; justify-content:center;}
.shop-tab-btn{padding:7px 14px; font-size:11px; font-weight:700; background:#0004; color:#c9bda2; border:1px solid rgba(201,163,90,0.3);
  border-radius:20px; cursor:pointer; font-family:'Noto Sans Thai',sans-serif; transition:all .18s ease;}
.shop-tab-btn.active{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#241a0a; border-color:var(--gold-bright);}
.shop-panel{width:min(560px,94vw); max-height:60vh; overflow-y:auto; padding:3px 4px;}
.shop-panel.hidden{display:none;}
.shop-section-title{font-size:12px; font-weight:700; color:var(--gold-bright); margin:10px 0 8px; text-align:left; padding-left:2px;
  display:flex; align-items:center; gap:5px;}
.shop-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(108px,1fr)); gap:8px;}
.shop-item{background:var(--panel-light); border:1px solid rgba(201,163,90,0.25); border-radius:8px; padding:9px 7px; text-align:center;
  cursor:pointer; position:relative; transition:transform .15s ease, border-color .15s ease;}
.shop-item:hover{transform:translateY(-2px); border-color:var(--gold-bright);}
.shop-item.owned-selected{border-color:var(--gold-bright); box-shadow:0 0 0 2px var(--gold-bright);}
.shop-item .si-icon{font-size:26px; margin-bottom:4px; display:block;}
.shop-item .si-name{font-size:10px; font-weight:700; color:#e9dcc0; min-height:24px; line-height:1.25; margin-bottom:5px;}
.shop-item .si-cost{font-size:10px; color:var(--gold-bright); font-weight:700;}
.shop-item .si-tag{position:absolute; top:5px; right:5px; font-size:7px; padding:2px 5px; border-radius:8px; font-weight:700;}
.shop-item .si-tag.locked{background:#0008; color:#e88f8f; border:1px solid #e88f8f66;}
.shop-item .si-tag.owned{background:rgba(90,167,214,0.25); color:#9fd0ea; border:1px solid #5aa7d666;}
.shop-item .si-tag.selected{background:var(--gold); color:#241a0a;}
.shop-item.locked-item{opacity:0.72;}
.shop-empty-hint{font-size:10px; color:#a89772; text-align:center; padding:8px 0;}
.lock-overlay{position:absolute; top:5px; left:5px; font-size:10px;}