:root{
  --spk-bg:#0b1020;
  --spk-bg2:#11192d;
  --spk-panel:rgba(255,255,255,0.08);
  --spk-panel-2:rgba(255,255,255,0.12);
  --spk-line:rgba(170,225,255,0.18);
  --spk-text:#ecf8ff;
  --spk-soft:#a9c7db;
  --spk-accent:#83e7ff;
  --spk-accent2:#b2f7ff;
  --spk-warm:#ffd98a;
  --spk-shadow:0 10px 40px rgba(0,0,0,0.35);
  --spk-radius:18px;
  --spk-ui-size:46px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(circle at 20% 15%, rgba(131,231,255,0.10), transparent 20%),
    radial-gradient(circle at 80% 25%, rgba(255,217,138,0.08), transparent 18%),
    linear-gradient(180deg, var(--spk-bg), var(--spk-bg2));
  color:var(--spk-text);
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100vh;
}

a{color:var(--spk-accent2);text-decoration:none}
a:hover{opacity:.9}

.spk-home-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:32px 18px 48px;
}

.spk-home-hero{
  text-align:center;
  padding:40px 12px 26px;
}

.spk-storm-hero{
  position:relative;
  width:min(760px, 100%);
  margin:0 auto;
  min-height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.spk-brand{
  position:relative;
  z-index:3;
  font-size:clamp(36px,7vw,72px);
  font-weight:800;
  letter-spacing:.14em;
  color:rgba(210,235,248,0.22);
  text-shadow:
    0 0 0 rgba(255,255,255,0),
    0 0 0 rgba(131,231,255,0);
  transition:
    color .18s ease,
    text-shadow .18s ease,
    transform .18s ease;
}

.spk-brand.is-flash{
  color:rgba(245,252,255,0.96);
  text-shadow:
    0 0 12px rgba(255,255,255,0.65),
    0 0 28px rgba(131,231,255,0.45),
    0 0 60px rgba(131,231,255,0.22);
  transform:scale(1.015);
}

.spk-clouds{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.spk-cloud{
  position:absolute;
  display:block;
  height:34px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  filter:blur(1px);
  opacity:.75;
}

.spk-cloud::before,
.spk-cloud::after{
  content:"";
  position:absolute;
  border-radius:999px;
  background:inherit;
}

.spk-cloud::before{
  width:36%;
  height:120%;
  left:10%;
  top:-30%;
}

.spk-cloud::after{
  width:42%;
  height:110%;
  right:12%;
  top:-22%;
}

.spk-cloud.c1{
  width:150px;
  top:34px;
  left:8%;
  animation:spkCloudDrift1 18s ease-in-out infinite;
}
.spk-cloud.c2{
  width:190px;
  top:18px;
  right:6%;
  animation:spkCloudDrift2 22s ease-in-out infinite;
}
.spk-cloud.c3{
  width:130px;
  top:78px;
  left:18%;
  opacity:.52;
  animation:spkCloudDrift3 16s ease-in-out infinite;
}
.spk-cloud.c4{
  width:170px;
  top:64px;
  right:18%;
  opacity:.46;
  animation:spkCloudDrift4 20s ease-in-out infinite;
}

@keyframes spkCloudDrift1{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(18px)}
}
@keyframes spkCloudDrift2{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-16px)}
}
@keyframes spkCloudDrift3{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(12px)}
}
@keyframes spkCloudDrift4{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-20px)}
}

.spk-lightning-wrap{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.spk-bolt{
  position:absolute;
  width:0;
  height:0;
  opacity:0;
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.45))
         drop-shadow(0 0 18px rgba(131,231,255,0.35));
}

.spk-bolt::before{
  content:"";
  position:absolute;
  display:block;
  width:8px;
  height:68px;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(178,247,255,0.88));
  clip-path:polygon(44% 0%, 100% 0%, 62% 44%, 100% 44%, 18% 100%, 42% 58%, 0% 58%);
  border-radius:2px;
}

.spk-bolt.b1{
  left:32%;
  top:10px;
}

.spk-bolt.b2{
  right:28%;
  top:28px;
}

.spk-bolt.flash{
  animation:spkLightningStrike .34s ease-out 1;
}

@keyframes spkLightningStrike{
  0%{opacity:0; transform:translateY(-4px) scale(.95)}
  10%{opacity:1; transform:translateY(0) scale(1)}
  30%{opacity:.28}
  42%{opacity:.95}
  60%{opacity:.18}
  100%{opacity:0; transform:translateY(2px) scale(1.02)}
}

.spk-brand{
  font-size:clamp(36px,7vw,72px);
  font-weight:800;
  letter-spacing:.14em;
}

