@font-face { font-family: Pixel; src: url('../../assets/fonts/press-start-2p.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Space; src: url('../../assets/fonts/space-grotesk-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Space; src: url('../../assets/fonts/space-grotesk-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Archivo; src: url('../../assets/fonts/archivo-black.ttf') format('truetype'); font-display: swap; }
:root { --ink: #f5edff; --dim: #c1b1d2; --gold: #ff91df; --lime: #baff93; }
body { font-family: Space, sans-serif; background: linear-gradient(90deg, #10091deb, #230a399e), linear-gradient(0deg, #10091d, transparent 70%), url('../../assets/images/pixelitos-voxel-night.png') center top / cover fixed; }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .04; background: repeating-linear-gradient(transparent 0 3px, #000 3px 4px); }
.shell { max-width: 1280px; padding: 28px 46px; }
nav { border-color: #b869d34d; padding-bottom: 25px; }
.brand { font: 16px/1.5 Pixel, monospace; gap: 12px; text-shadow: 2px 2px #a936ba; }
.brand-mark { background: transparent; clip-path: none; width: 34px; height: 34px; }
.brand-mark img { width: 100%; height: 100%; image-rendering: pixelated; }
.brand .arcade-label { font: 11px/1.5 Space, sans-serif; letter-spacing: 1px; text-shadow: none; }
.mode { color: #baffdb; border-color: #86d4bf70; background: #12323190; }
main { gap: 30px; padding-top: 35px; }
.eyebrow { color: #a6fff0; font-size: 10px; letter-spacing: 1.5px; }
h1 { font: 400 clamp(33px, 4.2vw, 54px)/1.2 Archivo, sans-serif; letter-spacing: -2px; background: linear-gradient(100deg, #e4fffb, #f8bfff, #ff81d5); background-clip: text; -webkit-background-clip: text; color: transparent; }
.intro { color: #d6c3e7; }
.cabinet { background: linear-gradient(135deg, #ce70c76b, #602ca78a 50%, #49a6a552); border: 1px solid #eda4f1; border-radius: 28px; box-shadow: 0 20px 70px #08021f90, 0 0 35px #db51dc25; }
.marquee { background: radial-gradient(ellipse at 50% 100%, #742f9244, transparent 70%), #190e2b; border-color: #ca88e24d; border-radius: 17px 17px 0 0; }
.marquee small { color: #dabbef; font-size: 9px; letter-spacing: 3px; }
.marquee::before, .marquee::after { color: #baff93; text-shadow: 0 0 15px #baff9370; }
.sevens { font-family: Archivo, sans-serif; color: #f7bcff; text-shadow: 3px 4px #713c98, 0 0 24px #ff7beb50; font-size: 78px; }
.reel-area { background: #160b28f5; border-color: #ca88e24d; }
.reel { border-color: #a96fc5; border-radius: 15px; background: linear-gradient(#dac4ef, #f8edff 35%, #f8edff 65%, #c5b4de); }
.reel::after { box-shadow: inset 0 17px 19px #47235b25, inset 0 -17px 19px #47235b25; }
.symbol[data-id="seven"] { color: #a73c9b; font-family: Archivo, sans-serif; text-shadow: 2px 2px #e693d6; }
.symbol[data-id="star"] { color: #9751bd; }
.symbol[data-id="pixel"] { width: 72px; height: 72px; background: url('../../assets/pixelitos/4494.png') center / cover; image-rendering: pixelated; clip-path: none; border-radius: 8px; border: 1px solid #ae6dc5; }
.symbol[data-id="pixel"]::before, .symbol[data-id="pixel"]::after { display: none; }
.payline { background: #e68deb50; }
.status { color: #d8cae8; }
.status.win { color: #baff93; text-shadow: 0 0 14px #95ef7b30; }
.controls { background: #241138f5; border-color: #ca88e24d; border-radius: 0 0 17px 17px; }
.meter { background: #170c29; border-color: #684080; border-radius: 12px; }
.meter strong { color: #f6e8ff; }
.bet { border-color: #9063a5; background: #352044; color: #f0dcff; border-radius: 10px; }
.bet[aria-pressed="true"] { color: #23202c; background: #baff93; }
.spin { border-radius: 30px; background: linear-gradient(115deg, #ffb0e6, #ca9cff); color: #24102f; box-shadow: 0 4px #71458d, 0 0 25px #fa74d630; font: 700 16px Space, sans-serif; }
.spin:hover:not(:disabled) { background: linear-gradient(115deg, #ffd0ef, #e5c6ff); }
.spin:active:not(:disabled) { box-shadow: 0 1px #71458d; }
.side-card { background: linear-gradient(145deg, #41224bc9, #19102ced); border-color: #a377bb70; border-radius: 22px; box-shadow: 0 8px 30px #08021f40; }
h2 { color: #f9edff; font-size: 18px; }
.pay-symbol { color: #e8d8f4; }
.pay-row, .history li { border-color: #9e62ba25; }
.pay-row b { color: #edafff; }
.pay-icon { color: #ffa0e6; }
.rtp b, .reset, .history .positive { color: #baff93; }
.reset { line-height: 1.6; }
footer { color: #b7a0cd; border-top: 1px solid #b869d32d; margin-top: 24px; padding-top: 20px; }
footer a { color: #acffe9; }
@media(max-width:850px) { .shell { padding-inline: 30px; } .brand { font-size: 14px; } }
@media(max-width:560px) { .shell { padding: 22px 16px; } .brand { font-size: 12px; gap: 9px; } .brand-mark { width: 29px; height: 29px; } .brand .arcade-label { display: none; } .mode { font-size: 8px; letter-spacing: .7px; padding: 7px 9px; } main { padding-top: 27px; } h1 { font-size: 35px; letter-spacing: -1.5px; } .intro { font-size: 13px; } .cabinet { border-radius: 22px; } .sevens { font-size: 70px; } .marquee small { font-size: 8px; letter-spacing: 2px; } .marquee::before { left: 16px; } .marquee::after { right: 16px; } .meter strong { font-size: 23px; } .meter small, .bet-label { font-size: 9px; letter-spacing: 1px; } .spin { min-width: 123px; height: 51px; font-size: 14px; } .symbol[data-id="seven"] { font-size: 63px; } .symbol[data-id="pixel"] { width: 65px; height: 65px; } .demo-note { font-size: 11px; line-height: 1.8; } }