:root {
  --gold:#D4AF37;--gold-dim:rgba(212,175,55,0.15);--gold-glow:rgba(212,175,55,0.4);
  --green:#00FF87;--red:#FF3B3B;--red-dim:rgba(255,59,59,0.12);
  --blue:#4FC3F7;--purple:#CE93D8;--orange:#FF6B35;
  --bg:#080808;--surface:#111;--surface2:#181818;--surface3:#222;
  --border:#2a2a2a;--border2:#333;--text:#EFEFEF;--muted:#666;--muted2:#888;
  --trap-crew:#FF3B3B;--cartel-crew:#CE93D8;--ogs-crew:#D4AF37;--hustlers-crew:#00FF87;
  --mang-crew:#7B2D8B;--jakuza-crew:#DC143C;--vercetti-crew:#4A90D9;
  --sadboyz-crew:#C4A6B8;--earth-crew:#2E8B7A;--yonkers-crew:#E8752A;
  --cari-crew:#20B2AA;--payaso-crew:#39FF14;--tweaker-crew:#ADBE18;--alpha-crew:#1B3A6B;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);}
body{font-family:'Barlow',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;}
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:.5;}
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 3px);pointer-events:none;z-index:9998;}
#game-screen{background:radial-gradient(ellipse at 50% 0%,rgba(255,56,104,.06) 0%,transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(51,217,124,.04) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(212,175,55,.04) 0%,transparent 60%),linear-gradient(180deg,#0a0608,#050304);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;}
#board::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(212,175,55,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.04) 1px,transparent 1px);background-size:60px 60px;}
.screen{display:none;flex-direction:column;position:fixed;inset:0;height:100%;width:100%;overflow:hidden;background:var(--bg);z-index:1;}
.screen.active{display:flex;}
#auth-screen,#username-screen,#menu-screen,#leaderboard-screen,#changelog-screen{position:fixed;inset:0;z-index:500;height:100vh;width:100vw;}
#board{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;position:relative;}
#hdr{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:linear-gradient(180deg,#141414,transparent);border-bottom:1px solid var(--border);flex-shrink:0;gap:6px;overflow:hidden;}
#logo{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:8px;color:var(--gold);text-shadow:0 0 24px var(--gold-glow);line-height:1;white-space:nowrap;}
#logo small{display:block;font-size:.48rem;letter-spacing:3px;color:var(--muted);font-family:'Barlow Condensed',sans-serif;margin-top:-2px;}
#hdr-mid{display:flex;align-items:center;gap:8px;flex:1;justify-content:center;}
#turn-badge{font-family:'Bebas Neue',sans-serif;font-size:.88rem;letter-spacing:3px;padding:4px 12px;border:1px solid var(--gold);color:var(--gold);background:var(--gold-dim);white-space:nowrap;}
#phases{display:flex;}
.ph{font-family:'Barlow Condensed',sans-serif;font-size:.56rem;letter-spacing:1.5px;text-transform:uppercase;padding:3px 8px;color:var(--muted);border-right:1px solid var(--border);background:var(--surface2);transition:all .2s;}
.ph.active{color:var(--gold);background:var(--gold-dim);}
.ph:first-child{border-left:1px solid var(--border);}
#sync-indicator{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.6);padding:4px 10px;border-radius:4px;border:1px solid var(--green);margin-left:15px;}
#sync-indicator.hidden{display:none;}
.sync-dot{width:8px;height:8px;background:var(--green);border-radius:50%;animation:sync-pulse 1s infinite alternate;}
.sync-text{font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;color:var(--green);letter-spacing:1px;}
@keyframes sync-pulse{from{opacity:1;box-shadow:0 0 4px var(--green);}to{opacity:.4;box-shadow:none;}}
.hdr-btn{font-family:'Bebas Neue',sans-serif;letter-spacing:2px;font-size:.72rem;padding:5px 11px;border:1px solid var(--border2);background:transparent;color:var(--muted2);cursor:pointer;transition:all .15s;white-space:nowrap;}
.hdr-btn:hover{color:var(--text);border-color:var(--muted2);}

/* PLAYER STRIPS — slim info bars */
.pstrip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--strip-pad, 8px 16px);
  background: rgba(20, 20, 25, 0.65);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow: visible;
  position: relative;
  z-index: 100;
}

