@font-face{font-family:'Fredoka One';src:url('fonts/FredokaOne-Regular.ttf') format('truetype');font-weight:400;}
@font-face{font-family:'Nunito';src:url('fonts/Nunito-Regular.ttf') format('truetype');font-weight:700;}
@font-face{font-family:'Nunito';src:url('fonts/Nunito-Regular.ttf') format('truetype');font-weight:900;}

/* ══════════════════════════════════════════
   DESIGN CONSTANTS
   Fixed canvas: 400 × 710 px (portrait ~9:16)
   Scaled via JS transform to fill viewport
══════════════════════════════════════════ */
:root{
  --dw: 400px;   /* design width  */
  --dh: 710px;   /* design height */

  --bg:#06060f;
  --primary:#00e5ff;
  --neon-green:#00ff88;
  --neon-orange:#ff9500;
  --neon-purple:#9c27ff;
  --neon-cyan:#00e5ff;
  --neon-red:#ff3355;
  --neon-yellow:#ffe033;
  --neon-pink:#ff00cc;
  --cell-size:27px;  /* fixed cell size for 12×12 in 400px */
  --font-title:'Fredoka One',cursive;
  --font-body:'Nunito',sans-serif;
}

/* ══ RESET ══ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ══ BODY — centres the wrapper ══ */
html, body {
  width:100vw; height:100vh;
  overflow:hidden;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}

/* ══ FIXED PORTRAIT WRAPPER ══ */
#game-wrapper {
  position:relative;
  width:var(--dw);
  height:var(--dh);
  overflow:hidden;
  transform-origin:center center;
  background:
    radial-gradient(ellipse at 20% 15%,rgba(80,0,180,.28) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 85%,rgba(0,100,200,.20) 0%,transparent 50%),
    var(--bg);
  /* Subtle outer glow on desktop */
  box-shadow:0 0 60px rgba(0,229,255,.12), 0 0 120px rgba(80,0,180,.15);
}

/* ══ STARFIELD CANVAS (inside wrapper) ══ */
#starfield-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
}

/* ══ NEBULA BLOBS ══ */
.nebula {
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:0;
  filter:blur(36px);
  animation:nebulaDrift ease-in-out infinite alternate;
}
@keyframes nebulaDrift {
  from { transform:translate(-16px,-8px) scale(1); }
  to   { transform:translate(16px,8px) scale(1.07); }
}

/* ══ SCREENS — fill the wrapper ══ */
.screen {
  position:absolute; inset:0;
  display:none; flex-direction:column;
  align-items:center;
  padding:12px;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:1;
}
.screen.active { display:flex; }

/* ══ MENU ══ */
#menu { gap:10px; padding-top:14px; justify-content:flex-start; }

.top-bar {
  display:flex; justify-content:space-between;
  width:100%; align-items:center;
}
.icon-btn {
  background:rgba(0,229,255,.07);
  border:2px solid rgba(0,229,255,.25); border-radius:50px;
  padding:6px 14px;
  font-family:var(--font-body); font-weight:900; font-size:13px;
  cursor:pointer; transition:all .15s;
  color:rgba(0,229,255,.65);
  display:flex; align-items:center; gap:5px;
}
.icon-btn:hover  { border-color:var(--primary); color:var(--primary); background:rgba(0,229,255,.14); }
.icon-btn.playing{ border-color:var(--neon-green); color:var(--neon-green); }

.logo {
  font-family:var(--font-title);
  font-size:52px; line-height:1;
  color:var(--primary);
  text-shadow:
    0 0 14px var(--primary),
    0 0 32px rgba(0,229,255,.45),
    3px 3px 0 rgba(0,0,0,.6);
  animation:logoFloat 3s ease-in-out infinite;
  letter-spacing:5px; text-align:center;
}
@keyframes logoFloat {
  0%,100% { transform:translateY(0) rotate(-.4deg); }
  50%      { transform:translateY(-8px) rotate(.4deg); }
}
.logo-sub {
  font-family:var(--font-title); font-size:11px;
  color:rgba(0,229,255,.4);
  letter-spacing:3px; text-transform:uppercase; text-align:center;
}
.menu-stars { font-size:28px; letter-spacing:8px; animation:starBounce 1.4s ease-in-out infinite; }
@keyframes starBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.menu-label {
  font-family:var(--font-title); font-size:11px;
  color:rgba(0,229,255,.32); letter-spacing:3px; text-transform:uppercase;
}

