*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#061528;font-family:Arial,sans-serif;color:#123a63}
#app{position:relative;width:100vw;height:100vh;overflow:hidden}
#game3d{width:100vw;height:100vh;display:block;background:#88d9ff}
.hidden{display:none!important}

.overlay{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:linear-gradient(#83d9ff,#fff2bf)}
.card{width:min(880px,92vw);background:rgba(255,255,255,.96);border:5px solid #fff;border-radius:38px;padding:38px;text-align:center;box-shadow:0 24px 70px rgba(20,50,80,.28)}
.card h1{font-size:68px;margin:0;color:#0f3761}
.card p{font-size:26px;font-weight:900;margin:8px 0;color:#0f3761}
.card small{display:block;font-size:18px;font-weight:800;margin-bottom:22px;color:#0f3761}
.card label{display:block;font-size:20px;font-weight:900;margin-bottom:8px}
.card input{width:min(520px,90%);border:4px solid #bfe4ff;border-radius:24px;padding:16px 18px;font-size:24px;text-align:center;font-weight:900;color:#123a63;outline:none}
.card input:focus{border-color:#2f8ed8;box-shadow:0 0 0 5px rgba(47,142,216,.16)}
button{border:0;cursor:pointer;font-family:Arial,sans-serif;font-weight:900}
.primary,.back{background:#2f8ed8;color:white;border-radius:999px;padding:16px 28px;font-size:20px;box-shadow:0 8px 0 #206ca6}
.secondary{background:white;color:#1b5b88;border:3px solid #bfe4ff;border-radius:999px;padding:12px 20px;margin-left:10px;font-size:16px}
.avatars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px auto;width:min(520px,90%)}
.avatar{background:#fff;color:#123a63;border:3px solid #bfe4ff;border-radius:20px;padding:12px 8px;font-size:16px}
.avatar.selected{background:#fff2bf;border-color:#ffdb67;box-shadow:0 5px 0 #c79a45}
#status{margin-top:14px;font-weight:900;color:#36a553}

.hud{position:absolute;top:18px;left:18px;right:18px;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.profile{display:flex;gap:12px;align-items:center;background:rgba(78,45,28,.84);color:white;border-radius:28px;padding:12px 18px;border:3px solid rgba(255,255,255,.55)}
#avatarIcon{width:58px;height:58px;display:grid;place-items:center;background:white;border-radius:50%;font-size:32px}
.hint{background:rgba(255,255,255,.93);border:4px solid white;border-radius:24px;padding:16px 24px;font-size:18px;font-weight:900;color:#123a63;max-width:520px;text-align:center;box-shadow:0 10px 24px rgba(20,60,90,.18)}

.touch{position:absolute;right:24px;bottom:24px;z-index:12;display:grid;gap:8px;justify-items:center}
.touch button{width:70px;height:64px;border-radius:20px;background:rgba(255,255,255,.93);border:4px solid #e2f4ff;color:#123a63;font-size:27px}
.touch div{display:flex;gap:8px}

.activity{position:absolute;inset:0;z-index:30;background:linear-gradient(#a8e5ff,#e9f9ff 65%,#72bd68 65%);padding:28px;overflow:auto}
.back{position:absolute;top:22px;left:24px;margin:0;font-size:18px;padding:13px 22px}
#content{width:min(980px,92vw);margin:100px auto 0;background:rgba(255,255,255,.96);border:5px solid #fff;border-radius:36px;padding:34px;text-align:center;box-shadow:0 20px 54px rgba(20,60,90,.22)}
#content h2{font-size:48px;margin:0 0 12px}
#content p{font-size:24px;font-weight:800;line-height:1.4}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.tile{background:#fff2bf;border:4px solid #ffdb67;border-radius:28px;padding:22px;font-size:24px;font-weight:900;box-shadow:0 8px 0 #c79a45}
.big{font-size:150px;color:#c9303a;font-weight:900;line-height:1}
.objects{font-size:72px;letter-spacing:8px;margin:20px 0}
.trace{width:min(460px,90vw);height:260px;margin:20px auto;background:white;border:5px dashed #89c9e8;border-radius:32px;position:relative}
.trace canvas{width:100%;height:100%;touch-action:none}
.guide{position:absolute;inset:0;display:grid;place-items:center;font-size:190px;font-weight:900;color:rgba(201,48,58,.18);pointer-events:none}
@media(max-width:750px){.avatars,.grid{grid-template-columns:1fr}.card h1{font-size:46px}.secondary{margin-left:0;margin-top:10px}}