/* GANG lobby, 1999 edition: a desktop with Messenger-style windows, glossy aqua buttons,
   a buddy list of the four, nudges, and a taskbar. Modern spacing, 90s chrome. */
*, *::before, *::after { box-sizing: border-box; }
html { background: #0b1d4a; }
html, body { margin: 0; min-height: 100%; color: #10162b; font-family: var(--g-ui); }
body { display: block !important; overflow-x: hidden; background: transparent; }
:root {
  --xp-1: #0a4fd6; --xp-2: #3d8cff; --xp-3: #0a3cb0;
  --win: #f3f6ff; --win-2: #dfe8fb; --edge: #0b2f8a;
  --aqua-1: #8fe0ff; --aqua-2: #1f8fff; --aqua-3: #0057d6;
}

/* desktop wallpaper + floating sparkles */
.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.scene picture { display: block; width: 100%; height: 100%; }
.scene img { display: block; width: 100%; height: 100%; object-fit: cover; animation: drift 60s ease-in-out infinite alternate; }
.scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0b1d4a33, #0b1d4a00 30%, #0b1d4a66); }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.12) translate(1%, -1%); } }
.spark { position: absolute; width: 10px; height: 10px; z-index: 1; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 6px #fff); animation: twinkle 3s ease-in-out infinite; }
.s1 { top: 18%; left: 12%; } .s2 { top: 30%; left: 84%; animation-delay: .8s; } .s3 { top: 62%; left: 6%; animation-delay: 1.6s; width: 14px; height: 14px; }
.s4 { top: 76%; left: 90%; animation-delay: 2.2s; } .s5 { top: 10%; left: 55%; animation-delay: 1.1s; width: 7px; height: 7px; }
@keyframes twinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

.gang-bar { display: none !important; }
/* One screen, no scrolling: header, desk (Messenger + games + two doors), taskbar. */
html, body.fit { height: 100%; }
body.fit { height: 100dvh; overflow: hidden; display: flex !important; flex-direction: column; }
.hello { flex: none; width: 100%; max-width: 1280px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 8px) 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hello .logo { height: clamp(44px, 9vh, 84px); width: auto; filter: drop-shadow(3px 4px 0 #000) drop-shadow(0 0 18px #ffb80066); animation: pop .6s cubic-bezier(.2, 1.6, .4, 1) both, bob 4s ease-in-out .6s infinite; }
.hello .sub { font: 900 clamp(16px, 3.2vh, 28px) var(--g-ui); color: #fff; -webkit-text-stroke: 1.5px #0b2f8a; paint-order: stroke fill; text-shadow: 3px 3px 0 #0b2f8a; margin: 0; }
@keyframes pop { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
.desk { flex: 1; min-height: 0; width: 100%; max-width: 1280px; margin: 0 auto; padding: 10px 14px calc(58px + env(safe-area-inset-bottom));
  display: grid; gap: 12px; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: 'msgr games' 'msgr doors'; }
.msgr { grid-area: msgr; } .games-win { grid-area: games; } .doors { grid-area: doors; }
.win { display: flex; flex-direction: column; min-height: 0; }
.win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* window buttons that really work */
.win.min { align-self: start; } .win.min .win-body { display: none; }
.win.closed { display: none; }
.win.max { position: fixed; z-index: 70; inset: calc(env(safe-area-inset-top) + 8px) 8px calc(56px + env(safe-area-inset-bottom)); }
.win.max .win-body { overflow: auto; }
.desk:has(.games-win.closed, .games-win.min) { grid-template-rows: auto auto; }
.desk:has(.msgr.closed) { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'games' 'doors'; }

/* ---------- window chrome ---------- */
.win { background: var(--win); border-radius: 10px 10px 8px 8px; border: 2px solid var(--edge); overflow: hidden;
  box-shadow: 0 0 0 1px #ffffff55 inset, 0 14px 30px #00104588, 0 2px 0 #fff8 inset; animation: open .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.games-win { animation-delay: .08s; }
@keyframes open { from { transform: scale(.92) translateY(14px); opacity: 0; } }
.tb { --t1: var(--xp-1); --t2: var(--xp-2); --t3: var(--xp-3);
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 6px; color: #fff; font: 800 15px var(--g-ui); text-shadow: 1px 1px 0 #0008;
  background: linear-gradient(180deg, var(--t2) 0%, var(--t1) 45%, var(--t3) 100%); border-bottom: 1px solid #0006; }
.tb.green { --t1: #12a34a; --t2: #4fe08a; --t3: #0b7a36; }
.tb.pink { --t1: #e0287a; --t2: #ff7ab5; --t3: #a3145a; }
.tb.gold { --t1: #e8a400; --t2: #ffd95a; --t3: #b67900; color: #3a2300; text-shadow: 1px 1px 0 #fff8; }
.tb b { white-space: nowrap; }
.tb-ico { width: 20px; height: 20px; display: grid; place-items: center; font-size: 15px; }
.tb-ico img { width: 20px; height: 20px; }
.tb-path { font: 400 18px 'VT323', monospace; opacity: .85; margin-inline-start: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-btns { margin-inline-start: auto; display: flex; gap: 3px; direction: ltr; }
.tb-btns i, .tb-btns button { width: 22px; height: 21px; display: grid; place-items: center; font: 900 13px/1 var(--g-ui); font-style: normal; color: #fff; border-radius: 4px; border: 1px solid #fff9;
  background: linear-gradient(180deg, #6aa8ff, #2a6fe0); box-shadow: inset 0 1px 0 #fff8; padding: 0; cursor: pointer; }
.tb-btns button:hover { filter: brightness(1.15); } .tb-btns button:active { transform: translateY(1px); }
.tb { cursor: default; user-select: none; } .win.min > .tb { cursor: pointer; }
.tb-btns .x { background: linear-gradient(180deg, #ff8a6a, #e0401c); cursor: pointer; }

/* flower status icon (ours, five petals in the four colours) */
.flower { --s: 18px; width: var(--s); height: var(--s); display: inline-block; flex: none; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50.0' cy='24.0' r='20' fill='%23ffd21f' stroke='%23000' stroke-width='3'/><circle cx='74.7' cy='42.0' r='20' fill='%23ff3d8b' stroke='%23000' stroke-width='3'/><circle cx='65.3' cy='71.0' r='20' fill='%2319d3ff' stroke='%23000' stroke-width='3'/><circle cx='34.7' cy='71.0' r='20' fill='%233ee07f' stroke='%23000' stroke-width='3'/><circle cx='25.3' cy='42.0' r='20' fill='%23ff7a1a' stroke='%23000' stroke-width='3'/><circle cx='50' cy='50' r='13' fill='%23fff' stroke='%23000' stroke-width='3'/></svg>") center / contain no-repeat; animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* glossy aqua button */
.aqua { position: relative; font: 800 15px var(--g-ui); color: #fff; padding: 9px 20px; border-radius: 999px; cursor: pointer; text-shadow: 0 1px 1px #0006;
  border: 1px solid var(--aqua-3); background: linear-gradient(180deg, var(--aqua-1) 0%, var(--aqua-2) 50%, var(--aqua-3) 51%, var(--aqua-2) 100%);
  box-shadow: 0 3px 8px #0040a066, inset 0 -3px 6px #8fe0ff88; overflow: hidden; transition: transform .1s, filter .2s; }
.aqua::before { content: ''; position: absolute; left: 10%; right: 10%; top: 2px; height: 45%; border-radius: 999px; background: linear-gradient(#fffd, #fff2); }
.aqua:hover { filter: brightness(1.08) saturate(1.2); } .aqua:active { transform: translateY(1px) scale(.98); }
.aqua.big { font-size: 18px; padding: 12px 26px; }
.aqua.green { --aqua-1: #b6ffcf; --aqua-2: #2bd66c; --aqua-3: #0a9a42; }
.aqua.pink { --aqua-1: #ffc4de; --aqua-2: #ff4f9a; --aqua-3: #c41566; }

/* ---------- Messenger ---------- */
.msgr { background: linear-gradient(180deg, #eaf2ff, #f8fbff 40%); }
.msgr-me { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; min-height: 64px; font: 700 14px var(--g-ui);
  background: linear-gradient(180deg, #cfe0ff, #eaf2ff); border-bottom: 1px solid #b4c8f0; }
.msgr-me .me-face { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; object-position: top; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--c, #7aa7ff), 0 3px 8px #0003; }
.msgr-me .me-name { display: grid; line-height: 1.2; } .msgr-me .me-name b { font-size: 16px; } .msgr-me .me-name small { color: #2a8a3a; font-weight: 800; }
.msgr-me .ask { color: #0a3cb0; font-weight: 800; }
.msgr-me .g-btn { display: inline-flex; min-height: 40px; align-items: center; color-scheme: light; }
.msgr-me .g-btn:empty { display: none; }
.msgr-me .g-link { margin-inline-start: auto; font: 800 13px var(--g-ui); color: #0a3cb0; background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 4px; }
.msgr-me .me-url { width: 100%; font: 600 12px monospace; padding: 6px; border-radius: 6px; border: 1px solid #9ab; direction: ltr; }
.msgr-group { padding: 8px 12px 4px; font: 800 13px var(--g-ui); color: #0a3cb0; } .msgr-group small { color: #5a6a8a; font-weight: 700; }
.msgr-group .tri { display: inline-block; font-size: 11px; }
.buddies { display: grid; padding: 0 6px 6px; }
.buddy { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; border: 1px solid transparent;
  background: none; text-align: right; font: inherit; color: inherit; cursor: pointer; transition: background .15s, transform .15s; }
.buddy:hover { background: #dbe8ff; border-color: #b4c8f0; }
.buddy .st { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #0004; background: radial-gradient(circle at 35% 30%, #fff 0 20%, var(--sc) 45%); box-shadow: 0 0 6px var(--sc); }
.buddy.online { --sc: #2bd66c; } .buddy.away { --sc: #ffb020; } .buddy.busy { --sc: #ff3b3b; }
.buddy img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; object-position: top; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--c), 0 2px 6px #0003; }
.buddy .bt { display: grid; min-width: 0; line-height: 1.25; }
.buddy .bt b { font: 800 15px var(--g-ui); } .buddy .bt b em { font-style: normal; font-weight: 700; color: #5a6a8a; font-size: 12px; margin-inline-start: 6px; }
.buddy .bt small { font: 600 12.5px var(--g-ui); color: #33415f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buddy.me { background: linear-gradient(90deg, #fff7c2, #fffbe6); border-color: #f0d36a; }
.buddy.taken img { filter: grayscale(.5); } .buddy.taken .bt b::after { content: ' 🔒'; font-size: 11px; }
.buddy.pick { background: #fff3a8; border-color: #e8c400; transform: scale(1.02); }
.msgr-ad { margin: 4px 10px 10px; display: grid; gap: 3px; }
.msgr-ad small { font: 700 11px var(--g-ui); color: #5a6f9c; }
.msgr-ad p { margin: 0; justify-self: start; max-width: 100%; padding: 7px 12px; border-radius: 14px 14px 14px 4px; background: #e9f1ff; border: 1px solid #b9cdf3;
  font: 700 13.5px var(--g-ui); color: #10306e; box-shadow: 0 2px 4px #0b2f8a1a; }
.msgr-ad p.in { animation: adin .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes adin { from { transform: scale(.85); opacity: 0; } }

/* nudge: the whole window shakes like it's 2002 */
.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 2px) rotate(-.6deg); } 40%, 60% { transform: translate(7px, -2px) rotate(.6deg); } }
.nudge-toast { position: fixed; z-index: 90; left: 50%; bottom: calc(66px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 420px); padding: 10px 14px; border-radius: 10px; background: #fffbe6; border: 2px solid #e8a400; box-shadow: 0 10px 24px #0005; font: 800 14px var(--g-ui); color: #3a2300;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), opacity .2s; display: flex; align-items: center; gap: 10px; }
.nudge-toast.show { opacity: 1; transform: translate(-50%, 0); }
.nudge-toast img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; object-position: top; }

/* real status: online / away (tab in the background) / off */
.buddy.off { --sc: #9aa6bd; } .buddy.off img { filter: grayscale(.85) brightness(.95); } .buddy.off .bt small { color: #6a7690; }
.buddy.away .bt small { color: #a86200; } .buddy.online .bt small { color: #1d8a3e; font-weight: 800; }
.buddy { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.buddy .nd { font: 800 11px var(--g-ui); font-style: normal; color: #0a3cb0; background: #e3edff; border: 1px solid #b4c8f0; border-radius: 999px; padding: 2px 8px; opacity: 0; transition: opacity .15s; }
.buddy:hover .nd, .buddy:focus-visible .nd { opacity: 1; }
.msgr .win-body { overflow: hidden; } .buddies { flex: none; } .msgr-ad { margin-top: auto; }

/* ---------- games ---------- */
.games { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; background: linear-gradient(180deg, #fff, var(--win-2)); }
.game { position: relative; display: block; min-height: 0; border-radius: 10px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate;
  border: 2px solid #fff; box-shadow: 0 0 0 2px var(--a), 0 8px 18px #0b2f8a44; transition: transform .2s cubic-bezier(.2, 1.6, .4, 1), box-shadow .2s; }
.game:hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: 0 0 0 3px var(--a), 0 16px 26px #0b2f8a66; }
.game .art { position: absolute; inset: 0; z-index: -2; } .game .art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.game:hover .art img { transform: scale(1.07); }
.game::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0000 40%, #000c); }
.game::before { content: ''; position: absolute; inset: 0 0 55% 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #ffffff40, #fff0); }
.game .tag { position: absolute; top: 8px; inset-inline-start: 8px; font: 800 11px var(--g-ui); padding: 3px 8px; border-radius: 999px; background: #000a; border: 1px solid #fff6; }
.game .label { position: absolute; inset-inline: 10px; bottom: 9px; display: grid; line-height: 1.15; }
.game .label b { font: 900 clamp(16px, 2.6vh, 26px) var(--g-ui); text-shadow: 2px 2px 0 #000; } .game .label small { font: 700 12px var(--g-ui); opacity: .92; }
.game .play { position: absolute; top: 8px; inset-inline-end: 8px; font: 900 12px var(--g-ui); padding: 5px 11px; border-radius: 999px; color: #fff; text-shadow: 0 1px 1px #0006;
  background: linear-gradient(180deg, #fff8, #fff0 50%), var(--a); border: 1px solid #fffa; box-shadow: 0 3px 8px #0006; }
/* who's inside this game right now */
.game .here { position: absolute; inset-inline-end: 8px; bottom: 8px; display: flex; align-items: center; gap: 2px; }
.game .here img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--c); margin-inline-start: -8px; }
.game .here em { font: 800 11px var(--g-ui); font-style: normal; margin-inline-start: 6px; padding: 2px 7px; border-radius: 999px; background: #2bd66c; color: #052; }
.game.busy { box-shadow: 0 0 0 3px #2bd66c, 0 0 18px #2bd66c99; }
.join { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--win-2); border-top: 1px solid #c5d4f2; }
.join .lbl { font: 800 14px var(--g-ui); color: #0a3cb0; white-space: nowrap; }
.join input { flex: 1; min-width: 0; max-width: 220px; font: 400 22px 'VT323', monospace; padding: 2px 10px; border-radius: 6px; border: 2px inset #c5d4f2; background: #fff; color: #000; text-align: center; letter-spacing: .2em; }
.join .aqua { padding: 7px 18px; }

/* ---------- the two doors: shop and stats ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.door { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 16px; border-radius: 12px; cursor: pointer; text-decoration: none; text-align: right;
  font: inherit; color: #fff; border: 2px solid #fff; overflow: hidden; isolation: isolate; transition: transform .2s cubic-bezier(.2, 1.6, .4, 1), filter .2s;
  box-shadow: 0 0 0 2px var(--edge2), 0 10px 22px #00104588; animation: open .45s .16s cubic-bezier(.2, 1.4, .4, 1) both; }
.door::before { content: ''; position: absolute; inset: 0 0 50% 0; z-index: -1; background: linear-gradient(180deg, #ffffff66, #fff0); }
.door:hover { transform: translateY(-3px) scale(1.01); filter: brightness(1.06) saturate(1.1); } .door:active { transform: scale(.98); }
.shop-door { --edge2: #b67900; color: #3a2300; background: linear-gradient(180deg, #ffe680, #ffc21a 55%, #e8a400); }
.shop-door::after { content: ''; position: absolute; inset: 0; z-index: -2; background: url(/lobby/art/shop-bg-wide.webp) center / cover; opacity: .25; mix-blend-mode: multiply; }
.stats-door { --edge2: #0b7a36; background: linear-gradient(180deg, #6ef0a0, #2bd66c 55%, #12a34a); color: #04351a; }
.door-ico { flex: none; width: 52px; height: 52px; display: grid; place-items: center; font-size: 40px; filter: drop-shadow(0 3px 4px #0006); }
.coin-spin { animation: coin 3s ease-in-out infinite; }
@keyframes coin { 50% { transform: rotateY(180deg) translateY(-4px); } }
.door-t { display: grid; min-width: 0; line-height: 1.2; } .door-t b { font: 900 clamp(18px, 2.8vh, 24px) var(--g-ui); text-shadow: 0 1px 0 #fff8; }
.door-t small { font: 700 13px var(--g-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .door-t small b { font-size: 14px; }
.door-go { margin-inline-start: auto; font: 900 34px/1 var(--g-ui); opacity: .7; }

.modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: calc(env(safe-area-inset-top) + 10px) 8px calc(env(safe-area-inset-bottom) + 10px); background: #001a5599; backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.modal .win.big { width: min(1000px, 100%); height: min(860px, 100%); display: flex; flex-direction: column; }
.modal iframe { flex: 1; width: 100%; border: 0; background: #120c08; }

/* ---------- taskbar ---------- */
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; height: calc(48px + env(safe-area-inset-bottom)); padding: 0 8px env(safe-area-inset-bottom);
  display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg, #3d8cff 0%, #1d5fd8 10%, #1a4fc4 90%, #0d3a9a); border-top: 1px solid #8fbaff; box-shadow: 0 -2px 10px #0006; }
.taskbar .start { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px 0 12px; border-radius: 0 16px 16px 0; color: #fff; cursor: pointer;
  font: 900 italic 18px var(--g-ui); text-shadow: 1px 1px 2px #0008; background: linear-gradient(180deg, #6ee08f, #2ba84a 50%, #1f8a3a 51%, #34b856); border: 1px solid #0a5a22; box-shadow: inset 0 1px 0 #fff8; }
.taskbar .start:hover { filter: brightness(1.1); }
[dir='rtl'] .taskbar .start { border-radius: 16px 0 0 16px; }
.taskbar .start .flower { --s: 22px; }
.tasks { display: flex; gap: 6px; min-width: 0; }
.tasks a, .tasks button { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font: 800 13px var(--g-ui); color: #fff; text-decoration: none; border-radius: 5px; cursor: pointer;
  background: linear-gradient(180deg, #5d9cff, #2a6fe0); border: 1px solid #0a3cb0; box-shadow: inset 0 1px 0 #fff6; white-space: nowrap; }
.tasks a:hover, .tasks button:hover { filter: brightness(1.12); }
.tasks button.off { background: linear-gradient(180deg, #2a5ab8, #1a3f8a); box-shadow: inset 1px 1px 2px #0006; opacity: .8; }
.tasks span { font-size: 16px; } .tasks img { width: 20px; height: 20px; } .tasks i { font-style: normal; }
.tray { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 4px; color: #fff;
  background: linear-gradient(180deg, #1aa0ff, #0b78e0); border: 1px solid #0a3cb0; box-shadow: inset 1px 1px 0 #ffffff55; white-space: nowrap; }
.tray b { font: 400 22px 'VT323', monospace; } .tray .tray-on { font: 800 13px var(--g-ui); }
.tray-dot { width: 10px; height: 10px; border-radius: 50%; background: #2bd66c; box-shadow: 0 0 8px #2bd66c; } .tray-dot.none { background: #9aa6bd; box-shadow: none; }

/* start menu */
.start-menu { position: fixed; z-index: 90; bottom: calc(50px + env(safe-area-inset-bottom)); inset-inline-start: 6px; width: min(320px, calc(100vw - 12px)); border-radius: 10px 10px 4px 4px; overflow: hidden;
  background: #f3f6ff; border: 2px solid var(--edge); box-shadow: 0 14px 34px #000a; animation: open .25s cubic-bezier(.2, 1.4, .4, 1); }
.start-menu[hidden] { display: none; }
.sm-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #fff; background: linear-gradient(180deg, var(--xp-2), var(--xp-1) 50%, var(--xp-3)); font: 900 18px var(--g-ui); text-shadow: 1px 1px 0 #0008; }
.sm-head img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; object-position: top; border: 2px solid #fff; }
.sm-head small { font: 700 13px var(--g-ui); opacity: .85; }
.sm-list { display: grid; padding: 6px; }
.sm-list a, .sm-list > button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font: 800 15px var(--g-ui); color: #10162b; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: right; }
.sm-list a:hover, .sm-list > button:hover { background: #2a6fe0; color: #fff; }
.sm-list img { width: 34px; height: 26px; object-fit: cover; border-radius: 4px; } .sm-emo { width: 34px; text-align: center; font-size: 20px; }
.sm-list hr { border: 0; border-top: 1px solid #c5d4f2; margin: 4px 6px; width: calc(100% - 12px); }
.sm-code { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.sm-code input { flex: 1; min-width: 0; font: 400 20px 'VT323', monospace; padding: 2px 8px; border-radius: 6px; border: 2px inset #c5d4f2; text-align: center; letter-spacing: .15em; }
.sm-code .aqua { padding: 4px 14px; }

/* ---------- phone: the same desk, stacked, still one screen ---------- */
@media (max-width: 899px) {
  .hello { padding-top: calc(env(safe-area-inset-top) + 6px); }
  .hello .logo { height: clamp(34px, 6.5vh, 60px); }
  .hello .sub { font-size: clamp(14px, 2.6vh, 20px); }
  .desk { gap: 8px; padding: 6px 8px calc(54px + env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: 'msgr' 'games' 'doors'; }
  .desk:has(.games-win.closed, .games-win.min) { grid-template-rows: auto auto auto; }
  .tb { height: 28px; font-size: 13px; } .tb-path { display: none; } .tb-btns button { width: 20px; height: 18px; font-size: 11px; }
  .msgr-me { min-height: 0; padding: 6px 8px; font-size: 12.5px; gap: 6px; } .msgr-me .me-face { width: 32px; height: 32px; } .msgr-me .me-name b { font-size: 14px; }
  .msgr-group, .msgr-ad { display: none; }
  /* buddies as a row of four faces */
  .buddies { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px; }
  .buddy { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'img' 'bt'; justify-items: center; text-align: center; gap: 2px; padding: 4px 2px; position: relative; }
  .buddy img { grid-area: img; width: clamp(36px, 7vh, 52px); height: clamp(36px, 7vh, 52px); }
  .buddy .st { position: absolute; top: 4px; inset-inline-end: calc(50% - clamp(36px, 7vh, 52px) / 2 - 4px); width: 12px; height: 12px; }
  .buddy .bt { grid-area: bt; justify-items: center; width: 100%; } .buddy .bt b { font-size: 13px; } .buddy .bt b em { display: none; }
  .buddy .bt small { font-size: 10.5px; max-width: 100%; white-space: normal; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .buddy .nd { display: none; }
  .games { gap: 6px; padding: 6px; } .game .label small, .game .tag { display: none; } .game .label b { font-size: 15px; }
  .game .play { font-size: 11px; padding: 3px 8px; top: 6px; inset-inline-end: 6px; }
  .game .here { bottom: auto; top: 6px; inset-inline-end: auto; inset-inline-start: 6px; } .game .here em { display: none; } .game .here img { width: 22px; height: 22px; }
  .join { display: none; }
  .doors { gap: 8px; } .door { min-height: 56px; padding: 6px 10px; gap: 8px; } .door-ico { width: 36px; height: 36px; font-size: 28px; }
  .door-t b { font-size: 16px; } .door-t small { font-size: 11px; } .door-go { display: none; }
  .tasks i { display: none; } .tasks a, .tasks button { padding: 0 9px; } .tray .tray-on { display: none; }
}
@media (max-width: 899px) and (max-height: 640px) { .hello .sub { display: none; } }

/* the shop page inside the window has no top bar of its own */
@media (prefers-reduced-motion: reduce) { .scene img, .flower, .spark, .coin-spin { animation: none; } }

/* ---------- the lobby call: live video inside each Messenger tile ---------- */
.callbar { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px; flex-wrap: wrap; }
.callbar .live { font: 800 12px var(--g-ui); color: #d61f1f; margin-inline-end: auto; animation: blinkLive 1.6s steps(2) infinite; }
@keyframes blinkLive { 50% { opacity: .45; } }
.callbar button { font: 800 12px var(--g-ui); padding: 3px 10px; border-radius: 999px; border: 1px solid #0003; cursor: pointer; background: linear-gradient(180deg, #fff, #dfe9ff); color: #10162b; }
.callbar button.off { background: linear-gradient(180deg, #ffd9d9, #ffb3b3); color: #8a0000; }
.buddy { position: relative; }
.buddy .bvid { display: none; }
.buddy.vid .bvid { display: block; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--c), 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); background: #000; grid-column: 2; grid-row: 1; }
.buddy.vid > img, .buddy.vid > .gface { display: none; }
.buddy.me.vid .bvid { transform: scaleX(-1); }
.buddy.muted::after { content: '🔇'; position: absolute; top: 4px; inset-inline-start: 74px; font-size: 13px; filter: drop-shadow(0 1px 1px #fff); }
.gface { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: linear-gradient(135deg, #b48cff, #6a3dd6); color: #fff; font: 900 20px var(--g-ui); border: 2px solid #fff; box-shadow: 0 0 0 2px #9b6bff; }
.game .here .gface { width: 28px; height: 28px; font-size: 14px; border-radius: 50%; }
.buddy.guest .bt b em { color: #6a3dd6; }
@media (max-width: 900px) {
  .callbar { padding: 2px 6px; } .callbar .live { font-size: 11px; } .callbar button { font-size: 11px; padding: 2px 8px; }
  .buddies { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
  .buddy.vid .bvid { grid-area: img; width: clamp(48px, 10vh, 76px); height: clamp(48px, 10vh, 76px); grid-column: auto; grid-row: auto; }
  .gface { grid-area: img; width: clamp(36px, 7vh, 52px); height: clamp(36px, 7vh, 52px); }
  .buddy.muted::after { inset-inline-start: 4px; }
}
.me-prof { color: inherit; text-decoration: none; } .me-prof:hover { text-decoration: underline; }