:root{--bg1:#ff944f;--bg2:#ff7b3c;--bg3:#ef6b28;--scan:.68;--grid:.36;--rgb:.22;--noise:.14}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Tahoma,Arial,sans-serif;background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.2),transparent 18%),radial-gradient(circle at 75% 18%,rgba(255,255,255,.1),transparent 16%),linear-gradient(180deg,var(--bg1),var(--bg2) 55%,var(--bg3));image-rendering:pixelated;overflow:hidden;filter:contrast(1.15) saturate(1.22) brightness(.98)}
.crt{position:fixed;inset:0;pointer-events:none}.scan{background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,rgba(0,0,0,.05) 1px 2px,transparent 2px 4px);opacity:var(--scan);mix-blend-mode:screen}.grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 6px);opacity:var(--grid);mix-blend-mode:screen}.rgb{background:linear-gradient(90deg,rgba(255,0,70,.09),transparent 14%,transparent 86%,rgba(0,170,255,.09));opacity:var(--rgb);mix-blend-mode:screen}.vig{background:radial-gradient(circle at center,transparent 45%,rgba(0,0,0,.42) 100%)}.noise{background-image:radial-gradient(circle,rgba(255,255,255,.18) 0 1px,transparent 1px),radial-gradient(circle,rgba(0,0,0,.1) 0 1px,transparent 1px);background-size:6px 6px,8px 8px;opacity:var(--noise);mix-blend-mode:overlay}
.shell{width:min(100vw,460px);height:100vh;margin:0 auto;position:relative;overflow:hidden;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,.12),transparent 18%),radial-gradient(circle at 80% 35%,rgba(255,255,255,.08),transparent 20%),linear-gradient(180deg,var(--bg1),var(--bg2) 58%,var(--bg3));box-shadow:0 0 0 1px rgba(255,255,255,.15),0 18px 60px rgba(0,0,0,.25)}
.status{height:28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 8px;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.06));border-bottom:1px solid rgba(255,255,255,.22);font-weight:700}.sig{display:flex;gap:2px;align-items:flex-end}.sig i{display:block;width:4px;background:#5c3b27;border:1px solid rgba(255,255,255,.25)}.sig i:nth-child(1){height:6px}.sig i:nth-child(2){height:9px}.sig i:nth-child(3){height:12px}.sig i:nth-child(4){height:15px}.bat{justify-self:end;width:26px;height:12px;border:1px solid #5c3b27;border-radius:2px;position:relative;background:#fff3}.bat:after{content:"";position:absolute;right:-4px;top:2px;width:3px;height:6px;background:#5c3b27}.bat span{display:block;height:100%;width:82%;background:linear-gradient(90deg,#d8f48d,#8ecb37)}
header{height:66px;display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.28);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04))}.brand{display:flex;gap:10px;align-items:center}.brand img{width:40px;height:52px;border-radius:14px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.45),0 8px 14px rgba(0,0,0,.18)}header small{display:block;color:#ffd9c5}.auth{display:flex;gap:6px;align-items:center;padding:6px 8px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);border-radius:8px}
main{position:absolute;inset:94px 0 42px 0;overflow:hidden}.page{position:absolute;inset:0;padding:14px 12px 24px;opacity:0;transform:translateX(18px) scale(.985);pointer-events:none;transition:.22s;overflow-y:auto}.page.on{opacity:1;transform:none;pointer-events:auto}
h2{margin:0 0 12px;color:#fff8f2;text-shadow:0 2px 6px rgba(0,0,0,.18)}.scoreline{margin-bottom:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.26)}
.gridapps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 20px}.app{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:6px;color:#2b160b}.ico{width:72px;height:72px;border-radius:10px;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.2));border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 18px rgba(0,0,0,.14),0 0 18px rgba(255,255,255,.12)}.app.sel .ico{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 10px 20px rgba(0,0,0,.18),0 0 20px rgba(255,255,255,.22)}.ico:before,.ico:after{content:"";position:absolute}
.music:before{inset:12px;border-radius:50%;background:radial-gradient(circle at 35% 40%,#8dd07f 0 18px,transparent 19px),radial-gradient(circle at 60% 64%,#79b5ff 0 23px,transparent 24px),linear-gradient(135deg,#aee0ff,#7db4ff)}.music:after{right:8px;bottom:8px;width:20px;height:20px;border-radius:4px;background:radial-gradient(circle at 4px 14px,#fff 0 2px,transparent 2px),radial-gradient(circle at 4px 14px,transparent 0 5px,#fff 5px 6px,transparent 6px),radial-gradient(circle at 4px 14px,transparent 0 10px,#fff 10px 11px,transparent 11px),linear-gradient(180deg,#ff9d4d,#e96b25)}
.profile:before{left:16px;top:12px;width:40px;height:48px;border-radius:10px;background:linear-gradient(180deg,#fff6cf,#f0c5a6)}.profile:after{left:22px;top:18px;width:28px;height:36px;background:radial-gradient(circle at 50% 28%,#e9d2bf 0 6px,transparent 6px),radial-gradient(circle at 50% 78%,#1a6ca1 0 10px,transparent 10px)}
.forum:before{left:14px;top:18px;width:16px;height:16px;border-radius:50%;background:#79d3ff;box-shadow:24px 0 0 #a4efb2}.forum:after{left:8px;top:34px;width:22px;height:14px;border-radius:14px 14px 8px 8px;background:#2a6f92;box-shadow:24px 0 0 #4ea268}
.shop:before{left:16px;right:16px;top:24px;bottom:14px;border-radius:10px;background:linear-gradient(180deg,#ffef76,#d8a91d)}.shop:after{left:24px;top:16px;width:24px;height:14px;border:3px solid rgba(120,78,0,.45);border-bottom:none;border-radius:12px 12px 0 0}
.library:before{left:16px;right:16px;top:18px;bottom:18px;border-radius:16px;background:#111}.library:after{inset:0;background:radial-gradient(circle at 28px 34px,#5df 0 5px,transparent 5px),radial-gradient(circle at 44px 34px,#8f6 0 5px,transparent 5px),linear-gradient(180deg,#7dff80,#5cc663) 24px 18px/24px 8px no-repeat,linear-gradient(180deg,#fff,#f6c0a2) 22px 46px/28px 8px no-repeat}
.news:before{left:16px;right:18px;top:14px;bottom:14px;border-radius:4px;background:linear-gradient(180deg,#ffe0e0,#ffc8c8)}.news:after{left:22px;right:24px;top:28px;height:28px;background:linear-gradient(#d26a6a,#d26a6a) 0 0/100% 2px no-repeat,linear-gradient(#d26a6a,#d26a6a) 0 12px/100% 2px no-repeat,linear-gradient(#d26a6a,#d26a6a) 0 24px/70% 2px no-repeat}
.settings:before{left:16px;top:16px;width:40px;height:40px;background:radial-gradient(circle at 10px 10px,transparent 0 8px,#f8f17d 8px 12px,transparent 12px),linear-gradient(135deg,#f8f17d,#c5b430) 18px 14px/10px 26px no-repeat,linear-gradient(135deg,#f8f17d,#c5b430) 28px 30px/18px 8px no-repeat;transform:rotate(45deg)}
.about:before{left:18px;right:18px;top:26px;height:18px;border-radius:14px;background:#fff}.about:after{left:28px;bottom:18px;width:14px;height:14px;background:#fff;clip-path:polygon(0 0,100% 0,0 100%)}
.casino:before{left:16px;top:16px;width:18px;height:18px;border-radius:4px;background:#fff;box-shadow:18px 18px 0 #f5f5f5}.casino:after{left:21px;top:21px;width:8px;height:8px;border-radius:50%;background:#333;box-shadow:18px 18px 0 #333,25px 25px 0 #333}
.cards:before{left:14px;right:14px;top:26px;bottom:14px;background:linear-gradient(180deg,#ffd56a,#d9a620);border-radius:6px}.cards:after{left:32px;top:18px;width:8px;height:40px;background:#d55050;box-shadow:0 -8px 0 0 #d55050, -14px -4px 0 -4px #ffe7a6, 14px -4px 0 -4px #ffe7a6}
.extras:before{inset:14px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#fff5b4}
.card,.box{background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.18));border:1px solid rgba(255,255,255,.42);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 24px rgba(0,0,0,.12),0 0 18px rgba(255,255,255,.08);padding:14px;position:relative;overflow:hidden}.card:after,.box:after{content:"";position:absolute;inset:-20% auto -20% -22%;width:16%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-18deg);animation:sweep 9s ease-in-out infinite}
.row,.btns,.prow,.controls,.times,.row2{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.art{width:86px;height:104px;border-radius:6px;background:linear-gradient(180deg,#6b140f,#140202);color:#ffd86b;display:grid;place-items:center;font-weight:900;font-size:30px}.bar{height:5px;background:rgba(255,255,255,.7);border-radius:999px;overflow:hidden;margin-top:10px}#fill{height:100%;width:0;background:linear-gradient(90deg,#3d220e,#fff3d6)}.meta{margin-top:14px;color:#fff5eb;line-height:1.6}.tracklist{display:grid;gap:8px;margin-top:12px}
.frame{padding:4px;border-radius:16px;background:linear-gradient(180deg,#ddd,#999)}.avatar{width:64px;height:64px;border-radius:12px;background:linear-gradient(180deg,#fff,#ffd3b8);display:grid;place-items:center;font-weight:900;color:#b5420c}.callprev,.calling-card-thumb{height:64px;border-radius:10px;background:linear-gradient(135deg,#44210d,#c05a1a,#44210d);display:grid;place-items:center;color:#fff;font-weight:700;text-align:center;padding:8px}.games,.cardsGrid,.shopg{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tile,.g,.forum-post,.reply{padding:12px;border-radius:10px;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.28);margin-top:10px}.replies{display:grid;gap:8px;margin-top:10px;padding-left:10px;border-left:2px solid rgba(80,30,10,.15)}
label{display:block;margin:10px 0;font-weight:700}select,input,textarea{width:100%;margin-top:6px;padding:10px;border-radius:10px;border:none;background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 22px rgba(0,0,0,.08)}textarea{min-height:100px;resize:vertical}.hide{display:none}.sec{background:linear-gradient(135deg,#c06a38,#8d4827)!important;color:#fff}
footer{position:absolute;left:0;right:0;bottom:0;height:42px;display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid rgba(255,255,255,.24);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06))}footer button,.auth button,.btns button,.controls button,.tracklist button,.g button,#post,#psave,#preset,#seed,#clearForum,#unlock{cursor:pointer;border:none;background:none;padding:9px 12px;border-radius:10px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center;z-index:50}.hid{display:none}.mc{width:min(92vw,360px);background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.5));border-radius:18px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
@keyframes sweep{0%,100%{transform:translateX(0) skewX(-18deg)}50%{transform:translateX(600%) skewX(-18deg)}}
@media (min-width:700px){.shell{width:min(92vw,1100px)}.gridapps{grid-template-columns:repeat(4,120px);justify-content:center;gap:26px 34px}.page{padding:20px 30px 34px}.card,.box{max-width:920px;margin:0 auto}}


/* V9 heavier visual pass */
body{
  image-rendering: pixelated;
  filter: contrast(1.24) saturate(1.32) brightness(.96);
}
.scan{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.16) 0 1px, rgba(0,0,0,.08) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 16%, transparent 84%, rgba(0,0,0,.08));
  opacity: var(--scan);
}
.grid{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 4px);
  opacity: var(--grid);
}
.rgb{
  background: linear-gradient(90deg, rgba(255,0,70,.16) 0%, transparent 16%, transparent 84%, rgba(0,170,255,.16) 100%);
  opacity: var(--rgb);
}
.vig{
  background:
    radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.52) 100%),
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.10), transparent 12%),
    radial-gradient(circle at 88% 15%, rgba(255,255,255,.08), transparent 10%);
}
.noise{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.22) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(0,0,0,.14) 0 1px, transparent 1px);
  background-size: 4px 4px, 6px 6px;
  opacity: var(--noise);
}
.shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), transparent 12%, transparent 88%, rgba(255,255,255,.045)),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 20%, transparent 80%, rgba(0,0,0,.08));
  mix-blend-mode: screen;
}
.ico{
  image-rendering: pixelated;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 18px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.14),
    0 0 20px rgba(255,255,255,.14);
}
.app.sel .ico{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.95),
    0 10px 24px rgba(0,0,0,.22),
    0 0 28px rgba(255,255,255,.26),
    inset 0 1px 0 rgba(255,255,255,.98);
}
.app span:last-child{
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 0 8px rgba(255,255,255,.08);
}

/* refined icons */
.ico.music:before{
  inset:13px;
  border-radius:12px;
  background:
    radial-gradient(circle at 34% 38%, #8fe182 0 15px, transparent 16px),
    radial-gradient(circle at 66% 68%, #79b5ff 0 18px, transparent 19px),
    linear-gradient(135deg,#d7f3ff,#8abfff);
}
.ico.music:after{
  right:9px; bottom:9px; width:18px; height:18px; border-radius:3px;
  background:
    radial-gradient(circle at 4px 13px,#fff 0 2px,transparent 2px),
    radial-gradient(circle at 4px 13px,transparent 0 5px,#fff 5px 6px,transparent 6px),
    linear-gradient(180deg,#ffb15a,#eb6f27);
}
.ico.profile:before{
  left:15px; top:12px; width:42px; height:48px; border-radius:12px;
  background: linear-gradient(180deg,#fff4d3,#f0c1a3);
}
.ico.profile:after{
  left:23px; top:18px; width:26px; height:34px;
  background:
    radial-gradient(circle at 50% 26%, #e9d2bf 0 6px, transparent 6px),
    radial-gradient(circle at 50% 80%, #2f7ac0 0 10px, transparent 10px);
}
.ico.forum:before{
  left:12px; top:16px; width:18px; height:18px; border-radius:50%;
  background:#8dd8ff; box-shadow:24px 0 0 #b8f0b3;
}
.ico.forum:after{
  left:8px; top:35px; width:24px; height:15px; border-radius:14px 14px 9px 9px;
  background:#347399; box-shadow:24px 0 0 #5ca06b;
}
.ico.shop:before{
  left:15px; right:15px; top:24px; bottom:14px; border-radius:10px;
  background: linear-gradient(180deg,#fff07c,#d7a318);
}
.ico.shop:after{
  left:24px; top:15px; width:24px; height:14px;
  border:3px solid rgba(120,78,0,.55); border-bottom:none; border-radius:12px 12px 0 0;
}
.ico.library:before{
  left:15px; right:15px; top:17px; bottom:17px; border-radius:15px; background:#111;
}
.ico.library:after{
  inset:0;
  background:
    radial-gradient(circle at 28px 34px,#5df 0 4px,transparent 4px),
    radial-gradient(circle at 44px 34px,#8f6 0 4px,transparent 4px),
    linear-gradient(180deg,#89ff8d,#4db85a) 24px 18px/24px 7px no-repeat,
    linear-gradient(180deg,#fff,#f7d2ae) 22px 46px/28px 8px no-repeat;
}
.ico.news:before{
  left:15px; right:17px; top:14px; bottom:14px; border-radius:4px;
  background: linear-gradient(180deg,#ffe8e8,#ffc6c6);
}
.ico.news:after{
  left:22px; right:24px; top:26px; height:30px;
  background:
    linear-gradient(#cc6868,#cc6868) 0 0/100% 2px no-repeat,
    linear-gradient(#cc6868,#cc6868) 0 12px/100% 2px no-repeat,
    linear-gradient(#cc6868,#cc6868) 0 24px/72% 2px no-repeat;
}
.ico.settings:before{
  left:14px; top:14px; width:44px; height:44px;
  background:
    radial-gradient(circle at 50% 50%, #f8f17d 0 6px, transparent 6px),
    radial-gradient(circle at 50% 50%, transparent 0 12px, #e7d44f 12px 16px, transparent 16px),
    linear-gradient(0deg,#e7d44f,#e7d44f) 20px 2px/4px 40px no-repeat,
    linear-gradient(90deg,#e7d44f,#e7d44f) 2px 20px/40px 4px no-repeat;
}
.ico.about:before{
  left:16px; right:16px; top:25px; height:18px; border-radius:14px; background:#fff;
}
.ico.about:after{
  left:28px; bottom:18px; width:14px; height:14px; background:#fff; clip-path:polygon(0 0,100% 0,0 100%);
}
.ico.casino:before{
  left:15px; top:15px; width:18px; height:18px; border-radius:4px; background:#fff;
  box-shadow:20px 20px 0 #f7f7f7;
}
.ico.casino:after{
  left:21px; top:21px; width:8px; height:8px; border-radius:50%; background:#333;
  box-shadow:20px 20px 0 #333, 27px 27px 0 #333;
}
.ico.cards:before{
  left:12px; right:12px; top:18px; bottom:18px; border-radius:6px; background:linear-gradient(180deg,#ffd86f,#d59e18);
}
.ico.cards:after{
  left:30px; top:14px; width:8px; height:44px; background:#d55050;
  box-shadow:0 -6px 0 0 #d55050,-12px -2px 0 -4px #ffe7a6,12px -2px 0 -4px #ffe7a6;
}
.ico.extras:before{
  inset:14px;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  background:#fff5b4;
}

/* visible back buttons */
footer{
  box-shadow: 0 -6px 18px rgba(0,0,0,.14);
}
#backBtn{
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.10));
  font-weight: 800;
}
.page-nav{
  margin:-4px 0 12px 0;
}
.inline-back{
  border:none;
  border-radius:10px;
  padding:9px 12px;
  background:rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  font-weight:700;
}
.cardsGrid .tile{
  display:grid;
  gap:8px;
}
.buycard,.equip{
  width:100%;
  border:none;
  border-radius:10px;
  padding:9px 12px;
  background:rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
