/* ---------- lobby rows ---------- */

.battle-hub-grid{grid-template-columns:minmax(280px,330px) minmax(0,1fr)}

.battle-list{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding:10px
}

.battle-row{
  position:relative;
  min-height:0;
  display:grid;
  grid-template-columns:64px minmax(150px,.75fr) minmax(0,1.7fr) auto auto;
  grid-template-rows:auto;
  align-items:center;
  gap:16px;
  padding:11px 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:linear-gradient(90deg,#121813,#0c100d 60%);
  box-shadow:0 12px 26px rgba(0,0,0,.3);
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease
}

.battle-row:before{display:none}
.battle-row:hover{transform:translateY(-2px);border-color:rgba(183,255,56,.38);box-shadow:0 0 0 1px rgba(183,255,56,.12),0 18px 36px rgba(0,0,0,.45),0 0 26px rgba(183,255,56,.12)}
.battle-row[data-status=open]{border-color:rgba(92,239,121,.22)}
.battle-row[data-status=ripping],.battle-row[data-status=settling]{border-color:rgba(141,114,255,.35);box-shadow:0 0 0 1px rgba(141,114,255,.12),0 12px 26px rgba(0,0,0,.3),0 0 24px rgba(141,114,255,.18)}

.battle-row-pack{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(183,255,56,.16);
  border-radius:14px;
  background:radial-gradient(circle,rgba(183,255,56,.22),transparent 68%),#070a08
}

.battle-row-pack img{width:100%;height:100%;padding:5px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}

.battle-row-copy{min-width:0;display:grid;gap:5px}
.battle-row-copy strong{overflow:hidden;font-size:13px;letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap}
.battle-row-copy small{display:flex;align-items:center;gap:7px;overflow:hidden;color:#7c867d;font:700 7.5px monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.battle-row-copy small b{color:var(--green)}
.battle-row-player-pips{display:inline-flex;gap:3px}
.battle-row-player-pips u{width:7px;height:7px;border:1px solid #414942;border-radius:50%;text-decoration:none}
.battle-row-player-pips u.filled{border-color:var(--green);background:var(--green);box-shadow:0 0 7px rgba(183,255,56,.55)}

.battle-marquee{
  position:relative;
  min-width:0;
  height:66px;
  overflow:hidden;
  border-radius:10px;
  background:rgba(7,10,8,.55);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)
}

.battle-marquee-track{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:7px;
  width:max-content;
  padding-inline:4px;
  animation:battleMarquee var(--marquee-duration,28s) linear infinite
}

.battle-marquee:hover .battle-marquee-track{animation-play-state:paused}

.battle-marquee-item{
  position:relative;
  width:40px;
  height:58px;
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  background:#090c0a
}

.battle-marquee-item img{width:100%;height:100%;padding:2px;object-fit:contain}
.battle-marquee-item b{position:absolute;left:0;right:0;bottom:0;padding:2px 2px 3px;background:rgba(7,10,8,.88);color:#ffcf4a;font:800 6.5px/1 monospace;text-align:center;white-space:nowrap}
.battle-marquee-empty{position:absolute;inset:0;display:grid;place-items:center;color:#5f6960;font:700 7px monospace;letter-spacing:.12em;text-transform:uppercase}
.battle-marquee-label{position:absolute;z-index:2;left:6px;top:5px;padding:3px 6px;border-radius:99px;background:rgba(7,10,8,.85);color:#9aa39b;font:800 6.5px monospace;letter-spacing:.12em;text-transform:uppercase}

.battle-row>.battle-row-values{display:flex;align-items:center;gap:18px}
.battle-row>.battle-row-values>div{display:grid;gap:3px;text-align:right}
.battle-row-values small{color:#6d766e;font:700 7px monospace;letter-spacing:.12em;text-transform:uppercase}
.battle-row-values b{font-size:15px;letter-spacing:-.02em;color:#fff;text-shadow:0 0 12px rgba(183,255,56,.25)}
.battle-row-values .pool b{color:#ffcf4a;text-shadow:0 0 14px rgba(255,207,74,.35)}

.battle-cta{
  min-width:112px;
  height:50px;
  padding:0 18px;
  border:1px solid transparent;
  border-radius:12px;
  font:900 14px/1 sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease
}

.battle-cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
.battle-cta.join{background:var(--green);color:#091008;box-shadow:0 0 0 1px rgba(183,255,56,.3),0 12px 26px rgba(105,193,35,.32),0 0 26px rgba(183,255,56,.3)}
.battle-cta.live{background:linear-gradient(145deg,#a58bff,#7a5cff);color:#fff;box-shadow:0 12px 26px rgba(122,92,255,.3),0 0 26px rgba(141,114,255,.35);animation:battleLivePulse 1.6s ease-in-out infinite}
.battle-cta.watch{background:#141a15;border-color:rgba(183,255,56,.45);color:var(--green);box-shadow:inset 0 0 0 1px rgba(183,255,56,.08)}
.battle-cta.ended{background:#141a15;border-color:rgba(255,255,255,.1);color:#7f8a80}

@keyframes battleMarquee{
  to{transform:translateX(-50%)}
}

@keyframes battleLivePulse{
  0%,100%{box-shadow:0 12px 26px rgba(122,92,255,.3),0 0 22px rgba(141,114,255,.3)}
  50%{box-shadow:0 12px 26px rgba(122,92,255,.4),0 0 40px rgba(141,114,255,.55)}
}

/* ---------- detail view ---------- */

.battle-detail-money{display:flex;gap:12px}

.battle-detail-money>div{
  position:relative;
  min-width:180px;
  display:grid;
  gap:4px;
  padding:16px 20px;
  overflow:hidden;
  border:1px solid rgba(183,255,56,.28);
  border-radius:14px;
  background:radial-gradient(circle at 100% 0,rgba(183,255,56,.16),transparent 45%),linear-gradient(150deg,#151d16,#0b100c 70%);
  box-shadow:0 0 0 1px rgba(183,255,56,.06),0 18px 40px rgba(0,0,0,.45)
}

.battle-detail-money>div:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),#ffcf4a 70%,transparent)}
.battle-detail-money span{color:#8d978e;font:800 7.5px monospace;letter-spacing:.14em;text-transform:uppercase}
.battle-detail-money strong{font-size:clamp(28px,2.6vw,36px);line-height:1;letter-spacing:-.05em;color:#fff;text-shadow:0 0 18px rgba(183,255,56,.35)}
.battle-detail-money>div:nth-child(2) strong{color:#ffcf4a;text-shadow:0 0 18px rgba(255,207,74,.4)}
.battle-detail-money small{color:#7f8a80;font:650 8px monospace;letter-spacing:.06em}

.battle-detail-actions{gap:14px;padding:18px 20px;border-color:rgba(183,255,56,.18)}
.battle-detail-actions strong{font-size:15px}
.battle-detail-actions span{font-size:10px;color:#8d978e}

#battleJoin,#battleWatchReveal{
  min-width:180px;
  min-height:56px;
  border-radius:14px;
  font:900 15px/1 sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase
}

#battleJoin:not(:disabled){box-shadow:0 0 0 1px rgba(183,255,56,.3),0 14px 30px rgba(105,193,35,.32),0 0 30px rgba(183,255,56,.3)}
#battleWatchReveal{background:#141a15;border:1px solid rgba(183,255,56,.5);color:var(--green);box-shadow:inset 0 0 0 1px rgba(183,255,56,.08),0 0 24px rgba(183,255,56,.14)}
#battleWatchReveal.live{background:linear-gradient(145deg,#a58bff,#7a5cff);border-color:transparent;color:#fff;animation:battleLivePulse 1.6s ease-in-out infinite}

.battle-result{
  position:relative;
  overflow:hidden;
  padding:34px 28px 30px;
  border-color:rgba(183,255,56,.28);
  background:radial-gradient(circle at 50% 0,rgba(183,255,56,.18),transparent 55%),linear-gradient(180deg,#121813,#0b0f0c);
  box-shadow:0 0 0 1px rgba(183,255,56,.06),0 26px 60px rgba(0,0,0,.45),0 0 40px rgba(183,255,56,.1)
}

.battle-result h3{margin:10px 0 8px;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.05em}
.battle-result p{color:#aeb6ae;font-size:12px}

.battle-result-stats{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:18px 0 0
}

.battle-result-stats>div{
  min-width:150px;
  display:grid;
  gap:4px;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(7,10,8,.6)
}

.battle-result-stats span{color:#7f8a80;font:800 7px monospace;letter-spacing:.14em;text-transform:uppercase}
.battle-result-stats b{font-size:20px;letter-spacing:-.03em;color:#fff}
.battle-result-stats .gold b{color:#ffcf4a;text-shadow:0 0 14px rgba(255,207,74,.35)}
.battle-result-stats .lime b{color:var(--green);text-shadow:0 0 14px rgba(183,255,56,.35)}
.battle-result-stats strong{overflow:hidden;font-size:11px;color:#dfe5dc;text-overflow:ellipsis;white-space:nowrap}

.battle-result-winning{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:18px
}

.battle-result-winning img{width:54px;height:72px;object-fit:contain;padding:3px;border:1px solid rgba(183,255,56,.35);border-radius:8px;background:#070a08;filter:drop-shadow(0 10px 12px rgba(0,0,0,.6))}
.battle-result-winning div{display:grid;gap:3px;text-align:left}
.battle-result-winning strong{font-size:13px}
.battle-result-winning span{color:#8d978e;font:700 8px monospace;letter-spacing:.08em;text-transform:uppercase}

/* ---------- responsive ---------- */

@container workspace (max-width:1100px){
  .battle-row{grid-template-columns:56px minmax(0,1fr) auto auto}
  .battle-marquee{display:none}
}

@container workspace (max-width:760px){
  .battle-row{grid-template-columns:52px minmax(0,1fr) auto;gap:12px}
  .battle-row-values{display:none}
  .battle-cta{min-width:92px;height:44px;padding:0 12px;font-size:12px}
  .battle-detail-money{flex-wrap:wrap}
  .battle-detail-money>div{flex:1 1 150px;min-width:0}
}

@media(prefers-reduced-motion:reduce){
  .battle-marquee-track,.battle-cta.live,#battleWatchReveal.live{animation:none}
}

/* ---------- host a battle form ---------- */

.battle-machine-preview{border:1px solid rgba(183,255,56,.2);border-radius:14px;background:radial-gradient(circle at 0 0,rgba(183,255,56,.16),transparent 45%),linear-gradient(150deg,#141c15,#0b100c 70%);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.battle-machine-art{border:1px solid rgba(183,255,56,.18);box-shadow:0 0 18px rgba(183,255,56,.12)}

.battle-create select{
  appearance:none;
  -webkit-appearance:none;
  height:48px;
  padding:0 44px 0 14px;
  border:1px solid rgba(183,255,56,.3);
  border-radius:12px;
  background:#0b100c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7ff38' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat;
  color:#fff;
  font:700 12px sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 1px rgba(183,255,56,.05);
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease
}

.battle-create select:hover{border-color:rgba(183,255,56,.55)}
.battle-create select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(183,255,56,.14)}
.battle-create select option{background:#0d120e;color:#fff}

.seat-options{gap:8px}

.seat-options span{
  position:relative;
  min-height:88px;
  gap:6px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(160deg,#131a14,#0b0f0c)
}

.seat-options span:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(183,255,56,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(183,255,56,.06) 1px,transparent 1px);background-size:14px 14px;mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none}
.seat-options span>*{position:relative;z-index:1}
.seat-options input:checked+span{border-color:var(--green);background:radial-gradient(circle at 50% 0,rgba(183,255,56,.2),transparent 62%),#121813;box-shadow:0 0 0 1px rgba(183,255,56,.25),0 0 22px rgba(183,255,56,.18),inset 0 -2px var(--green);transform:translateY(-2px)}
.seat-options b{font-size:12px}
.seat-options small{color:#7f8a80;font-size:8px}

.seat-icon{position:relative;height:26px;display:flex;align-items:center;justify-content:center;gap:5px}
.seat-icon u{position:relative;width:10px;height:10px;border:1.5px solid #8b958c;border-radius:50%;background:transparent;text-decoration:none;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.seat-icon u:nth-child(2n){height:10px}
.seat-icon u:after{content:"";position:absolute;left:-3px;right:-3px;bottom:-6px;height:4px;border-radius:5px 5px 1px 1px;background:#8b958c;transition:background .2s ease}
.seat-icon.two{gap:20px}
.seat-icon.two:before{content:"VS";position:absolute;left:50%;top:50%;color:var(--green);font:900 7px monospace;letter-spacing:.06em;transform:translate(-50%,-50%)}
.seat-icon.three u:nth-child(2){transform:translateY(-6px)}
.seat-icon.four{gap:4px}
.seat-icon.four u:nth-child(2),.seat-icon.four u:nth-child(3){transform:translateY(-6px)}
.seat-options input:checked+span .seat-icon u{border-color:var(--green);background:var(--green);box-shadow:0 0 8px rgba(183,255,56,.65)}
.seat-options input:checked+span .seat-icon u:after{background:var(--green)}

.battle-entry-summary>div{border-color:rgba(183,255,56,.16);background:linear-gradient(150deg,#141c15,#0b100c 70%)}
.battle-entry-summary strong{color:#fff;text-shadow:0 0 14px rgba(183,255,56,.3)}
.battle-entry-summary>div:nth-child(2) strong{color:#ffcf4a;text-shadow:0 0 14px rgba(255,207,74,.35)}

.battle-ack{
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(7,10,8,.55);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease
}

.battle-ack:hover{border-color:rgba(183,255,56,.3)}
.battle-ack:has(input:checked){border-color:rgba(183,255,56,.5);background:rgba(183,255,56,.07)}

.battle-ack input{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:22px;
  height:22px;
  margin:0;
  display:grid;
  place-items:center;
  border:1.5px solid rgba(183,255,56,.45);
  border-radius:7px;
  background:#0b100c;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease
}

.battle-ack input:checked{background:var(--green);border-color:var(--green);box-shadow:0 0 14px rgba(183,255,56,.5)}
.battle-ack input:checked:after{content:"";width:6px;height:11px;border:solid #091008;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.battle-ack input:focus-visible{outline:2px solid rgba(183,255,56,.5);outline-offset:2px}
.battle-ack span{color:#aeb6ae!important;font:600 10px/1.5 sans-serif!important}
.battle-ack:has(input:checked) span{color:#eef2ec!important}

/* ---------- lobby row sizing and smooth marquee ---------- */

.battle-list{grid-auto-rows:max-content;align-content:start}
.battle-row{min-height:92px;grid-template-columns:64px minmax(170px,.9fr) minmax(0,1fr) auto auto;gap:18px}
.battle-marquee{max-width:380px;height:70px;justify-self:end;width:100%}
.battle-marquee-track{padding:0;gap:0;will-change:transform}
.battle-marquee-half{display:flex;align-items:center;gap:7px;height:100%;padding-right:7px;flex:0 0 auto}
.battle-marquee-item{width:42px;height:60px}
.battle-marquee-item b{font-size:7px}
.battle-row>.battle-row-values{gap:22px}
.battle-row-values small{font-size:8px}
.battle-row-values b{font-size:19px}
.battle-cta{height:54px;min-width:124px;font-size:15px}

@container workspace (max-width:1280px){
  .battle-marquee{max-width:260px}
}