.spk-tag{
  margin-top:8px;
  font-size:clamp(16px,2.2vw,24px);
  color:var(--spk-accent2);
}

.spk-blurb{
  margin:14px auto 0;
  max-width:560px;
  color:var(--spk-soft);
  font-size:15px;
}

.spk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-top:24px;
}

.spk-card{
  display:block;
  background:var(--spk-panel);
  border:1px solid var(--spk-line);
  border-radius:22px;
  padding:16px;
  box-shadow:var(--spk-shadow);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  min-height:220px;
}

.spk-card:hover{
  transform:translateY(-2px);
  border-color:rgba(178,247,255,0.42);
  background:rgba(255,255,255,0.10);
}

.spk-card-soon{opacity:.72}

.spk-card-preview{
  height:130px;
  border-radius:18px;
  background:
    radial-gradient(circle at 30% 40%, rgba(131,231,255,.35), transparent 16%),
    radial-gradient(circle at 65% 60%, rgba(131,231,255,.18), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
}

.spk-preview-rainstorm{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,#07121c,#0a1a28);
}

.spk-preview-rainstorm::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      -12deg,
      rgba(180,220,255,.15) 0px,
      rgba(180,220,255,.15) 1px,
      transparent 2px,
      transparent 8px
    );
  opacity:.6;
}

.spk-preview-rainstorm::after{
  content:"";
  position:absolute;
  width:6px;
  height:60px;
  left:55%;
  top:18%;
  background:white;
  opacity:.9;
  clip-path:polygon(40% 0%,100% 0%,55% 50%,100% 50%,20% 100%,45% 60%,0% 60%);
  filter:blur(.3px);
}

.spk-preview-ripple{
  position:relative;
  overflow:hidden;
}
.spk-preview-ripple::before,
.spk-preview-ripple::after{
  content:"";
  position:absolute;
  border:2px solid rgba(131,231,255,.55);
  border-radius:999px;
  inset:auto;
  width:54px;
  height:54px;
  top:36px;
  left:44px;
  animation:spkRipple 3s infinite ease-out;
}
.spk-preview-ripple::after{
  top:48px;
  left:104px;
  animation-delay:1.1s;
}

@keyframes spkRipple{
  0%{transform:scale(.2);opacity:.9}
  100%{transform:scale(2.8);opacity:0}
}


.spk-preview-driftfish{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 26% 24%, rgba(131,231,255,.12), transparent 24%),
    radial-gradient(circle at 78% 70%, rgba(178,247,255,.08), transparent 24%),
    linear-gradient(180deg, rgba(8,16,26,.96), rgba(10,20,30,.98));
}
.spk-preview-driftfish::before,
.spk-preview-driftfish::after{
  content:"";
  position:absolute;
  display:block;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(178,247,255,.95), rgba(110,180,210,.95));
  box-shadow:
    0 0 10px rgba(131,231,255,.16),
    inset 0 1px 3px rgba(255,255,255,.25);
}
.spk-preview-driftfish::before{
  width:44px;
  height:18px;
  left:42px;
  top:56px;
}
.spk-preview-driftfish::after{
  width:34px;
  height:14px;
  left:116px;
  top:76px;
}
.spk-preview-driftfish .spk-fish-tail{}

.spk-preview-driftfish{
  --fish-glow:rgba(178,247,255,.12);
}
.spk-preview-driftfish:before{
  clip-path:ellipse(50% 45% at 50% 50%);
}
.spk-preview-driftfish:after{
  clip-path:ellipse(50% 45% at 50% 50%);
}

.spk-preview-firefly{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,220,120,.12), transparent 20%),
    radial-gradient(circle at 70% 65%, rgba(131,231,255,.08), transparent 22%),
    linear-gradient(180deg, rgba(8,16,24,0.95), rgba(10,20,28,0.98));
}
.spk-preview-firefly::before,
.spk-preview-firefly::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,220,120,.95);
  box-shadow:
    0 0 8px rgba(255,220,120,.85),
    0 0 18px rgba(255,220,120,.45);
  animation:spkFireflyFloat 4.8s infinite ease-in-out;
}
.spk-preview-firefly::before{
  top:30px;
  left:48px;
}
.spk-preview-firefly::after{
  top:72px;
  left:128px;
  width:6px;
  height:6px;
  animation-delay:1.4s;
}

@keyframes spkFireflyFloat{
  0%{transform:translate(0,0) scale(1);opacity:.85}
  25%{transform:translate(18px,-10px) scale(1.08);opacity:1}
  50%{transform:translate(4px,12px) scale(.96);opacity:.78}
  75%{transform:translate(-12px,-6px) scale(1.03);opacity:.94}
  100%{transform:translate(0,0) scale(1);opacity:.85}
}