/* ── DIFFICULTY PILLS ── */
.diff-row { display:flex; gap:8px; align-items:center; }
.diff-label { font-family:var(--font-title); font-size:13px; color:rgba(255,255,255,.3); }
.diff-btn {
  background:rgba(8,10,40,.8); border:2px solid rgba(255,255,255,.12);
  border-radius:50px; padding:7px 18px;
  font-family:var(--font-title); font-size:13px;
  cursor:pointer; transition:all .18s cubic-bezier(.34,1.56,.64,1);
  color:rgba(255,255,255,.3); box-shadow:0 3px 0 rgba(0,0,0,.45);
}
.diff-btn:hover { transform:translateY(-2px); box-shadow:0 5px 0 rgba(0,0,0,.4); }
.diff-btn.active-normal {
  border-color:var(--neon-green); color:var(--neon-green);
  background:rgba(0,255,136,.07);
  box-shadow:0 3px 0 rgba(0,0,0,.4),0 0 10px rgba(0,255,136,.2);
}
.diff-btn.active-hard {
  border-color:var(--neon-red); color:var(--neon-red);
  background:rgba(255,51,85,.07);
  box-shadow:0 3px 0 rgba(0,0,0,.4),0 0 10px rgba(255,51,85,.2);
}

/* ── CATEGORY GRID — 4 columns × 2 rows ── */
.category-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px; width:100%;
}
.cat-btn {
  background:rgba(8,10,40,.78);
  border:2.5px solid transparent; border-radius:16px;
  padding:10px 4px; text-align:center; cursor:pointer;
  transition:all .18s cubic-bezier(.34,1.56,.64,1);
  font-family:var(--font-body); font-weight:900; font-size:11px;
  color:white; box-shadow:0 4px 0 rgba(0,0,0,.5);
}
.cat-btn:hover  { transform:translateY(-5px); filter:brightness(1.25); box-shadow:0 9px 0 rgba(0,0,0,.4); }
.cat-btn:active { transform:translateY(0); box-shadow:0 2px 0 rgba(0,0,0,.5); }
.cat-btn .cat-emoji { font-size:26px; display:block; margin-bottom:5px; }

