/* ɪʀᴀɴ ꜱᴇʟꜰ visual system — lightweight layered 3D */
:root{
 --bg:#070510;--bg2:#0d0920;--panel:rgba(22,14,43,.78);--panel2:rgba(34,20,62,.72);
 --line:rgba(190,132,255,.20);--line2:rgba(255,255,255,.075);
 --purple:#9b5cff;--purple2:#c49aff;--pink:#ff55c8;--neon:#d7a8ff;
 --text:#f7f1ff;--muted:#a99abf;--glow-p:0 0 26px rgba(164,92,255,.28);
 --shadow-deep:0 18px 42px rgba(0,0,0,.42);
}
html{background:var(--bg);color-scheme:dark}
body{
 background:
 radial-gradient(ellipse at 80% -8%,rgba(142,61,255,.23),transparent 36%),
 radial-gradient(ellipse at 0% 45%,rgba(255,54,194,.10),transparent 34%),
 linear-gradient(155deg,#090614 0%,#070510 52%,#0c0718 100%);
 color:var(--text);font-family:Vazirmatn,system-ui,sans-serif;
 -webkit-font-smoothing:antialiased;
}
#app{max-width:520px;margin:0 auto;min-height:100dvh;position:relative;isolation:isolate}
#app:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.15;
 background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
 background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 85%)}
#header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(9,6,20,.96),rgba(9,6,20,.76));
 backdrop-filter:blur(18px);border-bottom:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.22)}
.page{padding:16px 14px calc(110px + env(safe-area-inset-bottom));animation:pageIn .28s ease both}
.panel,.glass-3d,.game-card,.game-shell,.sheet{
 background:linear-gradient(145deg,rgba(35,22,62,.88),rgba(15,11,29,.91));
 border:1px solid rgba(199,151,255,.2);box-shadow:var(--shadow-deep),inset 0 1px rgba(255,255,255,.07);
 backdrop-filter:blur(14px);border-radius:22px;position:relative;overflow:hidden
}
.panel:before,.game-card:before,.glass-3d:before{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(125deg,rgba(255,255,255,.075),transparent 28%,transparent 70%,rgba(185,100,255,.045))}
.glass-3d{transform:perspective(900px) rotateX(.35deg);transform-style:preserve-3d}
.game-card{min-width:0;transform:perspective(900px) translateZ(0);transition:transform .22s ease,border-color .22s,box-shadow .22s}
.game-card:active{transform:perspective(900px) rotateX(2deg) scale(.985)}
@media(hover:hover){.game-card:hover{transform:perspective(900px) rotateX(2deg) translateY(-4px);border-color:rgba(208,155,255,.48);box-shadow:0 20px 40px rgba(0,0,0,.4),0 0 25px rgba(164,92,255,.18)}}
.game-preview{height:132px;background:radial-gradient(ellipse at 50% 80%,rgba(157,85,255,.24),transparent 62%),linear-gradient(135deg,rgba(116,53,190,.12),rgba(12,8,26,.18));}
.game-meta{background:linear-gradient(180deg,rgba(25,16,45,.72),rgba(13,9,25,.95));padding:13px 14px 15px}
.game-meta h3{font-size:14px;font-weight:800;letter-spacing:-.2px}
.game-meta p{font-size:11px;color:#b7a9ca;line-height:1.7}
.game-badge{border:1px solid rgba(255,255,255,.16);box-shadow:0 4px 14px rgba(0,0,0,.24);padding:4px 10px}
.game-badge.new{background:linear-gradient(110deg,#7d39df,#c04be9)}
.game-badge.hot{background:linear-gradient(110deg,#e3429e,#f0784b)}
.btn{border:1px solid rgba(255,255,255,.14);background:linear-gradient(120deg,#8d43e8,#c04ed7 65%,#e44db4);
 color:#fff;border-radius:14px;box-shadow:0 8px 20px rgba(149,67,225,.24),inset 0 1px rgba(255,255,255,.25);
 font-family:inherit;font-weight:800;transition:transform .16s,filter .16s}
.btn:active{transform:translateY(1px) scale(.985);filter:brightness(1.12)}
.btn.ghost{background:rgba(255,255,255,.055);box-shadow:none;border-color:var(--line)}
.input, input,select,textarea{background:rgba(5,3,15,.62)!important;border:1px solid rgba(188,137,255,.25)!important;
 color:var(--text)!important;border-radius:13px!important;font-family:inherit;outline:none}
.input:focus,input:focus,select:focus,textarea:focus{border-color:#bd83ff!important;box-shadow:0 0 0 3px rgba(162,91,255,.13)}
#navbar{background:rgba(11,7,23,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line);
 box-shadow:0 -12px 32px rgba(0,0,0,.3);padding-bottom:env(safe-area-inset-bottom)}
.nav-item{transition:color .18s,transform .18s}
.nav-item.active{color:#d7aaff;text-shadow:0 0 16px rgba(191,128,255,.65)}
.avatar{box-shadow:0 0 0 4px rgba(166,99,255,.12),0 0 26px rgba(180,91,255,.38);background:linear-gradient(145deg,#a85cff,#e04dbd)}
.stat-item{background:linear-gradient(145deg,rgba(48,29,79,.75),rgba(10,8,22,.68));border:1px solid rgba(196,151,255,.15);border-radius:15px}
.remain-time{text-shadow:0 0 20px rgba(191,122,255,.3)}
.fab{border:1px solid rgba(255,255,255,.25);background:linear-gradient(145deg,#ad62ff,#e34cba);box-shadow:0 9px 28px rgba(172,75,255,.42),inset 0 1px rgba(255,255,255,.4)}
.sheet{border-radius:24px 24px 0 0}
.toast{border:1px solid var(--line);background:rgba(24,14,43,.96);backdrop-filter:blur(14px);box-shadow:0 10px 32px rgba(0,0,0,.4)}
/* 3D preview details */
.rocket-3d{filter:drop-shadow(0 0 15px rgba(194,113,255,.7));transform:perspective(220px) rotateY(-18deg) rotateZ(-12deg);animation:rocketFloat 2.6s ease-in-out infinite}
.preview-rocket:after{content:"";position:absolute;width:150px;height:35px;border-radius:50%;background:rgba(164,82,255,.22);filter:blur(18px);bottom:9px}
.card-fan i{box-shadow:0 9px 22px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(4px)}
.mines-mini{filter:drop-shadow(0 0 12px rgba(166,102,255,.25));letter-spacing:5px;transform:rotateX(14deg)}
.swords-ico{filter:drop-shadow(0 0 12px rgba(207,145,255,.7));animation:swordPulse 2.2s ease-in-out infinite}
@keyframes pageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes rocketFloat{0%,100%{translate:0 2px}50%{translate:0 -7px}}
@keyframes swordPulse{0%,100%{transform:scale(1) rotate(-5deg)}50%{transform:scale(1.12) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@media(max-width:360px){.page{padding-left:10px;padding-right:10px}.game-preview{height:112px}.game-meta{padding:10px}}