@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #10151b;
  --bg-soft: #171e25;
  --panel: #1a222a;
  --panel-light: #202a33;
  --line: #3a4852;
  --text: #f2f3e9;
  --muted: #a5b0b4;
  --lime: #d4ff4f;
  --lime-dark: #a5ce26;
  --blue: #9be3f2;
  --coral: #ff886d;
  --purple: #c9b6ff;
  --mono: "IBM Plex Mono", monospace;
  font-family: "IBM Plex Sans Thai", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(194, 220, 220, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194, 220, 220, .035) 1px, transparent 1px),
    radial-gradient(ellipse at 78% 8%, rgba(113, 168, 170, .12), transparent 33rem);
  background-size: 24px 24px, 24px 24px, auto;
  overflow-x: hidden;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.1; background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.3) 4px); mix-blend-mode:soft-light; }
button, input, textarea { font: inherit; }
button { cursor:pointer; }
.app-shell { width:min(1200px, calc(100% - 42px)); margin:0 auto; position:relative; }
.site-nav { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 0; border-bottom:1px solid #354149; }
.brand-mark { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font:700 13px var(--mono); letter-spacing:.04em; }
.brand-pixel { display:grid; place-items:center; width:34px; height:34px; background:var(--lime); color:#131a1b; font:700 12px var(--mono); clip-path:polygon(0 0,76% 0,76% 12%,100% 12%,100% 100%,24% 100%,24% 88%,0 88%); }
.brand-light { color:var(--lime); }
.nav-meta { display:flex; align-items:center; gap:20px; font:10px var(--mono); letter-spacing:.1em; color:#a7b4b7; }
.nav-status { display:flex; align-items:center; gap:8px; }
.nav-status i { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px var(--lime); animation:pulse 2s infinite; }
.nav-version { color:#64737b; }
.topbar { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:24px; min-height:390px; padding:42px 0 35px; position:relative; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { margin:0 0 16px; display:flex; align-items:center; gap:9px; color:var(--lime); font:600 10px var(--mono); letter-spacing:.12em; }
.eyebrow-square { width:8px; height:8px; display:inline-block; background:var(--lime); box-shadow:4px 4px 0 rgba(212,255,79,.18); }
h1 { margin:0; font:700 clamp(42px, 6.8vw, 84px)/.98 var(--mono); letter-spacing:-.075em; }
h1 span { color:var(--lime); text-shadow:4px 4px 0 rgba(212,255,79,.09); }
.subtitle { max-width:470px; margin:22px 0 0; color:#b3bec0; font-size:14px; line-height:1.9; }
.hero-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:26px; }
.hero-tags span { border:1px solid #3b4950; padding:7px 9px; color:#94a4a7; font:9px var(--mono); letter-spacing:.03em; background:#141b20; }
.hero-art { min-height:300px; position:relative; overflow:hidden; border:1px solid #46545a; background:#b3e8e9; box-shadow:8px 8px 0 #27333a; isolation:isolate; }
.hero-art::before { content:""; position:absolute; inset:0; opacity:.22; background:linear-gradient(135deg, transparent 45%, #fff 45% 47%, transparent 47%), repeating-linear-gradient(0deg, transparent 0 23px, rgba(20,47,52,.15) 24px); }
.art-grid { position:absolute; left:0; right:0; bottom:0; height:37%; z-index:-1; background:linear-gradient(180deg, transparent, rgba(19,61,67,.18)), repeating-linear-gradient(90deg, transparent 0 23px, rgba(23,60,65,.16) 24px), repeating-linear-gradient(0deg, transparent 0 23px, rgba(23,60,65,.16) 24px); transform:perspective(120px) rotateX(20deg) scale(1.4); transform-origin:bottom; }
.pixel-sun { position:absolute; width:82px; height:82px; right:18%; top:18%; background:#d6ff58; box-shadow:0 0 0 10px rgba(214,255,88,.2), 0 0 60px rgba(214,255,88,.6); clip-path:polygon(25% 0,75% 0,75% 12%,88% 12%,88% 25%,100% 25%,100% 75%,88% 75%,88% 88%,75% 88%,75% 100%,25% 100%,25% 88%,12% 88%,12% 75%,0 75%,0 25%,12% 25%,12% 12%,25% 12%); animation:sunfloat 6s ease-in-out infinite; }
.pixel-cloud { position:absolute; height:25px; background:#f4fff1; filter:drop-shadow(0 5px 0 rgba(28,80,85,.1)); clip-path:polygon(0 35%,20% 35%,20% 0,55% 0,55% 18%,80% 18%,80% 35%,100% 35%,100% 100%,0 100%); }
.cloud-one { width:122px; left:10%; top:22%; animation:cloudmove 12s ease-in-out infinite alternate; }
.cloud-two { width:88px; right:8%; bottom:24%; transform:scale(.7); animation:cloudmove 9s ease-in-out infinite alternate-reverse; }
.pixel-plane { position:absolute; width:110px; height:40px; left:24%; top:42%; transform:rotate(-12deg); animation:planefly 7s ease-in-out infinite; }
.pixel-plane::before { content:""; position:absolute; inset:0; background:#253840; clip-path:polygon(0 42%,45% 42%,62% 0,76% 0,69% 42%,100% 42%,100% 58%,67% 58%,78% 100%,63% 100%,45% 58%,0 58%); }
.pixel-plane span { position:absolute; width:22px; height:7px; left:13px; top:9px; background:var(--coral); }
.pixel-gem { position:absolute; width:43px; height:51px; clip-path:polygon(25% 0,75% 0,100% 35%,50% 100%,0 35%); filter:drop-shadow(6px 7px 0 rgba(0,0,0,.15)); }
.gem-one { right:19%; bottom:17%; background:linear-gradient(135deg,#ff886d 0 35%,#e15f68 35% 65%,#a63758 65%); animation:gemfloat 5s ease-in-out infinite; }
.gem-two { left:15%; bottom:17%; width:28px; height:34px; background:linear-gradient(135deg,#c9b6ff 0 40%,#8f7dd9 40% 70%,#6557a4 70%); animation:gemfloat 4s ease-in-out infinite reverse; }
.art-label { position:absolute; z-index:2; padding:7px 9px; background:#1b2b31; color:#eaf4d5; font:9px var(--mono); letter-spacing:.08em; box-shadow:3px 3px 0 rgba(16,31,34,.2); }
.label-top { top:14px; left:14px; }
.label-bottom { bottom:13px; right:13px; }
.label-bottom b { color:var(--lime); font-weight:500; }
.local-badge { position:absolute; top:17px; right:0; display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #3a4a50; color:#b8c5c7; background:#151d22; font:9px var(--mono); letter-spacing:.05em; }
.dot { width:6px; height:6px; background:var(--lime); box-shadow:0 0 8px var(--lime); }
.ticker { overflow:hidden; margin:0 0 22px; border-block:1px solid #4b5b4b; background:var(--lime); color:#19211c; transform:rotate(-.7deg) scale(1.01); }
.ticker-track { display:flex; width:max-content; gap:38px; padding:10px 0; animation:marquee 28s linear infinite; font:700 10px var(--mono); letter-spacing:.1em; }
.ticker-track span { white-space:nowrap; }
main { display:grid; gap:18px; padding-bottom:35px; }
.panel { position:relative; overflow:hidden; border:1px solid #3b4951; border-radius:2px; padding:24px; background:rgba(25,34,42,.94); box-shadow:5px 5px 0 rgba(0,0,0,.16); transition:border-color .25s, transform .25s, box-shadow .25s; }
.panel::before { content:""; position:absolute; top:0; left:0; width:34px; height:3px; background:var(--lime); }
.panel:hover { border-color:#75857d; box-shadow:7px 7px 0 rgba(0,0,0,.23); transform:translateY(-2px); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.section-heading h2 { margin:0; font-size:20px; letter-spacing:-.03em; }
.section-heading .eyebrow { margin-bottom:7px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field { display:grid; gap:8px; margin-bottom:16px; color:#c9d1ce; font-size:13px; font-weight:500; }
.field input, .field textarea, .search-input { width:100%; border:1px solid #3b4b53; border-radius:2px; padding:12px 13px; outline:none; color:var(--text); background:#11181e; transition:border-color .2s, box-shadow .2s, background .2s; }
.field input:focus, .field textarea:focus, .search-input:focus { border-color:var(--lime); background:#141d21; box-shadow:4px 4px 0 rgba(212,255,79,.12); }
.field textarea { resize:vertical; min-height:150px; line-height:1.7; }
.input-suffix { display:flex; align-items:center; gap:10px; }
.input-suffix input { min-width:0; }
.input-suffix span { color:#95a4a6; font:10px var(--mono); white-space:nowrap; }
.hint { margin:2px 0 0; color:#98a7a7; font-size:12px; line-height:1.7; }
.button { border:1px solid transparent; border-radius:2px; padding:10px 15px; color:var(--text); font-weight:600; font-size:12px; transition:transform .18s, background .18s, color .18s, box-shadow .18s; }
.button:hover { transform:translate(-2px,-2px); box-shadow:3px 3px 0 rgba(0,0,0,.3); }
.button:active { transform:translate(0,0); box-shadow:none; }
.button-primary { color:#182019; background:var(--lime); border-color:var(--lime); }
.button-primary:hover { background:#e1ff86; }
.button-secondary { border-color:#4a5a61; background:#26333b; }
.button-secondary:hover { border-color:var(--blue); color:var(--blue); }
.button-ghost { border-color:#45535a; background:transparent; color:#c0ccca; }
.button-danger { color:#ffb1a1; border-color:#6b443e; background:#2b2426; }
.button-small { padding:7px 10px; font-size:11px; }
.form-actions { display:flex; gap:10px; flex-wrap:wrap; }
.status-text { color:var(--lime); font:10px var(--mono); }
.list-heading { align-items:flex-end; }
.list-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.search-input { width:200px; padding:9px 12px; font-size:12px; }
.empty-state { border:1px dashed #43535a; text-align:center; padding:42px 20px; color:#9eacad; background:rgba(10,16,20,.3); }
.empty-state h3 { margin:12px 0 4px; color:var(--text); font-size:16px; }
.empty-state p { margin:0; font-size:13px; }
.empty-icon { display:inline-grid; place-items:center; width:42px; height:42px; color:#182019; background:var(--lime); font:28px var(--mono); clip-path:polygon(0 0,78% 0,78% 12%,100% 12%,100% 100%,22% 100%,22% 88%,0 88%); }
.games-list { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; align-items:start; }
.game-card { border:1px solid #35454c; overflow:hidden; background:rgba(13,19,24,.62); transition:border-color .2s, transform .25s; animation:cardin .45s both; }
.game-card:hover { border-color:#82958b; transform:translateY(-2px); }
.game-card-head { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid #33424a; background:linear-gradient(90deg,rgba(212,255,79,.04),transparent 45%); }
.game-title-wrap { min-width:0; flex:1; }
.game-title-toggle { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.game-title { margin:0; font-size:14px; overflow-wrap:anywhere; line-height:1.45; }
.collapse-indicator { display:inline-grid; place-items:center; width:22px; height:22px; flex:0 0 22px; border:1px solid rgba(190,144,255,.42); color:#d8b7ff; font:16px/1 var(--mono); }
.game-title-toggle:hover .game-title { color:#d7ff7a; }
.game-price-content { display:block; }
.game-card.is-collapsed .game-price-content { display:none; }
.game-card.is-collapsed .game-card-head { border-bottom:0; }
.game-card-head { padding:12px; align-items:flex-start; flex-direction:column; }
.card-actions { width:100%; }
.card-actions .button { flex:1; min-width:0; padding:6px 5px; font-size:10px; white-space:nowrap; }
.comparison-grid { padding:9px; }
.text-box-head { padding:8px; font-size:9px; }
pre { padding:9px; font-size:11px; line-height:1.6; }
body[data-theme="light"] .collapse-indicator { color:#7542a0; border-color:#d6c4e5; }
body[data-theme="light"] .game-title-toggle:hover .game-title { color:#8246b1; }
.updated-at { margin:4px 0 0; color:#8e9e9f; font:10px var(--mono); }
.card-actions { display:flex; gap:7px; flex-shrink:0; }
.comparison-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:14px; }
.text-box { min-width:0; border:1px solid #34434a; background:#10171c; overflow:hidden; }
.calculated-box { border-color:#58634a; }
.text-box-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid #2e3b42; color:#aab7b6; font:10px var(--mono); }
.calculated-box .text-box-head { color:var(--lime); }
.text-copy { padding:4px 8px; border:1px solid #43534f; border-radius:1px; background:#1d292b; color:#dce7d6; font:10px var(--mono); transition:all .2s; }
.text-copy:hover { color:#172019; background:var(--lime); border-color:var(--lime); }
pre { margin:0; padding:13px; white-space:pre-wrap; overflow-wrap:anywhere; color:#c6d0ce; font:12px/1.75 var(--mono); min-height:48px; }
.calculated-output { color:#f1f5df; }
footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 26px; color:#71817f; font:9px var(--mono); letter-spacing:.04em; }
.footer-mark { color:var(--lime); font-weight:700; }
.toast { position:fixed; right:20px; bottom:20px; z-index:20; max-width:min(420px,calc(100vw - 40px)); padding:12px 16px; border:1px solid #7b9253; border-radius:2px; background:#202c25; color:#f3ffda; box-shadow:4px 4px 0 rgba(0,0,0,.35); font-size:13px; animation:toastin .25s ease-out; }
@keyframes pulse { 50% { opacity:.4; box-shadow:0 0 2px var(--lime); } }
@keyframes sunfloat { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-9px) rotate(4deg); } }
@keyframes cloudmove { from { translate:-8px 0; } to { translate:13px 4px; } }
@keyframes planefly { 0%,100% { translate:-3px 2px; } 50% { translate:12px -8px; } }
@keyframes gemfloat { 0%,100% { translate:0 0; } 50% { translate:0 -10px; } }
@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes cardin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:800px) {
  .app-shell { width:calc(100% - 26px); }
  .topbar { grid-template-columns:1fr; gap:24px; padding-top:65px; }
  .hero-art { min-height:260px; }
  .local-badge { top:15px; }
  .nav-meta { gap:9px; }
  .settings-grid, .comparison-grid { grid-template-columns:1fr; }
  .games-list { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .list-heading { align-items:stretch; flex-direction:column; }
  .list-tools { display:grid; grid-template-columns:1fr 1fr; }
  .search-input { width:100%; grid-column:1/-1; }
}
@media (max-width:480px) {
  .site-nav { padding:16px 0; }
  .nav-version { display:none; }
  .brand-mark { font-size:11px; }
  h1 { font-size:clamp(38px,12vw,56px); }
  .hero-tags span { font-size:8px; }
  .panel { padding:16px; }
  .section-heading { align-items:flex-start; }
  .games-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px; }
  .list-tools .button { padding-inline:7px; font-size:10px; }
  footer { flex-wrap:wrap; line-height:1.6; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* Motion pass: retro pixel-sky inspired by the reference video */
body {
  background-image:
    radial-gradient(circle at 12% 14%, rgba(154, 73, 255, .10), transparent 24rem),
    radial-gradient(circle at 88% 38%, rgba(255, 111, 103, .08), transparent 30rem),
    linear-gradient(rgba(194, 220, 220, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194, 220, 220, .028) 1px, transparent 1px);
  background-size: auto, auto, 24px 24px, 24px 24px;
  animation: ambient-shift 18s ease-in-out infinite alternate;
}
.hero-art {
  background: linear-gradient(180deg, #27105f 0%, #6420a3 35%, #c52fba 59%, #ff6a8b 76%, #ff9a55 100%);
  border-color: #8c62b8;
  box-shadow: 8px 8px 0 #21152f, 0 0 36px rgba(180, 65, 255, .14);
}
.hero-art::before {
  opacity: .48;
  background:
    radial-gradient(circle at 13% 17%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 31% 30%, #ffe8ff 0 1px, transparent 2px),
    radial-gradient(circle at 78% 13%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 88% 42%, #ffe8ff 0 1px, transparent 2px),
    radial-gradient(circle at 55% 23%, #fff 0 1px, transparent 2px),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(20, 0, 50, .10) 6px 7px);
  animation: starfield 7s steps(2, end) infinite;
}
.art-grid {
  height: 32%;
  background: linear-gradient(180deg, transparent, rgba(54, 17, 75, .28)),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(48, 12, 71, .22) 24px),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(48, 12, 71, .22) 18px);
}
.pixel-sun {
  width: 76px; height: 76px; right: 17%; top: 18%;
  background: #fff0a5;
  box-shadow: 0 0 0 8px rgba(255, 220, 132, .12), 0 0 44px rgba(255, 179, 130, .5);
  animation: sunfloat 5s ease-in-out infinite, sun-glow 3.5s ease-in-out infinite alternate;
}
.pixel-cloud {
  background: #dffbff;
  filter: drop-shadow(4px 5px 0 rgba(61, 28, 115, .55));
}
.cloud-one { width: 124px; left: -4%; top: 27%; animation: cloud-drift-one 17s linear infinite; }
.cloud-two { width: 92px; right: -3%; bottom: 24%; animation: cloud-drift-two 21s linear infinite; }
.pixel-plane {
  width: 82px; height: 30px; left: 3%; top: 12%; z-index: 3;
  transform: rotate(-4deg);
  animation: plane-cross 9s linear infinite;
}
.pixel-plane::before { background: #e9fbff; filter: drop-shadow(3px 4px 0 #422178); }
.pixel-plane span { background: #ff8eac; }
.pixel-gem { filter: drop-shadow(4px 5px 0 rgba(47, 13, 72, .38)); }
.gem-one { animation: gemfloat 4s ease-in-out infinite, gem-shimmer 2.8s steps(2, end) infinite; }
.gem-two { animation: gemfloat 5s ease-in-out infinite reverse; }
.art-label { background: #2b1653; color: #fff2d9; border: 1px solid rgba(255,255,255,.16); }
.label-bottom b { color: #baff77; }
.ticker-track { animation-duration: 20s; }
.panel { transition: border-color .25s, transform .3s, box-shadow .3s; }
.panel:hover { transform: translateY(-3px); }
.button:hover { filter: brightness(1.08); }
@keyframes ambient-shift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 30px -20px, -25px 25px, 0 24px, 24px 0; }
}
@keyframes starfield { 0%,100% { opacity: .28; } 50% { opacity: .62; } }
@keyframes sun-glow { from { filter: brightness(.96); } to { filter: brightness(1.12); } }
@keyframes cloud-drift-one { 0% { transform: translateX(-15px); } 50% { transform: translateX(145px); } 100% { transform: translateX(-15px); } }
@keyframes cloud-drift-two { 0% { transform: translateX(10px) scale(.7); } 50% { transform: translateX(-180px) scale(.7); } 100% { transform: translateX(10px) scale(.7); } }
@keyframes plane-cross {
  0% { left: -18%; top: 13%; transform: translateY(0) rotate(-3deg); }
  22% { top: 9%; }
  50% { top: 16%; }
  78% { top: 10%; }
  100% { left: 110%; top: 13%; transform: translateY(-3px) rotate(-3deg); }
}
@keyframes gem-shimmer { 0%,100% { filter: brightness(1) drop-shadow(4px 5px 0 rgba(47,13,72,.38)); } 50% { filter: brightness(1.2) drop-shadow(4px 5px 0 rgba(47,13,72,.38)); } }
@media (prefers-reduced-motion: reduce) {
  body, .hero-art::before, .pixel-sun, .cloud-one, .cloud-two, .pixel-plane, .gem-one, .gem-two, .ticker-track { animation: none !important; }
}


/* FULL-PAGE WORKOS LAUNCH WEEK PIXEL SKY */
body {
  background-color: #210b52;
  background-image: linear-gradient(180deg,
    #21084f 0%, #341078 17%, #61219d 32%, #a42aa9 48%,
    #e94a9a 64%, #ff777d 80%, #ff9b58 100%);
  background-attachment: fixed;
}
.page-sky {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(20,0,55,.11) 6px 7px),
    radial-gradient(ellipse at 50% 105%, rgba(255,184,91,.35), transparent 45%);
}
.sky-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle, #f9dfff 0 1px, transparent 2px),
    radial-gradient(circle, #fff3b8 0 1px, transparent 2px);
  background-size: 137px 119px, 191px 167px, 233px 207px;
  background-position: 12px 18px, 61px 73px, 111px 29px;
  opacity: .62;
  animation: page-stars 5s steps(2,end) infinite alternate;
}
.sky-moon {
  position: absolute; width: clamp(90px, 13vw, 180px); aspect-ratio: 1;
  left: 7%; top: 11%; border: 7px solid #c6b4ff;
  background: #f4e9ff; box-shadow: 8px 8px 0 #5c329d, 0 0 50px rgba(225,199,255,.22);
  clip-path: polygon(25% 0,75% 0,75% 8%,92% 8%,92% 25%,100% 25%,100% 75%,92% 75%,92% 92%,75% 92%,75% 100%,25% 100%,25% 92%,8% 92%,8% 75%,0 75%,0 25%,8% 25%,8% 8%,25% 8%);
  opacity: .9; animation: moon-bob 7s ease-in-out infinite;
}
.sky-cloud {
  position: absolute; height: 22px; width: 108px; opacity: .9;
  background: #d8f7ff; filter: drop-shadow(5px 6px 0 rgba(47,17,103,.7));
  clip-path: polygon(0 35%,18% 35%,18% 0,53% 0,53% 18%,78% 18%,78% 35%,100% 35%,100% 100%,0 100%);
}
.sky-cloud-a { top: 24%; left: -130px; animation: page-cloud-a 28s linear infinite; }
.sky-cloud-b { top: 58%; left: -150px; transform: scale(.72); animation: page-cloud-b 35s linear infinite; animation-delay: -12s; }
.sky-cloud-c { top: 82%; left: -140px; transform: scale(.55); animation: page-cloud-c 40s linear infinite; animation-delay: -22s; }
.sky-plane {
  position: absolute; width: 74px; height: 25px; top: 8%; left: -100px;
  animation: page-plane 24s linear infinite;
}
.sky-plane::before {
  content: ""; position: absolute; inset: 0; background: #fff;
  clip-path: polygon(0 42%,43% 42%,60% 0,73% 0,68% 42%,100% 42%,100% 58%,67% 58%,77% 100%,62% 100%,43% 58%,0 58%);
  filter: drop-shadow(3px 4px 0 #54238e);
}
.sky-plane span { position:absolute; width:14px; height:5px; top:8px; left:10px; z-index:1; background:#ff94b9; }
.sky-horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18%; opacity: .16;
  background: repeating-linear-gradient(90deg, transparent 0 31px, #3b125d 32px 34px),
              repeating-linear-gradient(0deg, transparent 0 22px, #3b125d 23px 25px);
  mask-image: linear-gradient(transparent, #000);
}
.app-shell { z-index: 1; }
.site-nav { border-bottom-color: rgba(231,196,255,.34); }
.nav-meta, .nav-version { color: #ead8ff; }
.brand-mark { text-shadow: 2px 2px 0 rgba(26,7,61,.45); }
.hero-copy h1 { text-shadow: 4px 5px 0 rgba(36,7,75,.42); }
.subtitle { color: #f0dff8; }
.hero-tags span, .local-badge {
  border-color: rgba(238,205,255,.36); background: rgba(39,12,81,.72); color: #f1e4ff;
  backdrop-filter: blur(5px);
}
.ticker { box-shadow: 0 4px 0 rgba(47,13,81,.4); }
.panel {
  background: rgba(31, 13, 67, .88);
  border-color: rgba(215,177,255,.48);
  box-shadow: 5px 5px 0 rgba(35,7,65,.36), 0 12px 35px rgba(34,7,65,.16);
  backdrop-filter: blur(7px);
}
.panel:hover { border-color: #f2baff; box-shadow: 7px 7px 0 rgba(35,7,65,.42), 0 15px 38px rgba(34,7,65,.22); }
.panel::before { background: #ff91d0; box-shadow: 0 0 12px rgba(255,145,208,.5); }
.field { color: #f2e5ff; }
.field input, .field textarea, .search-input {
  color: #fff8ff; border-color: rgba(211,173,255,.43); background: rgba(20,7,48,.88);
}
.field input:focus, .field textarea:focus, .search-input:focus {
  border-color: #ff9ed5; background: rgba(36,9,68,.96); box-shadow: 4px 4px 0 rgba(255,145,208,.18);
}
.hint, .empty-state, footer { color: #d5bfe9; }
.empty-state { border-color: rgba(211,173,255,.48); background: rgba(20,7,48,.42); }
.button-secondary { border-color: rgba(221,184,255,.45); background: rgba(82,43,126,.76); }
.button-ghost { border-color: rgba(221,184,255,.45); color: #f2e5ff; }
.button-danger { color: #ffc0cb; border-color: rgba(255,151,174,.55); background: rgba(77,22,66,.78); }
.game-card { border-color: rgba(211,173,255,.42); background: rgba(31,13,67,.9); }
.text-box { border-color: rgba(211,173,255,.38); background: rgba(20,7,48,.8); }
.text-box-head { color: #f2dfff; border-bottom-color: rgba(211,173,255,.3); }
.raw-output, .calculated-output { color: #f6eaff; }
footer { border-top-color: rgba(231,196,255,.25); }
@keyframes page-stars { from { opacity: .36; } to { opacity: .82; } }
@keyframes moon-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes page-cloud-a { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 260px)); } }
@keyframes page-cloud-b { from { transform: translateX(0) scale(.72); } to { transform: translateX(calc(100vw + 300px)) scale(.72); } }
@keyframes page-cloud-c { from { transform: translateX(0) scale(.55); } to { transform: translateX(calc(100vw + 300px)) scale(.55); } }
@keyframes page-plane { from { transform: translateX(0) translateY(0); } 50% { transform: translateX(55vw) translateY(18px); } to { transform: translateX(calc(100vw + 130px)) translateY(-5px); } }
@media (max-width: 800px) {
  .sky-moon { left: -25px; top: 13%; opacity: .4; }
  .page-sky { opacity: .94; }
  .panel { backdrop-filter: blur(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .sky-stars, .sky-moon, .sky-cloud, .sky-plane { animation: none !important; }
}


/* Theme switch */
.nav-actions { display:flex; align-items:center; justify-content:flex-end; gap:18px; }
.theme-toggle { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(238,205,255,.48); border-radius:2px; color:#fff3ff; background:rgba(39,12,81,.76); font-size:11px; font-weight:600; white-space:nowrap; transition:transform .2s, background .2s, color .2s, border-color .2s; }
.theme-toggle:hover { transform:translateY(-2px); border-color:#ffb4df; box-shadow:3px 3px 0 rgba(35,7,65,.35); }
.theme-icon { font-size:16px; line-height:1; }
body, .panel, .game-card, .field input, .field textarea, .search-input, .button, .theme-toggle { transition:background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }

/* Light mode keeps the animated pixel-sky, but brightens the full interface. */
body[data-theme="light"] {
  color-scheme:light;
  color:#30234b;
  background-color:#fff0f8;
  background-image:linear-gradient(180deg,#e6f7ff 0%,#f5e9ff 36%,#ffe8f2 67%,#fff0d8 100%);
}
body[data-theme="light"]::before { opacity:.035; }
body[data-theme="light"] .page-sky { opacity:.42; }
body[data-theme="light"] .sky-stars { opacity:.3; }
body[data-theme="light"] .sky-moon { opacity:.58; box-shadow:8px 8px 0 #bda8e8,0 0 35px rgba(145,111,208,.16); }
body[data-theme="light"] .sky-horizon { opacity:.08; }
body[data-theme="light"] .site-nav { border-bottom-color:rgba(92,61,129,.25); }
body[data-theme="light"] .brand-mark { color:#30234b; text-shadow:none; }
body[data-theme="light"] .brand-light { color:#8046ad; }
body[data-theme="light"] .nav-meta, body[data-theme="light"] .nav-version { color:#695780; }
body[data-theme="light"] .subtitle { color:#59466e; }
body[data-theme="light"] .hero-copy h1 { color:#30234b; text-shadow:3px 3px 0 rgba(255,255,255,.65); }
body[data-theme="light"] .hero-copy h1 span { color:#8246b1; text-shadow:3px 3px 0 rgba(255,255,255,.5); }
body[data-theme="light"] .eyebrow { color:#7542a0; }
body[data-theme="light"] .eyebrow-square { background:#9c60c5; box-shadow:4px 4px 0 rgba(156,96,197,.15); }
body[data-theme="light"] .hero-tags span, body[data-theme="light"] .local-badge { color:#59416f; border-color:rgba(105,73,139,.28); background:rgba(255,255,255,.72); }
body[data-theme="light"] .theme-toggle { color:#fff; border-color:#68408d; background:#68408d; }
body[data-theme="light"] .theme-toggle:hover { background:#7d52a2; border-color:#7d52a2; }
body[data-theme="light"] .panel { color:#30234b; background:rgba(255,255,255,.82); border-color:rgba(116,77,151,.28); box-shadow:5px 5px 0 rgba(92,56,123,.12),0 12px 35px rgba(105,65,132,.08); }
body[data-theme="light"] .panel:hover { border-color:#b68bd4; box-shadow:7px 7px 0 rgba(92,56,123,.13),0 15px 38px rgba(105,65,132,.12); }
body[data-theme="light"] .panel::before { background:#a15cc6; box-shadow:0 0 10px rgba(161,92,198,.2); }
body[data-theme="light"] .section-heading h2 { color:#30234b; }
body[data-theme="light"] .field { color:#4c3a60; }
body[data-theme="light"] .field input, body[data-theme="light"] .field textarea, body[data-theme="light"] .search-input { color:#30234b; border-color:#d6c4e5; background:rgba(255,255,255,.92); }
body[data-theme="light"] .field input::placeholder, body[data-theme="light"] .field textarea::placeholder, body[data-theme="light"] .search-input::placeholder { color:#8b7b9c; }
body[data-theme="light"] .field input:focus, body[data-theme="light"] .field textarea:focus, body[data-theme="light"] .search-input:focus { border-color:#9a5dc0; background:#fff; box-shadow:4px 4px 0 rgba(154,93,192,.12); }
body[data-theme="light"] .hint, body[data-theme="light"] .empty-state, body[data-theme="light"] footer { color:#766487; }
body[data-theme="light"] .empty-state { border-color:#d8c5e7; background:rgba(255,255,255,.5); }
body[data-theme="light"] .button-secondary { color:#51366a; border-color:#d0b9e2; background:#f2e7fb; }
body[data-theme="light"] .button-secondary:hover { color:#643a88; border-color:#a97acb; background:#ead8f8; }
body[data-theme="light"] .button-ghost { color:#5c4670; border-color:#d0b9e2; background:rgba(255,255,255,.5); }
body[data-theme="light"] .button-danger { color:#a43f62; border-color:#e8b2c6; background:#fff0f5; }
body[data-theme="light"] .game-card { color:#30234b; border-color:#d8c5e7; background:rgba(255,255,255,.88); }
body[data-theme="light"] .game-card h3, body[data-theme="light"] .game-card strong { color:#30234b; }
body[data-theme="light"] .text-box { color:#30234b; border-color:#ddcbe9; background:rgba(250,246,255,.9); }
body[data-theme="light"] .text-box-head { color:#5b4372; border-bottom-color:#e4d6ed; }
body[data-theme="light"] .raw-output, body[data-theme="light"] .calculated-output { color:#3b2a50; }
body[data-theme="light"] footer { border-top-color:rgba(92,61,129,.22); }
body[data-theme="light"] .ticker { box-shadow:0 4px 0 rgba(92,56,123,.12); }
body[data-theme="light"] .toast { color:#fff; }
@media (max-width:800px) { .nav-actions { gap:10px; } .theme-label { display:none; } .theme-toggle { padding:8px 10px; } }

/* Optional DE $99.99 rate per game */
.special-rate-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 2px 0 20px;
  padding: 14px 16px;
  border: 1px solid rgba(190, 144, 255, .35);
  background: rgba(113, 72, 158, .12);
  cursor: pointer;
}
.special-rate-option > input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #c69aff;
  flex: 0 0 auto;
}
.special-rate-copy { display: grid; gap: 5px; }
.special-rate-copy strong { color: var(--text); font-size: 13px; }
.special-rate-copy small { color: var(--muted, #98a7a7); font-size: 12px; line-height: 1.6; }
body[data-theme="light"] .special-rate-option { border-color: #d6c4e5; background: rgba(255,255,255,.7); }
body[data-theme="light"] .special-rate-copy strong { color: #30234b; }
body[data-theme="light"] .special-rate-copy small { color: #766487; }

@media (max-width:360px) { .games-list { grid-template-columns:1fr; } }