/* A fixed glass body, a polished rim and an independently moving reflection. */
:root {
  --glass-body: #11161bb3;
  --glass-edge: #e4edf02b;
  --glass-ease: cubic-bezier(.2, .7, .2, 1);
}

#lobby .glass {
  --glass-x: 50%;
  --glass-y: 20%;
  --glass-light: 0;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 2% 0%, #d5f7ee0c, transparent 42%),
    radial-gradient(ellipse at 100% 100%, #b6b1de08, transparent 40%),
    linear-gradient(154deg, #fcffff0a, #fcffff00 34%, #01050a0d 70%, #d3e5ec04),
    var(--glass-body);
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 #ffffff1f,
    inset 1px 0 0 #ffffff07,
    inset 0 -1px 0 #ffffff0d,
    inset 0 0 16px #c9eaff04,
    0 12px 32px -18px #0008;
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  backdrop-filter: blur(28px) saturate(130%);
  /* Layout and type remain still, including when the cursor crosses an edge. */
  transform: none;
  transition: border-color .4s var(--glass-ease), box-shadow .4s var(--glass-ease);
}

#lobby .glass::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 280px 190px at var(--glass-x) var(--glass-y), #eafff812, #c7daff04 48%, transparent 76%),
    radial-gradient(ellipse 150px 105px at var(--glass-x) var(--glass-y), #ffffff07, transparent 76%);
  opacity: var(--glass-light);
  transition: none;
}

#lobby .glass::after,
#lobby .glass:hover::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 210px 150px at var(--glass-x) var(--glass-y), rgb(245 255 255 / calc(var(--glass-light) * .42)), transparent 72%),
    linear-gradient(138deg, #e9fff970, #cbf2ee14 22%, #ffffff03 42%, #bab3da35 75%, #e9f9ff55 99%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 1;
  transition: none;
}

#lobby .glass:focus-within {
  border-color: #e4fff952;
  box-shadow: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #ffffff10, 0 12px 32px -18px #0008;
}

