*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh;color:#102b62;background:#172f5d}
.gate{
 min-height:100vh;display:grid;place-items:center;padding:24px;
 background:
   linear-gradient(rgba(12,28,67,.13),rgba(12,28,67,.16)),
   url("assets/game-room.png") center center/cover no-repeat;
}
.gate-card{
 width:min(760px,94vw);padding:38px 42px 32px;text-align:center;
 border-radius:34px;background:rgba(247,250,255,.88);
 border:1px solid rgba(255,255,255,.72);
 box-shadow:0 24px 70px rgba(12,22,58,.35);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.controller{font-size:5.1rem;line-height:1;margin-bottom:10px;filter:drop-shadow(0 7px 8px rgba(0,0,0,.16))}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-weight:1000;font-size:1.05rem;margin:4px 0 12px;color:#0d3a91}
h1{font-size:clamp(3rem,7vw,5.5rem);line-height:.98;margin:0;color:#102d6a;letter-spacing:-.04em}
.question{font-size:clamp(1.2rem,2.5vw,1.7rem);font-weight:850;margin:25px 0 18px;color:#102d62}
.gate-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px}
input{
 width:100%;min-height:70px;padding:0 20px;border:2px solid rgba(30,72,135,.12);
 border-radius:17px;background:rgba(255,255,255,.95);font-size:1.18rem;color:#163260;
 outline:none;box-shadow:0 7px 20px rgba(34,54,100,.08)
}
input:focus{border-color:#3b8ff1;box-shadow:0 0 0 4px rgba(59,143,241,.15)}
button{
 min-height:70px;padding:0 27px;border:0;border-radius:17px;background:#ffd414;color:#102d62;
 font-size:1.14rem;font-weight:1000;cursor:pointer;box-shadow:0 7px 18px rgba(153,108,0,.22);
 touch-action:manipulation
}
button:hover{filter:brightness(1.03);transform:translateY(-1px)}
button:active{transform:translateY(1px)}
button span{font-size:1.5rem;margin-left:7px}
.message{min-height:29px;padding-top:8px;color:#a62c38;font-weight:850}
.note{margin:8px 0 0;font-size:1rem;color:#243c68}
@media(max-width:650px){
 .gate{padding:12px;background-position:center}
 .gate-card{padding:25px 16px 22px;border-radius:25px}
 .controller{font-size:4rem}h1{font-size:3rem}
 .gate-row{grid-template-columns:1fr}
 input,button{min-height:58px}
 button{width:100%}
 .note{font-size:.88rem}
}
@media(max-height:620px) and (orientation:landscape){
 .gate-card{padding:16px 24px}.controller{font-size:3rem}.eyebrow{margin:2px 0 6px}
 h1{font-size:2.7rem}.question{margin:10px 0}.note{margin-top:2px}
 input,button{min-height:52px}
}