:root {
  --u: calc(min(100vw / 2, 100vh) / 400);
  --edge: max(calc(16 * var(--u)), 12px);
  --glass: rgba(18, 34, 58, 0.42);
  --glass-hi: rgba(255, 255, 255, 0.22);
  --accent: #ffc043;
  --hot: #ff5a6a;
  --ink: #ffffff;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #3f86d6; overscroll-behavior: none; }
body { font-family: var(--font); color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: none; }
button { font: inherit; color: inherit; }

#app { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#hud { position: absolute; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }

.hud-tl {
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--edge));
  left: calc(env(safe-area-inset-left) + var(--edge));
  display: flex; flex-direction: column; gap: calc(8 * var(--u)); align-items: flex-start;
}
.plaque {
  display: flex; align-items: baseline; gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-hi);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-weight: 800; font-size: calc(20 * var(--u));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.plaque .lbl { font-size: calc(13 * var(--u)); font-weight: 700; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.04em; }
.plaque .sep { width: 1px; align-self: stretch; background: var(--glass-hi); margin: 0 calc(4 * var(--u)); }
.combo {
  padding: calc(6 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 192, 67, 0.92); color: #3a2400;
  font-weight: 900; font-size: calc(18 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.15);
}

.hud-tr {
  max-width: calc(62vw - var(--edge)); flex-wrap: wrap; justify-content: flex-end;
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--edge));
  right: calc(env(safe-area-inset-right) + var(--edge));
  display: flex; gap: calc(10 * var(--u));
}
.icon-btn {
  width: calc(52 * var(--u)); height: calc(52 * var(--u)); min-width: 40px; min-height: 40px;
  border: 0; border-radius: 50%;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-hi);
  display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.icon-btn svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn svg path:first-child { fill: none; }
.icon-btn .fill { fill: #fff; stroke: none; }
.icon-btn.off .wave { opacity: 0.2; }
.icon-btn:active { transform: scale(0.94); }

.pad {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + var(--edge));
}
.pad-left { left: calc(env(safe-area-inset-left) + var(--edge)); width: calc(260 * var(--u)); height: calc(270 * var(--u)); }
.pad-right { right: calc(env(safe-area-inset-right) + var(--edge)); }
.pad-title {
  font-size: calc(12 * var(--u)); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  margin: 0 0 calc(6 * var(--u)) calc(6 * var(--u));
}
.pad-left .pad-title { position: absolute; left: calc(14 * var(--u)); bottom: calc(264 * var(--u)); margin: 0; }

