/* ============================================================ DALLAH Mobile-first. Every directional rule uses logical properties so the whole layout mirrors itself when flips to rtl. ============================================================ */ :root { --bg: #150f0a; --bg-2: #1e1610; --card: rgba(255, 240, 214, 0.055); --card-2: rgba(255, 240, 214, 0.09); --line: rgba(255, 214, 148, 0.14); --line-2: rgba(255, 214, 148, 0.3); --ink: #f6ecdc; --ink-dim: rgba(246, 236, 220, 0.58); --ink-faint: rgba(246, 236, 220, 0.32); --gold: #f0c266; --gold-2: #e8a33c; --gold-deep: #a9762a; --green: #7fdba4; --rose: #ff7d92; --violet: #b79bff; --r-lg: 22px; --r-md: 16px; --r-sm: 11px; --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; --font-ar: "Segoe UI", "Noto Sans Arabic", "Dubai", Tahoma, system-ui, sans-serif; --safe-b: env(safe-area-inset-bottom, 0px); --tabs-h: 62px; } html[lang="ar"] { --font: var(--font-ar); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); overscroll-behavior: none; } body { overflow: hidden; user-select: none; -webkit-user-select: none; } .hidden { display: none !important; } button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; } /* ------------------------------------------------------------ backdrop */ .bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, #2a1d12 0%, var(--bg) 55%, #0d0906 100%); } .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; animation: drift 26s ease-in-out infinite; } .b1 { width: 60vw; height: 60vw; background: #7a4a12; inset-block-start: -12vw; inset-inline-start: -14vw; } .b2 { width: 52vw; height: 52vw; background: #a8641b; inset-block-end: 4vh; inset-inline-end: -16vw; animation-delay: -9s; } .b3 { width: 44vw; height: 44vw; background: #3e2b58; inset-block-start: 38vh; inset-inline-start: 22vw; animation-delay: -17s; opacity: .38; } @keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(6%, 8%, 0) scale(1.12); } 66% { transform: translate3d(-7%, -5%, 0) scale(0.94); } } .grain { position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 3px 3px; } #fx { position: fixed; inset: 0; z-index: 40; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .blob { animation: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ------------------------------------------------------- language gate */ .gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: radial-gradient(90% 70% at 50% 0%, #241a10, #0b0705 70%); animation: fade .5s ease both; } .gate.out { animation: fadeOut .45s ease both; } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeOut { to { opacity: 0; visibility: hidden } } .gate-card { width: min(430px, 100%); text-align: center; animation: rise .7s cubic-bezier(.2,.8,.2,1) both; } @keyframes rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } } .mark-svg { width: 108px; height: 108px; filter: drop-shadow(0 8px 30px rgba(240,194,102,.35)); animation: hover 5s ease-in-out infinite; } @keyframes hover { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } } .gate-title { margin: 10px 0 2px; font-size: 40px; font-weight: 700; letter-spacing: .3em; text-indent: .3em; background: linear-gradient(180deg, #fff3d6, #e0a949 70%, #9d6e26); -webkit-background-clip: text; background-clip: text; color: transparent; } .gate-title span { display: block; font-size: 24px; letter-spacing: normal; text-indent: 0; margin-top: 2px; font-family: var(--font-ar); } .gate-sub { margin: 0 0 26px; font-size: 13px; color: var(--ink-dim); letter-spacing: .06em; } .gate-sub span { display: block; font-family: var(--font-ar); direction: rtl; margin-top: 3px; } .gate-picks { display: grid; gap: 12px; } .pick { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); background: linear-gradient(135deg, rgba(255,240,214,.09), rgba(255,240,214,.03)); border: 1px solid var(--line); text-align: start; transition: transform .22s cubic-bezier(.2,.9,.3,1.3), border-color .22s, box-shadow .22s, background .22s; } .pick:hover, .pick:focus-visible { outline: none; transform: translateY(-3px); border-color: var(--line-2); background: linear-gradient(135deg, rgba(255,214,148,.16), rgba(255,240,214,.05)); box-shadow: 0 14px 40px -12px rgba(232,163,60,.55); } .pick:active { transform: scale(.98); } .pick-flag { flex: 0 0 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; font-size: 20px; font-weight: 700; background: linear-gradient(140deg, var(--gold), var(--gold-deep)); color: #2a1a08; } .pick-name { font-size: 19px; font-weight: 600; } .pick-note { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px; } .pick > span:nth-child(2) { flex: 1; } .pick[data-lang="ar"] { font-family: var(--font-ar); } /* ----------------------------------------------------------------- app */ .app { position: relative; z-index: 10; height: 100dvh; display: flex; flex-direction: column; animation: fade .6s ease both; } /* HUD */ .hud { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px; background: linear-gradient(180deg, rgba(12,8,5,.85), rgba(12,8,5,0)); backdrop-filter: blur(10px); } .hud-brand { display: flex; align-items: center; gap: 9px; min-width: 0; } .brand-mark { width: 38px; height: 38px; display: grid; place-items: center; font-size: 19px; border-radius: 12px; background: linear-gradient(140deg, rgba(240,194,102,.28), rgba(169,118,42,.16)); border: 1px solid var(--line); } .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .brand-text b { font-size: 14px; letter-spacing: .14em; } .brand-text i { font-style: normal; font-size: 10px; color: var(--ink-faint); letter-spacing: .04em; } .hud-money { margin-inline-start: auto; text-align: end; } .cash { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 25px; font-weight: 700; letter-spacing: -.01em; } .cash .coin { color: var(--gold); font-size: 15px; filter: drop-shadow(0 0 8px rgba(240,194,102,.7)); } .cash.bump { animation: bump .35s cubic-bezier(.3,1.6,.5,1); } @keyframes bump { 50% { transform: scale(1.08); color: #fff6e0 } } .rate { font-size: 11.5px; color: var(--green); letter-spacing: .04em; } #cash sup, #rate sup { font-size: .58em; margin-inline-start: 2px; font-weight: 600; opacity: .82; vertical-align: baseline; } .icon-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; font-size: 17px; background: var(--card); border: 1px solid var(--line); color: var(--ink-dim); transition: transform .2s, color .2s, border-color .2s; } .icon-btn:hover { color: var(--gold); border-color: var(--line-2); transform: rotate(45deg); } /* stage */ .stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* ---------------------------------------------------------------- hero */ .hero { flex: 0 0 auto; position: relative; display: grid; justify-items: center; padding: 2px 16px 8px; } .hero-glow { position: absolute; inset-block-start: -8%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(240,194,102,.24), transparent 62%); pointer-events: none; animation: pulse 4.5s ease-in-out infinite; } @keyframes pulse { 0%,100% { transform: scale(.9); opacity: .7 } 50% { transform: scale(1.06); opacity: 1 } } .pour { position: relative; display: grid; justify-items: center; padding: 0; transition: transform .12s cubic-bezier(.3,1.6,.4,1); } .pour:active { transform: scale(.94); } .dallah { width: min(46vw, 200px); height: auto; overflow: visible; } .shadow { fill: rgba(0,0,0,.45); filter: blur(6px); } .pot { transform-origin: 130px 232px; transition: transform .18s cubic-bezier(.3,1.5,.5,1); } .pour.go .pot { transform: rotate(-19deg); } /* A dark hairline on every piece is what keeps the lid, neck ring and body reading as separate forms instead of one gold blob. */ .body, .lid, .spout, .foot, .ring, .finial, .crescent { fill: url(#gBody); stroke: rgba(74,42,12,.55); stroke-width: 2; stroke-linejoin: round; } .handle { fill: none; stroke: url(#gBody); stroke-width: 13; stroke-linecap: round; } .band { stroke: rgba(90,52,16,.45); stroke-width: 3; fill: none; } .gloss { opacity: .5; } .cup-body { fill: #f3e6d2; } .cup-rim { fill: #fffaf0; } .brew { transition: transform .35s ease; transform-origin: center; } .stream { fill: none; stroke: #8b5423; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 130; opacity: 0; } .pour.go .stream { opacity: 1; animation: pourStream .42s ease-out; } @keyframes pourStream { from { stroke-dashoffset: 130 } to { stroke-dashoffset: 0 } } .steam { fill: none; stroke: rgba(255,240,214,.5); stroke-width: 3.5; stroke-linecap: round; opacity: 0; } .pour.go .steam { animation: steam 1.1s ease-out; } @keyframes steam { 0% { opacity: 0; transform: translateY(6px) } 35% { opacity: .85 } 100% { opacity: 0; transform: translateY(-24px) } } .pour-label { margin-top: 2px; font-size: 12px; letter-spacing: .28em; text-indent: .28em; font-weight: 700; color: #2a1a08; padding: 9px 24px; border-radius: 999px; background: linear-gradient(140deg, #ffe1a2, var(--gold-2)); box-shadow: 0 8px 26px -8px rgba(232,163,60,.9), inset 0 1px 0 rgba(255,255,255,.6); } html[lang="ar"] .pour-label { letter-spacing: .06em; text-indent: 0; } .combo { display: flex; align-items: center; gap: 8px; margin-top: 12px; opacity: 0; transition: opacity .3s; } .combo.on { opacity: 1; } .combo-bar { width: 116px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; } .combo-bar i { display: block; height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--rose)); transition: width .12s linear; } #comboText { font-size: 13px; font-weight: 700; color: var(--gold); min-width: 30px; } .hero-hint { margin: 8px 0 0; font-size: 11px; color: var(--ink-faint); } /* -------------------------------------------------------------- panels */ .panels { flex: 1 1 auto; min-height: 0; display: flex; } .panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; animation: fade .3s ease both; } .panel-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 4px 16px 10px; } .panel-head h2 { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; } html[lang="ar"] .panel-head h2 { letter-spacing: 0; } .segmented { margin-inline-start: auto; display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: rgba(0,0,0,.3); border: 1px solid var(--line); } .segmented button { padding: 5px 9px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--ink-faint); transition: .2s; } .segmented button.on { background: linear-gradient(140deg, var(--gold), var(--gold-deep)); color: #2a1a08; } .list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 14px calc(var(--tabs-h) + var(--safe-b) + 18px); display: flex; flex-direction: column; gap: 9px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } /* Cards must never be compressed by the scroll container — a squeezed row clips its own contents against .biz's overflow:hidden. */ .list > * { flex: 0 0 auto; } .list::-webkit-scrollbar { width: 5px; } .list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px; } /* ---------------------------------------------------------- biz cards */ .biz { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--card-2), var(--card)); border: 1px solid var(--line); animation: rise .4s cubic-bezier(.2,.8,.2,1) both; } .biz.locked { opacity: .5; } .biz.affordable { border-color: var(--line-2); box-shadow: 0 0 0 1px rgba(240,194,102,.1), 0 10px 30px -18px rgba(240,194,102,.8); } /* Production sweep. Deliberately faint — it sits *behind* the row's text and anything stronger turns the card into an unreadable gold slab. */ .biz-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(to right, rgba(240,194,102,.03) 0%, rgba(240,194,102,.07) 88%, rgba(255,214,148,.28) 100%); pointer-events: none; } html[dir="rtl"] .biz-fill { transform-origin: right center; background: linear-gradient(to left, rgba(240,194,102,.03) 0%, rgba(240,194,102,.07) 88%, rgba(255,214,148,.28) 100%); } .biz-icon { position: relative; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(140deg, rgba(240,194,102,.24), rgba(120,70,20,.2)); border: 1px solid var(--line); } .biz-icon.run { animation: work 1s ease-in-out infinite; } @keyframes work { 50% { transform: translateY(-3px) rotate(-4deg) } } .biz-lv { position: absolute; inset-block-end: -6px; inset-inline-end: -6px; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #2a1a08; background: linear-gradient(140deg, #ffe1a2, var(--gold-2)); border: 2px solid #1b120b; } .biz-mid { position: relative; min-width: 0; } .biz-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .biz-meta { font-size: 11px; color: var(--ink-dim); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; } .biz-meta .yield { color: var(--green); font-weight: 600; } .biz-bar { margin-top: 6px; height: 4px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; } .biz-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-2), var(--gold)); } .biz-side { position: relative; display: grid; gap: 5px; justify-items: stretch; min-width: 96px; } .buy { padding: 9px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; line-height: 1.25; background: linear-gradient(140deg, var(--gold), var(--gold-deep)); color: #2a1a08; box-shadow: 0 6px 18px -8px rgba(232,163,60,.9); transition: transform .16s cubic-bezier(.3,1.6,.4,1), filter .2s; } .buy:active { transform: scale(.95); } .buy:disabled { background: rgba(255,255,255,.07); color: var(--ink-faint); box-shadow: none; cursor: not-allowed; } .buy small { display: block; font-size: 9px; font-weight: 600; opacity: .75; letter-spacing: .04em; } .mgr { min-height: 38px; padding: 6px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; background: rgba(183,155,255,.14); border: 1px solid rgba(183,155,255,.32); color: #d9c9ff; transition: .2s; } .mgr:disabled { opacity: .45; cursor: not-allowed; } .mgr.done { background: rgba(127,219,164,.14); border-color: rgba(127,219,164,.34); color: var(--green); cursor: default; } /* -------------------------------------------------------- upgrade rows */ .up { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--card-2), var(--card)); border: 1px solid var(--line); animation: rise .4s cubic-bezier(.2,.8,.2,1) both; } .up-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: linear-gradient(140deg, rgba(183,155,255,.22), rgba(90,60,160,.18)); border: 1px solid rgba(183,155,255,.25); } .up-name { font-size: 13.5px; font-weight: 600; } .up-desc { font-size: 11px; color: var(--ink-dim); margin-top: 2px; line-height: 1.5; } .up-desc b { color: var(--gold); font-weight: 700; } .up.locked { opacity: .5; border-style: dashed; } .up.locked .up-icon { background: rgba(255,255,255,.05); border-color: var(--line); } .up-cost { font-size: 12px; font-weight: 700; color: var(--ink-faint); } .up-divider { margin: 10px 2px 2px; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); } html[lang="ar"] .up-divider { letter-spacing: 0; } .empty { padding: 34px 18px; text-align: center; color: var(--ink-faint); font-size: 12.5px; line-height: 1.7; } .empty span { display: block; font-size: 34px; margin-bottom: 10px; opacity: .55; } /* ------------------------------------------------------------ prestige */ .prestige, .stats { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px calc(var(--tabs-h) + var(--safe-b) + 18px); } .pres-card { padding: 22px 18px; border-radius: var(--r-lg); text-align: center; background: linear-gradient(160deg, rgba(183,155,255,.14), rgba(255,240,214,.04)); border: 1px solid rgba(183,155,255,.26); } .pres-orb { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, #b79bff 42%, #4b2f8f 100%); box-shadow: 0 0 50px rgba(183,155,255,.55), inset 0 -10px 22px rgba(0,0,0,.35); animation: hover 5s ease-in-out infinite; display: grid; place-items: center; font-size: 38px; } .pres-gain { font-size: 40px; font-weight: 700; color: #ddd0ff; line-height: 1; margin: 6px 0; } .pres-line { font-size: 12.5px; color: var(--ink-dim); line-height: 1.8; } .pres-line b { color: var(--violet); } .pres-btn { margin-top: 18px; width: 100%; padding: 15px; border-radius: 14px; font-size: 14px; font-weight: 700; letter-spacing: .12em; background: linear-gradient(140deg, #cdb8ff, #6f4fc4); color: #170f2b; box-shadow: 0 12px 30px -12px rgba(160,120,255,.9); transition: transform .18s cubic-bezier(.3,1.6,.4,1); } .pres-btn:active { transform: scale(.97); } .pres-btn:disabled { background: rgba(255,255,255,.07); color: var(--ink-faint); box-shadow: none; cursor: not-allowed; } .pres-note { margin-top: 12px; font-size: 11px; color: var(--ink-faint); line-height: 1.7; } .owned-shares { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; } .owned-shares b { color: var(--violet); font-size: 18px; } /* --------------------------------------------------------------- stats */ .stat-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border-radius: var(--r-md); margin-bottom: 8px; background: var(--card); border: 1px solid var(--line); font-size: 13px; } .stat-row span { color: var(--ink-dim); } .stat-row b { font-weight: 700; } /* ---------------------------------------------------------------- tabs */ .tabs { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 30; height: calc(var(--tabs-h) + var(--safe-b)); padding-block-end: var(--safe-b); display: grid; grid-template-columns: repeat(4, 1fr); background: linear-gradient(0deg, rgba(10,7,4,.97), rgba(10,7,4,.82)); backdrop-filter: blur(14px); border-block-start: 1px solid var(--line); } .tab { position: relative; display: grid; place-items: center; gap: 2px; padding: 8px 4px; color: var(--ink-faint); transition: color .22s; } .tab span { font-size: 19px; transition: transform .28s cubic-bezier(.3,1.6,.4,1); filter: grayscale(.65); } .tab i { font-style: normal; font-size: 9.5px; letter-spacing: .05em; } .tab.on { color: var(--gold); } .tab.on span { transform: translateY(-2px) scale(1.16); filter: none; } .tab.on::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); width: 26px; height: 2px; border-radius: 99px; background: var(--gold); box-shadow: 0 0 12px var(--gold); } .dot { position: absolute; inset-block-start: 6px; inset-inline-end: 26%; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 10px var(--rose); animation: blink 1.6s ease-in-out infinite; } @keyframes blink { 50% { opacity: .35 } } /* -------------------------------------------------------------- modals */ .modal-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 22px; background: rgba(6, 4, 2, .74); backdrop-filter: blur(6px); animation: fade .25s ease both; } .modal { width: min(400px, 100%); max-height: 84dvh; overflow-y: auto; padding: 24px 20px; text-align: center; border-radius: var(--r-lg); background: linear-gradient(160deg, #241a11, #17100a); border: 1px solid var(--line-2); box-shadow: 0 30px 80px -20px #000; animation: rise .4s cubic-bezier(.2,.8,.2,1) both; } .modal h3 { margin: 0 0 8px; font-size: 20px; } .modal p { margin: 0 0 8px; font-size: 13px; color: var(--ink-dim); line-height: 1.8; } .modal .big { font-size: 30px; font-weight: 700; color: var(--gold); margin: 10px 0; } .modal .emoji { font-size: 44px; display: block; margin-bottom: 8px; } .modal-actions { display: grid; gap: 9px; margin-top: 18px; } .btn { padding: 14px; border-radius: 13px; font-size: 13.5px; font-weight: 700; letter-spacing: .1em; background: linear-gradient(140deg, var(--gold), var(--gold-deep)); color: #2a1a08; transition: transform .18s cubic-bezier(.3,1.6,.4,1); } .btn:active { transform: scale(.97); } .btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-dim); box-shadow: none; } .btn.danger { background: transparent; border: 1px solid rgba(255,125,146,.4); color: var(--rose); } .setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-block-end: 1px solid var(--line); font-size: 13.5px; } .setting:last-of-type { border: 0; } .mini-seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--line); } .mini-seg button { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--ink-faint); } .mini-seg button.on { background: linear-gradient(140deg, var(--gold), var(--gold-deep)); color: #2a1a08; } /* -------------------------------------------------------------- toasts */ .toasts { position: fixed; inset-block-start: calc(env(safe-area-inset-top, 0px) + 62px); inset-inline: 0; z-index: 50; display: grid; justify-items: center; gap: 7px; pointer-events: none; padding: 0 16px; } .toast { max-width: 100%; padding: 10px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(30, 21, 13, .94); border: 1px solid var(--line-2); color: var(--ink); box-shadow: 0 12px 34px -14px #000; animation: toastIn .4s cubic-bezier(.2,.9,.3,1.4) both; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .toast.out { animation: toastOut .35s ease forwards; } @keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.9) } } @keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(.95) } } /* ------------------------------------------------------------- desktop */ @media (min-width: 900px) { :root { --tabs-h: 0px; } .app { max-width: 1180px; margin: 0 auto; } .stage { flex-direction: row; gap: 24px; padding: 0 20px 20px; overflow: hidden; } .hero { flex: 0 0 380px; align-content: center; padding-bottom: 0; } .dallah { width: 260px; } .panels { border-radius: var(--r-lg); background: rgba(0,0,0,.22); border: 1px solid var(--line); overflow: hidden; } .list, .prestige, .stats { padding-bottom: 18px; } .tabs { position: static; height: auto; padding: 0 20px 12px; background: none; backdrop-filter: none; border: 0; max-width: 1180px; margin: 0 auto; grid-template-columns: repeat(4, minmax(0, 150px)); justify-content: center; gap: 8px; } .tab { flex-direction: row; border-radius: 12px; border: 1px solid transparent; } .tab.on { background: var(--card); border-color: var(--line); } .tab.on::before { display: none; } .tab i { font-size: 11px; } }