.cat-btn.planets       { border-color:#b44fff; color:#b44fff; box-shadow:0 4px 0 rgba(0,0,0,.5),0 0 8px rgba(180,79,255,.2); }
.cat-btn.stars         { border-color:#ffe033; color:#ffe033; box-shadow:0 4px 0 rgba(0,0,0,.5),0 0 8px rgba(255,224,51,.2); }
.cat-btn.galaxies      { border-color:#00e5ff; color:#00e5ff; box-shadow:0 4px 0 rgba(0,0,0,.5),0 0 8px rgba(0,229,255,.2); }
.cat-btn.rockets       { border-color:#ff9500; color:#ff9500; box-shadow:0 4px 0 rgba(0,0,0,.5),0 0 8px rgba(255,149,0,.2); }
.cat-btn.astronauts    { border-color:#00ff88; color:#00ff88; box-shadow:0 4px 0 rgba(0,0,0,.5),0 0 8px rgba(0,255,136,.2); }
.cat-btn.cosmos        { border-color:#ff00cc; color:#ff00cc; box-shadow:0 4px 0 rgba(0,0,0,.5),0 0 8px rgba(255,0,204,.2); }
.cat-btn.constellations{ border-color:#88ccff; color:#88ccff; box-shadow:0 4px 0 rgba(0,0,0,.5),0 0 8px rgba(136,204,255,.2); }
.cat-btn.spacetech     { border-color:#ff3355; color:#ff3355; box-shadow:0 4px 0 rgba(0,0,0,.5),0 0 8px rgba(255,51,85,.2); }

/* ══ GAME SCREEN ══ */
#game {
  padding:10px; gap:7px;
  justify-content:flex-start;
}

.game-header {
  display:flex; align-items:center;
  justify-content:space-between; width:100%;
}
.back-btn {
  background:rgba(0,229,255,.07); border:2px solid rgba(0,229,255,.2);
  border-radius:50px; padding:7px 13px;
  font-family:var(--font-body); font-weight:800; font-size:12px;
  cursor:pointer; transition:all .15s; color:rgba(0,229,255,.55);
}
.back-btn:hover { border-color:var(--primary); color:var(--primary); }
.game-title { font-family:var(--font-title); font-size:17px; color:rgba(255,255,255,.75); }
.timer-box {
  background:rgba(0,229,255,.09); border:2px solid rgba(0,229,255,.28);
  border-radius:50px; padding:7px 13px;
  font-family:var(--font-title); font-size:17px;
  color:var(--primary); min-width:64px; text-align:center;
  box-shadow:0 0 8px rgba(0,229,255,.15);
}
.timer-box.danger {
  background:rgba(255,51,85,.13); border-color:var(--neon-red); color:var(--neon-red);
  box-shadow:0 0 15px rgba(255,51,85,.4);
  animation:timerShake .15s ease-in-out infinite alternate;
}
@keyframes timerShake { from{transform:translateX(-2px)} to{transform:translateX(2px)} }

.progress-wrap {
  width:100%; height:10px;
  background:rgba(255,255,255,.07); border-radius:50px; overflow:hidden;
}
.progress-bar {
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--neon-purple),var(--neon-pink));
  border-radius:50px; transition:width .5s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 8px rgba(0,229,255,.5);
}

/* ── GAME AREA — portrait column layout ── */
.game-area {
  display:flex; flex-direction:column;
  width:100%; flex:1; gap:7px; align-items:center;
}

/* GRID */
.grid-container {
  background:rgba(4,6,24,.95); border-radius:18px; padding:12px;
  border:2px solid rgba(0,229,255,.18);
  box-shadow:0 0 30px rgba(0,229,255,.08),0 6px 0 rgba(0,0,0,.6);
  user-select:none; -webkit-user-select:none; touch-action:none;
  flex-shrink:0;
}
#grid { display:grid; gap:2px; }
.cell {
  width:var(--cell-size); height:var(--cell-size);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-title); font-size:13px;
  color:rgba(120,180,255,.65); border-radius:6px;
  cursor:pointer; transition:background .1s,transform .12s,color .1s;
  background:rgba(255,255,255,.03);
}
.cell:hover  { background:rgba(0,229,255,.1)!important; color:rgba(0,229,255,.9)!important; }
.cell.selected {
  background:rgba(0,229,255,.22)!important; color:#00e5ff!important;
  transform:scale(1.15); z-index:3; box-shadow:0 0 8px rgba(0,229,255,.4);
}

/* FOUND COLORS */
.cell.found-0{background:#ff3355!important;color:white!important}
.cell.found-1{background:#00bebe!important;color:white!important}
.cell.found-2{background:#1258ff!important;color:white!important}
.cell.found-3{background:#9c27ff!important;color:white!important}
.cell.found-4{background:#00dd77!important;color:#003322!important}
.cell.found-5{background:#ff9500!important;color:white!important}
.cell.found-6{background:#ff00bb!important;color:white!important}
.cell.found-7{background:#00e5ff!important;color:#002233!important}
.cell.found-8{background:#ff5533!important;color:white!important}
.cell.found-9{background:#aaee00!important;color:#1a2200!important}

@keyframes cellPop{0%{transform:scale(1)}40%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.cell.pop { animation:cellPop .4s cubic-bezier(.34,1.56,.64,1)!important; }

@keyframes hintFlash {
  0%,100%{background:rgba(255,255,255,.03);}
  50%{background:rgba(255,224,51,.3);box-shadow:0 0 12px rgba(255,224,51,.6);}
}
.cell.hint-flash { animation:hintFlash .55s ease-in-out 4!important; }

/* ── WORD PANEL (below grid, full width) ── */
.word-panel {
  width:100%; flex:1;
  background:rgba(4,6,24,.9);
  border-radius:14px; padding:8px 10px;
  border:2px solid rgba(0,229,255,.13);
  box-shadow:0 0 18px rgba(0,229,255,.06);
  display:flex; flex-direction:column; gap:5px;
}
.wl-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:2px;
}
.wl-title {
  font-family:var(--font-title); font-size:11px;
  color:rgba(0,229,255,.5); letter-spacing:3px;
}

/* Word items — 3-column grid (9 words = 3×3) */
#word-list-content {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px 6px;
  flex:1;
}
.word-item {
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-title); font-size:12px;
  color:rgba(255,255,255,.65); padding:3px 4px; border-radius:6px;
  transition:all .2s; overflow:hidden;
}
.word-item .dot {
  width:6px; height:6px; border-radius:50%;
  border:2px solid rgba(0,229,255,.35); flex-shrink:0;
}
.word-item.found { color:rgba(255,255,255,.28); text-decoration:line-through; }
.word-item.found .dot { background:var(--neon-green); border-color:var(--neon-green); }
@keyframes wordItemFound { from{transform:scale(1.15) translateX(6px)} to{transform:scale(1) translateX(0)} }
.word-item.just-found { animation:wordItemFound .5s cubic-bezier(.34,1.56,.64,1); }

/* BUTTONS */
.btn {
  background:var(--neon-purple); color:white; border:none;
  border-radius:50px; padding:8px 14px;
  font-family:var(--font-body); font-weight:800; font-size:13px;
  cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.35);
  transition:all .15s; flex:1; text-align:center;
}
.btn:hover  { transform:translateY(-2px); box-shadow:0 5px 0 rgba(0,0,0,.35); }
.btn:active { transform:translateY(0);    box-shadow:0 1px 0 rgba(0,0,0,.35); }
.btn.hint     { background:var(--neon-orange); }
.btn.next     { background:var(--neon-green); color:#002211; }
.btn.menu-btn { background:rgba(255,255,255,.13); }
.btn.small-btn{ flex:0; padding:5px 11px; font-size:12px; }

.btn-row { display:flex; gap:8px; }
.go-btns { margin-top:8px; width:280px; }

/* ══ OVERLAYS (absolute inside wrapper) ══ */

/* PAUSE */
#pause-overlay {
  display:none; position:absolute; inset:0;
  background:rgba(4,4,16,.94); backdrop-filter:blur(14px);
  z-index:300; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; cursor:pointer;
}
#pause-overlay.show { display:flex; }
.pause-icon  { font-size:70px; animation:starBounce 1.2s ease-in-out infinite; }
.pause-title { font-family:var(--font-title); font-size:54px; color:var(--primary); text-shadow:0 0 18px var(--primary); }
.pause-sub   { font-family:var(--font-title); font-size:15px; color:rgba(255,255,255,.3); letter-spacing:2px; }

/* GAME OVER */
#gameover-overlay {
  display:none; position:absolute; inset:0;
  background:rgba(18,0,36,.95); backdrop-filter:blur(12px);
  z-index:200; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
}
#gameover-overlay.show { display:flex; }
.go-emoji { font-size:70px; animation:spinIn .5s cubic-bezier(.34,1.56,.64,1); }
.go-title  { font-family:var(--font-title); font-size:44px; color:var(--neon-red); text-shadow:0 0 18px var(--neon-red); }
.go-sub    { font-family:var(--font-title); font-size:15px; color:rgba(255,255,255,.4); text-align:center; padding:0 20px; }

/* WIN */
#win-overlay {
  display:none; position:absolute; inset:0;
  background:rgba(4,4,16,.95); backdrop-filter:blur(16px);
  z-index:100; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:20px;
}
#win-overlay.show { display:flex; }
.win-emoji  { font-size:74px; animation:spinIn .55s cubic-bezier(.34,1.56,.64,1); }
.win-title  {
  font-family:var(--font-title); font-size:44px; text-align:center; line-height:1.05;
  color:var(--primary); text-shadow:0 0 18px var(--primary),0 0 38px rgba(0,229,255,.4);
  animation:logoFloat 2s ease-in-out infinite;
}
.win-stars  { font-size:36px; letter-spacing:8px; animation:starBounce 1s ease-in-out infinite; }
.win-stats  {
  font-weight:800; font-size:14px; color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.05); padding:10px 20px; border-radius:14px;
  border:1px solid rgba(0,229,255,.12); text-align:center;
}

@keyframes spinIn { from{transform:rotate(-200deg) scale(0);opacity:0} to{transform:rotate(0) scale(1);opacity:1} }

/* PARTICLES */
.particle { position:absolute; pointer-events:none; z-index:400; animation:pFly var(--dur,.9s) ease-out forwards; }
@keyframes pFly { 0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1} 100%{transform:translate(var(--tx),var(--ty)) rotate(var(--tr)) scale(0);opacity:0} }
.ring-particle { position:absolute; pointer-events:none; z-index:400; border-radius:50%; animation:ringOut .6s ease-out forwards; }
@keyframes ringOut { 0%{transform:translate(-50%,-50%) scale(0);opacity:.9} 100%{transform:translate(-50%,-50%) scale(1.6);opacity:0} }

/* CONFETTI CANVAS (absolute inside wrapper) */
#confetti-canvas {
  position:absolute; inset:0;
  pointer-events:none; z-index:150;
  width:100%; height:100%;
}

/* ══ LEADERBOARD ══ */
#leaderboard { gap:12px; padding-top:14px; justify-content:flex-start; }
.lb-header {
  display:flex; justify-content:space-between;
  width:100%; align-items:center;
}
.lb-title {
  font-family:var(--font-title); font-size:28px;
  color:var(--primary); text-shadow:0 0 12px rgba(0,229,255,.4);
}
.lb-cat-tabs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px; width:100%;
}
.lb-tab {
  background:rgba(8,10,40,.8); border:2px solid rgba(255,255,255,.1);
  border-radius:50px; padding:5px 4px;
  font-family:var(--font-body); font-weight:900; font-size:10px;
  cursor:pointer; transition:all .15s; color:rgba(255,255,255,.35);
  white-space:nowrap; text-align:center; overflow:hidden;
  text-overflow:ellipsis;
}
.lb-tab.active { background:rgba(0,229,255,.1); border-color:var(--primary); color:var(--primary); }
.lb-tab:hover  { border-color:var(--primary); color:var(--primary); }
.lb-table {
  width:100%; background:rgba(4,6,24,.92); border-radius:18px; padding:14px;
  border:2px solid rgba(0,229,255,.12);
  box-shadow:0 0 20px rgba(0,229,255,.06);
}
.lb-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 6px; border-radius:10px;
  font-family:var(--font-body); font-weight:900; font-size:14px;
  color:rgba(255,255,255,.8);
}
.lb-row:nth-child(odd) { background:rgba(255,255,255,.03); }
.lb-rank { font-family:var(--font-title); font-size:20px; width:32px; text-align:center; flex-shrink:0; }
.lb-row.rank-1 .lb-rank { color:gold; filter:drop-shadow(0 0 5px gold); }
.lb-row.rank-2 .lb-rank { color:silver; }
.lb-row.rank-3 .lb-rank { color:#cd7f32; }
.lb-time { margin-left:auto; font-family:var(--font-title); font-size:17px; color:var(--primary); }
.lb-diff-badge { font-size:10px; padding:2px 7px; border-radius:20px; font-weight:800; }
.lb-diff-badge.hard   { background:rgba(255,51,85,.18); color:var(--neon-red); }
.lb-diff-badge.normal { background:rgba(0,255,136,.1);  color:var(--neon-green); }
.lb-empty { text-align:center; color:rgba(255,255,255,.2); font-family:var(--font-title); font-size:17px; padding:28px 0; }
.lb-new-record {
  background:linear-gradient(135deg,rgba(0,229,255,.15),rgba(156,39,255,.15));
  border:2px solid rgba(0,229,255,.5); border-radius:14px;
  padding:9px 20px; font-family:var(--font-title); font-size:16px; color:var(--primary);
  box-shadow:0 0 16px rgba(0,229,255,.3);
  animation:starBounce .8s ease-in-out infinite;
}

/* ══ MAPI FOOTER ══ */
.mapi-footer {
  position:absolute; bottom:7px; left:50%; transform:translateX(-50%);
  font-family:var(--font-title); font-size:11px;
  color:#ff3355; letter-spacing:4px; text-transform:uppercase;
  pointer-events:none; z-index:2;
}

/* ══ ROTATE OVERLAY — FIXED, outside wrapper ══ */
#rotate-overlay {
  display:none; position:fixed; inset:0;
  background:#06060f; z-index:9999;
  flex-direction:column; align-items:center; justify-content:center; gap:18px;
}
.rot-icon { font-size:70px; animation:rotAnim 1.8s ease-in-out infinite; }
@keyframes rotAnim { 0%,100%{transform:rotate(0deg)} 40%{transform:rotate(90deg)} 60%{transform:rotate(90deg)} }
#rotate-overlay p { font-family:var(--font-title); font-size:20px; color:rgba(255,255,255,.4); text-align:center; line-height:1.5; }

/* ══ SPLASH SCREEN ══ */
#splash {
  position:absolute; inset:0; z-index:1000;
  background:
    radial-gradient(ellipse at 20% 15%,rgba(80,0,180,.28) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 85%,rgba(0,100,200,.20) 0%,transparent 50%),
    var(--bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:16px;
}
#splash.hidden {
  animation:splashFadeOut .7s ease-out forwards;
  pointer-events:none;
}
@keyframes splashFadeOut {
  from { opacity:1; transform:scale(1); }
  to   { opacity:0; transform:scale(1.05); }
}
.splash-logo {
  font-family:var(--font-title);
  font-size:52px; line-height:1;
  color:var(--primary);
  text-shadow:0 0 18px var(--primary),0 0 40px rgba(0,229,255,.4);
  letter-spacing:5px; text-align:center;
  animation:splashPulse 1.6s ease-in-out infinite;
}
@keyframes splashPulse {
  0%,100% { text-shadow:0 0 18px var(--primary),0 0 40px rgba(0,229,255,.35); }
  50%      { text-shadow:0 0 32px var(--primary),0 0 75px rgba(0,229,255,.7),0 0 110px rgba(0,229,255,.25); }
}
.splash-sub {
  font-family:var(--font-title); font-size:11px;
  color:rgba(0,229,255,.38); letter-spacing:4px; text-transform:uppercase;
  margin-top:-10px;
}
.splash-rocket {
  font-size:58px;
  animation:splashRocket 1s ease-in-out infinite alternate;
}
@keyframes splashRocket {
  from { transform:translateY(0) rotate(-8deg); }
  to   { transform:translateY(-14px) rotate(8deg); }
}
.splash-bar-wrap {
  width:240px; height:10px;
  background:rgba(255,255,255,.07);
  border-radius:50px; overflow:hidden;
  border:1px solid rgba(0,229,255,.18);
  box-shadow:0 0 12px rgba(0,229,255,.1);
}
.splash-bar {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--primary),var(--neon-purple),var(--neon-pink));
  border-radius:50px;
  box-shadow:0 0 10px rgba(0,229,255,.7);
  transition:width .1s linear;
}
.splash-pct {
  font-family:var(--font-title); font-size:13px;
  color:rgba(0,229,255,.5); letter-spacing:3px;
  margin-top:-4px;
}
.splash-label {
  font-family:var(--font-title); font-size:11px;
  color:rgba(255,255,255,.18); letter-spacing:2px; text-transform:uppercase;
}
.splash-stars {
  font-size:24px; letter-spacing:8px;
  animation:starBounce 1.2s ease-in-out infinite;
  margin-top:4px;
}
.splash-mapi {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-family:var(--font-title); font-size:11px;
  color:#ff3355; letter-spacing:4px; text-transform:uppercase;
  pointer-events:none;
}