:root{
  --notif-bg: rgba(16,16,16,0.9);
  --notif-radius:12px;
  --accent: #e6e6e6;
  --small:12px;
}

/* Full-viewport single-screen layout */
html,body,#app{
  height:100%;
  width:100%;
  margin:0;
  background:#000;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Hide label initially */
#splash{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:18px;
  background:#000;
}

#logo{
  width:28vmin;
  max-width:220px;
  opacity:0;
  transform:translateY(0) scale(1);
  transition:transform .35s cubic-bezier(.2,.9,.2,1), opacity .35s;
  will-change:transform, opacity;
  user-select:none;
  pointer-events:none;
}

/* Label uses a chunky pixel font if available; falls back to monospace */
@font-face{
  font-family: "MinecraftiaFallback";
  src: url("/Minecraftia-Regular.ttf") format("truetype"),
       local("Minecraftia"), local("Press Start 2P"), local("monospace");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
#label{
  font-family: "MinecraftiaFallback", monospace;
  font-weight:700;
  font-size:4.6vmin;
  color:var(--accent);
  opacity:0;
  transform:translateY(6px);
  letter-spacing:1px;
  text-align:center;
  pointer-events:none;
}

/* Notification UI */
.notification{
  position:fixed;
  right:18px;
  bottom:18px;
  min-width:220px;
  max-width:360px;
  background:var(--notif-bg);
  color:#eaeaea;
  border-radius:var(--notif-radius);
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  backdrop-filter: blur(6px) saturate(120%);
  opacity:0.6;
  transform:translateX(30px);
  will-change:transform,opacity;
}

/* small logo inside notif */
.notification img{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:6px;
  object-fit:contain;
  filter:brightness(1.05);
}

/* texts */
.not-texts{
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow:hidden;
}
.not-title{
  font-family:"MinecraftiaFallback", monospace;
  font-weight:700;
  font-size:13px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
}
.not-body{
  font-family:"MinecraftiaFallback", monospace;
  font-weight:400;
  font-size:12px;
  color:#d7d7d7;
  opacity:0.95;
}

/* Make everything fit one screen on mobile */
@media (max-height:600px){
  #logo{ width:34vmin; }
  #label{ font-size:5vmin; }
  .notification{ right:12px; bottom:12px; min-width:200px; padding:10px; }
}