/* ===== Local fonts ===== */



/* ===== Fonts ===== */
:root{
  --bg:#0c0f14;
  --fg:#eef2f7;
  --muted:#9ea5b3;
  --line:rgba(255,255,255,.08);
  --acc:#cb6a2b;
  --acc2:#a44f1f;
  --glass:rgba(255,255,255,.06);
  --danger:#ff4d6d;
  --ok:#17d47a;
  --warn:#ffbb33;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --bg-img: url('bg_main.jpg');
  --noise: url('assets/atrium_bg.png');
}

/* ===== Themes (expanded more) ===== */
[data-theme="ashen"] { --bg:#0b0d10; --acc:#ad7648; --acc2:#8d5630; }
[data-theme="abyss"] { --bg:#020212; --acc:#2b79ff; --acc2:#493bff; }
[data-theme="ice"] { --bg:#0b1116; --acc:#5ac8ff; --acc2:#2aa8ff; }
[data-theme="rust"] { --bg:#120b07; --acc:#c9652e; --acc2:#9c4210; }
[data-theme="emerald"]{ --bg:#08110c; --acc:#23d19f; --acc2:#17a179; }
[data-theme="sand"] { --bg:#18130a; --acc:#d6b679; --acc2:#c39248; }
[data-theme="amber"] { --bg:#1a0e02; --acc:#ffb02e; --acc2:#d07a00; }
[data-theme="crimson"] { --bg:#18060a; --acc:#ff3b5c; --acc2:#b3123b; }
[data-theme="violet"] { --bg:#0e0718; --acc:#b18cff; --acc2:#7c4dff; }
[data-theme="aqua"] { --bg:#041416; --acc:#4cf0ff; --acc2:#00bcd4; }
[data-theme="graphite"] { --bg:#0b0b0d; --acc:#c1c7d0; --acc2:#a1a6af; }
[data-theme="copper"] { --bg:#1a0c06; --acc:#c98c5a; --acc2:#925e33; }
[data-theme="steel"] { --bg:#0d1013; --acc:#8aa0b3; --acc2:#6a7f92; }
[data-theme="sunset"] { --bg:#1b0d0c; --acc:#ff8a4c; --acc2:#ff3b30; }
[data-theme="toxic"] { --bg:#0b120b; --acc:#9cff2e; --acc2:#58d12e; }
[data-theme="plasma"] { --bg:#050a15; --acc:#30e1ff; --acc2:#a14bff; }
[data-theme="obsidian"] { --bg:#080808; --acc:#777; --acc2:#444; }
[data-theme="neon"] { --bg:#000; --acc:#ff00ff; --acc2:#00ffff; }
[data-theme="void"] { --bg:#000; --acc:#bbb; --acc2:#888; }
/* New (unique) */
[data-theme="wasteland"] { --bg:#0f0d09; --acc:#e0b07e; --acc2:#7a4b27; }
[data-theme="radiant"] { --bg:#061015; --acc:#ffd34d; --acc2:#2cffc5; }
[data-theme="cobalt"] { --bg:#040914; --acc:#1e5bff; --acc2:#00d4ff; }
[data-theme="sepia"] { --bg:#140f08; --acc:#c58b55; --acc2:#7a4f2a; }
[data-theme="bone"] { --bg:#0d0d0b; --acc:#e6e2d3; --acc2:#b89b6a; }
[data-theme="noir"] { --bg:#030303; --acc:#f5f5f5; --acc2:#6d6d6d; }

/* ===== Reset ===== */
*{box-sizing:border-box}
html,body{height:100%; width:100%; overflow:hidden; overscroll-behavior:none; position:fixed; inset:0; max-width:100%;}
body{
  margin:0;
  width:100%;
  min-height:100dvh;
  max-height:100dvh;
  color:var(--fg);
  background:var(--bg) fixed;
  font:400 16px/1.45 InterLocal, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "DejaVu Sans", Arial, "Helvetica Neue", Helvetica, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  touch-action:manipulation;
  overscroll-behavior:none;
}
#app{position:relative; height:100dvh; min-height:100dvh; overflow:hidden}
.hidden{display:none !important}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
img{max-width:100%; display:block}

/* ===== Glass card ===== */
.glass{
  background: var(--glass);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
}

/* ===== Topbar ===== */
#topbar{
  position:fixed; inset:12px 12px auto 12px; height:60px; display:flex; align-items:center; justify-content:flex-end; gap:10px; z-index:60; padding:0 12px; overflow:hidden;
}
#topbar::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,184,110,.10) 48%, rgba(255,255,255,.02)); opacity:.9; pointer-events:none; }
.topbar-right{ position:relative; z-index:2; display:flex; align-items:center; gap:8px; margin-left:auto; }
.hubstats{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2; display:flex; align-items:center; gap:10px; pointer-events:none; }
.hub-chip{ min-width:126px; height:38px; padding:0 12px; display:flex; align-items:center; gap:8px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.hub-copy{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.hub-copy b{ font-size:14px; letter-spacing:.03em; }
.hub-copy small{ font-size:10px; opacity:.76; text-transform:uppercase; letter-spacing:.08em; }
.pill{ height:38px; padding:0 12px; border-radius:999px; display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.pill .ico, .hub-chip .ico{ width:20px; height:20px; display:inline-block; background-size:contain; background-position:center; background-repeat:no-repeat; opacity:.96 }
.ico-coins{ background-image: radial-gradient(circle at 30% 30%, #ffe39c, #c78a28 72%); border-radius:50%; box-shadow: 0 0 0 1px rgba(255,232,170,.28) inset; }
.ico-progress{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23f4d27a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 18.5V6.8a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1V17a1 1 0 0 1-1 1H8.5'/><path fill='none' stroke='%23f4d27a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m8.2 15.5 2.2 2.2L20 8.2'/></svg>"); }
.ico-ending{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23f4d27a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 3.2 14.5 8l5.3.7-3.8 3.7.9 5.2-4.9-2.6-4.9 2.6.9-5.2L4.2 8.7 9.5 8 12 3.2Z'/></svg>"); }
.ico-hp{ background-image: radial-gradient(circle at 30% 30%, #ff7a7a, #b01111); border-radius:50% }

/* ===== Bottom bar (icons only) ===== */
#bottombar{
  position:fixed; inset:auto 10px 10px 10px; height:64px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; z-index:50; padding:6px; align-items:center;
}
#bottombar .tab{
  height:52px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
#bottombar .tab[aria-selected="true"]{ outline:0; border-color:rgba(255,178,107,.66); background: linear-gradient(180deg, rgba(203,106,43,.26), rgba(203,106,43,.12)); box-shadow:0 0 0 1px rgba(255,176,98,.22) inset, 0 10px 22px rgba(203,106,43,.16); }
.i{ width:26px; height:26px; display:inline-block; border-radius:0; background:linear-gradient(180deg, rgba(255,214,151,.98), rgba(225,123,42,.92)); filter:drop-shadow(0 2px 5px rgba(0,0,0,.24)); }
.i-home{ mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M4.5 10.5 12 4l7.5 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-3.8a.7.7 0 0 1-.7-.7v-5.1h-3v5.1a.7.7 0 0 1-.7.7H6a1.5 1.5 0 0 1-1.5-1.5v-8Z'/></svg>") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M4.5 10.5 12 4l7.5 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-3.8a.7.7 0 0 1-.7-.7v-5.1h-3v5.1a.7.7 0 0 1-.7.7H6a1.5 1.5 0 0 1-1.5-1.5v-8Z'/></svg>") center/contain no-repeat; }
.i-fortune{ mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 2.5c1.2 0 2.2.5 3 1.3l4.2 4.2a4.2 4.2 0 0 1 0 6l-4.2 4.2a4.2 4.2 0 0 1-6 0L4.8 14a4.2 4.2 0 0 1 0-6L9 3.8a4.2 4.2 0 0 1 3-1.3Zm0 4.1a5.4 5.4 0 1 0 0 10.8A5.4 5.4 0 0 0 12 6.6Zm0 2.2 1.6 2.5 2.9.8-1.9 2.3.1 3-2.7-1.1-2.7 1.1.1-3-1.9-2.3 2.9-.8L12 8.8Z'/></svg>") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 2.5c1.2 0 2.2.5 3 1.3l4.2 4.2a4.2 4.2 0 0 1 0 6l-4.2 4.2a4.2 4.2 0 0 1-6 0L4.8 14a4.2 4.2 0 0 1 0-6L9 3.8a4.2 4.2 0 0 1 3-1.3Zm0 4.1a5.4 5.4 0 1 0 0 10.8A5.4 5.4 0 0 0 12 6.6Zm0 2.2 1.6 2.5 2.9.8-1.9 2.3.1 3-2.7-1.1-2.7 1.1.1-3-1.9-2.3 2.9-.8L12 8.8Z'/></svg>") center/contain no-repeat; }
.i-tasks{ mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M8.8 3a2 2 0 0 1 2 2h2.4a2 2 0 0 1 2-2h1.4a2 2 0 0 1 2 2V6h1.2A2.2 2.2 0 0 1 22 8.2v10.6a2.2 2.2 0 0 1-2.2 2.2H4.2A2.2 2.2 0 0 1 2 18.8V8.2A2.2 2.2 0 0 1 4.2 6h1.2V5a2 2 0 0 1 2-2h1.4Zm0 2v1.2h6.4V5H8.8Zm.5 6.2 1.6 1.6 4-4 1.4 1.4-5.4 5.4-3-3 1.4-1.4Z'/></svg>") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M8.8 3a2 2 0 0 1 2 2h2.4a2 2 0 0 1 2-2h1.4a2 2 0 0 1 2 2V6h1.2A2.2 2.2 0 0 1 22 8.2v10.6a2.2 2.2 0 0 1-2.2 2.2H4.2A2.2 2.2 0 0 1 2 18.8V8.2A2.2 2.2 0 0 1 4.2 6h1.2V5a2 2 0 0 1 2-2h1.4Zm0 2v1.2h6.4V5H8.8Zm.5 6.2 1.6 1.6 4-4 1.4 1.4-5.4 5.4-3-3 1.4-1.4Z'/></svg>") center/contain no-repeat; }
.i-pass{ mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6 5h12a1 1 0 0 1 1 1v1.2a2.8 2.8 0 0 0 0 5.6V14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-1.2a2.8 2.8 0 0 0 0-5.6V6a1 1 0 0 1 1-1Zm4.8 2.8h2.4V9h2v2.1h-2v1.1h-2.4v-1.1h-2V9h2V7.8Z'/></svg>") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6 5h12a1 1 0 0 1 1 1v1.2a2.8 2.8 0 0 0 0 5.6V14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-1.2a2.8 2.8 0 0 0 0-5.6V6a1 1 0 0 1 1-1Zm4.8 2.8h2.4V9h2v2.1h-2v1.1h-2.4v-1.1h-2V9h2V7.8Z'/></svg>") center/contain no-repeat; }
.i-store{ mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M8.2 4.2A2 2 0 0 1 10 3h4a2 2 0 0 1 1.8 1.2l.6 1.3H19A1.8 1.8 0 0 1 20.8 7v1.8a2.7 2.7 0 0 1-1.2 2.2V18A2 2 0 0 1 17.6 20H6.4A2 2 0 0 1 4.4 18v-7a2.7 2.7 0 0 1-1.2-2.2V7A1.8 1.8 0 0 1 5 5.5h2.6l.6-1.3Zm1.2 1.3h5.2L14 4.8h-4l-.6.7ZM7 12.8h10.2V18H7v-5.2Z'/></svg>") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M8.2 4.2A2 2 0 0 1 10 3h4a2 2 0 0 1 1.8 1.2l.6 1.3H19A1.8 1.8 0 0 1 20.8 7v1.8a2.7 2.7 0 0 1-1.2 2.2V18A2 2 0 0 1 17.6 20H6.4A2 2 0 0 1 4.4 18v-7a2.7 2.7 0 0 1-1.2-2.2V7A1.8 1.8 0 0 1 5 5.5h2.6l.6-1.3Zm1.2 1.3h5.2L14 4.8h-4l-.6.7ZM7 12.8h10.2V18H7v-5.2Z'/></svg>") center/contain no-repeat; }
.i-events{ mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M7 3h2v2h6V3h2v2h1.8A2.2 2.2 0 0 1 21 7.2v11.6a2.2 2.2 0 0 1-2.2 2.2H5.2A2.2 2.2 0 0 1 3 18.8V7.2A2.2 2.2 0 0 1 5.2 5H7V3Zm-1.8 6.2v9.6h13.6V9.2H5.2Zm3.1 2.3h3.1v3.1H8.3v-3.1Z'/></svg>") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M7 3h2v2h6V3h2v2h1.8A2.2 2.2 0 0 1 21 7.2v11.6a2.2 2.2 0 0 1-2.2 2.2H5.2A2.2 2.2 0 0 1 3 18.8V7.2A2.2 2.2 0 0 1 5.2 5H7V3Zm-1.8 6.2v9.6h13.6V9.2H5.2Zm3.1 2.3h3.1v3.1H8.3v-3.1Z'/></svg>") center/contain no-repeat; }
.i-profile{ mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 4.5a4.2 4.2 0 1 1 0 8.4 4.2 4.2 0 0 1 0-8.4Zm0 10c4.4 0 8 2.5 8 5.5V21H4v-1c0-3 3.6-5.5 8-5.5Z'/></svg>") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 4.5a4.2 4.2 0 1 1 0 8.4 4.2 4.2 0 0 1 0-8.4Zm0 10c4.4 0 8 2.5 8 5.5V21H4v-1c0-3 3.6-5.5 8-5.5Z'/></svg>") center/contain no-repeat; }
.i-gear{ mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 8.7a3.3 3.3 0 1 0 0 6.6 3.3 3.3 0 0 0 0-6.6Zm8.3 3.3-.2-1.5 1.9-1.5-1.8-3.2-2.3.9a8.4 8.4 0 0 0-1.9-1.1L15.1 2h-6.2l-.8 3.6c-.7.3-1.3.7-1.9 1.1l-2.3-.9L2.1 9l1.9 1.5-.2 1.5.2 1.5L2.1 15l1.8 3.2 2.3-.9c.6.5 1.2.8 1.9 1.1l.8 3.6h6.2l.8-3.6c.7-.3 1.3-.7 1.9-1.1l2.3.9 1.8-3.2-1.9-1.5.2-1.5Z'/></svg>") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 8.7a3.3 3.3 0 1 0 0 6.6 3.3 3.3 0 0 0 0-6.6Zm8.3 3.3-.2-1.5 1.9-1.5-1.8-3.2-2.3.9a8.4 8.4 0 0 0-1.9-1.1L15.1 2h-6.2l-.8 3.6c-.7.3-1.3.7-1.9 1.1l-2.3-.9L2.1 9l1.9 1.5-.2 1.5.2 1.5L2.1 15l1.8 3.2 2.3-.9c.6.5 1.2.8 1.9 1.1l.8 3.6h6.2l.8-3.6c.7-.3 1.3-.7 1.9-1.1l2.3.9 1.8-3.2-1.9-1.5.2-1.5Z'/></svg>") center/contain no-repeat; }
.i-more{ mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M4 6h16v2H4V6Zm0 5h16v2H4v-2Zm0 5h16v2H4v-2Z'/></svg>") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M4 6h16v2H4V6Zm0 5h16v2H4v-2Zm0 5h16v2H4v-2Z'/></svg>") center/contain no-repeat; }


/* ===== Layout ===== */
#view{ position:fixed; inset:0; padding:86px 16px 88px; overflow-y:auto; overflow-x:hidden; min-height:0; height:100dvh; z-index:10; -webkit-overflow-scrolling:touch; overscroll-behavior:none; touch-action:pan-y }
.section{ margin:12px 0 10px; font:900 18px/1 'RussoOneLocal', system-ui, Arial, sans-serif; opacity:.95; letter-spacing:.02em }

/* ===== Background ===== */
#app::before{
  content:""; position:fixed; inset:0; z-index:0;
  background-image: var(--bg-img), radial-gradient(rgba(255,255,255,.03), transparent 60%);
  background-size: cover, 100% 100%;
  background-position:center center;
  will-change: background-position;
  animation: slow-pan 60s linear infinite;
}
#app::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image: var(--noise);
  background-size: 800px auto;
  mix-blend-mode: overlay;
  opacity:.10;
  animation: noise-shift 14s linear infinite;
}
@keyframes slow-pan{ 0%{ background-position:50% 50% } 50%{ background-position:52% 48% } 100%{ background-position:50% 50% } }
@keyframes noise-shift{ 0%{ background-position:0 0 } 100%{ background-position:800px 400px } }

/* ===== Preloader ===== */
#preloader{ position:fixed; inset:0; z-index:9999; display:grid; place-items:end center; overflow:hidden; color:var(--fg); }
#preloader .bg{ position:absolute; inset:0; background-size:cover; background-position:center top; filter:grayscale(.18) brightness(.73); transform:scale(1.03); }
#pre-stars{ position:absolute; inset:0; z-index:0 }
.pre{ z-index:2; width:min(900px, 92vw); margin:0 0 10vh; padding:18px 16px 18px; display:flex; flex-direction:column; align-items:center; gap:14px; position:relative }
.pre-rust{ background: rgba(203,106,43,.12); border: 1px solid rgba(203,106,43,.45); box-shadow: 0 10px 36px rgba(203,106,43,.25), inset 0 0 0 1px rgba(255,255,255,.04); }
.pre .logo{ font: 900 28px/1 'RussoOneLocal', system-ui, Arial, sans-serif; letter-spacing:.06em }
.pre .sub{ opacity:.9 }
.tips{ min-height:28px; opacity:.9; text-align:center }
.pulse-outline::before{ content:""; position:absolute; inset:-2px; border-radius:16px; border:1px solid rgba(203,106,43,.6); box-shadow: 0 0 0 0 rgba(203,106,43,.55), inset 0 0 0 1px rgba(255,255,255,.05); animation: pulse 2.2s ease-in-out infinite; pointer-events:none; }
@keyframes pulse{ 0%{ box-shadow: 0 0 0 0 rgba(203,106,43,.45) } 70%{ box-shadow: 0 0 0 18px rgba(203,106,43,0) } 100%{ box-shadow: 0 0 0 0 rgba(203,106,43,0) } }

/* ===== Buttons & Cards ===== */
.button{ height:46px; padding:0 16px; border-radius:14px; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; gap:8px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.08)); transition: transform .12s ease, background .2s ease; }
.button:active{ transform: translateY(1px) scale(.98) }
.button.big{ height:54px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.button.primary{ background: linear-gradient(180deg, var(--acc), var(--acc2)); border:0 }
.button.rusty{ background: linear-gradient(180deg, rgba(203,106,43,.20), rgba(203,106,43,.12)); border:1px solid rgba(203,106,43,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }

.grid{ display:grid; gap:12px }
.grid.menu{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card{ padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(4,6,10,.84), rgba(4,6,10,.94)); box-shadow: var(--shadow); display:flex; flex-direction:column; gap:10px }
.card .title{ font:800 18px/1.1 'RussoOneLocal', system-ui }
.card .desc{ opacity:.98; color:rgba(255,246,233,.96); text-shadow:0 2px 8px rgba(0,0,0,.58) }
.card .img{ aspect-ratio: 16/9; border-radius:12px; overflow:hidden; background:#0002; background-size:cover; background-position:center; position:relative }
.card .row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.row.spread{ justify-content:space-between }

/* ===== Slider (Home) + Desktop fixes ===== */
.slider{ position:relative; overflow:hidden; border-radius:30px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow:0 24px 80px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04); }
.slider::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(255,173,90,.16), transparent 42%); pointer-events:none; z-index:0; }
.slider .track{ display:flex; gap:18px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding:18px; -webkit-overflow-scrolling: touch; perspective:1600px; scroll-padding:18px; overscroll-behavior-x:contain; overscroll-behavior-y:none; touch-action:pan-x; }
.slider .slide{ --offset:0; --abs-offset:0; --mx:.5; --my:.35; min-width:90%; max-width:90%; scroll-snap-align:center; border-radius:28px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.10); background:rgba(3,6,10,.38); box-shadow:0 20px 60px rgba(0,0,0,.38); transform:translateY(calc(var(--abs-offset) * 14px)) rotateY(calc(var(--offset) * -13deg)) scale(calc(1 - (var(--abs-offset) * .08))); transform-style:preserve-3d; transition:transform .38s cubic-bezier(.2,.8,.2,1), filter .3s ease, box-shadow .3s ease; filter:saturate(calc(.82 + (1 - var(--abs-offset)) * .35)) brightness(calc(.84 + (1 - var(--abs-offset)) * .18)); }
.slider .slide::before{ content:''; position:absolute; inset:-18% -10% auto; height:42%; background:radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255,207,137,.30), transparent 48%); opacity:calc(.18 + (1 - var(--abs-offset)) * .42); pointer-events:none; z-index:2; transition:opacity .28s ease; }
.slider .slide::after{ content:''; position:absolute; inset:auto 12% -24% 12%; height:34%; background:radial-gradient(circle, rgba(255,132,54,.28), transparent 64%); filter:blur(24px); opacity:calc(.12 + (1 - var(--abs-offset)) * .28); pointer-events:none; z-index:1; }
.slider .slide.is-active{ box-shadow:0 28px 90px rgba(0,0,0,.46), 0 0 0 1px rgba(255,214,140,.10); }
.slider .slide .img{ aspect-ratio: 3/4; min-height: 420px; background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.34)); position:relative; border-radius:28px; overflow:hidden; }
.slider .slide .img .poster{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; filter:saturate(1.04) contrast(1.02); transform:translate3d(calc(var(--offset) * -22px), calc(var(--abs-offset) * 4px), 0) scale(calc(1.03 + (1 - var(--abs-offset)) * .02)); transition:transform .38s cubic-bezier(.2,.8,.2,1), filter .3s ease; }
.slider .slide .img::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255,255,255,.14), transparent 32%); mix-blend-mode:screen; pointer-events:none; z-index:1; }
.slider .slide .img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.02) 16%, rgba(0,0,0,.10) 52%, rgba(0,0,0,.82) 100%); pointer-events:none; z-index:1; }
.slider .slide .cap{ position:absolute; left:14px; right:14px; bottom:14px; padding:14px; display:grid; gap:10px; z-index:3; border-radius:22px; background:linear-gradient(180deg, rgba(6,8,12,.74), rgba(6,8,12,.94)); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); box-shadow:0 18px 50px rgba(0,0,0,.42); }
.slider .slide .cap .title{ font-size:22px; line-height:1.02; }
.slider .slide .cap .sub{ font-size:13px; opacity:.96; color:rgba(255,244,228,.90); max-width:32ch; text-shadow:0 1px 2px rgba(0,0,0,.40); }
.slider .nav{ position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; pointer-events:none }
.slider .nav button{ pointer-events:auto; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(0,0,0,.35) }

/* ===== Store ===== */
.store .items{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px }
.store .item .img{ aspect-ratio: 4/3; }
.store .price{ font-weight:800 }
.badge{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px; font-size:12px; background:rgba(255,255,255,.08); border:1px solid var(--line) }

/* ===== Profile ===== */
.profile .portraits{ display:grid; grid-template-columns: repeat(5, 1fr); gap:10px }
.profile .portraits .ph{ aspect-ratio:1/1; border-radius:12px; overflow:hidden; border:1px solid var(--line); position:relative; background:#0003 }
.profile .portraits img{ width:100%; height:100%; object-fit:cover }
.profile .portraits .ph.active{ outline:2px solid var(--acc); box-shadow:0 0 0 3px rgba(203,106,43,.32) }
.themes, .fxs{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:10px }
.chip{ padding:8px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.05); display:grid; gap:8px; position:relative }
.chip.locked{ opacity:.6 }
.chip .demo{ height:60px; border-radius:8px; background: rgba(255,255,255,.06); border:1px solid var(--line); position:relative; overflow:hidden }
.fxs .chip .demo{ height:86px }
.chip .demo.theme-demo{ background: linear-gradient(135deg, var(--bg), rgba(0,0,0,.35)); }
.chip .demo.theme-demo::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.25) 100%),
              linear-gradient(90deg, var(--acc), var(--acc2));
  mix-blend-mode: screen;
  opacity:.55;
}
.chip .name{ font-weight:800 }
.chip .badge{ position:absolute; right:8px; top:8px }
.chip .lock{ position:absolute; inset:auto 8px 8px auto; }

/* ===== Fortune ===== */
.fortune .big-bg{ width:min(100%, 460px); margin:0 auto; aspect-ratio: 3/4.2; border-radius:16px; background-size:cover; background-position:center; border:1px solid var(--line); box-shadow: var(--shadow); overflow:hidden }
.fortune .big-bg.swap-in{ animation: fortuneReveal .55s ease }
.flash{ animation: flash .8s ease }
@keyframes flash{ 0%{ filter:brightness(1) } 30%{ filter:brightness(2.2) } 100%{ filter:brightness(1) } }
@keyframes fortuneReveal{ 0%{ opacity:.25; transform:scale(.96); filter:blur(8px) saturate(.8) } 100%{ opacity:1; transform:scale(1); filter:blur(0) saturate(1) } }

/* ===== Events ===== */
.events .list{ display:grid; gap:12px }
.events .ev{ padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(6,8,12,.76), rgba(6,8,12,.90)); display:grid; gap:6px; box-shadow:0 16px 42px rgba(0,0,0,.28) }
.events .ev .status{ font-size:12px; opacity:.9 }
.events .ev .progress{ height:10px; border-radius:99px; background:rgba(255,255,255,.08); border:1px solid var(--line); overflow:hidden }
.events .ev .progress i{ display:block; height:100%; background: linear-gradient(90deg, var(--acc), var(--acc2)); width:0% }

/* ===== Story viewer ===== */
.story .dialog{ padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(6,8,12,.76), rgba(6,8,12,.92)); box-shadow: var(--shadow); display:grid; gap:12px }
.story .bg{ width:100%; aspect-ratio: 16/9; border-radius:14px; overflow:hidden; border:1px solid var(--line); background-size:cover; background-position:center }
.story .actor{ display:flex; align-items:center; gap:10px; }
.story .actor .portrait{ width:48px; height:48px; border-radius:10px; overflow:hidden; border:1px solid var(--line) }
.story .actor .name{ font:800 16px/1 'RussoOneLocal', system-ui }
.story .text p{ margin:0 0 6px 0 }
.story .choices{ display:grid; gap:8px }
.story .choices .button{ width:100%; height:50px; text-align:center }
.story .price{ margin-left:auto; opacity:.9 }


/* ===== Story HUD (stats/skills quick view) ===== */
.story .hud{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.story .hud .hud-pill{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  opacity:.95;
}
.story .hud .hud-btn{
  height:26px;
  width:36px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.story .hud .hud-btn:active{ transform: translateY(1px) }

/* ===== Character sheet ===== */
.kv{ display:grid; gap:8px; margin-top:10px }
.kvrow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
}
.kvrow .k{ opacity:.85 }
.kvrow .v{ font-weight:700 }

/* ===== Pass & Tasks (clarity) ===== */
.tasks .list{ display:grid; gap:12px }
.tasks .task{ padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(6,8,12,.84), rgba(6,8,12,.95)); display:grid; gap:6px; box-shadow:0 16px 42px rgba(0,0,0,.32) }
.tasks .row{ display:flex; align-items:center; justify-content:space-between; gap:8px }

.pass .head{ display:grid; gap:8px }
.pass .legend{ display:flex; gap:8px; flex-wrap:wrap }
.pass .legend .badge{ opacity:.95 }
.pass .track{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.pass .tier{ padding:12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.05); position:relative }
.pass .tier.claimable{ outline:2px solid var(--acc); box-shadow:0 0 0 3px rgba(203,106,43,.22) }
.pass .tier.locked{ opacity:.6 }
.pass .tier .tt{ font:800 14px/1 'RussoOneLocal', system-ui }
.pass .tier .rw{ display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.pass .bar{ height:12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.08); overflow:hidden }
.pass .bar i{ display:block; height:100%; background: linear-gradient(90deg, var(--acc), var(--acc2)); width:0% }
.pass .lock{ position:absolute; right:10px; top:10px; opacity:.85 }
.pass .claimed{ position:absolute; inset:auto 10px 10px auto; font-size:12px; opacity:.9 }
.pass .badge{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px; font-size:12px; background:rgba(255,255,255,.08); border:1px solid var(--line) }

/* ===== Modal (scroll fix) ===== */
#modal{ position:fixed; inset:0; display:grid; place-items:center; background: rgba(0,0,0,.45); z-index:200 }
#modal .mcard{ width:min(900px, 94vw); max-height:90vh; padding:16px; position:relative; display:flex; flex-direction:column }
#modal .mclose{ position:absolute; right:10px; top:10px; width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background: rgba(255,255,255,.06) }
#mbody{ scrollbar-gutter: stable both-edges; overflow:auto; max-height:calc(90vh - 60px); padding-right:6px; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior:contain; }

/* ===== FX canvas ===== */
#global-fx{ position:fixed; inset:0; z-index:2; pointer-events:none }

/* ===== Helpers ===== */
.mt8{ margin-top:8px } .mt12{ margin-top:12px } .mt16{ margin-top:16px } .mt20{ margin-top:20px }
.center{ text-align:center }
.bad{ color:var(--danger) } .ok{ color:var(--ok) } .warn{ color:var(--warn) }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }

@media (max-width: 540px){
  .profile .portraits{ grid-template-columns: repeat(3, 1fr) }
  #bottombar{ grid-auto-columns: minmax(36px, 1fr); gap:6px }
  #bottombar .tab{ height:48px }
}

@media (max-width: 420px){
  .hubstats{ position:static; transform:none; margin-right:auto; }
  .hub-chip{ min-width:0; padding:0 10px; }
  .hub-copy small{ display:none; }
}

/* Price badge with currency icon */
.badge.price{ display:inline-flex; align-items:center; gap:6px }
.badge.price img{ width:16px; height:16px; display:inline-block }


/* ===== Bottom icons masks + fallback ===== */
.i{ width:24px; height:24px; display:inline-block; border-radius:6px; background:conic-gradient(from 180deg, var(--acc), var(--acc2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
@supports (-webkit-mask: url("")) or (mask: url("")){
  .i-home{ -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 3l9 8h-3v10h-5V14H11v7H6V11H3z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 3l9 8h-3v10h-5V14H11v7H6V11H3z"/></svg>') center/contain no-repeat; }
  .i-tasks{ -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 2h6l1 2h4v18H4V4h4zM7 7h10v2H7zM7 11h10v2H7zM7 15h10v2H7z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 2h6l1 2h4v18H4V4h4zM7 7h10v2H7zM7 11h10v2H7zM7 15h10v2H7z"/></svg>') center/contain no-repeat; }
  .i-pass{ -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 5h18v14H3z M6 8h12v2H6z M6 12h8v2H6z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 5h18v14H3z M6 8h12v2H6z M6 12h8v2H6z"/></svg>') center/contain no-repeat; }
  .i-store{ -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 6h18l-2 12H5z M9 3h6l1 3H8z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 6h18l-2 12H5z M9 3h6l1 3H8z"/></svg>') center/contain no-repeat; }
  .i-fortune{ -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2a9 9 0 110 18 9 9 0 010-18zm-1 5h2v5h-2V7zm0 6h2v2h-2v-2z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2a9 9 0 110 18 9 9 0 010-18zm-1 5h2v5h-2V7zm0 6h2v2h-2v-2z"/></svg>') center/contain no-repeat; }
  .i-events{ -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h2v2h8V2h2v2h3v18H3V4h3V2zM5 8h14v12H5z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h2v2h8V2h2v2h3v18H3V4h3V2zM5 8h14v12H5z"/></svg>') center/contain no-repeat; }
  .i-profile{ -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z"/></svg>') center/contain no-repeat; }
  .i-gear{ -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 8a4 4 0 100 8 4 4 0 000-8zm9.4 4a7.4 7.4 0 00-.2-1.6l2.1-1.6-2-3.5-2.5 1a7.2 7.2 0 00-2.8-1.6L13.9 1h-3.8l-.9 3.7a7.2 7.2 0 00-2.8 1.6l-2.5-1-2 3.5 2.1 1.6a7.4 7.4 0 000 3.1L1.9 15l2 3.5 2.5-1a7.2 7.2 0 002.8 1.6l.9 3.7h3.8l.9-3.7a7.2 7.2 0 002.8-1.6l2.5 1 2-3.5-2.1-1.6c.1-.5.2-1 .2-1.6z"/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 8a4 4 0 100 8 4 4 0 000-8zm9.4 4a7.4 7.4 0 00-.2-1.6l2.1-1.6-2-3.5-2.5 1a7.2 7.2 0 00-2.8-1.6L13.9 1h-3.8l-.9 3.7a7.2 7.2 0 00-2.8 1.6l-2.5-1-2 3.5 2.1 1.6a7.4 7.4 0 000 3.1L1.9 15l2 3.5 2.5-1a7.2 7.2 0 002.8 1.6l.9 3.7h3.8l.9-3.7a7.2 7.2 0 002.8-1.6l2.5 1 2-3.5-2.1-1.6c.1-.5.2-1 .2-1.6z"/></svg>') center/contain no-repeat; }
}
.no-mask .i{ background: none; }


/* Scrollbar styling */
#mbody::-webkit-scrollbar{ width:10px }
#mbody::-webkit-scrollbar-track{ background:transparent }
#mbody::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:10px; border:2px solid transparent; background-clip:content-box }
#mbody{ scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
#modal .mcard{ padding-right: 6px }
#modal .mclose{ position:absolute; right:18px; top:14px; width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background: rgba(0,0,0,.45) }


/* Local fonts only (Russo One + Inter) */
@font-face{font-family:'Russo One';src:url('fonts/RussoOne-Regular.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
:root{--ui-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Cantarell,'Noto Sans',Arial,sans-serif;--title-font:'Russo One','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Cantarell,'Noto Sans',Arial,sans-serif}
html,body,#app{font-family:var(--ui-font)}
h1,h2,h3,.title,.section{font-family:var(--title-font);letter-spacing:.2px}
.button{font-family:var(--ui-font);font-weight:600}


/* ===== Desktop enhancements ===== */
@media (hover: hover) and (pointer: fine){
  /* Home slider: exactly 3 slides per view, no wheel-scroll visual glitches */
  .slider .slide{ min-width: calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); }
  .slider .slide .img{ aspect-ratio: 4/5; min-height: 500px; }
  /* Modal close button: place slightly outside to avoid scrollbar overlap */
  #modal .mclose{ right:-8px; top:-8px; }
}

/* ===== Patch: mobile UX + Yandex Games polish (Dec 2025) ===== */

/* Disabled buttons should look disabled (important for tasks/season pass) */
button:disabled,
.button:disabled{
  opacity: .45;
  cursor: default;
  filter: saturate(.85);
}
.button:disabled:active{ transform:none }

/* Row helpers */
.row.right{ justify-content:flex-end }

/* Compact action row on story cards */
.slider .slide .cap{ padding:12px; gap:8px }
.slider .slide .cap .row.story-actions{ flex-wrap:nowrap }
.slider .slide .cap .row.story-actions .button{ height:46px; border-radius:14px; padding:0 14px }

/* Icon-only button (used for ⋯ on story cards) */
.button.icon{ width:42px; padding:0; justify-content:center; font-size:22px; line-height:1 }

/* Modal close button: always on top, easy to tap */
#modal .mclose{
  width:44px;
  height:44px;
  font-size:28px;
  line-height:44px;
  z-index:10;
  right:10px;
  top:10px;
}

/* Store grid: 2–4 items per row depending on width */
.store .items{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (min-width: 900px){
  .store .items{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* More icon (bottom bar): make it clearly visible */
.i-more{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M4 7h16v2H4V7zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M4 7h16v2H4V7zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/></svg>') center/contain no-repeat;
}


/* ===== Choice requirements hint ===== */
.choice-wrap{ display:grid; gap:6px }
.choice-req{ font-size:12px; opacity:.85; padding:8px 10px; border-radius:10px; border:1px dashed var(--line); background: rgba(0,0,0,.18) }

/* ===== Story: inline images ===== */
.story .text figure.story-img{ margin:12px 0; }
.story .text figure.story-img img{ width:100%; height:auto; display:block; border-radius:14px; border:1px solid var(--line); background: rgba(0,0,0,.25); }
.story .text figure.story-img figcaption{ font-size:12px; opacity:.85; margin-top:6px; padding-left:4px; }

/* Make locked story choices more obviously "grey" */
.story .choices .button:disabled{ filter: grayscale(.35) saturate(.6); }

/* Stronger locked-choice styling */
.story .choices .choice-wrap{ margin-bottom:8px; }
.story .choices .choice-wrap .button:disabled{ opacity:.36; filter:grayscale(.75) saturate(.45) brightness(.88); border-style:dashed; }
.story .choices .choice-wrap .button.premium:disabled{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.story .choices .choice-req{ background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.12); color:rgba(255,255,255,.78); }

/* Stronger locked-choice presentation */
.story .choices .choice-wrap.locked{
  position:relative;
  padding:2px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
}
.story .choices .choice-wrap.locked .button:disabled{
  opacity:.28;
  filter:grayscale(1) saturate(.22) brightness(.82);
  border-style:dashed;
  border-color:rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  color:rgba(255,255,255,.5);
  cursor:not-allowed;
}
.story .choices .choice-wrap.locked .button:disabled::before{
  content:'🔒 ';
  opacity:.95;
}
.story .choices .choice-wrap.locked .choice-req{
  margin-top:6px;
  background:rgba(80,86,96,.22);
  border:1px dashed rgba(255,255,255,.18);
  color:rgba(255,255,255,.88);
}
.story-img{
  margin:14px 0 18px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.story-img img{
  display:block;
  width:100%;
  height:auto;
}
.story-img figcaption{
  padding:10px 12px 12px;
  font-size:12px;
  line-height:1.45;
  color:rgba(255,255,255,.78);
}
.big{font-size:32px;font-weight:700;line-height:1}
.oktxt{color:#7ddc9a;font-weight:600}


/* ===== Atrium final polish ===== */
.ico-pass{
  background-image:url('assets/ticket_gold.svg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:0;
}
.ico-timer{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='13' r='8' fill='none' stroke='%23f4d27a' stroke-width='2'/><path d='M12 13V8m0 5 3 2' stroke='%23f4d27a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 3h6' stroke='%23f4d27a' stroke-width='2' stroke-linecap='round'/></svg>");
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
#pill-timer{ min-width:94px; justify-content:center; }
#pass-timer{ font-variant-numeric: tabular-nums; letter-spacing:.02em; }
.pre-bg{ background-image:url('assets/loading_mobile.jpg'); }
@media (min-width: 900px){ .pre-bg{ background-image:url('assets/loading_desktop.jpg'); } }
#preloader .bg{ filter:brightness(.74) saturate(.94); transform:scale(1.02); }
.pre{ width:min(680px, 92vw); gap:10px; padding:16px 16px 18px; margin:0 0 8vh; }
.pre .logo{ display:none !important; }
#pre-sub{ font-size:clamp(18px, 2.6vw, 21px); text-align:center; }
#pre-dive{
  width:min(520px, 100%);
  height:auto;
  min-height:56px;
  padding:14px 18px;
  font-size:clamp(16px, 3.4vw, 22px);
  line-height:1.08;
  letter-spacing:.03em;
  white-space:normal;
  text-wrap:balance;
}
.fortune .big-bg{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:16px;
  aspect-ratio:3/4.35;
  background-size:cover;
  background-position:center;
}
.fortune .big-bg::before{
  content:'';
  position:absolute;
  inset:12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,184,110,.15), 0 0 0 1px rgba(0,0,0,.22);
  pointer-events:none;
}
.fortune .big-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,8,10,.05) 0%, rgba(5,8,10,.18) 45%, rgba(5,8,10,.72) 100%);
  pointer-events:none;
}
.fortune-overlay{
  position:relative;
  z-index:2;
  width:calc(100% - 8px);
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(12,15,20,.24), rgba(12,15,20,.70));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  display:grid;
  gap:10px;
}
.fortune-overlay .title{ font-size:28px; line-height:1; text-align:center; }
.fortune-overlay .desc{ font-size:15px; text-align:center; }
.fortune-overlay .button{
  width:100%;
  height:auto;
  min-height:54px;
  font-size:clamp(15px, 4vw, 18px);
  letter-spacing:.04em;
  white-space:normal;
}
.fortune-overlay .mini{ font-size:13px; line-height:1.35; opacity:.88; text-align:center; }
@media (max-width: 520px){
  #topbar{ gap:6px; padding:0 8px; }
  .pill{ padding:0 8px; }
  #pill-timer{ min-width:84px; }
  #pass-timer{ font-size:13px; }
  .fortune-overlay{ padding:14px; }
  .fortune-overlay .title{ font-size:24px; }
}

.story-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.story-badge{ display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 10px; border-radius:999px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:linear-gradient(180deg, rgba(255,205,140,.22), rgba(255,152,72,.12)); border:1px solid rgba(255,205,140,.22); }
.story-badge.ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10); }

@media (min-width: 900px){ #preloader .bg{ background-position:center top; } .hubstats{ gap:12px; } }
@media (max-width: 760px){ #topbar{ height:56px; padding:0 8px; gap:6px; } .hubstats{ gap:6px; } .hub-chip{ height:34px; padding:0 9px; } .hub-copy b{ font-size:13px; } .topbar-right{ gap:6px; } .pill{ height:34px; padding:0 10px; } }
@media (max-width: 560px){ #topbar{ justify-content:space-between; } .hubstats{ position:static; transform:none; order:0; } .hub-chip:last-child{ display:none; } .hub-chip{ min-width:84px; } .hub-copy small{ display:none; } .topbar-right{ margin-left:0; gap:4px; } .pill{ padding:0 8px; } .pill .ico, .hub-chip .ico{ width:18px; height:18px; } }


/* ===== Atrium polish v3: stronger showcase parallax + premium store ===== */
.slider{ background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); box-shadow:0 30px 110px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05); }
.slider::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,181,98,.06), transparent 28%, transparent 72%, rgba(90,150,255,.05)); pointer-events:none; }
.slider .track{ gap:22px; padding:22px 22px 30px; perspective:2200px; }
.slider .slide{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --sway-x:0px;
  --sway-y:0px;
  transform:translateY(calc(var(--abs-offset) * 18px)) rotateY(calc(var(--offset) * -18deg + var(--tilt-y))) rotateX(var(--tilt-x)) scale(calc(1 - (var(--abs-offset) * .11)));
  box-shadow:0 26px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  filter:saturate(calc(.80 + (1 - var(--abs-offset)) * .42)) brightness(calc(.82 + (1 - var(--abs-offset)) * .22));
  will-change:transform, filter;
}
.slider .slide::before{ inset:-18% -12% auto; height:48%; background:radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255,219,160,.36), transparent 52%); opacity:calc(.18 + (1 - var(--abs-offset)) * .50); }
.slider .slide::after{ inset:auto 8% -26% 8%; height:38%; background:radial-gradient(circle, rgba(255,138,76,.30), transparent 65%); filter:blur(32px); opacity:calc(.14 + (1 - var(--abs-offset)) * .34); }
.slider .slide .img{ min-height:440px; border-radius:30px; border:1px solid rgba(255,255,255,.08); transform-style:preserve-3d; }
.slider .slide .img .poster{ transform:translate3d(calc(var(--offset) * -36px + var(--sway-x) * .48), calc(var(--abs-offset) * 8px + var(--sway-y) * .18), 50px) scale(calc(1.07 + (1 - var(--abs-offset)) * .04)); filter:saturate(1.08) contrast(1.05) brightness(1.02); }
.slider .slide .img::before{ background:radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255,255,255,.20), transparent 30%); }
.slider .slide .img::after{ background:linear-gradient(180deg, rgba(0,0,0,.00) 12%, rgba(0,0,0,.14) 54%, rgba(0,0,0,.90) 100%); }
.slider .slide .cap{ left:16px; right:16px; bottom:16px; padding:16px; border-radius:24px; background:linear-gradient(180deg, rgba(9,13,18,.10), rgba(9,13,18,.82)); border:1px solid rgba(255,255,255,.14); box-shadow:0 22px 60px rgba(0,0,0,.34); transform:translate3d(calc(var(--sway-x) * -.12), calc(var(--sway-y) * -.12), 80px); }
.slider .slide .cap::before{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(255,197,122,.14), transparent 44%, rgba(120,170,255,.08)); pointer-events:none; }
.slider .slide .cap .title{ font-size:23px; text-shadow:0 4px 22px rgba(0,0,0,.24); }
.slider .slide .cap .sub{ opacity:.92; }
.slider .slide.is-active{ box-shadow:0 34px 120px rgba(0,0,0,.52), 0 0 0 1px rgba(255,220,165,.16); }
.slider .slide.is-active .img{ box-shadow:0 18px 40px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.05); }
.slider .slide.is-near:not(.is-active){ filter:saturate(.94) brightness(.93); }
@media (hover:hover) and (pointer:fine){
  .slider .slide:hover{ box-shadow:0 34px 110px rgba(0,0,0,.50), 0 0 0 1px rgba(255,220,165,.12); }
}

.premium-store{ display:grid; gap:18px; }
.store-hero{ position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.95fr); gap:16px; padding:20px; border-radius:30px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(135deg, rgba(8,10,14,.82), rgba(18,12,8,.76)); box-shadow:0 28px 90px rgba(0,0,0,.34); }
.store-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 18% 24%, rgba(255,178,98,.18), transparent 30%), radial-gradient(circle at 82% 18%, rgba(255,214,147,.12), transparent 24%), linear-gradient(90deg, rgba(255,255,255,.03), transparent 34%); pointer-events:none; }
.store-hero-copy,.store-hero-stats{ position:relative; z-index:1; }
.store-kicker,.store-section-kicker{ font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:rgba(255,225,186,.76); }
.store-title{ font-family:var(--title-font); font-size:clamp(26px, 4.2vw, 40px); line-height:.96; margin-top:8px; }
.store-sub{ margin-top:10px; max-width:60ch; color:rgba(255,255,255,.86); }
.store-highlights{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.store-tag{ display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.10); color:rgba(255,248,236,.92); }
.store-hero-stats{ display:grid; gap:10px; }
.store-stat{ min-height:86px; padding:14px 16px; border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); display:grid; gap:6px; }
.store-stat small{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,225,186,.72); }
.store-stat b{ font-family:var(--title-font); font-size:26px; line-height:1; }
.store-stat span{ color:rgba(255,255,255,.78); font-size:13px; }
.store-stat.featured{ background:linear-gradient(180deg, rgba(233,154,80,.20), rgba(255,255,255,.04)); border-color:rgba(255,202,140,.18); }
.store-section{ display:grid; gap:12px; }
.store-section-head{ display:flex; align-items:end; justify-content:space-between; gap:14px; }
.store-section-title{ font-family:var(--title-font); font-size:24px; line-height:1.02; margin-top:6px; }
.store-section-note{ max-width:40ch; color:rgba(255,255,255,.66); font-size:13px; text-align:right; }
.store-items{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; }
.store-items.compact{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.store .item{ position:relative; overflow:hidden; border-radius:28px; padding:0; min-height:100%; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(10,12,16,.72), rgba(10,12,16,.90)); box-shadow:0 24px 70px rgba(0,0,0,.30); }
.store .item::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); pointer-events:none; z-index:0; }
.store .item .img{ position:relative; aspect-ratio:16/11; border-radius:28px 28px 0 0; background-size:cover; background-position:center; overflow:hidden; }
.store .item .img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.16) 58%, rgba(0,0,0,.72)); }
.store .item.featured .img{ aspect-ratio:16/10; }
.item-sheen{ position:absolute; inset:-20% -40% auto; height:68%; background:linear-gradient(105deg, rgba(255,255,255,0) 18%, rgba(255,236,206,.18) 50%, rgba(255,255,255,0) 82%); transform:rotate(6deg); opacity:.9; pointer-events:none; }
.item-ribbon{ position:absolute; left:14px; top:14px; z-index:2; min-height:30px; padding:0 12px; display:inline-flex; align-items:center; border-radius:999px; background:rgba(9,11,15,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12); color:rgba(255,236,206,.92); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.item-body{ position:relative; z-index:1; display:grid; gap:10px; padding:16px 16px 10px; }
.item-highlights{ display:flex; flex-wrap:wrap; gap:8px; }
.item-chip{ display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); color:rgba(255,244,228,.92); font-size:12px; }
.store .item .title{ font-size:22px; line-height:1.02; }
.store .item .desc{ color:rgba(255,255,255,.78); min-height:58px; }
.item-foot{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px 16px; }
.badge.price{ min-height:36px; padding:0 12px; gap:8px; background:linear-gradient(180deg, rgba(255,221,170,.16), rgba(255,169,89,.08)); border:1px solid rgba(255,214,151,.22); color:rgba(255,242,221,.96); font-weight:700; }
.badge.price img{ width:18px; height:18px; object-fit:contain; }
.premium-buy{ min-width:138px; box-shadow:0 16px 30px rgba(203,106,43,.22); }
.store .item.featured .premium-buy{ min-width:154px; }
.tone-bronze{ box-shadow:0 22px 60px rgba(0,0,0,.30), 0 0 0 1px rgba(207,151,96,.08); }
.tone-gold{ box-shadow:0 24px 66px rgba(0,0,0,.32), 0 0 0 1px rgba(255,209,133,.10); }
.tone-ember{ box-shadow:0 24px 66px rgba(0,0,0,.32), 0 0 0 1px rgba(255,166,115,.10); }
.tone-violet{ box-shadow:0 24px 66px rgba(0,0,0,.32), 0 0 0 1px rgba(183,163,255,.10); }
.tone-azure{ box-shadow:0 24px 66px rgba(0,0,0,.32), 0 0 0 1px rgba(141,221,255,.10); }
.tone-platinum{ box-shadow:0 24px 72px rgba(0,0,0,.36), 0 0 0 1px rgba(255,216,148,.14); }
.store .item.featured{ transform:translateY(-2px); }
.store .item.featured::after{ content:''; position:absolute; inset:auto 18px -18px 18px; height:58px; background:radial-gradient(circle, rgba(255,151,72,.26), transparent 68%); filter:blur(20px); pointer-events:none; }
.store-footer-note{ color:rgba(255,255,255,.64); font-size:13px; padding:0 4px 12px; }
@media (max-width: 980px){
  .store-hero{ grid-template-columns:1fr; }
  .store-section-head{ align-items:start; flex-direction:column; }
  .store-section-note{ text-align:left; max-width:none; }
}
@media (max-width: 760px){
  .slider .track{ gap:16px; padding:16px 16px 24px; }
  .slider .slide{ transform:translateY(calc(var(--abs-offset) * 10px)) rotateY(calc(var(--offset) * -10deg + var(--tilt-y))) rotateX(var(--tilt-x)) scale(calc(1 - (var(--abs-offset) * .06))); }
  .slider .slide .img{ min-height:400px; }
  .slider .slide .img .poster{ transform:translate3d(calc(var(--offset) * -20px + var(--sway-x) * .28), calc(var(--abs-offset) * 6px + var(--sway-y) * .12), 24px) scale(calc(1.04 + (1 - var(--abs-offset)) * .03)); }
  .slider .slide .cap{ left:12px; right:12px; bottom:12px; padding:14px; }
  .store-title{ font-size:30px; }
  .store-sub{ max-width:none; }
  .store-items, .store-items.compact{ grid-template-columns:1fr; }
  .store .item .title{ font-size:20px; }
}



/* ===== Atrium polish v5: fixed premium menu icons ===== */
#bottombar{
  height:84px;
  padding:8px;
  gap:10px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(20,12,8,.60), rgba(11,10,10,.44));
  box-shadow:0 18px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
#bottombar::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(255,190,116,.10), transparent 26%, transparent 74%, rgba(255,190,116,.10));
  pointer-events:none;
}
#bottombar .tab{
  position:relative;
  height:64px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(17,12,10,.68), rgba(0,0,0,.24));
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
#bottombar .tab::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 16%, rgba(255,218,170,.12), transparent 38%);
  opacity:.9;
  pointer-events:none;
}
#bottombar .tab[aria-selected="true"]{
  transform:translateY(-2px);
  border-color:rgba(255,199,134,.58);
  background:linear-gradient(180deg, rgba(110,58,24,.44), rgba(44,26,14,.20));
  box-shadow:0 14px 34px rgba(203,106,43,.22), inset 0 0 0 1px rgba(255,236,206,.10);
}
#bottombar .tab .i{
  width:56px;
  height:56px;
  background:transparent center/contain no-repeat;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.36));
}
#bottombar .tab[aria-selected="true"] .i{
  transform:translateY(-1px) scale(1.05);
  filter:drop-shadow(0 10px 24px rgba(255,144,60,.18));
}
.i-home{ background:url('assets/menu/home_v2.webp') center/contain no-repeat !important; -webkit-mask:none !important; mask:none !important; }
.i-fortune{ background:url('assets/menu/fortune_v2.webp') center/contain no-repeat !important; -webkit-mask:none !important; mask:none !important; }
.i-tasks{ background:url('assets/menu/tasks_v2.webp') center/contain no-repeat !important; -webkit-mask:none !important; mask:none !important; }
.i-pass{ background:url('assets/menu/pass_v2.webp') center/contain no-repeat !important; -webkit-mask:none !important; mask:none !important; }
.i-store{ background:url('assets/menu/store_v2.webp') center/contain no-repeat !important; -webkit-mask:none !important; mask:none !important; }
.i-more{ background:url('assets/menu/more_v2.webp') center/contain no-repeat !important; -webkit-mask:none !important; mask:none !important; }
.i-events{ background:url('assets/menu/events_v2.webp') center/contain no-repeat !important; -webkit-mask:none !important; mask:none !important; }
.i-profile{ background:url('assets/menu/profile_v2.webp') center/contain no-repeat !important; -webkit-mask:none !important; mask:none !important; }

.menu-shortcuts{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.menu-poster{
  min-height:110px;
  display:grid;
  place-items:center;
  gap:8px;
  padding:12px;
}
.menu-poster.compact{ min-height:96px; }
.menu-poster .i{ width:40px; height:52px; }
.menu-poster span{ font-weight:700; }

.home-shell{ display:grid; gap:18px; }
.home-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(340px, .95fr);
  gap:18px;
  padding:22px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(140deg, rgba(10,11,14,.74), rgba(30,18,12,.44));
  box-shadow:0 28px 100px rgba(0,0,0,.30);
}
.home-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 16% 22%, rgba(255,182,105,.18), transparent 30%),
    radial-gradient(circle at 84% 12%, rgba(140,198,255,.12), transparent 26%),
    linear-gradient(120deg, rgba(255,255,255,.04), transparent 32%);
  pointer-events:none;
}
.home-copy,.home-spotlight{ position:relative; z-index:1; }
.home-kicker{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,226,188,.76); }
.home-title{ font-family:var(--title-font); font-size:clamp(28px, 4.6vw, 52px); line-height:.94; margin-top:10px; }
.home-sub{ margin-top:10px; max-width:62ch; color:rgba(255,255,255,.86); }
.home-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.home-tag{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,244,226,.92);
}
.home-spotlight{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:14px;
  padding:14px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 48px rgba(0,0,0,.22);
}
.home-spotlight-media{
  min-height:210px;
  border-radius:20px;
  background-size:cover;
  background-position:center top;
  box-shadow:0 16px 40px rgba(0,0,0,.34);
}
.home-spotlight-body{ display:grid; align-content:start; gap:10px; }
.home-spotlight-kicker{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,221,186,.74); }
.home-spotlight-title{ font-family:var(--title-font); font-size:28px; line-height:.98; }
.home-spotlight-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.home-spotlight-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,246,230,.92);
  font-size:12px;
}
.home-spotlight-desc{ color:rgba(255,255,255,.80); }
.home-spotlight-actions{ display:flex; gap:10px; margin-top:auto; }
.home-stage{
  position:relative;
  overflow:hidden;
  border-radius:32px;
}
.home-halo{
  position:absolute;
  inset:auto;
  width:420px;
  height:220px;
  filter:blur(54px);
  pointer-events:none;
  z-index:0;
}
.home-halo-a{ left:-60px; bottom:6%; background:radial-gradient(circle, rgba(82,170,255,.18), transparent 68%); }
.home-halo-b{ right:-40px; top:4%; background:radial-gradient(circle, rgba(255,151,72,.22), transparent 70%); }
.slider{
  position:relative;
  z-index:1;
  background:linear-gradient(180deg, rgba(9,12,16,.54), rgba(10,12,16,.22));
  border-radius:32px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 100px rgba(0,0,0,.34);
}
.slider::before{
  background:
    radial-gradient(circle at 18% 18%, rgba(255,200,136,.16), transparent 22%),
    radial-gradient(circle at 82% 14%, rgba(122,190,255,.10), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.slider .track{ gap:28px; padding:28px 28px 38px; perspective:2600px; }
.slider .slide{
  transform:
    translateY(calc(var(--abs-offset) * 22px))
    rotateY(calc(var(--offset) * -20deg + var(--tilt-y)))
    rotateX(calc(var(--tilt-x) * 1.08))
    scale(calc(1 - (var(--abs-offset) * .12)));
  box-shadow:0 30px 78px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05);
  filter:saturate(calc(.78 + (1 - var(--abs-offset)) * .52)) brightness(calc(.80 + (1 - var(--abs-offset)) * .24));
}
.slider .slide::before{
  inset:-22% -14% auto;
  height:54%;
  background:radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255,223,173,.46), transparent 52%);
  opacity:calc(.20 + (1 - var(--abs-offset)) * .58);
}
.slider .slide::after{
  inset:auto 6% -30% 6%;
  height:44%;
  background:radial-gradient(circle, rgba(255,132,64,.34), transparent 66%);
  filter:blur(34px);
  opacity:calc(.16 + (1 - var(--abs-offset)) * .42);
}
.slider .slide .img{ min-height:470px; border-radius:32px; border:1px solid rgba(255,255,255,.10); }
.slider .slide .img .poster{
  transform:translate3d(calc(var(--offset) * -46px + var(--sway-x) * .62), calc(var(--abs-offset) * 10px + var(--sway-y) * .22), 74px) scale(calc(1.10 + (1 - var(--abs-offset)) * .05));
  filter:saturate(1.10) contrast(1.06) brightness(1.03);
}
.slider .slide .cap{
  left:18px; right:18px; bottom:18px;
  padding:18px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(9,13,18,.08), rgba(9,13,18,.84));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 66px rgba(0,0,0,.36);
  transform:translate3d(calc(var(--sway-x) * -.18), calc(var(--sway-y) * -.15), 96px);
}
.slider .slide .cap::before{
  background:linear-gradient(135deg, rgba(255,202,132,.18), transparent 40%, rgba(124,169,255,.10));
}
.slider .slide .cap .title{ font-size:25px; }
.slider .slide.is-active{
  transform:
    translateY(calc(var(--abs-offset) * 12px))
    rotateY(calc(var(--offset) * -11deg + var(--tilt-y)))
    rotateX(calc(var(--tilt-x) * 1.12))
    scale(1.04);
  box-shadow:0 40px 132px rgba(0,0,0,.56), 0 0 0 1px rgba(255,225,181,.18);
}
.slider .slide.is-active .img{
  box-shadow:0 26px 60px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.06);
}
.slider .slide.is-near:not(.is-active){
  filter:saturate(.98) brightness(.96);
}

