/* Zentra / Studio edition — shared surfaces and lobby composition */
:root { --bg:#0d1019; --bg2:#11141f; --panel:#171b29; --panel2:#1d2233; --panel3:#292f44; --panel4:#353e59; --line:rgba(177,188,226,.09); --line2:rgba(177,188,226,.17); --muted:#929bb2; --muted2:#78839d; --accent:#a99bff; --accent-2:#7e68ed; --grad:linear-gradient(120deg,#ad9bff,#8871ed); --sidebar:224px; --topbar:78px; --radius:16px; }
body::before { background:radial-gradient(900px 700px at 70% 0%,#4332650d,transparent 80%); }
body::after { opacity:.018; }
.app { height:100dvh; }
.sidebar { background:#11141f; backdrop-filter:none; }
.logo { height:98px; padding:0 26px; gap:8px; font-size:29px; letter-spacing:-1.2px; }
.logo .ic { width:37px; height:37px; filter:none; }
.logo span b { color:inherit; background:none; }
.logo span { font-weight:700; }
.brand-period { color:var(--accent); }
.nav { padding:0 14px 24px; }
.nav a { height:42px; font-size:12px; font-weight:500; padding:0 13px; gap:12px; color:#9ca5bc; border-radius:8px; }
.nav a:nth-of-type(-n+4) { height:46px; }
.nav a > .ic { width:18px; height:18px; }
.nav a .gi { width:23px; height:23px; background:transparent; }
.nav a .gi .ic { width:22px; height:22px; }
.nav-title { font-size:9px; letter-spacing:1.8px; padding:26px 13px 12px; }
.nav-indicator { left:14px; right:14px; border-radius:8px; background:linear-gradient(100deg,#a998ff22,#a998ff09); box-shadow:inset 0 0 0 1px #ab9bff12; }
.nav-indicator::before { left:0; width:2px; top:13px; bottom:13px; box-shadow:0 0 14px #ac92ff66; }
.nav a.active { color:#d5caff; }
.nav .hot { font-size:8px; letter-spacing:.6px; padding:3px 5px; color:#c9b9f5; background:#a590ff14; }
.sidebar-note { padding:16px 25px 22px; margin-top:auto; border-top:1px solid var(--line); font-size:10px; color:var(--muted2); display:flex; gap:7px; align-items:center; }
.sidebar-note i,.free-pill i { width:5px; height:5px; background:#9ed8bc; border-radius:100%; box-shadow:0 0 8px #9ed8bc44; }
.topbar { padding:0 34px; background:#0f121cec; gap:12px; }
.topbar-context { display:flex; align-items:center; gap:22px; height:100%; font-size:12px; font-weight:600; }
.topbar-context a { height:100%; display:flex; align-items:center; gap:8px; position:relative; color:var(--muted); }
.topbar-context a.current { color:#d4caff; }
.topbar-context a.current::after { content:""; position:absolute; height:2px; background:#ac95f1; bottom:0; left:0; right:0; }
.topbar-context .ic { width:17px; height:17px; }
.wallet { border-radius:9px; box-shadow:inset 0 0 0 1px var(--line); background:#191d2b; padding:4px; }
.wallet .bal { font-family:var(--font); font-size:13px; min-width:124px; }
.wallet .bal .ic { width:19px; height:19px; filter:none; color:#d8bb7f; }
.wallet .refill-btn { border-radius:6px; color:#1f173d; box-shadow:0 3px 12px #9a7df522,inset 0 1px 0 #ffffff44; font-size:11px; }
.top-btn { background:transparent; box-shadow:none; padding:0 10px; height:40px; font-size:11px; color:#a6afc5; border-radius:9px; }
.top-btn > .ic { width:18px; height:18px; }
.level-chip { background:#191d2b; padding:0 10px; }
.level-chip .lv-text { font-size:10px; }
.level-bar { width:65px; height:3px; margin-top:6px; }
.level-bar i::after { animation-duration:5s; }
.view { max-width:1510px; padding:30px 38px; }
.lobby-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:25px; }
.eyebrow { display:block; color:#7f8aa3; font-size:9px; letter-spacing:1.9px; font-weight:600; }
.lobby-heading h1 { font-family:var(--display); font-size:25px; letter-spacing:-.7px; font-weight:500; margin:7px 0 0; }
.free-pill { display:flex; align-items:center; gap:7px; color:#a4b7af; font-size:10px; border:1px solid #a6d9bb16; background:#96d8b706; border-radius:30px; padding:8px 11px; white-space:nowrap; }
.lobby-hero { position:relative; min-height:355px; overflow:hidden; isolation:isolate; border-radius:18px; background:radial-gradient(ellipse at 77% 35%,#7560ae6b,transparent 50%),linear-gradient(110deg,#242139,#27223e 58%,#36304f); border:1px solid #bca2fc24; }
.hero-grid { position:absolute; inset:0; z-index:-1; opacity:.22; background-image:linear-gradient(#c0b7f51a 1px,transparent 1px),linear-gradient(90deg,#c0b7f51a 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(90deg,transparent 35%,#000); transform:perspective(500px) rotateY(-12deg) scale(1.3); }
.lobby-hero-copy { position:relative; z-index:2; padding:38px 38px 35px; width:62%; }
.hero-tag { display:flex; align-items:center; gap:7px; color:#d1c1ff; font-size:9px; letter-spacing:1.6px; font-weight:600; }
.hero-tag .ic { width:15px; height:15px; }
.lobby-hero h2 { font-family:var(--display); font-weight:600; font-size:clamp(44px,4.2vw,65px); line-height:1.02; letter-spacing:-2px; margin:20px 0 17px; }
.lobby-hero h2 em { font-style:normal; color:#bdabff; }
.lobby-hero p { color:#b0abc4; font-size:12px; line-height:1.8; margin:0 0 23px; }
.lobby-hero .hero-actions { align-items:center; gap:20px; }
.btn-primary { color:#211936; box-shadow:0 4px 18px #9c7df526,inset 0 1px 0 #ffffff40; }
.lobby-hero .btn { height:43px; padding:0 18px; font-size:11px; border-radius:7px; font-weight:700; gap:14px; }
.hero-reward-link { color:#d2cadd; font-size:10px; display:flex; align-items:center; gap:5px; transition:color .2s; }
.hero-reward-link:hover { color:#fff; }
.hero-caption { display:flex; align-items:center; gap:6px; font-size:9px; color:#9c96b1; margin-top:22px; }
.hero-caption .ic { width:12px; height:12px; }
.hero-edition { position:absolute; bottom:20px; right:24px; font-size:8px; letter-spacing:2px; color:#b3a5cd77; }
.hero-scene { position:absolute; width:430px; height:360px; top:12px; right:0; pointer-events:none; }
.scene-halo { position:absolute; width:270px; height:270px; left:80px; top:40px; border-radius:50%; background:radial-gradient(#be9bff24,transparent 70%); }
.scene-ring { position:absolute; width:335px; height:245px; border:1px solid #c8baff21; border-radius:50%; left:45px; top:60px; transform:rotate(-32deg); }
.ring-two { width:380px; height:280px; left:22px; top:42px; border-style:dashed; border-color:#c8baff13; animation:orbit-breathe 12s ease-in-out infinite; }
.scene-dice { position:absolute; width:190px; height:190px; top:49px; left:104px; transform:rotate(-12deg); animation:studio-float 7s ease-in-out infinite; filter:drop-shadow(0 24px 16px #110d3e77); z-index:3; }
.scene-dice .ic,.scene-gem .ic,.scene-coin .ic { width:100%; height:100%; }
.scene-coin { position:absolute; width:89px; height:89px; top:5px; right:50px; transform:rotate(18deg); animation:studio-float 8s -3s ease-in-out infinite; filter:drop-shadow(0 12px 12px #0b082c88); }
.scene-gem { position:absolute; width:86px; height:86px; left:42px; bottom:61px; transform:rotate(-15deg); animation:studio-float 6s -2s ease-in-out infinite; filter:drop-shadow(0 12px 12px #0b082c88); }
.scene-ticket { width:136px; height:176px; position:absolute; top:101px; right:45px; transform:rotate(17deg); padding:17px; border-radius:12px; background:linear-gradient(135deg,#faf0df,#dfd3bf); color:#403d53; box-shadow:4px 8px 0 #b2a790,0 20px 30px #14102244; z-index:2; }
.scene-ticket > span { display:flex; align-items:center; gap:3px; font-size:6px; letter-spacing:1px; }
.scene-ticket > span .ic { width:14px; height:14px; }
.scene-ticket b { font-family:var(--display); font-weight:600; display:block; font-size:21px; line-height:1.12; letter-spacing:-.7px; margin:21px 0 19px; }
.scene-ticket > div { display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px dashed #403d5350; }
.scene-ticket i { font-style:normal; font-size:7px; letter-spacing:2px; }
.scene-chip { position:absolute; left:132px; bottom:18px; display:flex; gap:10px; align-items:center; border:1px solid #c7bafa29; background:#373045c9; backdrop-filter:blur(12px); padding:11px 16px 11px 11px; border-radius:10px; box-shadow:0 14px 24px #18112d44; transform:rotate(-5deg); z-index:4; }
.scene-chip > span { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; color:#d8b8ff; background:#af87e425; }
.scene-chip b { display:block; font-size:10px; font-weight:500; }
.scene-chip small { display:block; color:#b1a2c6; font-size:8px; margin-top:4px; }
.scene-star { position:absolute; color:#d5beff; }
.star-one { top:33px; left:74px; font-size:21px; animation:twinkle 4s infinite; }
.star-two { right:27px; bottom:52px; font-size:17px; animation:twinkle 4s -2s infinite; }
.star-three { right:9px; top:93px; font-size:23px; opacity:.5; }
@keyframes studio-float { 50% { translate:0 -12px; rotate:4deg; } }
@keyframes orbit-breathe { 50% { transform:rotate(-20deg) scale(1.05); opacity:.5; } }
@keyframes twinkle { 50% { opacity:.35; scale:.75; } }
.benefit-strip { display:flex; justify-content:space-between; gap:18px; padding:18px 3px 22px; font-size:10px; color:#8f98af; }
.benefit-strip > span { display:flex; align-items:center; gap:7px; }
.benefit-strip b { color:#c0c7d6; font-weight:500; }
.benefit-strip .ic { width:14px; height:14px; color:#aea0cf; }
.benefit-strip .strip-signature { font-size:9px; color:#626e88; }
.studio-promos { grid-template-columns:1fr 1fr; gap:16px; }
.studio-promos .promo { padding:20px; border-radius:12px; gap:16px; background:#171b28; }
.studio-promos .promo::before { background:radial-gradient(ellipse at 0 100%,color-mix(in srgb,var(--pc) 7%,transparent),transparent 75%); }
.studio-promos .pi { width:43px; height:46px; border-radius:12px; background:color-mix(in srgb,var(--pc) 8%,var(--panel)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc) 14%,transparent); transform:rotate(-7deg); }
.studio-promos .pi .ic { width:24px; height:24px; }
.studio-promos small { display:block; font-size:8px; color:var(--pc); letter-spacing:1px; margin-bottom:7px; }
.studio-promos b { font-family:var(--display); font-size:15px; font-weight:500; letter-spacing:-.2px; margin-bottom:5px; }
.studio-promos span { font-size:10px; }
.studio-promos .go { width:17px; height:17px; }
.game-library { margin-top:35px; scroll-margin-top:25px; }
.library-head { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.library-head h2 { display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:500; font-size:26px; letter-spacing:-.7px; margin:7px 0 0; }
.library-head .count { display:grid; place-items:center; min-width:25px; height:23px; border-radius:6px; background:#222638; font-family:var(--font); color:#9ca6be; font-size:10px; letter-spacing:0; }
.game-search { display:flex; align-items:center; gap:9px; height:39px; width:240px; border:1px solid var(--line); background:#141824; border-radius:8px; padding:0 11px; color:#75809b; transition:border-color .2s,box-shadow .2s; }
.game-search:focus-within { border-color:#a999ef99; box-shadow:0 0 0 3px #a999ef10; }
.game-search input { width:100%; min-width:0; background:none; border:0; outline:none; font-size:11px; }
.game-search input::placeholder { color:#76819a; }
.game-search .ic { width:17px; height:17px; }
.game-search kbd { font-size:10px; background:#232838; border:1px solid var(--line); padding:2px 5px; border-radius:4px; }
.library-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:23px 0 18px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.category-tabs { display:flex; flex-wrap:wrap; gap:5px; }
.category-tab { display:flex; align-items:center; gap:7px; white-space:nowrap; padding:9px 12px; border:1px solid transparent; border-radius:7px; color:#8e98b1; font-size:10px; font-weight:500; transition:background .2s,color .2s,border-color .2s; }
.category-tab .ic { width:14px; height:14px; }
.category-tab:hover { background:#a894f50a; color:#ded7f2; }
.category-tab.selected { background:#a894f516; color:#c8b8ff; border-color:#a894f526; }
.library-count { color:#737f99; font-size:10px; white-space:nowrap; }
.library-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.studio-card { aspect-ratio: .72; padding:15px; border-radius:12px; will-change:auto; background:#191d2c; box-shadow:inset 0 0 0 1px #ffffff0b,0 6px 15px #00000014; }
.studio-card .gc-bg { background:radial-gradient(ellipse at 50% 33%,color-mix(in srgb,var(--gc) 20%,#202032),transparent 80%),linear-gradient(145deg,color-mix(in srgb,var(--gc) 10%,#171b29),#151824); }
.studio-card .gc-bg::before { background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--gc) 12%,transparent),transparent 55%); }
.studio-card .gc-bg::after { opacity:.075; background-size:16px 16px; }
.studio-card::after { background:linear-gradient(transparent 55%,#0f122ba8); }
.gc-watermark { position:absolute; top:19%; left:50%; transform:translateX(-50%); font-family:var(--display); text-transform:uppercase; font-size:41px; font-weight:900; letter-spacing:-1.5px; white-space:nowrap; color:transparent; -webkit-text-stroke:1px color-mix(in srgb,var(--gc) 13%,transparent); z-index:-1; }
.gc-top { position:absolute; top:12px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; gap:4px; }
.gc-top > span { display:flex; align-items:center; gap:3px; font-size:6px; font-weight:600; letter-spacing:1.1px; color:#d7d9e180; }
.gc-top .ic { width:12px; height:12px; opacity:.7; }
.gc-top i { font-size:5px; letter-spacing:.6px; font-style:normal; color:#edd2bf; padding:3px 4px; background:#dbba9612; border-radius:3px; }
.studio-card .gc-art { width:75%; top:46%; aspect-ratio:1; filter:none; }
.studio-card .gc-art .studio-object { position:absolute; inset:7%; width:86%; height:86%; filter:drop-shadow(0 13px 8px #07091970); transition:filter .4s; }
.art-orbit { position:absolute; inset:8%; border:1px solid color-mix(in srgb,var(--gc) 16%,transparent); border-radius:50%; transform:rotateX(50deg) rotate(-25deg); }
.art-shadow { position:absolute; width:65%; height:15%; background:#060a21; opacity:.35; border-radius:50%; filter:blur(7px); bottom:2%; left:18%; }
.art-spark { position:absolute; color:color-mix(in srgb,var(--gc) 65%,white); font-size:13px; opacity:.6; }
.art-spark.s1 { right:0; top:15%; }
.art-spark.s2 { left:0; bottom:20%; font-size:11px; }
.gc-label { padding-right:10px; }
.studio-card .name { font-size:18px; font-weight:600; letter-spacing:-.45px; text-shadow:none; }
.studio-card .sub { text-transform:none; font-size:8px; font-weight:400; color:#a4abc1; letter-spacing:.2px; margin:7px 0 0; }
.studio-card .gc-play { width:26px; height:26px; bottom:17px; right:10px; background:#c6b7ff; color:#281f44; }
.studio-card .gc-play .ic { fill:none; width:14px; height:14px; margin:0; }
.studio-card:hover,.studio-card:focus-visible { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gc) 40%,transparent),0 16px 32px #00000044; }
.studio-card:focus-visible .gc-play { transform:scale(1); }
.studio-card:focus-visible .gc-art,.studio-card:hover .gc-art { transform:translate(-50%,-54%) rotate(-5deg) scale(1.08); }
.studio-card:hover .art-spark { animation:twinkle 2s infinite; }
.search-empty { padding:40px 20px; text-align:center; border:1px dashed var(--line2); border-radius:12px; color:var(--muted); }
.search-empty > .ic { width:30px; height:30px; color:var(--accent); }
.search-empty h3 { color:var(--text); font-weight:500; }
.search-empty p { font-size:12px; }
.search-empty .btn { margin-top:10px; font-size:12px; }
.lobby-footer { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-top:34px; padding-top:23px; border-top:1px solid var(--line); }
.footer-brand { display:flex; gap:6px; align-items:center; }
.footer-brand > .ic { width:24px; height:24px; }
.footer-brand b { font-family:var(--display); font-size:20px; font-weight:500; letter-spacing:-.7px; }
.footer-brand span { margin-left:12px; font-size:9px; color:#707b96; }
.lobby-footer p { color:#707b96; font-size:9px; max-width:230px; text-align:right; line-height:1.6; }
.bets-wrap { max-width:1510px; padding:0 38px 35px; }
.bets-wrap .section-title { font-size:21px; font-weight:500; letter-spacing:-.5px; }
.bets-tabs { flex-wrap:wrap; }
.bets-tabs .seg { background:#151925; }
.bets-tabs .live-dot { margin-left:auto; font-size:9px; letter-spacing:1px; color:#95bfae; }
.live-dot::before { width:5px; height:5px; background:#93c4a9; }
.bets-card { overflow:hidden; border-radius:12px; background:#141824; }
table.bets th { font-size:9px; padding:15px 19px; font-weight:500; color:#7f8aa3; }
table.bets td { font-size:11px; padding:12px 19px; font-weight:500; border-color:#c5cffa07; }
table.bets tbody tr:nth-child(even) { background:#ffffff01; }
.game { border-radius:16px; background:#141925; box-shadow:0 22px 50px #00000020,inset 0 0 0 1px var(--line); }
.game .panel { background:#1a2030; }
.game-head { padding-bottom:6px; }
.game-head h1 { font-size:30px; font-weight:600; }
.gh-icon { border-radius:12px; }
.gh-icon .ic { animation:none; }
.game-head .tag { color:#c2b2fb; background:#b396ff0b; box-shadow:inset 0 0 0 1px #b396ff20; font-size:9px; }
.stage { background:radial-gradient(ellipse at 50% 0%,#9d8ae50d,transparent 70%); }
.btn { border-radius:8px; font-size:12px; }
.input-wrap,.profit-box { border-radius:8px; }
.page-title { font-weight:600; letter-spacing:-.8px; }
.modal { border:1px solid var(--line2); background:#181d2b; box-shadow:0 40px 140px #0009; }
.welcome h2 { font-family:var(--display); font-weight:600; letter-spacing:-.6px; }
.splash-logo::before,.splash-logo::after { border-width:1px; border-color:#b09afa33; }
.splash-word { text-transform:lowercase; letter-spacing:-1px; }
.splash-word b { color:inherit; background:none; }
.skip-link { position:fixed; top:-70px; left:50%; z-index:1200; padding:12px 20px; background:#c1b0ff; color:#171127; border-radius:8px; }
.skip-link:focus { top:10px; }
@media (min-width:1600px) { .lobby-hero-copy { padding:46px; } .hero-scene { right:55px; top:16px; scale:1.08; } .lobby-hero { min-height:385px; } }
@media (max-width:1250px) { :root { --sidebar:204px; } .view { padding:26px; } .bets-wrap { padding-left:26px; padding-right:26px; } .topbar { padding:0 24px; } .library-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .hero-scene { right:-50px; scale:.87; transform-origin:right center; } .lobby-hero-copy { width:65%; padding:32px; } .lobby-hero h2 { font-size:55px; } .strip-signature { display:none!important; } .hero-reward-link { font-size:9px; } .hero-actions { gap:12px!important; } .studio-promos .promo { padding:16px; gap:10px; } .studio-promos b { font-size:13px; } .studio-promos span { font-size:9px; } .topbar-context { gap:17px; } }
@media (max-width:1050px) { .topbar-context a:last-child { display:none; } .hero-scene { right:-72px; scale:.78; } .hero-reward-link { display:none; } .lobby-hero-copy { width:70%; } .lobby-hero { min-height:345px; } .studio-promos .pi { width:34px; height:39px; } .category-tab { padding:8px; font-size:9px; } .category-tabs { gap:2px; } .library-count { display:none; } }
@media (max-width:900px) { :root { --topbar:66px; --sidebar:224px; } .topbar { padding:0 20px; gap:8px; } .topbar-context { display:none; } .sidebar { background:#11141ffa; } .view { padding:24px; } .lobby-heading h1 { font-size:24px; } .hero-scene { right:0; scale:.9; } .lobby-hero-copy { width:65%; } .lobby-hero h2 { font-size:54px; } .hero-reward-link { display:flex; } .lobby-hero { min-height:355px; } .library-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; } .studio-promos b { font-size:14px; } .category-tab { font-size:10px; padding:9px 11px; } .bets-wrap { padding-left:24px; padding-right:24px; } }
@media (max-width:700px) { .lobby-heading { margin-bottom:18px; } .lobby-heading h1 { font-size:21px; } .free-pill { font-size:8px; padding:6px 8px; } .hero-scene { right:-55px; opacity:.8; scale:.74; transform-origin:right center; } .lobby-hero-copy { width:75%; padding:30px 25px; } .lobby-hero h2 { font-size:49px; } .lobby-hero p { font-size:11px; max-width:265px; } .hero-reward-link { display:none; } .hero-caption { font-size:8px; } .hero-edition { display:none; } .benefit-strip { justify-content:space-around; font-size:9px; gap:10px; } .benefit-strip > span:nth-child(3) { display:none; } .studio-promos { gap:10px; } .studio-promos .promo { padding:15px; align-items:flex-start; flex-direction:column; gap:12px; } .studio-promos .pi { width:32px; height:34px; } .studio-promos .pi .ic { width:20px; height:20px; } .studio-promos small { font-size:7px; letter-spacing:.7px; } .studio-promos b { font-size:14px; line-height:1.35; } .studio-promos span { font-size:9px; line-height:1.5; display:block; } .studio-promos .go { position:absolute; right:15px; top:20px; } .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .game-search { width:190px; } .library-head h2 { font-size:24px; } .lobby-footer { align-items:flex-start; } .footer-brand span { display:none; } }
@media (max-width:480px) { :root { --topbar:62px; } .view { padding:20px 16px; } .topbar { padding:0 10px; gap:3px; } .top-btn { padding:0 8px; } .wallet .bal { min-width:0; padding:0 7px; font-size:12px; height:32px; } .wallet .refill-btn { height:32px; padding:0 9px; } .wallet .refill-btn.waiting span { font-size:9px; } .level-chip { padding:0 5px; background:transparent; } .level-chip .rank-badge { width:24px; } .menu-btn { width:33px; } .lobby-heading .eyebrow { font-size:7px; letter-spacing:1.6px; } .lobby-heading h1 { font-size:20px; letter-spacing:-.4px; } .free-pill { padding:0; border:0; background:none; font-size:0; gap:0; } .free-pill i { width:6px; height:6px; } .lobby-hero { min-height:340px; border-radius:14px; } .lobby-hero-copy { width:100%; padding:27px 22px; } .lobby-hero h2 { font-size:48px; margin-top:22px; } .hero-tag { font-size:7px; letter-spacing:1.2px; } .lobby-hero p { font-size:10px; max-width:230px; } .hero-scene { opacity:.45; scale:.58; right:-101px; top:48px; } .scene-ticket,.scene-chip,.scene-gem { display:none; } .scene-dice { top:91px; } .scene-coin { top:25px; right:92px; } .scene-ring { opacity:.5; } .hero-caption { margin-top:18px; } .lobby-hero .btn { height:40px; font-size:10px; } .benefit-strip { padding:16px 0 20px; font-size:8px; gap:5px; } .benefit-strip .ic { width:12px; height:12px; } .studio-promos .promo { padding:14px; } .game-library { margin-top:28px; } .library-head { flex-wrap:wrap; gap:17px; } .library-head .eyebrow { font-size:8px; } .game-search { width:100%; height:41px; } .game-search input { font-size:12px; } .library-toolbar { margin:14px 0; padding-bottom:12px; } .category-tabs { gap:5px; } .category-tab { padding:8px 10px; font-size:9px; } .category-tab .ic { width:12px; height:12px; } .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .studio-card { aspect-ratio:.79; padding:15px; } .studio-card .name { font-size:19px; } .studio-card .sub { font-size:9px; } .gc-top > span { font-size:6px; } .gc-top i { font-size:6px; } .lobby-footer { margin-top:24px; gap:15px; } .lobby-footer p { font-size:8px; max-width:185px; } .bets-wrap { padding:0 16px 26px; } table.bets td,table.bets th { padding:12px 10px; font-size:10px; } .game-head h1 { font-size:25px; } }
@media (hover:none) { .studio-card .gc-play { transform:scale(1); width:23px; height:23px; opacity:.8; } .gc-label { padding-right:18px; } }
@media (min-width:481px) and (max-width:600px) { .hero-scene { right:-96px; scale:.64; opacity:.35; } .lobby-hero-copy { width:100%; } }
@media (prefers-reduced-motion:reduce) { .content { scroll-behavior:auto; } .scene-dice,.scene-coin,.scene-gem,.scene-ring,.scene-star { animation:none!important; } .reveal { opacity:1; transform:none; } }