/* radiona-kviz/home.css (FULL FILE) */
:root{
  --ink:#eaf1ff;
  --muted:#a9b7cf;

  --amethyst:#8b6dff;
  --rose:#ff5fa2;
  --aqua:#2dd4bf;
  --citrine:#ffd166;

  --bg0:#070a12;
  --bg1:#0b1020;
  --bg2:#0f1630;

  --card: rgba(14, 20, 44, 0.62);
  --outline: rgba(234,241,255,0.12);

  --shadow: 0 28px 80px rgba(0,0,0,0.55);
  --shadow2: 0 14px 32px rgba(0,0,0,0.38);

  --r-lg: 28px;
  --r-md: 20px;

  --focus: 0 0 0 5px rgba(139,109,255,0.25);

  /* Touch sizing */
  --tap-card-pad: 16px;
  --tap-icon: 58px;
  --tap-gap: 14px;

  /* Visual tweaks */
  --card-outline-strong: rgba(234,241,255,0.16);
  --card-outline-strong2: rgba(234,241,255,0.20);
  --press-shadow: 0 10px 22px rgba(0,0,0,0.40);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);

  background:
    radial-gradient(1200px 900px at 12% 18%, rgba(139,109,255,0.18), transparent 65%),
    radial-gradient(1200px 900px at 88% 22%, rgba(45,212,191,0.14), transparent 65%),
    radial-gradient(1400px 1000px at 72% 82%, rgba(255,95,162,0.14), transparent 65%),
    radial-gradient(1600px 1200px at 28% 76%, rgba(255,255,255,0.05), transparent 70%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg2));
  position: relative;
  overflow-x: hidden;
}

/* =========================================================
   BACKGROUND SILHOUETTES (4 LAYERS + ANIMATION)
   - Visible in all 4 corners
   - Subtle drift (transform only)
========================================================= */

body::before,
body::after,
.bg::before,
.bg::after{
  position: fixed;
  pointer-events: none;
  z-index: 0;
  white-space: pre;
  line-height: 1.75;
  letter-spacing: 26px;
  color: rgba(255,255,255,0.34);
  text-shadow:
    0 30px 80px rgba(0,0,0,0.85),
    0 0 30px rgba(139,109,255,0.16),
    0 0 30px rgba(45,212,191,0.12),
    0 0 30px rgba(255,95,162,0.10);
  filter: blur(0.55px);
  mix-blend-mode: screen;
  will-change: transform;
}

/* Top-left */
body::before{
  content:
"             \A\
             \A\
             ";
  font-size: clamp(40px, 4.6vw, 110px);
  top: 4%;
  left: 3%;
  transform: translate3d(0,0,0) rotate(-10deg);
  opacity: 0.14;
  animation: driftA 26s ease-in-out infinite;
}

/* Top-right */
body::after{
  content:
"                \A\
           \A\
                ";
  font-size: clamp(38px, 4.4vw, 106px);
  top: 6%;
  right: 2%;
  transform: translate3d(0,0,0) rotate(8deg);
  opacity: 0.12;
  animation: driftB 30s ease-in-out infinite;
}

/* Bottom-left */
.bg::before{
  content:
"                \A\
           \A\
                ";
  font-size: clamp(38px, 4.4vw, 106px);
  bottom: 6%;
  left: 2%;
  transform: translate3d(0,0,0) rotate(-7deg);
  opacity: 0.11;
  animation: driftC 34s ease-in-out infinite;
}

/* Bottom-right */
.bg::after{
  content:
"               \A\
           \A\
               ";
  font-size: clamp(40px, 4.6vw, 110px);
  bottom: 4%;
  right: 3%;
  transform: translate3d(0,0,0) rotate(10deg);
  opacity: 0.11;
  animation: driftD 38s ease-in-out infinite;
}