.store-hero{
  padding:24px;
  border-radius:32px;
  background:
    linear-gradient(135deg, rgba(10,9,8,.84), rgba(28,18,10,.56)),
    url('bg_store.jpg') center/cover no-repeat;
}
.store-hero::after{
  content:'';
  position:absolute;
  inset:auto -12% -40px auto;
  width:360px;
  height:220px;
  background:radial-gradient(circle, rgba(255,157,79,.28), transparent 70%);
  filter:blur(26px);
  pointer-events:none;
}
.store-membership{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(280px, 360px) minmax(0, 1fr) auto;
  gap:16px;
  padding:16px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(10,10,10,.78), rgba(39,22,11,.52));
  box-shadow:0 24px 80px rgba(0,0,0,.26);
}
.store-membership::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.03), transparent 38%, rgba(255,209,151,.06));
  pointer-events:none;
}
.membership-media,.membership-copy,.membership-side{ position:relative; z-index:1; }
.membership-media{
  min-height:180px;
  border-radius:22px;
  background-size:cover;
  background-position:center;
  box-shadow:0 18px 44px rgba(0,0,0,.30);
}
.membership-copy{ display:grid; align-content:center; gap:10px; }
.membership-title{ font-family:var(--title-font); font-size:clamp(24px, 4vw, 34px); line-height:.96; }
.membership-sub{ color:rgba(255,255,255,.82); }
.membership-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.membership-side{ display:grid; align-content:center; gap:12px; min-width:190px; }
.membership-badge{
  min-height:34px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,215,154,.20);
  background:linear-gradient(180deg, rgba(255,225,191,.14), rgba(255,153,72,.08));
  color:rgba(255,243,226,.96);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.membership-btn{ min-width:170px; }
