:root{
  --cream: #FFF6E8;
  --ink: #221C14;
  --gold: #F2B93B;
  --gold-deep: #DB962A;
  --coral: #FF6B57;
  --crit: #E63946;
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  min-height:100%;
  background:radial-gradient(ellipse at 50% 30%, #3a2f4d 0%, #1c1626 55%, #0d0a13 100%);
  font-family:'Nanum Gothic', sans-serif;
  color:var(--cream);
  -webkit-user-select:none;
  user-select:none;
}
.home{
  position:relative;
  max-width:420px;
  min-height:100vh;
  margin:0 auto;
  padding:34px 22px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  overflow:hidden;
}
.rays{
  position:absolute;
  top:-30%;
  left:50%;
  width:240%;
  height:150%;
  transform:translateX(-50%);
  background:conic-gradient(from 0deg,
    rgba(242,185,59,0.08) 0deg, rgba(242,185,59,0) 10deg,
    rgba(242,185,59,0.08) 20deg, rgba(242,185,59,0) 30deg,
    rgba(242,185,59,0.08) 40deg, rgba(242,185,59,0) 50deg,
    rgba(242,185,59,0.08) 60deg, rgba(242,185,59,0) 70deg,
    rgba(242,185,59,0.08) 80deg, rgba(242,185,59,0) 90deg,
    rgba(242,185,59,0.08) 100deg, rgba(242,185,59,0) 110deg,
    rgba(242,185,59,0.08) 120deg, rgba(242,185,59,0) 130deg,
    rgba(242,185,59,0.08) 140deg, rgba(242,185,59,0) 150deg,
    rgba(242,185,59,0.08) 160deg, rgba(242,185,59,0) 170deg,
    rgba(242,185,59,0.08) 180deg, rgba(242,185,59,0) 190deg,
    rgba(242,185,59,0.08) 200deg, rgba(242,185,59,0) 210deg,
    rgba(242,185,59,0.08) 220deg, rgba(242,185,59,0) 230deg,
    rgba(242,185,59,0.08) 240deg, rgba(242,185,59,0) 250deg,
    rgba(242,185,59,0.08) 260deg, rgba(242,185,59,0) 270deg,
    rgba(242,185,59,0.08) 280deg, rgba(242,185,59,0) 290deg,
    rgba(242,185,59,0.08) 300deg, rgba(242,185,59,0) 310deg,
    rgba(242,185,59,0.08) 320deg, rgba(242,185,59,0) 330deg,
    rgba(242,185,59,0.08) 340deg, rgba(242,185,59,0) 350deg,
    rgba(242,185,59,0.08) 360deg);
  animation:raySpin 50s linear infinite;
  pointer-events:none;
}
@keyframes raySpin{ to{ transform:translateX(-50%) rotate(360deg); } }
.brand{ position:relative; z-index:2; text-align:center; }
.eyebrow{
  font-family:'Baloo 2', sans-serif;
  font-size:12px;
  letter-spacing:5px;
  color:var(--gold);
  font-weight:700;
  opacity:0.9;
}
h1{
  font-family:'Black Han Sans', sans-serif;
  font-size:44px;
  margin:4px 0 0;
  background:linear-gradient(180deg, #FFE9AE 0%, var(--gold) 55%, var(--crit) 130%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,0.4);
}
.me-card{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border-radius:18px;
  background:rgba(255,255,255,0.06);
  border:1.5px solid rgba(242,185,59,0.35);
}
#myChar{
  height:74px;
  width:auto;
  max-width:64px;
  object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.me-info{ display:flex; flex-direction:column; gap:3px; }
.me-name{ font-size:17px; font-weight:800; }
.me-points{
  font-family:'Baloo 2', sans-serif;
  font-size:14px;
  font-weight:800;
  color:var(--gold);
}
.me-edit{
  font-size:12px;
  color:rgba(255,246,232,0.75);
  text-decoration:underline;
  text-underline-offset:3px;
}
.menu{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.menu-btn{
  display:block;
  text-align:center;
  text-decoration:none;
  padding:16px;
  border:0;
  border-radius:16px;
  font-family:'Black Han Sans', sans-serif;
  font-size:20px;
  letter-spacing:1px;
  cursor:pointer;
}
.menu-btn.solo{
  color:#3A2410;
  background:linear-gradient(180deg, #FFD97A 0%, var(--gold-deep) 100%);
  box-shadow:0 5px 0 #A96F14, 0 12px 20px rgba(0,0,0,0.35);
}
.menu-btn.host{
  color:#FFF1E4;
  background:linear-gradient(180deg, #FF8A70 0%, var(--crit) 100%);
  box-shadow:0 5px 0 #9E1F2A, 0 12px 20px rgba(0,0,0,0.35);
}
.menu-btn.shop{
  color:#12242B;
  background:linear-gradient(180deg, #7ED9C0 0%, var(--mint, #4FBFA0) 100%);
  box-shadow:0 5px 0 #2E7A64, 0 12px 20px rgba(0,0,0,0.35);
  font-size:17px;
}
.menu-btn:active{ transform:translateY(3px); box-shadow:none; }
.join-box{
  display:flex;
  gap:8px;
}
#codeInput{
  flex:1;
  min-width:0;
  padding:12px;
  border-radius:14px;
  border:1.5px solid rgba(242,185,59,0.5);
  background:rgba(255,255,255,0.06);
  color:var(--cream);
  font-family:'Baloo 2', sans-serif;
  font-size:18px;
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;
  text-align:center;
  outline:none;
}
.join-play, .join-watch{
  padding:12px 14px;
  border:0;
  border-radius:14px;
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  color:#1c1626;
  background:var(--gold);
}
.join-watch{
  background:rgba(255,255,255,0.14);
  color:var(--cream);
}
.menu-btn.install{
  background:rgba(79,191,160,0.16);
  border:1.5px solid rgba(79,191,160,0.6);
  color:#BFE8D9;
  font-size:16px;
}
.ios-hint{
  margin:0;
  font-size:12px;
  color:rgba(255,246,232,0.6);
  text-align:center;
}
.hidden{ display:none !important; }
footer{
  position:relative;
  z-index:2;
  margin-top:auto;
  text-align:center;
}
footer p{
  margin:3px 0;
  font-size:11px;
  color:rgba(255,246,232,0.45);
}