*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:#07111f;color:#fff;font-family:Arial,sans-serif;display:flex;align-items:center;justify-content:center;padding:18px}
.box{width:min(760px,96vw);background:#0f1f35;border:1px solid #28445f;border-radius:24px;padding:28px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.28)}
h1{margin:0 0 12px;font-size:clamp(30px,7vw,54px)}
.muted{color:#cbd5e1}
input{width:100%;border:0;border-radius:16px;padding:17px;font-size:24px;text-align:center;margin:10px 0;background:#fff;color:#111827}
button{width:100%;border:0;border-radius:16px;padding:16px;font-size:22px;font-weight:900;background:#facc15;color:#422006;cursor:pointer;margin-top:8px}
.timer{display:inline-flex;align-items:center;gap:8px;background:#facc15;color:#422006;border-radius:999px;padding:10px 18px;font-weight:900;margin:12px 0}
.timer strong{font-size:30px}
.question{font-size:clamp(28px,6vw,50px);font-weight:900;margin:20px 0;line-height:1.2}
.answers{display:grid;gap:14px}
.answer{border:0;border-radius:18px;padding:18px;font-size:clamp(20px,5vw,30px);font-weight:900;background:#18304d;color:white;cursor:pointer;text-align:right}
.answer:disabled{cursor:not-allowed;opacity:.68}
.answer.selected{background:#2563eb}
.media{margin:0 auto 18px;max-width:720px;border-radius:16px;overflow:hidden;background:#111827}
.media img,.media video{width:100%;max-height:34vh;object-fit:contain;display:block}
.error{background:#fee2e2;color:#7f1d1d;border-radius:14px;padding:12px;margin-bottom:14px;font-weight:900}
.lobbyMode{padding:0;background:#050816;overflow:hidden}
.lobbyMode .box{position:relative;z-index:2;background:transparent;border:0;box-shadow:none;width:min(980px,94vw)}
.playMode{padding:0;background:#06111f;overflow:hidden}
.playMode .box{position:relative;z-index:2;background:transparent;border:0;box-shadow:none;width:min(1100px,94vw)}
.playMode .box>h1{display:none}
.playMode .question{font-size:clamp(34px,5vw,72px);line-height:1.16;margin:0 0 26px;text-shadow:0 8px 30px rgba(0,0,0,.35)}
.playMode .answers{grid-template-columns:1fr 1fr;gap:16px;text-align:right}
.playMode .answer{background:rgba(15,23,42,.92);border:2px solid rgba(147,197,253,.28);border-radius:18px;padding:20px 22px;font-size:clamp(20px,2.6vw,34px);font-weight:900;display:flex;justify-content:space-between;gap:16px;align-items:center}
.playMode .timer{position:fixed;left:28px;bottom:28px;background:#facc15;color:#422006;border-radius:18px;padding:16px 24px;text-align:center;font-weight:900;z-index:3}
.playMode .timer strong{display:block;font-size:52px;line-height:1}
.bgVideo{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;background:#020617;z-index:0;display:none}
.svg-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#fff;display:none}
.svg-background{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.svg-background svg,.svg-background img{display:block;width:100vw;height:100vh;object-fit:cover}
.cloud-row{position:absolute;left:2vw;right:2vw;bottom:0;display:grid;grid-template-columns:repeat(var(--cloud-count),minmax(70px,1fr));align-items:end;gap:clamp(4px,1vw,18px);z-index:1;pointer-events:none}
.cloud{width:100%;max-height:26vh;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(15,23,42,.16));transform:translateY(10%)}
.cloud-2{transform:translateY(4%) scale(.96)}
.cloud-3{transform:translateY(14%) scale(1.06)}
.cloud-4{transform:translateY(7%) scale(.9)}
.shade{position:fixed;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.2),rgba(2,6,23,.78));z-index:1;display:none}
.lobbyMode .bgVideo,.lobbyMode .shade,.playMode .bgVideo,.playMode .shade{display:block}
.lobbyMode .svg-bg,.playMode .svg-bg{display:block}
.svg-template .bgVideo{display:none!important}
.svg-template .shade{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.22) 55%,rgba(255,255,255,.52))}
.lobbyTitle{font-size:clamp(38px,8vw,82px);font-weight:900;text-shadow:0 10px 38px rgba(0,0,0,.48)}
.lobbySub{font-size:clamp(18px,4vw,30px);color:#dbeafe;font-weight:800;text-shadow:0 6px 22px rgba(0,0,0,.42)}
.lobbyPlayers{margin:28px auto 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:860px}
.lobbyPlayer{background:rgba(29,78,216,.92);border:1px solid #60a5fa;border-radius:999px;padding:10px 16px;font-size:clamp(16px,3vw,22px);font-weight:900}
.svg-template .cloud-row{display:none}
.svg-template .cloudLobbyPlayers{max-width:min(1800px,98vw);align-items:flex-end;gap:clamp(6px,1vw,24px);margin-top:34px}
.svg-template .lobbyPlayer.cloud-player{--cloud-svg-scale:clamp(1.04,.25vw + .92,1.32);position:relative;flex:1 1 0;min-width:clamp(210px,13vw,420px);max-width:clamp(460px,24vw,880px);height:clamp(250px,28vh,520px);display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:0;padding:0;color:#172554;text-align:center;text-shadow:0 2px 10px rgba(255,255,255,.9)}
.svg-template .lobbyPlayer.cloud-player svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(15,23,42,.18));transform:scale(var(--cloud-svg-scale));transform-origin:center}
.svg-template .lobbyPlayer.cloud-player span{position:relative;z-index:1;display:block;max-width:84%;font-size:clamp(18px,2.3vw,34px);font-weight:900;line-height:1.08;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}
.svg-template .cloud-player-2{transform:translateY(-8px) scale(.96)}
.svg-template .cloud-player-3{transform:translateY(6px) scale(1.04)}
.svg-template .cloud-player-4{transform:translateY(-3px) scale(.92)}
.svg-template .template-svg-frame,.svg-template .template-answer-frame{position:relative;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible}
.svg-template .template-svg-frame>svg,.svg-template .template-answer-frame>svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:0;filter:drop-shadow(0 12px 20px rgba(15,23,42,.16))}
.svg-template .template-svg-content{position:relative;z-index:1}
.svg-template .template-question-frame{width:min(980px,86vw);min-height:clamp(104px,13vh,168px);margin:0 auto 24px;padding:clamp(22px,3vw,38px) clamp(54px,7vw,96px);display:flex;align-items:center;justify-content:center;color:#081d4f;text-shadow:none}
.svg-template .template-question-frame .template-svg-content{display:block;font-size:clamp(30px,4.3vw,62px);font-weight:900;line-height:1.08}
.svg-template .template-answer-frame{min-height:clamp(78px,9vh,122px);padding:clamp(18px,2.2vw,28px) clamp(34px,4vw,58px);color:#081d4f;text-align:center;text-shadow:none}
.svg-template .template-answer-frame .template-svg-content{display:block;width:100%;font-size:clamp(20px,2.4vw,32px);font-weight:900;line-height:1.08}
.lobbyEmpty{color:#dbeafe;font-size:18px;font-weight:800}
.rankBox{display:grid;gap:10px;text-align:right;margin-top:16px}
.rankRow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#18304d;border-radius:14px;padding:12px 14px;font-size:20px;font-weight:900}
.bar{height:14px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:8px}
.bar span{display:block;height:100%;background:#60a5fa}
@media(max-width:760px){.playMode{overflow:auto}.playMode .answers{grid-template-columns:1fr}.playMode .timer{position:static;margin:12px auto}}
@media(min-width:1920px){.svg-template .cloudLobbyPlayers{max-width:min(2400px,98vw)}.svg-template .lobbyPlayer.cloud-player{--cloud-svg-scale:clamp(1.18,.18vw + .95,1.55);height:clamp(330px,30vh,680px);min-width:clamp(300px,14vw,540px);max-width:clamp(620px,25vw,1100px)}}