* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: #0b0e1a; touch-action: none; overscroll-behavior: none; }
@supports (height: 100dvh) { html, body { height: 100dvh; } }
body { font-family: 'Arial Black', 'Segoe UI Black', Impact, sans-serif; color: #fff; user-select: none; -webkit-user-select: none; }

#game, #game canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 6px 10px;
  padding: max(6px, env(safe-area-inset-top, var(--safe-area-inset-top, 0px))) max(10px, env(safe-area-inset-right, var(--safe-area-inset-right, 0px))) 6px max(10px, env(safe-area-inset-left, var(--safe-area-inset-left, 0px)));
  pointer-events: none;
}
#hud-players { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip {
  display: flex; align-items: center; gap: 5px;
  background: rgba(10, 12, 28, .72); border: 2px solid #2a2f55; border-radius: 10px;
  padding: 3px 8px; font-size: 13px; line-height: 1.2; transition: opacity .3s;
}
.chip.dead { opacity: .35; filter: grayscale(.8); }
.chip .dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.65); }
.chip .nm { font-size: 12px; letter-spacing: .5px; }
.chip .stars { color: #ffd34d; font-size: 11px; }
.chip .stat { font-size: 11px; opacity: .85; }
.chip .sick { animation: pulse .5s infinite alternate; }
#hud-timer {
  background: rgba(10, 12, 28, .8); border: 2px solid #2a2f55; border-radius: 10px;
  padding: 4px 12px; font-size: 20px; letter-spacing: 2px; min-width: 86px; text-align: center;
}
#hud-timer.hurry { color: #ff5050; border-color: #ff5050; animation: pulse .4s infinite alternate; }

#banner {
  position: fixed; top: 38%; left: 0; right: 0; z-index: 6; text-align: center;
  font-size: clamp(40px, 9vw, 110px); letter-spacing: 6px; pointer-events: none;
  color: #ffd34d; text-shadow: 0 0 24px #ff7b00, 0 5px 0 #7a3500, 0 0 60px #ff3c00;
  animation: bannerPop .35s ease-out;
}
#banner.small {
  font-size: clamp(20px, 3.4vw, 34px); letter-spacing: 2px; top: 26%;
  text-shadow: 0 0 14px #ff7b00, 0 3px 0 #7a3500;
}
@keyframes bannerPop { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pulse { from { opacity: 1; } to { opacity: .45; } }
.blink { animation: pulse .7s infinite alternate; }

/* ---------- Screens ---------- */
#screens .screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
  --sgap: 14px; gap: var(--sgap);
  background: radial-gradient(ellipse at center, rgba(10,13,30,.55) 0%, rgba(5,6,16,.88) 100%);
  padding: 16px;
  padding: max(16px, env(safe-area-inset-top, var(--safe-area-inset-top, 0px))) max(16px, env(safe-area-inset-right, var(--safe-area-inset-right, 0px)))
           max(16px, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px))) max(16px, env(safe-area-inset-left, var(--safe-area-inset-left, 0px)));
  text-align: center;
  animation: screenIn .26s ease-out;
  overflow-y: auto; overflow-x: hidden;
  touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* center content when it fits, scroll from the very top when it doesn't
   (justify-content: center would clip the top behind the browser header);
   the negative margins cancel the flex gap the spacers would otherwise add */