.store-curation{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
.curation-card{
  min-height:132px;
  padding:18px;
  display:grid;
  gap:8px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.curation-card small{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,225,186,.72);
}
.curation-card b{
  font-family:var(--title-font);
  font-size:26px;
  line-height:1;
}
.curation-card span{ color:rgba(255,255,255,.76); }
.store-vault{ grid-template-columns:repeat(12, minmax(0,1fr)); }
.store-vault .item{ grid-column:span 4; }
.store-vault .item.featured{ grid-column:span 6; }
.store-vault.minor .item{ grid-column:span 6; }
.store-bundles{ grid-template-columns:repeat(5, minmax(0,1fr)); }
.store-bundles .item, .store-bundles .item.featured{ grid-column:auto; }
.store-cosmetics{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.store-cosmetics .item{ grid-column:auto; }
.item-orb{
  position:absolute;
  right:-36px;
  top:-42px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,164,.18), transparent 68%);
  filter:blur(6px);
  pointer-events:none;
}
.item-eyebrow{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,224,188,.72);
}
.store .item{
  display:flex;
  flex-direction:column;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(10,12,16,.76), rgba(8,9,12,.92));
}
.store .item .img{
  flex:0 0 auto;
  aspect-ratio:16/10;
  border-radius:30px 30px 0 0;
  background-position:center;
}
.store .item.featured .img{ aspect-ratio:16/9; }
.store .item .item-body{ flex:1 1 auto; }
.store .item .item-foot{ margin-top:auto; }
.store .item.portrait-art .img{ background-size:contain; background-position:center top; background-repeat:no-repeat; background-color:rgba(8,9,11,.92); }
.store .item.portrait-art .img::after{ background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.08) 58%, rgba(0,0,0,.66)); }
.store .item.portrait-art .desc{ min-height:72px; }
.store .item .img::after{
  background:linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.18) 58%, rgba(0,0,0,.80));
}
.store .item .title{ font-size:24px; }
.store .item .desc{ min-height:64px; }
.store .item.featured .title{ font-size:28px; }
.store .item.featured .desc{ min-height:72px; }
.store .item.featured{
  transform:translateY(-2px);
}
.store .item.featured .item-ribbon{
  background:rgba(14,10,8,.66);
  border-color:rgba(255,214,157,.16);
}
.store .item .item-foot{ padding-top:4px; }
.store-footer-note{ padding-top:4px; }