.pstrip.opp {
  flex-direction: row-reverse;
  flex-wrap: nowrap;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: linear-gradient(135deg, var(--surface2), #000);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
  flex-shrink: 0;
  position: relative;
}

.pname {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 3px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.money-box {
  display: flex;
  align-items: baseline;
  gap: 3px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, .4);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: "Bebas Neue", sans-serif;
  font-size: var(--money-size, 1.8rem);
  color: var(--gold);
  letter-spacing: 2px;
  transition: all .3s;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.money-box::before {
  content: "$";
  font-size: .9rem;
  opacity: .6;
  margin-bottom: 2px;
}

.money-box.hurt {
  color: var(--red);
  border-color: rgba(255, 59, 59, .4);
  background: var(--red-dim);
  animation: mhurt .5s;
}

@keyframes mhurt {

  0%,
  100% {}

  50% {
    box-shadow: 0 0 22px rgba(255, 59, 59, .7);
  }
}

.money-box.danger {
  color: var(--red);
  border-color: rgba(255, 59, 59, .6);
  background: var(--red-dim);
  animation: mdanger .7s infinite;
}

@keyframes mdanger {

  0%,
  100% {
    box-shadow: none;
    border-color: rgba(255, 59, 59, .4);
  }

  50% {
    box-shadow: 0 0 24px rgba(255, 59, 59, .8), 0 0 8px rgba(255, 59, 59, .4);
    border-color: rgba(255, 59, 59, .9);
  }
}

/* Critical — under $200 even more urgent */
.money-box.critical {
  color: #fff;
  border-color: var(--red);
  background: rgba(255, 59, 59, .2);
  animation: mcritical .4s infinite;
}

@keyframes mcritical {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(255, 59, 59, .4);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 30px rgba(255, 59, 59, 1);
    transform: scale(1.02);
  }
}


.income-badge {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .7rem;
  letter-spacing: 1px;
  color: var(--green);
  border: 1px solid rgba(0, 255, 135, .4);
  border-radius: 4px;
  padding: 4px 8px;
  background: rgba(0, 255, 135, .1);
  box-shadow: 0 0 10px rgba(0, 255, 135, 0.15);
}

.synergy-bar {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}

.synergy-pill {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  opacity: .4;
  cursor: default;
  transition: all .3s;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.sp-count {
  font-family: "Bebas Neue", sans-serif;
  font-size: .8rem;
  line-height: 1;
}
.sp-crew {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .3rem;
  letter-spacing: .5px;
  line-height: 1;
  opacity: .85;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  max-width: 34px;
  text-transform: uppercase;
}

.synergy-pill.active {
  opacity: 1;
  animation: pglow .8s infinite alternate;
}

@keyframes pglow {
  from {
    box-shadow: none
  }

  to {
    box-shadow: 0 0 8px currentColor
  }
}

.synergy-pill.trap-crew {
  color: var(--trap-crew);
  border-color: rgba(255, 59, 59, .3);
  background: rgba(255, 59, 59, .08);
}

.synergy-pill.cartel-crew {
  color: var(--cartel-crew);
  border-color: rgba(206, 147, 216, .3);
  background: rgba(206, 147, 216, .08);
}

.synergy-pill.ogs-crew {
  color: var(--ogs-crew);
  border-color: rgba(212, 175, 55, .3);
  background: rgba(212, 175, 55, .08);
}

.synergy-pill.hustlers-crew {
  color: var(--hustlers-crew);
  border-color: rgba(0, 255, 135, .3);
  background: rgba(0, 255, 135, .08);
}

.synergy-pill.mang-crew {
  color: var(--mang-crew);
  border-color: rgba(123, 45, 139, .3);
  background: rgba(123, 45, 139, .08);
}

.synergy-pill.jakuza-crew {
  color: var(--jakuza-crew);
  border-color: rgba(220, 20, 60, .3);
  background: rgba(220, 20, 60, .08);
}

.synergy-pill.vercetti-crew {
  color: var(--vercetti-crew);
  border-color: rgba(74, 144, 217, .3);
  background: rgba(74, 144, 217, .08);
}

.synergy-pill.sadboyz-crew {
  color: var(--sadboyz-crew);
  border-color: rgba(196, 166, 184, .3);
  background: rgba(196, 166, 184, .08);
}

.synergy-pill.earth-crew {
  color: var(--earth-crew);
  border-color: rgba(46, 139, 122, .3);
  background: rgba(46, 139, 122, .08);
}

.synergy-pill.yonkers-crew {
  color: var(--yonkers-crew);
  border-color: rgba(232, 117, 42, .3);
  background: rgba(232, 117, 42, .08);
}

.synergy-pill.cari-crew {
  color: var(--cari-crew);
  border-color: rgba(32, 178, 170, .3);
  background: rgba(32, 178, 170, .08);
}

.synergy-pill.payaso-crew {
  color: var(--payaso-crew);
  border-color: rgba(57, 255, 20, .3);
  background: rgba(57, 255, 20, .08);
}

.synergy-pill.tweaker-crew {
  color: var(--tweaker-crew);
  border-color: rgba(173, 190, 24, .3);
  background: rgba(173, 190, 24, .08);
}

.synergy-pill.alpha-crew {
  color: var(--alpha-crew);
  border-color: rgba(27, 58, 107, .5);
  background: rgba(27, 58, 107, .12);
}

.deck-info {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .5px;
  white-space: nowrap;
}

.deck-info b {
  color: var(--text);
}

.card-back {
  width: 38px;
  height: 52px;
  border-radius: 4px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1a0d2e 0%, #0d0818 60%, #1a0d2e 100%);
  border: 1px solid rgba(212, 175, 55, .35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 0 8px rgba(212, 175, 55, .05);
  position: relative;
  overflow: hidden;
}

.card-back::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  border: 1px solid rgba(212, 175, 55, .2);
  background: repeating-linear-gradient(45deg,
      transparent 0px, transparent 3px,
      rgba(212, 175, 55, .04) 3px, rgba(212, 175, 55, .04) 4px);
}

.card-back::after {
  content: 'B';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .55rem;
  letter-spacing: 1px;
  color: rgba(212, 175, 55, .3);
}

#opp-hand-backs {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 120px;
  justify-content: flex-end;
}

.card-back.revealed {
  border-color: rgba(0, 255, 135, .4);
  box-shadow: 0 0 6px rgba(0, 255, 135, .2);
}

.card-back.revealed::after {
  content: none;
}

.scan-id {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .45rem;
  letter-spacing: 1px;
  color: var(--green);
  opacity: .8;
  text-transform: uppercase;
}

.scanned-card {
  border-color: rgba(0, 255, 135, .4) !important;
  box-shadow: 0 0 6px rgba(0, 255, 135, .2) !important;
}

/* BATTLEFIELD */
#bf {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  position: relative;
  background: radial-gradient(ellipse at center, rgba(20, 25, 35, 0.9) 0%, #050505 100%);
  justify-content: center;
  perspective: 1200px;
}

#bf::before {
  content: "BLOC";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Bebas Neue", sans-serif;
  font-size: 10rem;
  letter-spacing: 40px;
  color: rgba(255, 255, 255, .015);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  text-shadow: 0 0 50px rgba(0, 255, 135, 0.05);
}

.field-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--field-gap, 12px);
  padding: 10px 8px;
  position: relative;
  z-index: 2;
  overflow-x: auto;
  overflow-y: visible;
  flex-shrink: 0;
  transform-style: preserve-3d;
}

.field-row.opp-row {
  align-items: flex-end;
  padding-bottom: 10px;
}

.field-row.p-row {
  align-items: flex-start;
  padding-top: 10px;
}

/* TERRITORY STRIP */
#territory-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  margin: 10px 0;
}

#territory-strip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50vw;
  right: -50vw;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 135, 0.3), rgba(212, 175, 55, .6), rgba(0, 255, 135, 0.3), transparent);
  pointer-events: none;
  box-shadow: 0 0 20px rgba(0, 255, 135, 0.4);
}

.terr-side {
  padding: 6px 14px;
  display: flex;
  align-items: center;
}

.terr-side.opp-side {
  justify-content: flex-start;
}

.terr-side.p-side {
  justify-content: flex-end;
}

#terr-center-label {
  font-family: "Bebas Neue", sans-serif;
  font-size: .65rem;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, .08);
  white-space: nowrap;
  text-align: center;
  padding: 0 12px;
}

/* TERRITORY CARD */
.territory-card {
  width: 280px;
  height: 76px;
  border-radius: 5px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  cursor: default;
  transition: all .3s;
  flex-shrink: 0;
}

.territory-card.empty {
  width: 280px;
  height: 76px;
  border: 1px dashed rgba(255, 255, 255, .1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  flex-direction: column;
  gap: 4px;
}

.territory-card.empty:hover {
  border-color: rgba(212, 175, 55, .35);
  background: rgba(212, 175, 55, .04);
}

.terr-empty-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .15);
}

.territory-card.valid-play {
  border-color: rgba(0, 255, 135, .5) !important;
  border-style: solid !important;
  box-shadow: 0 0 14px rgba(0, 255, 135, .2);
}

