:root {
  --night: #241030;
  --night-2: #331842;
  --night-3: #46245a;
  --line: rgba(251, 245, 232, 0.14);
  --wood: #9A6634;
  --wood-dark: #5E3A1B;
  --ivory: #FBF5E8;
  --ivory-dim: rgba(251, 245, 232, 0.72);
  --ink: #2B1B2F;
  --gold: #F3BE43;
  --red: #D63B30;
  --green: #2C9A4E;
  --yellow: #F1B50A;
  --blue: #2C6FD4;
  --danger: #FF6B5E;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --font: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ivory);
  background: var(--night);
  background-image:
    radial-gradient(120% 70% at 50% 0%, #3d1c4f 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, #2e1440 0%, transparent 70%);
  background-attachment: fixed;
  font-size: 16px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
img { display: block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 12px 22px;
  font-weight: 700; font-size: 17px; line-height: 1;
  background: var(--gold); color: var(--ink);
  box-shadow: 0 4px 0 #b4851c;
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b4851c; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.ghost { background: transparent; color: var(--ivory); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:active { transform: none; background: var(--night-3); }
.btn.danger { background: var(--danger); color: #fff; box-shadow: 0 4px 0 #b13d33; }
.btn.small { padding: 8px 14px; font-size: 15px; }
.btn.block { width: 100%; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 14px; border: 0;
  background: var(--night-2); color: var(--ivory);
  display: inline-grid; place-items: center; position: relative;
  box-shadow: inset 0 0 0 1px var(--line);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.on { background: var(--green); }
.icon-btn.muted { background: var(--danger); }
.icon-btn .badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--danger); color: #fff; font-size: 12px; line-height: 18px; font-weight: 700;
}

/* ---------- login ---------- */
.login {
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 20px; text-align: center; gap: 18px;
}
.login .mark { width: 132px; height: 132px; border-radius: 28px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); animation: splash-in .9s ease-out both; }
@keyframes spin-in { from { transform: rotate(-200deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.wordmark { font-size: 46px; font-weight: 800; line-height: .95; letter-spacing: -.5px; margin: 0; }
.wordmark span { display: block; font-size: 22px; font-weight: 600; letter-spacing: 6px; color: var(--gold); margin-top: 6px; }
.login p { color: var(--ivory-dim); margin: 0; max-width: 300px; }
.login .gbtn { min-height: 44px; }
.dev-login { display: flex; gap: 8px; width: 100%; max-width: 320px; }
.dev-note { font-size: 13px; color: var(--ivory-dim); max-width: 320px; }

.field {
  width: 100%; padding: 12px 16px; border-radius: 14px; border: 0;
  background: var(--ivory); color: var(--ink); font-weight: 600;
}
.field::placeholder { color: #9b8c94; }

/* ---------- home ---------- */
.home { max-width: 560px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px 40px; }
.home-top { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.home-top .mark { width: 40px; height: 40px; }
.home-top h1 { font-size: 24px; margin: 0; flex: 1; font-weight: 800; }
.me-chip { display: flex; align-items: center; gap: 8px; background: var(--night-2); border: 0; border-radius: 999px; padding: 4px 12px 4px 4px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.me-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 12px; }
.code-field { letter-spacing: 6px; font-size: 22px; text-align: center; font-weight: 800; }
.section-title { font-size: 20px; font-weight: 700; margin: 28px 0 10px; }
.room-list { display: grid; gap: 10px; }
.room-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border: 0; border-radius: var(--r-md); background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.room-item:active { background: var(--night-3); }
.room-dot { width: 42px; height: 42px; border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; flex: none; }
.room-dot i:nth-child(1) { background: var(--green); } .room-dot i:nth-child(2) { background: var(--yellow); }
.room-dot i:nth-child(3) { background: var(--red); } .room-dot i:nth-child(4) { background: var(--blue); }
.room-item b { display: block; font-size: 18px; }
.room-item small { color: var(--ivory-dim); font-size: 14px; }
.room-item .live { margin-left: auto; font-size: 13px; color: var(--ink); background: var(--gold); border-radius: 999px; padding: 2px 10px; font-weight: 700; white-space: nowrap; }
.empty { color: var(--ivory-dim); padding: 18px; border-radius: var(--r-md); border: 2px dashed var(--line); text-align: center; }

/* ---------- room ---------- */
.room { height: 100%; display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; }
.side-left { display: contents; }
.side-left .topbar { order: 1; }
.stage { order: 2; }
#under { order: 3; }
.side-left .footbar { order: 4; }
.side-right { display: none; }
.logstrip div:not(:nth-last-child(-n+2)) { display: none; }
.chat-empty { color: var(--ivory-dim); font-size: 14px; margin: 4px 0; }
.topbar { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 12px 6px; }
.topbar .title { flex: 1; min-width: 0; }
.topbar .title b { display: block; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.code-btn { border: 0; background: none; padding: 0; color: var(--gold); font-weight: 700; letter-spacing: 2px; font-size: 14px; }
.conn { font-size: 12px; color: var(--danger); }

.stage { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 8px; min-height: 0; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; min-height: 64px; }
.dock { display: flex; justify-content: center; }
.dock .dicebox { padding: 5px; border-radius: 16px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 2px var(--c); }
.dock.from-left { justify-content: flex-start; }
.dock.from-right { justify-content: flex-end; }
.board-wrap {
  position: relative; width: min(100%, calc(100dvh - 330px)); min-width: 280px; aspect-ratio: 1; margin: 8px auto;
  padding: 10px; border-radius: 18px;
  background: linear-gradient(145deg, #b47a43, var(--wood) 40%, var(--wood-dark));
  box-shadow: 0 14px 30px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.25);
}
.board-wrap svg { width: 100%; height: 100%; display: block; border-radius: 6px; overflow: visible; }

.tok { transition: transform .11s linear; }
.tok.slow { transition: transform .38s cubic-bezier(.5,-0.4,.5,1.4); }
.tok .hit { cursor: default; }
.tok.mine .hit { cursor: pointer; }
.tok.hop .tok-in { animation: hop .11s ease-out; }
@keyframes hop { 50% { transform: translateY(-6px); } }
.marks .missed { fill: none; stroke: #FF3B30; stroke-width: 4; animation: pulse .5s ease-in-out infinite alternate; }
.marks .kill { fill: rgba(255,255,255,.6); animation: burst .5s ease-out forwards; }
@keyframes pulse { from { stroke-opacity: 1; r: 18; } to { stroke-opacity: .3; r: 23; } }
@keyframes burst { from { r: 8; opacity: 1; } to { r: 40; opacity: 0; } }

/* player panels */
.panel {
  min-width: 0; max-width: 100%; overflow: hidden; display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: 18px; border: 0; background: transparent; text-align: left;
}
.panel.right { flex-direction: row-reverse; text-align: right; justify-self: end; }
.panel .avatar { position: relative; width: 52px; height: 52px; flex: none; }
.panel .avatar img, .panel .avatar .ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: var(--night-3); }
.panel .avatar .ph { display: grid; place-items: center; font-size: 26px; color: var(--ivory-dim); border-style: dashed; }
.panel .ring { position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; }
.panel .meta { min-width: 0; flex: 1; }
.panel .meta b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.panel .meta small { display: block; font-size: 12px; color: var(--ivory-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .tags { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.panel.right .tags { justify-content: flex-end; }
.panel .tag { white-space: nowrap; display: inline-block; font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--c); color: #fff; margin-top: 2px; }
.panel .tag.afk { background: var(--danger); }
.panel.active .avatar img { box-shadow: 0 0 0 3px var(--night), 0 0 18px var(--c); }
.panel.empty-seat { opacity: .85; }
.panel.dim { opacity: .45; }
.panel.click { cursor: pointer; }

.dicebox { display: flex; gap: 6px; align-items: center; flex: none; }
.die {
  --s: 42px;
  width: var(--s); height: var(--s); border-radius: 12px; border: 0; padding: 7px;
  background: radial-gradient(120% 120% at 30% 20%, #ffffff 0%, #f1f1f1 45%, #cfcfcf 100%);
  box-shadow: inset -3px -4px 6px rgba(0,0,0,.18), inset 2px 2px 3px rgba(255,255,255,.9), 0 6px 12px rgba(0,0,0,.4);
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); flex: none;
}
.die i { width: 72%; height: 72%; margin: auto; border-radius: 50%; background: transparent; }
.die i.on { background: radial-gradient(circle at 40% 35%, #444 0%, #111 70%); box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.die.small { --s: 34px; border-radius: 9px; padding: 5px; box-shadow: 0 3px 0 #b9ab97; }
.die.tiny { --s: 22px; border-radius: 6px; padding: 3px; box-shadow: 0 2px 0 #b9ab97; opacity: .8; }
.dock .dicebox { flex-direction: column; gap: 4px; }
.dice-row { display: flex; gap: 6px; justify-content: center; }
.dice-row.wrap { flex-wrap: wrap; max-width: 104px; }
.dicebox.rollable { cursor: pointer; }
.dice-cap { font-size: 11px; color: var(--ivory-dim); text-align: center; line-height: 1.1; max-width: 104px; }
.pool.mini { gap: 3px; max-width: 110px; justify-content: center; }
.die.sel { outline: 3px solid var(--gold); outline-offset: 2px; transform: translateY(-3px); }
.die.used { opacity: .35; }
.die.ready { animation: nudge 1s ease-in-out infinite; }
.die.rolling { animation: tumble .12s linear infinite; }
.die.q { place-items: center; display: grid; grid-template: 1fr / 1fr; color: var(--ink); font-size: 24px; font-weight: 800; }
@keyframes nudge { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg) scale(1.06); } 20% { transform: rotate(10deg) scale(1.06); } 30% { transform: rotate(0); } }
@keyframes tumble { 0% { transform: perspective(200px) rotate3d(1, 1, 0, 0deg) translateY(0); } 50% { transform: perspective(200px) rotate3d(1, .4, .3, 180deg) translateY(-8px); } 100% { transform: perspective(200px) rotate3d(1, 1, 0, 360deg) translateY(0); } }
.pool { display: flex; gap: 5px; flex-wrap: wrap; max-width: 120px; }
.panel.right .pool { justify-content: flex-end; }

/* log strip */
.logstrip {
  margin: 4px 8px 0; padding: 8px 12px; border-radius: 12px; border: 0; background: rgba(0,0,0,.25);
  font-size: 14px; color: var(--ivory-dim); text-align: left; min-height: 40px; width: calc(100% - 16px);
}
.logstrip b { color: var(--ivory); font-weight: 600; }

.lobby-card { margin: 6px 8px 0; padding: 14px; border-radius: var(--r-md); background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 12px; }
.lobby-card p { margin: 0; color: var(--ivory-dim); font-size: 15px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--night); border-radius: 999px; padding: 4px; }
.seg button { border: 0; background: none; padding: 9px; border-radius: 999px; font-weight: 700; color: var(--ivory-dim); }
.seg button.on { background: var(--ivory); color: var(--ink); }
.seg button[disabled] { cursor: default; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.footbar { display: flex; justify-content: center; gap: 10px; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }

/* emoji float */
.float-emoji { position: fixed; font-size: 44px; pointer-events: none; z-index: 50; animation: floatup 2.2s ease-out forwards; text-align: center; }
.float-emoji small { display: block; font-size: 12px; color: var(--ivory); background: rgba(0,0,0,.5); border-radius: 8px; padding: 0 6px; }
@keyframes floatup { 0% { transform: translateY(20px) scale(.5); opacity: 0; } 15% { transform: translateY(0) scale(1.1); opacity: 1; } 100% { transform: translateY(-140px) scale(1); opacity: 0; } }

/* sheets */
.sheet-back { position: fixed; inset: 0; background: rgba(10, 3, 14, .6); z-index: 40; display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: 100%; max-width: 560px; max-height: 86dvh; overflow: auto; background: var(--night-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 8px 18px max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0,0,0,.5); animation: rise .2s cubic-bezier(.2,.9,.3,1);
}
@keyframes rise { from { transform: translateY(40px); opacity: .5; } }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 10px; }
.sheet h2 { margin: 0 0 12px; font-size: 22px; }
.sheet h3 { margin: 18px 0 8px; font-size: 16px; color: var(--ivory-dim); font-weight: 600; }
.list { display: grid; gap: 8px; }
.li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--night); width: 100%; border: 0; text-align: left; }
.li img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.li .grow { flex: 1; min-width: 0; }
.li .grow small { display: block; color: var(--ivory-dim); font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #6d5a74; display: inline-block; margin-right: 6px; }
.dot.on { background: #4cd964; }
.toggle { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.toggle span { flex: 1; }
.toggle small { display: block; color: var(--ivory-dim); font-size: 13px; }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; border-radius: 15px; background: #5d4a66; transition: .15s; }
.switch i::after { content: ''; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .15s; }
.switch input:checked + i { background: var(--green); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--gold); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--night); font-size: 20px; font-weight: 700; }
.stepper b { min-width: 42px; text-align: center; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.chatlog { display: flex; flex-direction: column; gap: 6px; max-height: 46dvh; overflow: auto; padding: 4px 0 10px; }
.msg { max-width: 82%; padding: 6px 12px; border-radius: 14px; background: var(--night); align-self: flex-start; }
.msg.me { align-self: flex-end; background: var(--night-3); }
.msg small { display: block; color: var(--gold); font-size: 12px; font-weight: 700; }
.chatform { display: flex; gap: 8px; }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.emoji-grid button { font-size: 30px; border: 0; background: var(--night); border-radius: 14px; padding: 8px 0; }
.loglist { display: grid; gap: 4px; font-size: 14px; color: var(--ivory-dim); }
.score-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.score-table th, .score-table td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line); }
.score-table th:first-child, .score-table td:first-child { text-align: left; }
.score-table th { color: var(--ivory-dim); font-weight: 600; font-size: 13px; }

.profile-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.profile-photo img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); }

/* result */
.result { text-align: center; padding: 10px 0 4px; }
.result .trophy { font-size: 60px; line-height: 1; }
.result h2 { font-size: 28px; margin: 6px 0; }
.ranks { display: grid; gap: 6px; margin: 14px 0; text-align: left; }
.ranks .li b { width: 26px; text-align: center; color: var(--gold); }

#toast {
  position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translate(-50%, -150%);
  background: var(--ivory); color: var(--ink); padding: 10px 18px; border-radius: 999px; font-weight: 600;
  z-index: 60; transition: transform .25s; max-width: 92vw; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
#toast.show { transform: translate(-50%, 0); }
#toast.err { background: var(--danger); color: #fff; }

.loading { position: fixed; inset: 0; display: grid; place-items: center; }
.loading img { width: 72px; animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 1100px) {
  .room {
    max-width: none; height: 100dvh; display: grid; gap: 18px; padding: 16px;
    grid-template-columns: 280px minmax(0, 1fr) 320px;
  }
  .side-left { order: 1; }
  .stage { order: 2; }
  .side-right { order: 3; }
  .side-left, .side-right {
    display: flex; flex-direction: column; min-height: 0; gap: 12px;
    background: rgba(0,0,0,.18); border-radius: var(--r-lg); padding: 14px;
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .side-left .topbar { padding: 0; }
  .side-left .topbar .title b { white-space: normal; }
  .side-left #under { flex: 1; min-height: 0; overflow: auto; }
  .side-left .footbar { padding: 0; flex-wrap: wrap; justify-content: flex-start; }
  .lobby-card, .logstrip { margin: 0; width: 100%; }
  .logstrip { display: grid; gap: 4px; }
  .logstrip div:not(:nth-last-child(-n+2)) { display: block; }
  .only-narrow { display: none !important; }
  .stage { padding: 0; justify-content: center; align-items: center; }
  .stage .prow { width: min(100%, calc(100dvh - 190px)); }
  .board-wrap { width: min(100%, calc(100dvh - 190px)); margin: 6px auto; }
  .chat-head { font-size: 20px; font-weight: 800; }
  .side-right .chatlog { flex: 1; max-height: none; }
  .quick-emoji { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .quick-emoji button { border: 0; background: var(--night); border-radius: 10px; font-size: 22px; padding: 4px 0; }
  .quick-emoji button:active { transform: scale(.9); }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .board-wrap { width: min(100%, calc(100dvh - 300px)); }
  .panel .avatar, .panel .avatar img, .panel .avatar .ph { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* wordmark */
.wordmark .lw { display: flex; justify-content: center; gap: 2px; font-size: 58px; line-height: 1; }
.wordmark .lw i {
  font-style: normal; color: var(--c); paint-order: stroke fill;
  -webkit-text-stroke: 7px var(--ivory); text-shadow: 0 6px 0 rgba(0,0,0,.35);
  display: inline-block; transform: rotate(-4deg);
}
.wordmark .lw i:nth-child(even) { transform: rotate(4deg) translateY(3px); }

/* offline setup */
.home .lead { color: var(--ivory-dim); margin: -8px 0 16px; }
.home .hint { color: var(--ivory-dim); font-size: 14px; margin: 8px 0 0; }
.home.offline .home-top h1 { text-align: center; }
.seat-row {
  display: grid; grid-template-columns: 14px 64px 1fr; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--night-2); box-shadow: inset 4px 0 0 var(--c), inset 0 0 0 1px var(--line);
}
.seat-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg.three button { padding: 7px 4px; font-size: 14px; }
.small-field { grid-column: 2 / -1; padding: 8px 12px; }
.seg button[disabled] { opacity: .4; }
.room.offline .side-right { display: none; }
@media (min-width: 1100px) {
  .room.offline { grid-template-columns: 280px minmax(0, 1fr); }
}

/* turn arrow over the active dice */
.dock { position: relative; }
.turn-arrow {
  position: absolute; left: 50%; width: 30px; height: 34px; margin-left: -15px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, #b6ff8a, #3fbf3a 70%, #2a8a28);
  clip-path: polygon(30% 0, 70% 0, 70% 50%, 100% 50%, 50% 100%, 0 50%, 30% 50%);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.dock.bot .turn-arrow { top: -34px; animation: arrow-down .8s ease-in-out infinite; }
.dock.top .turn-arrow { bottom: -34px; transform: rotate(180deg); animation: arrow-up .8s ease-in-out infinite; }
.dock.from-left .turn-arrow, .dock.from-right .turn-arrow { left: 50%; }
@keyframes arrow-down { 50% { translate: 0 6px; } }
@keyframes arrow-up { 50% { translate: 0 -6px; } }

/* ---------- player panels with their own dice slot ---------- */
.prow { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 92px; }
.panel { display: flex; align-items: center; gap: 8px; padding: 2px; max-width: 50%; overflow: visible; }
.panel.right { flex-direction: row-reverse; text-align: center; }
.panel .who { display: flex; flex-direction: column; align-items: center; width: 74px; text-align: center; flex: none; }
.panel .pname { font-size: 13px; line-height: 1.2; margin-top: 3px; max-width: 74px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .who small { font-size: 11px; color: var(--ivory-dim); line-height: 1.1; }
.panel .tags { justify-content: center; margin-top: 2px; }
.panel.right .tags { justify-content: center; }
.panel.ghost-seat { width: 74px; }
.panel.empty-seat .who small { white-space: nowrap; }
.slot { position: relative; padding: 6px; border-radius: 16px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px rgba(255,255,255,.06); transition: background .2s, box-shadow .2s; }
.slot.on { background: color-mix(in srgb, var(--c) 85%, #000); box-shadow: 0 0 18px var(--c), inset 0 0 0 3px rgba(255,255,255,.55); }
.slot .dicebox { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; box-shadow: none; }
.die.idle { --s: 36px; opacity: .35; filter: grayscale(1); }
.die.landed { animation: land .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes land { 0% { transform: scale(1.5) rotate(-25deg); } 100% { transform: none; } }
.dicebox.rollable .die { cursor: pointer; }
.panel .turn-arrow { left: 50%; }
.panel.bot .turn-arrow { top: -40px; bottom: auto; transform: none; animation: arrow-down .8s ease-in-out infinite; }
.panel.top .turn-arrow { bottom: -40px; top: auto; transform: rotate(180deg); animation: arrow-up .8s ease-in-out infinite; }
@media (min-width: 1100px) {
  .stage .prow { width: min(100%, calc(100dvh - 230px)); }
  .board-wrap { width: min(100%, calc(100dvh - 230px)); }
}

/* movable token highlight (house rule) */
.tok .glow { fill: none; stroke: transparent; stroke-width: 3; }
.tok.can .glow { stroke: #fff; animation: glow .7s ease-in-out infinite alternate; }
@keyframes glow { from { stroke-opacity: 1; } to { stroke-opacity: .25; } }

/* login form */
.id-login { display: grid; gap: 10px; width: 100%; max-width: 330px; }
.login .or { color: var(--ivory-dim); font-size: 14px; }

/* the game screen never scrolls, zooms or bounces */
html, body { touch-action: manipulation; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body.lock { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
body.lock .sheet, body.lock .chatlog, body.lock .side-left #under { touch-action: pan-y; }
.room, .room * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.room input, .room textarea { -webkit-user-select: text; user-select: text; }
.room svg { touch-action: none; }
.room { height: 100dvh; }
.stage { justify-content: center; }
@media (max-width: 1099px) {
  .room { justify-content: space-between; }
  .stage { flex: 1; }
  .board-wrap { width: min(100%, calc(100dvh - 300px)); }
}

.login .note { font-size: 13px; color: var(--ivory-dim); margin: 0; }

/* calmer, more physical dice */
.die.rolling { animation: tumble .34s linear infinite; }
.die.landed { animation: land .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes land { 0% { transform: scale(1.35) rotate(-30deg) translateY(-10px); } 60% { transform: scale(.95) rotate(4deg); } 100% { transform: none; } }
.die.blank { display: grid; place-items: center; grid-template: 1fr / 1fr; }
.die.blank .blank-mark { width: 38%; height: 38%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f3be43, #b4851c); opacity: .85; }

/* toast fully hidden when not showing */
#toast { opacity: 0; visibility: hidden; transform: translate(-50%, -220%); transition: transform .25s, opacity .25s, visibility .25s; }
#toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* dice always stay in one horizontal line */
.dice-row, .dice-row.wrap { flex-wrap: nowrap; max-width: none; }
.dice-row .die { flex: none; }
.dice-row.many { gap: 4px; }
.dice-row.many .die { --s: 30px; padding: 4px; border-radius: 8px; }
.pool.mini { flex-wrap: nowrap; max-width: none; }
.panel.active { max-width: 64%; }
.panel:not(.active) { flex-shrink: 1; min-width: 0; }
.slot { flex: none; }

/* small phones: only the active player's dice box is shown */
@media (max-width: 600px) {
  .slot:not(.on) { display: none; }
  .panel.active { max-width: 78%; }
}

/* movable tokens: thick golden ring, visible on every colour */
.tok .glow { stroke-width: 5; }
.tok.can .glow { stroke: #FFD24A; fill: rgba(255, 210, 74, .28); filter: drop-shadow(0 0 3px #FFB800); animation: glow-gold .65s ease-in-out infinite alternate; }
@keyframes glow-gold { from { stroke-opacity: 1; fill-opacity: 1; } to { stroke-opacity: .45; fill-opacity: .35; } }

/* player count picker */
.seg.four { grid-template-columns: repeat(4, 1fr); }
.seg.four button { padding: 9px 2px; font-size: 14px; white-space: nowrap; }

/* emoji reaction bubble */
.emoji-bubble {
  position: fixed; z-index: 55; pointer-events: none; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: #fff; border-radius: 22px; padding: 6px 12px 4px; box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 3px var(--c, var(--gold));
  animation: bubble 3.1s cubic-bezier(.2,1.4,.4,1) forwards;
}
.emoji-bubble.down { transform: translate(-50%, 0); }
.emoji-bubble.center { transform: translate(-50%, -50%); }
.emoji-bubble .em { font-size: 44px; line-height: 1.1; }
.emoji-bubble small { font-size: 13px; font-weight: 700; color: var(--ink); }
.emoji-bubble::after {
  content: ''; position: absolute; left: 50%; width: 14px; height: 14px; background: #fff; transform: translateX(-50%) rotate(45deg);
}
.emoji-bubble.up::after { bottom: -6px; }
.emoji-bubble.down::after { top: -6px; }
.emoji-bubble.center::after { display: none; }
@keyframes bubble {
  0% { opacity: 0; scale: .3; }
  12% { opacity: 1; scale: 1.15; }
  20% { scale: 1; }
  85% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: .8; }
}

/* emoji bubble placement: beside the photo, never over the board */
.emoji-bubble.right { transform: translate(0, -50%); }
.emoji-bubble.left { transform: translate(-100%, -50%); }
.emoji-bubble.top { transform: translate(-50%, -50%); }
.emoji-bubble.right::after { top: 50%; bottom: auto; left: -6px; transform: translateY(-50%) rotate(45deg); }
.emoji-bubble.left::after { top: 50%; bottom: auto; left: auto; right: -13px; transform: translateY(-50%) rotate(45deg); }
.emoji-bubble.top::after { display: none; }
.emoji-bubble .em { font-size: 34px; }

/* emoji over the player's own yard corner / board centre */
.emoji-bubble.center { transform: translate(-50%, -50%); }
.emoji-bubble.center::after { display: none; }
.emoji-bubble .em { font-size: 40px; }
.emoji-bubble.popping { animation: pop-out .25s ease-in forwards; }
@keyframes pop-out { to { opacity: 0; scale: 1.6; } }
.spark {
  position: fixed; z-index: 56; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 6px currentColor; animation: spark .62s cubic-bezier(.1,.7,.3,1) forwards;
}
@keyframes spark { 0% { transform: translate(0, 0) scale(1.2); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* player emoji right under their name */
.emoji-bubble.under { transform: translate(-50%, 0); padding: 3px 9px 2px; border-radius: 16px; z-index: 57; }
.emoji-bubble.under .em { font-size: 30px; }
.emoji-bubble.under::after { display: block; top: -6px; bottom: auto; left: 50%; transform: translateX(-50%) rotate(45deg); }

/* ---------- desktop sidebar fixes ---------- */
@media (min-width: 1100px) {
  .room { grid-template-columns: 300px minmax(0, 1fr) 320px; }
  .side-left .topbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 44px; align-items: center; gap: 8px; }
  .side-left .topbar .title b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-left .code-btn { white-space: nowrap; letter-spacing: 1px; font-size: 13px; }
  .side-left .seg.four { grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 18px; }
  .side-left .seg.four button { border-radius: 14px; }
  .lobby-card { min-width: 0; }
}
/* never let a picker push its card wider than the screen */
.seg { min-width: 0; }
.seg button { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
  .seg.four button { font-size: 12.5px; padding: 8px 1px; }
}

/* ---------- short screens ---------- */
@media (max-width: 1099px) {
  /* lobby: nothing squeezes, the page scrolls instead */
  .room:not(.ingame) { height: auto; min-height: 100dvh; justify-content: flex-start; }
  .room:not(.ingame) .stage { flex: 0 0 auto; }
  /* game: everything fits on one screen, the board gives way */
  .room.ingame { height: 100dvh; overflow: hidden; }
  .room.ingame .stage { flex: 1 1 auto; min-height: 0; }
  .room.ingame .board-wrap { width: min(100%, calc(100dvh - 330px)); min-width: 0; }
}
@media (max-width: 1099px) and (max-height: 700px) {
  .room.ingame .prow { min-height: 74px; }
  .room.ingame .panel .avatar, .room.ingame .panel .avatar img, .room.ingame .panel .avatar .ph { width: 44px; height: 44px; }
  .room.ingame .footbar { padding-top: 4px; }
  .room.ingame .board-wrap { width: min(100%, calc(100dvh - 290px)); }
}

/* home: logo and name in the middle of the top area */
.home-top .grow { flex: 1; }
.home-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px 0 26px; text-align: center; }
.home-hero .mark { width: 96px; height: 96px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.home-hero .wordmark .lw { font-size: 44px; }
.home-hero .wordmark span { font-size: 17px; letter-spacing: 5px; margin-top: 2px; }
@media (min-height: 760px) { .home-hero { margin: 4vh 0 30px; } }
/* Android app is full screen: keep things clear of the camera at the top */
.in-app .home { padding-top: max(34px, env(safe-area-inset-top)); }
.in-app .topbar { padding-top: max(26px, env(safe-area-inset-top)); }
.in-app .login { padding-top: max(34px, env(safe-area-inset-top)); }
.lobby-card .msgrow { display: flex; align-items: center; gap: 10px; }
.lobby-card .msgrow p { flex: 1; min-width: 0; }
.lobby-card .msgrow .btn { flex: none; }

/* bottom-row player: emoji above the photo, toward the board */
.emoji-bubble.under.over { transform: translate(-50%, -100%); }
/* sheet close button and drag handle */
.sheet { position: relative; }
.sheet .grab { width: 56px; height: 6px; margin: 2px auto 12px; cursor: grab; }
.sheet-x {
  position: absolute; top: 8px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.08); color: var(--ivory); font-size: 24px; line-height: 1; cursor: pointer; z-index: 2;
}
.sheet h2 { margin-right: 46px; }

/* number chips above a tapped token (v16) */
.chips { pointer-events: auto; }
.chip { cursor: pointer; animation: chip-in .14s ease-out; }
.chip-hit { fill: transparent; }
.chip-bg { fill: var(--gold); stroke: #b4851c; stroke-width: 3; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.chip-t { font: 800 27px var(--font); fill: var(--ink); pointer-events: none; }
.chip-tail { fill: var(--gold); pointer-events: none; }
.chip:active .chip-bg { fill: #ffd76e; }
@keyframes chip-in { from { opacity: 0; transform-box: fill-box; } to { opacity: 1; } }

/* colour picker (2-player rooms) */
.colour-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cp { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; border-radius: 16px; border: 0; background: var(--night-3); color: var(--ivory); font-weight: 700; text-align: left; box-shadow: inset 0 0 0 2px var(--line); }
.cp .cp-dot { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.cp b { flex: 1; }
.cp small { font-size: 12px; color: var(--ivory-dim); font-weight: 600; }
.cp.on { box-shadow: inset 0 0 0 3px var(--gold); }
.cp[disabled] { opacity: .4; }

.seat-row.two { grid-template-columns: 14px 1fr auto; }
.seat-row.two .seg, .seat-row.two .small-field { grid-column: 1 / -1; }
.mini-colours { display: flex; gap: 8px; }
.mini-colours button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.mini-colours button.on { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--gold); }
.mini-colours button[disabled] { opacity: .25; }

/* phone + PIN login (v18) */
.login .mark.small { width: 72px; height: 72px; }
.login .hi { font-size: 22px; font-weight: 700; color: var(--ivory); margin: 0; }
.login .num { color: var(--ivory-dim); font-size: 15px; margin: -10px 0 0; }
.phone-row { display: flex; gap: 8px; }
.cc-wrap { flex: 0 0 76px; display: flex; align-items: center; background: var(--ivory); border-radius: 14px; padding-left: 12px; color: var(--ink); font-weight: 700; }
.cc-wrap .field.cc { padding-left: 2px; padding-right: 8px; min-width: 0; }
.id-login .lbl { display: grid; gap: 4px; text-align: left; font-size: 13px; color: var(--ivory-dim); }
.field.pin { letter-spacing: 10px; text-align: center; font-size: 20px; }
.field.pin::placeholder { letter-spacing: 6px; }
.link-btn { background: none; border: 0; color: var(--gold); font-weight: 600; text-decoration: underline; min-height: 44px; padding: 0 8px; }
.apk-btn { text-decoration: none; }
.apk-row { display: flex; justify-content: center; margin-top: 12px; }

/* ================= v18 look: richer menus (Ludo STAR style, no coins) ================= */
:root { --gold2: #FFE29A; --gold3: #B07A12; }
body {
  background-color: #1d0a2b;
  background-image:
    radial-gradient(60% 34% at 50% 18%, rgba(255, 196, 92, .16), transparent 70%),
    radial-gradient(40% 30% at 8% 4%, rgba(255, 110, 180, .16), transparent 70%),
    radial-gradient(40% 30% at 94% 6%, rgba(120, 140, 255, .16), transparent 70%),
    linear-gradient(180deg, #4b1b66 0%, #33124a 45%, #1d0a2b 100%);
}
.glass { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.35); }
.gbtn { border: 0; border-radius: 13px; padding: 10px 20px; font-weight: 800; font-size: 17px; color: var(--ink); background: linear-gradient(180deg, #ffe39a, #f3be43 55%, #d99a1e); box-shadow: 0 3px 0 #8a5c0c, inset 0 1px 0 rgba(255,255,255,.7); }
.gbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a5c0c; }

.home2 { position: relative; max-width: 520px; padding-bottom: 28px; overflow-x: clip; }
.stage-rays { position: absolute; left: 50%; top: -40px; width: 100%; height: 420px; transform: translateX(-50%); pointer-events: none;
  background: conic-gradient(from 200deg at 50% 0%, transparent 0 6deg, rgba(255,220,150,.09) 6deg 12deg, transparent 12deg 20deg, rgba(255,220,150,.07) 20deg 26deg, transparent 26deg 34deg, rgba(255,220,150,.09) 34deg 40deg, transparent 40deg 160deg); }
.h2-top { position: relative; display: flex; align-items: center; gap: 8px; }
.me-pill { display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 4px 14px 4px 4px; color: var(--ivory); min-height: 48px; }
.ring-av { width: 40px; height: 40px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, var(--gold2), var(--gold3)); flex: 0 0 auto; }
.ring-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.me-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.me-txt small { font-size: 11px; color: var(--gold); font-weight: 700; }
.h2-brand { position: relative; display: flex; flex-direction: column; align-items: center; margin: 2px 0 6px; }
.h2-brand .mark { width: 74px; height: 74px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.h2-brand .wordmark { font-size: 38px; margin-top: 2px; }
.h2-brand .wordmark span { font-size: 15px; }

.mode-cards { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-card { position: relative; border: 0; padding: 3px; height: 184px; border-radius: 24px; color: var(--ivory); background: linear-gradient(160deg, var(--gold2), var(--gold) 35%, var(--gold3)); box-shadow: 0 10px 22px rgba(0,0,0,.5), 0 4px 0 #6d4708; transition: transform .1s; }
.mode-card:active { transform: translateY(3px) scale(.99); }
.mc-in { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; border-radius: 21px; overflow: hidden; padding-bottom: 10px; }
.c2 .mc-in { background: radial-gradient(90% 70% at 50% 25%, #ffd36e, #f7a21b 60%, #d9760b); }
.c4 .mc-in { background: radial-gradient(90% 70% at 50% 25%, #a48bff, #6a48e6 60%, #4428b0); }
.mc-in::before { content: ''; position: absolute; left: -20%; top: -60%; width: 140%; height: 90%; background: radial-gradient(closest-side, rgba(255,255,255,.45), transparent); transform: rotate(-8deg); }
.mc-in::after { content: ''; position: absolute; inset: 0; border-radius: 21px; box-shadow: inset 0 -14px 24px rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.4); pointer-events: none; }
.mc-num { position: absolute; top: -6px; left: 0; right: 0; text-align: center; font-size: 118px; font-weight: 800; line-height: 1; z-index: 1;
  background: linear-gradient(180deg, #fff 0%, var(--hi) 22%, var(--mid) 60%, var(--lo) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
  filter: drop-shadow(0 2px 0 var(--edge)) drop-shadow(0 4px 0 var(--edge)) drop-shadow(0 6px 0 var(--edge)) drop-shadow(0 10px 10px rgba(0,0,0,.45)); }
.c2 .mc-num { --hi: #ff8a76; --mid: #e8402f; --lo: #a51d13; --edge: #7a140c; }
.c4 .mc-num { --hi: #7bf2a0; --mid: #2c9a4e; --lo: #146b31; --edge: #0d4a21; }
.mc-scene { position: absolute; left: 0; right: 0; bottom: 38px; height: 70px; z-index: 2; }
.mc-lab { position: relative; z-index: 3; border-radius: 999px; padding: 3px 16px; font-weight: 800; font-size: 17px; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.3)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.art-pawn { position: absolute; width: 40px; height: 46px; bottom: 0; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.c2 .p-l { left: 14%; } .c2 .p-r { right: 14%; }
.c4 .art-pawn { width: 32px; height: 38px; }
.c4 .p-1 { left: 4%; bottom: 0; } .c4 .p-2 { left: 22%; bottom: 10px; } .c4 .p-3 { right: 22%; bottom: 10px; } .c4 .p-4 { right: 4%; bottom: 0; }
.die3d { position: absolute; width: 34px; height: 34px; left: calc(50% - 17px); bottom: 10px; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(38deg); }
.c4 .die3d { transform: rotateX(-24deg) rotateY(-32deg); }
.die3d > span { position: absolute; inset: 0; border-radius: 8px; background: radial-gradient(circle at 35% 30%, #fff, #efe7da 70%, #d8cbb6); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.die3d .f { transform: translateZ(17px); }
.die3d .r { transform: rotateY(90deg) translateZ(17px); filter: brightness(.82); }
.c4 .die3d .r { transform: rotateY(-90deg) translateZ(17px); }
.die3d .t { transform: rotateX(90deg) translateZ(17px); filter: brightness(1.06); }
.die3d i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5a3a62, #1e0f24); }

.mode-tiles { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.mt { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; color: var(--ivory); font-size: 13px; font-weight: 700; line-height: 1.1; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); padding: 0; }
.mt-ic { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, var(--a), var(--b)); box-shadow: 0 0 0 3px #f3be43, 0 0 0 4px #8a5c0c, 0 6px 12px rgba(0,0,0,.45), inset 0 -8px 14px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.45); margin-top: 4px; }
.mt-ic::before { content: ''; position: absolute; top: -30%; left: 10%; width: 80%; height: 60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.45), transparent); }
.mt-ic svg { position: relative; width: 36px; height: 36px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.mt:active .mt-ic { transform: scale(.94); }
.home2 .join-row { position: relative; display: flex; gap: 8px; margin-top: 18px; padding: 6px; border-radius: 18px; }
.home2 .join-row .field { flex: 1; min-width: 0; }
.h2-sec { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 22px 0 8px; font-size: 20px; font-weight: 700; }
@media (min-width: 700px) { .home2 { max-width: 560px; } .mode-card { height: 210px; } }
@media (max-width: 340px) { .mc-num { font-size: 100px; } .mode-card { height: 168px; } .mt-ic { width: 56px; height: 56px; } .mt { font-size: 12px; } }
.home2 .code-field { letter-spacing: 2px; } .home2 .code-field::placeholder { letter-spacing: 1px; }

/* offline setup (v18 look) */
.off2 { position: relative; max-width: 520px; overflow-x: clip; padding-bottom: 28px; }
.off-head { position: relative; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin-bottom: 10px; }
.ribbon { justify-self: center; position: relative; height: 46px; padding: 0 34px; display: grid; place-items: center; font-weight: 800; font-size: 19px; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35);
  background: linear-gradient(180deg, #ff6a8a, #e2345f 60%, #b51d45); clip-path: polygon(0 0, 100% 0, 93% 50%, 100% 100%, 0 100%, 7% 50%); white-space: nowrap; }
.gold-panel { position: relative; border-radius: 28px; padding: 3px; background: linear-gradient(160deg, var(--gold2), var(--gold) 35%, var(--gold3)); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.gp-in { border-radius: 25px; padding: 6px 14px 16px; background: radial-gradient(120% 60% at 50% 0%, #5a2577, #341249 55%, #250c35); }
.gp-in .lbl { font-size: 12px; font-weight: 800; color: var(--gold); letter-spacing: 1.5px; margin: 14px 0 7px; text-transform: uppercase; text-align: center; }
.var { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; border-radius: 16px; color: var(--ivory); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.14); font-size: 14px; line-height: 1.1; min-height: 84px; }
.vc svg { width: 34px; height: 34px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.vc small { font-size: 11px; color: var(--ivory-dim); font-weight: 600; }
.vc.on { background: linear-gradient(180deg, rgba(255,215,110,.35), rgba(255,190,67,.12)); border: 2px solid var(--gold); box-shadow: 0 0 14px rgba(243,190,67,.45); }
.off-hint { margin: -2px 0 8px; text-align: center; font-size: 13px; }
.seat-row.s2 { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent) 0, transparent 60%), rgba(0,0,0,.22); box-shadow: none; border: 1px solid rgba(255,255,255,.1); }
.pawn-btn { position: relative; flex: 0 0 44px; height: 50px; border: 0; padding: 0; background: none; }
.pawn-btn .art-pawn { position: static; width: 40px; height: 46px; }
.pc-hint { position: absolute; right: -2px; bottom: 0; font-size: 11px; color: var(--gold); }
.seat-row.s2 .small-field { flex: 1; min-width: 0; grid-column: auto; padding: 7px 10px; }
.cpu-name { flex: 1; min-width: 0; font-weight: 700; color: var(--ivory-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg.tg { flex: 0 0 auto; display: flex; padding: 2px; border-radius: 999px; }
.seg.tg button { padding: 6px 10px; font-size: 13px; border-radius: 999px; min-height: 34px; }
.line-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 10px; padding: 8px 12px; border-radius: 14px; border: 0; color: var(--ivory); background: rgba(0,0,0,.22); font-weight: 700; font-size: 15px; min-height: 48px; text-align: left; }
.line-row b { color: var(--gold); }
.seg.three.mini { flex: 0 0 auto; }
.seg.three.mini button { padding: 5px 9px; font-size: 13px; }
.rules-box { margin-top: 6px; padding: 0 4px; }
.start-btn { display: block; width: 100%; margin-top: 16px; padding: 12px; border-radius: 18px; border: 0; font-weight: 800; font-size: 23px; letter-spacing: 2px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3);
  background: linear-gradient(180deg, #8ff08a, #3fbf4f 45%, #23913a); box-shadow: 0 5px 0 #145f24, 0 10px 18px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.55); }
.start-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #145f24; }
.resume-row { margin-top: 10px; }
.lobby-card .seg.gt { margin-top: 8px; }
.lobby-card .seg.gt button { font-size: 13px; padding: 7px 4px; }
@media (max-width: 360px) { .seg.tg button { padding: 5px 7px; font-size: 12px; } .vc { font-size: 13px; } }
.seat-row.s2 { min-width: 0; }
.seat-row.s2 .seg.tg { padding: 2px; }
.seat-row.s2 .seg.tg button { padding: 6px 9px; }
@media (max-width: 380px) {
  .gp-in { padding: 6px 10px 14px; }
  .pawn-btn { flex-basis: 34px; }
  .pawn-btn .art-pawn { width: 32px; height: 38px; }
  .seat-row.s2 { gap: 6px; }
  .seat-row.s2 .seg.tg button { padding: 5px 7px; font-size: 12px; min-height: 32px; }
  .line-row { font-size: 14px; padding: 8px 10px; }
  .seg.three.mini button { padding: 5px 6px; font-size: 12px; }
}
.var.two { grid-template-columns: 1fr 1fr; }
.lobby-card .seg.vt { margin-top: 8px; }
/* my settings: background pick */
.bg-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 10px; }
.bgp { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; color: var(--ivory); font-weight: 700; font-size: 12px; padding: 0; }
.bgp > span { width: 100%; height: 44px; border-radius: 12px; background: radial-gradient(80% 80% at 50% 20%, color-mix(in srgb, var(--c) 60%, #fff 12%), var(--c) 70%, #0b0410); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.bgp.on > span { box-shadow: 0 0 0 3px var(--gold); }
/* background themes */
body.bg-emerald { background-color: #062619; background-image: radial-gradient(60% 34% at 50% 18%, rgba(255,220,120,.14), transparent 70%), radial-gradient(40% 30% at 8% 4%, rgba(120,255,190,.14), transparent 70%), linear-gradient(180deg, #116141 0%, #0b4430 45%, #062619 100%); }
body.bg-midnight { background-color: #060d24; background-image: radial-gradient(60% 34% at 50% 18%, rgba(140,180,255,.16), transparent 70%), radial-gradient(40% 30% at 92% 6%, rgba(190,120,255,.14), transparent 70%), linear-gradient(180deg, #1a3a85 0%, #10245a 45%, #060d24 100%); }
body.bg-sunset { background-color: #2a0b07; background-image: radial-gradient(60% 34% at 50% 18%, rgba(255,200,110,.2), transparent 70%), radial-gradient(40% 30% at 8% 4%, rgba(255,110,140,.16), transparent 70%), linear-gradient(180deg, #8e3420 0%, #5e1f14 45%, #2a0b07 100%); }

/* my settings: board, dice and token pickers */
.bg-pick.two { grid-template-columns: repeat(2, 1fr); }
.board-sw span { background: var(--c) !important; position: relative; overflow: hidden; }
.board-sw span::after { content: ''; position: absolute; inset: 8px 30%; border-radius: 3px; background: linear-gradient(90deg, #D63B30 0 25%, #2C9A4E 25% 50%, #F1B50A 50% 75%, #2C6FD4 75%); opacity: .85; }
.bs-wood { background: linear-gradient(135deg, #f4e4c4, #d8b47a) !important; }
.bs-marble { background: linear-gradient(135deg, #fff, #e2e4ea 55%, #fafafa) !important; }
.dice-sw, .tok-sw { display: grid !important; place-items: center; background: rgba(0,0,0,.25) !important; }
.dice-sw .die { pointer-events: none; }
.tok-sw .art-pawn { position: static; width: 34px; height: 38px; }
/* dice skins */
body.dice-gold .die { background: radial-gradient(120% 120% at 30% 20%, #fff3c4 0%, #f3be43 45%, #b07a12 100%); }
body.dice-gold .die i.on { background: radial-gradient(circle at 40% 35%, #5a3a10, #2a1800 70%); }
body.dice-black .die { background: radial-gradient(120% 120% at 30% 20%, #5a5462 0%, #2c2833 45%, #111 100%); box-shadow: inset -3px -4px 6px rgba(0,0,0,.4), inset 2px 2px 3px rgba(255,255,255,.25), 0 6px 12px rgba(0,0,0,.4); }
body.dice-black .die i.on { background: radial-gradient(circle at 40% 35%, #fff, #d8d8d8 70%); }
body.dice-ruby .die { background: radial-gradient(120% 120% at 30% 20%, #ff8a97 0%, #d23045 45%, #7d0f1f 100%); box-shadow: inset -3px -4px 6px rgba(0,0,0,.3), inset 2px 2px 3px rgba(255,255,255,.45), 0 6px 12px rgba(0,0,0,.4); }
body.dice-ruby .die i.on { background: radial-gradient(circle at 40% 35%, #fff, #f2dede 70%); }
/* board frames */
body.board-wood .board-wrap { background: linear-gradient(145deg, #e0b77c, #c08a4c 40%, #8a5a2b); }
body.board-night .board-wrap { background: linear-gradient(145deg, #5b4a8e, #2e2450 40%, #160f2b); box-shadow: 0 0 26px rgba(150,120,255,.35), 0 14px 30px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.2); }
body.board-marble .board-wrap { background: linear-gradient(145deg, #f4f5f8, #c9ccd6 40%, #8f93a3); }

/* each dice swatch shows its own skin, whatever skin is in use */
.dice-sw .die { --s: 30px; padding: 4px; border-radius: 8px; }
.dice-sw.sk-classic .die { background: radial-gradient(120% 120% at 30% 20%, #ffffff 0%, #f1f1f1 45%, #cfcfcf 100%) !important; }
.dice-sw.sk-classic .die i.on { background: radial-gradient(circle at 40% 35%, #444 0%, #111 70%) !important; }
.dice-sw.sk-gold .die { background: radial-gradient(120% 120% at 30% 20%, #fff3c4 0%, #f3be43 45%, #b07a12 100%) !important; }
.dice-sw.sk-gold .die i.on { background: radial-gradient(circle at 40% 35%, #5a3a10, #2a1800 70%) !important; }
.dice-sw.sk-black .die { background: radial-gradient(120% 120% at 30% 20%, #5a5462 0%, #2c2833 45%, #111 100%) !important; }
.dice-sw.sk-black .die i.on { background: radial-gradient(circle at 40% 35%, #fff, #d8d8d8 70%) !important; }
.dice-sw.sk-ruby .die { background: radial-gradient(120% 120% at 30% 20%, #ff8a97 0%, #d23045 45%, #7d0f1f 100%) !important; }
.dice-sw.sk-ruby .die i.on { background: radial-gradient(circle at 40% 35%, #fff, #f2dede 70%) !important; }
.lobby-card .game-line { margin-top: 8px; min-height: 44px; }
.lobby-card .game-line[disabled] { opacity: 1; }
.room:not(.ingame) { height: auto; min-height: 100dvh; }

/* ================= Unique Games: wordmark and game picker (v20) ================= */
.ug-mark { margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ug-u { font-family: 'Cinzel', 'Baloo 2', serif; font-weight: 900; font-size: 44px; letter-spacing: 2px;
  background: linear-gradient(180deg, #FFFBE6 0%, #FFE08A 35%, #F2B43C 55%, #C98818 80%, #9A5F0C 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px #FFF3C4;
  filter: drop-shadow(0 1px 0 #835008) drop-shadow(0 2px 0 #704205) drop-shadow(0 3px 0 #5e3604) drop-shadow(0 4px 0 #4a2a03) drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
.ug-g { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 800; font-size: 18px; letter-spacing: 9px; color: #fff; text-shadow: 0 2px 0 #1a0828, 0 3px 6px rgba(0,0,0,.5); padding-left: 9px; }
.ug-g i { display: block; width: 40px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #FFE08A, #C98818); }
.login .ug-u { font-size: 46px; }
.h2-brand .mark.big { width: 108px; height: 108px; }
.hub .hub-title { position: relative; text-align: center; margin: 18px 0 10px; }
.game-card { position: relative; display: block; width: 100%; border: 0; padding: 3px; border-radius: 22px; color: var(--ivory); text-align: left;
  background: linear-gradient(160deg, var(--gold2), var(--gold) 35%, var(--gold3)); box-shadow: 0 8px 18px rgba(0,0,0,.45), 0 3px 0 #6d4708; }
.game-card:active { transform: translateY(2px); }
.gc-in { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 12px; border-radius: 19px; background: radial-gradient(120% 120% at 20% 0%, #5c2580, #34124a 60%, #250c35); }
.gc-art { flex: 0 0 56px; height: 56px; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.gc-art svg, .gc-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.gc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.gc-txt b { font-size: 17px; }
.gc-txt small { font-size: 12.5px; color: var(--ivory-dim); }
.gc-play { flex: 0 0 auto; padding: 8px 16px; border-radius: 12px; font-weight: 800; color: #fff; letter-spacing: 1px;
  background: linear-gradient(180deg, #8ff08a, #3fbf4f 45%, #23913a); box-shadow: 0 3px 0 #145f24, inset 0 1px 0 rgba(255,255,255,.55); }
.gc-soon { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--ink); background: rgba(251,245,232,.85); }
.game-card.big .gc-in { min-height: 104px; }
.game-card.big .gc-art { flex-basis: 78px; height: 78px; }
.game-card.big .gc-txt b { font-size: 24px; }
.game-card.soon { background: linear-gradient(160deg, #b9a37c, #8a7656); box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.game-card.soon .gc-art { filter: saturate(.75); }
.game-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.game-grid .gc-in { flex-direction: column; text-align: center; padding: 12px 8px; min-height: 0; }
.game-grid .gc-txt { align-items: center; }
.game-grid .gc-txt b { font-size: 15px; }
.game-grid .gc-soon { position: absolute; top: 8px; right: 8px; }
.home2 .h2-top .icon-btn { flex: 0 0 auto; }
@media (max-width: 340px) { .ug-u { font-size: 36px; } .game-card.big .gc-txt b { font-size: 20px; } }

/* v20: three home tiles, Play Online, quick chat */
.mode-tiles { grid-template-columns: repeat(3, 1fr); }
.match-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 6px; text-align: center; }
.match-wait b { font-size: 20px; }
.match-wait p { margin: 0; }
.mw-dice { position: relative; width: 60px; height: 70px; animation: mw-spin 1.4s ease-in-out infinite; }
.mw-dice .die3d { transform: rotateX(-24deg) rotateY(38deg) scale(1.3); }
@keyframes mw-spin { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(12deg); } }
.quick-chat { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.quick-chat button { border: 0; border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 13px; color: var(--ink); background: linear-gradient(180deg, #fff7e6, #f2e2c0); box-shadow: 0 2px 0 #a9946a; }
.quick-chat button:active { transform: translateY(1px); box-shadow: none; }
.side-right .quick-chat button { font-size: 12px; padding: 6px 10px; }
.seat-row.s2 .seg.tg button { font-size: 12.5px; }

/* Green theme (like Ludo STAR offline): background, panels, cards and pop-ups all green */
body.bg-green { background-color: #1d5a17; background-image: radial-gradient(70% 40% at 50% 12%, rgba(255,255,200,.28), transparent 70%), radial-gradient(120% 90% at 50% 110%, rgba(0,0,0,.35), transparent 60%), linear-gradient(180deg, #7fcf4a 0%, #4fa83a 35%, #2f7d24 75%, #1d5a17 100%); }
body.bg-green .gp-in, body.bg-green .gc-in { background: radial-gradient(120% 70% at 50% 0%, #67b94a, #3f8f31 55%, #2c6e22); }
body.bg-green .vc { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); }
body.bg-green .seat-row.s2, body.bg-green .line-row { background-color: rgba(0,40,0,.28); }
body.bg-green .sheet { background: linear-gradient(180deg, #4fa83a, #2f7d24); }
body.bg-green .lobby-card { background: rgba(0,50,0,.3); }
body.bg-green .seg { background: rgba(0,40,0,.4); }
body.bg-green .glass { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); }
.bg-pick { grid-template-columns: repeat(5, 1fr); }
.bg-pick:not([data-group="bg"]) { grid-template-columns: repeat(4, 1fr); }
.bg-pick.two { grid-template-columns: repeat(2, 1fr) !important; }

/* quick message bubble next to the player */
.emoji-bubble.say .em { font-size: 14px; font-weight: 800; white-space: nowrap; padding: 6px 12px; border-radius: 14px; color: var(--ink); background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.emoji-bubble.say { max-width: 70vw; }
/* match summary (v20) */
.res-li .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.res-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-stats { display: flex; flex-wrap: wrap; gap: 4px; }
.res-stats i { font-style: normal; font-size: 11.5px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--ivory-dim); white-space: nowrap; }
.res-key { font-size: 11px; color: var(--ivory-dim); margin: -6px 0 12px; }
.result .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result .row2 .block { grid-column: 1 / -1; }

/* v20 brand images */
.gc-art { background: #1c0533; }
.hub-brand { display: block; margin: -6px auto 0; width: min(100%, 420px); }
.hub-brand .brand-img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 694; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.loading { background: radial-gradient(circle at 50% 40%, #5c18a8, #1c0533 70%); }
.loading img { width: min(78vw, 420px); height: auto; animation: splash-in .9s ease-out both; }
@keyframes splash-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.mark { border-radius: 22%; }

/* v20 brand art (from the approved poster) */
.ug-wm { margin: 0; line-height: 0; }
.ug-wm img { width: min(86vw, 340px); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.loading { display: grid; place-items: center; align-content: center; gap: 18px; min-height: 100dvh; }
.splash-art { width: min(70vw, 300px); height: auto; animation: splash-in .9s ease-out both; }
.load-bar { width: min(60vw, 220px); height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.load-bar i { display: block; height: 100%; width: 40%; border-radius: 99px; background: linear-gradient(90deg, #ffe27a, #f2b324, #c98410); animation: load-slide 1.1s ease-in-out infinite; }
@keyframes load-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
/* keep the Soon badge clear of the game art on narrow phones */
.game-grid .gc-soon { top: 6px; right: 6px; padding: 3px 8px; font-size: 11px; }
.game-grid .gc-art { margin-top: 16px; }
.login-brand { margin: 0 auto 4px; line-height: 0; }
.login-brand img { display: block; width: min(92vw, 360px); height: auto; aspect-ratio: 900 / 694; margin: 0 auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); animation: splash-in .9s ease-out both; }
.login-brand.small img { width: min(70vw, 240px); }
/* v21 realistic boards: polished gold frame around the picture */
body.board-royal .board-wrap { padding: 8px; border-radius: 16px; background: linear-gradient(145deg, #fff1a8 0%, #e2ad3a 22%, #9a6410 50%, #f2c75a 78%, #8a5608 100%); box-shadow: 0 0 0 2px #2a0a4a, 0 16px 34px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.35); }
body.board-royal .board-wrap svg { border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.bs-royal { background: linear-gradient(135deg, #2c9a4e 0 25%, #f1b50a 25% 50%, #d63b30 50% 75%, #2c6fd4 75%) !important; box-shadow: inset 0 0 0 3px #e2ad3a; }
/* v22 pearl dice: glossy white body, recessed purple pips, all drawn so every pip is exactly in place */
body.dice-classic .die:not(.blank), .dice-sw.sk-classic .die {
  background: radial-gradient(130% 130% at 28% 18%, #ffffff 0%, #f7f5fb 38%, #e3dfec 70%, #c4bdd3 100%) !important;
  box-shadow: inset -3px -4px 6px rgba(60,30,90,.22), inset 3px 3px 4px rgba(255,255,255,.95), 0 1px 0 rgba(255,255,255,.6), 0 6px 12px rgba(0,0,0,.45);
  border-radius: 24%;
}
body.dice-classic .die i.on, .dice-sw.sk-classic .die i.on {
  background: radial-gradient(circle at 42% 38%, #9a5fd0 0%, #5a1a8a 45%, #2a0548 100%);
  box-shadow: inset 0 2px 2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.9);
}

/* header code line + game timer: one line, timer is its own pill so it never wraps under the title */
.code-btn { display: flex; align-items: center; gap: 6px; max-width: 100%; white-space: nowrap; overflow: hidden; }
.code-btn .cl-base { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.code-btn .cl-time { flex: none; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,210,90,.5); color: #fff; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.code-btn .cl-time.low { background: #b3261e; box-shadow: none; }

/* v22 brand: poster as full-screen loading splash, round logo on login and game picker */
.loading.splash { position: fixed; inset: 0; display: block; background: #1c0533; overflow: hidden; }
.splash-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(26px) brightness(.4) saturate(1.2); }
.splash-img { position: absolute; inset: 0 0 8% 0; margin: auto; width: min(100vw, 72dvh, 640px); height: auto; aspect-ratio: 1206 / 1304; animation: splash-in 1s ease-out both; -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 46%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 58% 58% at 50% 46%, #000 60%, transparent 100%); }
.splash-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(28,5,51,0) 30%, rgba(28,5,51,.7) 100%); }
.splash-foot { position: absolute; left: 0; right: 0; bottom: max(40px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 10px; color: #f6e7b0; font-weight: 700; letter-spacing: 1px; }
.splash-foot .load-bar { width: min(64vw, 260px); }
.login-brand img { width: min(54vw, 200px) !important; aspect-ratio: 1 !important; filter: drop-shadow(0 0 22px rgba(255,200,80,.35)) drop-shadow(0 10px 20px rgba(0,0,0,.5)); }
.login-brand.small img { width: min(40vw, 140px) !important; }
.hub-brand { width: auto !important; margin: -4px auto 0 !important; }
.hub-logo { display: block; width: min(42vw, 168px); height: auto; aspect-ratio: 1; margin: 0 auto; filter: drop-shadow(0 0 20px rgba(255,200,80,.3)) drop-shadow(0 10px 18px rgba(0,0,0,.5)); animation: splash-in .7s ease-out both; }

/* ================= v22: other games ================= */
/* game home */
.gh { gap: 14px; }
.gh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.pill-btn { border: 0; color: var(--ivory); font-weight: 700; padding: 10px 16px; border-radius: 999px; }
.gh-hero { display: grid; justify-items: center; gap: 8px; }
.gh-art { width: 104px; height: 104px; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 3px #e2ad3a, 0 12px 26px rgba(0,0,0,.5); display: block; }
.gh-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gh-hero h1 { margin: 0; font-size: 26px; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.gh-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.gm { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 116px; padding: 12px 8px; border: 0; border-radius: 20px; color: #fff; text-align: center;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03)), linear-gradient(160deg, #6a2bb0, #3a0f6e); box-shadow: inset 0 0 0 2px rgba(255,215,110,.55), inset 0 2px 0 rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.4); }
.gm b { font-size: 15px; line-height: 1.15; }
.gm small { font-size: 11.5px; color: var(--ivory-dim); line-height: 1.2; }
.gm:active { transform: translateY(2px); }
.gm-ic { width: 44px; height: 44px; border-radius: 50%; display: block; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.4), 0 4px 8px rgba(0,0,0,.35); background-size: 60% 60%; background-position: center; background-repeat: no-repeat; }
.gm-ic.ic-cpu { background-color: #e0a41c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='7' width='14' height='11' rx='3'/%3E%3Cpath d='M12 3v4M9 12h.01M15 12h.01M9 16h6'/%3E%3C/svg%3E"); }
.gm-ic.ic-pass { background-color: #2c6fd4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.gm-ic.ic-room { background-color: #d63b30; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 20c0-3 3-5 6-5s6 2 6 5M15 15c3 0 6 1.5 6 4'/%3E%3C/svg%3E"); }
.gm-ic.ic-online { background-color: #2c9a4e; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E"); }
.how { padding-left: 22px; margin: 0 0 16px; display: grid; gap: 10px; color: var(--ivory); line-height: 1.45; }
.match-wait { display: grid; justify-items: center; gap: 8px; padding: 18px 0; text-align: center; }
.match-wait p { margin: 0; font-weight: 700; }
.match-wait small { color: var(--ivory-dim); }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 5px solid rgba(255,255,255,.15); border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* shared game screen */
.tbl { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.tbl .topbar .title { display: flex; flex-direction: column; min-width: 0; }
.t-players { display: flex; justify-content: center; gap: 8px; padding: 4px 10px; min-height: 56px; flex: none; }
.t-players.n3 .tp { flex: 1 1 0; }
.tp { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); transition: box-shadow .2s, background .2s; }
.t-players.n1 .tp, .t-me .tp { max-width: min(100%, 300px); }
.tp.turn { background: rgba(255,200,70,.18); box-shadow: inset 0 0 0 2px var(--gold), 0 0 16px rgba(255,200,70,.45); }
.tp.afk { opacity: .75; }
.tp-av { position: relative; flex: none; width: 42px; height: 42px; }
.tp-av img, .tp-cpu { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; object-fit: cover; background: #e0a41c; color: #3a2000; font-weight: 800; font-size: 13px; }
.tp-cpu.tp-n { background: #6a2bb0; color: #fff; font-size: 18px; }
.tp-ring { position: absolute; inset: -4px; width: 50px; height: 50px; transform: rotate(-90deg); pointer-events: none; }
.tp-ring circle { fill: none; stroke: #6fe08e; stroke-width: 3.5; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: butt; transition: stroke-dashoffset .25s linear; }
.tp-ring.low circle { stroke: #ff5a4a; }
.tp-txt { display: flex; flex-direction: column; min-width: 0; }
.tp-txt b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-txt small { font-size: 11.5px; color: var(--ivory-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.t-players.n3 .tp { padding-right: 8px; gap: 6px; }
.t-players.n3 .tp-av, .t-players.n3 .tp-av img, .t-players.n3 .tp-cpu { width: 34px; height: 34px; }
.t-players.n3 .tp-ring { width: 42px; height: 42px; }
.t-players.n3 .tp-txt b { font-size: 13px; }
.t-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 4px 8px; }
.t-view { width: 100%; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.t-view > svg { width: 100%; height: 100%; display: block; touch-action: none; }
.t-lobby { flex: 1 1 auto; overflow-y: auto; padding: 8px 14px 20px; }
.t-lobby[hidden], .t-stage[hidden] { display: none; }
.lob-code { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lob-code span { color: var(--ivory-dim); font-size: 13px; }
.lob-code b { flex: 1; font-size: 24px; letter-spacing: 4px; color: var(--gold); }
.lob-seat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ls-badge { flex: none; display: inline-flex; }
.ls-name { flex: 1 1 100px; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lob-big { font-size: 40px; font-weight: 800; letter-spacing: 8px; margin: 4px 0 14px; color: var(--gold); text-align: center; }
.t-float { position: fixed; z-index: 60; pointer-events: none; }
.emoji-float.t-float { font-size: 44px; animation: floatUp 2.2s ease-out forwards; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.emoji-bubble.say.t-float { transform: none; color: var(--ink); font-weight: 700; font-size: 14px; max-width: 70vw; }
@keyframes floatUp { 0% { transform: translateY(10px) scale(.6); opacity: 0; } 15% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
.chat-form { display: flex; gap: 8px; margin-top: 8px; }
.chat-form .field { flex: 1; min-width: 0; }
.seat-badge { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 -2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1.5px rgba(255,255,255,.6); }
.t-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; pointer-events: none; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.tp:not(.turn) .tp-ring { display: none; }
.v-col { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; min-height: 0; gap: 6px; }
.v-col > svg { flex: 1 1 auto; min-height: 0; width: 100%; display: block; touch-action: none; }
.v-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; }
.v-bar .die { --s: 54px; }
.v-bar .roll-btn { border: 0; padding: 6px; border-radius: 18px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.v-bar .roll-btn.ready { box-shadow: inset 0 0 0 3px var(--gold), 0 0 18px rgba(255,200,70,.6); animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.v-msg { font-weight: 700; color: var(--ivory); font-size: 14px; min-width: 0; max-width: 60vw; text-align: center; }
.promo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.promo button { border: 0; border-radius: 16px; background: linear-gradient(160deg, #f7e3bd, #b2763f); padding: 8px; display: grid; place-items: center; }

.cr-box { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.cr-canvas { display: block; touch-action: none; border-radius: 18px; box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.cr-bar { flex-direction: column; gap: 4px; min-height: 70px; width: 100%; padding: 0 8px; }
.cr-slide { width: min(92%, 420px); accent-color: #f2c24a; height: 28px; }
.cr-bar .v-msg { max-width: 92vw; font-size: 13px; }

.c4-win { animation: c4glow .7s ease-in-out infinite alternate; }
@keyframes c4glow { from { opacity: .35; } to { opacity: 1; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }
/* three opponents (Court Piece, 4 player games): avatar above the name so nothing is cut off */
.t-players.n3 .tp { flex-direction: column; border-radius: 16px; padding: 5px 4px; gap: 2px; text-align: center; }
.t-players.n3 .tp-txt { align-items: center; width: 100%; }
.t-players.n3 .tp-txt b, .t-players.n3 .tp-txt small { max-width: 100%; justify-content: center; }
.t-players.n3 { min-height: 84px; }
.tbl .code-btn { letter-spacing: .5px; }
/* profile, friends, leaderboard, tournaments */
.hub-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.hs { border: 0; border-radius: 16px; padding: 8px 4px; display: grid; justify-items: center; gap: 2px; color: #fff; font-weight: 700; font-size: 12.5px; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.03)), #3a0f6e; box-shadow: inset 0 0 0 1.5px rgba(255,215,110,.45), 0 4px 10px rgba(0,0,0,.35); }
.hs span { font-size: 22px; line-height: 1; }
.st-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.st-row div { background: var(--night); border-radius: 14px; padding: 8px 4px; text-align: center; }
.st-row b { display: block; font-size: 20px; color: var(--gold); }
.st-row small { font-size: 11px; color: var(--ivory-dim); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.bdg { background: var(--night); border-radius: 14px; padding: 8px 6px; text-align: center; opacity: .42; filter: grayscale(1); }
.bdg.got { opacity: 1; filter: none; box-shadow: inset 0 0 0 1.5px var(--gold); }
.bdg span { font-size: 26px; display: block; }
.bdg b { display: block; font-size: 12px; line-height: 1.2; }
.bdg small { display: block; font-size: 10px; color: var(--ivory-dim); line-height: 1.2; margin-top: 2px; }
.rv { color: var(--gold); white-space: nowrap; }
.pl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pl-head img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--gold); }
.pl-head h2 { margin: 0; }
.pl-head small { color: var(--ivory-dim); }
.fr-li img, .lb-li img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.dot-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6fe08e; margin-right: 4px; vertical-align: middle; }
.lb-li { width: 100%; border: 0; color: inherit; text-align: left; }
.lb-li.me { box-shadow: inset 0 0 0 2px var(--gold); }
.lb-rank { width: 28px; text-align: center; font-size: 17px; flex: none; }
.lb-w { font-size: 18px; color: var(--gold); min-width: 32px; text-align: right; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chips-row button { border: 0; border-radius: 999px; padding: 6px 11px; font-weight: 700; font-size: 12.5px; background: var(--night); color: var(--ivory-dim); }
.chips-row button.on { background: var(--ivory); color: var(--ink); }
.invite-pop { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 10px; width: min(94vw, 420px); padding: 10px 12px; border-radius: 18px; background: #2a0a4a; box-shadow: 0 0 0 2px var(--gold), 0 12px 30px rgba(0,0,0,.6); }
.invite-pop span { flex: 1; min-width: 0; font-size: 14px; }
.invite-pop .sheet-x { position: static; flex: none; }
.bracket { display: grid; gap: 10px; margin: 12px 0; }
.br-round .lbl { margin-bottom: 4px; }
.br-m { display: grid; gap: 2px; background: var(--night); border-radius: 12px; padding: 6px 10px; margin-bottom: 6px; }
.br-m span { font-weight: 700; color: var(--ivory-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-m span.w { color: var(--gold); }
.br-m span.w::before { content: '✓ '; }
.champ { display: grid; justify-items: center; font-size: 46px; margin: 8px 0; }
.champ b { font-size: 22px; color: var(--gold); }
.champ small { font-size: 12px; color: var(--ivory-dim); }
.gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gift-grid button { border: 0; border-radius: 14px; padding: 8px 4px; background: var(--night); color: var(--ivory); font-weight: 700; font-size: 12px; display: grid; justify-items: center; gap: 2px; }
.gift-grid button span { font-size: 30px; line-height: 1.1; }
.gift-grid button.on { box-shadow: inset 0 0 0 2px var(--gold); }
.gift-to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.gift-to span { color: var(--ivory-dim); font-size: 13px; margin-right: 4px; }
.gift-fly { position: fixed; left: 0; top: 0; width: 60px; height: 60px; font-size: 48px; line-height: 60px; text-align: center; z-index: 90; pointer-events: none; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.gift-fly.pop { transition: opacity .8s; opacity: 0; }
.gift-spark { position: fixed; z-index: 91; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ffd84a; box-shadow: 0 0 8px #ffd84a; pointer-events: none; animation: spark .8s ease-out forwards; }
@keyframes spark { from { transform: rotate(var(--a)) translateX(0); opacity: 1; } to { transform: rotate(var(--a)) translateX(70px); opacity: 0; } }

/* Ludo: slow-motion kill and Arrow mode */
.tok.replay { transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.board-wrap.kill-fx { animation: killShake .5s ease-in-out; }
@keyframes killShake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-.6deg) scale(1.02); } 40% { transform: translateX(6px) rotate(.6deg) scale(1.03); } 60% { transform: translateX(-4px) scale(1.02); } 80% { transform: translateX(3px); } }
.kill-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; font-family: Cinzel, serif; font-weight: 900; font-size: clamp(30px, 11vw, 56px); color: #fff; letter-spacing: 2px; -webkit-text-stroke: 2px #7a0a05; text-shadow: 0 0 18px #ff3a2a, 0 6px 0 #7a0a05; animation: killPop 1.5s ease-out forwards; }
@keyframes killPop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
.var.five { grid-template-columns: repeat(6, 1fr); }
.var.five > .vc { grid-column: span 2; }
.var.five > .vc:nth-child(n+4) { grid-column: span 3; }
.seg.five { grid-template-columns: repeat(5, 1fr); }
.seg.five button { padding: 8px 1px; font-size: 12.5px; white-space: nowrap; min-width: 0; }
.li [data-prof] { cursor: pointer; } .li .tapname small u { color: var(--gold, #f2c24a); text-decoration: none; font-weight: 700; }
.code-field::placeholder { letter-spacing: 1px; font-size: 17px; font-weight: 700; }
#tuJoin { background: none; border: 0; box-shadow: none; padding: 0; margin-top: 12px; }
#tuJoin .field { min-width: 0; }
@media (max-width: 360px) {
  .tbl .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .tbl .topbar .icon-btn { width: 38px; height: 38px; flex: none; }
  .tbl .topbar .icon-btn svg { width: 19px; height: 19px; }
  .tbl .topbar .title .code-btn, .tbl .topbar .title .cl-base { font-size: 13px; letter-spacing: 0; white-space: nowrap; }
}
.hs span svg { display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
/* coins */
.coin-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 7px; border-radius: 999px; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1.5px rgba(255,215,110,.55), 0 3px 8px rgba(0,0,0,.35); color: #ffe7a0; font-weight: 800; font-size: 14px; white-space: nowrap; flex: none; }
.coin-pill .coin-ic { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.daily-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 7px 11px; border-radius: 999px; font-weight: 800; font-size: 13px; color: #3a1d00; background: linear-gradient(180deg, #ffe27a, #f2b52e 55%, #c98512); box-shadow: 0 3px 0 #8a5608, 0 6px 12px rgba(0,0,0,.35); white-space: nowrap; flex: none; animation: dailyGlow 1.6s ease-in-out infinite; }
.daily-btn[hidden] { display: none; }
@keyframes dailyGlow { 50% { box-shadow: 0 3px 0 #8a5608, 0 0 16px rgba(255,210,90,.8); } }
.h2-top { gap: 8px; }
@media (max-width: 360px) { .h2-top .me-txt small { display: none; } .daily-btn b { font-size: 12px; } .coin-pill { font-size: 13px; padding: 5px 9px 5px 6px; } }
.gift-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gift-grid button em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; color: #ffd76a; font-size: 12px; font-weight: 800; }
.gift-low { color: #ffb3a8 !important; font-size: 13px; line-height: 1.35; }
.st-row.two { grid-template-columns: 1fr 1fr; }
.st-row b .coin-ic { vertical-align: -3px; margin-right: 4px; }
@media (max-width: 380px) { .daily-btn .dl-l { display: none; } .h2-top { gap: 6px; } .h2-top .me-pill { min-width: 0; flex: 0 1 auto; } .h2-top .me-txt { min-width: 0; } .h2-top .me-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 90px; } }
.sl-tok.sl-nope .sl-in { animation: slNope .45s ease-in-out; }
@keyframes slNope { 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
/* rank and level */
.rank-card { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02)), var(--night); box-shadow: inset 0 0 0 1.5px rgba(255,215,110,.35); }
.rank-card .rank-emb { flex: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.rk-txt { flex: 1; min-width: 0; }
.rk-txt b { display: block; font-family: Cinzel, Georgia, serif; font-size: 22px; color: #ffe39a; letter-spacing: .5px; }
.rk-txt small { display: block; color: var(--ivory-dim); font-size: 13px; }
.xp-bar { height: 10px; border-radius: 99px; background: rgba(0,0,0,.45); margin: 6px 0 3px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.xp-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(180deg, #fff1a8, #f2c24a 50%, #b87a12); min-width: 6px; }
.lb-emb { flex: none; display: grid; }
.lb-emb .rank-emb { filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.bdg span .rank-emb { display: block; margin: 0 auto; }
.lvup { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(255,200,80,.35), rgba(10,4,24,.85) 60%); animation: lvIn .35s ease-out; }
.lvup.out { opacity: 0; transition: opacity .5s; }
.lvup-in { display: grid; justify-items: center; gap: 8px; animation: lvPop .7s cubic-bezier(.2,1.4,.4,1); }
.lvup-in .rank-emb { filter: drop-shadow(0 0 24px rgba(255,210,90,.8)); }
.lvup-in b { font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: 34px; color: #fff; -webkit-text-stroke: 1.5px #7a4a06; text-shadow: 0 0 16px #ffc24a, 0 4px 0 #7a4a06; }
.lvup-in span { color: #ffe39a; font-weight: 800; font-size: 17px; }
@keyframes lvIn { from { opacity: 0; } }
@keyframes lvPop { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
/* photo cropper */
.crop-ov { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(8,3,20,.88); padding: 16px; }
.crop-box { width: min(100%, 360px); display: grid; justify-items: center; gap: 12px; padding: 18px 16px; border-radius: 22px; background: linear-gradient(160deg, #3b1a63, #1c0d33); box-shadow: inset 0 0 0 1.5px rgba(255,215,110,.4), 0 20px 50px rgba(0,0,0,.6); }
.crop-box h2 { margin: 0; }
.crop-view { position: relative; border-radius: 16px; overflow: hidden; touch-action: none; cursor: grab; background: #1a0f2b; }
.crop-view canvas { width: 100%; height: 100%; display: block; }
.crop-ring { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 999px rgba(8,3,20,.6), inset 0 0 0 3px #f2c24a; }
.crop-zoom { display: flex; align-items: center; gap: 10px; width: 100%; color: #ffe39a; font-weight: 800; font-size: 20px; }
.crop-zoom input { flex: 1; accent-color: #f2c24a; }
.crop-box .hint { margin: 0; text-align: center; }
.crop-act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
/* admin panel */
.admin-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 11px; border: 0; border-radius: 16px; font-weight: 800; font-size: 15px; color: #2a1600; background: linear-gradient(180deg, #ffe27a, #f2b52e 55%, #c98512); box-shadow: 0 3px 0 #8a5608, 0 6px 14px rgba(0,0,0,.35); }
.admin-btn[hidden] { display: none; }
.adm { min-height: 100dvh; padding-bottom: 30px; }
.adm > section, .adm > .adm-tools, .adm > .adm-list { padding: 0 14px; }
.adm-sub { display: block; color: var(--gold, #f2c24a); font-size: 13px; font-weight: 700; }
.adm-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 4px; }
.adm-card { background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02)), var(--night); border-radius: 16px; padding: 10px 6px; text-align: center; box-shadow: inset 0 0 0 1.5px rgba(255,215,110,.25); min-width: 0; }
.adm-card b { display: block; font-size: 20px; color: #ffe39a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-card small { display: block; color: var(--ivory-dim); font-size: 12px; }
.adm-rk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.adm-rk > div { display: grid; justify-items: center; background: var(--night); border-radius: 14px; padding: 6px 2px; min-width: 0; }
.adm-rk b { color: #fff; font-size: 15px; } .adm-rk small { color: var(--ivory-dim); font-size: 11px; white-space: nowrap; }
.adm-tools { display: grid; gap: 8px; margin: 14px 0 10px; }
.adm-sort { grid-template-columns: repeat(5, 1fr); }
.adm-sort button { padding: 8px 1px; font-size: 12.5px; white-space: nowrap; min-width: 0; }
.adm-li { align-items: center; }
.adm-li.blocked { opacity: .65; }
.adm-li .grow small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-nm { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-emb { flex: none; display: grid; }
.tag { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; vertical-align: 1px; }
.tag.gold { background: #f2c24a; color: #2a1600; } .tag.red { background: #c9283a; color: #fff; }
.dot-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc6b; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 6px #3ddc6b; }
.adm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-right: 44px; }
.adm-head img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #f2c24a; }
.adm-head > div { flex: 1; min-width: 0; } .adm-head h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-head small { color: var(--ivory-dim); }
.adm-head > span { flex: none; display: grid; }
.adm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.adm-facts > div { background: var(--night); border-radius: 12px; padding: 7px 10px; min-width: 0; }
.adm-facts small { display: block; color: var(--ivory-dim); font-size: 12px; } .adm-facts b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.adm-row .field { min-width: 0; }
.adm-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.adm-quick .btn { padding-left: 2px; padding-right: 2px; }
.adm-acts { display: grid; gap: 8px; }
.adm-list { display: grid; grid-template-columns: minmax(0, 1fr); } .adm-list > * { min-width: 0; max-width: 100%; } .adm-li .grow { overflow: hidden; }
.adm-head h2 { font-size: 21px; } .adm-head { padding-right: 40px; gap: 10px; }