*{box-sizing:border-box}
:root{
  --banner-h: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --hud-size: clamp(14px, 2.8vw, 22px);
}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;background:#111;color:#fff}
a{color:#9ad}
.container{
  min-height:100%;
  display:flex;
  flex-direction:column;
}
/* Fixed banner slot */
.banner-slot{
  position:fixed;
  left:0; right:0; bottom:0;
  height:calc(var(--banner-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:#0a0a0a;
  display:flex; align-items:center; justify-content:center;
  border-top:1px solid #222;
  z-index:30;
}
.banner-slot a{ text-decoration:none; padding:8px 12px; border:1px dashed #444; border-radius:10px; color:#ddd }
.main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(8px, 3vw, 24px);
  padding-bottom: calc(var(--banner-h) + var(--safe-bottom) + clamp(8px, 2vw, 16px));
}
.playspace{
  width: min(95vw, 700px);
  aspect-ratio: 1/1;
  background: radial-gradient(120% 120% at 20% 20%, #1c1c1c 0%, #0f0f0f 70%);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  position:relative;
  overflow:hidden;
}

.badge{
  background: rgba(0,0,0,.45);
  padding: 8px 12px; border-radius: 999px;
  display:flex; align-items:center; gap:8px;
  font-size: var(--hud-size);
  line-height:1;
}
.badge .icon{font-size:1.4em}
.center-cta{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.cta-btn{
  font-size: clamp(20px, 5vw, 36px);
  padding: clamp(12px, 3vw, 20px) clamp(24px, 5vw, 36px);
  border-radius: 999px;
  background:#fff;color:#111;border:0;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
/* Splash screen */
.splash{
  position:absolute; inset:0; background:rgba(0,0,0,.86); color:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding: clamp(16px, 5vw, 40px);
  z-index:10;
}
.splash-card{
  background: #121212; border:1px solid #222; border-radius:20px;
  padding: clamp(16px, 4vw, 28px); max-width: 720px;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.splash h1{margin:0 0 8px 0; font-size: clamp(22px, 5vw, 34px)}
.splash p{margin:6px 0; font-size: clamp(14px, 3.2vw, 18px); color:#ddd}
.splash .hint{opacity:.75; font-size: clamp(12px, 2.5vw, 14px)}
/* End modal */
.modal{
  position:absolute; inset:0; background:rgba(0,0,0,.7);
  display:none; align-items:center; justify-content:center; z-index:12;
}
.modal-inner{
  background:#161616; border:1px solid #2b2b2b; border-radius:18px; padding:20px; width:min(90vw, 480px);
  text-align:center;
}
.modal h2{margin:0 0 10px 0; font-size: clamp(18px, 4.5vw, 28px)}
.modal p{color:#ccc; font-size: clamp(14px, 3vw, 16px)}
.buttons{display:flex; gap:12px; justify-content:center; margin-top:14px; flex-wrap:wrap}
.btn{background:#fff;color:#111;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;font-size: clamp(14px, 3.5vw, 16px)}
.btn.secondary{background:#222;color:#eee;border:1px solid #333}
/* Doc pages */
body.doc{padding:24px; max-width:880px; margin:auto}
@media (orientation: landscape){
  .main{ padding-bottom: calc(var(--banner-h) + var(--safe-bottom) + 8px) }
}

.footer-links{
  text-align:center;
  margin: 8px 0 6px 0;
  font-size: clamp(12px, 2.8vw, 14px);
  color:#aaa;
}
.footer-links a{ color:#9ad; text-decoration:none; margin: 0 6px }
.footer-links a:hover{ text-decoration:underline }

.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: clamp(8px, 2vw, 16px);
  margin: 0 auto;
  width: min(95vw, 900px);
}
.legal-links{
  font-size: clamp(12px, 2.5vw, 16px);
}
.legal-links a{
  color:#9ad;
  text-decoration:none;
  margin:0 4px;
}
.legal-links a:hover{
  text-decoration:underline;
}
.playspace{
  width: min(95vw, 900px);
  flex:1;
  aspect-ratio: 1/1;
  background: radial-gradient(120% 120% at 20% 20%, #1c1c1c 0%, #0f0f0f 70%);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  margin: 0 auto;
  position:relative;
  overflow:hidden;
}
.main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-bottom: calc(var(--banner-h) + var(--safe-bottom));
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; padding: clamp(8px, 2.5vw, 14px) clamp(10px, 3vw, 20px);
  position:relative; z-index:5;
}
.hud-outside{ display:flex; gap:10px; flex-wrap:wrap }
.legal-links{ font-size: clamp(12px, 2.6vw, 14px); color:#aaa }
.legal-links a{ color:#9ad; text-decoration:none; margin: 0 6px }
.legal-links a:hover{ text-decoration:underline }

/* Make main a column so playspace can fill space between top and bottom */
.main{
  flex:1; display:flex; flex-direction:column;
  padding: 0 clamp(8px, 3vw, 24px);
  padding-bottom: calc(var(--banner-h) + var(--safe-bottom) + clamp(8px, 2vw, 16px));
}

/* Playspace fills remaining vertical room and full width */
.playspace{
  width: 100%;
  height: 100%;
  min-height: 320px;
  background: radial-gradient(120% 120% at 20% 20%, #1c1c1c 0%, #0f0f0f 70%);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  position:relative;
  overflow:hidden;
  flex: 1;
}

/* Center CTA remains centered */
.center-cta{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }


/* --- TIPITY Arcade Theme: VoltRiot --- */
:root{
  --arcade-accent: #00e5ff;
  --arcade-accent-2: #ff2bd6;
}
.playspace{
  background: radial-gradient(120% 120% at 20% 20%, #1b1422 0%, #0b0b12 70%);
  box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 18px rgba(0,229,255,.25), 0 0 24px rgba(255,43,214,.15);
  border: 1px solid rgba(255,255,255,.06);
}
.cta-btn{
  text-shadow: 0 0 10px rgba(255,255,255,.4);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), 0 0 16px rgba(0,229,255,.35);
}
.badge{
  background: linear-gradient(135deg, rgba(0,229,255,.18), rgba(255,43,214,.18));
  border: 1px solid rgba(255,255,255,.08);
}
.topbar{
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
}
/* subtle arcade scanline overlay */
.playspace::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03), rgba(255,255,255,.03) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: overlay;
}


/* === TIPITY Safe Area & Adsense Gating (Hotfix) === */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --hud-gap: 12px;
  --banner-h: 60px;
}

.app-shell{
  min-height: 100vh;
  padding-top: calc(var(--safe-top) + var(--hud-gap));
  padding-bottom: calc(var(--safe-bottom) + var(--banner-h) + 12px);
  display: flex;
  flex-direction: column;
}

.hud{ position: sticky; top: 0; z-index: 10; }
.modal,.modal-backdrop{ z-index: 1000; }

.adsense-banner{
  position: fixed;
  left:0; right:0; bottom:0;
  height: var(--banner-h);
  display:flex; align-items:center; justify-content:center;
  z-index: 20;
  background:#fff; border-top:1px solid rgba(0,0,0,.08);
}
.in-app .adsense-banner{ display:none !important; }