@media (max-width: 1100px){
  .home-hero{ grid-template-columns:1fr; }
  .store-membership{ grid-template-columns:1fr; }
  .membership-side{ min-width:0; justify-items:start; }
  .store-curation{ grid-template-columns:1fr; }
  .store-bundles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .store-cosmetics{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .store-vault .item, .store-vault .item.featured, .store-vault.minor .item{ grid-column:auto; }
}
@media (max-width: 760px){
  #bottombar{ height:78px; gap:8px; }
  #bottombar .tab{ height:58px; }
  #bottombar .tab .i{ width:40px; height:42px; }
  .store-bundles, .store-cosmetics{ grid-template-columns:1fr; }
  .menu-shortcuts{ grid-template-columns:1fr; }
  .home-spotlight{
    grid-template-columns:1fr;
  }
  .home-spotlight-media{
    min-height:180px;
  }
  .home-spotlight-actions{
    flex-direction:column;
  }
  .slider .track{ gap:18px; padding:18px 18px 28px; }
  .slider .slide{
    transform:
      translateY(calc(var(--abs-offset) * 12px))
      rotateY(calc(var(--offset) * -12deg + var(--tilt-y)))
      rotateX(var(--tilt-x))
      scale(calc(1 - (var(--abs-offset) * .06)));
  }
  .slider .slide .img{
    min-height:410px;
  }
  .slider .slide .img .poster{
    transform:translate3d(calc(var(--offset) * -24px + var(--sway-x) * .34), calc(var(--abs-offset) * 7px + var(--sway-y) * .12), 28px) scale(calc(1.05 + (1 - var(--abs-offset)) * .03));
  }
  .store .item .title,
  .store .item.featured .title{ font-size:22px; }
}



/* ===== Atrium release polish v6 ===== */
#view{ padding-top:84px; padding-bottom:78px; }
#bottombar{
  height:68px;
  padding:6px;
  gap:8px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(20,12,8,.58), rgba(11,10,10,.40));
}
#bottombar .tab{
  height:52px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(17,12,10,.62), rgba(0,0,0,.20));
}
#bottombar .tab .i{
  width:36px;
  height:36px;
  background:transparent center/contain no-repeat;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.34));
}
#bottombar .tab[aria-selected="true"] .i{ transform:none; }
.i-home{ background:url('assets/menu/home_v3.webp') center/contain no-repeat !important; }
.i-fortune{ background:url('assets/menu/fortune_v3.webp') center/contain no-repeat !important; }
.i-tasks{ background:url('assets/menu/tasks_v3.webp') center/contain no-repeat !important; }
.i-pass{ background:url('assets/menu/pass_v3.webp') center/contain no-repeat !important; }
.i-store{ background:url('assets/menu/store_v3.webp') center/contain no-repeat !important; }
.i-more{ background:url('assets/menu/more_v3.webp') center/contain no-repeat !important; }
.i-events{ background:url('assets/menu/events_v3.webp') center/contain no-repeat !important; }
.i-profile{ background:url('assets/menu/profile_v3.webp') center/contain no-repeat !important; }
.i-gear{ background:url('assets/menu/settings_v3.webp') center/contain no-repeat !important; -webkit-mask:none !important; mask:none !important; }
.menu-poster{ min-height:96px; }
.menu-poster .i{ width:52px; height:52px; }
.home-shell-compact{ gap:10px; }
.home-stage-only{ margin-top:2px; }
.slider .track{ gap:12px; padding:10px 8px 18px; }
.slider .slide{
  min-width:clamp(272px, 29.4vw, 372px);
  max-width:clamp(272px, 29.4vw, 372px);
  transform:translateY(calc(var(--abs-offset) * 10px)) rotateY(calc(var(--offset) * -11deg)) scale(calc(1 - (var(--abs-offset) * .05)));
}
.slider .slide .img{ min-height:clamp(420px, 66vh, 650px); }
.slider .slide .img .poster{
  object-position:center top;
  transform:translate3d(calc(var(--offset) * -12px), 0, 0) scale(calc(1.01 + (1 - var(--abs-offset)) * .01));
}
.slider .slide .cap{ left:12px; right:12px; bottom:12px; background:linear-gradient(180deg, rgba(7,10,15,.24), rgba(7,10,15,.92)); }
.store-summary{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
.store-stat{
  min-height:112px;
  padding:16px 18px;
  border-radius:24px;
  display:grid;
  gap:6px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(18,14,10,.62), rgba(9,10,12,.50));
}
.store-stat small{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,224,188,.72); }
.store-stat b{ font-family:var(--title-font); font-size:40px; line-height:1; }
.store-stat span{ color:rgba(255,255,255,.74); }
.store-section-head{ margin-bottom:2px; }
.store-bundles{ grid-template-columns:repeat(5, minmax(0,1fr)); align-items:stretch; }
.store-cosmetics{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch; }
.store .item{ min-height:100%; }
.store .item .img{ aspect-ratio:4/5; background-position:center top; background-size:cover; }
.store .item.featured .img{ aspect-ratio:4/5; }
.store .item .title,
.store .item.featured .title{ font-size:22px; }
.store .item .desc,
.store .item.featured .desc{ min-height:88px; }
.store .item .item-foot{ padding-top:8px; }
.store .item.featured{ transform:none; }
.store .item.featured::after{ display:none; }
.store .item .item-ribbon{ top:12px; left:12px; }
.store .item .img::after{ background:linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.14) 54%, rgba(0,0,0,.78)); }
.store .item .item-body{ gap:10px; }
.store .item .desc{ color:rgba(255,255,255,.80); }
.store-footer-note{ display:none; }
@media (max-width: 1100px){
  .store-summary{ grid-template-columns:1fr; }
  .store-bundles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px){
  #view{ padding-top:78px; padding-bottom:74px; }
  #bottombar{ height:62px; gap:6px; }
  #bottombar .tab{ height:48px; }
  #bottombar .tab .i{ width:32px; height:32px; }
  .slider .track{ gap:12px; padding:8px 8px 16px; }
  .slider .slide{ min-width:90%; max-width:90%; }
  .slider .slide .img{ min-height:488px; }
  .slider .slide .img .poster{ transform:translate3d(calc(var(--offset) * -10px), 0, 0) scale(1.01); }
  .store-bundles, .store-cosmetics{ grid-template-columns:1fr; }
  .store .item .desc, .store .item.featured .desc{ min-height:unset; }
}


