/* PolyRealms in 3D: Five Wells' own look (smoked glass, white, lime; Bricolage Grotesque and Figtree), over a vivid world. */
@font-face { font-family: Brico; src: url(/realm/fonts/BricolageGrotesque.woff2); font-weight: 200 800; }
@font-face { font-family: Fig; src: url(/realm/fonts/Figtree.woff2); font-weight: 300 900; }
:root { --ink: #111014; --lime: #d6ff3f; --mist: rgba(255,255,255,.72); --line: rgba(255,255,255,.16); --glass: rgba(20,19,23,.56); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0c10; color: #fff; font: 500 16px/1.35 Fig, system-ui, sans-serif; }
[hidden] { display: none !important; }
#cv { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.glass { background: var(--glass); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); border: 1px solid var(--line); border-radius: 16px; }
.chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font: 700 13px/1 Fig; color: #fff; }
button { font: inherit; color: inherit; cursor: pointer; }

/* title */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(16px, 7vw, 120px); gap: 28px;
  background: radial-gradient(120% 90% at 85% 10%, #1e5f8a 0%, transparent 55%), radial-gradient(90% 80% at 0% 100%, #2c7a3a 0%, transparent 60%), #101015; }
.brand { font: 800 clamp(48px, 9vw, 120px)/.9 Brico; letter-spacing: -.035em; }
.brand i { font-style: normal; color: var(--lime); }
.games { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; max-width: 100%; }
.game { flex: 0 0 auto; width: min(340px, 82vw); display: flex; flex-direction: column; text-align: left; padding: 0; border-radius: 18px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--line); transition: transform .15s, border-color .15s; }
.game img { width: 100%; height: 150px; object-fit: cover; display: block; background: #1a1a20; }
.game .gtxt { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.game .gt { font: 800 22px/1.05 Brico; letter-spacing: -.01em; }
.game .gs { color: var(--mist); font-size: 14px; }
.game:hover { transform: translateY(-2px); }
.game.on { border-color: var(--lime); box-shadow: 0 0 0 2px var(--lime) inset; }
.go { align-self: flex-start; padding: 14px 34px; border: 0; border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 20px/1 Brico; }
.go:hover { filter: brightness(1.08); }
#err { color: #ffb3c0; font-weight: 700; min-height: 1em; }

/* loading */
#loading { justify-content: flex-end; padding-bottom: 12vh; }
#lTitle { font: 800 clamp(36px, 6vw, 72px)/.95 Brico; letter-spacing: -.03em; }
#lTag { color: var(--mist); font-size: 18px; max-width: 46ch; }
.bar { width: min(520px, 100%); height: 6px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
#lBar { height: 100%; width: 0; background: var(--lime); transition: width .25s; }
#lStep { font: 700 13px/1 Fig; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }

/* in play */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#place { position: absolute; left: 16px; top: 16px; display: flex; gap: 12px; align-items: center; padding: 9px 14px; }
#place b { font: 800 18px/1 Brico; }
#place .clock { font: 800 16px/1 Fig; }
#camBtn { position: absolute; right: 16px; top: 16px; display: flex; gap: 10px; align-items: center; padding: 9px 14px 9px 10px; border: 1px solid var(--line); }
#camBtn .key { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--lime); color: var(--ink); font: 800 14px/1 Fig; }
#camBtn span { font: 800 15px/1 Fig; }
#say { position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%); padding: 12px 18px; font-weight: 700; max-width: min(640px, 90vw); text-align: center; }
@media (max-width: 600px) { #place { top: 12px; left: 12px; } #camBtn { top: auto; bottom: 16px; right: 16px; } }