:root{--bg:#140d06;--panel:#24180c;--panel2:#2c1d0e;--glass:rgba(40,26,12,.72);--line:#4a3519;--line2:#f2c14e26;--ink:#fbf1dc;--muted:#c9b28c;--gold:#f2c14e;--gold2:#ffe08a;--gold3:#a8772f;--green:#76c69a;--red:#e27460;--t0:#f5c84c;--t1:#c98236;--t2:#e0663f;--t3:#6fb0d8;--serif:Georgia,"Times New Roman",serif;color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(1100px 620px at 78% -8%,#7a521a70,transparent 62%),radial-gradient(900px 520px at 6% 108%,#5a3a145c,transparent 60%),linear-gradient(#1c1208,#0f0a05);background-attachment:fixed;overflow-x:hidden}
body:before{content:'';height:6px;flex:none;display:block;background:repeating-linear-gradient(90deg,var(--gold) 0 14px,transparent 14px 18px,var(--gold) 18px 22px,transparent 22px 34px);opacity:.85;box-shadow:0 0 18px #f2c14e55}
/* Тэнгэр, од, уулс */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sky:before{content:'';position:absolute;inset:0;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff9 50%,transparent),radial-gradient(1px 1px at 28% 8%,#fff7 50%,transparent),radial-gradient(1.4px 1.4px at 46% 22%,#fff8 50%,transparent),radial-gradient(1px 1px at 63% 12%,#fff6 50%,transparent),radial-gradient(1.3px 1.3px at 82% 26%,#fff8 50%,transparent),radial-gradient(1px 1px at 92% 6%,#fff6 50%,transparent),radial-gradient(1px 1px at 6% 40%,#fff5 50%,transparent),radial-gradient(1px 1px at 38% 36%,#fff4 50%,transparent),radial-gradient(1px 1px at 72% 40%,#fff4 50%,transparent);animation:twinkle 6s ease-in-out infinite alternate}
.sky:after{content:'';position:absolute;left:0;right:0;bottom:0;height:34vh;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cpath d='M0 240V130l110-46 80 30 130-78 120 64 90-26 150 70 120-54 140 44 110-64 130 56 110-30 150 48V240z' fill='%23281a0c' opacity='.75'/%3E%3Cpath d='M0 240V170l160-36 120 30 160-50 140 42 150-28 170 48 150-40 130 30 150-24 110 22V240z' fill='%231a1108'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;opacity:.9}
.sky i{position:absolute;bottom:-20px;width:4px;height:4px;border-radius:50%;background:var(--gold2);opacity:0;box-shadow:0 0 10px var(--gold);animation:mote 16s linear infinite}
.sky i:nth-child(1){left:6%;animation-delay:0s}.sky i:nth-child(2){left:15%;animation-delay:-3s;animation-duration:19s}.sky i:nth-child(3){left:24%;animation-delay:-7s}.sky i:nth-child(4){left:33%;animation-delay:-11s;animation-duration:21s}.sky i:nth-child(5){left:42%;animation-delay:-2s}.sky i:nth-child(6){left:51%;animation-delay:-9s;animation-duration:18s}.sky i:nth-child(7){left:60%;animation-delay:-5s}.sky i:nth-child(8){left:69%;animation-delay:-13s;animation-duration:22s}.sky i:nth-child(9){left:78%;animation-delay:-1s}.sky i:nth-child(10){left:86%;animation-delay:-8s;animation-duration:17s}.sky i:nth-child(11){left:93%;animation-delay:-4s}.sky i:nth-child(12){left:97%;animation-delay:-12s;animation-duration:20s}
header{width:100%;max-width:1440px;margin:0 auto;padding:20px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line2);gap:20px;flex:none}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--gold);font-size:18px;font-weight:700;letter-spacing:2px}
.brand svg{width:30px;height:40px;filter:drop-shadow(0 0 10px #f2c14e55);transition:transform .3s}
.brand:hover svg{transform:translateY(-3px) rotate(-4deg)}
.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:6px;color:var(--muted)}
nav{display:flex;align-items:center;gap:8px}
.tag{font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-right:14px}
.tool{display:inline-flex;align-items:center;gap:8px}
.tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button,input,textarea{font:inherit}
button{cursor:pointer;border:1px solid var(--line);transition:background .18s,transform .18s,border-color .18s,box-shadow .18s,color .18s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}
button:active:not(:disabled){transform:translateY(2px) scale(.98)}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ic{width:20px;height:20px;flex:none}
.quiet{background:#ffffff05;color:var(--ink);border-radius:8px;padding:10px 14px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.quiet .ic{width:16px;height:16px}
.primary{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,#c9902f);color:#2a1a06;border:1px solid #ffe08a;border-radius:9px;padding:14px 22px;font-weight:700;display:inline-flex;gap:12px;align-items:center;justify-content:center;box-shadow:0 4px 0 #7a4f18,0 10px 24px #0005;letter-spacing:.2px}
.primary:before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#fff8,transparent);transform:skewX(-20deg);transition:left .6s}
.primary:hover:not(:disabled):before{left:130%}
.primary:hover:not(:disabled){box-shadow:0 6px 0 #7a4f18,0 14px 30px #f2c14e30}
.primary:active:not(:disabled){box-shadow:0 1px 0 #7a4f18,0 4px 10px #0005;transform:translateY(3px)}
.primary .ic{width:22px;height:22px}
.primary.glow{animation:glowbtn 1.8s ease-in-out infinite}
.primary.busy{background:repeating-linear-gradient(-45deg,var(--gold) 0 12px,var(--gold2) 12px 24px);background-size:34px 34px;animation:busy .8s linear infinite}
.wide{width:100%}
main{width:100%;max-width:1320px;margin:0 auto;padding:0 5% 48px;flex:1}
.loading{text-align:center;padding:80px 0}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--gold);line-height:1.7}
.eyebrow>span{display:inline-block;width:6px;height:6px;background:var(--gold);border-radius:50%;margin-right:8px;box-shadow:0 0 0 0 #f2c14e88;animation:ping 2s infinite}
p{line-height:1.65;color:var(--muted)}
.temple{width:100%;max-height:300px;overflow:visible;display:block}
@font-face{font-family:"Mongol Bichig";src:local("Noto Sans Mongolian"),local("NotoSansMongolian-Regular"),local("Mongolian Baiti"),url(mongol.ttf) format("truetype");font-display:swap}
/* Нүүр: голдоо том гэр, яндангаас бичиг утаа шиг гарна */
.home{display:flex;flex-direction:column;align-items:center;gap:22px;padding:20px 0 10px}
.scene-wrap{width:100%;display:flex;justify-content:center;align-items:flex-end;padding-top:240px}
.scene{position:relative;width:min(900px,100%);aspect-ratio:600/370}
.scene .temple{position:absolute;inset:0;width:100%;height:100%;max-height:none;filter:drop-shadow(0 26px 30px #0007)}
.hero-temple .smoke{display:none}
.scene-glow{position:absolute;left:50%;top:48%;width:78%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#f2c14e30,#f2c14e0c 45%,transparent 66%);animation:breathe 6s ease-in-out infinite}
.smoke-text{position:absolute;left:53.42%;top:22.7%;width:0;height:0;z-index:40;pointer-events:none}
.puff{position:absolute;left:0;bottom:0;white-space:nowrap;transform-origin:50% 100%;color:rgba(248,242,230,.92);font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.1;text-shadow:0 0 4px rgba(255,255,255,.55),0 0 14px rgba(236,226,206,.55),0 0 30px rgba(220,205,180,.35),0 0 46px rgba(242,193,78,.2);opacity:0;will-change:transform,opacity,filter}
.puff b{display:inline-block;font-weight:inherit}
.puff.mong{font-family:"Mongol Bichig","Noto Sans Mongolian","Mongolian Baiti",sans-serif;writing-mode:vertical-lr;font-size:19px;font-weight:400}
.wisp{position:absolute;left:0;bottom:0;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,rgba(236,228,214,.9) 0,rgba(236,228,214,.35) 38%,rgba(236,228,214,0) 70%);opacity:0;pointer-events:none;will-change:transform,opacity}
.pipe{position:absolute;left:52.67%;top:22.7%;width:1.5%;height:8.1%;z-index:41;background:linear-gradient(90deg,#3a2c20,#5a4836 55%,#3a2c20);border-top:3px solid #6b5640;border-radius:1px;animation:fadein .4s 1.4s both}
.home .roles{display:flex;gap:18px;justify-content:center;width:min(660px,100%);flex:none}
.home .role{flex:1;padding:14px 20px;gap:16px}
.home .role-icon{min-width:52px;height:56px}
.home .role-icon .ic{width:32px;height:32px}
.home .role strong{font-size:28px;margin:0}
.role{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;text-align:left;padding:27px;background:linear-gradient(130deg,#3a2812,#22170b);border:1px solid #7a5a2a;border-radius:14px;color:var(--ink);animation:fadeup .7s .35s both}
.role:after{content:'';position:absolute;inset:0;background:radial-gradient(400px 120px at var(--mx,80%) 0,#f2c14e1e,transparent 70%);opacity:0;transition:opacity .3s}
.role:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 18px 40px #0006,0 0 0 1px #f2c14e55}
.role:hover:after{opacity:1}
.role:hover>.ic{transform:translateX(6px)}
.class-role{background:linear-gradient(130deg,#33230f,#1f150a);border-color:#6a4c22;animation-delay:.45s}
.role-icon{display:grid;place-items:center;min-width:66px;height:72px;color:var(--gold);border:1px solid #f2c14e40;border-radius:32px 32px 6px 6px;background:#f2c14e0a}
.role-icon .ic{width:42px;height:42px}
.role>.ic{margin-left:auto;width:28px;height:28px;color:var(--gold);transition:transform .25s}
.role strong{display:block;font-family:var(--serif);font-weight:400;font-size:32px;margin:6px 0}
.pagebar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:36px 0 24px;animation:fadeup .5s both}
.pagebar h2{font-family:var(--serif);font-size:36px;font-weight:400;margin:9px 0}
.pagebar p{font-size:13px;margin:0}
.panel{border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,#2a1c0dee,#1c1309ee);padding:24px;box-shadow:0 14px 40px #0004,inset 0 1px 0 #ffffff08}
.rise{animation:fadeup .5s both}
.narrow{max-width:480px;margin:20px auto 100px}
.editor-layout,.host-layout{display:grid;grid-template-columns:340px 1fr;gap:26px;align-items:start}
.editor-layout>.panel{position:sticky;top:20px}
.section-title{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.section-title .quiet{margin-left:auto}
.section-title h3{font-size:16px;margin:0}
.section-title b{font-size:11px;letter-spacing:1px;color:var(--gold)}
.num{border:1px solid var(--line);border-radius:6px;padding:6px 8px;color:var(--gold);font-size:11px}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:17px}
label small{font-size:10px;display:block;margin-top:5px}
input:not([type=range]):not([type=radio]):not([type=file]),textarea{display:block;width:100%;background:#160e06;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:8px;font-size:14px;transition:border-color .2s,box-shadow .2s}
input:not([type=range]):not([type=radio]):focus,textarea:focus{border-color:var(--gold3);box-shadow:0 0 0 4px #f2c14e18;outline:none}
textarea{resize:vertical;min-height:72px;line-height:1.5}
input[type=radio]{accent-color:var(--gold);width:18px;height:18px}
.row{display:flex;gap:12px;align-items:end}
.row label{max-width:95px;flex:1}
.row button{margin-bottom:17px;flex:2;font-size:12px;padding:14px 8px}
.muted{color:var(--muted);font-size:11px}
.editor-layout .section-title:not(:first-child){margin-top:30px}
.question-edit{margin-bottom:18px;padding:20px;animation:fadeup .45s calc(var(--k,0)*.05s) both}
.edit-options{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:10px}
.edit-option{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.edit-option input:not([type=radio]){margin:0}
.empty{padding:40px;text-align:center;border:1px dashed var(--line);border-radius:14px;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffffff03}
.empty>span{font-size:10px;letter-spacing:2px;color:var(--gold)}
.empty h3{font-size:19px;font-weight:400}
.empty p{font-size:13px}
.empty .temple{max-width:340px}
.pulse-dot{width:14px;height:14px;border-radius:50%;background:var(--gold);animation:ping 1.6s infinite}
.saved{margin-top:45px}
.saved-row{display:flex;align-items:center;gap:12px;padding:18px 12px;border-top:1px solid var(--line);border-radius:10px;transition:background .2s}
.saved-row:hover{background:#ffffff05}
.saved-row>div{margin-right:auto}
.saved-row h4{margin:0 0 5px}
.saved-row p{margin:0;font-size:12px}
.danger{color:var(--red)}
.lobby-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.lobby-grid .empty{grid-column:1/-1}
.join h3{font-family:var(--serif);font-size:25px;font-weight:400}
.join input{text-align:center;font-size:24px!important;letter-spacing:10px}
.live{display:inline-flex;align-items:center;border:1px solid #648d744a;border-radius:30px;color:#a5c9ae;padding:7px 12px;font-size:10px;letter-spacing:1px;background:#76c69a0d}
.live:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#92bca0;margin-right:8px;animation:ping 1.6s infinite;box-shadow:0 0 0 0 #92bca088}
.joincode{display:flex;gap:7px;margin:18px 0 26px}
.joincode span{flex:1;display:grid;place-items:center;height:62px;font-size:34px;color:var(--gold2);border:1px solid var(--gold3);border-radius:10px;background:#f2c14e0d;font-variant-numeric:tabular-nums;animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.joincode span:nth-child(2){animation-delay:.05s}.joincode span:nth-child(3){animation-delay:.1s}.joincode span:nth-child(4){animation-delay:.15s}.joincode span:nth-child(5){animation-delay:.2s}.joincode span:nth-child(6){animation-delay:.25s}
.host-actions{display:grid;gap:16px;margin-top:25px}
.scores{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:20px}
.scores.n1{grid-template-columns:1fr}
.score{display:flex;gap:16px;align-items:center;padding:16px}
.score-art{width:140px;flex:none}
.score h3{font-size:18px;margin:6px 0 10px}
.score em{display:block;font-style:normal;color:var(--gold);font-size:14px;margin-top:6px}
.score small{color:var(--muted)}
.host-question h3{line-height:1.6;font-family:var(--serif);font-weight:400;font-size:22px}
.host-answer{border:1px solid var(--line);border-radius:8px;padding:12px;font-size:14px;display:flex;gap:10px;align-items:center}
.host-answer b{color:var(--gold)}
.host-answer em{margin-left:auto;font-style:normal;font-size:11px;letter-spacing:1px}
.correct{background:#22473a!important;border-color:#80b38c!important;color:#d9f4d5!important}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:30px;border:1px solid var(--line);font-size:11px;color:var(--muted);background:#ffffff06;white-space:nowrap}
.chip .ic{width:14px;height:14px}
.chip.on{border-color:var(--gold3);color:var(--gold2)}
.chip.ok{border-color:#76c69a77;color:#bdf0cf;background:#76c69a14}
.chip.bad{border-color:#e2746077;color:#ffc8bb;background:#e2746012}
.result{text-align:center;padding:35px}
.result h2{font-family:var(--serif);font-weight:400;font-size:30px}
.result small{color:var(--muted)}
.trophy{display:grid;place-items:center;width:74px;height:74px;margin:10px auto;border-radius:50%;color:#2a2210;background:radial-gradient(circle at 35% 30%,var(--gold2),var(--gold) 60%,#a87c35);box-shadow:0 0 0 6px #f2c14e22,0 0 40px #f2c14e77;animation:bob 2.4s ease-in-out infinite}
.trophy .ic{width:40px;height:40px}
.notice{border:1px solid var(--gold);border-radius:10px;padding:12px 15px;color:var(--gold);font-size:12px;margin:0 0 10px}
.danger.quiet:hover:not(:disabled){border-color:var(--red)}
.shake{animation:shake .5s}
footer{width:100%;max-width:1320px;margin:0 auto;padding:20px 5%;border-top:1px solid var(--line2);display:flex;gap:20px;justify-content:space-between;align-items:center;color:#a08a66;font-size:9px;letter-spacing:1.5px;flex:none}
#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px) scale(.96);background:linear-gradient(180deg,#f3e2bb,#e4cc98);color:#253328;border:1px solid var(--gold);box-shadow:0 14px 40px #0008;padding:14px 22px;border-radius:12px;opacity:0;pointer-events:none;z-index:30;transition:.25s cubic-bezier(.3,1.4,.5,1);max-width:90vw;font-size:13px;font-weight:600}
#toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:25;overflow:hidden}
#fx i{position:absolute;top:-20px;left:var(--x);width:var(--w);height:calc(var(--w)*.45);background:var(--c);border-radius:2px;animation:confetti var(--t) cubic-bezier(.25,.4,.5,1) var(--dl) both}
#fx i:nth-child(3n){border-radius:50%;height:var(--w)}

/* ---------- Гэрийн хэсгүүд ---------- */
.piece{opacity:calc(.07 + .93*var(--f,1));transform-box:fill-box;transform-origin:50% 100%}
.piece.partial{filter:saturate(.35) brightness(1.15);animation:scaffold 2.2s ease-in-out infinite}
.piece.new{animation:drop .75s cubic-bezier(.3,1.45,.55,1) calc(var(--d,0s) + .78s + var(--i,0)*.13s) both}
.hero-temple .piece.new{animation-delay:calc(.2s + var(--i,0)*.14s)}
.final .piece.new{animation-delay:calc(.45s + var(--i,0)*.16s)}
.stone{fill:#ffffff12}
.stone.on{fill:#f2c14e}
.stone.new{animation:stonein .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + .8s + var(--s,0)*.04s) both;transform-box:fill-box;transform-origin:50% 100%}
.temple.complete{filter:drop-shadow(0 0 22px #f2c14e40)}
.smoke circle{opacity:.55;transform-box:fill-box;transform-origin:center;animation:smoke 3.2s ease-out infinite}
.smoke circle:nth-child(2){animation-delay:-1.1s}.smoke circle:nth-child(3){animation-delay:-2.2s}
.flag{transform-box:fill-box;transform-origin:0 50%;animation:wave 2.4s ease-in-out infinite}
.flag.r{transform-origin:100% 50%;animation-delay:-1.2s}

/* ---------- Ангийн самбар ---------- */
.board{display:flex;flex-direction:column;gap:14px;padding-top:14px}
.boardbar{display:flex;align-items:center;gap:18px;animation:fadeup .4s both}
.bb-title{min-width:0;flex:1}
.bb-title h2{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,30px);margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-round{display:flex;align-items:center;gap:14px}
.bb-round>span{font-size:26px;color:var(--gold2);font-variant-numeric:tabular-nums}
.bb-round small{font-size:13px;color:var(--muted)}
.dots{display:flex;gap:5px;flex-wrap:wrap;max-width:320px}
.dots i{width:10px;height:10px;transform:rotate(45deg);border:1px solid var(--gold3);background:transparent;transition:background .4s}
.dots i.done{background:var(--gold);box-shadow:0 0 8px #f2c14e88}
.dots i.cur{border-color:var(--gold2);animation:curdot 1.2s ease-in-out infinite}
.team-0{--tc:var(--t0)}.team-1{--tc:var(--t1)}.team-2{--tc:var(--t2)}.team-3{--tc:var(--t3)}
/* Асуултын үе: дээд талд жижиг гэр, доор том асуулт */
.play{display:flex;flex-direction:column;gap:14px}
.strip{display:grid;grid-template-columns:var(--cols);gap:14px;align-items:stretch}
.mini{display:flex;align-items:center;gap:14px;text-align:left;padding:10px 16px 10px 10px;border-radius:14px;color:var(--ink);background:linear-gradient(140deg,color-mix(in srgb,var(--tc) 16%,#24180c),#1d1409);border:1px solid color-mix(in srgb,var(--tc) 30%,transparent);min-width:0;animation:fadeup .45s both}
.mini:disabled{opacity:1}
.mini.active{border-color:var(--tc);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 25%,transparent),0 10px 30px #0005}
.mini.done{opacity:.8}
.mini-art{width:120px;flex:none}
.mini-art .temple{max-height:74px}
.mini-info{display:flex;flex-direction:column;min-width:0;flex:1}
.mini-info .eyebrow{color:var(--tc)}
.mini-info strong{font-family:var(--serif);font-weight:400;font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-stat{font-size:12px;color:var(--muted)}
.mini-stat b{color:var(--gold2);font-weight:600}
.mini .chip{flex:none}
.mini.active .chip{border-color:var(--tc);color:var(--ink);animation:pulsechip 1.4s ease-in-out infinite}
.mini.done .chip{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.clock{position:relative;width:92px;display:grid;place-items:center}
.clock svg{position:absolute;inset:0;margin:auto;width:84px;height:84px;transform:rotate(-90deg)}
.ring-bg,.ring{fill:none;stroke-width:5}
.ring-bg{stroke:#ffffff10}
.ring{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .3s linear,stroke .3s}
.clock>div{text-align:center;position:relative}
.clock b{display:block;font-size:26px;font-variant-numeric:tabular-nums;color:var(--gold2);line-height:1}
.clock small{font-size:7px;letter-spacing:1px;color:var(--muted)}
.clock.low .ring{stroke:var(--red)}
.clock.low b{color:#ffb4a4;animation:beat 1s infinite}
.clock.out{opacity:.5}
.qcard{--fs:1;border-radius:18px;padding:calc(var(--fs)*26px) calc(var(--fs)*30px);background:linear-gradient(160deg,#2a1c0df2,#1a1108f2);border:1px solid var(--line);box-shadow:0 20px 60px #0006,inset 0 1px 0 #ffffff0a;display:flex;flex-direction:column;position:relative;overflow:hidden}
.qcard:before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--tc,var(--gold)),transparent);opacity:.9}
.turn-0{--tc:var(--t0)}.turn-1{--tc:var(--t1)}.turn-2{--tc:var(--t2)}.turn-3{--tc:var(--t3)}
.q-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.turn{font-size:13px;color:var(--muted);padding:6px 12px;border-radius:30px;border:1px solid color-mix(in srgb,var(--tc) 50%,transparent);background:color-mix(in srgb,var(--tc) 10%,transparent)}
.turn b{color:var(--tc)}
.q-text{font-family:var(--serif);font-size:max(15px,calc(var(--fs)*clamp(22px,2.7vw,42px)));line-height:1.35;font-weight:400;margin:calc(var(--fs)*20px) 0;text-wrap:balance}
.options{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--fs)*12px)}
.answer{position:relative;overflow:hidden;background:#1a1108;border:1px solid #5a4220;border-radius:12px;color:var(--ink);padding:calc(var(--fs)*14px) 16px;display:flex;gap:15px;align-items:center;text-align:left;font-size:max(12px,calc(var(--fs)*clamp(15px,1.45vw,22px)));min-height:calc(var(--fs)*64px);line-height:1.35}
.answer b{display:grid;place-items:center;min-width:calc(var(--fs)*38px);height:calc(var(--fs)*38px);border:1px solid var(--gold3);border-radius:9px;color:var(--gold);font-weight:600;transition:.2s}
.answer:hover:not(:disabled){background:#2a1c0c;border-color:color-mix(in srgb,var(--tc) 60%,transparent)}
.answer:hover:not(:disabled) b{background:#f2c14e1a}
.answer:disabled{opacity:1;cursor:default}
.answer.chosen{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 18%,#1a1108);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 25%,transparent);animation:pick .35s cubic-bezier(.3,1.6,.5,1)}
.answer.chosen b{background:var(--tc);border-color:var(--tc);color:#1a1006}
.submit-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:calc(var(--fs)*20px)}
.hint{font-size:12px;color:var(--muted)}
.submit-row .primary:not(:disabled){animation:glowbtn 1.8s ease-in-out infinite}
.qcard.intro{animation:qin .6s cubic-bezier(.2,.9,.3,1.15) both}
.qcard.intro .q-text{animation:fadeup .55s .15s both}
.qcard.intro .answer{animation:optin .45s calc(.3s + var(--k)*.08s) cubic-bezier(.3,1.4,.5,1) both}
/* Үр дүнгийн тайз: багуудын гэр том */
.stage{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.stage.n1{grid-template-columns:minmax(0,760px);justify-content:center}
.stage.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.stage.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stage.n3 .stage-card,.stage.n4 .stage-card{padding:12px 14px}
.stage.n3 .stage-head h3,.stage.n4 .stage-head h3{font-size:clamp(16px,1.5vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage.n3 .stage-head>div,.stage.n4 .stage-head>div{min-width:0}
.stage.n3 .verdict,.stage.n4 .verdict{padding:6px 10px;font-size:11px;letter-spacing:1px;flex:none}
.stage.n3 .stage-foot,.stage.n4 .stage-foot{gap:8px}
.stage.n3 .stat b,.stage.n4 .stat b{font-size:clamp(17px,1.5vw,24px)}
.stage.n3 .stat small,.stage.n4 .stat small{font-size:8px;margin-left:3px}
.stage.n3 .float,.stage.n4 .float{font-size:clamp(13px,1.3vw,19px)}
.strip.n3 .mini,.strip.n4 .mini{padding:8px 12px 8px 8px;gap:10px}
.strip.n3 .mini-art,.strip.n4 .mini-art{width:84px}
.strip.n3 .mini-art .temple,.strip.n4 .mini-art .temple{max-height:56px}
.strip.n3 .mini-info strong,.strip.n4 .mini-info strong{font-size:17px}
.strip.n3 .mini .chip,.strip.n4 .mini .chip{display:none}
.strip.n3 .mini-stat,.strip.n4 .mini-stat{font-size:11px}
.chips .row4{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.stage-card{position:relative;display:flex;flex-direction:column;border-radius:18px;padding:16px 20px;background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 14%,#2a1c0c),#170f07);border:1px solid color-mix(in srgb,var(--tc) 32%,transparent);box-shadow:0 20px 50px #0006;overflow:hidden}
.stage-card.animate{animation:cardin .5s calc(var(--d)*.4) cubic-bezier(.2,.9,.3,1.1) both}
.stage-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.stage-head .eyebrow{color:var(--tc)}
.stage-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,30px);margin:2px 0 0}
.verdict{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:30px;font-weight:700;font-size:14px;letter-spacing:1.5px;border:1px solid var(--line)}
.verdict .ic{width:18px;height:18px;stroke-width:3}
.verdict.ok{background:#76c69a22;border-color:#76c69a;color:#c9f5d9;box-shadow:0 0 24px #76c69a44}
.verdict.bad{background:#e2746020;border-color:var(--red);color:#ffcabd}
.verdict.win{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2a2210;border-color:var(--gold2);box-shadow:0 0 30px #f2c14e88}
.verdict.idle{color:var(--muted);font-weight:500;letter-spacing:.5px}
.animate .verdict.ok,.animate .verdict.win{animation:pop .55s cubic-bezier(.3,1.7,.5,1) calc(var(--d) + .85s) both}
.animate .verdict.bad{animation:wobble .7s calc(var(--d) + .4s) both}
.stage-art{position:relative;aspect-ratio:600/370;margin:8px 0}
.stage-art .temple{position:relative;z-index:1;max-height:none;height:100%}
.halo{position:absolute;left:50%;top:52%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tc) 30%,transparent),transparent 65%);animation:breathe 5s ease-in-out infinite}
.ok.animate .halo{animation:flashhalo 1.4s calc(var(--d) + .8s) both}
.bad.animate .stage-art{animation:quakeX .7s calc(var(--d) + .3s) both}
.bad.animate .stage-art:after{content:'';position:absolute;inset:-10%;z-index:3;background:radial-gradient(circle,#e2746055,transparent 60%);animation:flash .8s calc(var(--d) + .3s) both;pointer-events:none}
.bad .temple{filter:saturate(.75)}
.ok.animate .temple{animation:impact .5s calc(var(--d) + .8s) both}
.winner{border-color:var(--gold);box-shadow:0 0 0 2px #f2c14e55,0 20px 60px #f2c14e30}
.winner .halo{background:radial-gradient(circle,#ffe08a55,transparent 65%)}
.rays{position:absolute;left:50%;top:48%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,#ffe08a22 0 8deg,transparent 8deg 22deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 20%,transparent 65%);mask:radial-gradient(circle,#000 20%,transparent 65%);animation:spinc 18s linear infinite,fadein 1s 2s both}
.stone-fall{position:absolute;z-index:4;left:50%;width:9%;aspect-ratio:2.2;border-radius:4px;background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,#a37a36);box-shadow:0 0 22px #ffe08a99,inset 0 -3px 0 #0003;animation:fall .5s cubic-bezier(.6,0,1,.6) calc(var(--d) + .3s) both,vanish .22s calc(var(--d) + .8s) forwards}
.dust i{position:absolute;z-index:3;left:50%;top:84%;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#f6e3b4,#f6e3b400 70%);opacity:0;animation:puff 1s ease-out calc(var(--d) + .8s) both}
.debris i{position:absolute;z-index:4;left:50%;top:38%;width:12px;height:9px;background:#9b8c74;border-radius:2px;opacity:0;animation:debris 1.1s cubic-bezier(.4,0,.8,.6) calc(var(--d) + .35s) both}
.debris i:nth-child(odd){background:#c9b48e;width:8px;height:7px}
.float{position:absolute;z-index:5;left:50%;top:34%;white-space:nowrap;font-weight:800;font-size:clamp(16px,1.8vw,26px);color:var(--gold2);text-shadow:0 2px 0 #0008,0 0 20px #f2c14eaa;opacity:0;animation:floatup 1.8s ease-out calc(var(--d) + .95s) both}
.float.bad{color:#ffb4a4;text-shadow:0 2px 0 #0008,0 0 20px #e2746088;animation-delay:calc(var(--d) + .45s)}
.stage-foot{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.stat b{font-size:clamp(20px,2vw,30px);color:var(--gold2);font-variant-numeric:tabular-nums;display:inline-block}
.stat b.bump{animation:pop .4s cubic-bezier(.3,1.7,.5,1)}
.stat small{font-size:10px;color:var(--muted);letter-spacing:1px;margin-left:6px}
.stat.right{text-align:right}
.progress{height:8px;border-radius:8px;background:#ffffff10;overflow:hidden}
.progress>div{height:100%;width:var(--w1);border-radius:8px;background:linear-gradient(90deg,var(--gold3),var(--gold),var(--gold2));box-shadow:0 0 12px #f2c14e88}
.animate .progress>div{animation:grow 1s cubic-bezier(.3,1,.4,1) calc(var(--d) + .9s) both}
.info-bar{display:grid;grid-template-columns:minmax(220px,1fr) 1.4fr auto;gap:22px;align-items:center;padding:16px 22px;border-radius:16px;background:linear-gradient(160deg,#2a1c0df2,#1a1108f2);border:1px solid var(--line);box-shadow:0 14px 40px #0005}
.info-bar.animate{animation:fadeup .6s var(--d) both}
.info-bar p{margin:0;font-size:14px;line-height:1.5}
.ans strong{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.6vw,24px);margin-top:4px}
.ans i{font-style:normal;display:grid;place-items:center;min-width:36px;height:36px;border-radius:9px;background:var(--green);color:#0f2219;font-family:inherit;font-weight:700;font-size:16px}
.chips{display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.chips small{font-size:10px;color:var(--muted)}
.info-bar.wait{grid-template-columns:auto 1fr auto;text-align:left}
.info-bar.wait h2,.info-bar.final h2{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.2vw,32px);margin:0}
.rules{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.rules span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:7px 12px}
.rules .ic{width:15px;height:15px;color:var(--gold)}
.wait .stage-card .halo{animation:breathe 2.4s ease-in-out infinite}
.info-bar.final{grid-template-columns:auto 1fr;animation:fadeup .7s 1.8s both}
.info-bar.final .trophy{margin:0}
.info-bar.final .chips{grid-column:1/-1;align-items:stretch}
.info-bar.final .row4{justify-content:flex-start}
.mini-info .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quake{animation:quake .5s}

/* Дэлгэцэнд яг багтаах горим (самбар, проектор) */
@media (min-width:761px) and (min-height:340px){
 body.fit.tight header{display:none}
 body.fit.tight .mini-art,body.fit.tight .boardbar .eyebrow,body.fit.tight .bb-round .dots{display:none}
 body.fit.tight .board{gap:8px;padding-top:6px}
 body.fit.tight .stage-card{padding:8px 12px}
 body.fit.tight .info-bar{padding:10px 14px}
 body.fit.tight .home .role{padding:8px 14px}
 body.fit{height:100vh;height:100dvh;overflow-x:hidden;overflow-y:auto}
 body.fit header{padding:10px 2.5%;max-width:none}
 body.fit .brand small,body.fit .tag{display:none}
 body.fit .brand svg{width:24px;height:32px}
 body.fit main{max-width:1680px;padding:0 2.5% 16px;min-height:0;display:flex;flex-direction:column}
 body.fit footer{display:none}
 body.fit .home{flex:1;min-height:0;padding:8px 0 4px;gap:14px}
 body.fit .scene-wrap{flex:1;min-height:0;padding-top:0}
 body.fit .board{flex:1;min-height:0}
 body.fit .play{flex:1;min-height:0}
 body.fit .qcard{flex:1;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
 body.fit .options{min-height:0;overflow:auto;grid-auto-rows:1fr;align-content:stretch;padding:2px}
 body.fit .stage{flex:1;min-height:0}
 body.fit .stage-card{min-height:0}
 body.fit .stage-art{flex:1;min-height:0;aspect-ratio:auto}
 body.fit .stage-art .temple{position:absolute;inset:0;width:100%;height:100%}
 body.fit .info-bar p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
@media (min-width:761px) and (max-height:620px){
 body.fit header{padding:6px 2.5%}
 body.fit .brand{font-size:15px}
 body.fit .boardbar .eyebrow{display:none}
 body.fit .bb-title h2{font-size:18px}
 body.fit .bb-round>span{font-size:20px}
 body.fit .mini{padding:6px 10px 6px 6px}
 body.fit .mini-art{width:64px!important}
 body.fit .mini-art .temple{max-height:40px!important}
 body.fit .mini-info strong{font-size:15px!important}
 body.fit .clock{transform:scale(.7);margin:-12px -6px;height:84px}
 body.fit .qcard{padding:12px 18px}
 body.fit .q-head .eyebrow{font-size:9px}
 body.fit .submit-row{margin-top:8px}
 body.fit .submit-row .primary{padding:10px 18px}
 body.fit .home .role{padding:8px 16px}
 body.fit .home .role-icon{height:44px;min-width:42px}
 body.fit .home .role strong{font-size:22px}
}
@media (min-width:761px) and (max-height:700px){
 body.fit .mini-art{width:96px}
 body.fit .mini-art .temple{max-height:58px}
 body.fit .clock{transform:scale(.85)}
 body.fit .board{gap:10px;padding-top:8px}
 body.fit .stage-card{padding:10px 16px}
 body.fit .info-bar{padding:12px 18px}
}

/* ---------- Хөдөлгөөн ---------- */
@keyframes smoke{0%{opacity:0;transform:translateY(14px) scale(.6)}30%{opacity:.6}100%{opacity:0;transform:translate(8px,-24px) scale(1.5)}}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes drop{0%{opacity:0;transform:translateY(-90px) scale(1.04)}55%{opacity:1;transform:translateY(5px) scaleY(.94)}75%{transform:translateY(-3px)}100%{transform:none}}
@keyframes stonein{0%{opacity:0;transform:translateY(-40px)}70%{opacity:1;transform:translateY(2px) scaleY(.8)}100%{transform:none}}
@keyframes scaffold{50%{filter:saturate(.35) brightness(1.5)}}
@keyframes wave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-6deg) scaleX(.9)}}
@keyframes fall{0%{top:-14%;opacity:0;transform:translateX(-50%) rotate(-28deg)}20%{opacity:1}100%{top:60%;opacity:1;transform:translateX(-50%) rotate(0)}}
@keyframes vanish{to{opacity:0;transform:translateX(-50%) scale(1.8,.2)}}
@keyframes puff{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(calc(-50% + var(--x)*1.6),calc(-50% + var(--y)*1.2)) scale(3)}}
@keyframes debris{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x)*2),calc(180px + var(--y))) rotate(var(--r))}}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,24px) scale(.7)}18%{opacity:1;transform:translate(-50%,0) scale(1.08)}70%{opacity:1;transform:translate(-50%,-20px) scale(1)}100%{opacity:0;transform:translate(-50%,-70px)}}
@keyframes impact{0%{transform:none}30%{transform:scale(1.02,.96) translateY(4px)}60%{transform:scale(.99,1.02)}100%{transform:none}}
@keyframes flashhalo{0%{opacity:1;transform:translate(-50%,-50%) scale(.8)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3);filter:brightness(2)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes quakeX{0%,100%{transform:none}10%{transform:translate(-12px,2px) rotate(-1.5deg)}25%{transform:translate(11px,-2px) rotate(1.4deg)}40%{transform:translate(-9px,1px) rotate(-1deg)}55%{transform:translate(7px,0) rotate(.8deg)}70%{transform:translate(-4px,0)}85%{transform:translate(2px,0)}}
@keyframes quake{0%,100%{transform:none}20%{transform:translate(0,5px)}40%{transform:translate(-3px,-3px)}60%{transform:translate(3px,2px)}80%{transform:translate(-1px,-1px)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes wobble{0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1.15) rotate(-8deg)}50%{transform:rotate(7deg)}70%{transform:rotate(-4deg)}100%{transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
@keyframes pick{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes cardin{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@keyframes qin{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
@keyframes optin{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes grow{from{width:var(--w0)}to{width:var(--w1)}}
@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:.9;transform:translate(var(--dx),110vh) rotate(var(--r))}}
@keyframes glowbtn{0%,100%{box-shadow:0 4px 0 #7a4f18,0 0 0 0 #f2c14e55}50%{box-shadow:0 4px 0 #7a4f18,0 0 0 8px #f2c14e00,0 0 28px #f2c14e66}}
@keyframes busy{to{background-position:34px 0}}
@keyframes ping{0%{box-shadow:0 0 0 0 #f2c14e88}80%,100%{box-shadow:0 0 0 10px #f2c14e00}}
@keyframes sheen{to{background-position:-200% 0}}
@keyframes breathe{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes breathesun{0%,100%{transform:translateX(-50%) scale(.97);opacity:.8}50%{transform:translateX(-50%) scale(1.04);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinc{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes beat{50%{transform:scale(1.15)}}
@keyframes curdot{50%{background:#f2c14e55;box-shadow:0 0 10px #f2c14e99}}
@keyframes pulsechip{50%{background:color-mix(in srgb,var(--tc) 20%,transparent)}}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
@keyframes mote{0%{opacity:0;transform:translateY(0) translateX(0)}10%{opacity:.6}90%{opacity:.4}100%{opacity:0;transform:translateY(-95vh) translateX(40px)}}

@media(max-width:1050px){.tag{display:none}.hero{min-height:400px}.hero-art{min-height:370px}.role{padding:20px;gap:12px}.role-icon{min-width:46px;height:56px}.role-icon .ic{width:32px}.editor-layout,.host-layout{grid-template-columns:300px 1fr}.hero-meta{gap:15px}.tool span{display:none}.score{flex-direction:column;align-items:flex-start}.score-art{width:100%}.info-bar{grid-template-columns:1fr 1fr}.info-bar .chips{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center}}
@media(max-width:760px){
 header{flex-wrap:wrap;padding:14px 16px;gap:12px}
 nav{width:100%;justify-content:space-between}
 nav .quiet{padding:8px 10px;font-size:10px}
 main{padding:0 16px 40px}
 .hero{grid-template-columns:1fr;gap:0;text-align:center;padding-top:30px}
 .hero-copy .eyebrow{font-size:8px}
 h1{font-size:52px;margin:18px 0}
 .hero-meta{justify-content:center}
 .hero-art{min-height:300px}
 .sun{width:180px;height:180px}
 .rings{width:230px;height:230px;margin-left:-115px}.rings.r2{width:270px;height:270px;margin-left:-135px}
 .hero-temple{max-height:310px;transform:translateY(5px)}
 .art-caption{bottom:0}
 .roles{grid-template-columns:1fr;margin-top:30px}
 .role{text-align:left;padding:20px}
 .role p{font-size:12px}
 .home-bottom{font-size:7px;letter-spacing:.4px;gap:10px}
 .editor-layout,.host-layout{grid-template-columns:1fr}
 .editor-layout>.panel{position:static}
 .pagebar h2{font-size:28px}
 .pagebar{align-items:start;padding-top:26px}
 .pagebar>.quiet{white-space:nowrap}
 .saved-row{flex-wrap:wrap}
 .saved-row>div{width:100%}
 .scores{grid-template-columns:1fr}
 .boardbar{flex-wrap:wrap;gap:10px}
 .bb-title{flex-basis:100%}
 .dots{max-width:200px}
 .strip{grid-template-columns:1fr 1fr}
 .strip .clock{grid-column:1/-1;grid-row:1;justify-self:center;height:88px}
 .strip.n1 .mini{grid-column:1/-1}
 .mini{flex-wrap:wrap;gap:8px;padding:10px}
 .mini-art{width:100%}
 .mini-art .temple{max-height:64px}
 .mini-info strong{font-size:17px}
 .qcard{padding:18px}
 .options{grid-template-columns:1fr}
 .answer{min-height:56px}
 .submit-row{flex-wrap:wrap}
 .submit-row .primary{width:100%}
 .stage{grid-template-columns:1fr}
 .stage-card{padding:14px}
 .info-bar,.info-bar.wait{grid-template-columns:1fr;gap:12px}
 .chips,.rules{align-items:flex-start;justify-content:flex-start}
 footer{flex-wrap:wrap;font-size:8px;gap:15px;padding:18px 16px}
 .edit-options{grid-template-columns:1fr}
 .pagebar p{font-size:11px}
 .result h2{font-size:25px}
 .joincode span{height:50px;font-size:26px}
}
@media(max-width:1100px){.stage.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:480px) and (max-width:760px){.stage.n2,.stage.n3,.stage.n4{grid-template-columns:1fr 1fr}.stage.n2 .stage-head{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:760px){.stage.n3 .stage-head,.stage.n4 .stage-head{flex-direction:column;align-items:flex-start;gap:6px}.stage.n3 .stage-head h3,.stage.n4 .stage-head h3{white-space:normal}.stage.n3 .progress,.stage.n4 .progress{display:none}.stage.n3 .stage-foot,.stage.n4 .stage-foot{grid-template-columns:1fr auto}}