.territory-card.neutral {
  background: linear-gradient(90deg, #141414 0%, #1e1e1e 50%, #141414 100%);
  border-color: #2a2a2a;
}

.territory-card.trap-t {
  background: linear-gradient(90deg, #1a0500 0%, #2d0a00 50%, #1a0500 100%);
  border-color: rgba(255, 59, 59, .4);
  box-shadow: 0 0 14px rgba(255, 59, 59, .18);
}

/* Territory field cards — rarity-based */
.territory-card.common {
  background: linear-gradient(90deg, #0a1a0d 0%, #0f2e12 50%, #0a1a0d 100%);
  border-color: rgba(46, 204, 113, .4);
  box-shadow: 0 0 14px rgba(46, 204, 113, .18);
}

.territory-card.rare,
.territory-card.cartel-t,
.territory-card.ogs-t {
  background: linear-gradient(90deg, #0d1829 0%, #102040 50%, #0d1829 100%);
  border-color: rgba(58, 143, 223, .4);
  box-shadow: 0 0 14px rgba(58, 143, 223, .18);
}

.territory-card.epic {
  background: linear-gradient(90deg, #160d2e 0%, #2a1660 50%, #160d2e 100%);
  border-color: rgba(198, 107, 255, .4);
  box-shadow: 0 0 14px rgba(198, 107, 255, .18);
}

.territory-card.hustlers-t {
  background: linear-gradient(90deg, #0d1829 0%, #102040 50%, #0d1829 100%);
  border-color: rgba(58, 143, 223, .4);
  box-shadow: 0 0 14px rgba(58, 143, 223, .18);
}

.terr-art {
  width: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: rgba(0, 0, 0, .3);
  flex-shrink: 0;
  position: relative;
}

.terr-art::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .3));
}

.terr-body {
  flex: 1;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.terr-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 2px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.terr-effect {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .58rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.terr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.terr-tag {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .52rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
}

.terr-durability {
  display: flex;
  gap: 4px;
  align-items: center;
}

.dur-heart {
  font-size: .85rem;
  transition: all .3s;
  filter: drop-shadow(0 0 3px currentColor);
}

.dur-heart.full {
  color: var(--red);
}

.dur-heart.empty {
  color: rgba(255, 255, 255, .15);
  filter: none;
}

.territory-card.destroying {
  animation: terrDestroy .8s ease-out forwards;
}

@keyframes terrDestroy {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  20% {
    opacity: 1;
    transform: scale(1.05);
    filter: brightness(3);
  }

  60% {
    opacity: .5;
    transform: scale(.95);
    filter: brightness(.5) saturate(0);
  }

  100% {
    opacity: 0;
    transform: scale(.8);
  }
}

.territory-card.damaged {
  animation: terrDamage .4s ease-out;
}

@keyframes terrDamage {

  0%,
  100% {}

  30% {
    transform: translateX(-5px);
    filter: brightness(1.8);
  }

  60% {
    transform: translateX(5px);
  }
}

.terr-hit-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 59, 59, .45);
  border-radius: 5px;
  pointer-events: none;
  animation: hitflash .35s ease-out forwards;
}

@keyframes hitflash {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* SLOTS */
.slot {
  width: var(--slot-w, 132px);
  height: var(--slot-h, 180px);
  border: 2px solid rgba(255, 255, 255, .05);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
  overflow: visible;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 10px 20px rgba(0, 0, 0, 0.5);
}

.slot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%, rgba(255, 255, 255, 0.02) 100%);
  pointer-events: none;
}

.slot .empty-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .15);
  pointer-events: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.slot:hover {
  border-color: rgba(212, 175, 55, .5);
  background: rgba(212, 175, 55, .05);
  transform: translateY(-2px);
  box-shadow: inset 0 0 30px rgba(212, 175, 55, 0.1), 0 15px 30px rgba(0, 0, 0, 0.6);
}

.slot.valid-play {
  border-color: rgba(0, 255, 135, .8);
  border-style: solid;
  box-shadow: 0 0 20px rgba(0, 255, 135, .3), inset 0 0 30px rgba(0, 255, 135, .1);
  animation: slotpulse 2s infinite alternate;
  background: rgba(0, 255, 135, 0.05);
}

@keyframes slotpulse {
  0% {
    box-shadow: 0 0 15px rgba(0, 255, 135, .2), inset 0 0 20px rgba(0, 255, 135, .05);
  }

  100% {
    box-shadow: 0 0 30px rgba(0, 255, 135, .6), inset 0 0 40px rgba(0, 255, 135, .2);
    border-color: rgba(0, 255, 135, 1);
  }
}

.slot.valid-target {
  border-color: rgba(255, 59, 59, .9);
  border-style: solid;
  animation: tgtpulse .6s infinite alternate;
  cursor: crosshair;
  background: rgba(255, 59, 59, 0.08);
}

@keyframes tgtpulse {
  0% {
    box-shadow: 0 0 10px rgba(255, 59, 59, 0.3)
  }

  100% {
    box-shadow: 0 0 25px rgba(255, 59, 59, .8), inset 0 0 15px rgba(255, 59, 59, 0.3)
  }
}

/* CARDS */
.card {
  width: var(--card-w, 130px);
  height: var(--card-h, 178px);
  border-radius: 8px;
  border: 1px solid transparent;
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .2s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

.card:hover {
  transform: translateY(-12px) scale(1.08);
  z-index: 50;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 255, 255, 0.1);
}

.card.selected {
  transform: translateY(-16px) scale(1.1);
  z-index: 60;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(212, 175, 55, 0.4);
}

.card.tapped {
  transform: rotate(15deg);
  opacity: .6;
  filter: grayscale(0.5);
}

.card.tapped:hover {
  transform: rotate(15deg) translateY(-5px);
  filter: grayscale(0);
}

.card.can-attack {
  animation: atkready 1s infinite alternate;
  border-color: rgba(255, 59, 59, 0.5);
}

@keyframes atkready {
  from {
    box-shadow: 0 0 10px rgba(255, 59, 59, .4), inset 0 0 5px rgba(255, 59, 59, .2);
    transform: scale(1);
  }

  to {
    box-shadow: 0 0 30px rgba(255, 59, 59, 1), inset 0 0 15px rgba(255, 59, 59, .6);
    transform: scale(1.03);
  }
}

.card.character {
  background: linear-gradient(155deg, #0d1b2a, #1a2f4a 55%, #0a1520);
  border-color: #1e3a5a;
}

/* ── Rarity-based card frames ── */
.card.common {
  background: linear-gradient(155deg, #0a1a0d, #0f2e12 55%, #071209);
  border-color: #2d6e38;
}

.card.rare {
  background: linear-gradient(155deg, #0d1829, #102040 55%, #08111e);
  border-color: #2a5a9e;
}

.card.epic {
  background: linear-gradient(155deg, #160d2e, #2a1660 55%, #0f0820);
  border-color: #6b35b8;
}

.card.legendary {
  background: linear-gradient(155deg, #1e1200, #3d2600 55%, #150d00);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, .28);
}

.card.legendary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(125deg,
      transparent 20%,
      rgba(212, 175, 55, .12) 30%,
      rgba(255, 220, 100, .22) 38%,
      rgba(212, 175, 55, .08) 45%,
      transparent 55%,
      rgba(180, 140, 40, .1) 65%,
      rgba(255, 200, 80, .18) 72%,
      transparent 80%);
  background-size: 200% 200%;
  animation: holoShimmer 3s ease infinite;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
}

@keyframes holoShimmer {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Epic prismatic shimmer — purple/blue/teal */
.card.epic::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(125deg,
      transparent 20%,
      rgba(198, 107, 255, .10) 28%,
      rgba(110, 193, 255, .18) 36%,
      rgba(0, 255, 200, .10) 44%,
      transparent 54%,
      rgba(110, 193, 255, .08) 64%,
      rgba(198, 107, 255, .14) 72%,
      transparent 82%);
  background-size: 200% 200%;
  animation: epicShimmer 4s ease infinite;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
}

@keyframes epicShimmer {
  0% {
    background-position: 0% 0%;
  }

  33% {
    background-position: 100% 50%;
  }

  66% {
    background-position: 0% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

/* Rarity accent — bottom-right corner notch */
.card::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 6;
  pointer-events: none;
  border-style: solid;
}

.card.common::before {
  border-width: 0 0 14px 14px;
  border-color: transparent transparent #2ecc71 transparent;
  filter: drop-shadow(-1px -1px 2px rgba(46, 204, 113, .4));
}

.card.rare::before {
  border-width: 0 0 16px 16px;
  border-color: transparent transparent #3a8fdf transparent;
  filter: drop-shadow(-1px -1px 3px rgba(58, 143, 223, .5));
}

.card.epic::before {
  border-width: 0 0 18px 18px;
  border-color: transparent transparent #c66bff transparent;
  filter: drop-shadow(-1px -1px 4px rgba(198, 107, 255, .6));
}

.card.legendary::before {
  border-width: 0 0 20px 20px;
  border-color: transparent transparent var(--gold) transparent;
  filter: drop-shadow(-1px -1px 5px rgba(212, 175, 55, .8));
}

.card.equipment {
  background: linear-gradient(155deg, #1a1400, #2e2300 55%, #120f00);
  border-color: #4a3800;
}

.card.motion {
  background: linear-gradient(155deg, #001a0e, #003320 55%, #001208);
  border-color: #005a2a;
}

.card.motion.raid {
  background: linear-gradient(155deg, #1a0500, #330b00 55%, #120300);
  border-color: #8b2200;
}

.card.trap {
  background: linear-gradient(155deg, #1a0800, #331200 55%, #120500);
  border-color: #6b2d00;
}

.card.territory {
  background: linear-gradient(155deg, #0a0a14, #14142a 55%, #080810);
  border-color: #2a2a4a;
}

.card.territory.trap-t-card {
  background: linear-gradient(155deg, #1a0500, #2d0a00 55%, #120300);
  border-color: rgba(255, 59, 59, .5);
}

/* Territory backgrounds use rarity — crew classes kept for synergy pills only */

.card.territory.neutral-t-card {
  background: linear-gradient(155deg, #0f0f0f, #1a1a1a 55%, #0a0a0a);
  border-color: #333;
}

/* Crew borders replaced by rarity — see rarity card styles below */
.card.char-trap-crew,
.card.char-cartel-crew,
.card.char-ogs-crew,
.card.char-hustlers-crew {
  border-top: none;
  /* rarity handles the frame */
}

.playable-glow {
  position: absolute;
  inset: 0;
  box-shadow: 0 0 16px rgba(0, 255, 135, .32) inset;
  pointer-events: none;
  border-radius: 6px;
}

.selected-glow {
  position: absolute;
  inset: 0;
  box-shadow: 0 0 20px rgba(212, 175, 55, .55) inset;
  pointer-events: none;
  border-radius: 6px;
}

.c-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 5px 6px 3px;
  flex-shrink: 0;
}

.c-name {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.15;
  color: #fff;
  max-width: 78px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}

.c-crew-tag {
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: 1px;
  opacity: .8;
}

.c-cost {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.3rem;
  color: var(--gold);
  line-height: 1;
  min-width: 22px;
  text-align: right;
  flex-shrink: 0;
}

.c-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 0;
}

.c-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  opacity: .92;
}

.c-art .art-emoji {
  font-size: 2.2rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.c-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 28%, transparent 50%, rgba(0, 0, 0, .7) 68%, rgba(0, 0, 0, .92) 82%, rgba(0, 0, 0, .97) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Crew color accent bar — thin strip at top of card */
.c-crew-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 7;
  opacity: .85;
}

.c-typebar {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .56rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  text-align: center;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.c-id {
  font-family: 'Barlow', sans-serif;
  font-size: .38rem;
  letter-spacing: .5px;
  opacity: .35;
  color: #fff;
  text-transform: uppercase;
  margin-left: auto;
  font-weight: 400;
}

.c-text {
  font-size: .52rem;
  padding: 1px 6px 2px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .9);
  overflow: hidden;
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 1), 0 0 8px rgba(0, 0, 0, 1);
  display: block;
  max-height: 2.8em;
}

.c-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  background: rgba(0, 0, 0, .5);
  flex-shrink: 0;
  margin-top: auto;
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.stat {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 3px;
}

.stat-l {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .5px;
  opacity: .65;
}

.stat.atk {
  color: var(--red);
}

.stat.def {
  color: var(--blue);
}

.stat.bonus {
  color: var(--gold);
}

.equip-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(212, 175, 55, .88);
  color: #000;
  font-family: "Barlow Condensed", sans-serif;
  font-size: .52rem;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 2px;
  z-index: 10;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* TRAP ZONE */
.trap-zone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0 6px;
  flex-shrink: 0;
}

.trap-zone-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .55rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
  opacity: .6;
}

.trap-zone {
  width: 64px;
  height: 88px;
  border: 1px dashed rgba(255, 107, 53, .3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.trap-zone.has-trap {
  border-color: rgba(255, 107, 53, .65);
  background: rgba(255, 107, 53, .06);
}

.face-down-card {
  width: 58px;
  height: 82px;
  border-radius: 4px;
  background: repeating-linear-gradient(45deg, #1a0800, #1a0800 3px, #220c00 3px, #220c00 6px);
  border: 1px solid rgba(255, 107, 53, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  position: relative;
}

.face-down-card::after {
  content: "TRAP";
  position: absolute;
  bottom: 3px;
  font-family: "Bebas Neue", sans-serif;
  font-size: .55rem;
  letter-spacing: 2px;
  color: var(--orange);
  opacity: .7;
}

.trap-zone.has-trap .face-down-card {
  animation: trapblink 2s infinite;
}

@keyframes trapblink {

  0%,
  100% {
    opacity: .3
  }

  50% {
    opacity: .85
  }
}

/* HAND */
#hand-area {
  flex-shrink: 0;
  background: linear-gradient(0deg, rgba(10, 15, 20, 0.95) 0%, rgba(10, 15, 20, 0.6) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px 14px 10px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 100;
}

#hand-lbl {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .7rem;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

#hand-lbl span {
  color: var(--gold);
}

#hand-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none;
  perspective: 800px;
  align-items: flex-end;
}

.hand-card {
  flex-shrink: 0;
  transform-origin: bottom center;
  transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hand-card:hover {
  transform: translateY(-15px) scale(1.1) rotate(0deg) !important;
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 255, 255, 0.2);
}

/* PHASE LABEL ABOVE ACTION BUTTON */
#phase-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
}
#phase-label {
  font-family: "Bebas Neue", sans-serif;
  font-size: .6rem;
  letter-spacing: 3px;
  color: var(--gold);
  opacity: 0.65;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(212, 175, 55, .4);
}

/* ACTION BAR */
#actbar {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
  z-index: 200;
}

#log-wrap {
  pointer-events: auto;
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 20px;
  max-width: 50%;
}

#log {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .8rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#log b {
  color: var(--gold);
  text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

/* BUTTONS */
.btn {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 2px;
  font-size: .85rem;
  padding: 8px 18px;
  border: none;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.btn:active {
  transform: scale(.97);
}

.btn:disabled {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-gold {
  background: var(--gold);
  color: #000;
}

.btn-ghost {
  background: transparent;
  color: var(--muted2);
  border: 1px solid var(--border2);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--muted2);
}

.btn-green {
  background: rgba(0, 255, 135, .12);
  color: var(--green);
  border: 1px solid rgba(0, 255, 135, .3);
}

.btn-red {
  background: rgba(255, 59, 59, .12);
  color: var(--red);
  border: 1px solid rgba(255, 59, 59, .3);
}

#btn-leave-game-bottom,
#btn-auto-battle {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  margin-bottom: 5px;
}

#phase-btn {
  pointer-events: auto;
  background: linear-gradient(135deg, var(--gold) 0%, #ffdf73 100%);
  color: #000;
  font-size: 1.3rem;
  padding: 14px 24px;
  border-radius: 30px;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  text-shadow: none;
  margin-left: auto;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#phase-btn:hover:not(:disabled) {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 12px 35px rgba(212, 175, 55, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

#phase-btn:active:not(:disabled) {
  transform: scale(0.95);
}

/* FLOATING */
#notif {
  position: fixed;
  top: 65px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  border: 1px solid var(--gold);
  padding: 9px 26px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 4px;
  color: var(--gold);
  z-index: 800;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
}

#notif.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}

.float-money {
  position: fixed;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  pointer-events: none;
  z-index: 700;
  animation: floatup 1.2s ease-out forwards;
  letter-spacing: 2px;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
  transform: translateX(-50%);
}

.float-money.loss {
  color: var(--red);
  text-shadow: 0 0 12px rgba(255, 59, 59, .5), 0 2px 8px rgba(0, 0, 0, .8);
}

.float-money.gain {
  color: var(--green);
  text-shadow: 0 0 12px rgba(0, 255, 135, .5), 0 2px 8px rgba(0, 0, 0, .8);
}

@keyframes floatup {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(.8);
  }

  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px) scale(1.1);
  }

  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(-40px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-60px) scale(.9);
  }
}