#screens .screen::before, #screens .screen::after { content: ''; flex: none; }
#screens .screen::before { margin: auto auto calc(-1 * var(--sgap)); }
#screens .screen::after { margin: calc(-1 * var(--sgap)) auto auto; }
@keyframes screenIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.logo { display: flex; flex-direction: column; line-height: .9; animation: logoFloat 4.5s ease-in-out infinite; }
.logo span {
  font-size: clamp(52px, 12vw, 130px); letter-spacing: 4px;
  color: #fff; text-shadow: 0 6px 0 #16204d, 0 0 36px rgba(80,140,255,.55);
}
.logo .logo2 { color: #ffd34d; animation: logoGlow 2.4s ease-in-out infinite; }
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes logoGlow {
  0%, 100% { text-shadow: 0 6px 0 #7a3500, 0 0 42px rgba(255,120,0,.8); }
  50% { text-shadow: 0 6px 0 #7a3500, 0 0 85px rgba(255,170,0,1), 0 0 28px rgba(255,80,0,.9); }
}

#title-menu { display: flex; flex-direction: column; gap: 10px; width: min(92vw, 430px); margin-top: 6px; }
.menu-btn {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  font-family: inherit; color: #fff; padding: 12px 18px; border-radius: 14px;
  background: linear-gradient(100deg, #262e5e, #1a2046); border: 2px solid #4a55a8;
  transition: transform .12s, box-shadow .2s, filter .2s;
}
.menu-btn:hover { transform: translateX(6px) scale(1.02); filter: brightness(1.25); box-shadow: 0 0 24px rgba(90,130,255,.35); }
.menu-btn:active { transform: translateX(6px) scale(.99); }
.menu-btn .mi { font-size: 30px; }
.menu-btn .mt { display: flex; flex-direction: column; font-size: 19px; letter-spacing: 2px; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.menu-btn .mt small { font-size: 11px; letter-spacing: .4px; color: #aab3e8; font-family: 'Segoe UI', Arial, sans-serif; }
.menu-btn.online { background: linear-gradient(100deg, #1c4f8f, #123067); border-color: #4f9ee8; }
.menu-btn.online:hover { box-shadow: 0 0 24px rgba(80,170,255,.45); }
.menu-btn.mayhem { background: linear-gradient(100deg, #7a1690, #4a0c74); border-color: #d36bff; }
.menu-btn.mayhem:hover { box-shadow: 0 0 26px rgba(255,80,230,.45); }
.menu-btn.slim { padding: 7px 18px; opacity: .85; }
.menu-btn.slim .mt { font-size: 14px; }
.sub { font-size: clamp(12px, 2.4vw, 20px); color: #9fb0ff; letter-spacing: 2px; }
.big-hint { font-size: clamp(16px, 3.4vw, 30px); color: #fff; margin-top: 18px; letter-spacing: 2px; }
.tiny { font-size: 12px; color: #8b93c9; font-family: 'Segoe UI', Arial, sans-serif; }
.screen-title { font-size: clamp(30px, 7vw, 64px); letter-spacing: 4px; text-shadow: 0 4px 0 #16204d, 0 0 28px rgba(80,140,255,.5); }
.screen-title.gold { color: #ffd34d; text-shadow: 0 4px 0 #7a3500, 0 0 36px rgba(255,160,0,.7); }

#slots { display: grid; grid-template-columns: repeat(3, minmax(96px, 170px)); gap: 10px; width: min(92vw, 560px); }
.slot {
  border: 2px dashed #39406e; border-radius: 14px; padding: 10px 6px; min-height: 86px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; color: #6f77ad; background: rgba(12,15,34,.55); position: relative;
}
.slot.filled { border-style: solid; color: #fff; box-shadow: 0 0 18px rgba(0,0,0,.5) inset; }
.slot.acct { box-shadow: 0 0 14px rgba(255,211,77,.35), 0 0 18px rgba(0,0,0,.5) inset; }
.slot .slot-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.slot .face { width: 34px; height: 34px; border-radius: 50% 50% 42% 42%; border: 3px solid rgba(255,255,255,.7); position: relative; }
.slot .face::after { content: ''; position: absolute; left: 7px; top: 10px; width: 5px; height: 7px; border-radius: 50%;
  background: #101020; box-shadow: 11px 0 0 #101020; }
.slot .dev { font-size: 10px; color: #aab3e8; font-family: 'Segoe UI', Arial, sans-serif; }
.slot .kick-x {
  position: absolute; top: 4px; right: 7px; color: #ff7070; cursor: pointer; font-size: 14px; padding: 2px 5px;
}
#lobby-help { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: #aab3e8;
  font-family: 'Segoe UI', Arial, sans-serif; }
#lobby-row { display: flex; gap: 10px; }
#settings { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 92vw; }

.btn {
  font-family: inherit; font-size: 16px; letter-spacing: 1px; color: #fff; cursor: pointer;
  background: linear-gradient(#3a4380, #232a58); border: 2px solid #5562b8; border-radius: 12px;
  padding: 10px 22px; text-shadow: 0 2px 0 rgba(0,0,0,.5); transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(1.25); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.small { font-size: 12px; padding: 7px 12px; }
.btn.go { background: linear-gradient(#ff9d2e, #d4530f); border-color: #ffc46b; font-size: 22px; padding: 12px 38px; }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }

.board { display: flex; flex-direction: column; gap: 6px; min-width: min(80vw, 360px); }
.board .row { display: flex; align-items: center; gap: 10px; background: rgba(12,15,34,.7);
  border: 2px solid #2a2f55; border-radius: 10px; padding: 6px 12px; font-size: 16px; }
.board .row .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); }
.board .row .nm { flex: 1; text-align: left; letter-spacing: 1px; }
.board .row .stars { color: #ffd34d; letter-spacing: 2px; }
#champ-name { font-size: clamp(28px, 7vw, 60px); letter-spacing: 3px; }

/* ---------- Touch controls ---------- */
#touch { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
#stick-zone { position: absolute; left: 0; bottom: 0; width: min(45%, calc(100% - 320px)); height: 62%; pointer-events: auto; }
#stick-base {
  position: absolute; left: 60px; bottom: 70px; width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.22); display: none;
}
#stick-base.on { display: block; }
#stick-nub {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.3); border: 2px solid rgba(255,255,255,.5);
  transform: translate(-50%, -50%);
}
#touch-btns { position: absolute; right: 18px; bottom: 56px; display: flex; align-items: flex-end; gap: 12px; pointer-events: auto;
  right: max(18px, env(safe-area-inset-right, var(--safe-area-inset-right, 0px))); bottom: max(56px, calc(env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)) + 44px)); }
#btn-bomb, #btn-det, #btn-punch, #btn-line {
  border-radius: 50%; border: 3px solid rgba(255,255,255,.4); color: #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, rgba(255,160,60,.85), rgba(180,50,10,.85));
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
#btn-bomb { width: 92px; height: 92px; font-size: 40px; }
#btn-det { width: 58px; height: 58px; font-size: 24px;
  background: radial-gradient(circle at 35% 30%, rgba(120,170,255,.85), rgba(30,60,160,.85)); }
#btn-punch { width: 54px; height: 54px; font-size: 22px;
  background: radial-gradient(circle at 35% 30%, rgba(255,140,190,.85), rgba(170,30,90,.85)); }
#btn-line { width: 50px; height: 50px; font-size: 20px;
  background: radial-gradient(circle at 35% 30%, rgba(230,210,110,.85), rgba(140,110,20,.85)); }
#btn-bomb:active, #btn-det:active, #btn-punch:active, #btn-line:active { transform: scale(.92); filter: brightness(1.3); }

/* ---------- online / accounts ---------- */
.btn-online { background: linear-gradient(#3ea4ff, #1452c8); border-color: #7cc4ff; }
.btn-mayhem { background: linear-gradient(#ff4bd0, #7a0fd4); border-color: #ff9bec; font-size: 17px; }

/* ---------- Mayhem HUD ---------- */
#mayhem-hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#mh-board {
  position: absolute; top: 8px; right: 8px; min-width: 168px;
  top: max(8px, env(safe-area-inset-top, var(--safe-area-inset-top, 0px))); right: max(8px, env(safe-area-inset-right, var(--safe-area-inset-right, 0px)));
  background: rgba(8,10,24,.72); border: 2px solid #2b3566; border-radius: 10px; padding: 6px 8px;
  font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px;
}
#mh-board .bt { font-family: 'Arial Black', sans-serif; font-size: 11px; letter-spacing: 1px; color: #ff8fe6; text-align: center; margin-bottom: 4px; }
#mh-board .br { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
#mh-board .br .rk { width: 16px; color: #8b93c9; text-align: right; }
#mh-board .br .dot { width: 9px; height: 9px; border-radius: 50%; }
#mh-board .br .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mh-board .br .sc { color: #ffd34d; font-variant-numeric: tabular-nums; }
#mh-board .br.you { background: rgba(255,210,77,.13); border-radius: 5px; }
#mh-board .br.dead { opacity: .45; }
#mh-self {
  position: absolute; top: 8px; left: 8px;
  top: max(8px, env(safe-area-inset-top, var(--safe-area-inset-top, 0px))); left: max(8px, env(safe-area-inset-left, var(--safe-area-inset-left, 0px)));
  background: rgba(8,10,24,.72); border: 2px solid #2b3566; border-radius: 10px; padding: 6px 12px;
  font-family: 'Arial Black', sans-serif; font-size: 15px; letter-spacing: 1px;
}
#mh-self .lv { color: #6fffa8; }
#mh-self .sc { color: #ffd34d; }
#mh-self .rank { font-size: 11px; color: #9fb0ff; }
#mh-respawn {
  position: absolute; top: 40%; left: 0; right: 0; text-align: center;
  font-size: clamp(24px, 5vw, 44px); letter-spacing: 2px; color: #ff5a8a; text-shadow: 0 3px 0 #5a0820;
}
#mh-feed { position: absolute; top: 70px; left: 8px; display: flex; flex-direction: column; gap: 4px; max-width: 46vw; pointer-events: none; }
.feed-item {
  background: rgba(8,10,24,.62); border-left: 3px solid #ff5a8a; border-radius: 6px;
  padding: 3px 9px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; color: #cdd3f7;
  opacity: 1; transition: opacity .6s, transform .6s; animation: feedIn .18s ease-out;
}
.feed-item.mine { border-left-color: #ffd34d; background: rgba(60,40,8,.78); color: #ffe9b0; font-weight: 600; }
.feed-item.out { opacity: 0; transform: translateX(-14px); }
@keyframes feedIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
#mh-leave {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); pointer-events: auto;
  top: max(8px, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  background: rgba(20,24,48,.85); border: 2px solid #39406e; color: #cdd3f7; font-size: 16px;
}
#mh-leave:active { transform: translateX(-50%) scale(.92); }
.panel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(12,15,34,.7); border: 2px solid #2a2f55; border-radius: 14px;
  padding: 14px 20px; width: min(92vw, 430px);
}
.row-c { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
#login-box input, #screen-online input, #in-code {
  font-family: inherit; font-size: 17px; letter-spacing: 2px; color: #fff; text-align: center;
  background: rgba(5,7,18,.8); border: 2px solid #39406e; border-radius: 10px;
  padding: 9px 12px; width: 220px; outline: none;
}
#login-box input:focus, #screen-online input:focus { border-color: #7cc4ff; }
#in-code { width: 110px; text-transform: uppercase; }
#online-status { min-height: 16px; color: #ffae5e; }
#login-status { min-height: 16px; color: #ffae5e; }

/* ---------- account chip (title) + login overlay ---------- */
.acct-chip {
  position: fixed; z-index: 12; cursor: pointer; font-family: inherit;
  top: max(10px, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
  right: max(10px, env(safe-area-inset-right, var(--safe-area-inset-right, 0px)));
  background: rgba(20,24,48,.85); border: 2px solid #4a55a8; color: #cdd3f7;
  border-radius: 11px; padding: 8px 14px; font-size: 13px; letter-spacing: 1px;
  max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: filter .15s, transform .08s;
}
.acct-chip:hover { filter: brightness(1.2); }
.acct-chip:active { transform: scale(.96); }
.acct-chip.in { border-color: #ffd34d; color: #ffd34d; }

#login-overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center;
  padding: max(16px, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)))
           max(16px, env(safe-area-inset-right, var(--safe-area-inset-right, 0px)))
           max(16px, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)))
           max(16px, env(safe-area-inset-left, var(--safe-area-inset-left, 0px)));
  background: rgba(3,4,12,.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  overflow-y: auto; touch-action: pan-y; animation: screenIn .2s ease-out;
}
/* center the card when it fits, scroll from the top (incl. the ✕) when it doesn't */
#login-overlay::before, #login-overlay::after { content: ''; flex: none; margin: auto; }
.login-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(94vw, 380px); padding: 24px 20px 20px;
  background: radial-gradient(ellipse at top, #141a38, #0a0d1c);
  border: 2px solid #39406e; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.login-card .screen-title { font-size: clamp(22px, 6vw, 34px); }
.login-card .panel { background: none; border: none; padding: 0; }
.ov-close {
  position: absolute; top: 6px; right: 8px; cursor: pointer; font-family: inherit;
  background: none; border: none; color: #8b93c9; font-size: 22px; padding: 4px 10px; line-height: 1;
}
.ov-close:hover { color: #fff; }
.or-divider { font-size: 11px; color: #6f77ad; font-family: 'Segoe UI', Arial, sans-serif; margin: 4px 0; letter-spacing: 2px; }
#google-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#google-btn { min-height: 40px; color-scheme: light; }
#prof-head { font-size: 22px; letter-spacing: 1px; }
#prof-head .rk { color: #ffd34d; font-size: 15px; }
#xp-bar { width: 100%; height: 12px; background: #141830; border: 1px solid #39406e; border-radius: 7px; overflow: hidden; }
#xp-fill { height: 100%; background: linear-gradient(90deg, #ffae34, #ffe14d); width: 0%; transition: width .4s; }
.loadout-label { font-size: 11px; color: #8b93c9; letter-spacing: 2px; margin-top: 2px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.chips .pchip {
  font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; color: #cdd3f7; cursor: pointer;
  background: rgba(20,24,48,.9); border: 2px solid #39406e; border-radius: 9px; padding: 5px 9px;
}
.chips .pchip.sel { border-color: #ffd34d; color: #ffd34d; }
.chips .pchip.locked { opacity: .35; cursor: not-allowed; }
#room-code {
  background: rgba(20,40,12,.85); border: 2px solid #6fcf4e; border-radius: 10px;
  padding: 7px 16px; font-size: 16px; letter-spacing: 1px;
}
#room-code b { color: #aef58e; font-size: 22px; letter-spacing: 5px; }
#award {
  background: rgba(40,30,6,.9); border: 2px solid #ffd34d; border-radius: 12px;
  padding: 10px 22px; font-size: 17px; letter-spacing: 1px; line-height: 1.6; text-align: center;
}
#award .up { color: #aef58e; }
#award .hatdrop { color: #ffd34d; }

/* ---------- map builder ---------- */
#b-name {
  font-family: inherit; font-size: 15px; letter-spacing: 1px; color: #fff; text-align: center;
  background: rgba(5,7,18,.8); border: 2px solid #39406e; border-radius: 10px;
  padding: 8px 12px; width: 190px; outline: none;
}
#b-name:focus { border-color: #7cc4ff; }
#b-palette { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 94vw; }
.b-tool {
  font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; font-weight: 600; color: #cdd3f7; cursor: pointer;
  background: rgba(20,24,48,.9); border: 2px solid #39406e; border-radius: 9px; padding: 6px 10px;
}
.b-tool.sel { border-color: #ffd34d; color: #ffd34d; }
#b-grid {
  display: grid; gap: 1px; background: #060a1c; border: 2px solid #39406e; border-radius: 8px;
  padding: 4px; touch-action: none; user-select: none; cursor: crosshair;
}
.b-cell {
  border-radius: 2px; background: #151b3e; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #9fb0ff; overflow: hidden;
}
.b-cell.t-hard { background: #0a1230; box-shadow: inset 0 0 0 2px #2fb7d3; }
.b-cell.t-soft { background: #a637c9; }
.b-cell.t-belt { background: #0e1c44; color: #3ee8ff; font-weight: bold; }
.b-cell.t-tramp { background: #46155e; color: #ff8fd0; }
.b-cell.t-warp { background: #06303c; }
.b-cell.b-prev { outline: 2px solid #ffd34d; outline-offset: -2px; filter: brightness(1.5); }
.b-cell.b-spawn::after {
  content: '●'; position: absolute; top: 0; right: 2px;
  color: #ffd34d; font-size: 9px; text-shadow: 0 0 4px #000;
}
#b-maps {
  display: flex; flex-direction: column; gap: 6px; width: min(92vw, 520px);
  background: rgba(12,15,34,.8); border: 2px solid #2a2f55; border-radius: 12px; padding: 10px;
}
.b-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.b-row b { letter-spacing: 1px; font-size: 13px; }
.b-row .tiny { flex: 1; text-align: left; }

/* ---------- supply crates ---------- */
.crate-btn { background: linear-gradient(#c98b2e, #8a5410); border-color: #ffd98a; }
.crate-btn:not(:disabled) { animation: cratePulse 1.6s ease-in-out infinite; }
@keyframes cratePulse { 0%,100% { box-shadow: 0 0 4px rgba(255,200,80,.3); } 50% { box-shadow: 0 0 22px rgba(255,200,80,.75); } }
#crate-window {
  position: relative; width: min(92vw, 720px); height: 142px; overflow: hidden;
  background: rgba(4,6,16,.94); border: 2px solid #39406e; border-radius: 12px;
}
#crate-reel { position: absolute; top: 10px; left: 0; display: flex; gap: 10px; will-change: transform; }
.crate-card {
  width: 104px; height: 122px; flex: none; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #11152e; border: 2px solid #39406e; font-size: 42px;
}
.crate-card .cn { font-size: 10px; font-family: 'Segoe UI', Arial, sans-serif; color: #aab3e8; text-align: center; padding: 0 4px; }
.crate-card.r-common { border-color: #4b7bff; box-shadow: inset 0 -16px 24px -12px #4b7bff; }
.crate-card.r-rare { border-color: #b14bff; box-shadow: inset 0 -16px 24px -12px #b14bff; }
.crate-card.r-epic { border-color: #ffc83d; box-shadow: inset 0 -16px 24px -12px #ffc83d; }
.crate-card.won { animation: crateWon .55s ease-out forwards; }
@keyframes crateWon { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1.07); } }
#crate-marker {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
  background: #ffd34d; box-shadow: 0 0 12px #ffb300; transform: translateX(-50%); pointer-events: none;
}
#crate-result { font-size: clamp(18px, 3.4vw, 30px); letter-spacing: 1px; text-align: center; }
#crate-result .dup { display: block; color: #9fb0ff; font-size: .65em; }
#crate-result.r-common { color: #7ea4ff; } #crate-result.r-rare { color: #cf8aff; } #crate-result.r-epic { color: #ffd34d; }

/* ---------- controls / legend screen ---------- */
#help-table { border-collapse: collapse; font-family: 'Segoe UI', Arial, sans-serif; font-size: clamp(11px, 1.9vw, 15px); }
#help-table th { color: #9fb0ff; letter-spacing: 1px; font-size: 0.9em; }
#help-table th, #help-table td { padding: 5px 14px; border-bottom: 1px solid #2a2f55; text-align: left; }
#help-table td:first-child { color: #ffd34d; }
.legend-h { font-size: 17px; letter-spacing: 3px; color: #ffd34d; margin-top: 14px; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.legend-h .legend-sub { font-size: 11px; letter-spacing: .5px; color: #8b93c9; font-family: 'Segoe UI', Arial, sans-serif; }
.legend-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 6px 18px; width: min(94vw, 860px); text-align: left;
}
.legend-item {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; color: #c6cdf5;
  background: rgba(12,15,34,.55); border-radius: 8px; padding: 4px 10px;
}
.legend-item img { width: 26px; height: 26px; border-radius: 5px; flex: none; }
.legend-item .li-ico { font-size: 19px; width: 26px; text-align: center; flex: none; }
.legend-item b { color: #fff; font-family: 'Arial Black', sans-serif; font-size: 12px; letter-spacing: 1px; margin-right: 4px; }

/* small bottom toast: pickup / disease explanations */
#toast {
  position: fixed; bottom: 12%; left: 50%; transform: translateX(-50%);
  z-index: 7; pointer-events: none; max-width: 92vw;
  background: rgba(8,10,24,.85); border: 2px solid #39406e; border-radius: 12px;
  padding: 7px 18px; font-size: 14px; letter-spacing: .5px; color: #ffe9b0;
  text-align: center; animation: toastIn .2s ease-out; transition: opacity .5s;
}
#toast.disease { border-color: #8a3df0; color: #e3c8ff; }
#toast.fade { opacity: 0; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } }

#rotate-hint {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 20;
  top: max(8px, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
  background: rgba(0,0,0,.7); border: 1px solid #444; border-radius: 8px; padding: 6px 14px;
  font-size: 13px; font-family: 'Segoe UI', Arial, sans-serif; pointer-events: none;
}

@media (max-width: 760px) {
  .chip .stat, .chip .nm { font-size: 10px; }
  .chip { padding: 2px 5px; gap: 3px; }
  #hud-timer { font-size: 15px; padding: 3px 8px; min-width: 64px; }
  #slots { grid-template-columns: repeat(3, 1fr); }
  .btn.go { font-size: 18px; padding: 10px 26px; }
  #touch-btns { gap: 8px; right: 12px; bottom: 44px;
    right: max(12px, env(safe-area-inset-right, var(--safe-area-inset-right, 0px))); bottom: max(44px, calc(env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)) + 34px)); }
  #btn-bomb { width: 72px; height: 72px; font-size: 30px; }
  #btn-det { width: 46px; height: 46px; font-size: 18px; }
  #btn-punch { width: 42px; height: 42px; font-size: 16px; }
  #btn-line { width: 40px; height: 40px; font-size: 15px; }
  #stick-zone { width: min(45%, calc(100% - 250px)); }
}

/* ---------- short viewports (landscape phones): compact so menus fit ---------- */
@media (max-height: 560px) {
  #screens .screen { --sgap: 8px; }
  .logo { flex-direction: row; align-items: baseline; gap: 14px; }
  .logo span { font-size: clamp(28px, 9vh, 64px); letter-spacing: 3px; }
  .sub { font-size: 12px; }
  #title-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(94vw, 700px); margin-top: 2px; }
  .menu-btn { padding: 8px 14px; gap: 10px; border-radius: 11px; }
  .menu-btn .mi { font-size: 22px; }
  .menu-btn .mt { font-size: 15px; letter-spacing: 1px; }
  .menu-btn .mt small { font-size: 10px; }
  .screen-title { font-size: clamp(20px, 6vh, 36px); letter-spacing: 2px; }
  /* auto-fit: one row of 6 in landscape, wraps on narrow portrait viewports */
  #slots { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); justify-content: center; width: min(100%, 840px); gap: 8px; }
  .slot { min-height: 70px; padding: 6px 4px; }
  .panel { padding: 10px 16px; gap: 8px; }
  .btn.go { font-size: 17px; padding: 9px 26px; }
  #screen-title .tiny { display: none; }
  .big-hint { margin-top: 4px; }
  #help-table { font-size: 12px; }
  .acct-chip { max-width: 32vw; padding: 5px 10px; font-size: 11px; }   /* don't crowd the logo */
}
/* keyboard/gamepad join hints must survive short DESKTOP windows —
   on touch devices the JOIN (TOUCH) button covers it */
@media (max-height: 560px) and (pointer: coarse) {
  #lobby-help { display: none; }
}

/* ---------- mobile fullscreen toggle: hides the browser chrome ---------- */
#btn-fs {
  position: fixed; z-index: 30; display: none;
  top: 8px; right: 8px;
  top: max(8px, env(safe-area-inset-top, var(--safe-area-inset-top, 0px))); right: max(8px, env(safe-area-inset-right, var(--safe-area-inset-right, 0px)));
  width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  background: rgba(20,24,48,.85); border: 2px solid #39406e; color: #cdd3f7; font-size: 20px;
}
#btn-fs:active { transform: scale(.92); }
@media (hover: none) and (pointer: coarse) { #btn-fs { display: block; } }