.spk-preview-sand{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,217,138,.08), transparent 24%),
    linear-gradient(180deg, rgba(8,14,22,.96), rgba(10,16,24,.98));
}
.spk-preview-sand::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  height:42px;
  border-radius:18px 18px 12px 12px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,220,150,.92), transparent 14%),
    radial-gradient(circle at 48% 40%, rgba(255,220,150,.88), transparent 14%),
    radial-gradient(circle at 76% 32%, rgba(255,220,150,.84), transparent 14%),
    linear-gradient(180deg, rgba(220,180,110,.92), rgba(168,128,72,.96));
  box-shadow:0 0 22px rgba(255,215,140,.10);
}
.spk-preview-sand::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border-radius:999px;
  top:24px;
  left:92px;
  background:rgba(255,220,150,.96);
  box-shadow:
    0 0 10px rgba(255,220,150,.55),
    18px 16px 0 0 rgba(255,220,150,.85),
    -26px 22px 0 0 rgba(255,220,150,.75),
    34px 34px 0 0 rgba(255,220,150,.65);
}

.spk-preview-bubbles{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 35% 28%, rgba(131,231,255,.16), transparent 22%),
    radial-gradient(circle at 72% 72%, rgba(178,247,255,.08), transparent 24%),
    linear-gradient(180deg, rgba(8,14,24,.96), rgba(10,18,28,.98));
}
.spk-preview-bubbles::before,
.spk-preview-bubbles::after{
  content:"";
  position:absolute;
  border-radius:999px;
  border:2px solid rgba(178,247,255,.78);
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(178,247,255,.05) 45%, rgba(0,0,0,0) 70%);
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.06),
    0 0 18px rgba(131,231,255,.12);
}
.spk-preview-bubbles::before{
  width:44px;
  height:44px;
  left:44px;
  top:44px;
  animation:spkBubbleFloat 4.8s infinite ease-in-out;
}
.spk-preview-bubbles::after{
  width:64px;
  height:64px;
  left:118px;
  top:28px;
  animation:spkBubbleFloat 5.6s infinite ease-in-out;
  animation-delay:1s;
}

@keyframes spkBubbleFloat{
  0%{transform:translate(0,0) scale(1);opacity:.92}
  25%{transform:translate(10px,-8px) scale(1.03);opacity:1}
  50%{transform:translate(-6px,10px) scale(.98);opacity:.86}
  75%{transform:translate(8px,4px) scale(1.01);opacity:.95}
  100%{transform:translate(0,0) scale(1);opacity:.92}
}


.spk-preview-pebbles{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,220,150,.08), transparent 24%),
    linear-gradient(180deg, rgba(8,14,24,.96), rgba(10,18,28,.98));
}
.spk-preview-pebbles::before,
.spk-preview-pebbles::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(170,178,190,.98), rgba(118,126,140,.98));
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.18),
    0 6px 14px rgba(0,0,0,.18);
}
.spk-preview-pebbles::before{
  width:92px;
  height:28px;
  bottom:24px;
}
.spk-preview-pebbles::after{
  width:56px;
  height:22px;
  bottom:46px;
}

.spk-preview-windylines{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 28% 28%, rgba(131,231,255,.12), transparent 22%),
    radial-gradient(circle at 70% 68%, rgba(178,247,255,.08), transparent 26%),
    linear-gradient(180deg, rgba(8,14,24,.96), rgba(10,18,28,.98));
}
.spk-preview-windylines::before,
.spk-preview-windylines::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.85;
}
.spk-preview-windylines::before{
  background:
    linear-gradient(100deg, transparent 0 8%, rgba(178,247,255,.14) 8.5% 9.2%, transparent 9.7% 18%, rgba(178,247,255,.12) 18.5% 19.1%, transparent 19.6% 28%, rgba(178,247,255,.10) 28.4% 29%, transparent 29.5% 100%);
  transform:translateX(-8px) translateY(4px);
}
.spk-preview-windylines::after{
  background:
    linear-gradient(105deg, transparent 0 18%, rgba(255,255,255,.08) 18.4% 19%, transparent 19.5% 34%, rgba(178,247,255,.10) 34.4% 35%, transparent 35.5% 54%, rgba(178,247,255,.08) 54.4% 55%, transparent 55.5% 100%);
  transform:translateX(10px) translateY(-6px);
}






.spk-card-name{
  margin-top:14px;
  font-size:19px;
  font-weight:700;
}

.spk-card-tag{
  margin-top:6px;
  color:var(--spk-soft);
  font-size:14px;
}

.spk-home-footer{
  margin-top:34px;
  text-align:center;
  color:var(--spk-soft);
  font-size:13px;
}
.spk-home-footer span{margin:0 8px}

