/* =====================
   FONTS
===================== */
@font-face {
  font-family: 'Jacquard 12';
  src: url('fonts/Jacquard12-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Pixel Sans';
  src: url('fonts/PixelifySans-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}

/* Onboarding buttons */
#onboarding {
  position:fixed;
  inset:0;
  background:rgba(5,5,10,.85);
  backdrop-filter:blur(8px);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:999;
}

.onboard-box {
  width:320px;
  padding:24px;
  border-radius:14px;
  background:rgba(20,16,30,.95);
  border:1px solid rgba(160,120,255,.25);
  text-align:center;
  font-family:'Pixel Sans';
}

.onboard-box h2 {
  font-family:"Jacquard 12";
  margin-bottom:12px;
}

.onboard-box button {
  width:100%;
  margin:8px 0;
  padding:10px;
  border:none;
  border-radius:8px;
  background:#6a4cff;
  color:white;
  font-family:'Pixel Sans';
  cursor:pointer;
}

.hint {
  font-size:13px;
  opacity:.7;
  margin-top:6px;
}

#codeInput {
  width:100%;
  padding:10px;
  border-radius:8px;
  border:none;
  margin-top:10px;
  text-align:center;
  font-family:'Pixel Sans';
}

/* =====================
   BASE
===================== */
body {
  margin:0;
  padding:16px;
  font-family:sans-serif;
  color:#e6e6e6;
  background:#06040a;
  image-rendering:pixelated;
}

body.locked #class-select-wrapper,
body.locked h1,
body.locked #card-library {
  display: none;
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.015),
    rgba(255,255,255,.015) 1px,
    transparent 1px,
    transparent 2px
  );
  mix-blend-mode:overlay;
  opacity:.15;
}

h1 {
  font-family:"Jacquard 12";
  letter-spacing:.1em;
  text-align:center;
  margin:300px 0 16px;
}

body.started h1 {
  text-align:left;
  margin:12px 0 16px;
}

/* =====================
   STARS
===================== */
#stars,#stars2,#stars3{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

#stars{
  background:
    radial-gradient(1px 1px at 18% 32%, #f1e3a2, transparent),
    radial-gradient(1px 1px at 74% 22%, #e8d47a, transparent),
    radial-gradient(1px 1px at 42% 78%, #e2cc6c, transparent);
  background-size:320px 320px;
  animation:starDrift 140s linear infinite;
  opacity:.8;
}

#stars2{
  background:
    radial-gradient(1.8px 1.8px at 12% 48%, #f3e08a, transparent),
    radial-gradient(1.8px 1.8px at 86% 14%, #e6cf6a, transparent);
  background-size:520px 520px;
  animation:starDrift 200s linear infinite;
  opacity:.55;
}

#stars3{
  background:
    radial-gradient(2.6px 2.6px at 30% 40%, #ffeaa0, transparent);
  background-size:760px 760px;
  animation:starDrift 320s linear infinite;
  opacity:.45;
}

@keyframes starDrift{
  from{ transform:translateY(0); }
  to{ transform:translateY(-2000px); }
}

/* =====================
   CLASS SELECT
===================== */
#class-select-wrapper{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:10;
  transition:.6s ease;
}

body.started #class-select-wrapper{
  top:50%;
  left:24px;
  right:auto;
  bottom:auto;
  transform:translateY(-50%);
  justify-content:flex-start;
}

#class-select{
  display:flex;
  gap:16px;
}

body.started #class-select{
  flex-direction:column;
  gap:12px;
}

/* Buttons */
.deck-btn{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  perspective:900px;
}

.deck-btn img{
  width:130px;
  border-radius:12px;
  box-shadow:0 18px 45px rgba(0,0,0,.75);
  transition:.4s cubic-bezier(.16,1,.3,1);
  opacity:.5;
}

.deck-btn:hover img{
  transform:rotateX(10deg) rotateY(-8deg) scale(1.1);
  opacity:1;
}

.deck-btn.active img{
  box-shadow:0 30px 90px rgba(0,0,0,.9);
  filter:brightness(1.35);
  opacity:1;
}

/* Tooltip */
.class-btn-wrap{
  position:relative;
}

.class-btn-wrap::after{
  content:attr(data-desc);
  position:absolute;
  bottom:110%;
  left:50%;
  transform:translateX(-50%) translateY(6px);
  padding:8px 14px;
  width:320px;
  text-align:center;
  font-family:'Pixel Sans';
  font-size:15px;
  color:#e8e3ff;
  background:rgba(18,14,28,.95);
  border:1px solid rgba(160,120,255,.35);
  border-radius:10px;
  opacity:0;
  transition:.25s;
}

.class-btn-wrap:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

body.class-locked .class-btn-wrap::after{
  display:none;
}

/* =====================
   CARD LIBRARY
===================== */
#card-library{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:.5s ease;
}

body.started #card-library{
  opacity:1;
  pointer-events:auto;
}

.card{
  position:absolute;
  width:160px;
  padding:6px;
  cursor:pointer;
  perspective:1000px;
}

.card img{
  width:100%;
  border-radius:6px;
  transition:.15s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}

/* =====================
   OVERLAY
===================== */
#overlay{
  position:fixed;
  inset:0;
  background:rgba(10,10,15,.75);
  backdrop-filter:blur(6px);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:100;
  
}

#overlay{
  perspective: 1400px;
}

#overlay.active{
  display:flex;
}

.overlay-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
}

#overlay img{
  max-width:80vw;
  max-height:80vh;
  border-radius:12px;
}

.glint{
  position:absolute;
  inset:-40%;
  pointer-events:none;

  background:
    linear-gradient(
      115deg,
      transparent 30%,
      rgba(255, 255, 255, 0.55) 45%,
      rgba(255,255,255,.25) 50%,
      rgba(255,255,255,.55) 55%,
      transparent 70%
    );

  mix-blend-mode:screen;
  opacity:.55;
  transition:transform .08s linear;
}