@font-face { font-family: Fredoka; src: url('./assets/fonts/fredoka-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('./assets/fonts/chakra-petch-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root { color-scheme: dark; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #f5f7ff; background: #0c0d16; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; background: radial-gradient(ellipse at 30% 30%,#3858ab18,transparent 62%),#0c0d16; }
.home-header { height: 84px; max-width: 1280px; margin: auto; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #ffffff12; }
.brand { display: flex; align-items: center; gap: 9px; font: 700 24px/1 'Chakra Petch',system-ui; letter-spacing: -.4px; }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand rect { fill: #6ae6ff; }
.brand path { stroke: #182a3c; fill: none; stroke-width: 3.5; stroke-linecap: round; }
.demo-tag { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: #b3bfda; }
main { max-width: 1200px; padding: clamp(34px,9vh,100px) 32px 60px; margin: auto; }
h1 { font: 700 clamp(28px,3.4vw,42px)/1.15 'Chakra Petch',system-ui; letter-spacing: -.6px; margin: 0 0 30px; }
.game-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.game-card { --card-accent: #6ae6ff; --card-ink: #122a3b; --card-display: 'Chakra Petch',system-ui; display: block; overflow: hidden; border: 1px solid #404c70; border-radius: 14px; background: #171c31; color: inherit; text-decoration: none; box-shadow: 0 22px 45px #0003; transition: transform .2s,border-color .2s,box-shadow .2s; }
.game-card:hover { transform: translateY(-5px); border-color: var(--card-accent); box-shadow: 0 28px 50px #0005; }
.game-card:focus-visible { outline: 3px solid var(--card-accent); outline-offset: 5px; }
.cover { position: relative; aspect-ratio: 1.2; overflow: hidden; }
.edition { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 7px 10px; border: 1px solid #ffffff22; border-radius: 5px; background: #080b16ba; color: var(--card-accent); font-size: 9px; font-weight: 700; letter-spacing: 1.6px; }
.electric-cover,.black-cover { display: flex; flex-direction: column; justify-content: center; gap: 42px; padding: 55px 18px 28px; }
.electric-cover { background: linear-gradient(#8799f20a 1px,transparent 1px),linear-gradient(90deg,#8799f20a 1px,transparent 1px),radial-gradient(ellipse at 30% 45%,#6ae6ff15,transparent 70%),#10132b; background-size: 36px 36px,36px 36px,auto,auto; }
.classic-halo { position: absolute; width: 80%; aspect-ratio: 1; left: 10%; top: 10%; border: 1px solid #6ae6ff15; border-radius: 8px; transform: rotate(15deg); }
.classic-halo::after { content: ''; position: absolute; inset: 12%; border: 1px solid #6ae6ff15; border-radius: inherit; }
.cover-numbers { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cover-numbers strong,.v2-multiplier { color: #adff9b; font: 700 clamp(42px,4.4vw,58px)/1 var(--card-display); letter-spacing: -2px; text-shadow: 0 4px 0 #080e22; white-space: nowrap; }
.mini-number { display: grid; place-items: center; flex: none; width: 45px; height: 68px; border: 1px solid #6ae6ff55; border-radius: 5px; color: #6ae6ff; font: 700 30px var(--card-display); background: #ffffff03; }
.mini-number.muted { color: #a884b3; border-color: #ff91ae40; }
.mini-ruler { position: relative; display: flex; justify-content: center; align-items: end; gap: 24px; color: #8795b9; font-size: 10px; height: 28px; padding-top: 20px; background: repeating-linear-gradient(90deg,transparent 0 10px,#8795b94d 10px 11px,transparent 11px 16px) center top/100% 12px no-repeat; }
.mini-ruler::after { content: ''; position: absolute; left: 50%; top: -9px; height: 27px; width: 2px; background: var(--card-accent); }
.black-card { --card-accent: #ffe779; --card-ink: #242018; --card-display: Fredoka,system-ui; border-color: #383a43; background: #191b21; }
.black-cover { background: radial-gradient(ellipse,#29271f35,transparent 80%),repeating-conic-gradient(from 2deg at 50% 70%,#d9d0a609 0deg 10deg,transparent 10deg 20deg),#0c0d10; }
.black-card .classic-halo { border-color: #ffe77913; border-radius: 50%; transform: none; }
.black-card .classic-halo::after { border-color: #ffe77913; }
.black-card .cover-numbers strong { color: #ffd43b; text-shadow: 0 4px 0 #282314; }
.black-card .mini-number { color: #ffe779; border-color: #ffe77940; border-radius: 12px; }
.black-card .mini-number.muted { color: #7e818c; border-color: #ffffff22; }
.past-card { --card-accent: #d8bc79; --card-ink: #242018; border-color: #3b3b42; background: #17171b; }
.past-card .black-cover { background: radial-gradient(ellipse,#d8bc7910,transparent 80%),#0a0a0b; }
.past-card .cover-numbers strong { color: #d8bc79; }
.past-card .mini-number { color: #e7e7ed; border-color: #ffffff30; }
.past-card .mini-number.muted { color: #7b7b84; border-color: #ffffff18; }
.v2-card { --card-accent: #f0cf74; --card-ink: #233822; --card-display: Fredoka,system-ui; border-color: #b398505c; background: #15281e; }
.v2-cover { background: url('./assets/v2/golden-arena.webp') center 40% / cover no-repeat; }
.v2-multiplier { position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); color: #ffe398; text-shadow: 0 4px 0 #75531b,0 7px 0 #0b160e; }
.card-footer { min-height: 102px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #ffffff12; }
h2 { margin: 0; font: 700 22px/1.05 var(--card-display); letter-spacing: -.3px; }
h2 span { display: block; margin-top: 7px; color: #b3bfda; font: 500 12px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing: 0; }
.play-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px; border-radius: 8px; background: var(--card-accent); color: var(--card-ink); font: 700 15px var(--card-display); }
.play-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) and (min-width: 621px) { .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } .cover { aspect-ratio: 1.5; } .cover-numbers strong,.v2-multiplier { font-size: 54px; } }
@media (max-width: 620px) {
  .home-header { height: 72px; padding: 16px 20px; } .brand { font-size: 20px; } .demo-tag { font-size: 8px; letter-spacing: 1px; }
  main { padding: 30px 20px 40px; max-width: 460px; } h1 { margin-bottom: 24px; } .game-grid { grid-template-columns: 1fr; gap: 24px; }
  .cover { aspect-ratio: 1.7; } .cover-numbers strong,.v2-multiplier { font-size: clamp(46px,14vw,60px); } .electric-cover,.black-cover { gap: 28px; padding: 48px 16px 20px; }
  .mini-number { width: 43px; height: 58px; font-size: 28px; } .card-footer { min-height: 90px; } .edition { top: 14px; left: 14px; }
}
@media (max-width: 350px) { .home-header { padding: 16px; } .brand { font-size: 18px; } .demo-tag { font-size: 7px; } main { padding-left: 16px; padding-right: 16px; } .cover-numbers { gap: 8px; } .mini-number { width: 36px; } .cover-numbers strong { font-size: 44px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .game-card:hover { transform: none; } }