/* Drift animations (GPU-safe: transform only) */
@keyframes driftA{
  0%{ transform: translate3d(0,0,0) rotate(-10deg); }
  50%{ transform: translate3d(22px,14px,0) rotate(-8deg); }
  100%{ transform: translate3d(0,0,0) rotate(-10deg); }
}
@keyframes driftB{
  0%{ transform: translate3d(0,0,0) rotate(8deg); }
  50%{ transform: translate3d(-18px,16px,0) rotate(6deg); }
  100%{ transform: translate3d(0,0,0) rotate(8deg); }
}
@keyframes driftC{
  0%{ transform: translate3d(0,0,0) rotate(-7deg); }
  50%{ transform: translate3d(18px,-16px,0) rotate(-5deg); }
  100%{ transform: translate3d(0,0,0) rotate(-7deg); }
}
@keyframes driftD{
  0%{ transform: translate3d(0,0,0) rotate(10deg); }
  50%{ transform: translate3d(-20px,-14px,0) rotate(8deg); }
  100%{ transform: translate3d(0,0,0) rotate(10deg); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  body::before,
  body::after,
  .bg::before,
  .bg::after{
    animation: none !important;
  }
}

/* ========================================================= */

.bg{
  min-height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:32px 16px;
  position: relative;
  z-index: 1;
}

.app{ width:min(980px, 100%); }

/* topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.brand{ display:flex; align-items:center; gap:12px; }

.logo{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius: 18px;
  color:white;
  font-size:24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22), transparent 45%),
    linear-gradient(135deg, var(--amethyst), var(--rose));
  box-shadow: var(--shadow2);
  border: 1px solid rgba(234,241,255,0.22);
}

.brand-title{ font-weight:1000; font-size:18px; }
.brand-sub{ font-size:13px; color:var(--muted); font-weight:900; }

/* card */
.card{
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 22px;
  backdrop-filter: blur(14px);
  position:relative;
  overflow: hidden; /* needed for vignette */
}

/*  NEW: subtle vignette/backplate so content pops (reduces bg distraction) */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius: inherit;
  background:
    radial-gradient(900px 520px at 50% 20%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(1100px 700px at 50% 120%, rgba(0,0,0,0.40), transparent 55%),
    linear-gradient(135deg, rgba(139,109,255,0.10), rgba(45,212,191,0.06), rgba(255,95,162,0.06));
  opacity: 0.9;
}

/* keep actual content above vignette */
.card > *{ position: relative; z-index: 1; }

/* search hidden everywhere */
.hub-tools{ display:none !important; }

/* game grid */
.game-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tap-gap);
}

/*  NEW: better tap feedback + slightly stronger borders */
.game-card{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: var(--tap-card-pad);
  border-radius: 22px;
  border: 1px solid var(--card-outline-strong);
  background: rgba(10, 14, 28, 0.48);
  box-shadow: 0 18px 44px rgba(0,0,0,0.42);
  text-decoration:none;
  color: inherit;

  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* keep hover for mouse/trackpad */
.game-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55);
  border-color: var(--card-outline-strong2);
}

/*  press feedback (touch + mouse) */
.game-card:active{
  transform: translateY(-1px) scale(0.992);
  box-shadow: var(--press-shadow);
  border-color: rgba(234,241,255,0.22);
}

/*  keyboard focus (for accessibility, doesn’t hurt kiosk) */
.game-card:focus-visible{
  outline: none;
  box-shadow: var(--shadow2), var(--focus);
  border-color: rgba(234,241,255,0.24);
}

.game-icon{
  width: var(--tap-icon);
  height: var(--tap-icon);
  border-radius: 18px;
  display:grid;
  place-items:center;
  font-size: 30px;
}

.game-icon.has-img{
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.game-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ========= RESPONSIVE ========= */
@media (max-width: 900px){
  .game-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .game-grid{ grid-template-columns: 1fr; }
}

/*  Touch screens: remove hover-lift (prevents weird “stuck hover” on some kiosks)
   and increase tap targets a bit more */
@media (pointer: coarse){
  :root{
    --tap-card-pad: 18px;
    --tap-icon: 64px;
    --tap-gap: 16px;
    --focus: 0 0 0 7px rgba(139,109,255,0.28);
  }

  .game-card:hover{
    transform: none;
    box-shadow: 0 18px 44px rgba(0,0,0,0.42);
  }

  .game-card:active{
    transform: scale(0.988);
    box-shadow: 0 10px 22px rgba(0,0,0,0.40);
  }
}

.credits{
  margin-top: 12px;
  text-align:center;
  font-size: 12px;
  font-weight: 900;
  color: rgba(169,183,207,0.95);
}
/* HPM professional cleanup: emoji placeholders are intentionally hidden. */
.question-emoji,.result-emoji,.learn-emoji,.missed-emoji{display:none!important}