.story-badge.accent{ background:linear-gradient(180deg, rgba(203,106,43,.28), rgba(203,106,43,.10)); border-color:rgba(203,106,43,.34); }
.story-release-note{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px 0; }
.story-release-note b,
.story-release-note span{ display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }
.story-release-note b{ background:linear-gradient(180deg, rgba(203,106,43,.28), rgba(203,106,43,.10)); border-color:rgba(203,106,43,.34); }
.menu-shortcuts-extended{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.vote-grid{ gap:14px; }
.vote-intro{ gap:10px; background:linear-gradient(180deg, rgba(4,6,10,.86), rgba(4,6,10,.96)); }
.vote-current{ color:rgba(255,240,223,.92); }
.vote-list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px; }
.vote-card{ display:grid; grid-template-columns:136px minmax(0,1fr); gap:14px; align-items:stretch; background:linear-gradient(180deg, rgba(4,6,10,.84), rgba(4,6,10,.96)); }
.vote-cover{ min-height:188px; border-radius:20px; background-size:cover; background-position:center top; border:1px solid rgba(255,255,255,.10); }
.vote-body{ display:grid; align-content:start; gap:10px; }
@media (max-width: 760px){
  .vote-card{ grid-template-columns:1fr; }
  .vote-cover{ min-height:240px; }
  .menu-shortcuts-extended{ grid-template-columns:1fr; }
}

