/* Mohannad Backgammon — landscape, casino style: deep blue, gold, glossy buttons. Sizes follow the
   screen height (vh) because phones are played sideways. */
:root {
  --navy: #071433; --navy2: #0d2357; --blue: #1747a8; --blue2: #2b7cf0; --cyan: #39c6ff;
  --gold: #ffcc33; --gold2: #f39c12; --green: #22c25a; --green2: #128a3c; --red: #e23b3b;
  --text: #fff; --muted: #9fb3dd; --panel: #10285f; --line: rgba(120, 170, 255, .28);
  --u: min(1vh, .55vw);
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--navy); color: var(--text); }
body { background: radial-gradient(ellipse at 50% 40%, #0c264b 0%, #061631 50%, #020a18 100%); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font: inherit; }

.screen { position: fixed; inset: 0; display: none; }
.screen.show { display: flex; }

#rotate { display: none; position: fixed; inset: 0; z-index: 99; background: var(--navy); align-items: center; justify-content: center; flex-direction: column; text-align: center; font-size: 20px; }
.rot-icon { font-size: 64px; animation: rot 2s infinite ease-in-out; }
@keyframes rot { 50% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) { #rotate { display: flex; } }

/* ---------- loading / logo ---------- */
#loading { flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--u)); }
.logo { position: relative; text-align: center; }
.logo b { display: block; font-size: calc(11 * var(--u)); letter-spacing: .06em; font-weight: 900;
  background: linear-gradient(#fff6c8, var(--gold) 45%, var(--gold2)); -webkit-background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #7a4a00) drop-shadow(0 0 18px rgba(255, 200, 60, .35)); }
.logo i { display: block; font-style: italic; font-weight: 900; letter-spacing: .3em; font-size: calc(4.5 * var(--u)); color: #dfe9ff; text-shadow: 0 2px 0 #12306e; }
.d { display: inline-block; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 22%; position: relative; margin: 0 4px 10px;
  background: radial-gradient(circle at 30% 25%, #fff, #e4e4ea 60%, #b8b8c4); box-shadow: 0 6px 12px rgba(0,0,0,.45); }
.d.d2 { background: radial-gradient(circle at 30% 25%, #ff7b7b, #e22 60%, #9a0c0c); transform: rotate(14deg); }
.d.d1 { transform: rotate(-12deg); }
.d::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle, #222 0 12%, transparent 13%) 22% 22% / 50% 50% no-repeat,
  radial-gradient(circle, #222 0 12%, transparent 13%) 78% 78% / 50% 50% no-repeat,
  radial-gradient(circle, #222 0 12%, transparent 13%) 50% 50% / 50% 50% no-repeat; }
.d.d2::after { filter: invert(1); }
.loadbar { width: 40vw; height: 10px; border-radius: 99px; background: #0a1a40; border: 1px solid var(--line); overflow: hidden; }
.loadbar div { height: 100%; width: 40%; background: linear-gradient(90deg, var(--cyan), var(--blue2)); animation: load 1.2s infinite ease-in-out; }
@keyframes load { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }
#loadText { color: var(--muted); margin: 0; }

/* ---------- shared bits ---------- */
.coin { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; font-weight: 900; font-size: .9em; color: #8a5200;
  background: radial-gradient(circle at 35% 30%, #fff4b0, var(--gold) 45%, #d98a00); box-shadow: inset 0 -2px 0 #a86400, 0 1px 3px rgba(0,0,0,.4); }
.avatar { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-size: calc(6.5 * var(--u));
  background: radial-gradient(circle at 35% 30%, #4ea0ff, #1747a8); border: 3px solid #8fc4ff; box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.green, .blue { border-radius: 12px; padding: .6em 1.6em; font-weight: 800; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.green { background: linear-gradient(#2fe07c, #0abf5e 50%, #04804a); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 #0b5c27, 0 6px 12px rgba(0,0,0,.35); }
.blue { background: linear-gradient(#5fb3ff, var(--blue2) 50%, var(--blue)); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 #0d2f78, 0 6px 12px rgba(0,0,0,.35); }
.green:active, .blue:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 1px 0 #0b3c27; }
.ghost { border: 1px solid var(--line); border-radius: 12px; padding: .55em 1.4em; color: var(--muted); }
.full { display: block; width: 100%; margin: 8px 0; }
.sm { padding: .35em .9em; font-size: .85em; }
.ico { font-size: calc(5 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); display: grid; place-items: center; }

/* ---------- lobby ----------
   Height budget (u = about 1% of the screen height on a sideways phone): top bar 11, bottom bar 11,
   the rest for the three columns, so nothing overlaps whatever the phone shape. */
#lobby { flex-direction: column; }
.top { direction: ltr; flex: 0 0 calc(11 * var(--u)); display: flex; align-items: center; gap: calc(1.6 * var(--u)); padding: 0 0 0 calc(2 * var(--u));
  background: linear-gradient(#0a2a66, #031436 55%, #000f2e); border-bottom: 2px solid #1d7cff; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.gear { color: #0088d6; text-shadow: 0 2px 0 #00264d, 0 0 8px rgba(0,136,214,.5); font-size: calc(6 * var(--u)); width: calc(8 * var(--u)); }
.shield { flex: none; width: calc(8 * var(--u)); height: calc(9 * var(--u)); display: grid; place-items: center; font-weight: 900; font-size: calc(4 * var(--u));
  clip-path: polygon(50% 0, 100% 15%, 100% 60%, 50% 100%, 0 60%, 0 15%); background: linear-gradient(#e9b04a, #9a5a1c 55%, #6f3213); color: #ffe7a0; }
.me-avatar { flex: none; width: calc(8.5 * var(--u)); height: calc(8.5 * var(--u)); font-size: calc(5 * var(--u)); border-width: 2px; }
.xp { display: flex; align-items: center; gap: 6px; flex: 1 1 calc(40 * var(--u)); max-width: calc(46 * var(--u)); height: calc(7 * var(--u));
  background: #071941; border: 1px solid var(--line); border-radius: 99px; padding: 0 10px 0 3px; }
.xp-lvl { flex: none; width: calc(5.5 * var(--u)); height: calc(5.5 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #1a2f63; border: 2px solid #9fb3dd; font-weight: 800; font-size: calc(3 * var(--u)); }
.xp-bar { flex: 1; height: calc(2.6 * var(--u)); background: #0c2050; border-radius: 99px; overflow: hidden; }
.xp-bar div { height: 100%; width: 0; background: linear-gradient(90deg, #7d86d0, #9ca7df); border-radius: 99px; transition: width .6s; }
#xpPct { font-size: calc(3 * var(--u)); color: #dfe4ff; min-width: 2.6em; text-align: center; }
.shop-btn { flex: 1.4 1 0; max-width: calc(56 * var(--u)); height: calc(7.5 * var(--u)); font-size: calc(4.4 * var(--u)); font-weight: 900; color: #643f15;
  background: linear-gradient(#ffffe1, #ffd34a 40%, #c57101); clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.coins { flex: none; display: flex; align-items: center; gap: 8px; height: calc(7 * var(--u)); background: #071941; border: 1px solid var(--line); border-radius: 99px;
  padding: 0 calc(3 * var(--u)) 0 4px; font-size: calc(4 * var(--u)); font-weight: 800; color: var(--gold); }
.coins.bump { animation: bump .5s 3; }
@keyframes bump { 50% { transform: scale(1.15); box-shadow: 0 0 18px rgba(255,204,51,.7); } }
.friends { flex: none; margin-left: auto; align-self: stretch; height: auto; width: calc(12 * var(--u)); font-size: calc(5 * var(--u));
  background: linear-gradient(#2fd46e, #0abf5e 45%, #04804a); border-radius: 0 0 0 calc(3 * var(--u)); }

.lobby-main { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 27% 1fr 23%; gap: calc(2.5 * var(--u));
  padding: calc(2.5 * var(--u)) calc(3 * var(--u)) calc(5 * var(--u)); }

/* right column (first in RTL): welcome bonus + round icons, then three tiles */
.side { display: flex; flex-direction: column; gap: calc(1.8 * var(--u)); min-height: 0; }
.side-top { display: flex; align-items: center; gap: calc(1.5 * var(--u)); flex: 0 0 calc(10 * var(--u)); }
.pill.welcome { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px;
  background: linear-gradient(#5a2bb6, #2e1270); border: 2px solid #9b6bff; }
.pill.welcome b { color: #7dffb0; font-size: calc(3.6 * var(--u)); text-shadow: 0 2px 0 #0a4022; line-height: 1.2; }
.pill.welcome small { font-size: calc(2.5 * var(--u)); color: #fff; white-space: nowrap; }
.pill.welcome.ready { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.05); box-shadow: 0 0 22px rgba(125,255,176,.6); } }
.ico.round { flex: none; border-radius: 50%; background: linear-gradient(#3a7bea, #1b3f99); border: 2px solid #6aa8ff; font-size: calc(3.6 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
.tile { flex: 1 1 0; min-height: 0; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; text-align: center;
  border: 2px solid rgba(255,255,255,.22); box-shadow: 0 6px 12px rgba(0,0,0,.35); }
.tile .band { flex: none; padding: calc(.6 * var(--u)) 0; font-size: calc(2.8 * var(--u)); font-weight: 700; background: linear-gradient(#d7262a, #af1314 60%, #7d0b0c); }
.tile b { flex: 1; display: grid; place-items: center; font-size: calc(4 * var(--u)); line-height: 1.15; padding: 0 6px; }
.tile.practice { background: linear-gradient(135deg, #9a36c9, #76229e 55%, #4c1468); }
.tile.friend { background: linear-gradient(135deg, #0a5fb0, #033566); }
.tile.board { background: linear-gradient(135deg, #22335a, #152139); }

/* middle: level title, dots, three room cards between arrows */
.rooms-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mode-tabs { flex: none; display: flex; align-self: center; gap: 4px; padding: 3px; margin-bottom: calc(1.2 * var(--u)); border-radius: 99px; background: #071941; border: 1px solid var(--line); }
.mode-tabs button { padding: calc(1.2 * var(--u)) calc(4.5 * var(--u)); border-radius: 99px; font-size: calc(4 * var(--u)); font-weight: 800; color: #c9d6f5; }
.mode-tabs button.on { color: #fff; background: linear-gradient(#2fd46e, #0abf5e 45%, #04804a); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.mode-tabs button[data-mode="bot"].on { background: linear-gradient(#b04de0, #76229e 55%, #4c1468); }
.bot-mode .room { background: linear-gradient(#5a4a78, #46385f 55%, #2e2442); }
.room.free .bet { color: #b9f5c9; font-size: calc(4.6 * var(--u)); text-shadow: 0 2px 0 #0a4022; }
.bot-face { font-size: calc(11 * var(--u)); filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.room-head { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: calc(1.5 * var(--u)); }
.room-title { color: var(--gold); font-weight: 800; font-size: calc(4.2 * var(--u)); line-height: 1; }
.dots { display: flex; gap: 6px; direction: ltr; }
.dots i { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); border: 2px solid #3bd06b; border-radius: 2px; }
.dots i.on { background: var(--gold); border-color: var(--gold); }
.rooms-row { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: calc(1 * var(--u)); direction: ltr; }
.arrow { flex: none; align-self: center; font-size: calc(7 * var(--u)); color: #cfe0ff; text-shadow: 0 0 12px #4aa3ff; width: calc(5 * var(--u)); }
.rooms { flex: 1; min-width: 0; display: flex; gap: calc(1.6 * var(--u)); justify-content: center; }
.room { flex: 1 1 0; max-width: calc(32 * var(--u)); min-width: 0; border-radius: 10px; overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: stretch;
  background: linear-gradient(#646567, #56596c 55%, #3a3c48); border: 2px solid #2a2d38; box-shadow: 0 8px 16px rgba(0,0,0,.45); }
.room.current { border-color: #8fd0ff; box-shadow: 0 0 0 2px rgba(143,208,255,.35), 0 8px 16px rgba(0,0,0,.45); }
.room .lvl { flex: 0 0 calc(6.5 * var(--u)); display: grid; place-items: center; background: linear-gradient(#d7262a, #af1314 60%, #7d0b0c); font-weight: 800; font-size: calc(3.4 * var(--u)); visibility: hidden; }
.room.locked .lvl { visibility: visible; }
.room .label { flex: none; text-align: center; background: #18191e; padding: calc(.8 * var(--u)) 0; font-size: calc(3.4 * var(--u)); color: #d8dbe3; font-weight: 700; }
.room .bet { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: calc(1 * var(--u)); font-size: calc(6 * var(--u)); font-weight: 900; color: var(--gold); text-shadow: 0 3px 0 #6b4400; }
.room .bet .coin { font-size: calc(4 * var(--u)); }
.room .pile { flex: 1 1 0; min-height: 0; display: grid; place-items: center; }
.room .pile .coin { font-size: calc(7 * var(--u)); box-shadow: 6px -6px 0 -2px #e0a000, 12px -12px 0 -4px #c98a00, 0 6px 12px rgba(0,0,0,.4); }
.room .play { flex: 0 0 calc(8.5 * var(--u)); font-size: calc(4.4 * var(--u)); font-weight: 800; background: linear-gradient(#0abf5e, #04905f 50%, #097c41); clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }
.room.locked > :not(.lvl) { opacity: .45; }
.room.locked::after { content: "🔒"; position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); font-size: calc(10 * var(--u)); filter: drop-shadow(0 4px 6px #000); }

/* left column (last in RTL): dice promo */
.promo { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 14px; padding: calc(2 * var(--u)); text-align: center; cursor: pointer;
  background: linear-gradient(160deg, #1c172d, #0c264b 60%, #12305e); border: 2px solid #2b4f8f; box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.promo h3 { margin: 0; font-size: calc(5 * var(--u)); }
.promo-dice { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(circle, rgba(255,140,40,.3), transparent 65%); }
.pd { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 22%; }
.pd.fire { background: radial-gradient(circle at 30% 25%, #ffe08a, #ff6a00 50%, #8a1400); transform: rotate(-14deg); box-shadow: 0 0 24px #ff6a00; }
.pd.ice { background: radial-gradient(circle at 30% 25%, #ffffff, #bfe9ff 50%, #4aa6d8); transform: rotate(12deg); box-shadow: 0 0 24px #7fd6ff; }
.promo .green { font-size: calc(3.8 * var(--u)); padding: calc(1.2 * var(--u)) calc(6 * var(--u)); }

/* bottom bar: the reward button rises a little above it, into the main area's bottom padding */
.bottom { flex: 0 0 calc(11 * var(--u)); display: flex; align-items: stretch; gap: 4px; padding: 0 calc(3 * var(--u));
  background: linear-gradient(#004fce, #012971); border-top: 2px solid #3d8bff; }
.nav { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; line-height: 1.15; }
.nav b { font-size: calc(3.8 * var(--u)); }
.nav small { font-size: calc(2.5 * var(--u)); color: var(--muted); }
.nav.locked b { opacity: .5; }
.nav.reward { flex: 1.3; margin-top: calc(-3.5 * var(--u)); border-radius: 14px 14px 0 0; background: linear-gradient(#1be4ff, #1c9ad8 45%, #20629c); border: 2px solid #9ff1ff; border-bottom: 0; }
.nav.reward.ready { animation: pulse 1.4s infinite; }
.nav.reward small { color: #e8f7ff; }

/* ---------- game ---------- */
#game { background: radial-gradient(ellipse at 50% 50%, #0c264b, #020a18 80%); }
.g-left, .g-right { width: calc(18 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(2 * var(--u)) 0; }
.g-right { justify-content: center; gap: calc(3 * var(--u)); position: relative; }
.board-wrap { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; }
#board { width: 100%; height: 100%; display: block; touch-action: none; }
.pl { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.ring { position: relative; width: calc(15 * var(--u)); height: calc(15 * var(--u)); display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: var(--gold); stroke-width: 7; stroke-dasharray: 289; stroke-dashoffset: 289; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.pl.active .ring circle { stroke-dashoffset: 0; }
.pl.hurry .ring circle { stroke: var(--red); }
.ring .avatar { width: calc(12 * var(--u)); height: calc(12 * var(--u)); font-size: calc(7 * var(--u)); }
.pl.offline .avatar { filter: grayscale(1) brightness(.6); }
.micdot { position: absolute; bottom: -2px; left: -2px; font-size: calc(3.4 * var(--u)); background: var(--green); border-radius: 50%; padding: 2px 4px; display: none; }
.pl.talking .micdot { display: block; }
.pl-info { text-align: center; line-height: 1.2; max-width: calc(18 * var(--u)); }
.pl-name { display: block; font-size: calc(3.4 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-lvl { color: var(--muted); font-size: calc(2.7 * var(--u)); }
.pot { display: flex; flex-direction: column; align-items: center; font-weight: 900; color: var(--gold); font-size: calc(4.4 * var(--u)); }
.pot small { color: var(--muted); font-size: calc(2.6 * var(--u)); font-weight: 400; }
.emote-bubble { position: absolute; top: 0; left: 100%; margin-left: 8px; background: #fff; color: #000; border-radius: 14px; padding: 4px 10px; font-size: calc(6 * var(--u)); white-space: nowrap; opacity: 0; transform: scale(.6); transition: .25s; pointer-events: none; z-index: 5; }
.emote-bubble.show { opacity: 1; transform: scale(1); }
.g-btn { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; font-size: calc(5 * var(--u)); display: grid; place-items: center;
  background: linear-gradient(#3a7bea, #173a8f); border: 2px solid #6aa8ff; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.g-btn.mic.on { background: linear-gradient(#4fe07f, #15873b); border-color: #9cffbd; }
.g-btn.mic.off span, .g-btn.muted span { opacity: .5; }
.g-btn.mic.off::after, .g-btn.muted::after { content: ""; position: absolute; width: 60%; height: 3px; background: var(--red); transform: rotate(-45deg); border-radius: 2px; }
.g-btn { position: relative; }
.emotes { position: absolute; left: calc(100% + 0px); right: 100%; top: 50%; display: none; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #0d2357; border: 2px solid #3d7cff; border-radius: 14px; padding: 8px; transform: translate(-100%, -50%); width: max-content; z-index: 10; }
.emotes.show { display: grid; }
.emotes button { font-size: calc(6 * var(--u)); padding: 4px; border-radius: 8px; }
.emotes button.txt { font-size: calc(3.2 * var(--u)); background: #1a3b85; grid-column: span 3; padding: 6px; }
.turn-actions { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 12px; }
.turn-actions > * { pointer-events: auto; display: none; }
.turn-actions .show { display: block; }
.big.roll { padding: calc(2.4 * var(--u)) calc(6 * var(--u)); border-radius: 14px; font-size: calc(5.5 * var(--u)); font-weight: 900; color: #643f15;
  background: linear-gradient(#fff1a6, var(--gold) 45%, var(--gold2)); box-shadow: 0 5px 0 #8a5200, 0 10px 20px rgba(0,0,0,.45); animation: pulse 1.3s infinite; }
.round-act { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; font-size: calc(6 * var(--u)); font-weight: 900; position: absolute; }
/* In the middle of the left half (the dice sit in the right half on my turn). */
.round-act { top: 50%; transform: translateY(-50%); }
.round-act.undo { background: linear-gradient(#5fb3ff, #1747a8); left: 30%; box-shadow: 0 4px 0 #0d2f78; }
.round-act.ok { background: linear-gradient(#55e37f, #128a3c); left: 16%; box-shadow: 0 4px 0 #0b5c27; }
.board-msg { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); background: rgba(5, 15, 45, .85); border: 1px solid var(--line); padding: 8px 18px; border-radius: 12px; font-weight: 700; opacity: 0; transition: opacity .3s; pointer-events: none; }
.board-msg.show { opacity: 1; }

/* ---------- overlays & modals ---------- */
.overlay, .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2, 8, 25, .72); z-index: 20; }
.overlay.show, .modal.show { display: flex; }
.search-box { text-align: center; background: linear-gradient(#173c8f, #0b2160); border: 2px solid #4b8bff; border-radius: 18px; padding: calc(4 * var(--u)) calc(8 * var(--u)); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.search-box h3 { margin: 10px 0 4px; } .search-box p { margin: 0 0 6px; color: var(--gold); font-weight: 800; } .search-box small { display: block; color: var(--muted); margin-bottom: 14px; }
.spinner .d { animation: spin 0.9s infinite linear; }
.spinner .d2 { animation-duration: 1.2s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.panel { width: min(92vw, 560px); max-height: 92vh; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: linear-gradient(#1c4bb0, #0f2d78 30%, #0b235f); border: 3px solid #4b8bff; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.panel.wide { width: min(94vw, 860px); }
.panel.small { width: min(90vw, 380px); }
.panel header { display: flex; align-items: center; justify-content: center; position: relative; padding: 10px; background: linear-gradient(#2d6ae0, #1846a8); border-bottom: 2px solid #5f9bff; }
.panel h2 { margin: 0; font-size: 22px; text-shadow: 0 2px 0 #0b2a6e; }
.panel .x { position: absolute; left: 10px; width: 36px; height: 36px; border-radius: 8px; font-weight: 900; background: linear-gradient(#ff6a6a, #c41a1a); border: 2px solid #fff; }
.panel .body { padding: 14px 18px; overflow: auto; }
.panel .body.center, .row.center { text-align: center; justify-content: center; }
.panel label { display: block; margin: 10px 0 6px; font-weight: 700; color: #cfe0ff; }
.row { display: flex; gap: 8px; align-items: center; }
.row input, #restoreInput, #joinInput { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #081a45; color: #fff; user-select: text; }
.note { color: var(--muted); font-size: 13px; margin: 4px 0 8px; }
.tiny { color: #6f86b8; font-size: 11px; margin-top: 12px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0 6px; }
.photo-row { gap: 14px; margin-bottom: 10px; }
.avatar.big-av { width: 64px; height: 64px; font-size: 36px; flex: none; }
/* A chosen photo fills the avatar circle. */
.avatar.has-photo { background-size: cover; background-position: center; font-size: 0 !important; }
.avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avatars button { aspect-ratio: 1; border-radius: 50%; font-size: 26px; background: #143477; border: 2px solid transparent; }
.avatars button.on { border-color: var(--gold); background: #1d4aa8; }
.toggle { padding: 8px 14px; border-radius: 10px; background: #143477; border: 1px solid var(--line); }
.code-box { display: flex; align-items: center; gap: 10px; background: #081a45; border: 1px dashed #5f9bff; border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.code-box span { color: var(--muted); font-size: 13px; }
.code-box b { flex: 1; text-align: center; font-size: 22px; letter-spacing: .15em; color: var(--gold); direction: ltr; user-select: text; }
.code-box.big b { font-size: 34px; }
.bets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bets button { padding: 8px 14px; border-radius: 10px; background: #143477; border: 2px solid transparent; font-weight: 800; color: var(--gold); }
.bets button.on { border-color: var(--gold); }
.bets button:disabled { opacity: .35; }
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.item { background: #0c2359; border: 2px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.item.on { border-color: var(--gold); box-shadow: 0 0 16px rgba(255,204,51,.35); }
.item canvas { width: 96px; height: 56px; }
.item b { font-size: 15px; }
.top-list { margin: 0; padding: 0; list-style: none; }
.top-list li { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.top-list li.me { background: rgba(255, 204, 51, .12); border-radius: 8px; }
.top-list .rank { width: 30px; text-align: center; font-weight: 900; color: var(--gold); }
.top-list .avatar { width: 38px; height: 38px; font-size: 22px; border-width: 2px; }
.top-list .nm { flex: 1; } .top-list .nm small { display: block; color: var(--muted); }
.top-list .w { color: #7dffb0; font-weight: 800; }
.muted { color: var(--muted); }
/* Landscape: wheel on one side, message and button beside it, so the button is never cut off. */
.wheel-body { display: flex; align-items: center; justify-content: center; gap: 24px; }
.wheel-side { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 150px; text-align: center; }
.wheel-side .note { font-size: 16px; color: #fff; font-weight: 700; margin: 0; }
#spinBtn { font-size: 18px; min-width: 150px; }
#spinBtn.collect { background: linear-gradient(#ffe37a, #ffcc33 45%, #d98a00); color: #5a3300; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #8a5200, 0 6px 12px rgba(0,0,0,.35); animation: pulse 1.1s infinite; }
.wheel-wrap { position: relative; flex: none; width: min(260px, 58vh); height: min(260px, 58vh); }
#wheel { width: 100%; height: 100%; transition: transform 4.2s cubic-bezier(.17, .67, .2, 1); }
.wheel-pin { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 30px; color: var(--red); text-shadow: 0 2px 0 #fff; }
.result { text-align: center; padding: 20px; }
.result h1 { margin: 6px 0; font-size: 40px; }
.result.win h1 { color: var(--gold); text-shadow: 0 3px 0 #7a4a00, 0 0 24px rgba(255,204,51,.6); }
.result.lose h1 { color: #ff9a9a; }
.prize { display: inline-flex; align-items: center; gap: 10px; font-size: 34px; font-weight: 900; color: var(--gold); margin: 8px 0; }
.update-bar { position: fixed; top: 10px; left: 50%; transform: translate(-50%, -150%); display: flex; align-items: center; gap: 14px; z-index: 60;
  background: linear-gradient(#1d66d6, #0c3088); border: 2px solid #7fc0ff; border-radius: 14px; padding: 8px 10px 8px 16px; box-shadow: 0 8px 20px rgba(0,0,0,.5); transition: transform .4s; font-weight: 700; }
.update-bar.show { transform: translate(-50%, 0); }
.toast { position: fixed; bottom: 18%; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(5, 15, 45, .95); border: 1px solid #4b8bff; padding: 10px 20px; border-radius: 12px; opacity: 0; transition: .3s; z-index: 50; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%); }