TypeScript 97.6%
SQL 1.4%
JavaScript 0.5%
1@import "tailwindcss";23/* ------------------------------------------------------------------------4 Spinza design system — dark luxury. Deep charcoal, subtle metallic5 surfaces, high contrast, restrained accent. Game artwork supplies colour.6 ------------------------------------------------------------------------ */78@theme {9 --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;10 --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;1112 --color-bg: #07080c;13 --color-bg-1: #0c0e14;14 --color-bg-2: #12141c;15 --color-bg-3: #191c26;16 --color-surface: rgb(255 255 255 / 0.035);17 --color-surface-2: rgb(255 255 255 / 0.06);18 --color-surface-3: rgb(255 255 255 / 0.09);19 --color-line: rgb(255 255 255 / 0.08);20 --color-line-2: rgb(255 255 255 / 0.14);21 --color-fg: #f3f4f8;22 --color-fg-2: #b6bac6;23 --color-fg-3: #7b8090;24 --color-fg-4: #4f5464;25 --color-accent: #c9a961;26 --color-accent-2: #e8cf8f;27 --color-accent-soft: rgb(201 169 97 / 0.14);28 --color-credit: #ffd66b;29 --color-success: #3ddc97;30 --color-danger: #ff5c7a;31 --color-info: #6ea8ff;3233 --radius-xs: 6px;34 --radius-sm: 10px;35 --radius-md: 14px;36 --radius-lg: 20px;37 --radius-xl: 28px;3839 --shadow-card: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 50px -30px rgb(0 0 0 / 0.9);40 --shadow-glow: 0 0 0 1px rgb(201 169 97 / 0.25), 0 10px 40px -10px rgb(201 169 97 / 0.35);4142 --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);43 --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);4445 --animate-fade-in: fade-in 0.35s var(--ease-out-expo) both;46 --animate-fade-up: fade-up 0.5s var(--ease-out-expo) both;47 --animate-shimmer: shimmer 2.6s linear infinite;48 --animate-pulse-soft: pulse-soft 2.4s ease-in-out infinite;49 --animate-float: float 6s ease-in-out infinite;50 --animate-spin-slow: spin 14s linear infinite;5152 @keyframes fade-in {53 from { opacity: 0; }54 to { opacity: 1; }55 }56 @keyframes fade-up {57 from { opacity: 0; transform: translateY(10px); }58 to { opacity: 1; transform: translateY(0); }59 }60 @keyframes shimmer {61 from { background-position: -200% 0; }62 to { background-position: 200% 0; }63 }64 @keyframes pulse-soft {65 0%, 100% { opacity: 1; }66 50% { opacity: 0.55; }67 }68 @keyframes float {69 0%, 100% { transform: translateY(0); }70 50% { transform: translateY(-10px); }71 }72}7374:root {75 color-scheme: dark;76 --safe-top: env(safe-area-inset-top, 0px);77 --safe-bottom: env(safe-area-inset-bottom, 0px);78 --z-nav: 40;79 --z-sheet: 60;80 --z-modal: 80;81 --z-toast: 100;82}8384html {85 background: var(--color-bg);86 -webkit-tap-highlight-color: transparent;87 text-size-adjust: 100%;88}8990body {91 @apply bg-bg text-fg font-sans antialiased;92 min-height: 100dvh;93 overscroll-behavior-y: none;94 font-feature-settings: "ss01", "cv11", "tnum";95}9697::selection {98 background: rgb(201 169 97 / 0.35);99}100101/* Prevent iOS zoom on inputs. */102input,103select,104textarea {105 font-size: 16px;106}107108@media (prefers-reduced-motion: reduce) {109 *,110 *::before,111 *::after {112 animation-duration: 0.01ms !important;113 animation-iteration-count: 1 !important;114 transition-duration: 0.01ms !important;115 }116}117118/* ----------------------------------------------------------------- utils */119120@utility surface {121 background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.02));122 border: 1px solid var(--color-line);123 box-shadow: var(--shadow-card);124}125126@utility surface-2 {127 background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.035));128 border: 1px solid var(--color-line-2);129 box-shadow: var(--shadow-card);130}131132@utility metal {133 background:134 linear-gradient(135deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0.04) 60%, rgb(255 255 255 / 0) 100%),135 linear-gradient(180deg, #1a1d27, #0e1017);136 border: 1px solid rgb(255 255 255 / 0.12);137}138139@utility text-credit {140 color: var(--color-credit);141 font-variant-numeric: tabular-nums;142}143144@utility tabular {145 font-variant-numeric: tabular-nums;146}147148@utility hairline {149 border-color: var(--color-line);150}151152@utility scrollbar-none {153 scrollbar-width: none;154 &::-webkit-scrollbar {155 display: none;156 }157}158159@utility snap-row {160 display: flex;161 gap: 0.75rem;162 overflow-x: auto;163 scroll-snap-type: x mandatory;164 padding-bottom: 4px;165 scrollbar-width: none;166 &::-webkit-scrollbar {167 display: none;168 }169 & > * {170 scroll-snap-align: start;171 flex: 0 0 auto;172 }173}174175@utility shimmer-text {176 background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 40%, #fff7dc 50%, var(--color-accent-2) 60%, var(--color-accent) 100%);177 background-size: 200% auto;178 -webkit-background-clip: text;179 background-clip: text;180 color: transparent;181 animation: shimmer 3s linear infinite;182}183184@utility glass {185 background: rgb(12 14 20 / 0.72);186 backdrop-filter: blur(18px) saturate(1.3);187 -webkit-backdrop-filter: blur(18px) saturate(1.3);188 border: 1px solid var(--color-line);189}190191@utility tap {192 min-height: 44px;193 min-width: 44px;194}195196@utility page {197 width: 100%;198 max-width: 1320px;199 margin-inline: auto;200 padding-inline: 1rem;201 @media (min-width: 640px) {202 padding-inline: 1.5rem;203 }204 @media (min-width: 1024px) {205 padding-inline: 2rem;206 }207}208209@utility eyebrow {210 font-size: 0.6875rem;211 letter-spacing: 0.18em;212 text-transform: uppercase;213 color: var(--color-fg-3);214 font-weight: 600;215}216217@utility focus-ring {218 outline: none;219 &:focus-visible {220 box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);221 }222}223224/* game canvas fills its container */225.spz-canvas canvas {226 display: block;227 width: 100% !important;228 height: 100% !important;229}230