.vote-ranking{ display:grid; gap:8px; margin-top:4px; }
.vote-ranking-title{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,227,195,.72); }
.vote-ranking-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; padding:0 14px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.vote-ranking-row b{ font-family:var(--title-font); font-size:18px; }
.vote-current-note{ color:rgba(255,240,223,.90); line-height:1.45; }

.i-gear{ background:url('assets/menu/settings_v4.webp') center/contain no-repeat !important; -webkit-mask:none !important; mask:none !important; }

/* ===== Moderation fixes: text selection, iOS callout, topbar overlap ===== */
html, body, #app, #preloader, #view, #modal,
.card, .button, button, .badge, .pill, .hub-chip,
.slider, .slide, .story, .dialog, .desc, .title, .section,
.store, .item, .menu-poster, .vote-card{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
input, textarea, select, [contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
*{ -webkit-tap-highlight-color:transparent; }
img, canvas, svg{ -webkit-user-drag:none; user-drag:none; }

#topbar{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  overflow:hidden;
}
#topbar .hubstats{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  justify-self:center;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
#topbar .topbar-right{
  justify-self:end;
  margin-left:0 !important;
  min-width:0;
  max-width:100%;
}
.hub-chip, .pill{ min-width:0; overflow:hidden; }
.hub-chip{ flex:0 1 auto; }
#pill-coins{ min-width:86px; }
#pill-passes{ min-width:58px; }
#coins, #passes, #pass-timer{ display:inline-flex; align-items:baseline; gap:3px; white-space:nowrap; }
.top-unit{ font-size:9px; line-height:1; opacity:.78; font-weight:600; letter-spacing:.02em; }
.top-num{ font-size:inherit; }
.badge.price span{ white-space:nowrap; }
@media (max-width: 860px){
  .hub-copy small{ display:none; }
  .hub-chip{ min-width:72px; padding:0 8px; }
}
@media (max-width: 560px){
  #topbar{ grid-template-columns:minmax(0,1fr) auto; gap:5px; padding-left:8px; padding-right:8px; }
  .hubstats{ justify-self:start; }
  .hub-chip:last-child{ display:none; }
  .hub-chip{ min-width:74px; }
  .topbar-right{ gap:4px; }
  .pill{ padding-left:7px; padding-right:7px; }
  #pill-coins{ min-width:76px; }
  #pill-passes{ min-width:48px; }
  #pill-timer{ min-width:68px; }
  .top-unit{ font-size:8px; }
}
@media (max-width: 390px){
  #pill-timer{ display:none; }
  #pill-coins{ min-width:72px; }
  #topbar .pill .ico, #topbar .hub-chip .ico{ width:16px; height:16px; }
}