/* ===== Gerbang Token: versi tenang & elegan =====
   Satu hal yang menonjol: judul serif. Sisanya sengaja sederhana. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Jost:wght@400;500&display=swap");

#tokenGate{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  padding:16px; overflow:auto;
  font-family:"Jost","Helvetica Neue",system-ui,sans-serif;
  font-weight:400; color:#f6ebe4; text-shadow:none;
  background:
    linear-gradient(rgba(20,9,16,.62), rgba(20,9,16,.8)),
    url("papan.jpeg") center/cover no-repeat #1b0f16;
}

.tg-card{
  width:min(400px,100%);
  padding:clamp(20px,5vh,40px) clamp(20px,5vw,36px);
  display:flex; flex-direction:column; gap:clamp(10px,2.2vh,16px);
  text-align:center;
  background:rgba(27,15,22,.6);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(246,235,228,.22);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:tgIn .5s ease-out;
}
@keyframes tgIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.tg-brand{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:600; font-size:clamp(30px,7vh,44px); line-height:1.05; letter-spacing:.01em;
  color:#fbefe6;
}
.tg-sub{
  margin:0; font-size:15px; line-height:1.55; font-weight:400;
  color:rgba(246,235,228,.78);
}

.tg-card input{
  width:100%; margin-top:clamp(2px,1vh,8px);
  padding:14px 12px; border-radius:10px;
  border:1px solid rgba(246,235,228,.35);
  background:rgba(255,255,255,.07);
  color:#fff; font:500 18px/1 "Jost",system-ui,sans-serif;
  letter-spacing:.14em; text-align:center; text-transform:uppercase;
  user-select:text; -webkit-user-select:text;
  transition:border-color .15s, box-shadow .15s;
}
.tg-card input::placeholder{ color:rgba(246,235,228,.38); letter-spacing:.1em }
.tg-card input:focus{ outline:none; border-color:#e9b8a6; box-shadow:0 0 0 3px rgba(233,184,166,.22) }

/* Tombol: datar, tanpa efek 3D (menimpa gaya tombol global di style.css) */
.tg-card button{
  width:100%; padding:14px; border:0; border-radius:10px;
  background:#f1d5c4; color:#2a1520;
  font:500 16px/1 "Jost",system-ui,sans-serif; letter-spacing:.04em; text-shadow:none;
  box-shadow:none; backdrop-filter:none; cursor:pointer;
  transition:background .15s, transform .08s;
}
.tg-card button:hover{ background:#f7e2d4 }
.tg-card button:active{ transform:translateY(1px); background:#e8c8b5; box-shadow:none }
.tg-card button:disabled{ opacity:.55; cursor:default }
.tg-card button:focus-visible{ outline:2px solid #e9b8a6; outline-offset:3px }

.tg-msg{ margin:0; min-height:20px; font-size:14px; line-height:1.4; color:#f2b8b8 }
.tg-msg.ok{ color:#bfe3cf }
.tg-foot{ margin:0; font-size:12px; color:rgba(246,235,228,.45); letter-spacing:.04em }

/* Selama gerbang tampil, sembunyikan semua layar game */
body.phase-gate #lobby, body.phase-gate #board, body.phase-gate #modal,
body.phase-gate #miniIntro, body.phase-gate #arena, body.phase-gate #floaties{ display:none }

@media (prefers-reduced-motion:reduce){ .tg-card{ animation:none } }