/* Gloss belongs to the material; colored light is kept at its polished edge. */
header {
  background: linear-gradient(123deg, #c5e7eb0a, #d4d8ef02 46%, #d8cced06), #0c121bc2;
  border-color: #ecf4ff30;
  box-shadow: inset 0 1px 0 #ffffff24, inset 0 -1px 0 #ffffff07, 0 8px 24px -16px #0009;
  -webkit-backdrop-filter: blur(30px) saturate(125%);
  backdrop-filter: blur(30px) saturate(125%);
}

header::after {
  background: linear-gradient(114deg, #eafff580, #dbe7f51a 24%, #a8b3d526 60%, #ede6ff6b 96%);
}

#lobby .entry-card {
  background:
    radial-gradient(ellipse at 1% 0%, #dfffaf0b, transparent 55%),
    linear-gradient(150deg, #f5ffed0a, transparent 50%),
    var(--glass-body);
}

#lobby .map-top-label {
  border-radius: 8px;
  background: #11171fb0;
}

.wallet-tabs {
  padding: 5px;
  border-radius: 10px;
  background: #03070966;
  border-color: #effaff16;
  box-shadow: inset 0 1px 3px #0004, 0 1px 0 #ffffff07;
}

.wallet-tabs > button {
  border-radius: 6px;
  transition: color .3s, background .3s, box-shadow .3s;
}

.wallet-tabs > button.selected {
  background: linear-gradient(150deg, #eaffd719, #c2e9ae0b);
  color: #e4ffc9;
  box-shadow: inset 0 1px 0 #eaffdf29, 0 1px 4px #0002;
}

.outline {
  border-color: #e6f1f32b;
  background: linear-gradient(150deg, #ffffff09, #ffffff02);
  box-shadow: inset 0 1px 0 #ffffff0c;
  transition: color .3s var(--glass-ease), background .3s var(--glass-ease), border-color .3s var(--glass-ease), box-shadow .3s var(--glass-ease);
}

.outline:hover {
  border-color: #edfef15e;
  background: #ecfff00d;
  box-shadow: inset 0 1px 0 #ffffff19;
}

button.primary,
a.primary {
  transition: background .3s var(--glass-ease), box-shadow .3s var(--glass-ease), border-color .3s var(--glass-ease);
}

.primary:hover {
  transform: none;
  box-shadow: inset 0 1px 0 #fff8, 0 4px 18px -6px #c8ff7933;
}

.mode-card {
  background: linear-gradient(140deg, #efffff06, #ffffff02);
  border-color: #e6f5f522;
  transition: background .35s var(--glass-ease), border-color .35s var(--glass-ease);
}

.mode-card[href]:hover {
  transform: none;
  background: #e4fff007;
  border-color: #d3fbd84a;
  transition: background .35s var(--glass-ease), border-color .35s var(--glass-ease);
}

.art-button > img {
  transition: transform .9s var(--glass-ease), filter .5s var(--glass-ease);
}

.art-button:hover > img {
  transform: scale(1.02);
}

.mp-fields input,
.mp-fields select,
.room-join input {
  border-color: #e6f5f52c;
  background: #02060866;
  box-shadow: inset 0 1px 3px #0003, 0 1px 0 #ffffff05;
  transition: border-color .3s, background .3s;
}

.mp-fields input:focus,
.mp-fields select:focus,
.room-join input:focus {
  border-color: #d5fac272;
  background: #070e1399;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  #lobby .glass::before { opacity: 0; }
  #lobby .glass::after { --glass-light: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .art-button:hover > img { transform: none; }
}

body.playing #lobby .glass::before,
body.intro-running #lobby .glass::before {
  opacity: 0;
}

/* Reward labels remain readable without stretching the hero on ultrawide displays. */
.header-twitter { display:flex; align-items:center; gap:8px; min-height:42px; padding:0 8px; color:#f0f8fa; text-decoration:none; font-size:10px; letter-spacing:.08em }
.header-twitter svg { width:17px; height:17px; flex:none }
.hero-rewards { display:flex; flex-wrap:wrap; gap:6px; max-width:540px; margin:18px 0 24px; align-items:center }
.hero-rewards > span { border:1px solid #def8ff30; border-radius:6px; background:#0b15276b; backdrop-filter:blur(14px); color:#f2f7ff; padding:7px 10px; font-size:10px; letter-spacing:.07em }
.hero-rewards > span:first-child { color:#d8ffbc; border-color:#d8ffbc55 }
.hero-rewards a { width:100%; margin-top:5px; color:#d7e0ed; font-size:12px; text-decoration:none }
body.playing #notice { z-index:10000; max-width:min(540px,calc(100vw - 32px)); bottom:24px; left:50%; right:auto; transform:translateX(-50%); pointer-events:none; border:1px solid #d5ffc06b; background:#0a171cf0; color:#f1fff7 }
#result-claim,#claim-receipt { margin:8px 0 }
@media(min-width:1800px) {
  :root { --content-width:1640px }
  header { left:50%; right:auto; width:calc(100% - 96px); max-width:var(--content-width); transform:translateX(-50%); box-sizing:border-box }
  #lobby .section-shell,footer,#guide { width:calc(100% - 128px); max-width:var(--content-width); margin-inline:auto; box-sizing:border-box }
  .cinematic .hero-content { width:var(--content-width); max-width:calc(100% - 128px); margin-inline:auto; padding-inline:0 }
  .cinematic #device-dock { right:max(64px,calc((100vw - var(--content-width))/2)); }
  .hero-bottomline { left:max(64px,calc((100vw - var(--content-width))/2)); right:max(64px,calc((100vw - var(--content-width))/2)) }
  .cinematic h1 { font-size:clamp(98px,5.3vw,126px); max-width:950px }
  .cinematic #hero-description { max-width:550px; font-size:17px; line-height:1.65 }
  .hero-rewards { max-width:550px }
  .hero-video { object-position:center 55% }
}
@media(min-aspect-ratio:24/9) and (min-width:1800px) {
  .cinematic { min-height:850px; height:100svh; max-height:1200px }
  .cinematic .hero-content { padding-top:clamp(170px,19vh,260px) }
}
@media(max-width:1100px) { .header-twitter span { display:none } .header-twitter { padding-inline:4px } }
@media(max-width:650px) { .hero-rewards { max-width:320px; margin-block:12px 18px } .hero-rewards > span { font-size:9px; padding:6px 8px } .hud-actions { gap:5px; flex-wrap:wrap; justify-content:flex-end; max-width:240px } .hud-actions button { font-size:10px; padding:8px } }
#stock-loot { position:absolute; bottom:92px; left:50%; transform:translateX(-50%); padding:10px 18px; border:1px solid #c6daff55; border-radius:8px; background:#111a2ad9; color:#e2efff; font-size:12px; white-space:nowrap; pointer-events:none }

.treasury-description{max-width:38ch;font-size:.78rem;line-height:1.6;color:#c4ced1;margin:12px 0}.wallet-card #treasury-status{font-size:.68rem;line-height:1.5}.wallet-card .wallet-coin{pointer-events:none}.wallet-card .balance strong{font-size:clamp(1.7rem,3vw,3.5rem)}
#pons-buy{z-index:1100}#pons-buy .modal-panel{max-width:540px}#pons-buy label{display:grid;gap:8px;font-size:.8rem}#pons-amount{width:100%;padding:14px;border:1px solid #ffffff30;border-radius:8px;color:#fff;background:#ffffff09;font:inherit}#pons-status{min-height:3.5em;font-size:.82rem;line-height:1.6}
#pons-buy .modal-panel{scrollbar-width:thin;scrollbar-color:#59636c #182129}#pons-buy .modal-panel::-webkit-scrollbar{width:5px}#pons-buy .modal-panel::-webkit-scrollbar-thumb{background:#59636c;border-radius:5px}#pons-buy .modal-panel::-webkit-scrollbar-track{background:#182129}