@keyframes floatup {
  0% {
    opacity: 1;
    transform: translateY(0)
  }

  100% {
    opacity: 0;
    transform: translateY(-60px)
  }
}

/* ── CARD INSPECT OVERLAY ── */
#inspect-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  cursor: pointer;
  animation: inspectFadeIn .2s ease;
}

#inspect-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#inspect-overlay.hidden {
  display: none;
}

#inspect-inner .card {
  width: 240px;
  height: 320px;
  cursor: default;
  pointer-events: none;
}

#inspect-inner .card:hover {
  transform: none;
}

/* c-art is position:absolute and fills the card — no height override needed */
#inspect-inner .c-name {
  font-size: 1rem;
  max-width: 150px;
}

#inspect-inner .c-cost {
  font-size: 1.8rem;
}

#inspect-inner .c-typebar {
  font-size: .72rem;
}

#inspect-inner .c-text {
  font-size: .72rem !important;
  display: block !important;
}

#inspect-inner .c-bottom-group {
  padding: 6px 8px;
}

#inspect-inner .stat {
  font-size: 1.4rem;
}

#inspect-inner .stat-l {
  font-size: .6rem;
}

#inspect-hint {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .62rem;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .35);
}

@keyframes inspectFadeIn {
  from {
    opacity: 0;
    transform: scale(.96)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

.draw-anim {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 600;
  pointer-events: none;
  animation: cardFlipDraw .75s ease-out forwards;
  perspective: 600px;
}

.draw-anim .card {
  animation: cardFlipInner .75s ease-out forwards;
  backface-visibility: hidden;
}

@keyframes cardFlipDraw {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.7);
  }

  15% {
    opacity: 1;
  }

  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes cardFlipInner {
  0% {
    transform: rotateY(-90deg);
  }

  40% {
    transform: rotateY(8deg);
  }

  65% {
    transform: rotateY(-3deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

.territory-card.attack-target {
  animation: tgtpulse .7s infinite;
  cursor: crosshair;
  border-color: rgba(255, 59, 59, .7) !important;
  border-style: solid !important;
}

.territory-card.attack-target-terr {
  animation: terrpulse .7s infinite;
  cursor: crosshair;
}

@keyframes terrpulse {

  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 107, 53, 0)
  }

  50% {
    box-shadow: 0 0 20px rgba(255, 107, 53, .75)
  }
}

/* SYNERGY FLASH */
.syn-flash {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 6px;
  z-index: 600;
  pointer-events: none;
  animation: sflash 1.5s ease-out forwards;
}

@keyframes sflash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.8)
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05)
  }

  80% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1)
  }
}