.act {
  border: 0; border-radius: calc(28 * var(--u));
  background: rgba(18, 34, 58, 0.48);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--u));
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform 0.06s, background 0.08s;
}
.act svg { width: 46%; height: 46%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.act svg .fill { fill: #fff; stroke: none; }
.act span { max-width: 92%; overflow: hidden; text-overflow: ellipsis; font-size: clamp(10px, calc(13 * var(--u)), 15px); font-weight: 900; letter-spacing: 0.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); white-space: nowrap; }
.act.on { background: rgba(255, 192, 67, 0.95); transform: scale(0.96); }
.act.on svg { stroke: #3a2400; }
.act.on svg .fill { fill: #3a2400; }
.act.on span { color: #3a2400; text-shadow: none; }

.act.big {
  position: absolute; left: 0; bottom: 0;
  width: calc(150 * var(--u)); height: calc(150 * var(--u)); min-width: 110px; min-height: 110px;
  border-radius: 50%;
  background: rgba(255, 90, 106, 0.85);
}
.act.big span { font-size: calc(17 * var(--u)); }
.act.big.on { background: rgba(255, 192, 67, 0.97); }
.act.twist {
  position: absolute; left: calc(160 * var(--u)); bottom: calc(70 * var(--u));
  width: calc(96 * var(--u)); height: calc(96 * var(--u)); min-width: 72px; min-height: 72px;
  border-radius: 50%;
}
.act.letgo {
  position: absolute; left: calc(10 * var(--u)); bottom: calc(162 * var(--u));
  width: calc(96 * var(--u)); height: calc(96 * var(--u)); min-width: 72px; min-height: 72px;
  border-radius: 50%; background: rgba(255, 90, 106, 0.85);
}
.act.letgo.idle { opacity: 0.4; }
.act .ico-jump { display: none; }
.act.jump .ico-jump { display: block; }
.act.jump .ico-release { display: none; }
.act.jump { background: rgba(70, 170, 110, 0.9); }

.shape-grid { display: grid; grid-template-columns: repeat(2, auto); gap: calc(12 * var(--u)); }
.shape-grid .act { width: calc(112 * var(--u)); height: calc(100 * var(--u)); min-width: 84px; min-height: 74px; background: rgba(40, 96, 190, 0.55); }

#popups {
  position: absolute;
  left: calc(env(safe-area-inset-left) + var(--edge));
  top: calc(env(safe-area-inset-top) + var(--edge) + 58 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u));
  pointer-events: none; max-width: 40vw;
}
.pop {
  display: flex; align-items: baseline; gap: calc(8 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(18, 34, 58, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-weight: 900; font-size: calc(15 * var(--u)); white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  animation: pop 2s ease-out forwards;
}
.pop small { font-size: 0.9em; color: var(--accent); }
.pop.bank { background: rgba(255, 192, 67, 0.92); color: #3a2400; text-shadow: none; }
.pop.bank small { color: #3a2400; }
.pop.lost { background: rgba(140, 30, 45, 0.7); color: #ffe3e6; }
@keyframes pop {
  0% { transform: translateX(-24px); opacity: 0; }
  10% { transform: translateX(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

.sheet { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 24, 44, 0.45); padding: var(--edge); }
.sheet[hidden] { display: none; }
.card {
  max-width: min(760px, 86vw); max-height: calc(100vh - 2 * var(--edge)); overflow: auto;
  padding: calc(20 * var(--u)) calc(26 * var(--u));
  border-radius: calc(24 * var(--u));
  background: rgba(255, 255, 255, 0.95); color: #1d2a3a;
  box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.25);
  text-align: center;
}
.card h2 { margin: 0 0 calc(8 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 900; }
.card ul { text-align: left; margin: 0 0 calc(10 * var(--u)); padding-left: 1.2em; font-size: calc(13.5 * var(--u)); line-height: 1.35; font-weight: 600; }
.card .keys { }
@media (pointer: coarse) { .card .keys { display: none; } }
.card .keys { font-size: calc(12 * var(--u)); opacity: 0.7; margin: 0 0 calc(12 * var(--u)); }
.card .big-num { font-size: calc(56 * var(--u)); font-weight: 900; margin: 0; color: var(--hot); }
.card .sub { margin: 0 0 calc(16 * var(--u)); font-weight: 700; opacity: 0.75; font-size: calc(16 * var(--u)); }
.btn {
  border: 0; border-radius: calc(16 * var(--u));
  padding: calc(12 * var(--u)) calc(36 * var(--u));
  min-height: 48px;
  background: var(--hot); color: #fff; font-weight: 900; font-size: calc(18 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) 0 #c73c4a; cursor: pointer;
}
.btn:active { transform: translateY(2px); box-shadow: 0 calc(2 * var(--u)) 0 #c73c4a; }

#rotate { position: absolute; inset: 0; display: none; place-items: center; background: #3f86d6; text-align: center; padding: 24px; }
#rotate svg { width: 72px; height: 72px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
#rotate p { font-weight: 800; font-size: 20px; margin: 12px 0 0; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: grid; } }

.regrabs {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + var(--edge));
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, 0.55); color: #1d2a3a;
  font-weight: 800; font-size: calc(16 * var(--u)); white-space: nowrap;
}
.menu-card { width: min(760px, 88vw); text-align: left; }
.menu-head { display: flex; align-items: center; justify-content: space-between; }
.menu-head h2 { margin: 0; }
.icon-btn.dark { background: rgba(29, 42, 58, 0.08); box-shadow: none; }
.icon-btn.dark svg { stroke: #1d2a3a; }
.menu-body h3 { margin: calc(14 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(14 * var(--u)); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; }
.chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.chip {
  border: 0; border-radius: calc(12 * var(--u)); min-height: 40px;
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  background: #eef1f5; color: #1d2a3a; font-weight: 800; font-size: calc(14 * var(--u)); cursor: pointer;
}
.chip.sel { background: var(--hot); color: #fff; }
.swatches { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); cursor: pointer; }
.swatch.orig { background: conic-gradient(#c8483e, #4d8f96, #8f8f86, #f2d43a, #c8483e); }
.swatch.sel { box-shadow: 0 0 0 3px var(--hot); }

.auto-btn.active { background: rgba(255, 192, 67, 0.95); }
.auto-btn.active svg { stroke: #3a2400; }
.auto-btn.active svg .fill { fill: #3a2400; }
.bot-caption {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + var(--edge) + 46 * var(--u));
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 192, 67, 0.92); color: #3a2400;
  font-weight: 900; font-size: calc(14 * var(--u)); white-space: nowrap;
}

.act .pose-ico { width: 62%; height: 62%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.shape-grid .act .pose-ico { width: 54%; height: 54%; }

:root {
  --coral: #ff5a6a;
  --coral-d: #c73c4a;
  --gold: #ffc043;
  --gold-d: #c98a14;
  --crystal: #7fd8ff;
  --crystal-2: #9b7bff;
  --navy: #12223a;
  --navy-2: #1c3352;
  --paper: #ffffff;
  --text: #1d2a3a;
  --muted: #55657a;
  --mint: #46aa6e;
}

body.mode-lobby #hud, body.mode-lobby #names { display: none; }
body:not(.mode-lobby) #lobby { display: none; }
body:not(.online) .online-only { display: none !important; }
body.online .offline-only { display: none !important; }

#names { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nameplate {
  position: absolute; left: 0; top: 0; will-change: transform; pointer-events: auto; cursor: pointer; padding: 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-weight: 900; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.nameplate b { font-size: calc(13 * var(--u)); }
.nameplate span { font-size: calc(11 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: 99px; background: rgba(18, 34, 58, 0.55); box-shadow: inset 0 0 0 1.5px var(--rc); color: #fff; }
.nameplate .bubble {
  order: -1; font-style: normal; font-size: calc(22 * var(--u)); line-height: 1;
  padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.92); color: var(--text); text-shadow: none;
  animation: bubble 0.25s ease-out;
}
.nameplate .bubble em { font-style: normal; font-size: calc(12 * var(--u)); font-weight: 900; }
@keyframes bubble { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.cool-chip { display: inline-flex; align-items: baseline; gap: calc(6 * var(--u)); }
.cool-chip b { color: var(--gold); }
.cool-chip.bump b { animation: bump 0.4s ease-out; }
@keyframes bump { 40% { transform: scale(1.35); color: var(--gold); } }
.rank-dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--rc, #9aa7b4); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); align-self: center; }
.room-pill svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; vertical-align: -3px; margin-right: 4px; }
.room-pill {
  align-self: center; padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 99px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-hi); font-weight: 900; font-size: calc(14 * var(--u));
}
body.online .regrabs { display: none; }

#lobby { position: absolute; inset: 0; pointer-events: none; }
#lobby button { pointer-events: auto; cursor: pointer; border: 0; }
.me-card {
  max-width: calc(50vw - 2 * var(--edge));
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--edge));
  left: calc(env(safe-area-inset-left) + var(--edge));
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-hi);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-align: left;
}
.me-avatar { width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; background: var(--rc, #9aa7b4); display: grid; place-items: center; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85); font-weight: 900; font-size: calc(22 * var(--u)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.me-info { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: calc(120 * var(--u)); }
.me-info b { font-size: calc(17 * var(--u)); font-weight: 900; }
.me-rank { align-self: flex-start; font-size: max(calc(12 * var(--u)), 12px); font-weight: 900; color: #fff; padding: 0 calc(8 * var(--u)); border-radius: 99px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1.5px var(--rc, #fff); }
.me-bar { height: calc(6 * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.me-bar i { display: block; height: 100%; width: 0; background: var(--rc, var(--gold)); border-radius: 99px; transition: width 0.4s; }
.me-cool { display: flex; flex-direction: column; align-items: flex-end; padding-left: calc(10 * var(--u)); border-left: 1px solid var(--glass-hi); }
.me-cool small { font-size: max(calc(10 * var(--u)), 11px); font-weight: 800; text-transform: uppercase; opacity: 0.8; letter-spacing: 0.05em; }
.me-cool b { font-size: calc(22 * var(--u)); font-weight: 900; color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }

.lobby-tr {
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--edge));
  right: calc(env(safe-area-inset-right) + var(--edge));
  display: flex; gap: calc(10 * var(--u)); align-items: center;
}
.pill {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  height: calc(46 * var(--u)); min-height: 38px; padding: 0 calc(6 * var(--u)) 0 calc(12 * var(--u));
  border-radius: 99px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-hi);
  font-weight: 900; font-size: calc(18 * var(--u)); color: #fff;
}
.pill .plus { width: calc(32 * var(--u)); height: calc(32 * var(--u)); min-width: 26px; min-height: 26px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; font-size: calc(20 * var(--u)); line-height: 1; }
.crystal { display: inline-block; width: calc(20 * var(--u)); height: calc(24 * var(--u)); min-width: 14px; min-height: 17px; background: center / contain no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 48"><path d="M2.5 16.5 11.5 3.5 14 16.5Z" fill="%239fe9ff"/><path d="M11.5 3.5 28.5 3.5 26 16.5 14 16.5Z" fill="%23dff9ff"/><path d="M28.5 3.5 37.5 16.5 26 16.5Z" fill="%235cc4fb"/><path d="M2.5 16.5 14 16.5 20 45Z" fill="%234f9dff"/><path d="M14 16.5 20 16.5 20 45Z" fill="%238fd8ff"/><path d="M20 16.5 26 16.5 20 45Z" fill="%236f7bff"/><path d="M26 16.5 37.5 16.5 20 45Z" fill="%235b3fd8"/><path d="M2.5 16.5H37.5M11.5 3.5 14 16.5 20 45 26 16.5 28.5 3.5M20 16.5V45" fill="none" stroke="%23fff" stroke-opacity=".5" stroke-width="1" stroke-linejoin="round"/><path d="M15 6.5h5l-2.4 7h-3.8Z" fill="%23fff"/><path d="M7.2 15 10.4 8h1.7l-2.5 7Z" fill="%23fff" fill-opacity=".75"/><path d="M11.5 3.5 28.5 3.5 37.5 16.5 20 45 2.5 16.5Z" fill="none" stroke="%231d0f57" stroke-width="3.2" stroke-linejoin="round"/></svg>'); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); flex: none; }
.icon-btn { position: relative; }
.badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--coral); color: #fff; font: 900 11px/18px var(--font); font-style: normal; box-shadow: 0 0 0 2px #fff; }

.lobby-tiles {
  grid-template-columns: repeat(3, auto) !important;
  position: absolute;
  left: calc(env(safe-area-inset-left) + var(--edge));
  bottom: calc(env(safe-area-inset-bottom) + var(--edge));
  display: grid; grid-template-columns: repeat(2, auto); gap: calc(10 * var(--u));
}
.tile {
  background: rgba(18, 34, 58, 0.82) !important;
  width: calc(108 * var(--u)); height: calc(84 * var(--u)); min-width: 80px; min-height: 64px;
  border-radius: calc(20 * var(--u));
  background: rgba(18, 34, 58, 0.55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); color: #fff;
}
.tile svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile svg .fill { fill: #fff; stroke: none; }
.tile span { font-weight: 900; font-size: calc(14 * var(--u)); }
.tile:active, .play-btn:active, .train-btn:active { transform: scale(0.96); }

.lobby-play {
  position: absolute;
  right: calc(env(safe-area-inset-right) + var(--edge));
  bottom: calc(env(safe-area-inset-bottom) + var(--edge));
  display: flex; flex-direction: column; align-items: stretch; gap: calc(10 * var(--u)); width: calc(250 * var(--u)); min-width: 190px;
}
.net-status { align-self: flex-end; font-weight: 800; font-size: calc(13 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: 99px; background: var(--glass); }
.net-status.ok::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5be38a; margin-right: 6px; vertical-align: 1px; }
.play-btn {
  height: calc(104 * var(--u)); min-height: 76px; border-radius: calc(28 * var(--u));
  background: linear-gradient(180deg, #ff7480, var(--coral)); color: #fff;
  box-shadow: 0 calc(6 * var(--u)) 0 var(--coral-d), 0 calc(12 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.play-btn span { font-size: calc(34 * var(--u)); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
.play-btn small { font-size: calc(13 * var(--u)); font-weight: 800; opacity: 0.9; }
.train-btn { height: calc(50 * var(--u)); min-height: 42px; border-radius: calc(18 * var(--u)); background: rgba(255, 255, 255, 0.9); color: var(--text); font-weight: 900; font-size: calc(16 * var(--u)); }

.panel-wrap { position: absolute; inset: 0; background: rgba(10, 24, 44, 0.42); display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top) + var(--edge)) calc(env(safe-area-inset-right) + var(--edge)) calc(env(safe-area-inset-bottom) + var(--edge)) calc(env(safe-area-inset-left) + var(--edge)); z-index: 5; }
.panel-wrap[hidden] { display: none; }
.panel-wrap.side { justify-content: flex-end; background: linear-gradient(90deg, transparent 30%, rgba(10, 24, 44, 0.42)); }
.pnl {
  width: min(820px, 100%); height: 100%; max-height: 100%; display: flex; flex-direction: column;
  border-radius: calc(24 * var(--u)); background: var(--paper); color: var(--text);
  box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.3); overflow: hidden;
  animation: pnl 0.18s ease-out;
}
.panel-wrap.side .pnl { width: min(calc(520 * var(--u)), 60%); min-width: min(380px, 100%); }
.pnl.small { width: min(520px, 100%); height: auto; }
@keyframes pnl { from { transform: translateY(12px); opacity: 0; } }
.pnl-head { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(22 * var(--u)); }
.pnl-head h2 { margin: 0; font-size: calc(22 * var(--u)); font-weight: 900; flex: 1; }
.pnl-head .pill { background: var(--navy); }
.pnl-body { flex: 1; overflow: auto; padding: 0 calc(22 * var(--u)) calc(20 * var(--u)); -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; touch-action: pan-x; scrollbar-width: none; gap: calc(6 * var(--u)); padding: 0 calc(22 * var(--u)) calc(10 * var(--u)); flex: none; }
.tabs::-webkit-scrollbar, .pnl-body::-webkit-scrollbar, .emote-row::-webkit-scrollbar { display: none; }
.pnl-body, .emote-row { scrollbar-width: none; }
.tab { flex: none; border: 0; border-radius: 99px; padding: calc(8 * var(--u)) calc(14 * var(--u)); min-height: 44px; background: #eef1f5; color: var(--text); font-weight: 800; font-size: max(calc(14 * var(--u)), 13px); cursor: pointer; }
.tab.sel { background: var(--navy); color: #fff; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(calc(88 * var(--u)), 96px), 1fr)); gap: calc(8 * var(--u)); }
.item {
  position: relative; border: 0; border-radius: calc(18 * var(--u)); padding: calc(10 * var(--u));
  background: #f1f4f8; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u));
  box-shadow: inset 0 0 0 2px transparent; font-weight: 800; font-size: calc(13 * var(--u)); min-height: 44px;
}
.item.sel { box-shadow: inset 0 0 0 3px var(--coral); background: #fff2f3; }
.item.worn::after { content: 'Надето'; position: absolute; top: calc(8 * var(--u)); left: calc(8 * var(--u)); font-size: max(calc(10 * var(--u)), 11px); background: var(--mint); color: #fff; border-radius: 99px; padding: 1px 7px; }
.item .ico { width: calc(46 * var(--u)); height: calc(46 * var(--u)); min-width: 44px; min-height: 44px; border-radius: calc(14 * var(--u)); display: grid; place-items: center; font-size: calc(34 * var(--u)); }
.item .price { display: flex; align-items: center; gap: 4px; font-weight: 900; }
.item .price .crystal { width: 12px; height: 15px; min-width: 0; min-height: 0; }
.item.owned .price { color: var(--mint); }
.pnl-foot { display: flex; gap: calc(10 * var(--u)); align-items: center; padding: calc(12 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u)); border-top: 1px solid #e8edf3; }
.pnl-foot { min-height: calc(76 * var(--u)); }
.pnl-foot .grow { flex: 1; font-weight: 900; font-size: max(calc(16 * var(--u)), 14px); }
.btn.sm { padding: calc(8 * var(--u)) calc(18 * var(--u)); font-size: calc(15 * var(--u)); min-height: 44px; }
.btn.ghost { background: #eef1f5; color: var(--text); box-shadow: 0 calc(3 * var(--u)) 0 #cfd6df; }
.btn.gold { background: var(--gold); color: #3a2400; box-shadow: 0 calc(4 * var(--u)) 0 var(--gold-d); }
.btn.mint { background: var(--mint); box-shadow: 0 calc(4 * var(--u)) 0 #2f7d4f; }
.btn:disabled { opacity: 0.5; }
.x-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eef1f5; cursor: pointer; display: grid; place-items: center; }
.x-btn svg { width: 20px; height: 20px; stroke: var(--text); stroke-width: 2.5; fill: none; stroke-linecap: round; }

.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); }
@media (max-aspect-ratio: 4/3) { .packs { grid-template-columns: repeat(2, 1fr); } }
.pack { border: 0; border-radius: calc(20 * var(--u)); padding: calc(10 * var(--u)) calc(8 * var(--u)); cursor: pointer; background: linear-gradient(160deg, #23406b, #12223a); color: #fff; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); position: relative; min-height: 44px; }
.pack .gems { display: flex; gap: 3px; margin: calc(6 * var(--u)) 0; }
.pack .gems .crystal { width: calc(22 * var(--u)); height: calc(27 * var(--u)); }
.pack b { font-size: calc(20 * var(--u)); font-weight: 900; }
.pack small { color: var(--gold); font-weight: 900; }
.pack .cost { margin-top: calc(4 * var(--u)); background: var(--mint); border-radius: 99px; padding: calc(6 * var(--u)) calc(16 * var(--u)); font-weight: 900; }
.pack .tag { position: absolute; top: calc(8 * var(--u)); right: calc(8 * var(--u)); background: var(--coral); border-radius: 99px; padding: 2px 8px; font-size: calc(11 * var(--u)); font-weight: 900; }
.test-note { margin: calc(12 * var(--u)) 0 0; color: var(--muted); font-weight: 700; font-size: calc(13 * var(--u)); text-align: center; }

.list { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.row { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(16 * var(--u)); background: #f1f4f8; }
.row .av { width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 36px; min-height: 36px; border-radius: 50%; background: var(--rc, #9aa7b4); display: grid; place-items: center; color: #fff; font-weight: 900; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); flex: none; cursor: pointer; border: 0; }
.row .who { flex: 1; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.row .who b { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .who small { color: var(--muted); font-weight: 700; }
.row .on { color: var(--mint); }
.sect { margin: calc(16 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(13 * var(--u)); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 900; }
.search { display: flex; gap: calc(8 * var(--u)); }
.search input, .field { flex: 1; min-height: 44px; border: 2px solid #e1e7ee; border-radius: calc(14 * var(--u)); padding: 0 calc(14 * var(--u)); font: 800 calc(16 * var(--u)) var(--font); color: var(--text); background: #fff; user-select: text; -webkit-user-select: text; }
.empty { color: var(--muted); font-weight: 700; padding: calc(16 * var(--u)) 0; text-align: center; }

.prof-top { display: flex; gap: calc(16 * var(--u)); align-items: center; padding: calc(4 * var(--u)) 0 calc(12 * var(--u)); }
.prof-top .av { width: calc(76 * var(--u)); height: calc(76 * var(--u)); font-size: calc(32 * var(--u)); border-radius: 50%; background: var(--rc); display: grid; place-items: center; color: #fff; font-weight: 900; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 0 3px var(--rc); flex: none; }
.prof-top h3 { margin: 0; font-size: calc(24 * var(--u)); font-weight: 900; }
.prof-top .rk { font-weight: 900; color: var(--rc); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(120 * var(--u)), 1fr)); gap: calc(8 * var(--u)); }
.stat { background: #f1f4f8; border-radius: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); }
.stat b { display: block; font-size: calc(20 * var(--u)); font-weight: 900; }
.stat small { color: var(--muted); font-weight: 800; font-size: calc(12 * var(--u)); }
.actions { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }

.patch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(96 * var(--u)), 1fr)); gap: calc(10 * var(--u)); }
.patch { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); color: var(--text); min-height: 44px; }
.patch svg { width: calc(76 * var(--u)); height: calc(76 * var(--u)); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); }
.patch.locked svg { filter: grayscale(1) opacity(0.35); }
.patch b { font-size: max(calc(12 * var(--u)), 12px); font-weight: 900; text-align: center; line-height: 1.15; }
.patch small { font-size: max(calc(11 * var(--u)), 12px); color: var(--muted); font-weight: 800; }
.patch .cnt { font-weight: 900; color: var(--coral); }
.demo-box { position: relative; border-radius: calc(18 * var(--u)); overflow: hidden; background: #cfe8f7; aspect-ratio: 4 / 3; max-height: calc(100vh - 2 * var(--edge) - 150px); margin: 0 auto; }
.demo-box canvas { width: 100%; height: 100%; display: block; }
.demo-box .demo-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--muted); font-weight: 800; }
.demo-cap { position: absolute; left: calc(10 * var(--u)); bottom: calc(10 * var(--u)); background: rgba(18, 34, 58, 0.6); color: #fff; border-radius: 99px; padding: 3px 10px; font-weight: 800; font-size: calc(12 * var(--u)); }
.prog { height: calc(10 * var(--u)); background: #e6ebf1; border-radius: 99px; overflow: hidden; margin: calc(6 * var(--u)) 0; }
.prog i { display: block; height: 100%; background: var(--coral); border-radius: 99px; }

.emote-wheel { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(env(safe-area-inset-bottom) + var(--edge)); background: rgba(10, 24, 44, 0.25); }
.emote-wheel[hidden] { display: none; }
.emote-row { display: flex; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(24 * var(--u)); background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); max-width: 92vw; overflow-x: auto; animation: pnl 0.15s ease-out; }
.emo { flex: none; width: calc(78 * var(--u)); height: calc(78 * var(--u)); min-width: 60px; min-height: 60px; border: 0; border-radius: calc(18 * var(--u)); background: #f1f4f8; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text); }
.emo i { font-style: normal; font-size: calc(30 * var(--u)); line-height: 1; }
.emo span { font-size: calc(11 * var(--u)); font-weight: 900; }
.emo.locked { opacity: 0.4; }

#toasts { position: absolute; bottom: calc(env(safe-area-inset-bottom) + var(--edge) + 6 * var(--u)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; pointer-events: none; z-index: 9; max-width: 46vw; }
.toast { padding: calc(8 * var(--u)) calc(18 * var(--u)); border-radius: 99px; background: rgba(18, 34, 58, 0.88); color: #fff; font-weight: 900; font-size: calc(15 * var(--u)); animation: toast 2.6s ease-out forwards; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.toast.good { background: rgba(70, 170, 110, 0.95); }
.toast.gold { background: rgba(255, 192, 67, 0.97); color: #3a2400; }
.toast.err { background: rgba(200, 50, 66, 0.95); }
.toast button { pointer-events: auto; border: 0; border-radius: 99px; padding: 4px 12px; background: #fff; color: var(--text); font-weight: 900; cursor: pointer; }
.toast.sticky { animation: toastIn 0.25s ease-out forwards; }
@keyframes toast { 0% { transform: translateY(-10px); opacity: 0; } 8% { transform: none; opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes toastIn { from { transform: translateY(-10px); opacity: 0; } }
#fps { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 4px); transform: translateX(-50%); font: 800 12px var(--font); background: rgba(0, 0, 0, 0.45); padding: 2px 8px; border-radius: 99px; pointer-events: none; z-index: 9; }

.set-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(12 * var(--u)); padding: calc(10 * var(--u)) 0; border-bottom: 1px solid #edf1f5; }
.set-row > span { font-weight: 800; font-size: calc(15 * var(--u)); }
.set-row small { display: block; color: var(--muted); font-weight: 700; font-size: calc(12 * var(--u)); }
.seg { display: flex; background: #eef1f5; border-radius: 99px; padding: 3px; flex-wrap: nowrap; flex: none; }
.seg button { border: 0; background: none; border-radius: 99px; padding: calc(6 * var(--u)) calc(10 * var(--u)); min-height: 44px; min-width: 44px; font-weight: 800; font-size: max(calc(13 * var(--u)), 12px); white-space: nowrap; color: var(--text); cursor: pointer; }
.seg button.sel { background: var(--navy); color: #fff; }
input[type=range] { width: calc(180 * var(--u)); accent-color: var(--coral); }

body.hand-left .pad-left { left: auto; right: calc(env(safe-area-inset-right) + var(--edge)); }
body.hand-left .pad-right { right: auto; left: calc(env(safe-area-inset-left) + var(--edge)); }
#hud .pad { transform: scale(var(--pad-scale, 1)); opacity: var(--pad-alpha, 1); }
#hud .pad-left { transform-origin: left bottom; }
#hud .pad-right { transform-origin: right bottom; }
body.hand-left #hud .pad-left { transform-origin: right bottom; }
body.hand-left #hud .pad-right { transform-origin: left bottom; }
#lobby-names { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lobby-name b { font-size: calc(12 * var(--u)); opacity: 0.9; }
body.side-open #lobby > :not(#lobby-names):not(.lnav) { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
body.side-open #lobby button { pointer-events: none; }
.demo-wrap { display: grid; grid-template-columns: 3fr 2fr; gap: calc(14 * var(--u)); align-items: start; }
.demo-info { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.patch.big svg { width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
.patch.big { align-items: flex-start; cursor: default; }
@media (max-aspect-ratio: 4/3) { .demo-wrap { grid-template-columns: 1fr; } }

body.online .hide-online { display: none; }
.crystal.inline { width: 0.8em; height: 1em; min-width: 0; min-height: 0; vertical-align: -0.1em; }
.nameplate[hidden] { display: none; }
.pnl-foot .grow { min-width: 0; white-space: normal; overflow: hidden; }
.pnl-foot .grow small { display: block; font-size: max(calc(12 * var(--u)), 12px); overflow: hidden; text-overflow: ellipsis; }
.pnl-foot .btn { flex: none; white-space: nowrap; }
@media (max-aspect-ratio: 3/2) {
  .hud-tr { top: calc(env(safe-area-inset-top) + var(--edge) + 58 * var(--u)); max-width: 52vw; }
}

.adfake { position: fixed; inset: 0; z-index: 50; background: rgba(8, 14, 26, 0.94); display: grid; place-items: center; color: #fff; }
.adbox { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(420px, 80vw); }
.adtag { font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.adnum { font-size: 64px; font-weight: 900; }
.adbar { width: 100%; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.adbar i { display: block; height: 100%; width: 0; background: var(--gold); }
.adhint { font-weight: 700; opacity: 0.8; }
.adx { position: absolute; top: calc(env(safe-area-inset-top) + var(--edge)); right: calc(env(safe-area-inset-right) + var(--edge)); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 28px; opacity: 0.3; }
.adfake.end .adx { opacity: 1; }
.coin { display: inline-block; width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 15px; min-height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffd23f 45%, #c98a14); box-shadow: inset 0 0 0 2px #e0a92a, 0 0 0 1.5px rgba(92, 46, 0, 0.8); flex: none; }
.coin.inline { width: 0.95em; height: 0.95em; min-width: 0; min-height: 0; vertical-align: -0.12em; }
.pill.coins .plus { background: var(--gold); color: #3a2400; }
.rar { border-radius: calc(18 * var(--u)); box-shadow: inset 0 0 0 3px var(--rc, #c7d0da); }
.rar-tag { font-size: max(calc(10 * var(--u)), 11px); font-weight: 900; color: var(--rc); text-transform: uppercase; letter-spacing: 0.04em; }
.case-card { border: 0; border-radius: calc(20 * var(--u)); padding: calc(12 * var(--u)); color: #fff; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); background: linear-gradient(160deg, var(--cc), #12223a 130%); }
.case-card .bag { width: calc(64 * var(--u)); height: calc(54 * var(--u)); border-radius: calc(14 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); background: var(--cc); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.85); position: relative; }
.case-card .bag::before { content: ''; position: absolute; left: 30%; right: 30%; top: -12px; height: 14px; border: 4px solid #fff; border-bottom: 0; border-radius: 10px 10px 0 0; }
.case-card b { font-size: max(calc(15 * var(--u)), 14px); font-weight: 900; }
.case-card .row2 { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.case-card .own { background: rgba(255, 255, 255, 0.2); border-radius: 99px; padding: 2px 10px; font-weight: 900; }
.case-card .info { position: absolute; }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); }
.reveal { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); justify-content: center; padding: calc(8 * var(--u)) 0; }
.reveal .item { width: calc(120 * var(--u)); min-width: 96px; animation: pop-in 0.35s both; }
@keyframes pop-in { from { transform: scale(0.3) rotate(-8deg); opacity: 0; } }
.odds { width: 100%; border-collapse: collapse; font-weight: 800; }
.odds td { padding: 6px 4px; border-bottom: 1px solid #edf1f5; }
.odds td:last-child { text-align: right; }
.offer { border-radius: calc(20 * var(--u)); padding: calc(14 * var(--u)); color: #fff; background: linear-gradient(150deg, var(--oc), #12223a 140%); display: flex; flex-direction: column; gap: 6px; position: relative; }
.offer .x { position: absolute; top: 10px; right: 10px; background: var(--coral); border-radius: 99px; padding: 2px 10px; font-weight: 900; }
.offer ul { margin: 0; padding-left: 1.1em; font-weight: 800; }
.offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(220 * var(--u)), 1fr)); gap: calc(10 * var(--u)); }
.deal .price s { opacity: 0.5; margin-right: 4px; }
.adtile { background: linear-gradient(160deg, #2b9a5c, #1f6b44); color: #fff; }
.adtile .price { color: #fff !important; }
.summary { text-align: center; }
.summary .big { font-size: calc(40 * var(--u)); font-weight: 900; display: flex; gap: 10px; align-items: center; justify-content: center; }
.callout { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + var(--edge) + 60 * var(--u)); transform: translateX(-50%); padding: calc(8 * var(--u)) calc(18 * var(--u)); border-radius: 99px; background: linear-gradient(90deg, #ff9b3d, #ffd23f); color: #3a2400; font-weight: 900; font-size: calc(16 * var(--u)); white-space: nowrap; pointer-events: none; animation: toast 2.6s ease-out forwards; z-index: 4; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
.lvl { display: inline-grid; place-items: center; min-width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 99px; background: var(--navy); color: #fff; font-weight: 900; font-size: max(calc(12 * var(--u)), 12px); padding: 0 6px; box-shadow: 0 0 0 2px #fff; }
.me-avatar { position: relative; }
.me-avatar .lvl { position: absolute; right: -6px; bottom: -6px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.model-card .ico { font-size: calc(30 * var(--u)); }
.pnl-head .pill { height: auto; min-height: 34px; padding: 4px 12px; font-size: max(calc(14 * var(--u)), 13px); gap: 6px; }
.pnl-head .pill .coin, .pnl-head .pill .crystal { width: 16px; height: 18px; min-width: 0; min-height: 0; }
.pnl-head .pill .coin { height: 16px; }
.pnl-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnl-foot .grow[style*="muted"] { font-size: max(calc(13 * var(--u)), 12px); font-weight: 800; white-space: normal; }
.cases { grid-template-columns: repeat(auto-fill, minmax(max(calc(120 * var(--u)), 130px), 1fr)); }
.case-card .btn.sm { padding: 6px 10px; font-size: max(calc(13 * var(--u)), 12px); }
.has-av img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.framed { position: relative; }
.framed::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; padding: 3px; background: var(--ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.title-tag { display: block; font-weight: 900; font-size: max(calc(12 * var(--u)), 12px); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.prof-banner { border-radius: calc(18 * var(--u)); padding: calc(12 * var(--u)); margin-bottom: 10px; color: #fff; }
.prof-banner .prof-top { padding: 0; }
.prof-banner .prof-top h3 { color: #fff; text-shadow: 0 2px 2px rgba(0,0,0,.35); }
.prof-banner small { color: rgba(255,255,255,.9) !important; }
.cos-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.cos { border: 0; border-radius: 14px; padding: 6px 10px; min-height: 44px; background: #f1f4f8; font-weight: 800; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.cos.sel { box-shadow: inset 0 0 0 3px var(--coral); }
.cos.locked { opacity: 0.4; }
.cos .av { width: 34px; height: 34px; min-width: 0; min-height: 0; }
.coach { position: absolute; inset: 0; z-index: 8; background: rgba(8, 16, 30, 0.55); }
.coach .tip { position: absolute; max-width: min(360px, 70vw); background: #fff; color: var(--text); border-radius: 18px; padding: 14px 16px; font-weight: 800; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.coach .tip b { display: block; font-size: 1.1em; margin-bottom: 4px; }
.coach .tip .btn { margin-top: 10px; }
.coach .hole { position: absolute; border-radius: 24px; box-shadow: 0 0 0 4px var(--gold), 0 0 0 9999px rgba(8,16,30,.35); pointer-events: none; animation: hole 1.2s ease-in-out infinite alternate; }
@keyframes hole { to { box-shadow: 0 0 0 7px var(--gold), 0 0 0 9999px rgba(8,16,30,.35); } }
.nameplate .ti { font-size: calc(10 * var(--u)); font-weight: 900; }
.me-avatar > span:first-child { display: contents; }
.me-av-in { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-size: inherit; }
.sheet-over { position: absolute; inset: 0; z-index: 12; background: rgba(10, 24, 44, 0.5); display: grid; place-items: center; padding: var(--edge); }
.sheet-over .pnl { max-height: 100%; }
body.side-open #toasts, body:has(#panel:not([hidden])) #toasts { bottom: auto; top: calc(var(--nav-h) + 8px); }
.case-card { position: relative; padding-top: calc(20 * var(--u)); }
.case-card .bag { margin-top: 8px; }
.odds-link { position: absolute; top: 6px; right: 6px; border: 0; background: rgba(255,255,255,.2); color: #fff; border-radius: 99px; padding: 4px 10px; font-weight: 900; font-size: max(calc(11 * var(--u)), 12px); min-height: 32px; cursor: pointer; }
.case-card small { font-weight: 800; opacity: .9; font-size: max(calc(11 * var(--u)), 12px); }
.reveal-in { opacity: 0; animation: pop-in 0.4s both; box-shadow: inset 0 0 0 3px var(--rc), 0 0 18px var(--rc); }
.reveal-flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, var(--rc), transparent 60%); opacity: 0; animation: flash 0.8s ease-out; }
@keyframes flash { 20% { opacity: 0.6; } 100% { opacity: 0; } }
.pnl-body { position: relative; }
.offer { padding-top: calc(34 * var(--u)); }
.offer .x { top: 8px; left: 12px; right: auto; }
.pack .cost { white-space: nowrap; }
.pack { padding-top: calc(18 * var(--u)); }
.pack .tag, .badge, .rar-tag, .emo span, .nameplate span, .nameplate .ti { font-size: max(calc(11 * var(--u)), 12px) !important; }
.rar[style*="#ffd23f"] .rar-tag { color: #c98a14; }
.cos.locked { opacity: 0.55; }
.cos.locked::after { content: '🔒'; font-size: 12px; }
.prog i { background: var(--mint); }
.coach { background: transparent; }
.pips { display: inline-flex; gap: 3px; margin-left: 4px; align-self: center; }
.pips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); }
.pips i.on { background: var(--gold); }
.plaque .coin { width: calc(16 * var(--u)); height: calc(16 * var(--u)); align-self: center; }

.tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; }
.regrabs { top: calc(env(safe-area-inset-top) + var(--edge) + 62 * var(--u)); }
.pnl-head h2 { flex: 1 1 auto; }
.art { display: block; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.item .ico .art { width: 88%; height: 88%; }
.case-art { width: calc(84 * var(--u)); height: calc(84 * var(--u)); margin-top: 4px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.ui-art { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.icon-btn .ui-art { width: 64%; height: 64%; }
.emo-art { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.has-av.full { padding: 0; overflow: hidden; }
.has-av.full img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body.art-coin .coin { background: center / contain no-repeat url(../assets/currency/coin.webp); box-shadow: none; border-radius: 0; }
body.art-crystal .crystal { background: center / contain no-repeat url(../assets/currency/crystal.webp); clip-path: none; filter: none; }

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); margin: calc(8 * var(--u)) 0 calc(12 * var(--u)); text-align: left; }
.rule { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; background: #f1f4f8; border-radius: 16px; padding: 10px 12px; }
.rule img { grid-row: span 2; width: calc(46 * var(--u)); height: calc(46 * var(--u)); min-width: 36px; min-height: 36px; background: var(--navy); border-radius: 12px; padding: 4px; }
.rule img + img { display: none; }
.rule b { font-weight: 900; font-size: max(calc(15 * var(--u)), 14px); }
.rule span { font-weight: 700; font-size: max(calc(13 * var(--u)), 12px); color: var(--muted); }
#me-lvl { background: conic-gradient(var(--gold) var(--lp, 0%), var(--navy) 0); }
.badge { font-style: normal; }
.emo.more { opacity: 1; background: #fff3d6; }
.emo.more span, .emo.more i { color: #c98a14; }
.emo.close { background: #eef1f5; }
.act.letgo.idle { opacity: 1; background: rgba(255, 90, 106, 0.35); }
.act.letgo.idle .pose-ico, .act.letgo.idle span { opacity: 0.7; }
#menu .chip.sel { background: var(--navy); }
#menu .icon-btn.dark { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }