/* Bubble Bomber - UI theme modelled on the BnB M (APK) launcher: sky-blue bubble pattern,
   white rounded popups with blue title bars, yellow / blue capsule buttons. */
:root {
  --sky: #63bdf6;
  --sky-deep: #2f9bea;
  --blue: #1f8ff2;
  --blue-dark: #0f63c4;
  --blue-ink: #0b3f86;
  --yellow: #ffd23c;
  --yellow-dark: #e99a00;
  --ink: #23324a;
  --paper: #ffffff;
  --paper-2: #eef8ff;
  --line: #bfe2ff;
  --red: #ff4d5a;
  --green: #2fbf71;
  --radius: 22px;
  --font: 'Baloo 2', 'Mitr', system-ui, sans-serif;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--ink); font-size: 15px;
  background: var(--sky) url(../assets/ui/common_bg_pattern_01.png) repeat;
  background-size: 200px auto;
  overflow: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: flex; flex-direction: column; }

/* ---------- logo ---------- */
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.logo-bubble {
  width: 1em; height: 1em; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%, #fff 0 9%, #bfe8ff 10% 22%, #47b3ff 45%, #1366d6 100%);
  box-shadow: inset -4px -6px 10px rgba(0, 30, 90, .35), 0 4px 0 rgba(11, 63, 134, .35);
  position: relative;
}
.logo-bubble::after { content: ''; position: absolute; top: -18%; left: 44%; width: 16%; height: 26%; border-radius: 40%; background: #1366d6; }
.logo-text {
  line-height: .9; letter-spacing: .5px; color: #ffd23c;
  -webkit-text-stroke: 6px var(--blue-ink); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--blue-ink), 0 10px 18px rgba(0, 30, 90, .35);
}
.logo.big { font-size: 64px; flex-direction: column; text-align: center; }
.logo.big .logo-bubble { font-size: 72px; }
.logo.small { font-size: 22px; }
.logo-img { display: block; width: min(300px, 42vh, 70vw); height: auto; filter: drop-shadow(0 10px 18px rgba(0,30,90,.3)); animation: logoBob 3.2s ease-in-out infinite; pointer-events: none; user-select: none; }
@keyframes logoBob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.logo.small .logo-text { -webkit-text-stroke: 4px var(--blue-ink); text-shadow: 0 3px 0 var(--blue-ink); }

/* ---------- buttons ---------- */
.btn {
  --c1: #4fb4ff; --c2: #1f86ef; --sh: #0f5fbe; --fg: #fff;
  border: 0; border-radius: 999px; padding: 10px 22px; font-size: 17px; font-weight: 700; color: var(--fg);
  background: linear-gradient(180deg, var(--c1) 0 48%, var(--c2) 52% 100%);
  box-shadow: 0 4px 0 var(--sh), inset 0 2px 0 rgba(255, 255, 255, .55), 0 6px 12px rgba(0, 40, 100, .2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
  transition: transform .08s, filter .15s; white-space: nowrap;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sh), inset 0 2px 0 rgba(255, 255, 255, .5); }
.btn:disabled { filter: grayscale(.7) opacity(.65); cursor: not-allowed; }
.btn.yellow { --c1: #ffe36b; --c2: #ffc21a; --sh: #d48a00; --fg: #5b3500; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.btn.white { --c1: #ffffff; --c2: #e7f3ff; --sh: #9cc7ee; --fg: var(--blue-dark); text-shadow: none; }
.btn.red { --c1: #ff8a8a; --c2: #f0465a; --sh: #b3233a; }
.btn.green { --c1: #7ae3a2; --c2: #2fbf71; --sh: #1b8c4f; }
.btn.wide { width: 100%; }
.btn.sm { padding: 6px 14px; font-size: 14px; }
.btn.xs { padding: 3px 10px; font-size: 12px; box-shadow: 0 2px 0 var(--sh); }
.btn.huge { font-size: 26px; padding: 14px 20px; width: 100%; border-radius: 26px; }

/* ---------- popup (APK style) ---------- */
.popup {
  background: var(--paper); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px #2b8de4, 0 10px 0 7px #0f5fbe, 0 18px 30px rgba(0, 40, 100, .35);
  display: flex; flex-direction: column; min-height: 0;
}
.popup-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; color: #fff; font-weight: 800; font-size: 18px;
  background: linear-gradient(180deg, #3fa9ff 0 50%, #1f8ff2 50% 100%);
  border-bottom: 3px solid #0f63c4; text-shadow: 0 2px 0 rgba(0, 40, 100, .35);
}
.popup-x { border: 0; background: #ffffff33; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 16px; font-weight: 800; }
.popup-body {
  padding: 14px; flex: 1; min-height: 0; overflow: auto;
  background: radial-gradient(circle at 20% 0, #fff, var(--paper-2));
}
.popup-actions { display: flex; gap: 12px; justify-content: center; padding: 12px 14px 16px; background: var(--paper-2); }

.modal-back { position: fixed; inset: 0; z-index: 70; background: rgba(5, 30, 70, .55); display: grid; place-items: center; padding: 18px; animation: fadein .15s; }
.modal-back.out { opacity: 0; transition: opacity .18s; }
.modal-back .popup { width: min(440px, 100%); max-height: calc(100vh - 36px); animation: pop .22s cubic-bezier(.3, 1.6, .5, 1); }
.modal-back .popup.wide { width: min(860px, 100%); }
@keyframes pop { from { transform: scale(.8); opacity: 0 } }
@keyframes fadein { from { opacity: 0 } }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; color: var(--blue-ink); font-size: 14px; }
input, select, textarea {
  border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; background: #fff; color: var(--ink); outline: none;
  box-shadow: inset 0 2px 0 #e6f3ff;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
.hint { font-size: 12px; color: #5a7393; text-align: center; margin: 8px 0 0; }
.or { display: flex; align-items: center; gap: 10px; color: #7c95b5; margin: 14px 0; font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 2px; background: var(--line); border-radius: 2px; }

/* ---------- loading ---------- */
.loading-box { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.bar { width: min(420px, 80vw); height: 22px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 4px #1f8ff2, inset 0 3px 0 #dceeff; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(180deg, #ffe36b 0 50%, #ffc21a 50%); transition: width .2s; }
.load-text { color: #fff; font-weight: 700; text-shadow: 0 2px 0 var(--blue-ink); }

/* ---------- auth ---------- */
.auth-wrap { margin: auto; display: flex; align-items: center; gap: 48px; padding: 20px; width: 100%; max-width: 960px; justify-content: center; overflow: auto; max-height: 100%; }
.auth-card { width: min(400px, 92vw); padding: 0 18px 18px; }
.tabs { display: flex; margin: 0 -18px 16px; }
.tab { flex: 1; border: 0; padding: 14px 6px; font-size: 17px; font-weight: 800; color: #9fc6ec; background: #e3f2ff; border-bottom: 3px solid #bfe2ff; }
.tab.active { color: #fff; background: linear-gradient(180deg, #3fa9ff 0 50%, #1f8ff2 50%); border-bottom-color: #0f63c4; text-shadow: 0 2px 0 rgba(0, 40, 100, .35); }
.tab-pane { display: none; }
.tab-pane.active { display: flex; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px) calc(16px + var(--safe-l)); background: linear-gradient(180deg, #1f8ff2, #1777dc); box-shadow: 0 4px 0 #0f5fbe, 0 8px 18px rgba(0, 40, 100, .25); color: #fff; z-index: 2; }
.ticker { flex: 1; overflow: hidden; white-space: nowrap; font-size: 14px; background: #0f63c4; border-radius: 99px; padding: 5px 14px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }
.ticker span { display: inline-block; padding-left: 100%; animation: ticker 22s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%) } }
.me-card { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border-radius: 99px; padding: 3px 14px 3px 3px; box-shadow: 0 3px 0 #0f5fbe; cursor: pointer; }
.me-card canvas { width: 40px; height: 40px; flex: none; border-radius: 50%; background: radial-gradient(#fff, #cfe9ff); }
.me-card .nm { font-weight: 800; line-height: 1; }
.me-card .sub { font-size: 12px; color: #5a7393; display: flex; gap: 8px; }
.coin { color: #c88400; font-weight: 700; }
.room-title { flex: 1; font-weight: 800; font-size: 20px; text-shadow: 0 2px 0 var(--blue-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- lobby ---------- */
.lobby-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(250px, 300px) 1fr minmax(260px, 320px); gap: 24px; padding: 24px calc(24px + var(--safe-r)) 16px calc(24px + var(--safe-l)); }
.modes { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.mode-card { position: relative; border: 0; padding: 0; background: none; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transition: transform .12s; }
.mode-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 0 rgba(11, 63, 134, .35)); }
.mode-card span, .mode-card small { position: relative; color: #fff; -webkit-text-stroke: 4px var(--blue-ink); paint-order: stroke fill; font-weight: 800; }
.mode-card span { font-size: 30px; line-height: 1; }
.mode-card small { font-size: 14px; -webkit-text-stroke: 3px var(--blue-ink); margin-bottom: 8%; }
.mode-card.mm span, .mode-card.mm small { -webkit-text-stroke-color: #8a5400; }
.mode-card:hover { transform: translateY(-3px) rotate(-1deg); }
.mode-card:active { transform: scale(.97); }
.rooms .popup-body { display: flex; flex-direction: column; gap: 10px; }
.room-tools { display: flex; gap: 8px; }
.room-tools input { flex: 1; padding: 6px 12px; }
.online { font-size: 13px; background: #ffffff2e; padding: 2px 10px; border-radius: 99px; }
.room-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-content: start; overflow: auto; min-height: 0; flex: 1; padding: 4px; }
.room-item { display: grid; grid-template-columns: 54px 1fr; gap: 4px 10px; align-items: center; text-align: left; border: 0; background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 0 0 2px var(--line), 0 4px 0 2px #a6d3fb; }
.room-item:hover { box-shadow: 0 0 0 2px var(--blue), 0 4px 0 2px var(--blue-dark); }
.room-item .no { grid-row: span 2; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: #fff; background: linear-gradient(180deg, #4fb4ff, #1f86ef); }
.room-item.playing .no { background: linear-gradient(180deg, #ff9d9d, #f0465a); }
.room-item .nm { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-item .meta { font-size: 12px; color: #5a7393; display: flex; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-block; padding: 0 8px; border-radius: 99px; background: #e3f2ff; color: var(--blue-dark); font-size: 12px; font-weight: 700; }
.tag.red { background: #ffe1e4; color: #c22a3e; }
.tag.green { background: #dcf7e8; color: #1b8c4f; }
.empty-note { color: #7c95b5; text-align: center; padding: 30px 10px; grid-column: 1 / -1; }
.chat-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.chat-log { flex: 1; overflow: auto; min-height: 60px; font-size: 14px; display: flex; flex-direction: column; gap: 3px; user-select: text; }
.chat-log .ln b { color: var(--blue-dark); }
.chat-log .ln.sys { color: #c27800; }
.chat-log .ln.admin b { color: #d8343f; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; padding: 7px 12px; }
.bottom-nav { display: flex; justify-content: center; gap: 10px; padding: 8px calc(12px + var(--safe-r)) calc(10px + var(--safe-b)) calc(12px + var(--safe-l)); }
.bottom-nav button { border: 0; background: #fff; border-radius: 18px; padding: 6px 16px; font-weight: 700; color: var(--blue-dark); box-shadow: 0 4px 0 #9cc7ee; display: flex; flex-direction: column; align-items: center; font-size: 13px; min-width: 76px; }
.bottom-nav button i { font-style: normal; font-size: 22px; line-height: 1.2; }
.bottom-nav button:active { transform: translateY(3px); box-shadow: 0 1px 0 #9cc7ee; }

/* ---------- room ---------- */
.room-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 24px; padding: 24px calc(24px + var(--safe-r)) 18px calc(24px + var(--safe-l)); }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.slots-panel .popup-body { overflow: auto; }
.slot { position: relative; min-width: 0; aspect-ratio: 3 / 3.7; border-radius: 18px; background: linear-gradient(180deg, #fff, #e8f5ff); box-shadow: 0 0 0 3px var(--line), 0 5px 0 3px #a6d3fb; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 6px; overflow: hidden; }
.slot .team-bar { position: absolute; top: 0; left: 0; right: 0; height: 9px; }
.slot canvas { width: 100%; height: 0; flex: 1 1 0; min-height: 0; }
.slot .nm { font-weight: 800; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .st { font-size: 12px; font-weight: 800; padding: 1px 10px; border-radius: 99px; margin-top: 2px; background: #e3f2ff; color: #5a7393; }
.slot .st.ready { background: var(--yellow); color: #5b3500; }
.slot .st.host { background: #ff8a3d; color: #fff; }
.slot .crown { position: absolute; top: 12px; left: 10px; font-size: 18px; }
.slot .kick { position: absolute; top: 12px; right: 8px; border: 0; background: #ff4d5a; color: #fff; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; font-size: 12px; }
.slot.empty { justify-content: center; color: #9fc6ec; font-size: 13px; cursor: default; }
.slot.empty.can { cursor: pointer; }
.slot.empty.can:hover { box-shadow: 0 0 0 3px var(--blue), 0 5px 0 3px var(--blue-dark); }
.slot.empty b { font-size: 42px; line-height: 1; }
.slot.closed { background: repeating-linear-gradient(45deg, #dbe9f7 0 10px, #e9f2fb 10px 20px); color: #9fb7d1; justify-content: center; font-weight: 800; }
.slot.me { box-shadow: 0 0 0 3px var(--yellow), 0 5px 0 3px var(--yellow-dark); }
.room-side > * { flex: none; }
.room-side { display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow: auto; padding: 4px 8px 6px; }
.map-thumb { width: 100%; aspect-ratio: 15 / 13; border-radius: 12px; background: #3a6b2a; display: block; }
.map-name { font-weight: 800; text-align: center; margin-top: 6px; color: var(--blue-ink); }
.host-opts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.host-opts select { padding: 4px 8px; font-size: 13px; }
.char-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.char-btn { border: 0; background: #fff; border-radius: 14px; padding: 4px 2px; box-shadow: 0 0 0 2px var(--line); display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 700; color: var(--blue-ink); }
.char-btn canvas { width: 46px; height: 50px; }
.char-btn.sel { box-shadow: 0 0 0 3px var(--yellow), 0 3px 0 3px var(--yellow-dark); }
.team-pick { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.team-dot { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #9cc7ee; }
.team-dot.sel { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.12); }
.room-side > .chat-panel.small { min-height: 170px; flex: 1 0 170px; }

/* ---------- characters / ranking / settings dialogs ---------- */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.char-card { border: 0; background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 0 0 2px var(--line), 0 4px 0 2px #a6d3fb; text-align: center; }
.char-card.sel { box-shadow: 0 0 0 3px var(--yellow), 0 4px 0 3px var(--yellow-dark); }
.char-card canvas { width: 90px; height: 100px; }
.char-card .nm { font-weight: 800; font-size: 16px; }
.stat-row { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px; font-size: 12px; margin: 3px 0; }
.stat-row .pips { display: flex; gap: 2px; }
.stat-row .pips i { flex: 1; height: 8px; border-radius: 3px; background: #dfeefc; }
.stat-row .pips i.b { background: #1f8ff2; }
.stat-row .pips i.m { background: #9fd2ff; }
table.rank { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rank td, table.rank th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
table.rank tr:nth-child(1) td:first-child { color: #d49a00; font-weight: 800; }
.howto { font-size: 14px; line-height: 1.55; }
.howto h4 { margin: 10px 0 4px; color: var(--blue-dark); }
.howto kbd { background: #fff; border: 1px solid #9cc7ee; border-bottom-width: 3px; border-radius: 6px; padding: 0 6px; font-family: inherit; font-size: 12px; }
.items-help { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.items-help div { display: flex; gap: 8px; align-items: center; background: #fff; border-radius: 10px; padding: 4px 8px; }
.items-help img { width: 30px; height: 30px; }
.range { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.range input { flex: 1; }

/* ---------- toast ---------- */
#toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #fff; color: var(--ink); padding: 10px 18px; border-radius: 99px; font-weight: 700; box-shadow: 0 0 0 3px var(--blue), 0 5px 0 3px var(--blue-dark); animation: pop .25s; }
.toast.error { box-shadow: 0 0 0 3px var(--red), 0 5px 0 3px #b3233a; }
.toast.out { opacity: 0; transform: translateY(-10px); transition: .3s; }

/* ---------- game ---------- */
#scr-game { background: #0d3d7a radial-gradient(circle at 50% 40%, #2f80d8, #0b2f63); }
#game-wrap { position: absolute; inset: 0; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: absolute; inset: 0; pointer-events: none; }
/* timer pill + team score (BnB M style) */
.hud-top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
.hud-timer { background: rgba(22, 30, 52, .88); color: #fff; font-weight: 800; font-size: 24px; letter-spacing: 1px; padding: 2px 22px 4px; border-radius: 0 0 18px 18px; min-width: 120px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.hud-timer.warn { color: #ff8a95; }
.score { display: flex; gap: 4px; }
.score i { width: 22px; height: 22px; border-radius: 50%; background: rgba(22, 30, 52, .55); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); }
.score i.on { background: radial-gradient(circle at 35% 30%, #fff 0 12%, #6fd0ff 30%, #1f7fe0); box-shadow: 0 0 0 2px #fff; }
.score i.bad { background: radial-gradient(circle at 35% 30%, #fff 0 12%, #ff9aa5 30%, #e0303f); box-shadow: 0 0 0 2px #fff; }
.hud-team { position: absolute; top: 10px; display: flex; flex-direction: column; gap: 8px; }
.hud-team.left { left: calc(10px + var(--safe-l)); }
.hud-team.right { right: calc(64px + var(--safe-r)); align-items: flex-end; }
.ptile { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 56px; }
.ptile .pic { position: relative; width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(180deg, #fff, #dff1ff); box-shadow: 0 0 0 3px var(--tc), 0 4px 0 3px rgba(0, 0, 0, .25); overflow: hidden; }
.ptile canvas { width: 100%; height: 100%; }
.ptile span { font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; max-width: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ptile.me span { color: #ffd23c; }
.ptile .st { position: absolute; inset: 0; }
.ptile.trapped .st { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7) 0 10%, rgba(120, 200, 255, .55) 40%, rgba(40, 140, 240, .7)); animation: blink 0.8s infinite; }
.ptile.dead .pic { filter: grayscale(1) brightness(.7); }
.ptile.dead .st::after { content: '✖'; position: absolute; inset: 0; display: grid; place-items: center; color: #ff4d5a; font-size: 30px; font-weight: 800; text-shadow: 0 2px 0 #fff; }
.hud-feed { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.feed { background: rgba(22, 30, 52, .75); color: #fff; font-size: 13px; padding: 3px 12px; border-radius: 99px; transition: opacity .4s; }
.feed.good b { color: #7fd0ff; } .feed.bad b { color: #ff8a95; }
.feed.out { opacity: 0; }
.hud-stats { position: absolute; bottom: calc(6px + var(--safe-b)); left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; background: rgba(22, 30, 52, .55); padding: 4px 14px; border-radius: 99px; }
.sbar { display: flex; align-items: center; gap: 4px; }
.sbar img { width: 24px; height: 24px; }
.segs { display: flex; gap: 2px; }
.segs i { width: 7px; height: 13px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.segs i.on { background: linear-gradient(180deg, #ffe680, #ffb81a); box-shadow: 0 0 0 1px rgba(120, 70, 0, .5); }
.segs i.cap { background: rgba(255, 210, 60, .25); box-shadow: inset 0 0 0 1px rgba(255, 210, 60, .5); }
.segs i.off { display: none; }
.hud-stats .abil { width: 24px; height: 24px; }
.hud-center { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.big-text { font-size: 84px; font-weight: 800; color: #ffd23c; -webkit-text-stroke: 8px var(--blue-ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--blue-ink); animation: pop .35s cubic-bezier(.3, 1.8, .5, 1); line-height: 1; }
.big-text.red { color: #ff7480; }
.big-text.white { color: #fff; }
.hud-menu { position: absolute; top: 8px; right: calc(10px + var(--safe-r)); pointer-events: auto; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: var(--blue-dark); font-size: 20px; font-weight: 800; box-shadow: 0 3px 0 #0f5fbe; }
.hud-net { position: absolute; bottom: 4px; right: calc(10px + var(--safe-r)); color: #fff; font-size: 11px; opacity: .6; text-shadow: 0 1px 2px #000; }

/* action buttons: touch = full controls; desktop = compact clickable buttons with key hints */
.touch { position: absolute; inset: 0; pointer-events: none; }
.joy { display: none; position: absolute; left: calc(18px + var(--safe-l)); bottom: calc(18px + var(--safe-b)); width: 170px; height: 170px; pointer-events: auto; touch-action: none; }
body.is-touch .joy { display: block; }
.joy-base { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12) 65%, rgba(255, 255, 255, .05)); border: 3px solid rgba(255, 255, 255, .5); }
.joy-base .ar { position: absolute; width: 0; height: 0; border: 9px solid transparent; opacity: .8; }
.ar.u { top: 8px; left: 50%; margin-left: -9px; border-bottom: 12px solid #fff; border-top: 0; }
.ar.d { bottom: 8px; left: 50%; margin-left: -9px; border-top: 12px solid #fff; border-bottom: 0; }
.ar.l { left: 8px; top: 50%; margin-top: -9px; border-right: 12px solid #fff; border-left: 0; }
.ar.r { right: 8px; top: 50%; margin-top: -9px; border-left: 12px solid #fff; border-right: 0; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e8f2ff 60%, #c8dcf2); box-shadow: 0 5px 0 #8fa8c8, 0 8px 14px rgba(0, 0, 0, .35); display: grid; place-items: center; }
.joy-knob .face { width: 38px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 70%, #9bd0ff, #4f8fe8); position: relative; }
.joy-knob .face::before, .joy-knob .face::after { content: ''; position: absolute; top: 9px; width: 5px; height: 7px; border-radius: 50%; background: #1c2a44; }
.joy-knob .face::before { left: 11px; } .joy-knob .face::after { right: 11px; }
.tbtns { position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); width: 250px; height: 220px; }
body:not(.is-touch) .tbtns { transform: scale(.62); transform-origin: right bottom; right: 14px; bottom: 50px; }
body:not(.is-touch) .tbtn::after { content: attr(data-key); position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: #fff; color: var(--blue-ink); font-size: 14px; font-weight: 800; padding: 0 8px; border-radius: 6px; box-shadow: 0 2px 0 #9cc7ee; }
.tbtn { position: absolute; pointer-events: auto; touch-action: none; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; background: radial-gradient(circle at 35% 28%, #5d7fb8, #2b3f6a 62%, #1c2a4a); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 5px 0 3px #0e1a33, 0 8px 16px rgba(0, 0, 0, .3); }
.tbtn:active, .tbtn.on { transform: translateY(3px) scale(.96); }
.tbtn em { position: absolute; bottom: -4px; right: -4px; font-style: normal; font-size: 13px; background: #fff; color: var(--blue-ink); border-radius: 99px; min-width: 24px; padding: 0 6px; box-shadow: 0 2px 0 #8fa8c8; }
.tbtn .ico { width: 62%; height: 62%; display: grid; place-items: center; font-size: 26px; }
.tbtn .ico img { width: 100%; height: 100%; object-fit: contain; }
.empty-slot { color: rgba(255, 255, 255, .4); font-size: 22px; }
.b-balloon { width: 112px; height: 112px; right: 0; bottom: 0; background: radial-gradient(circle at 35% 28%, #c8f0ff, #3fa9ff 55%, #1366d6); box-shadow: 0 0 0 4px #fff, 0 6px 0 4px #0b4fa6, 0 10px 18px rgba(0, 0, 0, .35); }
.b-balloon .ico-balloon { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 10%, #bfe8ff 11% 24%, #47b3ff 46%, #1366d6 100%); box-shadow: inset -4px -6px 10px rgba(0, 30, 90, .35), 0 0 0 2px rgba(255, 255, 255, .6); }
.b-needle { width: 66px; height: 66px; right: 128px; bottom: 4px; }
.b-item { width: 66px; height: 66px; right: 110px; bottom: 90px; }
.b-skill { width: 66px; height: 66px; right: 26px; bottom: 132px; background: radial-gradient(circle at 35% 28%, #ffe680, #ffb81a 60%, #d48a00); box-shadow: 0 0 0 3px #fff, 0 5px 0 3px #8a5a00, 0 8px 16px rgba(0, 0, 0, .3); }
.b-skill.ready { animation: glow 1.2s infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px #fff, 0 5px 0 3px #8a5a00, 0 0 22px 6px rgba(255, 220, 80, .8); } }
.b-skill .cd { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(10, 20, 40, .65) var(--p, 0%), transparent 0); pointer-events: none; }
.b-skill .cdt { position: absolute; font-size: 22px; text-shadow: 0 2px 2px #000; }
.b-skill small { position: absolute; bottom: -18px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.tbtn.disabled { filter: grayscale(.7) brightness(.85); }

/* pre-match VS + result + character showcase share the "stump" stage look */
.stump { width: 96px; height: 34px; margin-top: -10px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #f3cf8f 0 45%, #d4a25c 46% 60%, #a8713e 61%); box-shadow: 0 10px 0 -2px #8a5a30, 0 14px 14px rgba(0, 0, 0, .25); }
.stump.big { width: 230px; height: 70px; margin-top: -24px; }
.vs-overlay, .res-overlay, .cs-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; background: linear-gradient(180deg, #8fdcff 0, #c8f0ff 46%, #a8dc6a 46.2%, #8fcf52 100%); overflow: auto; padding: 16px calc(16px + var(--safe-r)) 16px calc(16px + var(--safe-l)); }
.vs-overlay::before, .res-overlay::before, .cs-overlay::before { content: ''; position: absolute; left: 0; right: 0; top: 46%; bottom: 0; background: repeating-conic-gradient(rgba(255, 255, 255, .14) 0 25%, transparent 0 50%) 0 0 / 64px 64px; pointer-events: none; }
.vs-overlay.out, .res-overlay.out { opacity: 0; transition: opacity .4s; }
.vs-title { font-weight: 800; font-size: 22px; color: #fff; text-shadow: 0 2px 0 var(--blue-ink); display: flex; gap: 10px; align-items: baseline; }
.vs-title small { font-size: 14px; opacity: .85; }
.vs-row { flex: 1; display: flex; align-items: center; justify-content: center; gap: 30px; width: 100%; position: relative; }
.vs-side { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 42%; }
.vs-slot { display: flex; flex-direction: column; align-items: center; position: relative; animation: pop .4s backwards; }
.vs-slot canvas { width: 96px; height: 120px; position: relative; z-index: 1; }
.vs-name { font-weight: 800; font-size: 16px; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; }
.vs-ready { margin-top: -26px; z-index: 2; font-weight: 800; font-size: 20px; color: #ffd23c; -webkit-text-stroke: 4px #8a4a00; paint-order: stroke fill; }
.vs-me { position: absolute; top: -26px; background: #3fa9ff; color: #fff; font-weight: 800; padding: 2px 10px; border-radius: 12px; box-shadow: 0 2px 0 #1366d6; }
.vs-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vs-label { font-weight: 700; color: var(--blue-ink); }
.vs-count { font-size: 56px; font-weight: 800; color: #fff; -webkit-text-stroke: 6px var(--blue-ink); paint-order: stroke fill; line-height: 1; font-variant-numeric: tabular-nums; }
.vs-badge { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font-size: 50px; font-weight: 800; color: #e8402f; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; background: radial-gradient(circle at 40% 35%, #fff4b0, #ffd23c 50%, #d48a00); box-shadow: 0 0 0 6px #fff1a8, 0 0 0 10px #d48a00, 0 10px 20px rgba(0, 0, 0, .3); animation: pop .5s cubic-bezier(.3, 1.8, .5, 1); }
.vs-foot { font-weight: 700; color: #fff; text-shadow: 0 2px 2px rgba(0, 0, 0, .4); z-index: 1; }
.res-head { display: flex; align-items: center; gap: 18px; z-index: 1; }
.res-head .sc { font-size: 46px; color: #fff; -webkit-text-stroke: 6px var(--blue-ink); paint-order: stroke fill; }
.ribbon { font-size: 34px; font-weight: 800; color: #fff; padding: 4px 46px; background: linear-gradient(180deg, #ff6b5b, #d23b35); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); text-shadow: 0 3px 0 #8a1a1a; }
.res-overlay.lose .ribbon { background: linear-gradient(180deg, #8fa0b4, #56657a); text-shadow: 0 3px 0 #2a3444; }
.res-overlay.draw .ribbon { background: linear-gradient(180deg, #4fb4ff, #1f86ef); text-shadow: 0 3px 0 #0b3f86; }
.res-card { z-index: 1; background: rgba(255, 255, 255, .95); border-radius: 18px; padding: 10px 14px; margin-top: 10px; box-shadow: 0 0 0 4px #fff, 0 0 0 7px #2b8de4, 0 10px 18px rgba(0, 0, 0, .25); width: min(620px, 100%); }
.res-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.res-table th { text-align: left; color: #5a7393; font-size: 12px; padding: 2px 8px; }
.res-table td { padding: 4px 8px; border-top: 1px solid #e3eef9; font-weight: 700; }
.res-table tr.me td { background: #fffbe0; }
.res-table tr.foe td:first-child { color: #c22a3e; } .res-table tr.mine td:first-child { color: var(--blue-dark); }
.tdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.res-reward { text-align: center; font-weight: 800; color: #c06a00; margin-top: 6px; }
.res-stage { z-index: 1; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; flex: 1; align-items: flex-end; }
.res-char { display: flex; flex-direction: column; align-items: center; position: relative; }
.res-char canvas { width: 80px; height: 100px; z-index: 1; }
.res-char .stump { width: 80px; height: 28px; }
.res-char small { font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; margin-top: 8px; }
.res-char.l canvas { filter: saturate(.6); }
.medal { position: absolute; top: 18px; z-index: 2; font-weight: 800; font-size: 13px; padding: 2px 10px; border-radius: 99px; background: #ffd23c; color: #7a4a00; box-shadow: 0 2px 0 #b07800; }
.res-char.l .medal { background: #c9a27a; color: #fff; box-shadow: 0 2px 0 #8a5a30; }
.res-char.d .medal { background: #9fd2ff; color: #0b3f86; }
.res-actions { display: flex; gap: 12px; margin-top: 14px; z-index: 1; }
.res-actions .btn { min-width: 140px; }
.cs-overlay { justify-content: flex-start; }
.cs-top { width: 100%; display: flex; align-items: center; gap: 12px; z-index: 1; color: #fff; font-size: 22px; text-shadow: 0 2px 0 var(--blue-ink); }
.cs-body { z-index: 1; flex: 1; width: 100%; max-width: 1000px; display: grid; grid-template-columns: 1fr minmax(280px, 420px); gap: 20px; align-items: center; }
.cs-stage { display: flex; flex-direction: column; align-items: center; }
.cs-big { width: min(300px, 70vw); height: min(330px, 45vh); }
.cs-info { background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 0 0 4px #fff, 0 0 0 7px #2b8de4, 0 10px 0 7px #0f5fbe; display: flex; flex-direction: column; gap: 10px; }
.cs-ribbon { align-self: center; margin-top: -40px; font-size: 30px; font-weight: 800; color: #ffd23c; -webkit-text-stroke: 5px var(--blue-ink); paint-order: stroke fill; background: linear-gradient(180deg, #4fb4ff, #1f86ef); padding: 2px 40px; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
.cs-desc { margin: 0; color: var(--blue-ink); font-weight: 500; font-size: 13.5px; line-height: 1.5; text-align: left; }
.cs-title { margin: -4px 0 0; color: #7d94b3; font-weight: 700; font-size: 13px; text-align: center; }
.cs-pass { margin: 0; background: #ecffe9; border-radius: 12px; padding: 8px 12px; color: #2a7a3a; font-size: 14px; }
.cs-stats { background: #eaf5ff; border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.cs-stats .row { display: grid; grid-template-columns: 26px 70px 1fr; align-items: center; gap: 6px; font-weight: 700; color: var(--blue-ink); font-size: 14px; }
.cs-stats img { width: 26px; height: 26px; }
.pips8 { display: flex; gap: 3px; }
.pips8 i { flex: 1; height: 16px; border-radius: 6px; background: #c9d6e4; }
.pips8 i.b { background: linear-gradient(180deg, #ffe680, #ffb81a); box-shadow: inset 0 -2px 0 rgba(150, 90, 0, .35); }
.pips8 i.m { background: linear-gradient(180deg, #e8c066, #b88a2a); opacity: .75; }
.cs-skill { margin: 0; font-size: 13px; color: #5a7393; }
.cs-strip { z-index: 1; display: flex; gap: 10px; overflow-x: auto; max-width: 100%; padding: 10px 4px; }
.cs-pick { position: relative; flex: none; width: 76px; border: 0; border-radius: 16px; background: #fff; padding: 4px; box-shadow: 0 0 0 3px #bfe2ff, 0 4px 0 3px #8cc4f5; display: flex; flex-direction: column; align-items: center; }
.cs-pick canvas { width: 64px; height: 70px; }
.cs-pick small { font-weight: 800; color: var(--blue-ink); }
.cs-pick.sel { box-shadow: 0 0 0 3px var(--yellow), 0 4px 0 3px var(--yellow-dark); }
.cs-pick .new { position: absolute; top: -6px; right: -6px; background: #ff4d5a; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 99px; }
.rank-badge { display: inline-grid; place-items: center; clip-path: polygon(50% 0, 100% 18%, 92% 70%, 50% 100%, 8% 70%, 0 18%); background: linear-gradient(160deg, var(--r1), var(--r2)); vertical-align: middle; }
.rank-badge b { color: #fff; font-size: 11px; text-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
@media (max-width: 760px), (max-height: 520px) {
  .cs-body { grid-template-columns: 1fr; }
  .vs-slot canvas { width: 64px; height: 84px; } .stump { width: 70px; height: 24px; }
  .vs-badge { width: 76px; height: 76px; font-size: 32px; } .vs-count { font-size: 36px; }
  .res-head .sc { font-size: 32px; } .ribbon { font-size: 24px; }
  .res-char canvas { width: 56px; height: 70px; }
  .ptile { width: 44px; } .ptile .pic { width: 38px; height: 38px; border-radius: 9px; }
  .hud-timer { font-size: 18px; min-width: 96px; } .score i { width: 15px; height: 15px; }
  .hud-stats { transform: translateX(-50%) scale(.8); transform-origin: bottom center; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .lobby-grid { grid-template-columns: 240px 1fr; }
  .lobby-grid .chat-panel { grid-column: 1 / -1; height: 200px; }
  body[data-screen="scr-lobby"] #scr-lobby { overflow: auto; }
  #scr-lobby { overflow: auto; }
  #scr-lobby .lobby-grid { flex: none; min-height: calc(100% - 140px); }
}
@media (max-width: 760px), (max-height: 520px) {
  body { font-size: 14px; }
  .logo.big { font-size: 40px; }
  .logo.big .logo-bubble { font-size: 46px; }
  .auth-wrap { flex-direction: column; gap: 18px; margin: 0; padding-top: 24px; }
  .topbar { padding: 6px 10px; gap: 8px; }
  .logo.small .logo-text { display: none; }
  .ticker { font-size: 12px; }
  .me-card .sub { display: none; }
  .lobby-grid { display: flex; flex-direction: column; padding: 14px; gap: 18px; }
  .modes { flex-direction: row; min-height: 150px; }
  .mode-card { min-height: 150px; }
  .mode-card span { font-size: 22px; }
  .mode-card small { font-size: 11px; }
  .rooms { min-height: 300px; }
  .room-grid { display: flex; flex-direction: column; overflow: auto; padding: 14px; gap: 18px; }
  #scr-room { overflow: auto; }
  .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .slot { aspect-ratio: 3 / 3.4; }
  .slot .nm { font-size: 11px; }
  .room-side { overflow: visible; }
  .room-grid > *, .room-side > * { flex: none !important; }
  .room-side > .chat-panel.small { height: 200px; }
  #btn-start { position: sticky; bottom: 8px; z-index: 3; }
  .lobby-grid > * { flex: none; }
  .bottom-nav { gap: 6px; overflow-x: auto; justify-content: flex-start; }
  .bottom-nav button { min-width: 64px; padding: 4px 10px; font-size: 11px; }
  .big-text { font-size: 54px; -webkit-text-stroke-width: 6px; }
  .hud-timer { font-size: 18px; min-width: 76px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .slot { aspect-ratio: 4 / 3.6; padding: 4px; }
  .slot .st { font-size: 10px; } .slot .nm { font-size: 11px; }
  .room-grid { display: grid; grid-template-columns: 1fr 280px; padding: 10px; gap: 14px; }
  .room-side { overflow: auto; }
  .slots-panel { align-self: start; }
  .joy { width: 150px; height: 150px; }
  .tbtns { transform: scale(.88); transform-origin: right bottom; }
}

.key-hint { color: #fff; font-size: 12px; opacity: .8; text-shadow: 0 1px 2px #000; margin-left: 6px; }

body.is-touch .hud-stats { opacity: .85; transform: translateX(-50%) scale(.7); transform-origin: bottom center; bottom: 0; }
body.is-touch .hud-team { flex-direction: row; gap: 6px; top: 6px; }
body.is-touch .ptile { width: 40px; }
body.is-touch .ptile .pic { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 0 0 2px var(--tc), 0 3px 0 2px rgba(0,0,0,.25); }
body.is-touch .ptile span { font-size: 9px; max-width: 44px; }

/* =====================================================================================
   Lobby v2 (BnB M style): top wallet bar · character showcase · big mode cards · dock
   ===================================================================================== */
.topbar2 { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px calc(14px + var(--safe-l)); padding-right: calc(14px + var(--safe-r)); background: linear-gradient(180deg, #1f8ff2, #1777dc); box-shadow: 0 4px 0 #0f5fbe, 0 8px 18px rgba(0, 40, 100, .25); color: #fff; z-index: 2; }
.topbar2 .ticker { min-width: 60px; }
.wallet { display: flex; gap: 8px; }
.cur { display: flex; align-items: center; gap: 6px; border: 0; background: #0b4fa3; color: #fff; border-radius: 99px; padding: 3px 4px 3px 8px; font-weight: 800; font-size: 15px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); min-width: 120px; }
.cur i { font-style: normal; font-size: 18px; } .cur b { flex: 1; text-align: right; }
.cur em { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#ffe36b, #ffc21a); color: #6a3b00; display: grid; place-items: center; font-weight: 900; }
.cur.gem em { background: linear-gradient(#ff9fe0, #e04ab8); color: #fff; }
.top-icons { display: flex; gap: 6px; }
.top-icons .ic { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 0; background: #ffffff26; font-size: 20px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #ff3b58; color: #fff; font: 800 11px/18px var(--font); text-decoration: none; display: none; box-shadow: 0 0 0 2px #fff; }
.badge.on, .g-tab .badge { display: inline-block; position: static; margin-left: 4px; }
.top-icons .badge.on, .bottom-nav .badge.on { position: absolute; }
.bottom-nav button { position: relative; }
.lobby2-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(240px, 300px) 1fr minmax(240px, 300px); gap: 18px; padding: 18px calc(18px + var(--safe-r)) 12px calc(18px + var(--safe-l)); }
.showcase { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-height: 0;
  background: radial-gradient(ellipse at 50% 80%, #ffffffaa, #ffffff00 70%); border-radius: 28px; padding: 12px; }
.sc-stage { position: relative; width: 100%; flex: 1; min-height: 160px; display: flex; align-items: flex-end; justify-content: center; }
.sc-stage canvas { position: relative; z-index: 1; width: 100%; height: 100%; max-height: 330px; margin-bottom: -18px; }
.sc-stage .stump { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); }
.sc-name { text-align: center; display: flex; flex-direction: column; align-items: center; z-index: 1; }
.sc-name b { font-size: 24px; color: #fff; -webkit-text-stroke: 4px var(--blue-ink); paint-order: stroke fill; line-height: 1.1; }
.sc-name .stars { color: #ffd23c; -webkit-text-stroke: 2px #8a5400; paint-order: stroke fill; font-size: 18px; letter-spacing: 2px; }
.sc-name small { color: #0b3f86; font-weight: 700; }
.sc-rank { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 99px; padding: 2px 12px 2px 3px; font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 #a6d3fb; z-index: 2; }
.sc-rank:empty { display: none; }
.sc-btns { display: flex; gap: 8px; z-index: 1; }
.play-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.modes2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: clamp(150px, 30vh, 250px); }
.modes2 .mode-card { min-height: 0; }
.mode-card.rk span, .mode-card.rk small { -webkit-text-stroke-color: #6b2c8f; }
.mode-card.rk img { filter: hue-rotate(250deg) saturate(1.2) drop-shadow(0 8px 0 rgba(80, 20, 120, .35)); }
.mini-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mini-card { border: 0; border-radius: 18px; padding: 10px 12px; text-align: left; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  background: linear-gradient(180deg, #fff, #e7f3ff); box-shadow: 0 0 0 2px var(--line), 0 5px 0 2px #8fc4f5; transition: transform .1s; }
.mini-card:hover { transform: translateY(-2px); } .mini-card:active { transform: translateY(2px); }
.mini-card i { grid-row: span 2; font-style: normal; font-size: 32px; text-align: center; }
.mini-card b { font-size: 16px; color: var(--blue-ink); } .mini-card small { font-size: 11px; color: #5a7393; }
.mini-card.gacha { background: linear-gradient(180deg, #fff6fd, #ffd9f3); box-shadow: 0 0 0 2px #ffc2ea, 0 5px 0 2px #e98ccd; }
.mini-card.shop { background: linear-gradient(180deg, #fffbe9, #ffefb0); box-shadow: 0 0 0 2px #ffe08a, 0 5px 0 2px #e6b43a; }
.play-col .rooms { flex: 1; min-height: 140px; }
.play-col .room-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.char-btn { position: relative; }
.char-btn .lock, .cs-pick .lock { display: none; position: absolute; top: 4px; right: 4px; font-style: normal; font-size: 14px; }
.char-btn.locked, .cs-pick.locked { filter: grayscale(1) brightness(.92); opacity: .75; }
.char-btn.locked .lock, .cs-pick.locked .lock { display: block; filter: none; }
.cs-stars { display: flex; align-items: center; gap: 2px; margin: 6px 0; }
.cs-stars i { font-style: normal; font-size: 24px; color: #cdd9e6; } .cs-stars i.on { color: #ffc21a; text-shadow: 0 2px 0 #c27800; }
.cs-stars small { margin-left: 8px; color: #5a7393; }
.cs-actions { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1100px) {
  .lobby2-grid { grid-template-columns: 230px 1fr; }
  .lobby2-grid .chat-panel { grid-column: 1 / -1; height: 190px; }
  #scr-lobby .lobby2-grid { flex: none; min-height: calc(100% - 140px); }
}
@media (max-width: 760px), (max-height: 520px) {
  .topbar2 { padding: 6px 10px; gap: 6px; flex-wrap: wrap; }
  .topbar2 .ticker { order: 9; flex-basis: 100%; }
  .cur { min-width: 0; font-size: 13px; }
  .top-icons .ic { width: 34px; height: 34px; font-size: 17px; }
  .lobby2-grid { display: flex; flex-direction: column; padding: 12px; gap: 14px; }
  .lobby2-grid > * { flex: none; }
  .showcase { flex-direction: row; flex-wrap: wrap; height: 200px; justify-content: center; }
  .sc-stage { flex: 0 0 150px; height: 170px; min-height: 0; }
  .sc-name { flex: 1; align-items: flex-start; }
  .sc-btns { flex-basis: 100%; justify-content: center; }
  .modes2 { height: 150px; }
  .mini-modes { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .mini-card { grid-template-columns: 1fr; text-align: center; padding: 8px 4px; } .mini-card i { grid-row: auto; font-size: 26px; } .mini-card small { display: none; }
  .play-col .rooms { min-height: 260px; }
}

/* ---------- shared dialog bits ---------- */
.wallet-mini { display: inline-flex; gap: 10px; background: #0b4fa3; color: #fff; border-radius: 99px; padding: 3px 12px; font-weight: 800; }
.g-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.g-tab { border: 0; border-radius: 99px; padding: 6px 14px; background: #e3f2ff; color: var(--blue-dark); font-weight: 800; }
.g-tab.on { background: linear-gradient(180deg, #4fb4ff, #1f86ef); color: #fff; box-shadow: 0 3px 0 #0f63c4; }
.bar { height: 10px; border-radius: 99px; background: #d6e8f8; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #2fd3e8, #1f8ff2); border-radius: 99px; transition: width .3s; }
i.r { font-style: normal; font-weight: 900; font-size: 11px; padding: 1px 7px; border-radius: 6px; color: #fff; background: #9aa9bb; }
i.r.R { background: #3b9cff; } i.r.SR { background: #b45cff; } i.r.SSR { background: linear-gradient(90deg, #ffb400, #ff6a00); }
.ico-emoji { line-height: 1; }
.tier-badge { display: inline-grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--tc) 60%); box-shadow: 0 0 0 2px #fff, 0 3px 0 2px rgba(0, 0, 0, .2); vertical-align: middle; line-height: 1; }
table.rank tr.me td { background: #fff6cc; }

/* shop */
.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: 60vh; overflow: auto; padding: 4px; }
.shop-card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 0 0 2px var(--line), 0 4px 0 2px #a6d3fb; }
.shop-card .pic { width: 84px; height: 84px; display: grid; place-items: center; background: radial-gradient(#fff, #dff0ff); border-radius: 50%; }
.shop-card small { font-size: 11px; color: #5a7393; min-height: 28px; }
.shop-card.owned { opacity: .8; }

/* gacha */
.gacha .g-main { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.g-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; border-radius: 20px; background: linear-gradient(160deg, #3b2a7a, #8a3bb8 60%, #ff7ac8); min-height: 240px; justify-content: center; overflow: hidden; }
.g-art canvas, .g-art img, .g-art .ico-emoji { position: relative; z-index: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.g-glow { position: absolute; inset: -40%; background: conic-gradient(from 0deg, #ffffff00, #ffffff55, #ffffff00 30%, #ffffff44 55%, #ffffff00 70%); animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.g-feat { position: relative; z-index: 1; color: #fff; font-weight: 800; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.g-feat em { font-style: normal; margin-left: 6px; background: #ff3b58; padding: 1px 6px; border-radius: 6px; font-size: 11px; }
.g-info { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.g-info h3 { margin: 0; color: var(--blue-ink); } .g-info p { margin: 0; font-size: 14px; }
.g-pity { width: 100%; } .g-pity small, .g-g10, .g-ends { font-size: 12px; color: #6b4b9a; }
.g-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pull-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pull-grid.one { grid-template-columns: 200px; justify-content: center; }
.pull-card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 3px #cfdbe8; animation: pop-in .4s both; font-size: 13px; }
.pull-card .pic { width: 70px; height: 70px; display: grid; place-items: center; }
.pull-card small { font-size: 11px; color: #5a7393; } .pull-card .lim { color: #ff3b58; font-weight: 800; }
.pull-card.r-R { box-shadow: 0 0 0 3px #3b9cff; } .pull-card.r-SR { box-shadow: 0 0 0 3px #b45cff, 0 0 18px #b45cff88; }
.pull-card.r-SSR { box-shadow: 0 0 0 3px #ffb400, 0 0 24px #ffb400; background: linear-gradient(#fffbe9, #fff); }
@keyframes pop-in { from { transform: scale(.3) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* friends */
.fr-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; padding: 2px; }
.fr-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 6px 10px; box-shadow: 0 0 0 2px var(--line); }
.fr-row .av { position: relative; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(#fff, #cfe9ff); overflow: hidden; }
.fr-row .av canvas { width: 100%; height: 100%; }
.fr-row .av.on::after { content: ''; position: absolute; right: 2px; bottom: 2px; width: 11px; height: 11px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 2px #fff; }
.fr-row .who { display: flex; flex-direction: column; min-width: 0; } .fr-row .who small { color: #5a7393; font-size: 12px; }
.fr-row .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fr-add { display: flex; flex-direction: column; gap: 10px; } .fr-add input { padding: 8px 12px; }

/* dressing room */
.dress { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
.dr-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: radial-gradient(ellipse at 50% 85%, #fff, #dbeeff 70%); border-radius: 20px; padding: 12px; }
.dr-cv { width: 240px; height: 280px; position: relative; z-index: 1; margin-bottom: -20px; }
.dr-dirs { display: flex; gap: 6px; margin-top: 18px; z-index: 1; }
.dr-side h4 { margin: 0 0 6px; color: var(--blue-ink); }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 52vh; overflow: auto; padding: 3px; align-content: start; }
.dr-type { grid-column: 1 / -1; font-weight: 800; color: #5a7393; font-size: 12px; margin-top: 4px; }
.dr-item { border: 0; border-radius: 14px; background: #fff; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 0 0 2px var(--line); }
.dr-item small { font-size: 11px; } .dr-item.on { box-shadow: 0 0 0 3px var(--yellow), 0 4px 0 3px var(--yellow-dark); background: #fffbe6; }

/* quests */
.quests { display: flex; flex-direction: column; gap: 12px; }
.q-chests { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; background: linear-gradient(180deg, #eaf6ff, #fff); border-radius: 16px; padding: 10px 26px 22px 10px; box-shadow: 0 0 0 2px var(--line); }
.q-chests.week { background: linear-gradient(180deg, #fff7e0, #fff); }
.q-pts { display: flex; flex-direction: column; align-items: center; } .q-pts b { font-size: 30px; color: var(--blue-ink); line-height: 1; } .q-pts small { font-size: 11px; color: #5a7393; }
.q-track { position: relative; height: 40px; display: flex; align-items: center; }
.q-track .bar { width: 100%; height: 14px; }
.q-chest { position: absolute; top: 50%; transform: translate(-50%, -50%); border: 0; background: none; display: flex; flex-direction: column; align-items: center; }
.q-chest i { font-style: normal; font-size: 30px; filter: grayscale(.6); } .q-chest small { font-weight: 800; font-size: 11px; color: #5a7393; }
.q-chest.can i { filter: none; animation: wob 1s ease-in-out infinite; } .q-chest.got i { filter: none; opacity: .6; }
.q-chest em { position: absolute; top: -8px; right: -10px; background: #ff3b58; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 99px; }
@keyframes wob { 50% { transform: rotate(-8deg) scale(1.08); } }
.q-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow: auto; padding: 2px; }
.q-item { display: grid; grid-template-columns: 1fr 180px 110px; gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 8px 12px; box-shadow: 0 0 0 2px var(--line); }
.q-item.done { box-shadow: 0 0 0 2px var(--yellow); } .q-item.claimed { opacity: .6; }
.q-name { display: flex; flex-direction: column; gap: 3px; } .q-rw { display: flex; gap: 4px; flex-wrap: wrap; }
.q-prog { display: flex; align-items: center; gap: 8px; } .q-prog .bar { flex: 1; } .q-prog small { font-weight: 800; font-size: 12px; min-width: 38px; }

/* ranking */
.rk-me { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: linear-gradient(120deg, #2a1f5f, #5d3ba8); color: #fff; border-radius: 18px; padding: 12px 16px; margin-bottom: 10px; }
.rk-me > div { display: flex; flex-direction: column; gap: 4px; } .rk-me small { opacity: .85; } .rk-me .bar { background: #ffffff33; }
.ranking table.rank { width: 100%; }

/* profile */
.profile2 { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.pf-left { display: flex; flex-direction: column; align-items: center; gap: 4px; background: radial-gradient(ellipse at 50% 70%, #fff, #dbeeff 70%); border-radius: 20px; padding: 12px; }
.pf-stage { position: relative; display: flex; justify-content: center; } .pf-cv { width: 200px; height: 230px; position: relative; z-index: 1; margin-bottom: -18px; }
.pf-stage .stump { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); }
.pf-name { font-size: 22px; color: var(--blue-ink); margin-top: 14px; } .pf-tier { font-weight: 800; font-size: 13px; }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.st-card { background: #fff; border-radius: 14px; padding: 8px; text-align: center; display: flex; flex-direction: column; box-shadow: 0 0 0 2px var(--line); }
.st-card i { font-style: normal; font-size: 22px; } .st-card b { font-size: 18px; color: var(--blue-ink); } .st-card small { font-size: 11px; color: #5a7393; }
.pf-home { display: flex; flex-direction: column; gap: 12px; } .pf-bio { font-style: italic; color: #3d5577; }
.pf-fame { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.fame { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; background: linear-gradient(180deg, #fff, #eef8ff); border-radius: 16px; padding: 10px; box-shadow: 0 0 0 2px var(--line); }
.fame i { font-style: normal; font-size: 34px; } .fame span { font-size: 22px; font-weight: 800; color: var(--blue-ink); } .fame small { font-size: 11px; color: #5a7393; }
.fame.none { filter: grayscale(1); opacity: .6; }
.res-rank.up { color: #1b8c4f; } .res-rank.down { color: #c22a3e; }
@media (max-width: 760px), (max-height: 520px) {
  .gacha .g-main, .dress, .profile2 { grid-template-columns: 1fr; }
  .pull-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .q-item { grid-template-columns: 1fr 90px; } .q-item .q-prog { grid-column: 1 / -1; grid-row: 2; }
  .dr-cv { width: 180px; height: 210px; }
}

/* ============================================================ Lobby v3 (BnB-M style) */
#scr-lobby.lobby3 { display: none; background: #9fdcff url(../assets/ui/lobby_bg.svg) center / cover no-repeat; overflow: hidden; }
#scr-lobby.lobby3.active { display: grid; grid-template-columns: 78px minmax(0, 1fr) minmax(360px, 560px); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top top top" "rail stage right" "chat chat nav"; column-gap: 14px; row-gap: 10px;
  padding: 0 calc(14px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l)); }
.l3-top { grid-area: top; display: flex; align-items: center; gap: 10px; padding: 8px 0 4px; }
.l3-top .l3-gap { flex: 1; }
.l3-top .me-card { background: rgba(20, 50, 90, .55); color: #fff; box-shadow: none; padding: 3px 16px 3px 3px; border-radius: 16px; backdrop-filter: blur(3px); }
.l3-top .me-card canvas { border-radius: 12px; background: linear-gradient(#bdf0a5, #7ccd62); box-shadow: 0 0 0 2px #fff; }
.l3-top .me-card .sub { color: #cfe6ff; }
.l3-top .cur { background: rgba(10, 30, 60, .6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); min-width: 150px; }
.l3-top .top-icons .ic { background: rgba(255, 255, 255, .85); color: #1d4d86; box-shadow: 0 3px 0 rgba(0, 40, 90, .35); width: 42px; height: 42px; border-radius: 50%; }
.l3-bubble { position: absolute; left: calc(96px + var(--safe-l)); top: 66px; z-index: 3; display: flex; align-items: center; gap: 8px; max-width: min(520px, 46vw);
  background: rgba(255, 255, 255, .92); color: #1d4d86; border-radius: 18px 18px 18px 4px; padding: 5px 14px 5px 8px; font-size: 13px; box-shadow: 0 3px 0 rgba(0, 40, 90, .25); overflow: hidden; }
.l3-bubble > i { font-style: normal; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #2b8de4; display: grid; place-items: center; font-size: 14px; }
.l3-bubble #ticker { flex: 1; overflow: hidden; white-space: nowrap; }
.l3-bubble #ticker span { display: inline-block; padding-left: 100%; animation: ticker 24s linear infinite; }
.l3-bubble .say { display: none; } .l3-bubble.chat .say { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l3-bubble.chat #ticker { display: none; }
.l3-bubble .say b { color: #e0457b; }
.l3-rail { grid-area: rail; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.l3-rail button { position: relative; border: 0; border-radius: 16px; background: rgba(20, 50, 90, .55); color: #fff; font: 700 11px var(--font); padding: 8px 2px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; backdrop-filter: blur(3px); }
.l3-rail button i { font-style: normal; font-size: 24px; } .l3-rail .badge.on { position: absolute; top: -4px; right: -4px; }
.l3-stage { grid-area: stage; display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3vw, 40px); padding-bottom: 6vh; min-height: 0; }
.l3-me { position: relative; display: flex; flex-direction: column; align-items: center; }
.l3-me #sc-char { width: 150px; height: 170px; position: relative; z-index: 1; margin-bottom: -22px; }
.l3-me .stump, .l3-invite .stump { width: 150px; height: 46px; margin-top: 0; }
.l3-me .sc-rank { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.l3-me .sc-name { margin-top: 12px; color: #fff; text-shadow: 0 2px 0 #1d4d86, 0 0 6px rgba(0, 40, 90, .6); }
.l3-me .sc-name b { font-size: 18px; } .l3-me .sc-name small { color: #fff; }
.l3-skill { display: flex; gap: 8px; margin-top: 6px; }
.l3-skill button { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, #7cc7ff, #2b75d8); font-size: 18px; box-shadow: 0 3px 0 rgba(0, 40, 90, .4); }
.l3-invite { width: 170px; height: 210px; border: 0; border-radius: 22px; background: rgba(40, 60, 90, .28); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 800; backdrop-filter: blur(2px); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5); margin-bottom: 52px; }
.l3-invite b { font-size: 46px; line-height: 1; opacity: .9; } .l3-invite small { font-weight: 600; opacity: .85; }
.l3-invite .stump.ghost { opacity: .45; width: 120px; height: 34px; margin-top: 14px; }
.l3-invite:hover { background: rgba(40, 60, 90, .4); }
.l3-right { grid-area: right; display: flex; flex-direction: column; gap: 10px; min-height: 0; justify-content: center; }
.l3-events { display: flex; gap: 8px; justify-content: flex-end; }
.l3-events button { position: relative; width: 62px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font: 800 11px var(--font); text-shadow: 0 1px 0 #1d4d86, 0 0 4px rgba(0, 30, 70, .7); }
.l3-events i { font-style: normal; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: radial-gradient(circle at 35% 30%, #fff, #ffe9a8); border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0, 40, 90, .35); }
.l3-events .hot i { background: radial-gradient(circle at 35% 30%, #fff, #ffc1ec); }
.l3-events .timer i { background: radial-gradient(circle at 35% 30%, #fff, #bfe3ff); }
.l3-events em { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9px; background: #ff3b58; color: #fff; border-radius: 6px; padding: 0 4px; text-shadow: none; }
.l3-events .badge.on { position: absolute; top: -4px; right: 2px; }
.l3-modes { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(150px, 1fr) auto; gap: 12px; height: clamp(250px, 52vh, 400px); }
.l3-card { position: relative; border: 0; border-radius: 20px; overflow: hidden; color: #fff; font-family: var(--font); cursor: pointer; transition: transform .12s; }
.l3-card:hover { transform: translateY(-2px); } .l3-card:active { transform: translateY(2px); }
.l3-card.big { background: linear-gradient(180deg, #5ec2ff, #1f7fe0); box-shadow: 0 0 0 4px #fff, 0 7px 0 3px #155fb4, 0 12px 18px rgba(0, 40, 90, .3); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 10px; }
.l3-card.big.rk { background: linear-gradient(180deg, #ffb2e6, #b25cff); box-shadow: 0 0 0 4px #fff, 0 7px 0 3px #7e35c9, 0 12px 18px rgba(0, 40, 90, .3); }
.l3-card.big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.l3-card.big span { position: relative; font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; -webkit-text-stroke: 5px #1d4d86; paint-order: stroke fill; }
.l3-card.big.rk span { -webkit-text-stroke-color: #5a2296; }
.l3-card.big small { position: relative; font-weight: 800; font-size: 12px; background: rgba(0, 30, 70, .55); border-radius: 99px; padding: 1px 10px; }
.l3-card.sm { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(180deg, #fff, #e3f2ff); color: #1d4d86; box-shadow: 0 0 0 3px #fff, 0 5px 0 3px #8fbbe6; font-weight: 800; font-size: 16px; }
.l3-card.sm i { font-style: normal; font-size: 28px; } .l3-card.sm small { margin-left: auto; font-size: 11px; color: #2a9d55; }
.l3-card.sm.create { background: linear-gradient(180deg, #fffbe9, #ffe9a0); box-shadow: 0 0 0 3px #fff, 0 5px 0 3px #e0b23c; }
.l3-chat { grid-area: chat; align-self: end; display: flex; flex-direction: column; gap: 6px; width: min(520px, 100%); height: 140px; background: rgba(10, 30, 60, .45); border-radius: 16px; padding: 8px 10px; backdrop-filter: blur(3px); }
.l3-chat .chat-log { color: #fff; font-size: 13px; } .l3-chat .chat-log .ln b { color: #9fd6ff; } .l3-chat .chat-log .ln.sys { color: #ffd36b; }
.l3-chat .chat-form input { background: rgba(255, 255, 255, .9); padding: 5px 12px; }
.l3-nav { grid-area: nav; display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; }
.l3-nav button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font: 800 12px var(--font); text-shadow: 0 1px 0 #1d4d86, 0 0 4px rgba(0, 30, 70, .7); }
.l3-nav button i { font-style: normal; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: linear-gradient(180deg, #fff, #dcefff); border: 3px solid #fff; box-shadow: 0 4px 0 #6aa6e0; }
.l3-nav button:active i { transform: translateY(3px); box-shadow: 0 1px 0 #6aa6e0; }
.l3-nav .l3-play { margin-left: 8px; width: 150px; height: 84px; border-radius: 26px; background: linear-gradient(180deg, #ffe36b, #ff9a1f); border: 4px solid #fff; box-shadow: 0 6px 0 #c4640a, 0 10px 18px rgba(0, 0, 0, .25); justify-content: center; animation: pulse 1.8s ease-in-out infinite; }
.l3-nav .l3-play span { font-size: 26px; font-weight: 900; color: #fff; -webkit-text-stroke: 5px #c4500a; paint-order: stroke fill; text-shadow: none; }
@keyframes pulse { 50% { transform: scale(1.04); } }
.l3-drawer { position: fixed; inset: 0; z-index: 40; display: none; background: rgba(5, 30, 70, .4); padding: 70px calc(16px + var(--safe-r)) 16px calc(16px + var(--safe-l)); }
.l3-drawer.open { display: flex; justify-content: flex-end; }
.l3-drawer .rooms { width: min(640px, 100%); height: 100%; display: flex; flex-direction: column; animation: slidein .18s; }
.l3-drawer .popup-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.l3-drawer .room-list { flex: 1; overflow: auto; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.l3-drawer .x { margin-left: auto; border: 0; background: rgba(255, 255, 255, .25); color: #fff; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }

@media (max-width: 1000px) and (orientation: landscape) {
  #scr-lobby.lobby3.active { grid-template-columns: 64px minmax(0, 1fr) minmax(300px, 46vw); }
  .l3-invite { width: 120px; height: 150px; margin-bottom: 44px; } .l3-invite .stump.ghost { display: none; }
  .l3-me #sc-char { width: 110px; height: 126px; } .l3-me .stump { width: 110px; height: 34px; }
  .l3-modes { height: clamp(200px, 50vh, 320px); } .l3-events i { width: 40px; height: 40px; font-size: 20px; } .l3-events button { width: 50px; font-size: 10px; }
  .l3-nav button i { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; } .l3-nav button { font-size: 10px; } .l3-nav .l3-play { width: 110px; height: 64px; } .l3-nav .l3-play span { font-size: 20px; }
  .l3-chat { height: 96px; } .l3-top .cur { min-width: 100px; } .l3-top .top-icons .ic { width: 34px; height: 34px; font-size: 16px; }
  .l3-stage { padding-bottom: 2vh; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .l3-top { padding: 4px 0 0; } .l3-top .me-card .sub { display: none; } .l3-bubble { top: 52px; }
  .l3-chat { height: 78px; } .l3-chat .chat-log { font-size: 12px; }
  .l3-modes { grid-template-rows: minmax(110px, 1fr) auto; } .l3-card.sm { padding: 6px 10px; font-size: 13px; } .l3-card.sm i { font-size: 20px; }
}
@media (orientation: portrait), (max-width: 700px) {
  #scr-lobby.lobby3.active { display: flex; flex-direction: column; overflow: auto; gap: 10px; padding: 0 12px calc(12px + var(--safe-b)); }
  .l3-top { flex-wrap: wrap; gap: 6px; } .l3-top .l3-gap { display: none; } .l3-top .me-card { flex: 1 1 100%; }
  .l3-top .wallet { flex: 1; } .l3-top .cur { min-width: 0; flex: 1; font-size: 13px; } .l3-top .top-icons .ic { width: 34px; height: 34px; font-size: 15px; }
  .l3-bubble { position: static; max-width: none; }
  .l3-rail { flex-direction: row; justify-content: center; order: 5; } .l3-rail button { flex: 1; }
  .l3-stage { padding: 4px 0 0; flex: none; } .l3-me #sc-char { width: 120px; height: 136px; } .l3-me .stump { width: 120px; height: 36px; }
  .l3-invite { width: 110px; height: 150px; margin-bottom: 70px; } .l3-invite .stump.ghost { display: none; }
  .l3-right { flex: none; } .l3-events { justify-content: space-between; } .l3-modes { height: 300px; }
  .l3-nav { order: 6; justify-content: space-between; flex-wrap: wrap; } .l3-nav .l3-play { flex: 1 1 100%; margin: 6px 0 0; height: 64px; width: auto; order: -1; }
  .l3-chat { order: 7; width: 100%; height: 170px; flex: none; }
}
.l3-card.big img { transform: scale(1.14); }
.l3-events span, .l3-nav button > span:not(.l3-play span) { background: rgba(10, 40, 80, .6); border-radius: 99px; padding: 0 7px; text-shadow: none; white-space: nowrap; }
.l3-nav .l3-play span { background: none; padding: 0; }
.l3-chat { height: 124px; }
.l3-modes, .l3-modes[class] { grid-template-rows: minmax(0, 1fr) auto !important; }
.l3-card.big { min-height: 0; }
@media (max-height: 560px) and (orientation: landscape) {
  .l3-right { justify-content: flex-start; gap: 6px; } .l3-modes { height: auto; flex: 1; min-height: 0; margin-bottom: 4px; }
  .l3-events { margin-top: -4px; } .l3-events i { width: 34px; height: 34px; font-size: 17px; border-width: 2px; } .l3-events button { width: 44px; font-size: 9px; }
  .l3-top .top-icons [data-nav="profile"], .l3-top .top-icons [data-nav="howto"] { display: none; }
  .l3-me .sc-name small, .l3-invite small { display: none; } .l3-me #sc-char { width: 90px; height: 100px; margin-bottom: -16px; } .l3-me .stump { width: 90px; height: 28px; }
  .l3-skill button { width: 32px; height: 32px; font-size: 14px; border-width: 2px; } .l3-me .sc-name b { font-size: 14px; }
  .l3-invite { width: 96px; height: 120px; margin-bottom: 40px; } .l3-invite b { font-size: 30px; }
  .l3-rail button { padding: 4px 2px; } .l3-rail button i { font-size: 18px; } .l3-rail { gap: 6px; }
  .l3-me .sc-rank { top: -18px; transform: translateX(-50%) scale(.85); }
  .l3-stage { padding-bottom: 0; align-items: center; }
  .l3-bubble { max-width: 38vw; }
}
@media (orientation: portrait), (max-width: 700px) {
  .l3-modes { height: 280px; } .l3-card.sm { font-size: 14px; } .l3-card.sm small { display: none; }
  .l3-top .top-icons { display: flex; }
}
@media (max-height: 560px) and (orientation: landscape) { .l3-modes { flex: 1 1 0; } }
.l3-modes { align-content: stretch; }
.l3-modes > .sm { align-self: start; }
.l3-nav .l3-play span { white-space: nowrap; }
@media (max-height: 560px) and (orientation: landscape) {
  .l3-stage { padding-top: 44px; } .l3-me .sc-rank { display: none; }
  .l3-nav .l3-play { width: 104px; height: 58px; } .l3-nav .l3-play span { font-size: 18px; -webkit-text-stroke-width: 4px; }
}

/* ---- lobby v3.1: themed SVG icons, no pedestal, de-duplicated menus, tighter vertical layout */
[data-ic] { display: inline-grid; place-items: center; font-style: normal; }
[data-ic] svg, [data-ic] img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 40, 90, .25)); }
#scr-lobby.lobby3.active { grid-template-columns: minmax(0, 1fr) minmax(360px, 560px); grid-template-areas: "top top" "stage right" "chat nav"; row-gap: 6px; }
.l3-top .cur i[data-ic] { width: 26px; height: 26px; }
.l3-top .top-icons .ic { padding: 6px; display: grid; place-items: center; }
.l3-top .top-icons .ic i[data-ic] { width: 100%; height: 100%; }
.l3-bubble { left: calc(12px + var(--safe-l)); top: 64px; }
.l3-bubble > i[data-ic] { background: none; width: 28px; height: 28px; }
.l3-stage { align-items: center; padding: 64px 0 0; justify-content: center; }
.l3-me { cursor: pointer; }
.l3-char { position: relative; width: 132px; height: 150px; }
.l3-me #sc-char { width: 132px; height: 150px; margin: 0; position: relative; z-index: 1; transform-origin: 50% 96%; animation: l3idle 3.2s ease-in-out infinite; image-rendering: auto; }
.l3-shadow { position: absolute; left: 50%; bottom: 0; width: 92px; height: 20px; margin-left: -46px; border-radius: 50%; background: radial-gradient(ellipse, rgba(30, 50, 40, .42) 0, rgba(30, 50, 40, .22) 45%, transparent 72%); animation: l3shadow 3.2s ease-in-out infinite; }
@keyframes l3idle { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(0) scale(1.03, .97); } 32% { transform: translateY(-12px) scale(.97, 1.04); } 44% { transform: translateY(0) scale(1.04, .96); } 54% { transform: translateY(0) scale(1, 1); } 75% { transform: translateY(-2px) scale(.995, 1.01); } }
@keyframes l3shadow { 0%, 20%, 44%, 100% { transform: scale(1); opacity: 1; } 32% { transform: scale(.75); opacity: .6; } }
.l3-me .sc-rank { top: -30px; }
.l3-me .sc-name { margin-top: 4px; }
.l3-me .sc-name .stars { color: #ffd23c; -webkit-text-stroke: 1px #b07800; letter-spacing: 1px; }
.l3-invite { width: 132px; height: 170px; margin-bottom: 26px; gap: 4px; }
.l3-invite i[data-ic] { width: 52px; height: 52px; }
.l3-invite .l3-shadow.ghost { position: static; margin: 10px 0 0; animation: none; opacity: .6; }
.l3-right { justify-content: flex-start; padding-top: 2px; }
.l3-events button { width: 66px; }
.l3-events i[data-ic] { padding: 7px; background: radial-gradient(circle at 35% 30%, #fff, #dff1ff); }
.l3-events .hot i[data-ic] { background: radial-gradient(circle at 35% 30%, #fff, #ffd6f2); }
.l3-events small { font-size: 10px; background: #ffffffd9; color: #1d4d86; border-radius: 99px; padding: 0 6px; text-shadow: none; margin-top: 1px; }
.l3-modes { height: clamp(250px, 50vh, 380px); }
.l3-card.sm i[data-ic] { width: 34px; height: 34px; }
.l3-nav button i[data-ic] { padding: 6px; }
.l3-chat { width: min(480px, 100%); height: 112px; }
.slot-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pick-big { border: 0; border-radius: 18px; background: linear-gradient(#fff, #e6f4ff); box-shadow: 0 0 0 2px #bfe0ff, 0 5px 0 2px #8fbbe6; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #1d4d86; font-family: var(--font); }
.pick-big i { width: 64px; height: 64px; display: grid; } .pick-big b { font-size: 17px; } .pick-big small { color: #5a7393; }
.invite-dlg h4 { margin: 12px 0 6px; color: #1d4d86; }
.iv-list { display: flex; flex-direction: column; gap: 6px; max-height: 32vh; overflow: auto; }
.iv-row { display: flex; align-items: center; gap: 10px; background: #f3f9ff; border-radius: 12px; padding: 4px 10px 4px 4px; }
.iv-cv { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(#bdf0a5, #7ccd62); flex: none; }
.iv-nm { flex: 1; display: flex; flex-direction: column; } .iv-nm small { color: #5a7393; font-size: 12px; }
.iv-code { display: flex; align-items: center; gap: 8px; background: #fff6d6; border-radius: 12px; padding: 6px 12px; font-weight: 800; color: #7a4a00; }
.iv-code button { margin-left: auto; }
.news-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.news-item { background: #f3f9ff; border-radius: 12px; padding: 8px 12px; } .news-item p { margin: 4px 0 0; font-size: 14px; } .news-item.event { background: #fff4fb; } .news-item.maintenance { background: #fff6e0; }
.set-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 1000px) and (orientation: landscape) {
  #scr-lobby.lobby3.active { grid-template-columns: minmax(0, 1fr) minmax(300px, 48vw); }
  .l3-invite { width: 110px; height: 140px; } .l3-events i[data-ic] { padding: 5px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .l3-stage { padding-top: 46px; } .l3-char, .l3-me #sc-char { width: 96px; height: 110px; } .l3-shadow { width: 70px; margin-left: -35px; height: 16px; }
  .l3-invite { width: 92px; height: 112px; margin-bottom: 14px; } .l3-invite i[data-ic] { width: 36px; height: 36px; } .l3-invite .l3-shadow.ghost { display: none; }
  .l3-events small { display: none; } .l3-bubble { top: 50px; }
}
@media (orientation: portrait), (max-width: 700px) {
  .l3-stage { padding-top: 26px; } .l3-chat { height: 160px; }
  .l3-invite { width: 110px; height: 140px; margin-bottom: 36px; }
}
[data-ic] { display: block; position: relative; }
.l3-events i[data-ic], .l3-nav button i[data-ic], .l3-top .top-icons .ic i[data-ic] { display: grid; }
.l3-events i[data-ic] > svg, .l3-events i[data-ic] > img { position: absolute; inset: 6px; width: auto; height: auto; }
.l3-nav button i[data-ic] > svg, .l3-nav button i[data-ic] > img { position: absolute; inset: 5px; width: auto; height: auto; }
.l3-top .top-icons .ic { padding: 4px; } .l3-top .top-icons .ic i[data-ic] { width: 100%; height: 100%; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 10px; }
.skin-card { background: #f6faff; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 0 0 2px #d6e8fb; }
.skin-card.custom { box-shadow: 0 0 0 2px #ffcf3a; background: #fffbea; }
.skin-card.bg, .skin-card.card { grid-column: span 2; }
.skin-prev { height: 110px; border-radius: 10px; display: grid; place-items: center; background: repeating-conic-gradient(#e9f1fa 0 25%, #fff 0 50%) 0 0 / 16px 16px; overflow: hidden; }
.skin-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.skin-card.icon .skin-prev img { width: 72px; height: 72px; }
.skin-card small { color: #5a7393; } .skin-card .row { display: flex; gap: 4px; flex-wrap: wrap; }
.shop-card { position: relative; }
.shop-tag { position: absolute; top: 6px; left: 6px; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: #ff3b58; border-radius: 6px; padding: 1px 6px; z-index: 1; }
.shop-tag.new { background: #2fbf71; } .shop-tag.sale { background: #ff8a1f; } .shop-tag.limited { background: #b45cff; }
.g-miles { margin-top: 14px; background: #f3f9ff; border-radius: 14px; padding: 10px 16px 30px; }
.g-miles-head { display: flex; justify-content: space-between; align-items: baseline; color: #1d4d86; }
.g-miles-track { position: relative; height: 44px; margin: 14px 18px 0; }
.g-miles-track .bar { position: absolute; left: 0; right: 0; top: 16px; height: 10px; background: #d6e8fb; border-radius: 99px; overflow: hidden; }
.g-miles-track .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd23c, #ff8a1f); }
.g-mile { position: absolute; top: 0; transform: translateX(-50%); border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; padding: 0; }
.g-mile .pic { width: 42px; height: 42px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px #bfe0ff; display: grid; place-items: center; filter: grayscale(.6); }
.g-mile.can .pic { filter: none; box-shadow: 0 0 0 3px #ffd23c, 0 0 12px #ffd23c; animation: pulse 1.2s infinite; }
.g-mile.got .pic { filter: none; opacity: .55; }
.g-mile small { font-weight: 800; color: #1d4d86; font-size: 11px; }
.ico-svg svg, .ico-svg img { width: 100%; height: 100%; display: block; }
.l3-events i[data-ic] > svg, .l3-events i[data-ic] > img { left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.l3-nav button i[data-ic] > svg, .l3-nav button i[data-ic] > img { left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.l3-events i[data-ic], .l3-nav button i[data-ic] { position: relative; padding: 0; }
.l3-char, .l3-me #sc-char { width: 112px; height: 128px; }
.l3-shadow { width: 80px; margin-left: -40px; height: 18px; }
@media (max-height: 560px) and (orientation: landscape) { .l3-char, .l3-me #sc-char { width: 90px; height: 104px; } }
/* ---- lobby v3.2: char switcher, tighter vertical rhythm */
.l3-charrow { display: flex; align-items: center; gap: 6px; }
.l3-char { cursor: pointer; }
.l3-arrow { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, #7cc7ff, #2b75d8); color: #fff; font: 900 22px/1 var(--font); box-shadow: 0 3px 0 rgba(0, 40, 90, .4); padding: 0 0 3px; }
.l3-arrow:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 40, 90, .4); }
.l3-change { margin-top: 6px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .9); color: #1d4d86; font: 800 12px var(--font); padding: 4px 12px; box-shadow: 0 3px 0 rgba(0, 40, 90, .25); }
.mini-chars { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; }
.mini-chars .mc { flex: none; width: 74px; border: 0; border-radius: 14px; background: #f3f9ff; box-shadow: 0 0 0 2px #cfe4fa; padding: 4px 2px 3px; display: flex; flex-direction: column; align-items: center; position: relative; scroll-snap-align: center; font-family: var(--font); }
.mini-chars .mc canvas { width: 64px; height: 64px; }
.mini-chars .mc small { font-size: 11px; font-weight: 800; color: #1d4d86; }
.mini-chars .mc.sel { box-shadow: 0 0 0 3px #ffcf3a, 0 4px 0 2px #e0a800; background: #fffbe9; }
.mini-chars .mc.locked canvas { filter: grayscale(1) brightness(1.1) opacity(.6); } .mini-chars .mc em { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 13px; }
.slot.empty.wait { cursor: default; opacity: .8; } .slot.empty.wait .spin { display: inline-block; animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
body.room-ranked #btn-start { font-size: 18px; }
/* bottom rows sit right under the main content instead of being pinned to the screen edge */
#scr-lobby.lobby3.active { grid-template-rows: auto auto auto; align-content: space-evenly; row-gap: 10px; padding-bottom: calc(14px + var(--safe-b)); }
.l3-stage { padding-top: 54px; align-items: flex-end; }
.l3-modes { height: clamp(240px, 44vh, 360px); }
.l3-chat { align-self: start; height: 118px; }
.l3-nav { align-self: start; align-items: center; }
@media (max-height: 560px) and (orientation: landscape) {
  #scr-lobby.lobby3.active { align-content: space-between; } .l3-arrow { width: 26px; height: 26px; font-size: 16px; } .l3-change { display: none; }
  .l3-modes { height: clamp(140px, 40vh, 220px); }
}
@media (orientation: portrait), (max-width: 700px) { .l3-stage { padding-top: 22px; } }
#scr-lobby.lobby3.active { grid-template-rows: auto minmax(0, .35fr) auto auto minmax(0, .65fr); grid-template-areas: "top top" ". ." "stage right" "chat nav" ". ."; align-content: stretch; row-gap: 12px; }
@media (max-height: 560px) and (orientation: landscape) { #scr-lobby.lobby3.active { grid-template-rows: auto minmax(0, .2fr) auto auto minmax(0, .8fr); row-gap: 6px; } }
@media (orientation: portrait), (max-width: 700px) { #scr-lobby.lobby3.active { display: flex; } }

/* ---- v3.3: room chat under the slots, 10-player rooms, create-room controls, avatar, top-up, ranked queue */
.slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.slot { aspect-ratio: 3 / 3.4; }
.slots-panel { display: flex; flex-direction: column; min-height: 0; }
.slots-panel .popup-body.slots-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.room-chat-box { flex: 1 1 150px; min-height: 150px; display: flex; flex-direction: column; background: #f3f9ff; border-radius: 16px; box-shadow: inset 0 0 0 2px #d6e8fb; }
.room-chat-box .chat-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px; min-height: 0; }
.map-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.map-nav .map-name { margin: 0; min-width: 120px; text-align: center; }
.mc-arrow { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, #7cc7ff, #2b75d8); color: #fff; font: 900 26px/1 var(--font); padding: 0 0 4px; box-shadow: 0 3px 0 rgba(0, 40, 90, .35); cursor: pointer; }
.mc-arrow.sm { width: 30px; height: 30px; font-size: 18px; border-width: 2px; }
.mc-arrow:active { transform: translateY(2px); }
.map-car { display: flex; align-items: center; gap: 10px; }
.map-car .mc-view { flex: 1; min-width: 0; position: relative; }
.map-car .map-thumb { width: 100%; aspect-ratio: 15 / 9; border-radius: 14px; touch-action: pan-y; cursor: grab; }
.map-car .mc-cap { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; justify-content: space-between; align-items: center; background: rgba(10, 30, 60, .6); color: #fff; border-radius: 10px; padding: 4px 10px; }
.cr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.create-room small { display: block; font-weight: 800; color: #1d4d86; margin-bottom: 4px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-b { flex: 1 1 auto; min-width: 48px; border: 0; border-radius: 12px; padding: 9px 10px; background: #eef6ff; color: #1d4d86; font: 800 14px var(--font); box-shadow: 0 0 0 2px #cfe4fa, 0 3px 0 2px #a9cbee; cursor: pointer; }
.seg-b.on { background: linear-gradient(#ffe36b, #ffc21a); color: #6a3b00; box-shadow: 0 0 0 2px #ffcf3a, 0 3px 0 2px #d79a00; }
.seg.sm .seg-b { padding: 4px 8px; font-size: 12px; min-width: 30px; }
.host-opts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
@media (max-width: 700px) { .cr-row { grid-template-columns: 1fr; } .slots { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } }

.me-card .av-wrap { position: relative; flex: none; }
.me-card canvas.avatar { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(#bdf0a5, #7ccd62); box-shadow: 0 0 0 2px #fff; cursor: pointer; display: block; }
.me-card .av-edit { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: #ffd23c; color: #6a3b00; font: 900 11px/18px var(--font); text-align: center; font-style: normal; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; max-height: 52vh; overflow: auto; padding: 4px; }
.av-grid .av { border: 0; border-radius: 18px; background: linear-gradient(#bdf0a5, #7ccd62); aspect-ratio: 1; padding: 6px; box-shadow: 0 0 0 2px #d6e8fb; cursor: pointer; }
.av-grid .av canvas { width: 100%; height: 100%; }
.av-grid .av.sel { box-shadow: 0 0 0 4px #ffcf3a; } .av-grid .av.locked { filter: grayscale(1); opacity: .55; }

.topup { min-width: min(720px, 86vw); }
.tp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #5a7393; }
.pp-logo { font: 900 22px var(--font); color: #0b3f86; letter-spacing: -.5px; } .pp-logo b { color: #1f8ff2; } .pp-logo.light { color: #fff; } .pp-logo.light b { color: #9fdcff; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.tp-card { position: relative; border: 0; border-radius: 18px; padding: 14px 10px 10px; background: linear-gradient(180deg, #fff, #f3e8ff); box-shadow: 0 0 0 2px #e2cffb, 0 5px 0 2px #b78ce8; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-family: var(--font); color: #3b1d6b; }
.tp-card:hover { transform: translateY(-2px); }
.tp-card .ico-svg { width: 46px; height: 46px; } .tp-card b { font-size: 22px; } .tp-card small { font-size: 12px; } .tp-card .bonus { color: #e0457b; font-weight: 800; }
.tp-card .price { margin-top: 6px; background: linear-gradient(#ffe36b, #ffc21a); color: #6a3b00; border-radius: 99px; padding: 3px 14px; font-weight: 900; }
.tp-card em { position: absolute; top: -8px; right: 8px; background: #ff3b58; color: #fff; font: 900 11px var(--font); font-style: normal; border-radius: 8px; padding: 2px 8px; }
.tp-orders { display: flex; flex-direction: column; gap: 6px; } .tp-order { display: flex; gap: 10px; align-items: center; background: #f3f9ff; border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.tp-order .st { margin-left: auto; font-weight: 800; } .tp-order.paid .st { color: #2a9d55; } .tp-order.failed .st { color: #d8343f; } .tp-order.review .st { color: #c27800; }
.tp-pay { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.tp-qrbox { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 2px #cfe4fa, 0 6px 16px rgba(0, 40, 90, .15); text-align: center; width: 270px; }
.pp-band { background: #113566; padding: 8px 10px; display: flex; flex-direction: column; } .pp-band small { color: #9fdcff; font-size: 10px; letter-spacing: 2px; }
.tp-qr { width: 250px; height: 250px; image-rendering: pixelated; margin: 8px auto 0; display: block; }
.tp-to { padding: 4px 0 10px; font-weight: 800; color: #113566; }
.tp-info { display: flex; flex-direction: column; gap: 10px; }
.tp-amt b { display: block; font-size: 40px; color: #113566; line-height: 1.1; } .tp-amt small { color: #5a7393; }
.tp-get { display: flex; align-items: center; gap: 6px; font-weight: 800; color: #7a2bbf; } .tp-get .ico-svg { width: 26px; height: 26px; }
.tp-meta { color: #5a7393; font-size: 13px; } .tp-left { color: #d8343f; }
.tp-steps { margin: 0; padding-left: 20px; color: #1d4d86; font-size: 14px; line-height: 1.7; }
.tp-status.review { background: #fff6d6; color: #7a4a00; border-radius: 12px; padding: 8px 12px; font-weight: 700; }
.tp-info .row { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .tp-pay { grid-template-columns: 1fr; justify-items: center; } }

.rq { position: fixed; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); z-index: 65; display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, #3b2c8f, #241a63); color: #fff; border-radius: 20px; padding: 10px 14px 10px 18px; box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(0, 0, 40, .45); animation: slideup .25s; max-width: calc(100vw - 24px); }
@keyframes slideup { from { transform: translate(-50%, 30px); opacity: 0; } }
.rq-txt { display: flex; flex-direction: column; } .rq-txt b { font-size: 16px; } .rq-txt small { color: #c9c2ff; font-size: 12px; }
.rq-time { font-variant-numeric: tabular-nums; color: #ffd23c; margin-left: 6px; }
.rq-spin { position: relative; width: 34px; height: 34px; } .rq-spin i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: #ffd23c; animation: spin 1.1s linear infinite; }
.rq-spin i:nth-child(2) { inset: 5px; border-top-color: #7cc7ff; animation-duration: .8s; animation-direction: reverse; } .rq-spin i:nth-child(3) { inset: 10px; border-top-color: #ff7aa8; animation-duration: .6s; }
/* ---- v3.3 balance: two matching glass panels (my team | game modes) + one bottom row */
#scr-lobby.lobby3.active { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: 18px; }
.l3-stage { position: relative; align-self: stretch; padding: 46px 18px 16px; background: rgba(255, 255, 255, .28); border-radius: 26px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 10px 26px rgba(0, 40, 90, .12); backdrop-filter: blur(2px); justify-content: space-evenly; align-items: center; gap: 12px; }
.l3-stage-title { position: absolute; top: 10px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 900; text-shadow: 0 2px 0 #1d4d86; }
.l3-stage-title small { font-size: 12px; background: rgba(10, 40, 80, .45); border-radius: 99px; padding: 1px 10px; text-shadow: none; font-weight: 700; }
.l3-party { display: flex; flex-direction: column; gap: 12px; }
.l3-party .l3-invite { width: 150px; height: auto; min-height: 92px; margin: 0; flex-direction: row; gap: 10px; padding: 10px 14px; justify-content: flex-start; text-align: left; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; }
.l3-party .l3-invite i[data-ic] { grid-row: span 2; width: 44px; height: 44px; }
.l3-party .l3-invite span { font-size: 15px; align-self: end; } .l3-party .l3-invite small { align-self: start; font-size: 11px; }
.l3-right { align-self: stretch; justify-content: space-between; }
.l3-chat { width: 100%; }
.l3-me .sc-rank { top: -26px; }
.l3-char, .l3-me #sc-char { width: 140px; height: 160px; }
.l3-shadow { width: 100px; margin-left: -50px; height: 20px; }
@media (max-height: 560px) and (orientation: landscape) {
  .l3-stage { padding: 30px 10px 8px; } .l3-stage-title { top: 4px; font-size: 12px; } .l3-party .l3-invite { width: 120px; min-height: 60px; padding: 6px 8px; grid-template-columns: 30px 1fr; } .l3-party .l3-invite i[data-ic] { width: 30px; height: 30px; } .l3-party .l3-invite small { display: none; }
  .l3-char, .l3-me #sc-char { width: 90px; height: 104px; }
}
@media (orientation: portrait), (max-width: 700px) {
  .l3-stage { padding: 40px 10px 12px; } .l3-party { flex-direction: column; } .l3-party .l3-invite { width: 130px; }
  .l3-char, .l3-me #sc-char { width: 110px; height: 126px; }
}
.l3-stage-title { color: #1d4d86; text-shadow: 0 1px 0 #fff; }
.l3-party .l3-invite { background: rgba(255, 255, 255, .88); color: #1d4d86; box-shadow: 0 0 0 2px #fff, 0 5px 0 2px rgba(80, 140, 200, .45); backdrop-filter: none; }
.l3-party .l3-invite small { color: #5a7393; opacity: 1; } .l3-party .l3-invite:hover { background: #fff; }
.l3-party .l3-invite:first-child { background: linear-gradient(#fffbe9, #ffefb0); box-shadow: 0 0 0 2px #fff, 0 5px 0 2px #e0b23c; }
.map-car .map-thumb { max-height: 230px; object-fit: contain; background: #2c5a2a; } .create-room { gap: 12px; }
.emo-btn { flex: none; width: 34px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 0 0 2px #cfe4fa; font-size: 18px; cursor: pointer; }
.emo-pop { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; width: min(340px, 92vw); display: none; flex-wrap: wrap; gap: 2px; padding: 8px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 2px #cfe4fa, 0 10px 24px rgba(0, 40, 90, .25); }
.emo-pop.open { display: flex; }
.emo-pop > button { width: 34px; height: 34px; border: 0; background: none; border-radius: 8px; font-size: 20px; cursor: pointer; } .emo-pop > button:hover { background: #eef6ff; }
.emo-quick { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; border-top: 1px solid #e3eef9; padding-top: 6px; margin-top: 4px; }
.emo-quick button { border: 0; border-radius: 99px; background: #eef6ff; color: #1d4d86; font: 700 12px var(--font); padding: 4px 10px; cursor: pointer; }
.tier-shield { display: inline-block; vertical-align: middle; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 30, 70, .3)); }
.tier-ladder { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; padding: 18px 10px 10px; margin-bottom: 12px; background: linear-gradient(180deg, #2a6f9e, #1a4f7a); border-radius: 16px; overflow-x: auto; }
.tl-line { position: absolute; left: 20px; right: 20px; bottom: 44px; height: 2px; background: rgba(255, 255, 255, .5); }
.tl-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; min-width: 62px; }
.tl-step b { font-size: 12px; text-shadow: 0 1px 2px #000; } .tl-step small { font-size: 10px; color: #cfe6ff; }
.tl-step.cur .tier-shield { filter: drop-shadow(0 0 10px #ffd23c); animation: pulse 1.4s infinite; } .tl-step.cur b { color: #ffd23c; }
/* lobby: menu icons moved into the event row */
.l3-events { flex-wrap: wrap; } .l3-events button { width: 60px; }
.l3-nav { justify-content: flex-end; }
@media (max-width: 1000px) { .l3-events button { width: 50px; } }

/* ---------------- result screen v2 */
.res2 { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 0 calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l)); }
.res2.out { opacity: 0; transition: opacity .3s; }
.res2-bg { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(6px) brightness(.85) saturate(1.1); transform: scale(1.05); }
.res2::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 60, .15), rgba(10, 30, 60, 0) 40%, rgba(10, 30, 60, .35)); pointer-events: none; }
.res2 > *:not(.res2-bg) { position: relative; z-index: 1; }
.res2-confetti { position: absolute !important; inset: 0; pointer-events: none; z-index: 2 !important; }
.res2-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: confetti 3.2s linear infinite; }
@keyframes confetti { to { transform: translateY(110vh) rotate(720deg); } }
.res2-head { display: flex; align-items: stretch; margin-top: 0; animation: dropin .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes dropin { from { transform: translateY(-80px); opacity: 0; } }
.res2-head .sc { display: grid; place-items: center; min-width: 130px; font-size: 44px; color: #fff; -webkit-text-stroke: 5px rgba(0, 0, 0, .35); paint-order: stroke fill; }
.res2-head .sc.l { background: linear-gradient(180deg, #ff5d5d, #d8343f); border-radius: 0 0 0 24px; clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%); padding-left: 20px; }
.res2-head .sc.r { background: linear-gradient(180deg, #4fa3ff, #1f6fe0); border-radius: 0 0 24px 0; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); padding-right: 20px; }
.ribbon2 { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 30px 10px; margin: 0 -6px; z-index: 2; font: 900 36px var(--font); color: #fff; text-shadow: 0 3px 0 #8a1a1a; background: linear-gradient(180deg, #ff6b5b, #c8262c); border: 4px solid #ffd23c; border-top: 0; border-radius: 0 0 22px 22px; box-shadow: 0 6px 0 #8a1a1a, 0 10px 20px rgba(0, 0, 0, .3); }
.res2.lose .ribbon2 { background: linear-gradient(180deg, #8fa0b4, #56657a); text-shadow: 0 3px 0 #2a3444; box-shadow: 0 6px 0 #2a3444; border-color: #c9d4e0; }
.res2.draw .ribbon2 { background: linear-gradient(180deg, #4fb4ff, #1f86ef); text-shadow: 0 3px 0 #0b3f86; box-shadow: 0 6px 0 #0b3f86; }
.ribbon2 .leaf { font-size: 26px; transform: scaleX(-1); } .ribbon2 .leaf.r { transform: none; }
.res2-card { width: min(940px, 100%); margin-top: 12px; background: rgba(255, 255, 255, .95); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(0, 30, 70, .3); animation: fadeup .4s .15s both; }
@keyframes fadeup { from { transform: translateY(20px); opacity: 0; } }
.rt { display: grid; grid-template-columns: 1fr 1fr; }
.rt-side { display: flex; flex-direction: column; }
.rt-hd, .rt-row { display: grid; grid-template-columns: 1fr 44px 44px 44px; align-items: center; padding: 0 10px; }
.rt-hd { background: linear-gradient(#ff7b7b, #e04848); color: #fff; font: 800 12px var(--font); height: 28px; } .rt-side.foe .rt-hd { background: linear-gradient(#5aa8ff, #2a74e0); }
.rt-hd i, .rt-row i { font-style: normal; text-align: center; font-weight: 900; }
.rt-row { min-height: 46px; border-bottom: 1px solid #edf2f8; } .rt-row i { color: #e0a800; font-size: 18px; } .rt-side.foe .rt-row i { color: #5a7393; }
.rt-row.me { background: #fffbe0; }
.rt-who { display: flex; align-items: center; gap: 8px; min-width: 0; } .rt-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c22a3e; } .rt-side.foe .rt-who b { color: #1f5fbf; }
.rt-av { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(#bdf0a5, #7ccd62); flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #cfe4fa; }
.mvp { font-style: normal; font: 900 10px var(--font); color: #7a4a00; background: linear-gradient(#fff1a0, #ffc21a); border-radius: 6px; padding: 1px 5px; box-shadow: 0 1px 0 #b07800; }
.res2-rw { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 12px; background: #cfe6fb; flex-wrap: wrap; }
.tag-rw { font: 900 12px var(--font); color: #fff; background: #7a4ad8; padding: 2px 12px; border-radius: 6px; margin-right: auto; }
.res2-rw .pill { font: 800 13px var(--font); background: #fff; border-radius: 99px; padding: 3px 12px; color: #1d4d86; display: inline-flex; align-items: center; gap: 4px; }
.res2-rw .pill.exp { color: #1b8c4f; } .res2-rw .pill.coin { color: #b07800; } .res2-rw .pill.rank.up { color: #1b8c4f; } .res2-rw .pill.rank.down { color: #c22a3e; }
.res-stage2 { flex: 1; width: 100%; display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 2vw, 30px); padding-bottom: 8px; min-height: 160px; }
.rc { position: relative; display: flex; flex-direction: column; align-items: center; animation: rcin .5s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes rcin { from { transform: translateY(40px) scale(.6); opacity: 0; } }
.rc-name { font: 800 13px var(--font); color: #fff; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, .6); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.rc-me { position: absolute; top: 18px; right: -14px; z-index: 3; font: 900 11px var(--font); color: #1d4d86; background: #fff; border-radius: 10px; padding: 1px 7px; box-shadow: 0 0 0 2px #2b8de4; }
.rc-body { position: relative; width: clamp(70px, 9vw, 110px); height: clamp(90px, 12vw, 140px); }
.rc-body canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; transform-origin: 50% 95%; }
.rc.w .rc-body canvas { animation: rcjump 1.1s ease-in-out infinite; } .rc.l .rc-body canvas { animation: rcsob 1.6s ease-in-out infinite; filter: saturate(.75); } .rc.d .rc-body canvas { animation: rcsway 2.4s ease-in-out infinite; }
.rc:nth-child(2n) .rc-body canvas { animation-delay: .3s; }
@keyframes rcjump { 0%, 100% { transform: translateY(0) scale(1); } 15% { transform: translateY(0) scale(1.06, .94); } 40% { transform: translateY(-18px) scale(.96, 1.05); } 60% { transform: translateY(0) scale(1.05, .95); } 75% { transform: scale(1); } }
@keyframes rcsob { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(2px) rotate(-2deg); } 75% { transform: translateY(2px) rotate(2deg); } }
@keyframes rcsway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.rc-shadow { position: absolute; left: 50%; bottom: -6px; width: 80%; height: 18%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 70%); }
.rc.w .rc-shadow { animation: rcshadow 1.1s ease-in-out infinite; } .rc:nth-child(2n).w .rc-shadow { animation-delay: .3s; }
@keyframes rcshadow { 40% { transform: translateX(-50%) scale(.7); opacity: .6; } }
.rc .mvp { position: absolute; left: -6px; bottom: 10px; z-index: 2; }
.rc-stamp { position: absolute; top: 34%; left: -34px; z-index: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 900 15px var(--font); color: #fff; transform: rotate(-12deg); animation: stamp .45s .6s cubic-bezier(.3, 1.8, .5, 1) both; }
.rc-stamp.w { background: radial-gradient(circle at 35% 30%, #ffe680, #f0a91c); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e0a020; text-shadow: 0 1px 0 #8a5a00; }
.rc-stamp.l { background: radial-gradient(circle at 35% 30%, #d6a27a, #8a5a30); box-shadow: 0 0 0 3px #f3d6b8, 0 0 0 5px #6b3b17; }
.rc-stamp.d { background: radial-gradient(circle at 35% 30%, #9fd2ff, #2b75d8); box-shadow: 0 0 0 3px #fff; }
.rc:not(.me) .rc-stamp { display: none; }
@keyframes stamp { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } }
.res2 .res-actions .btn.big { min-width: 220px; font-size: 22px; }
@media (max-height: 560px) { .res2-head .sc { min-width: 90px; font-size: 30px; } .ribbon2 { font-size: 24px; } .rt-row { min-height: 34px; } .rt-av { width: 26px; height: 26px; } .res-stage2 { min-height: 110px; } }
@media (max-width: 700px) { .rt { grid-template-columns: 1fr; } .rt-hd, .rt-row { grid-template-columns: 1fr 34px 34px 34px; } }
/* result v2.1: no stage / animation, characters inside the table */
.res2-head, .res2-card { animation: none; }
.res2 { justify-content: center; gap: 4px; }
.res2-head { margin-top: 0; }
.rt-row { min-height: 68px; }
.rt-av { width: 52px; height: 60px; border-radius: 12px; background: linear-gradient(#e8f6ff, #cfe8fb); box-shadow: none; }
.rt-nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rt-nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-nm em { font-style: normal; margin-right: 4px; }
.rt-me { font: 900 10px var(--font); color: #1d4d86; background: #fff; border-radius: 6px; padding: 1px 6px; box-shadow: 0 0 0 1.5px #2b8de4; }
.rt-st { font: 800 10px var(--font); color: #fff; border-radius: 6px; padding: 1px 6px; } .rt-st.w { background: #f0a91c; } .rt-st.l { background: #8a6a50; } .rt-st.d { background: #2b75d8; }
.res2 .res-actions { margin-top: 16px; }
@media (max-height: 560px) { .rt-row { min-height: 46px; } .rt-av { width: 36px; height: 42px; } }
/* lobby bottom row: recent rooms + play button, both the chat's height */
.l3-nav { align-items: stretch; gap: 12px; height: 124px; }
.l3-recent { flex: 1; min-width: 0; display: flex; flex-direction: column; background: rgba(255, 255, 255, .9); border-radius: 16px; padding: 6px 8px; box-shadow: 0 0 0 2px #fff, 0 5px 0 2px rgba(80, 140, 200, .4); }
.lr-head { display: flex; justify-content: space-between; align-items: center; color: #1d4d86; font-size: 13px; padding: 0 2px 4px; }
.lr-all { border: 0; background: none; color: #2b75d8; font: 800 12px var(--font); cursor: pointer; }
.lr-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.lr-row { display: flex; align-items: center; gap: 8px; background: #f3f9ff; border-radius: 10px; padding: 3px 6px; }
.lr-row.playing { opacity: .65; }
.lr-no { flex: none; min-width: 26px; height: 22px; border-radius: 6px; background: #2b8de4; color: #fff; font: 900 12px/22px var(--font); text-align: center; }
.lr-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; } .lr-nm b { font-size: 13px; color: #1d4d86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lr-nm small { font-size: 11px; color: #5a7393; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-st { font: 800 11px var(--font); color: #c22a3e; white-space: nowrap; }
.lr-empty { color: #5a7393; font-size: 12px; text-align: center; margin: auto; }
.l3-nav .l3-play { height: auto; margin-left: 0; width: 170px; flex: none; animation: none; }
.l3-chat { height: 124px; }
@media (max-height: 560px) and (orientation: landscape) { .l3-nav, .l3-chat { height: 86px; } .l3-nav .l3-play { width: 110px; } .lr-head { display: none; } }
@media (orientation: portrait), (max-width: 700px) { .l3-nav { height: 150px; flex-wrap: nowrap; } .l3-nav .l3-play { width: 110px; order: 0; flex: none; } }
@media (orientation: portrait), (max-width: 700px) { .l3-events { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 8px 2px 2px; } .l3-events button { flex: none; } }
#rk-sub { display: inline-flex; align-items: center; gap: 5px; padding: 2px 12px 2px 6px; }
#rk-sub .tier-shield { flex: none; width: 18px !important; height: 20px !important; }
.sc-rank .tier-shield { flex: none; }
.lr-head b { font-size: 14px; }
.lr-all { background: #2b8de4; color: #fff; border-radius: 99px; padding: 3px 12px; font: 800 12px var(--font); box-shadow: 0 2px 0 #155fb4; }
.lr-all:active { transform: translateY(2px); box-shadow: none; }
.lr-join { flex: none; border: 0; border-radius: 10px; padding: 6px 14px; background: linear-gradient(#5be08f, #22b45f); color: #fff; font: 900 13px var(--font); text-shadow: 0 1px 0 rgba(0, 60, 20, .5); box-shadow: 0 3px 0 #15803f; cursor: pointer; }
.lr-join:hover { filter: brightness(1.06); } .lr-join:active { transform: translateY(2px); box-shadow: 0 1px 0 #15803f; }
.lr-st { background: #fde2e5; border-radius: 8px; padding: 4px 8px; }
.l3-party .l3-invite { width: 160px; }
.l3-nav .lr-all { display: inline-block; background: #2b8de4; color: #fff; text-shadow: none; border-radius: 99px; padding: 4px 14px; font: 800 12px var(--font); box-shadow: 0 2px 0 #155fb4; flex-direction: row; }
.l3-nav .lr-join { display: inline-block; flex: none; border-radius: 10px; padding: 6px 16px; background: linear-gradient(#5be08f, #22b45f); color: #fff; font: 900 14px var(--font); text-shadow: 0 1px 0 rgba(0, 60, 20, .5); box-shadow: 0 3px 0 #15803f; }
.l3-card.big small img.tier-shield { position: static; inset: auto; transform: none; object-fit: contain; width: 18px; height: 20px; }
/* ---------------- daily quests v2 (Guide-Center style) */
.quests2 { display: flex; flex-direction: column; gap: 10px; min-width: min(880px, 90vw); }
.q2-head { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; }
.q2-pts { position: relative; background: #fff; border-radius: 16px; padding: 22px 8px 8px; text-align: center; box-shadow: 0 0 0 2px #cfe4fa, 0 4px 0 2px #a9cbee; }
.q2-ribbon { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: linear-gradient(#4fa3ff, #1f6fe0); color: #fff; font: 800 12px var(--font); padding: 3px 14px; border-radius: 8px; box-shadow: 0 3px 0 #0f4fa8; }
.q2-pts b { display: block; font: 900 38px/1 var(--font); color: #1f6fe0; } .q2-pts small { color: #5a7393; font-size: 11px; }
.q2-track { position: relative; height: 92px; margin: 0 30px 0 22px; }
.q2-bar { position: absolute; left: 0; right: 0; bottom: 22px; height: 12px; border-radius: 99px; background: #1d3b66; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); overflow: hidden; }
.q2-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4fd3ff, #2b8de4); border-radius: 99px; }
.q2-now { position: absolute; bottom: 14px; transform: translateX(-50%); min-width: 30px; height: 28px; padding: 0 6px; border-radius: 99px; background: radial-gradient(circle at 35% 30%, #ff9a7a, #e0453a); color: #fff; font: 900 13px/28px var(--font); text-align: center; box-shadow: 0 0 0 3px #fff; z-index: 2; }
.q2-chest { position: absolute; bottom: 0; transform: translateX(-50%); border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.q2-chest small { font: 800 12px var(--font); color: #1d4d86; margin-top: 2px; }
.q2-chest .q-gift { margin-bottom: 4px; }
.q2-chest.can .q-gift, .q2-wchest.can .q-gift { animation: wob 1s ease-in-out infinite; filter: drop-shadow(0 0 8px #ffd23c); }
.q2-chest em, .q2-wchest em { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-style: normal; font: 900 11px var(--font); color: #fff; background: linear-gradient(#ffb84d, #e8761a); border-radius: 8px; padding: 1px 10px; box-shadow: 0 2px 0 #a8500a; pointer-events: none; }
.q-gift { display: inline-block; } .q-gift svg { width: 100%; height: 100%; display: block; }
.q2-list { display: flex; flex-direction: column; gap: 8px; max-height: 44vh; overflow: auto; padding: 8px; background: linear-gradient(#2b8de4, #1f6fe0); border-radius: 16px; }
.q2-card { background: #fff; border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.q2-card.done { box-shadow: 0 0 0 3px #ffd23c; } .q2-card.claimed { opacity: .65; }
.q2-top { display: grid; grid-template-columns: 22px 1fr 170px 112px; gap: 10px; align-items: center; }
.q2-bang { width: 22px; height: 22px; border-radius: 6px; background: #2b8de4; color: #fff; font: 900 14px/22px var(--font); text-align: center; font-style: normal; }
.q2-name { color: #1d3b66; font-size: 15px; }
.q2-prog { display: flex; align-items: center; gap: 6px; }
.q2-pbar { flex: 1; height: 12px; border-radius: 99px; background: #1d3b66; overflow: hidden; } .q2-pbar i { display: block; height: 100%; background: linear-gradient(90deg, #4fe0d0, #2bb8d8); }
.q2-prog small { font: 800 12px var(--font); color: #1d3b66; min-width: 42px; text-align: right; }
.q2-btn { border: 0; border-radius: 10px; padding: 8px 6px; font: 800 13px var(--font); cursor: pointer; }
.q2-btn.wait { background: #e3e8ef; color: #8a97a8; box-shadow: inset 0 0 0 2px #cfd7e2; cursor: default; }
.q2-btn.claim { background: linear-gradient(#ffe36b, #ffb21a); color: #6a3b00; box-shadow: 0 3px 0 #c4800a; animation: pulse 1.4s infinite; }
.q2-btn.got { background: #d6f5e0; color: #1b8c4f; }
.q2-rw { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #e8f3ff; border-radius: 99px; padding: 3px 10px 3px 3px; }
.q2-tag { background: #2b6fd6; color: #fff; font: 800 11px var(--font); border-radius: 99px; padding: 2px 10px; }
.q-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #1d3b66; } .q-chip .ico-svg { width: 18px; height: 18px; display: inline-block; }
.q-ptico { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a7a, #e0453a); color: #fff; font: 900 11px/18px var(--font); text-align: center; font-style: normal; display: inline-block; }
.q2-week { display: flex; align-items: center; gap: 14px; background: #fffbe9; border-radius: 16px; padding: 6px 12px; box-shadow: 0 0 0 2px #ffe08a; }
.q2-wpts { display: flex; align-items: center; gap: 12px; margin-right: auto; } .q2-wpts b { display: block; color: #b07800; font-size: 14px; } .q2-wpts small { color: #8a6a2a; font-size: 11px; }
.q2-wnum { display: inline-flex; align-items: center; gap: 6px; background: #1d3b66; color: #fff; font: 900 18px var(--font); border-radius: 99px; padding: 3px 18px 3px 4px; }
.q2-wchest { position: relative; display: flex; align-items: center; gap: 6px; border: 0; background: none; font: 900 14px var(--font); color: #b07800; cursor: pointer; }
.q2-wchest.got span { text-decoration: line-through; opacity: .6; } .q2-wchest em { top: -4px; left: auto; right: -6px; transform: none; }
@media (max-width: 760px) { .q2-head { grid-template-columns: 1fr; } .q2-top { grid-template-columns: 22px 1fr 96px; } .q2-prog { grid-column: 2 / -1; grid-row: 2; } .q2-week { flex-wrap: wrap; } }
.cs-stage { position: relative; }
.cs-shadow, .ground-shadow { width: 190px; height: 34px; border-radius: 50%; background: radial-gradient(ellipse, rgba(20, 50, 30, .45) 0, rgba(20, 50, 30, .22) 45%, transparent 72%); }
.cs-stage .cs-shadow { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); }
.cs-stage .cs-big { position: relative; z-index: 1; margin-bottom: 18px; }
.dr-stage .ground-shadow, .pf-stage .ground-shadow { margin-top: -30px; width: 150px; height: 28px; position: relative; z-index: 0; }
.dr-cv, .pf-cv { margin-bottom: 0 !important; }
.pf-stage .ground-shadow { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); margin: 0; }
.rk-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rk-mode { border: 0; border-radius: 18px; padding: 16px 10px; background: linear-gradient(180deg, #fff, #f1e8ff); box-shadow: 0 0 0 2px #e2cffb, 0 5px 0 2px #b78ce8; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; font-family: var(--font); color: #3b1d6b; }
.rk-mode:hover { transform: translateY(-2px); } .rk-mode.last { box-shadow: 0 0 0 3px #ffcf3a, 0 5px 0 3px #d79a00; }
.rk-mode i { font-style: normal; font-size: 40px; } .rk-mode b { font-size: 20px; } .rk-mode span { font-size: 13px; color: #5a4a7a; } .rk-mode small { font-size: 11px; color: #7a4ad8; }
@media (max-width: 600px) { .rk-modes { grid-template-columns: 1fr; } }
.quests2 { min-width: 0; width: min(840px, 82vw); } .q2-track { margin: 0 34px 0 22px; } .q2-top { grid-template-columns: 22px 1fr 150px 104px; } .dr-stage .ground-shadow, .pf-stage .ground-shadow { width: 170px; height: 30px; background: radial-gradient(ellipse, rgba(20, 50, 90, .45) 0, rgba(20, 50, 90, .2) 45%, transparent 72%); } .pf-stage .ground-shadow { bottom: 2px; z-index: 0; } .dr-stage .ground-shadow { margin-top: -26px; }
/* party box in "ทีมของฉัน" */
.l3-party { align-items: stretch; }
.pt-box { width: 190px; background: rgba(255, 255, 255, .9); border-radius: 16px; padding: 8px 10px; box-shadow: 0 0 0 2px #fff, 0 5px 0 2px rgba(80, 140, 200, .4); display: flex; flex-direction: column; gap: 6px; }
.pt-head { display: flex; justify-content: space-between; align-items: center; color: #1d4d86; font-size: 13px; }
.pt-leave { border: 0; background: #fde2e5; color: #c22a3e; border-radius: 99px; padding: 2px 8px; font: 800 11px var(--font); cursor: pointer; }
.pt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-m { position: relative; display: flex; flex-direction: column; align-items: center; width: 40px; }
.pt-m canvas { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(#bdf0a5, #7ccd62); box-shadow: 0 0 0 2px #fff; }
.pt-m.lead canvas { box-shadow: 0 0 0 2px #ffcf3a; } .pt-m.lead::before { content: '👑'; position: absolute; top: -9px; left: -4px; font-size: 12px; }
.pt-m small { font-size: 10px; color: #1d4d86; max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-kick { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; border: 0; background: #ff4d5e; color: #fff; font: 900 9px/16px var(--font); padding: 0; cursor: pointer; }
.pt-add { width: 38px; height: 38px; border-radius: 10px; border: 2px dashed #7cb4ea; background: #eef6ff; color: #2b75d8; font: 900 22px/1 var(--font); cursor: pointer; }
.pt-hint { font-size: 10.5px; color: #5a7393; line-height: 1.3; }
.rk-mode[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
@media (max-height: 560px) and (orientation: landscape) { .pt-box { width: 150px; padding: 4px 6px; } .pt-hint { display: none; } }
/* smaller (sharper) character art in dressing room / profile */
.dr-cv { width: 150px !important; height: 175px !important; }
.pf-cv { width: 130px !important; height: 150px !important; }
.dr-stage { justify-content: center; min-height: 260px; }
.pf-stage { padding-top: 16px; }
.dr-stage .ground-shadow { width: 120px; height: 22px; margin-top: -18px; }
.pf-stage .ground-shadow { width: 110px; height: 20px; }

/* ---- v3.4 live-ops: mailbox, login calendar, reports, account linking ---- */
.forgot { display: block; text-align: right; font-size: 13px; color: #2b6fc0; margin-top: 6px; text-decoration: underline; }
.g-btn { display: flex; justify-content: center; min-height: 44px; margin: 6px 0 10px; }
.g-btn[hidden] { display: none; }
.link-chip { margin-left: 8px; border: 0; border-radius: 99px; padding: 3px 10px; font: 800 12px/1.3 inherit; font-family: inherit; color: #5a3b00; background: linear-gradient(#ffe680, #ffc52e); box-shadow: 0 2px 0 #c98d00; cursor: pointer; white-space: nowrap; }
.link-acc .la-why { display: flex; gap: 10px; align-items: center; background: #eef7ff; border: 2px solid #cfe6ff; border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; }
.link-acc .la-why p { margin: 0; font-size: 14px; color: #24507f; }
.mailbox { min-height: 300px; }
.mb-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.mb-code { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 240px; }
.mb-code input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px; border: 2px solid #b9d6f5; font: inherit; font-weight: 700; letter-spacing: 1px; }
.mb-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.mb-item { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 2px solid #ffd77a; border-radius: 14px; padding: 10px 12px; box-shadow: 0 3px 0 rgba(0,0,0,.06); }
.mb-item.read { border-color: #dde6f0; opacity: .82; }
.mb-ic { flex: none; }
.mb-main { flex: 1; min-width: 0; }
.mb-main b { display: block; font-size: 15px; color: #1d3f6b; }
.mb-main small { color: #7a8ba3; font-size: 12px; }
.mb-main p { margin: 4px 0; font-size: 13px; color: #334; white-space: pre-wrap; }
.mb-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mb-chip { display: inline-flex; align-items: center; gap: 4px; background: #fff7dc; border: 1.5px solid #f3cf6b; border-radius: 99px; padding: 2px 9px 2px 4px; font-size: 12px; font-weight: 700; color: #6b4a00; }
.mb-chip em { font-style: normal; }
.mb-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.mb-done { font-size: 12px; color: #2fa65a; font-weight: 800; }
.mb-del { border: 0; background: none; cursor: pointer; font-size: 16px; opacity: .55; }
.mb-del:hover { opacity: 1; }
.mb-empty { text-align: center; color: #7a8ba3; padding: 40px 0; }
.l7-sub { text-align: center; color: #5a6f8c; margin: 0 0 12px; font-size: 14px; }
.l7-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.l7-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; background: linear-gradient(#fffdf3, #fff2c8); border: 3px solid #f5d57a; box-shadow: 0 4px 0 #e1b64a; min-height: 128px; justify-content: center; }
.l7-day.big { grid-column: span 1; background: linear-gradient(#fff4fb, #ffd3ec); border-color: #ff9fd0; box-shadow: 0 4px 0 #e57ab5; }
.l7-day .l7-n { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 800; color: #a0731a; }
.l7-day b { font-size: 12px; color: #5a3b00; text-align: center; }
.l7-pic { margin-top: 12px; min-height: 50px; display: flex; align-items: center; }
.l7-day.done { filter: grayscale(.55); opacity: .7; }
.l7-ok { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; font-style: normal; color: #2fb35a; text-shadow: 0 2px 0 #fff, 0 0 8px #fff; }
.l7-day.today { cursor: pointer; border-color: #3fca6b; box-shadow: 0 4px 0 #23964a, 0 0 0 4px rgba(63,202,107,.25); animation: l7pulse 1.2s ease-in-out infinite; }
@keyframes l7pulse { 50% { transform: translateY(-3px); } }
.l7-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; }
.l7-foot small { color: #7a8ba3; }
.l7-wait { font-weight: 800; color: #2fa65a; }
@media (max-width: 560px) { .l7-grid { grid-template-columns: repeat(3, 1fr); } .l7-day { min-height: 110px; } }
.rep-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-quote { margin: 0 0 6px; padding: 8px 12px; background: #f3f6fa; border-left: 4px solid #ff6b6b; border-radius: 8px; font-size: 13px; color: #334; }
.who-menu { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.chat-log b.who, #lobby-chat b.who, #room-chat b.who { cursor: pointer; }
#lobby-chat b.who:hover, #room-chat b.who:hover { text-decoration: underline; }
.rt-rep { margin-left: 6px; border: 0; background: rgba(255,255,255,.75); border-radius: 6px; cursor: pointer; font-size: 11px; padding: 0 4px; opacity: .55; vertical-align: middle; }
.rt-rep:hover { opacity: 1; }
.l7-day.big { grid-column: span 2; }
@media (max-width: 560px) { .l7-day.big { grid-column: span 3; } }
.me-card .link-chip { padding: 1px 8px; font-size: 11px; margin-left: 6px; vertical-align: 1px; }

/* ---- mobile play: landscape, floating stick, no stray browser gestures ---- */
html, body { overscroll-behavior: none; }
body.is-touch { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body.is-touch input, body.is-touch textarea { -webkit-user-select: text; user-select: text; }
#scr-game { touch-action: none; }
.joy-zone { display: none; position: absolute; left: 0; top: 64px; bottom: 0; width: 46%; pointer-events: auto; touch-action: none; }
body.is-touch .joy-zone { display: block; }
body.is-touch .joy { left: calc(34px + var(--safe-l)); bottom: calc(28px + var(--safe-b)); opacity: .7; transition: opacity .15s; z-index: 1; }
body.is-touch .joy.live { opacity: 1; transition: none; }
body.is-touch .tbtns { right: calc(24px + var(--safe-r)); bottom: calc(22px + var(--safe-b)); }
.rotate-hint { display: none; position: absolute; inset: 0; z-index: 30; background: rgba(8, 30, 60, .92); color: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; }
.rotate-hint b { font-size: 22px; } .rotate-hint small { opacity: .8; font-size: 14px; }
.rotate-hint .rh-phone { width: 54px; height: 92px; border: 5px solid #fff; border-radius: 12px; animation: rh-turn 2.2s ease-in-out infinite; }
@keyframes rh-turn { 0%, 20% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (orientation: portrait) { body.is-touch .rotate-hint:not(.off) { display: flex; } }

/* ---- daily quests v3: gifts above the bar, clean cards, mobile-first ---- */
.q3 { width: min(820px, 86vw); display: flex; flex-direction: column; gap: 10px; }
.q3-day, .q3-week { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; background: #fff; border-radius: 18px; padding: 10px 14px 6px; box-shadow: 0 0 0 2px #d4e6fb, 0 4px 0 2px #b4d2f2; }
.q3-week { background: #fffaea; box-shadow: 0 0 0 2px #ffe08a, 0 4px 0 2px #f0c860; }
.q3-sum { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 14px; background: linear-gradient(#eef6ff, #dcecff); }
.q3-sum.wk { background: linear-gradient(#fff4cc, #ffe9a6); }
.q3-cap { font: 800 12px var(--font); color: #2b6fd6; } .q3-sum.wk .q3-cap { color: #a86e00; }
.q3-sum b { font: 900 34px/1 var(--font); color: #1f6fe0; } .q3-sum.wk b { color: #c98400; }
.q3-sum small { font-size: 11px; color: #61789a; white-space: nowrap; }
.q3-track { position: relative; padding: 0 26px 0 14px; }
.q3-gifts { position: relative; height: 58px; }
.q3-week .q3-gifts { height: 52px; }
.q3-chest { position: absolute; bottom: 4px; transform: translateX(-50%); border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; }
.q3-chest .q-gift { display: block; }
.q3-chest.can .q-gift { animation: wob 1s ease-in-out infinite; filter: drop-shadow(0 0 8px #ffd23c); }
.q3-chest.got .q-gift { filter: grayscale(.4); opacity: .75; }
.q3-chest em { position: absolute; top: -6px; right: -12px; font: 900 10px/1 var(--font); font-style: normal; color: #fff; background: linear-gradient(#ff8a5c, #e8461a); border-radius: 99px; padding: 3px 7px; box-shadow: 0 2px 0 #9e2f0d; }
.q3-chest em.ok { background: #2fbf71; box-shadow: 0 2px 0 #1b7f48; }
.q3-bar { position: relative; height: 12px; border-radius: 99px; background: #1d3b66; box-shadow: inset 0 2px 3px rgba(0,0,0,.35); }
.q3-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4fd3ff, #2b8de4); }
.q3-week .q3-bar > i { background: linear-gradient(90deg, #ffe36b, #ffb21a); }
.q3-tick { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #3c5a86; box-shadow: 0 0 0 3px #fff; }
.q3-tick.on { background: #ffd23c; }
.q3-labels { position: relative; height: 20px; }
.q3-labels small { position: absolute; top: 3px; transform: translateX(-50%); font: 800 12px var(--font); color: #1d4d86; }
.q3-sub { display: flex; align-items: center; gap: 8px; padding: 0 4px; } .q3-sub b { color: #fff; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.popup .q3-sub b { color: #1d3b66; text-shadow: none; }
.q3-ready { background: #ff6b4a; color: #fff; font: 800 11px var(--font); border-radius: 99px; padding: 2px 10px; }
.q3-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 8px; border-radius: 16px; background: linear-gradient(#2b8de4, #1f6fe0); }
.q3-card { display: grid; grid-template-columns: 44px 1fr 112px; gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 10px 12px; }
.q3-card.done { box-shadow: 0 0 0 3px #ffd23c; background: #fffdf0; }
.q3-card.claimed { opacity: .6; }
.q3-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(#e8f3ff, #cfe4fb); }
.q3-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.q3-name { font: 800 15px var(--font); color: #1d3b66; }
.q3-prog { display: flex; align-items: center; gap: 8px; }
.q3-pbar { flex: 1; height: 10px; border-radius: 99px; background: #dbe6f3; overflow: hidden; } .q3-pbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4fe0d0, #2bb8d8); }
.q3-card.done .q3-pbar i { background: linear-gradient(90deg, #ffe36b, #ffb21a); }
.q3-prog small { font: 800 12px var(--font); color: #1d3b66; min-width: 38px; text-align: right; }
.q3-rw { display: flex; flex-wrap: wrap; gap: 6px; }
.q3-btn { border: 0; border-radius: 12px; padding: 10px 6px; font: 800 13px var(--font); cursor: pointer; white-space: nowrap; }
.q3-btn.wait { background: #eef2f7; color: #8a97a8; box-shadow: inset 0 0 0 2px #d6dee9; cursor: default; }
.q3-btn.claim { background: linear-gradient(#ffe36b, #ffb21a); color: #6a3b00; box-shadow: 0 3px 0 #c4800a; animation: pulse 1.4s infinite; }
.q3-btn.got { background: #d6f5e0; color: #1b8c4f; }
@media (max-width: 640px) {
  .q3 { width: 100%; gap: 8px; }
  .q3-day, .q3-week { grid-template-columns: 1fr; gap: 4px; padding: 8px 10px 4px; }
  .q3-sum { flex-direction: row; justify-content: center; gap: 10px; padding: 4px 10px; }
  .q3-sum b { font-size: 24px; }
  .q3-track { padding: 0 22px 0 16px; }
  .q3-card { grid-template-columns: 36px 1fr; gap: 8px 10px; padding: 8px 10px; }
  .q3-ico { width: 36px; height: 36px; font-size: 20px; }
  .q3-btn { grid-column: 1 / -1; padding: 8px; }
  .q3-list { max-height: 42vh; }
}

/* ---- room screen on phones (portrait): bigger slot cards so the characters are visible ---- */
@media (max-width: 640px) {
  .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .slot { aspect-ratio: auto; height: 128px; padding: 14px 3px 5px; border-radius: 14px; justify-content: flex-start; }
  .slot canvas { flex: 1 1 auto; height: auto; min-height: 64px; width: 100%; }
  .slot .nm { font-size: 11px; order: 2; margin-top: 2px; }
  .slot .st { font-size: 10px; padding: 1px 8px; order: 3; }
  .slot .crown { top: 10px; left: 4px; font-size: 14px; z-index: 2; }
  .slot .kick { top: 10px; right: 4px; width: 20px; height: 20px; font-size: 10px; z-index: 2; }
  .slot.empty { justify-content: center; padding: 6px; font-size: 11px; text-align: center; line-height: 1.2; }
  .slot.empty b { font-size: 30px; }
  .room-chat-box { flex: 0 0 auto; min-height: 120px; max-height: 170px; }
  .char-btn canvas { width: 100%; height: 58px; }
}
@media (max-width: 380px) { .slot { height: 116px; } .slot canvas { min-height: 56px; } }
/* gifts float clearly above the progress bar */
.q3-gifts { height: 66px; } .q3-week .q3-gifts { height: 60px; }
.q3-chest { bottom: 12px; }
@media (max-width: 640px) {
  .q3-card { grid-template-columns: 36px 1fr 82px; }
  .q3-btn { grid-column: auto; padding: 8px 4px; font-size: 12px; }
  .q3-list { max-height: 48vh; }
}

/* =====================================================================================
   PHONES — definitive layout (overrides the desktop/tablet rules above)
   P = portrait phone · L = landscape phone. The page itself never moves; screens scroll inside.
   ===================================================================================== */
html.is-phone, html.is-phone body { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
html.is-phone button, html.is-phone a, html.is-phone input { touch-action: manipulation; }

/* ---------- login ---------- */
@media (max-width: 640px) and (orientation: portrait) {
  #scr-auth.active { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .auth-wrap { flex-direction: column; gap: 14px; padding: calc(18px + var(--safe-t, 0px)) 14px 24px; margin: 0 auto; max-height: none; }
  .logo.big { font-size: 40px; } .logo.big .logo-bubble { font-size: 44px; }
  .auth-card { width: 100%; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #scr-auth.active { overflow-y: auto; }
  .auth-wrap { flex-direction: row; gap: 22px; padding: 10px calc(16px + var(--safe-r)) 10px calc(16px + var(--safe-l)); margin: 0 auto; max-height: none; align-items: flex-start; }
  .logo.big { font-size: 34px; margin-top: 30px; flex: none; } .logo.big .logo-bubble { font-size: 38px; }
  .auth-card { width: min(420px, 58vw); }
  .auth-card .form { gap: 6px; } .auth-card label { font-size: 13px; } .auth-card input { padding: 7px 10px; }
  .auth-card .hint { display: none; }
}

/* ---------- lobby: portrait = one scrolling column ---------- */
@media (max-width: 640px) and (orientation: portrait) {
  #scr-lobby.lobby3.active { display: flex !important; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: calc(6px + var(--safe-t, 0px)) 10px calc(16px + var(--safe-b)); }
  #scr-lobby.lobby3 > * { flex: none !important; position: relative !important; inset: auto !important; transform: none !important; width: auto !important; max-width: none !important; margin: 0 !important; height: auto; }
  .l3-top { order: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 !important; }
  .l3-top .me-card { flex: 1 1 100%; } .l3-top .l3-gap { display: none; }
  .l3-top .wallet { flex: 1 1 auto; } .l3-top .top-icons { flex: none; }
  .l3-bubble { order: 1; height: 30px; font-size: 12px !important; padding: 2px 8px !important; }
  .l3-bubble > i { width: 22px; height: 22px; }
  .l3-stage { order: 2; display: grid !important; grid-template-columns: 1fr; gap: 8px; padding: 30px 8px 10px !important; min-height: 0 !important; }
  .l3-me { width: 100%; } .l3-char, .l3-me #sc-char { width: 120px !important; height: 136px !important; }
  .l3-party { flex-direction: row !important; gap: 8px; width: 100%; }
  .l3-party .pt-box { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .l3-party .l3-invite { flex: none; width: 104px !important; min-height: 0; grid-template-columns: 28px 1fr; padding: 6px 8px; }
  .l3-party .l3-invite i[data-ic] { width: 28px; height: 28px; } .l3-party .l3-invite small { display: none; }
  .l3-right { order: 3; display: flex !important; flex-direction: column; gap: 10px; }
  .l3-events { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; padding: 8px 2px 4px !important; gap: 6px; }
  .l3-events button { flex: none; width: 58px !important; }
  .l3-modes { height: auto !important; grid-template-rows: 130px auto !important; gap: 8px; }
  .l3-nav { order: 4; height: 132px !important; display: flex; gap: 8px; }
  .l3-nav .l3-recent { flex: 1 1 auto; min-width: 0; }
  .l3-nav .l3-play { width: 108px !important; flex: none; }
  .l3-chat { order: 5; height: 200px !important; }
}

/* ---------- lobby: landscape = top bar + 3 columns, chat/rooms row below (scroll) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  #scr-lobby.lobby3.active { display: grid !important; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto calc(100vh - 92px) auto !important; grid-template-areas: "top top top" "tick tick tick" "stage modes right" "chat chat nav" !important;
    gap: 6px 10px !important; padding: 4px calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l)) !important; align-content: start !important; }
  #scr-lobby.lobby3 > * { position: relative !important; inset: auto !important; transform: none !important; margin: 0 !important; width: auto !important; max-width: none !important; min-width: 0; }
  .l3-top { grid-area: top; padding: 0 !important; height: 44px; }
  .l3-top .me-card { transform: scale(.85); transform-origin: left center; }
  .l3-bubble { grid-area: tick; height: 26px; font-size: 12px !important; padding: 2px 8px !important; }
  .l3-bubble > i { width: 20px; height: 20px; }
  .l3-stage { grid-area: stage; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 22px 6px 6px !important; overflow: hidden; }
  .l3-stage .l3-party { display: none !important; }
  .l3-char, .l3-me #sc-char { width: 84px !important; height: 96px !important; }
  .l3-me .sc-rank { transform: scale(.8); } .l3-me .l3-change { font-size: 11px; padding: 3px 8px; }
  .l3-right { display: contents !important; }
  .l3-modes { grid-area: modes; height: 100% !important; min-height: 0; grid-template-rows: minmax(0, 1fr) 40px !important; gap: 6px !important; }
  .l3-modes .l3-card.big span { font-size: 18px; } .l3-modes .l3-card.big small { font-size: 10px; }
  .l3-events { grid-area: right; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 4px !important; padding: 2px !important; height: calc(100% - 70px); overflow-y: auto; }
  .l3-events button { width: auto !important; transform: scale(.9); }
  .l3-events button small { display: none; }
  .l3-nav { grid-area: nav; height: auto !important; display: flex; }
  .l3-nav .l3-recent { display: none !important; }
  .l3-nav .l3-play { position: relative; width: 100% !important; height: 64px; margin-top: -76px !important; }
  .l3-chat { grid-area: chat; height: 150px !important; }
}

/* ---------- game HUD on phones: timer + stats on the left, board fully visible ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  body.is-touch .hud-top { left: calc(8px + var(--safe-l)); top: 58px; transform: none; flex-direction: column; align-items: flex-start; gap: 4px; }
  body.is-touch .hud-timer { border-radius: 12px; font-size: 16px; min-width: 0; padding: 2px 10px; }
  body.is-touch .hud-stats { left: calc(8px + var(--safe-l)); top: 96px; bottom: auto; transform: none !important; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 8px; border-radius: 12px; opacity: .9; }
  body.is-touch .hud-stats .sbar img, body.is-touch .hud-stats .abil { width: 18px; height: 18px; }
  body.is-touch .hud-stats .segs i { width: 5px; height: 10px; }
  body.is-touch .joy { bottom: calc(14px + var(--safe-b)); }
  body.is-touch .hud-net { bottom: auto; top: 2px; right: 60px; }
}

/* portrait game: timer + stats sit in the free strip ABOVE the board */
@media (max-width: 640px) and (orientation: portrait) {
  body.is-touch .hud-top { top: 6px; }
  body.is-touch .hud-timer { font-size: 16px; min-width: 0; padding: 2px 14px 3px; }
  body.is-touch .hud-stats { top: 70px; bottom: auto; transform: translateX(-50%) scale(.8) !important; transform-origin: top center; }
}
/* landscape lobby: compact party row under the character, labels never wrap */
@media (max-height: 500px) and (orientation: landscape) {
  .l3-stage .l3-party { display: flex !important; flex-direction: row !important; width: 100%; }
  .l3-stage .l3-party .l3-invite, .l3-stage .pt-hint, .l3-me .l3-change, .l3-me .sc-name small { display: none !important; }
  .l3-stage .pt-box { width: 100% !important; padding: 3px 6px !important; flex-direction: row; align-items: center; gap: 6px; }
  .l3-stage .pt-box > b, .l3-stage .pt-box > .pt-title { font-size: 11px; }
  .l3-modes .l3-card.sm span { white-space: nowrap; font-size: 13px; } .l3-modes .l3-card.sm small { display: none; }
}
@media (max-width: 640px) and (orientation: portrait) { body.is-touch .tbtns { transform: scale(.82); transform-origin: right bottom; } body.is-touch .joy { width: 140px; height: 140px; } }

/* ---- phones v2: menu row right under the announcement bar, no reset clock, no "เล่นเลย", recent rooms full width ---- */
@media (max-width: 640px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  #l3-reset, .l3-events button small { display: none !important; }
  .l3-nav .l3-play { display: none !important; }
  .l3-nav .l3-recent { display: flex !important; flex: 1 1 100% !important; width: 100% !important; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .l3-right { display: contents !important; }
  .l3-events { order: 2 !important; }
  .l3-stage { order: 3 !important; }
  .l3-modes { order: 4 !important; }
  .l3-nav { order: 5 !important; height: auto !important; min-height: 150px; }
  .l3-nav .l3-recent { max-height: 230px; }
  .l3-chat { order: 6 !important; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #scr-lobby.lobby3.active { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) !important;
    grid-template-rows: auto auto auto calc(100vh - 150px) auto auto !important;
    grid-template-areas: "top top" "tick tick" "right right" "stage modes" "nav nav" "chat chat" !important; }
  .l3-events { grid-area: right; display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; height: auto !important; gap: 6px !important; padding: 4px 2px 2px !important; }
  .l3-events button { flex: none; width: 52px !important; transform: none; }
  .l3-nav { grid-area: nav; height: 170px !important; }
  .l3-nav .l3-play { margin: 0 !important; }
  .l3-nav .lr-head { display: flex !important; }
  .l3-chat { grid-area: chat; height: 170px !important; }
}

/* ---- result screen on landscape phones: compact + scrollable so the buttons are always reachable ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .res2 { justify-content: flex-start !important; overflow-y: auto; padding-top: 6px; }
  .res2-head { transform: scale(.7); transform-origin: top center; margin-bottom: -26px; }
  .res2-card { margin-top: 0; }
  .rt-hd { height: 22px; font-size: 11px; }
  .rt-row { min-height: 34px; } .rt-row .rt-av { width: 30px; height: 30px; }
  .res2 .res-actions { margin-top: 8px; } .res2 .res-actions .btn.big { min-width: 160px; font-size: 18px; padding: 8px 16px; }
}
/* ---- portrait game: timer below the player portraits ---- */
@media (max-width: 640px) and (orientation: portrait) {
  body.is-touch .hud-top { top: 70px; }
  body.is-touch .hud-stats { top: 104px; }
}
@media (max-width: 640px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  #scr-lobby .l3-events { flex: none !important; height: auto !important; min-height: 78px !important; max-height: none !important; align-items: flex-start !important; overflow-y: hidden !important; overflow-x: auto !important; position: relative !important; background: rgba(255,255,255,.55); border-radius: 16px; padding: 10px 6px 4px !important; }
  #scr-lobby .l3-events button { height: auto !important; }
}
@media (max-width: 640px) and (orientation: portrait) {
  #scr-lobby.lobby3 > .l3-nav, #scr-lobby.lobby3 > .l3-chat, #scr-lobby.lobby3 > .l3-stage, #scr-lobby.lobby3 > .l3-bubble, #scr-lobby .l3-events, #scr-lobby .l3-modes { align-self: stretch !important; width: 100% !important; }
  #scr-lobby .l3-nav .l3-recent { width: 100% !important; max-width: none !important; }
}

/* ---- phones in a match: whole board visible; translucent controls; compact HUD strip top-left after my portrait ---- */
@media (max-height: 500px) and (orientation: landscape), (max-width: 640px) and (orientation: portrait) {
  body.is-touch .joy { opacity: .4 !important; } body.is-touch .joy.live { opacity: .75 !important; }
  body.is-touch .tbtn { opacity: .55; transition: opacity .12s; } body.is-touch .tbtn.on { opacity: .9; }
  body.is-touch .hud-top, body.is-touch .hud-stats { top: 6px !important; bottom: auto !important; transform: none !important; flex-direction: row !important; align-items: center !important; }
  body.is-touch .hud-top { left: calc(var(--tlw, 50px) + 16px + var(--safe-l)) !important; gap: 4px; }
  body.is-touch .hud-top .score { display: none; }
  body.is-touch .hud-timer { font-size: 13px !important; padding: 2px 8px !important; border-radius: 9px !important; min-width: 0 !important; }
  body.is-touch .hud-stats { left: calc(var(--tlw, 50px) + 86px + var(--safe-l)) !important; gap: 6px !important; padding: 3px 7px !important; border-radius: 9px !important; background: rgba(22, 30, 52, .5) !important; opacity: .9; }
  body.is-touch .hud-stats .sbar { gap: 2px; }
  body.is-touch .hud-stats .sbar img, body.is-touch .hud-stats .abil { width: 14px !important; height: 14px !important; }
  body.is-touch .hud-stats .segs { gap: 1px; } body.is-touch .hud-stats .segs i { width: 4px !important; height: 8px !important; }
  body.is-touch .ptile { width: 38px; } body.is-touch .ptile .pic { width: 32px; height: 32px; } body.is-touch .ptile span { font-size: 8px; }
  body.is-touch .hud-net { top: auto !important; bottom: 2px !important; right: 8px !important; }
}
/* portrait: strip wraps under the portraits if the screen is narrow */
@media (max-width: 640px) and (orientation: portrait) {
  body.is-touch .hud-stats { left: calc(10px + var(--safe-l)) !important; top: 58px !important; }
  body.is-touch .hud-top { top: 58px !important; left: auto !important; right: calc(10px + var(--safe-r)) !important; }
}

/* ---- match HUD v3 (phones) ---- */
/* landscape: timer next to my portrait; stats stacked one per line on the left under the portrait */
@media (max-height: 500px) and (orientation: landscape) {
  body.is-touch .hud-stats { left: calc(8px + var(--safe-l)) !important; top: 64px !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; padding: 5px 7px !important; }
  body.is-touch .hud-stats .sbar img, body.is-touch .hud-stats .abil { width: 16px !important; height: 16px !important; }
}
/* portrait: one block in the portrait row — timer on top, stats right under it */
@media (max-width: 640px) and (orientation: portrait) {
  body.is-touch .hud-top { top: 6px !important; left: calc(var(--tlw, 50px) + 16px + var(--safe-l)) !important; right: auto !important; }
  body.is-touch .hud-stats { top: 34px !important; left: calc(var(--tlw, 50px) + 16px + var(--safe-l)) !important; flex-direction: row !important; flex-wrap: wrap; max-width: calc(100vw - var(--tlw, 50px) - 190px); }
}
@media (max-width: 640px) and (orientation: portrait) {
  body.is-touch .hud-stats { flex-direction: column !important; flex-wrap: nowrap; align-items: flex-start !important; gap: 2px !important; max-width: none; padding: 4px 7px !important; }
}
/* portrait: stats in one row just under the board, above the controls */
@media (max-width: 640px) and (orientation: portrait) {
  body.is-touch .hud-stats { top: calc(var(--board-bottom, 60vh) + 10px) !important; left: 50% !important; transform: translateX(-50%) !important; flex-direction: row !important; gap: 10px !important; padding: 4px 12px !important; border-radius: 99px !important; }
  body.is-touch .hud-stats .sbar img, body.is-touch .hud-stats .abil { width: 16px !important; height: 16px !important; }
  body.is-touch .hud-stats .segs i { width: 5px !important; height: 10px !important; }
}
/* portrait: controls follow right under the stats (no dead band), never off-screen */
@media (max-width: 640px) and (orientation: portrait) {
  body.is-touch .tbtns { top: min(calc(var(--board-bottom, 60vh) + 44px), calc(100% - 190px - var(--safe-b))) !important; bottom: auto !important; transform-origin: right top !important; }
  body.is-touch .joy { top: min(calc(var(--board-bottom, 60vh) + 54px), calc(100% - 150px - var(--safe-b))) !important; bottom: auto !important; }
}
/* landscape phones: opponents' portraits stay in the right margin — 2 columns, rows going down under the menu button */
@media (max-height: 500px) and (orientation: landscape) {
  body.is-touch .hud-team.right { display: grid !important; grid-template-columns: repeat(2, 40px); gap: 4px 6px !important; top: 56px !important; right: calc(8px + var(--safe-r)) !important; justify-items: center; }
  body.is-touch .hud-team.right .ptile { width: 40px; }
  body.is-touch .hud-team.right .ptile span { max-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.is-touch .hud-team.right { grid-template-columns: repeat(2, 34px); gap: 2px 4px !important; top: 52px !important; }
  body.is-touch .hud-team.right .ptile { width: 34px; } body.is-touch .hud-team.right .ptile .pic { width: 28px; height: 28px; border-radius: 7px; }
  body.is-touch .hud-team.right .ptile span { font-size: 7px; max-width: 34px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.is-touch .hud-team.right { top: 50px !important; gap: 3px 4px !important; }
  body.is-touch .hud-team.right .ptile span { display: none; }
  body.is-touch .hud-menu { width: 36px; height: 36px; font-size: 17px; top: 6px; }
}

/* kill announcer banner */
.anno { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 5; animation: anno 1.8s ease-out both; }
.anno b { display: block; font: 900 40px/1 var(--font); letter-spacing: 2px; color: #fff; -webkit-text-stroke: 3px #b3122a; text-shadow: 0 4px 0 #7a0a1a, 0 0 18px rgba(255, 70, 70, .7); white-space: nowrap; }
.anno.good b { -webkit-text-stroke-color: #1458b8; text-shadow: 0 4px 0 #0b3a80, 0 0 18px rgba(80, 170, 255, .8); }
.anno small { display: inline-block; margin-top: 6px; font: 800 14px var(--font); color: #fff; background: rgba(0, 0, 0, .45); padding: 2px 12px; border-radius: 99px; }
@keyframes anno { 0% { opacity: 0; transform: translateX(-50%) scale(1.8); } 12% { opacity: 1; transform: translateX(-50%) scale(.95); } 20% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-14px); } }
@media (max-height: 500px), (max-width: 640px) { .anno b { font-size: 26px; -webkit-text-stroke-width: 2px; } }

/* ================= lobby polish v4: currency icons, spacing, events row, square map ================= */
i.cur-ic { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; font-style: normal; margin: 0 .08em; line-height: 0; }
i.cur-ic svg, i.cur-ic img { width: 100%; height: 100%; display: block; }
.l3-events { justify-content: flex-start; flex-wrap: wrap; gap: 14px; padding-left: 4px; }
.l3-events button { width: 64px; }
.l3-right { gap: 18px; }
.l3-modes { gap: 16px; }
.l3-dock, .l3-bottom, .l3-nav { gap: 12px !important; }
.map-car .map-thumb, .map-car .map-thumb[style] { aspect-ratio: 1 / 1 !important; max-height: none !important; width: min(100%, 300px) !important; margin: 0 auto; display: block; }
.map-car .mc-view { display: flex; justify-content: center; }
.map-car .mc-cap { left: 50%; right: auto; transform: translateX(-50%); width: min(calc(100% - 16px), 284px); }
.btn + .btn { margin-left: 0; }
.modal .btns, .dlg-btns, .modal-foot { gap: 10px; }
.map-car { justify-content: center; gap: 14px; } .map-car .mc-view { flex: 0 1 300px; }
/* gacha: capsule machine */
.g-art.g-machine { padding: 0; min-height: 0; aspect-ratio: 1 / 1; max-height: 380px; width: 100%; background: radial-gradient(circle at 50% 40%, #fff7e8, #ffe1ef 60%, #ffc6e2); box-shadow: inset 0 0 0 3px #fff; justify-content: flex-end; }
.g-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.g-machine .g-feat { position: relative; z-index: 2; margin: 0 0 8px auto; margin-right: 8px; display: inline-flex; align-items: center; gap: 6px; background: rgba(35, 20, 60, .72); color: #fff; padding: 3px 10px 3px 4px; border-radius: 999px; font-size: 12px; pointer-events: none; }
.g-machine .g-feat .pic { width: 30px; height: 30px; display: grid; place-items: center; background: #fff; border-radius: 50%; overflow: hidden; }
.g-machine .g-feat .pic canvas, .g-machine .g-feat .pic img { filter: none; width: 30px !important; height: 30px !important; }
.g-skip { position: absolute; top: 8px; right: 8px; z-index: 3; display: none; border: 0; border-radius: 999px; padding: 4px 12px; background: rgba(35, 20, 60, .7); color: #fff; font: 800 12px var(--font); cursor: pointer; }
.gacha.spinning .g-skip { display: block; }
.gacha.spinning .g-btns button { opacity: .5; pointer-events: none; }
@media (max-width: 720px) { .g-art.g-machine { max-height: 46vh; aspect-ratio: auto; height: 46vh; } }
html.is-phone .g-art.g-machine { max-height: 300px; }
@media (orientation: landscape) and (max-height: 500px) { .gacha .g-main { grid-template-columns: 1fr 1fr !important; } .g-art.g-machine { height: calc(100dvh - 130px); max-height: none; aspect-ratio: auto; } }
/* ================= character showcase: arrows + phone layouts ================= */
.cs-nav { position: absolute; top: 45%; z-index: 2; } .cs-nav.prev { left: -6px; } .cs-nav.next { right: -6px; }
.cs-stage { min-width: 260px; }
.cs-count { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; background: rgba(10, 40, 80, .5); color: #fff; border-radius: 999px; padding: 1px 10px; font-weight: 800; font-size: 12px; }
.cs-big { touch-action: pan-y; }
html.is-phone .cs-overlay { padding: max(8px, env(safe-area-inset-top)) 10px 8px; gap: 6px; overflow: hidden; }
html.is-phone .cs-top { font-size: 18px; flex: none; }
@media (orientation: portrait) {
  html.is-phone .cs-overlay { display: grid; grid-template-rows: auto minmax(0, 34vh) auto minmax(0, 1fr); justify-items: stretch; }
  html.is-phone .cs-body { display: contents; }
  html.is-phone .cs-stage { grid-row: 2; min-width: 0; height: 100%; justify-content: flex-end; }
  html.is-phone .cs-stage .cs-big { width: 100%; height: calc(100% - 16px); margin-bottom: 12px; }
  html.is-phone .cs-strip { grid-row: 3; padding: 6px 4px 8px; gap: 8px; scroll-snap-type: x proximity; }
  html.is-phone .cs-pick { width: 64px; scroll-snap-align: center; } html.is-phone .cs-pick canvas { width: 54px; height: 58px; }
  html.is-phone .cs-info { grid-row: 4; overflow-y: auto; min-height: 0; padding: 26px 14px 14px; margin: 6px 4px 4px; }
  html.is-phone .cs-ribbon { margin-top: -38px; font-size: 22px; }
}
@media (orientation: landscape) {
  html.is-phone .cs-overlay { display: grid; grid-template-columns: 168px minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 10px; }
  html.is-phone .cs-top { grid-column: 1 / -1; }
  html.is-phone .cs-body { display: contents; }
  html.is-phone .cs-strip { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; align-content: start; overflow-y: auto; overflow-x: hidden; gap: 8px; padding: 4px; }
  html.is-phone .cs-pick { width: auto; } html.is-phone .cs-pick canvas { width: 52px; height: 54px; }
  html.is-phone .cs-stage { grid-column: 2; grid-row: 2; min-width: 0; height: 100%; justify-content: flex-end; }
  html.is-phone .cs-stage .cs-big { width: 100%; height: calc(100% - 14px); margin-bottom: 10px; }
  html.is-phone .cs-info { grid-column: 3; grid-row: 2; overflow-y: auto; min-height: 0; padding: 24px 14px 12px; margin: 22px 4px 4px; }
  html.is-phone .cs-ribbon { margin-top: -38px; font-size: 20px; }
}
html.is-phone .cs-overlay { align-items: stretch; }
html.is-phone .cs-top { align-self: start; }
html.is-phone .cs-info { padding-top: 12px !important; }
html.is-phone .cs-info .cs-ribbon { margin-top: 0 !important; font-size: 20px; padding: 2px 30px; }
#fs-btn { position: fixed; z-index: 400; right: max(6px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); width: 34px; height: 34px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .85); background: rgba(10, 40, 80, .45); color: #fff; font-size: 17px; line-height: 1; padding: 0; backdrop-filter: blur(3px); opacity: .75; }
#fs-btn[hidden] { display: none; }
#fs-btn:active { transform: scale(.94); }
body:has(#scr-game.active) #fs-btn { bottom: max(4px, env(safe-area-inset-bottom)); right: 50%; transform: translateX(50%); width: 30px; height: 26px; font-size: 14px; opacity: .55; }

/* ================= events (กิจกรรม) ================= */
.l3-events .hot2 i { background: radial-gradient(circle at 35% 30%, #fff, #c9f0ff); }
.evd { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.evd-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; }
.evd-tab { position: relative; flex: none; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 7px 14px; background: #eaf4ff; color: var(--blue-ink); font: 800 13px var(--font); box-shadow: inset 0 0 0 2px #bfdcff; cursor: pointer; }
.evd-tab i { font-style: normal; font-size: 16px; }
.evd-tab.on { background: linear-gradient(180deg, #5ec2ff, #2b85e0); color: #fff; box-shadow: 0 3px 0 #155fb4; }
.evd-tab .badge.on { position: absolute; top: -5px; right: -3px; }
.evp-head b { font-size: 18px; color: var(--blue-ink); } .evp-head p { margin: 4px 0 0; color: #4f6a8c; font-size: 13px; } .evp-ends { color: #d0495b; font-weight: 700; }
.evp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 18px; align-items: center; margin-top: 10px; }
.evp-side { display: flex; flex-direction: column; gap: 12px; }
.evp-prizes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.evp-pz { display: flex; align-items: center; gap: 6px; background: #f3f8ff; border-radius: 10px; padding: 4px 8px 4px 4px; font-size: 12px; font-weight: 700; color: var(--blue-ink); }
.evp-pz .pic, .ref-prize .pic, .sc-cell .pic, .ev-burst .pic { display: inline-grid; place-items: center; }
.evp-play { display: flex; flex-direction: column; align-items: center; gap: 4px; } .evp-play .btn { width: 100%; } .evp-play small { color: #5a7393; }
.evp-play .btn[disabled] { filter: grayscale(.8); opacity: .6; }
/* wheel */
.wheel { position: relative; width: min(100%, 330px); aspect-ratio: 1; margin: 0 auto; }
.wh-svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 0 rgba(15, 60, 120, .3)); }
.wh-svg .bulb { fill: #fff6c4; } .wheel.spinning .bulb { animation: bulb .25s steps(1) infinite; } .wheel.spinning .bulb.b2 { animation-delay: .125s; }
@keyframes bulb { 50% { fill: #ffd23c; } }
.wh-pin { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 34px solid #ff4d6d; filter: drop-shadow(0 3px 0 #1d4d86); }
/* dice */
.dice { position: relative; height: 240px; display: grid; place-items: center; perspective: 700px; }
.dcube { position: relative; width: 110px; height: 110px; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(32deg); }
.dice.rolling .dcube { } .dice.rolling { animation: dhop 1.9s cubic-bezier(.3,.7,.3,1); }
@keyframes dhop { 0% { transform: translateY(0); } 20% { transform: translateY(-70px); } 45% { transform: translateY(0); } 60% { transform: translateY(-26px); } 75% { transform: translateY(0); } 85% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
.dshadow { position: absolute; bottom: 38px; width: 120px; height: 22px; border-radius: 50%; background: rgba(20, 50, 90, .25); filter: blur(3px); }
.df { position: absolute; inset: 0; border-radius: 22px; background: radial-gradient(circle at 30% 25%, #fff, #ffeef6 70%, #ffd0e6); border: 3px solid #1d4d86; display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px; gap: 4px; box-shadow: inset 0 -6px 0 rgba(29, 77, 134, .12); backface-visibility: hidden; }
.df i { border-radius: 50%; margin: 3px; } .df i.on { background: radial-gradient(circle at 35% 30%, #ff8fb5, #e2245f); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.df.f1 i.on { background: radial-gradient(circle at 35% 30%, #ff7a7a, #d41d3a); transform: scale(1.5); }
.df.f1 { transform: translateZ(55px); } .df.f2 { transform: rotateY(90deg) translateZ(55px); } .df.f3 { transform: rotateY(180deg) translateZ(55px); }
.df.f4 { transform: rotateY(-90deg) translateZ(55px); } .df.f5 { transform: rotateX(90deg) translateZ(55px); } .df.f6 { transform: rotateX(-90deg) translateZ(55px); }
/* scratch */
.scratch { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #fff7d6, #ffe0f0); box-shadow: 0 0 0 4px #fff, 0 0 0 7px #ff9ac8, 0 8px 0 7px #d4609b; }
.sc-idle { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 8px; color: #8a3d68; padding: 20px; } .sc-idle b { font-size: 64px; }
.sc-grid { position: absolute; inset: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border-radius: 14px; font-size: 11px; font-weight: 800; color: var(--blue-ink); text-align: center; gap: 2px; padding: 4px; }
.sc-grid.show .sc-cell.win { background: #fff3b0; box-shadow: 0 0 0 3px #ffb400; animation: pop .5s ease-out; }
.sc-foil { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; transition: opacity .5s; } .sc-foil.gone { opacity: 0; pointer-events: none; }
.sc-all { position: absolute; right: 8px; bottom: 8px; z-index: 2; }
/* prize burst */
.ev-burst { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 5; animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
.ev-burst .rays { position: absolute; width: 140%; aspect-ratio: 1; background: repeating-conic-gradient(rgba(255, 210, 60, .55) 0 10deg, transparent 10deg 24deg); border-radius: 50%; animation: spin 6s linear infinite; mask: radial-gradient(circle, #000 30%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 30%, transparent 68%); }
.ev-burst .pz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border-radius: 22px; padding: 14px 22px; box-shadow: 0 0 0 4px #ffd23c, 0 10px 24px rgba(0, 0, 0, .25); font-size: 18px; color: var(--blue-ink); }
.ev-burst.out { transition: opacity .4s, transform .4s; opacity: 0; transform: scale(.8); }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* referral */
.ref { display: flex; flex-direction: column; gap: 12px; }
.ref-hero { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: center; background: linear-gradient(135deg, #fff4fb, #e9f5ff); border-radius: 18px; padding: 14px; box-shadow: inset 0 0 0 2px #ffd0e8; }
.ref-prize { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .ref-prize b { font-size: 22px; color: #d63384; } .ref-prize small { color: #6a5a8c; font-weight: 700; }
.ref-prize .pic { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle, #fff, #ffd9ef); box-shadow: 0 0 0 3px #fff, 0 0 18px #ff9ad0; }
.ref-prog { display: flex; flex-direction: column; gap: 8px; }
.ref-slots { display: flex; gap: 10px; flex-wrap: wrap; }
.ref-slot { width: 66px; display: flex; flex-direction: column; align-items: center; gap: 2px; } .ref-slot > b, .ref-slot canvas { width: 58px; height: 58px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #bcd7f5; display: grid; place-items: center; color: #9db4d3; font-size: 26px; }
.ref-slot.ok canvas { box-shadow: 0 0 0 3px #7be08f; } .ref-slot small { font-size: 11px; color: #5a7393; font-weight: 700; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-prog .bar { height: 12px; border-radius: 99px; background: #dbe8f7; overflow: hidden; } .ref-prog .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7ab6, #ffb400); border-radius: 99px; transition: width .6s; }
.ref-done { color: #2a8a3a; font-weight: 800; }
.ref-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: inset 0 0 0 2px #bfdcff; }
.ref-code > div { flex: 1; min-width: 140px; } .ref-code small { display: block; color: #5a7393; } .ref-code b { font: 900 24px/1.1 ui-monospace, monospace; letter-spacing: .12em; color: var(--blue-ink); }
.ref-list { display: flex; flex-direction: column; gap: 4px; } .ref-row { display: flex; justify-content: space-between; padding: 4px 10px; border-radius: 8px; background: #f5f8fc; font-size: 13px; } .ref-row.ok { background: #ecffe9; } .ref-row small { color: #7d8ea6; } .ref-row.ok small { color: #2a8a3a; }
.ref-enter .row { display: flex; gap: 8px; } .ref-enter input { flex: 1; min-width: 0; } .ref-enter small, .ref-rule, .ref-by { color: #6d819c; font-size: 12px; }
/* share sheet + result button */
.share-sheet { display: flex; flex-direction: column; gap: 10px; } .sh-text { margin: 0; color: var(--blue-ink); } .sh-url { background: #f1f6fc; padding: 6px 10px; border-radius: 8px; font-size: 12px; word-break: break-all; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.sh-b { border: 0; border-radius: 14px; padding: 12px 8px; font: 800 14px var(--font); color: #fff; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.sh-b.sys { background: #2b85e0; } .sh-b.line { background: #06c755; } .sh-b.fb { background: #1877f2; } .sh-b.x { background: #111; } .sh-b.copy { background: #7d8ea6; }
.res-share-slot:empty { display: none; } .res-share { font-size: 14px; }
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
  .evp-main { grid-template-columns: 1fr; } .ref-hero { grid-template-columns: 1fr; } .dice { height: 190px; }
  .wheel { width: min(100%, 280px); } .scratch { width: min(100%, 300px); }
}
@media (orientation: landscape) and (max-height: 500px) { .evp-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wheel, .scratch { width: min(100%, calc(100dvh - 150px)); } .dice { height: calc(100dvh - 160px); } }
.evp-pz .dn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #ff5d8f; color: #fff; font-size: 11px; margin-right: 4px; }
/* map picker: board-shaped (15:13), no letterbox bars */
.map-car .map-thumb, .map-car .map-thumb[style] { aspect-ratio: 15 / 13 !important; background: transparent !important; }
.map-car .mc-view { flex-basis: 320px; }
/* quick / ranked cards: the original art (white background) fills the card, label on a soft white fade */
.l3-card.big.pvp, .l3-card.big.rk { background: #fff !important; }
.l3-card.big img { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; transform: none !important; filter: none !important; transition: transform .3s; transform-origin: center 40%; }
.l3-card.big:hover img { transform: scale(1.04) !important; }
.l3-card.big::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .88) 70%); pointer-events: none; }
.l3-card.big span, .l3-card.big small { position: relative; z-index: 1; }
/* phones: the quick / ranked cards are short, so the art sits on the right and the label on the left */
@media (orientation: portrait) {
html.is-phone .l3-card.big img { inset: 0 0 0 auto !important; width: 56% !important; height: 100% !important; object-fit: cover !important; object-position: center 30% !important; }
html.is-phone .l3-card.big::after { left: 0; right: auto; top: 0; bottom: 0; width: 62%; height: auto; background: linear-gradient(90deg, #fff 55%, rgba(255, 255, 255, 0)); }
html.is-phone .l3-card.big { align-items: flex-start !important; justify-content: center !important; padding-left: 12px !important; padding-bottom: 0 !important; }
html.is-phone .l3-card.big span, html.is-phone .l3-card.big small { position: relative; z-index: 1; }
}
/* full-screen guide (iPhone: add to Home Screen) */
.install-guide { display: flex; flex-direction: column; gap: 10px; }
.ig-why { margin: 0; color: #4f6a8c; font-size: 13px; line-height: 1.5; }
.ig-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ig-steps li { display: flex; gap: 10px; align-items: flex-start; background: #f1f7ff; border-radius: 12px; padding: 8px 10px; color: var(--blue-ink); font-size: 14px; line-height: 1.45; }
.ig-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2b85e0; color: #fff; display: grid; place-items: center; font-size: 13px; }
.fs-hint { position: fixed; z-index: 450; top: calc(6px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: rgba(10, 40, 80, .88); color: #fff; border-radius: 999px; padding: 5px 6px 5px 14px; font: 700 12px var(--font); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); animation: pop .3s ease-out; white-space: nowrap; }
.fs-hint .fs-x { border: 0; background: none; color: #fff; font-size: 18px; line-height: 1; padding: 0 6px; cursor: pointer; }
/* installed (Home Screen) app on a notched phone: keep the HUD clear of the notch / home bar */
html.standalone body.is-touch .hud-stats, html.standalone body.is-touch .hud-team.left { margin-left: var(--safe-l); }
/* landscape phones: controls scale with the usable height (--ctl-k from main.js) */
@media (orientation: landscape) and (max-height: 520px) {
  body.is-touch .tbtns { transform: scale(var(--ctl-k, 1)) !important; transform-origin: right bottom !important; right: calc(10px + var(--safe-r)) !important; bottom: calc(8px + var(--safe-b)) !important; }
  body.is-touch .joy { transform: scale(var(--ctl-k, 1)); transform-origin: left bottom; }
}
/* very short landscape (browser bars showing): opponents in one compact block at the top, left of the menu button */
html.short-land body.is-touch .hud-team.right { grid-template-columns: repeat(4, 26px) !important; gap: 2px 3px !important; top: 6px !important; right: calc(52px + var(--safe-r)) !important; }
html.short-land body.is-touch .hud-team.right .ptile { width: 26px !important; } html.short-land body.is-touch .hud-team.right .ptile .pic { width: 24px !important; height: 24px !important; border-radius: 6px !important; }
html.short-land body.is-touch .hud-top { top: 4px !important; left: calc(54px + var(--safe-l)) !important; }
html.short-land body.is-touch .hud-stats { top: 54px !important; padding: 3px 6px !important; gap: 1px !important; }
html.short-land body.is-touch .hud-stats .sbar img, html.short-land body.is-touch .hud-stats .abil { width: 14px !important; height: 14px !important; }
html.short-land body.is-touch .hud-stats .segs i { width: 4px !important; height: 8px !important; }
.map-car .mc-view { position: relative; }
/* profile avatar: round, ringed, a soft sky background; the edit badge tucks into the rim */
.me-card canvas.avatar, .l3-top .me-card canvas { width: 46px !important; height: 46px !important; border-radius: 50% !important; background: radial-gradient(circle at 50% 35%, #ffffff, #d9f0ff 55%, #a9d8ff) !important; box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgba(0, 30, 80, .35) !important; }
.me-card .av-edit { right: -3px !important; bottom: -2px !important; width: 17px !important; height: 17px !important; font-size: 10px !important; line-height: 17px !important; }
.me-card { gap: 10px; align-items: center; }
.me-card .nm { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.me-card .sub { white-space: nowrap; }
/* support */
.support { display: flex; flex-direction: column; gap: 10px; } .sp-intro { margin: 0; color: #4f6a8c; font-size: 13px; }
.sp-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-k { border: 0; border-radius: 999px; padding: 6px 12px; background: #eef5ff; color: var(--blue-ink); font: 700 13px var(--font); box-shadow: inset 0 0 0 2px #cfe3fb; cursor: pointer; }
.sp-k.on { background: #2b85e0; color: #fff; box-shadow: 0 3px 0 #155fb4; }
.support textarea { width: 100%; border-radius: 12px; border: 2px solid #cfe3fb; padding: 10px; font: 14px var(--font); resize: vertical; }
.support h4 { margin: 6px 0 0; color: var(--blue-ink); }
.sp-list { display: flex; flex-direction: column; gap: 8px; max-height: 32vh; overflow: auto; }
.sp-t { background: #f6f9fd; border-radius: 12px; padding: 8px 10px; } .sp-t p { margin: 4px 0 0; font-size: 13px; color: #334; white-space: pre-wrap; }
.sp-th { display: flex; gap: 8px; align-items: center; font-size: 13px; } .sp-th small { margin-left: auto; color: #8a9bb3; }
.sp-st { font-size: 11px; font-weight: 800; border-radius: 99px; padding: 1px 8px; background: #ffe7a8; color: #7a5200; } .sp-st.ok { background: #d8f7dd; color: #22733a; } .sp-st.closed { background: #e4e8ee; color: #66758a; }
.sp-reply { margin-top: 6px; background: #e9f7ff; border-left: 3px solid #2b85e0; border-radius: 8px; padding: 6px 8px; font-size: 13px; white-space: pre-wrap; }
/* custom backgrounds set in the admin (Lobby skin page) */
html.skin-login #scr-auth { background: var(--skin-login) center / cover no-repeat !important; }
html.skin-loading #scr-loading { background: var(--skin-loading) center / cover no-repeat !important; }
html.skin-room #scr-room { background: var(--skin-room) center / cover no-repeat !important; }
html.skin-chars .cs-overlay { background: var(--skin-chars) center / cover no-repeat !important; }
html.skin-chars .cs-overlay::before { display: none !important; }
html.skin-result .res2-bg { background-image: var(--skin-result) !important; }
/* dialogs stay clear of notches / camera holes / browser bars (full screen on phones) */
.modal-back { padding: max(14px, calc(env(safe-area-inset-top) + 8px)) max(12px, env(safe-area-inset-right)) max(14px, calc(env(safe-area-inset-bottom) + 8px)) max(12px, env(safe-area-inset-left)); }
.modal-back .popup { max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
html.is-phone:fullscreen .modal-back { padding-top: max(34px, calc(env(safe-area-inset-top) + 12px)); }
html.is-phone:fullscreen .modal-back .popup { max-height: calc(100dvh - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.popup-closebar { justify-content: center; padding-top: 4px !important; padding-bottom: 8px !important; }
.popup-closebar .btn { min-width: 120px; }
html.is-phone .popup-x { width: 36px; height: 36px; }
/* the quick / ranked cards have a 10px "3D" lip under them: keep the create / rooms buttons clear of it */
html.is-phone .l3-modes { row-gap: 18px !important; column-gap: 12px !important; }
@media (orientation: landscape) and (max-height: 500px) { html.is-phone .l3-modes { grid-template-rows: minmax(0, 1fr) 38px !important; padding-bottom: 4px; } }

/* image logo sizes */
@media (max-width: 640px) and (orientation: portrait) { .logo-img { width: min(210px, 52vw); } }
@media (max-height: 500px) and (orientation: landscape) { .logo-img { width: min(190px, 52vh); } .logo.big { margin-top: 6px; } }

/* ---------- lobby chat emoji popup above "ห้องล่าสุด" ---------- */
.l3-chat { position: relative; }
.l3-chat:has(.emo-pop.open) { z-index: 60; }
.l3-chat .chat-form { position: relative; }
.l3-chat .emo-pop { z-index: 61; max-height: min(320px, 60vh); overflow-y: auto; }

/* ---------- rooms panel ---------- */
body:not([data-screen="scr-lobby"]) #rooms-panel { display: none !important; }
#rooms-panel { z-index: 80; }
.rooms .popup-title { display: flex; align-items: center; gap: 10px; }
.rooms-count { background: rgba(255, 255, 255, .25); color: #fff; border-radius: 99px; padding: 1px 10px; font: 800 12px var(--font); }
.room-item { grid-template-columns: 54px 1fr auto; }
.room-item .ri-go { grid-row: 1 / span 2; grid-column: 3; align-self: center; border-radius: 10px; padding: 7px 14px; background: linear-gradient(#5be08f, #22b45f); color: #fff; font: 900 13px var(--font); box-shadow: 0 3px 0 #15803f; white-space: nowrap; }
.room-item .ri-go.full { background: #c9d6e6; box-shadow: 0 3px 0 #9fb2c8; }
.room-item .ri-go.busy { background: linear-gradient(#ff9d9d, #f0465a); box-shadow: 0 3px 0 #b8283a; }
.room-item .meta { grid-column: 2; }
.rooms-foot { display: flex; gap: 10px; padding-top: 10px; }
.rooms-foot .btn { flex: 1; }
.empty-note .en-ic { font-size: 40px; margin-bottom: 6px; }
#btn-refresh { white-space: nowrap; }
html.is-phone #rooms-panel { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); justify-content: center; align-items: stretch; }
html.is-phone #rooms-panel .rooms { width: 100%; max-width: 760px; height: 100%; border-radius: 20px; animation: slideup .2s; }
@keyframes slideup { from { transform: translateY(30px); opacity: 0; } }
html.is-phone #rooms-panel .popup-body { padding: 10px; gap: 8px; }
html.is-phone #rooms-panel .room-tools input { min-width: 0; font-size: 16px; }
html.is-phone #rooms-panel .room-list { grid-template-columns: 1fr; gap: 8px; padding: 2px 2px 6px; }
html.is-phone #rooms-panel .room-item { grid-template-columns: 42px 1fr auto; padding: 8px 10px; gap: 2px 10px; border-radius: 14px; }
html.is-phone #rooms-panel .room-item .no { width: 42px; height: 42px; font-size: 17px; border-radius: 12px; }
html.is-phone #rooms-panel .room-item .meta { font-size: 11px; gap: 4px; }
html.is-phone #rooms-panel .room-item .meta .tag { padding: 1px 6px; }
html.is-phone #rooms-panel .rooms-foot .btn { padding: 10px 6px; font-size: 15px; }
@media (orientation: portrait) { html.is-phone #btn-refresh span { display: none; } }
@media (orientation: landscape) and (max-height: 560px) {
  html.is-phone #rooms-panel .room-list { grid-template-columns: 1fr 1fr; }
  html.is-phone #rooms-panel .popup-title { padding-top: 6px; padding-bottom: 6px; }
  html.is-phone #rooms-panel .popup-body { padding: 8px 10px; }
  html.is-phone #rooms-panel .rooms-foot { padding-top: 6px; }
  html.is-phone #rooms-panel .rooms-foot .btn { padding: 6px; }
}

/* ---------- full-screen how-to (phones) ---------- */
.howto-full { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; color: #173a6a; font-family: var(--font);
  background: radial-gradient(120% 80% at 50% 0%, #8fe0ff 0%, #4fb2f5 45%, #2a7fe0 100%);
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); animation: hfin .22s ease-out; }
.howto-full.out { opacity: 0; transition: opacity .2s; }
@keyframes hfin { from { opacity: 0; transform: scale(1.03); } }
.hf-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; }
.hf-head b { color: #fff; font-size: 20px; font-weight: 900; text-shadow: 0 2px 0 #1a5bb0; }
.hf-skip { border: 0; background: rgba(255, 255, 255, .25); color: #fff; font: 800 14px var(--font); border-radius: 99px; padding: 6px 14px; }
.hf-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hf-track::-webkit-scrollbar { display: none; }
.hf-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 4px 6px; overflow-y: auto; }
.hf-art { flex: none; display: grid; place-items: center; }
@media (orientation: portrait) { .hf-slide:not(.s-items) > :first-child { margin-top: auto; } .hf-slide:not(.s-items) > :last-child { margin-bottom: auto; } }
.hf-txt { background: #fff; border-radius: 22px; padding: 16px 18px; box-shadow: 0 6px 0 rgba(20, 70, 150, .35); }
.hf-txt h2 { margin: 0 0 8px; font-size: 22px; font-weight: 900; color: #1d5fc4; }
.hf-txt p { margin: 6px 0; font-size: 15px; line-height: 1.55; }
.hf-txt ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.hf-txt li { margin: 3px 0; }
.hf-txt b { color: #e0447c; }
.hf-sub { color: #5a7393; font-size: 13px !important; margin-top: -2px !important; }
.hf-steps { display: flex; align-items: center; gap: 6px; padding: 10px 0; }
.hf-steps > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hf-steps i { width: 84px; height: 84px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; font-size: 46px; box-shadow: 0 6px 0 rgba(20, 70, 150, .35); }
.hf-steps i img { width: 64%; height: 64%; object-fit: contain; }
.hf-steps i.trap { background: radial-gradient(circle at 32% 28%, #fff 0 10%, #d8f3ff 22%, #8fd6ff 60%, #5cbcff 100%); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .8), 0 6px 0 rgba(20, 70, 150, .35); }
.hf-steps i.trap img { width: 70%; height: 80%; opacity: .9; }
.hf-steps b { color: #fff; font-size: 17px; font-weight: 900; text-shadow: 0 2px 0 #1a5bb0; }
.hf-arr { color: #fff; font-size: 38px; font-weight: 900; margin-bottom: 26px; }
.hf-pad { position: relative; width: 100%; max-width: 520px; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 6px 0 rgba(20, 70, 150, .35); background: #2f5f2f; }
.hf-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.9); }
.hf-joy { position: absolute; left: 6%; bottom: 13%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .25); border: 3px solid rgba(255, 255, 255, .8); display: grid; place-items: center; }
.hf-joy span { width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfe8ff); box-shadow: 0 3px 0 rgba(0, 40, 90, .4); animation: hfjoy 2.4s ease-in-out infinite; }
@keyframes hfjoy { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(40%, 0); } 50% { transform: translate(0, -40%); } 75% { transform: translate(-40%, 0); } }
.hf-joy em, .hf-btns em { position: absolute; font-style: normal; font: 800 11px var(--font); color: #fff; background: rgba(10, 40, 80, .75); border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
.hf-joy em { top: -22px; left: 50%; transform: translateX(-50%); }
.hf-btns { position: absolute; right: 4%; bottom: 13%; width: 40%; aspect-ratio: 1.15; }
.hf-btns .b { position: absolute; display: grid; place-items: center; }
.hf-btns .b i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font-style: normal; background: radial-gradient(circle at 35% 30%, #fff, #d6ebff); border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0, 40, 90, .45); font-size: 18px; }
.hf-btns .b i img { width: 62%; height: 62%; object-fit: contain; }
.hf-btns .b em { bottom: -18px; left: 50%; transform: translateX(-50%); }
.hf-btns .big { right: 0; bottom: 0; width: 46%; aspect-ratio: 1; }
.hf-btns .big i { background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc928 60%, #f29b00); animation: hfpress 2.4s ease-in-out infinite; }
@keyframes hfpress { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(.88); } }
.hf-btns .n { right: 52%; bottom: 0; width: 28%; aspect-ratio: 1; }
.hf-btns .it { right: 6%; bottom: 58%; width: 28%; aspect-ratio: 1; }
.hf-btns .sk { right: 48%; bottom: 52%; width: 26%; aspect-ratio: 1; }
.hf-btns .sk i { background: radial-gradient(circle at 35% 30%, #ffd1ea, #ff5fae); color: #fff; }
.hf-trapart { position: relative; padding: 8px 0 4px; }
.hf-trapart .bub { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 26%, #fff 0 8%, rgba(255, 255, 255, .5) 16%, rgba(150, 220, 255, .45) 55%, rgba(255, 255, 255, .8) 74%, rgba(255, 255, 255, .15) 78%); box-shadow: 0 8px 20px rgba(0, 40, 100, .3); animation: hfwob 1.6s ease-in-out infinite; }
.hf-trapart .bub img { width: 62%; }
@keyframes hfwob { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.05, .96); } }
.hf-trapart .tm { position: absolute; right: -12px; top: 4px; background: #ff4f8a; color: #fff; font: 900 15px var(--font); border-radius: 99px; padding: 3px 10px; border: 3px solid #fff; }
.hf-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hf-items > div { display: flex; gap: 8px; align-items: center; background: #f2f8ff; border-radius: 12px; padding: 6px 8px; min-width: 0; }
.hf-items img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.hf-items b { display: block; color: #1d5fc4 !important; font-size: 13px; }
.hf-items small { display: block; font-size: 11px; line-height: 1.3; color: #4d6585; }
.s-items .hf-txt { flex: 1; min-height: 0; overflow-y: auto; }
.hf-tipsart { display: flex; gap: 12px; padding: 8px 0; }
.hf-tipsart img { width: 64px; height: 64px; background: #fff; border-radius: 18px; padding: 8px; box-shadow: 0 5px 0 rgba(20, 70, 150, .35); animation: hfbob 1.8s ease-in-out infinite; }
@keyframes hfbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hf-tipsart img:nth-child(2) { animation-delay: .3s; } .hf-tipsart img:nth-child(3) { animation-delay: .6s; }
.hf-go { display: block; width: 100%; margin-top: 14px; border: 4px solid #fff; border-radius: 99px; padding: 12px; font: 900 20px var(--font); color: #fff; background: linear-gradient(#ffd84a, #ff9a1f); box-shadow: 0 6px 0 #c4640a; -webkit-text-stroke: 4px #c4500a; paint-order: stroke fill; }
.hf-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px 2px; }
.hf-nav { width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; background: #2b8de4; color: #fff; font: 900 26px/1 var(--font); box-shadow: 0 4px 0 #155fb4; }
.hf-nav.next { background: linear-gradient(#ffd84a, #ff9a1f); box-shadow: 0 4px 0 #c4640a; }
.hf-dots { display: flex; gap: 8px; }
.hf-dots button { width: 10px; height: 10px; border-radius: 99px; border: 0; padding: 0; background: rgba(255, 255, 255, .5); transition: width .2s; }
.hf-dots button.on { width: 26px; background: #fff; }
@media (orientation: landscape) {
  .hf-slide { flex-direction: row; align-items: center; gap: 16px; padding: 2px 8px; }
  .hf-slide .hf-art { flex: 1 1 50%; min-width: 0; }
  .hf-slide .hf-txt { flex: 1 1 50%; max-height: 100%; overflow-y: auto; }
  .s-items { flex-direction: column; align-items: stretch; }
  .s-items .hf-txt { flex: 1; max-height: none; }
  .hf-items { grid-template-columns: repeat(3, 1fr); }
  .hf-pad { width: min(100%, calc(58vh * 1.6)); height: auto; }
  .hf-head { padding-bottom: 2px; } .hf-foot { padding-top: 4px; } .hf-nav { width: 40px; height: 40px; font-size: 22px; }
  .hf-steps i { width: 70px; height: 70px; font-size: 36px; }
  .hf-trapart .bub { width: 120px; height: 120px; }
  .hf-txt { padding: 12px 16px; } .hf-txt h2 { font-size: 19px; margin-bottom: 4px; } .hf-txt p, .hf-txt ul { font-size: 14px; line-height: 1.45; }
  .hf-go { padding: 8px; font-size: 17px; margin-top: 8px; }
}

.emo-pop.float { position: fixed; z-index: 1500; bottom: auto; overflow-y: auto; overscroll-behavior: contain; }

/* ---------- room screen on phones: start button never covers the map ---------- */
.emo-pop > button.txt { width: auto; padding: 0 8px; font: 900 15px var(--font); color: #1d4d86; }
@media (orientation: portrait) {
  html.is-phone #scr-room .room-grid { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html.is-phone #scr-room #btn-start { position: fixed; left: 14px; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; height: 60px; z-index: 30; font-size: 24px; box-shadow: 0 5px 0 #c98a00, 0 10px 24px rgba(0, 30, 80, .35); }
  html.is-phone #scr-room::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: calc(86px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(70, 150, 230, 0), rgba(40, 110, 200, .55)); pointer-events: none; z-index: 29; }
}
@media (orientation: landscape) and (max-height: 560px) {
  html.is-phone #scr-room .topbar .me-card { display: none; }
  html.is-phone #scr-room .topbar { padding-right: 190px; }
  html.is-phone #scr-room #btn-start { position: fixed; top: calc(6px + env(safe-area-inset-top)); right: calc(12px + var(--safe-r, 0px)); bottom: auto; width: auto; min-width: 140px; max-width: 46vw; height: 42px; padding: 0 22px; font-size: 20px; z-index: 30; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.is-phone body.room-ranked #scr-room #btn-start { font-size: 14px; }
  html.is-phone #scr-room .room-side { padding-bottom: 8px; }
}