/* TERRITORY DESTROYED FLASH */
.terr-destroy-flash {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 6px;
  color: var(--red);
  z-index: 650;
  pointer-events: none;
  text-align: center;
  animation: destroyflash 1.8s ease-out forwards;
}

@keyframes destroyflash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.7)
  }

  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1)
  }

  70% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1)
  }
}

/* MODAL */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

#overlay.hidden {
  display: none;
}

#modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  padding: 26px 24px;
  max-width: 460px;
  width: 90%;
  position: relative;
}

#modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#modal h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.9rem;
  letter-spacing: 5px;
  color: var(--gold);
  margin-bottom: 8px;
}

#modal p {
  color: var(--muted2);
  font-size: .82rem;
  line-height: 1.65;
  margin-bottom: 7px;
}

#modal ul {
  margin: 6px 0 16px 16px;
  color: var(--muted2);
  font-size: .8rem;
  line-height: 1.7;
}

#modal ul li::marker {
  color: var(--gold);
}

#gameover {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .94);
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  backdrop-filter: blur(10px);
}

#gameover.hidden {
  display: none;
}

#go-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4.5rem;
  letter-spacing: 12px;
  line-height: 1;
}

#go-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .9rem;
  letter-spacing: 3px;
  color: var(--muted2);
  text-transform: uppercase;
}

.divider {
  width: 100%;
  height: 0;
  flex-shrink: 0;
}


/* ═══════════════════════════════
   CENTER TERRITORY ZONE
═══════════════════════════════ */
#territory-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}

#territory-strip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .15), transparent);
  pointer-events: none;
}

#territory-center-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Center territory is wider — the focal point of the board */
#center-territory {
  width: 360px;
  max-width: 90vw;
}

#center-territory.territory-card {
  height: 80px;
}

#center-territory.territory-card.empty {
  height: 80px;
  gap: 8px;
  flex-direction: row;
  justify-content: center;
}

.terr-unclaimed-icon {
  font-size: 1.5rem;
}

.terr-empty-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .52rem;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .2);
  margin-top: 2px;
}

/* Owner color outline */
.territory-card.owned-p {
  outline: 2px solid rgba(0, 255, 135, .35);
  outline-offset: 2px;
}

.territory-card.owned-opp {
  outline: 2px solid rgba(255, 59, 59, .35);
  outline-offset: 2px;
}

/* ═══════════════════════════════
   COIN FLIP MODAL
═══════════════════════════════ */
#coin-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  z-index: 920;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

#coin-modal.hidden {
  display: none;
}

#coin-box {
  background: var(--surface);
  border: 1px solid var(--gold);
  padding: 36px 32px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  position: relative;
}

#coin-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#coin-box-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 6px;
  color: var(--gold);
  margin-bottom: 20px;
}

.coin-emoji {
  font-size: 4rem;
  display: block;
  margin: 0 auto 16px;
  transition: all .1s;
}

.coin-emoji.spinning {
  animation: coinspin .15s infinite;
  display: inline-block;
}

@keyframes coinspin {
  0% {
    transform: rotateY(0deg) scale(1);
  }

  50% {
    transform: rotateY(90deg) scale(0.6);
  }

  100% {
    transform: rotateY(180deg) scale(1);
  }
}

.coin-emoji.landed {
  animation: coinland .4s ease-out;
  display: inline-block;
}

@keyframes coinland {
  0% {
    transform: scale(1.4);
  }

  60% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.coin-result {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 3px;
  min-height: 28px;
  margin-bottom: 4px;
}

.coin-result.win {
  color: var(--green);
}

.coin-result.lose {
  color: var(--red);
}

/* ═══════════════════════════════
   TURN 1 BATTLE LOCK INDICATOR
═══════════════════════════════ */
.phase-locked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  border-radius: 4px;
}

.phase-locked-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .8rem;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .4);
  text-align: center;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .15);
}

#board {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ══════════════════════════
   INCOME TIER BADGE
══════════════════════════ */
.income-tier {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .55rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: all .5s;
}

.income-tier.early {
  color: #aaa;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
}

.income-tier.mid {
  color: #FF9800;
  border-color: rgba(255, 152, 0, .3);
  background: rgba(255, 152, 0, .08);
  animation: tierglow .8s infinite alternate;
}

.income-tier.late {
  color: var(--red);
  border-color: rgba(255, 59, 59, .4);
  background: rgba(255, 59, 59, .1);
  animation: tierglowred .8s infinite alternate;
}

@keyframes tierglow {
  from {
    box-shadow: none;
  }

  to {
    box-shadow: 0 0 8px rgba(255, 152, 0, .5);
  }
}

@keyframes tierglowred {
  from {
    box-shadow: none;
  }

  to {
    box-shadow: 0 0 10px rgba(255, 59, 59, .6);
  }
}

/* ══════════════════════════
   ART PLACEHOLDER
══════════════════════════ */
.art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Show card text in hand and preview, hide on field */
#hand-cards .c-text {
  display: block;
}

#preview .c-text {
  display: block;
  font-size: .7rem;
}

#preview .c-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Bottom group — text + stats stuck to bottom of card */
.c-bottom-group {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 3;
  width: 100%;
}

/* ── COUNTDOWN OVERLAY ── */
#countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30vw;
  font-weight: 700;
  color: rgba(255, 59, 59, 0.15);
  text-shadow: 0 0 80px rgba(255, 59, 59, 0.3);
  animation: countdownPulse .9s infinite;
  user-select: none;
}

#countdown-overlay.urgent {
  color: rgba(255, 59, 59, 0.35);
  text-shadow: 0 0 120px rgba(255, 59, 59, 0.6);
  animation: countdownPulse .3s infinite;
}

@keyframes countdownPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

/* ── TURN LOG HISTORY ── */
#log-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

#log-history {
  display: none;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: 120px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  animation: logSlideDown .15s ease;
}

#log-history.open {
  display: flex;
}

@keyframes logSlideDown {
  from {
    opacity: 0;
    transform: translateY(-4px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

#log-toggle-btn {
  background: none;
  border: none;
  color: var(--gold);
  font-size: .75rem;
  cursor: pointer;
  padding: 0 4px 0 0;
  line-height: 1;
  transition: transform .15s, color .15s;
  flex-shrink: 0;
}

#log-toggle-btn:hover {
  color: #fff;
}

#log {
  display: flex;
  align-items: center;
  gap: 2px;
}

.log-entry {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .58rem;
  color: rgba(255, 255, 255, .45);
  padding: 1px 4px;
  line-height: 1.3;
}

.log-turn {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .55rem;
  color: var(--gold);
  margin-right: 4px;
  opacity: .7;
}

/* ── GAME OVER SCREEN UPGRADE ── */
#go-logo {
  margin-bottom: 4px;
}

#go-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border2);
  padding: 14px 24px;
  min-width: 220px;
  margin: 4px 0 8px;
  position: relative;
}

#go-stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.go-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.go-stat-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .65rem;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

.go-stat-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: var(--text);
}

#go-continue-btn {
  min-width: 220px;
  font-size: .9rem;
  padding: 12px;
}

#go-hint {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .58rem;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .2);
  margin-top: -4px;
}

/* ── VICTORY CONFETTI ── */
.confetti-piece {
  position: fixed;
  pointer-events: none;
  z-index: 960;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ── DEFEAT SHAKE ── */
@keyframes defeatShake {

  0%,
  100% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(-12px) rotate(-1deg);
  }

  20% {
    transform: translateX(12px) rotate(1deg);
  }

  30% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  50% {
    transform: translateX(-6px);
  }

  60% {
    transform: translateX(6px);
  }

  70% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(3px);
  }
}

body.defeat-shake {
  animation: defeatShake .6s ease-out;
}

/* ── Income tick animation ── */
.money-tick {
  animation: moneyTick .45s ease-out !important;
}

@keyframes moneyTick {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  35% {
    transform: scale(1.18) translateY(-3px);
    filter: brightness(2) drop-shadow(0 0 8px #33d97c);
  }

  70% {
    transform: scale(1.05) translateY(-1px);
    filter: brightness(1.4);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* ── Card rarity play flash ── */
.rarity-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 850;
  animation: rarityFlash .5s ease-out forwards;
}

.rarity-flash.legendary {
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, .3) 0%, transparent 70%);
}

.rarity-flash.epic {
  background: radial-gradient(ellipse at center, rgba(198, 107, 255, .25) 0%, transparent 70%);
}

.rarity-flash.rare {
  background: radial-gradient(ellipse at center, rgba(110, 193, 255, .2) 0%, transparent 70%);
}

@keyframes rarityFlash {
  0% {
    opacity: 0;
    transform: scale(.8);
  }

  30% {
    opacity: 1;
    transform: scale(1.05);
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* ── WIN STREAK BADGE ── */
.streak-badge {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .65rem;
  letter-spacing: 2px;
  padding: 1px 6px;
  border-radius: 2px;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

.streak-badge.hidden {
  display: none;
}

.streak-badge.win-streak {
  background: rgba(255, 140, 0, .15);
  border: 1px solid rgba(255, 140, 0, .4);
  color: #ff8c00;
  animation: streakPulse 2s ease-in-out infinite;
}

.streak-badge.loss-streak {
  background: rgba(100, 160, 255, .1);
  border: 1px solid rgba(100, 160, 255, .3);
  color: #6ec1ff;
}

@keyframes streakPulse {

  0%,
  100% {
    box-shadow: none;
  }

  50% {
    box-shadow: 0 0 8px rgba(255, 140, 0, .5);
  }
}

/* ── TURF CLAIMED BANNER ── */
#turf-claimed-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 2px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 4px;
  pointer-events: none;
  animation: turfSlideIn .35s ease-out;
  white-space: nowrap;
}

#turf-claimed-banner.hidden {
  display: none !important;
}

#turf-claimed-banner.yours {
  background: rgba(0, 0, 0, .85);
  border: 1px solid var(--green);
  color: var(--green);
  box-shadow: 0 0 20px rgba(51, 217, 124, .3);
}

#turf-claimed-banner.theirs {
  background: rgba(0, 0, 0, .85);
  border: 1px solid var(--red);
  color: var(--red);
  box-shadow: 0 0 20px rgba(255, 59, 59, .3);
}

.turf-icon {
  font-size: 1.1rem;
}

.turf-text {
  font-size: .8rem;
}

.turf-name {
  font-size: .65rem;
  opacity: .7;
}

@keyframes turfSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%) scale(.9);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ── MENU FOOTER ── */
#menu-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .6rem;
  letter-spacing: 2px;
  color: var(--muted);
}

#twitter-link {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}

#twitter-link:hover {
  color: #fff;
}

/* ── Guest Play Button ── */
#auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .65rem;
  letter-spacing: 3px;
  color: var(--muted);
}

#auth-divider::before,
#auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border2);
}

#guest-play-btn {
  width: 100%;
  padding: 12px 16px !important;
  border-color: rgba(255, 255, 255, .15) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: .85rem !important;
}

#guest-play-btn:hover {
  border-color: rgba(255, 255, 255, .4) !important;
  background: rgba(255, 255, 255, .05) !important;
  color: #fff !important;
}

#guest-play-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .6rem;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: normal;
  text-transform: none;
}

/* ── Guest Post-Game Signup Prompt ── */
#go-guest-prompt {
  width: 100%;
  max-width: 320px;
  margin-top: 12px;
  animation: fadeInUp .4s ease;
}

#go-guest-prompt.hidden {
  display: none;
}

#go-guest-divider {
  height: 1px;
  background: var(--border2);
  margin: 8px 0 16px;
}

#go-guest-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 12px;
  text-align: center;
}

#go-guest-perks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.go-perk {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .75rem;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .75);
  padding: 6px 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border2);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── WWOZ Radio Player ── */
#radio-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  margin: 0 16px 8px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 2px;
  gap: 12px;
}

#radio-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

#radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  flex-shrink: 0;
  transition: all .3s;
}

#radio-dot.live {
  background: #ff4444;
  box-shadow: 0 0 8px rgba(255, 68, 68, .8);
  animation: radioPulse 1.5s ease-in-out infinite;
}

@keyframes radioPulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .5
  }
}

#radio-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .75rem;
  letter-spacing: 3px;
  color: var(--text);
}

#radio-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .6rem;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 1px;
}

#radio-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

#radio-controls button {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: .8rem;
  width: 26px;
  height: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  border-radius: 2px;
}

#radio-controls button:hover {
  border-color: var(--gold);
  color: var(--gold);
}

#radio-toggle-btn {
  border-color: rgba(255, 255, 255, .2) !important;
}

#radio-vol-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .65rem;
  letter-spacing: 1px;
  color: var(--muted);
  min-width: 28px;
  text-align: center;
}

/* ── Header Mini Radio Player ── */
#hdr-radio {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  border-radius: 2px;
}

#hdr-radio-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  flex-shrink: 0;
  transition: all .3s;
}

#hdr-radio-dot.live {
  background: #ff4444;
  box-shadow: 0 0 6px rgba(255, 68, 68, .8);
  animation: radioPulse 1.5s ease-in-out infinite;
}

#hdr-radio-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .65rem;
  letter-spacing: 2px;
  color: var(--muted);
}

#hdr-radio-btn {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: .75rem;
  cursor: pointer;
  padding: 1px 4px;
  transition: color .15s;
  line-height: 1;
}

#hdr-radio-btn:hover {
  color: var(--gold);
}

#hdr-radio-vol {
  width: 60px;
  height: 3px;
  cursor: pointer;
  accent-color: var(--gold);
  opacity: .7;
}

#hdr-radio-vol:hover {
  opacity: 1;
}

/* ── Field HP Bar ── */
.field-hp-bar {
  position: absolute;
  bottom: 26px;
  left: 2px;
  right: 2px;
  height: 14px;
  background: rgba(0, 0, 0, .75);
  border-radius: 3px;
  overflow: hidden;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.field-hp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s ease, background .3s ease;
}

.field-hp-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .55rem;
  letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 1), 0 0 2px rgba(0, 0, 0, 1);
  pointer-events: none;
}

/* ── No Deck Warning Modal ── */
#no-deck-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(8px);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

#no-deck-box {
  background: var(--surface);
  border: 1px solid var(--gold);
  padding: 28px 24px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  position: relative;
}