/* basic page */
.spk-page{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.spk-page-wrap{
  max-width:760px;
  width:100%;
  background:var(--spk-panel);
  border:1px solid var(--spk-line);
  border-radius:24px;
  box-shadow:var(--spk-shadow);
  padding:28px;
}
.spk-page-wrap h1{margin-top:0}

/* toy shell */
.spk-shell{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(131,231,255,0.08), transparent 25%),
    linear-gradient(180deg, #09101b, #0d1624);
}

#toyCanvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}

.spk-status{
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  min-width:120px;
  max-width:70vw;
  text-align:center;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(178,247,255,0.18);
  color:var(--spk-accent2);
  font-size:13px;
  letter-spacing:.02em;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  backdrop-filter:blur(8px);
  z-index:20;
}
.spk-status.is-on{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* corner buttons */
.spk-ui{
  position:absolute;
  width:var(--spk-ui-size);
  height:var(--spk-ui-size);
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(178,247,255,0.18);
  box-shadow:var(--spk-shadow);
  backdrop-filter:blur(10px);
  color:var(--spk-text);
  cursor:pointer;
  z-index:20;
}
.spk-ui:hover{background:rgba(255,255,255,0.16)}
.spk-ui:active{transform:scale(.97)}

.spk-redo{top:18px;left:18px}
.spk-snapshot{top:18px;right:18px}
.spk-toychest{bottom:18px;left:18px}
.spk-homebtn{
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
}
.spk-info{bottom:18px;right:18px}

.spk-ui::before{
  display:block;
  width:100%;
  text-align:center;
  line-height:44px;
  font-size:20px;
}
.spk-redo::before{content:"↺"}
.spk-snapshot::before{content:"⌾"}
.spk-toychest::before{content:"✦"}
.spk-homebtn::before{content:"⌂"}
.spk-info::before{content:"i";font-weight:800;font-family:Georgia,serif}

/* overlay */
.spk-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(5,9,16,0.34);
  backdrop-filter:blur(10px);
  z-index:30;
  opacity:1;
  visibility:visible;
  transition:opacity .35s ease, visibility .35s ease;
}
.spk-overlay.is-hidden{
  opacity:0;
  visibility:hidden;
}

.spk-overlay-card{
  width:min(520px,100%);
  text-align:center;
  padding:30px 24px 24px;
  border-radius:28px;
  background:rgba(9,15,26,0.72);
  border:1px solid rgba(178,247,255,0.18);
  box-shadow:var(--spk-shadow);
}

.spk-title{
  font-size:clamp(34px,7vw,62px);
  font-weight:800;
  letter-spacing:.14em;
}

.spk-subtitle{
  margin-top:8px;
  color:var(--spk-accent2);
  font-size:18px;
}

.spk-play-btn{
  margin-top:22px;
  min-width:180px;
  padding:14px 20px;
  border:none;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(131,231,255,1), rgba(131,231,255,.82));
  color:#07111b;
  font-weight:800;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(131,231,255,.28);
}
.spk-play-btn:hover{filter:brightness(1.03)}

.spk-overlay-links{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  color:var(--spk-soft);
  font-size:13px;
}

.spk-overlay-links button{
  background:none;
  border:none;
  color:var(--spk-soft);
  cursor:pointer;
  padding:0;
}

.spk-copy{
  margin-top:16px;
  color:var(--spk-soft);
  font-size:12px;
  opacity:.9;
}

/* modal */
.spk-modal{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(3,6,10,.45);
  z-index:40;
}
.spk-modal.is-open{display:flex}

.spk-modal-card{
  width:min(560px,100%);
  max-height:80vh;
  overflow:auto;
  background:rgba(11,18,30,.92);
  border:1px solid rgba(178,247,255,0.18);
  border-radius:24px;
  box-shadow:var(--spk-shadow);
  padding:22px 20px 18px;
}

.spk-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.spk-modal-title{
  font-size:20px;
  font-weight:700;
}

.spk-close{
  width:38px;
  height:38px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--spk-text);
  cursor:pointer;
}

.spk-modal-body{
  color:var(--spk-soft);
  font-size:14px;
  line-height:1.6;
}

.spk-modal-body ul{
  padding-left:18px;
  margin:8px 0 0;
}
.spk-modal-body li{margin:4px 0}

.spk-game-list{
  display:grid;
  gap:10px;
}
.spk-game-list a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}

/* utility */
.is-hidden{display:none!important}

@media (max-width:640px){
  :root{--spk-ui-size:42px}
  .spk-overlay-card{padding:24px 18px 18px}
  .spk-status{top:12px;font-size:12px}
}