#no-deck-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#no-deck-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 12px;
}

#no-deck-body {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .8rem;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.5;
  margin-bottom: 18px;
}

#no-deck-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Stability UI ── */
#offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #c0392b;
  color: #fff;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .75rem;
  letter-spacing: 3px;
  padding: 8px;
  transform: translateY(-100%);
  transition: transform .3s ease;
}

#offline-banner.visible {
  transform: translateY(0);
}

#offline-banner.hidden {
  display: none;
}

#global-loading {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#global-loading.hidden {
  display: none;
}

#global-loading-inner {
  text-align: center;
}

#global-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(212, 175, 55, .2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 12px;
}

#global-loading-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .8rem;
  letter-spacing: 3px;
  color: var(--gold);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#error-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(192, 57, 43, .9);
  color: #fff;
  z-index: 9998;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .75rem;
  letter-spacing: 1px;
  padding: 10px 18px;
  border-radius: 2px;
  max-width: 320px;
  text-align: center;
  animation: fadeInUp .3s ease;
}

#error-toast.hidden {
  display: none;
}



/* ── Auth Panels ── */
.auth-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.auth-msg {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem;
  letter-spacing: .5px;
  min-height: 18px;
  color: var(--red);
}

.auth-success {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem;
  letter-spacing: .5px;
  padding: 10px;
  color: var(--green);
  background: rgba(0, 255, 135, .06);
  border: 1px solid rgba(0, 255, 135, .2);
}

.auth-hint {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 0 0 4px;
}

#auth-forgot-btn {
  font-size: .6rem !important;
  color: var(--muted) !important;
  margin-top: -4px;
}

/* ── Change Password Modal ── */
#change-password-modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#change-password-modal.hidden {
  display: none;
}

#change-password-box {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 24px;
  width: 90%;
  max-width: 320px;
  position: relative;
}

#change-password-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

#change-password-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 16px;
  text-align: center;
}

#change-password-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Delete Account Modal ── */
#delete-account-modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#delete-account-modal.hidden {
  display: none;
}

#delete-account-box {
  background: var(--surface);
  border: 1px solid rgba(255, 59, 59, .35);
  padding: 28px 24px;
  width: 90%;
  max-width: 320px;
  position: relative;
}

#delete-account-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}

#delete-account-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 4px;
  color: var(--red);
  margin-bottom: 10px;
  text-align: center;
}

#delete-account-warning {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .5px;
  line-height: 1.5;
  margin-bottom: 16px;
  text-align: center;
}

#delete-account-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── CARD PRESTIGE FINISHES (v3.0.9) ── */

/* Chrome: Silver border + slight metallic shine */
.card.prestige-chrome {
  border-color: #aaa !important;
  box-shadow: 0 0 10px rgba(170, 170, 170, 0.4) !important;
}

.card.prestige-chrome::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%);
  background-size: 200% 200%;
  animation: prestigeShimmer 4s linear infinite;
  pointer-events: none;
  z-index: 4;
}

/* Gold: Premium gold border + golden aura */
.card.prestige-gold {
  border-color: var(--gold) !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.6) !important;
}

.card.prestige-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(212, 175, 55, 0.3) 50%, transparent 60%);
  background-size: 200% 200%;
  animation: prestigeShimmer 3s linear infinite;
  pointer-events: none;
  z-index: 4;
}

/* Diamond: Prismatic border + glitter face */
.card.prestige-diamond {
  border-color: #b4b4ff !important;
  box-shadow: 0 0 20px rgba(180, 180, 255, 0.7), inset 0 0 10px rgba(180, 180, 255, 0.3) !important;
}

.card.prestige-diamond::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-size: 200% 200%, 100px 100px;
  animation: prestigeShimmer 2s linear infinite;
  pointer-events: none;
  z-index: 4;
  opacity: 0.4;
  mix-blend-mode: overlay;
}

@keyframes prestigeShimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* ── MISSIONS OVERLAY (v3.0.10) ── */
#missions-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

#missions-overlay.active {
  display: flex;
}

.missions-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  padding: 20px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

.missions-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.missions-header {
  text-align: center;
  margin-bottom: 20px;
}

.missions-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: #fff;
  letter-spacing: 2px;
}

.missions-subtitle {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 2px;
}

.missions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mission-card {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.mission-card.complete {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.05);
}

.mission-card.claimed {
  opacity: 0.5;
  filter: grayscale(1);
}

.mission-info {
  flex: 1;
  margin-right: 15px;
}

.mission-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: 1px;
}

.mission-desc {
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.mission-progress-wrap {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.mission-progress-bar {
  height: 100%;
  background: var(--green);
  transition: width 0.3s ease;
}

.mission-card.complete .mission-progress-bar {
  background: var(--gold);
}

.mission-progress-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  color: var(--muted);
  text-align: right;
}

.mission-action {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.mission-reward {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  color: #fff;
}

/* ── PROFILE TITLES (v3.0.11) ── */
.player-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

#profile-titles-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.title-equip-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.title-equip-btn:hover:not(.locked) {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.title-equip-btn.active {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.title-equip-btn.locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}

.title-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.title-desc {
  font-size: 0.65rem;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  margin-top: 4px;
}


/* -- SOCIAL DRAWER -- */
#social-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(10px);
  border-left: 1px solid var(--border);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#social-drawer.drawer-closed {
  transform: translateX(100%);
}

#social-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
}

#social-hdr h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: var(--blue);
  margin: 0;
}

#social-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.social-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 12px 0;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.social-tab.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.social-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--blue);
}

#social-content {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  position: relative;
}

/* Friend / Request Items */
.social-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border2);
  border-radius: 6px;
  margin-bottom: 8px;
}

.social-item-avatar {
  width: 32px;
  height: 32px;
  background: #222;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-right: 12px;
  position: relative;
}

.status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #111;
  background: var(--muted);
}
.status-dot.online { background: var(--green); }
.status-dot.in-game { background: var(--gold); }

.social-item-info {
  flex: 1;
}

.social-item-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.social-item-status {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  color: var(--muted);
}

.social-item-actions {
  display: flex;
  gap: 6px;
}

#req-badge {
  background: var(--red);
  color: #fff;
  font-size: 0.6rem;
  padding: 2px 5px;
  border-radius: 10px;
  margin-left: 4px;
}

/* Chat View */
#social-chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#chat-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 10px;
}

#chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
}

.chat-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.3;
}

.chat-msg.them {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.1);
  border-bottom-left-radius: 2px;
}

.chat-msg.me {
  align-self: flex-end;
  background: rgba(43, 115, 237, 0.3);
  border: 1px solid rgba(43, 115, 237, 0.5);
  border-bottom-right-radius: 2px;
}

#chat-input-area {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border2);
}

#chat-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border2);
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
}