:root{
  --pink:#FF6FA8;--pinkD:#C22D67;
  --purple:#B69BFE;--purpleD:#6E51BE;
  --gold:#D9AA47;--goldD:#A26D05;
  --teal:#35C9DF;--tealD:#0691A7;
  --green:#4CC76A;--greenD:#23863F;
  --ink:#3B2A1E;--line:#5A3B22;--paper:#FFF9EE;
  --ui:"Nunito","Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --kai:"KaiTi","STKaiti","Kaiti SC","楷体",serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--ui);color:var(--ink);background:#7EC8F0;overflow-x:hidden;min-height:100dvh}
[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer}

/* 天空 */
.sky{position:fixed;inset:0;z-index:-1;background:linear-gradient(#5DB8EE 0%,#8FD3F5 55%,#CFEFFC 100%)}
.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.95;filter:drop-shadow(0 4px 0 rgba(90,150,200,.18))}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud.c1{width:180px;height:54px;top:12%;left:6%;animation:drift 60s linear infinite}
.cloud.c2{width:240px;height:66px;top:30%;right:-60px;animation:drift 80s linear infinite reverse}
.cloud.c3{width:150px;height:44px;top:62%;left:-40px;animation:drift 70s linear infinite}
.cloud.c4{width:200px;height:58px;top:80%;right:10%;animation:drift 90s linear infinite reverse}
.cloud::before{width:46%;height:150%;left:14%;top:-60%}
.cloud::after{width:36%;height:120%;right:16%;top:-40%}
@keyframes drift{from{transform:translateX(-40px)}to{transform:translateX(40px)}}

/* 顶栏 */
.top{display:flex;align-items:center;justify-content:space-between;padding:10px 18px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.brand img{width:36px;height:36px;border-radius:50%;background:#fff}
.brand .bz{font-family:var(--kai);font-size:24px;font-weight:700}
.brand .be{font-size:20px;font-weight:800;letter-spacing:.5px}
.roomtag{background:#fff;color:var(--ink);border:3px solid var(--line);border-radius:14px;padding:4px 12px;font-weight:800;font-size:20px}

main{padding:8px 16px 40px}
.view{display:flex;flex-direction:column;align-items:center;gap:16px}

/* 卡片 */
.card{background:var(--paper);border:4px solid var(--line);border-radius:26px;box-shadow:0 8px 0 rgba(90,59,34,.35);padding:24px;width:min(440px,100%);display:flex;flex-direction:column;gap:14px}
.card.wide{width:min(760px,100%)}
.card.center{align-items:center;text-align:center}
h1{margin:0;font-size:28px;line-height:1.2;text-align:center}
h1 small{display:block;font-size:15px;font-weight:600;opacity:.65;margin-top:4px}
input,textarea{font-family:inherit;border:3px solid var(--line);border-radius:16px;padding:12px 14px;font-size:20px;background:#fff;color:var(--ink);outline:none;width:100%}
input:focus,textarea:focus{border-color:var(--tealD);box-shadow:0 0 0 4px rgba(53,201,223,.3)}
input.big{font-size:52px;text-align:center;letter-spacing:14px;font-weight:800}
input.mid{text-align:center}
textarea{min-height:280px;font-size:18px;line-height:1.6;resize:vertical}
.btn{border:4px solid var(--line);border-radius:18px;padding:12px 26px;font-size:22px;font-weight:800;color:#fff;background:var(--green);box-shadow:0 6px 0 var(--line);transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line)}
.btn:disabled{opacity:.45;cursor:default}
.btn.go{background:linear-gradient(#5ED97B,#3DB85B)}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.sm{font-size:16px;padding:8px 16px}
.link{background:none;border:0;color:#fff;font-size:18px;font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.link small{display:block;font-size:13px;opacity:.85}
.link.sm{color:var(--tealD);text-shadow:none;font-size:15px;padding:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.row.c{justify-content:center}
.msg{margin:0;font-size:15px;color:#7a5a40;min-height:1.2em;text-align:center}
.msg.err{color:#C0392B;font-weight:700}

/* 老师大屏：大厅 */
#vHost{width:100%}
#hostLobby,#hostRace,#hostEnd{width:min(1400px,100%);display:flex;flex-direction:column;gap:16px;align-items:center}
.lobbyhead{display:flex;gap:20px;align-items:stretch;width:100%;flex-wrap:wrap;justify-content:center}
.codebox{background:var(--paper);border:4px solid var(--line);border-radius:26px;box-shadow:0 8px 0 rgba(90,59,34,.35);padding:14px 30px;text-align:center}
.cl{font-size:20px}
.bigcode{font-size:clamp(70px,11vw,140px);font-weight:900;letter-spacing:.12em;line-height:1;color:var(--ink)}
.lobbyctl{display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:center;background:var(--paper);border:4px solid var(--line);border-radius:26px;box-shadow:0 8px 0 rgba(90,59,34,.35);padding:16px 24px}
.seg{display:flex;border:3px solid var(--line);border-radius:16px;overflow:hidden}
.seg button{border:0;background:#fff;padding:10px 16px;font-size:17px;font-weight:800;color:var(--ink)}
.seg button.on{background:var(--gold);color:#fff}
.count{font-size:22px;font-weight:800;color:var(--ink)}
.lobbyteams{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;width:100%}
.lobbyteams.solo{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tcol{background:rgba(255,255,255,.85);border:4px solid var(--line);border-radius:22px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:200px}
.tcol img{height:110px}
.tcol h3{margin:0;font-size:20px;padding:2px 14px;border-radius:12px;color:#fff;border:3px solid var(--line)}
.tcol ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.tcol li{background:#fff;border:2px solid var(--line);border-radius:10px;padding:2px 10px;font-size:17px;font-weight:700;animation:pop .3s}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}

/* 比赛 */
.race{position:relative;width:100%;height:calc(100dvh - 150px);min-height:420px;border:4px solid var(--line);border-radius:26px;overflow:hidden;background:linear-gradient(#4AA8E8,#8FD3F5 70%,#B9E79A 70.1%,#7CCB5E)}
.finish{position:absolute;left:0;right:0;top:8%;height:0;border-top:5px dashed #fff}
.finish span{position:absolute;right:14px;top:-34px;background:#fff;border:3px solid var(--line);border-radius:12px;padding:2px 10px;font-weight:800}
.lanes{position:absolute;inset:8% 0 0 0;display:flex;justify-content:space-around;align-items:flex-end;padding:0 2%}
.lane{position:relative;height:100%;flex:1;display:flex;justify-content:center}
.bal{position:absolute;bottom:0;display:flex;flex-direction:column;align-items:center;transition:bottom 1.2s cubic-bezier(.3,1.4,.5,1);will-change:bottom}
.bal img{height:clamp(90px,19vh,200px);animation:bob 3s ease-in-out infinite}
.lanes.solo .bal img{height:clamp(50px,9vh,90px)}
.bal .tag{margin-top:-4px;background:#fff;border:3px solid var(--line);border-radius:12px;padding:1px 10px;font-weight:800;font-size:clamp(14px,1.6vw,20px);white-space:nowrap}
.bal .pts{font-weight:900;font-size:clamp(14px,1.5vw,20px);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
.racebar{display:flex;justify-content:space-between;align-items:center;width:100%}
.podium{display:flex;gap:18px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.podium .pl{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800}
.podium .pl img{height:120px}
.podium .pl.p1 img{height:170px}
.podium .pl b{font-size:30px}

/* 学生答题 */
#vPlay{width:100%}
.pballoon{height:160px;animation:bob 3s ease-in-out infinite}
.quiz{width:min(560px,100%);display:flex;flex-direction:column;gap:14px}
.qtop{display:flex;align-items:center;gap:10px}
.qtop img{height:52px}
.qbar{flex:1;height:18px;background:#fff;border:3px solid var(--line);border-radius:12px;overflow:hidden}
.qbar i{display:block;height:100%;width:0;background:var(--green);transition:width .5s}
.qtop span{font-size:24px;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);min-width:40px;text-align:right}
.qprompt{background:var(--paper);border:4px solid var(--line);border-radius:26px;box-shadow:0 8px 0 rgba(90,59,34,.35);min-height:150px;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{min-height:96px;border:4px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 6px 0 var(--line);font-size:24px;font-weight:800;color:var(--ink);padding:8px;display:flex;align-items:center;justify-content:center;text-align:center}
.opt:active{transform:translateY(3px);box-shadow:0 3px 0 var(--line)}
.opt.ok{background:#BFF3CB;border-color:var(--greenD)}
.opt.no{background:#FFD0D0;border-color:#C0392B;animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.zh{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1}
.zh .py{font-family:var(--ui);font-weight:600;font-size:.36em;color:#8a6a50;letter-spacing:.02em;margin-bottom:.08em}
.zh .hz{font-family:var(--kai);font-weight:700;font-size:1em}
.qprompt .zh{font-size:68px}
.qprompt .en{font-size:38px;font-weight:800}
.opt .zh{font-size:36px}

@media (max-width:640px){
  .lobbyteams{grid-template-columns:repeat(2,1fr)}
  .opt{min-height:84px;font-size:20px}
  .qprompt .zh{font-size:58px}
  .top{padding:8px 12px}
  .brand .be{display:none}
  .brand .bz{font-size:20px;white-space:nowrap}
  .roomtag{font-size:16px;white-space:nowrap}
}

/* 老师选模式（像 Kahoot 的 Classic / Team mode） */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mode{border:4px solid var(--line);border-radius:22px;box-shadow:0 6px 0 var(--line);padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff}
.mode[data-mode=solo]{background:linear-gradient(#5FB2FF,#2F86E0)}
.mode[data-mode=team]{background:linear-gradient(#FF8CBC,#E5568F)}
.mode b{font-size:28px}
.mode span{font-size:17px;font-weight:800;opacity:.95}
.mode small{font-size:14px;font-weight:600;opacity:.9}
.mode:disabled{opacity:.45}
.mode:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line)}
.modelabel{font-size:22px;font-weight:900;color:#fff;background:var(--tealD);border:3px solid var(--line);border-radius:14px;padding:4px 16px}
.mode .pics{display:flex;justify-content:center;gap:2px;height:70px;margin-bottom:4px}
.mode .pics img{height:70px}
.mode[data-mode=team] .pics img{height:56px;margin-top:14px}
.pick{display:flex;flex-direction:column;gap:6px;align-items:center}
.pickrow{display:flex;gap:4px;flex-wrap:nowrap;justify-content:center}
.pickrow button{border:3px solid transparent;background:#fff;border-radius:14px;padding:3px;width:52px;flex:0 0 auto}
.pickrow button img{height:58px}
.pickrow button.on{border-color:var(--line);background:#FFF1C9;transform:translateY(-4px)}
/* 限时模式 */
.seg button{white-space:nowrap}
.race.timed .finish{display:none}
.race{position:relative}
.racetimer{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:5;background:#fff;border:4px solid var(--line);border-radius:18px;padding:2px 22px;font-size:clamp(28px,4vw,48px);font-weight:900;box-shadow:0 5px 0 rgba(90,59,34,.35)}
.racetimer.hurry,.qtimer.hurry{background:#FFE08A;animation:pulse 1s infinite}
.qtimer{align-self:center;background:#fff;border:3px solid var(--line);border-radius:14px;padding:2px 16px;font-size:26px;font-weight:900}
@keyframes pulse{50%{transform:translateX(var(--tx,0)) scale(1.08)}}
.racetimer{--tx:-50%}

/* ===== 乘坐热气球的小伙伴 ===== */
.ride{position:relative;display:inline-block;height:100%}
.ride .env{display:block;height:100%;width:auto}
.pax{position:absolute;left:50%;transform:translateX(-50%);bottom:14.5%;width:42%;display:flex;justify-content:center;align-items:flex-end}
.pax img{width:100%;display:block}
.pax.n2 img{width:64%;margin:0 -9%}
.pax.n3 img{width:52%;margin:0 -10%}
.pax.n0{display:none}
.bal .rideBox{height:clamp(110px,22vh,230px);animation:bob 3s ease-in-out infinite}
.lanes.solo .bal .rideBox{height:clamp(64px,11vh,110px)}
.bal img{animation:none}
.pride{height:190px;animation:bob 3s ease-in-out infinite}
.qride{height:64px}
.podium .pl .ride{height:130px}
.podium .pl.p1 .ride{height:180px}
.tcol li{display:flex;align-items:center;gap:4px}
.tcol li .av{height:26px}
.pcard{background:rgba(255,255,255,.9);border:3px solid var(--line);border-radius:18px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;font-size:17px;animation:pop .3s}
.pcard .avbig{height:64px}
.lobbyteams.solo{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}

/* 学生挑小伙伴 */
.avpick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.avpick button{border:3px solid transparent;background:#fff;border-radius:14px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:0}
.avpick button img{height:46px}
.avpick button .zh{font-size:17px}
.avpick button .zh .hz{font-weight:700}
.avpick button.on{border-color:var(--line);background:#FFF1C9}

/* 三朵云 */
.cloudbox{width:min(560px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;background:rgba(255,255,255,.35);border:4px solid var(--line);border-radius:26px;padding:16px;margin-top:-6px}
.cloudrow{display:flex;gap:10px;justify-content:center;width:100%}
.cloudbtn{position:relative;flex:1;max-width:160px;height:110px;border:0;background:none;padding:0}
.cloudbtn::before{content:"";position:absolute;inset:18% 4% 8% 4%;background:#fff;border-radius:999px;box-shadow:0 6px 0 rgba(90,59,34,.25)}
.cloudbtn::after{content:"";position:absolute;width:52%;height:62%;left:22%;top:2%;background:#fff;border-radius:50%}
.cloudbtn span{position:relative;z-index:1;font-size:44px;font-weight:900;color:var(--tealD)}
.cloudbtn:active{transform:scale(.95)}
.cloudbtn.pop{animation:cpop .35s forwards}
@keyframes cpop{to{transform:scale(1.25);opacity:.2}}
.reveal{display:flex;flex-direction:column;align-items:center;background:var(--paper);border:4px solid var(--line);border-radius:24px;padding:12px 26px;animation:pop .35s;text-align:center}
.reveal .ico{font-size:46px;line-height:1}
.reveal .zh{font-size:54px}
.reveal .en{font-size:18px;font-weight:800;color:#7a5a40}
.reveal .say{font-size:22px;font-weight:900;margin-top:2px}
.reveal.add .say,.reveal.mul .say,.reveal.steal .say,.reveal.swap .say{color:var(--greenD)}
.reveal.lose .say{color:#C0392B}
.reveal.none .say{color:#7a7a7a}
.reveal.mul{background:#FFF1C9}
.targets{display:flex;flex-direction:column;gap:8px;width:100%}
.targets button{display:flex;align-items:center;gap:10px;border:3px solid var(--line);border-radius:16px;background:#fff;padding:6px 12px;font-size:20px;box-shadow:0 4px 0 var(--line)}
.targets button b{flex:1;text-align:left}
.targets button i{font-style:normal;font-weight:900;color:var(--tealD)}
.targets .mini{height:40px}

/* 大屏动态 */
.feed{position:absolute;left:14px;top:14px;display:flex;flex-direction:column;gap:8px;z-index:3;max-width:60%}
.fe{background:#fff;border:3px solid var(--line);border-radius:16px;padding:6px 14px;font-size:clamp(16px,1.8vw,24px);font-weight:800;animation:slidein .35s;box-shadow:0 4px 0 rgba(90,59,34,.3)}
.fe.steal,.fe.swap{background:#FFE3EE}
.fe.mul{background:#FFF1C9}
.fe.lose{background:#E8EEF5}
.fe.out{opacity:0;transform:translateX(-30px);transition:all .5s}
.fe .ew .zh{font-size:1.25em;vertical-align:middle}
@keyframes slidein{from{transform:translateX(-40px);opacity:0}}

/* 学生手机提示 */
.toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:60;background:#fff;border:3px solid var(--line);border-radius:16px;padding:10px 18px;font-size:19px;font-weight:800;box-shadow:0 5px 0 rgba(90,59,34,.35);animation:pop .3s;max-width:92vw;text-align:center}
.toast.bad{background:#FFE3EE}
.toast.out{opacity:0;transition:opacity .5s}
/* 旧规则里 .bal img / .podium img 给的固定高度不能套到小伙伴身上 */
.bal .ride img,.lanes.solo .bal .ride img,.podium .pl .ride img,.tcol .ride img{height:auto;animation:none}
.bal .ride img.env,.lanes.solo .bal .ride img.env,.podium .pl .ride img.env{height:100%}

/* 提示语里的中文词：楷体、不加拼音 */
.reveal .cw{font-family:var(--kai);font-size:56px;font-weight:700;line-height:1.1}
.fe .ew{font-family:var(--kai);font-size:1.2em}
.avpick .nm{font-family:var(--kai);font-size:18px;font-weight:700}
/* 手机上答题页左上角的小气球被压扁：老的 .qtop img 规则套到了小伙伴身上，而且在弹性行里被挤窄 */
.ride{flex:0 0 auto}
.qride{flex:0 0 auto;height:72px}
.qtop .ride img{height:auto;max-width:none}
.qtop .ride img.env{height:100%;width:auto}
.ride img.env{max-width:none}

/* 气球上方飘起的效果字：不用框，白字描边，往上飘着消失 */
.pop{position:absolute;left:50%;top:-6px;transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:clamp(18px,2.2vw,30px);color:#fff;
  text-shadow:0 2px 0 rgba(60,40,20,.55),0 0 2px rgba(60,40,20,.6),0 0 10px rgba(0,60,120,.35);pointer-events:none;z-index:4;animation:floatup 2.5s ease-out forwards}
.pop .ew{font-family:var(--kai);font-size:1.15em}
.pop.good{color:#FFF27A}
.pop.bad{color:#FFC4D2}
.lanes.solo .pop{font-size:clamp(14px,1.6vw,22px)}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,12px) scale(.6)}15%{opacity:1;transform:translate(-50%,-6px) scale(1.12)}30%{transform:translate(-50%,-12px) scale(1)}100%{opacity:0;transform:translate(-50%,-90px)}}

.avpick h4{grid-column:1/-1;margin:6px 0 0;font-size:16px;text-align:left;color:#7a5a40}
.avpick h4 small{font-weight:600;opacity:.7}
.avpick{max-height:46vh;overflow-y:auto;padding:2px}

/* 三语语言栏 */
.topr{display:flex;align-items:center;gap:10px}
.lang-picker{position:relative;flex:none}
.lang-picker-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 9px 0 7px;border:3px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;color:var(--ink)}
.lang-label{font-size:13px;font-weight:800}
.lang-chevron{font-size:10px;transition:transform .2s}
.lang-picker.open .lang-chevron{transform:rotate(180deg)}
.lang-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font-weight:900;flex-shrink:0;line-height:1;color:#fff}
.lang-icon-zh{background:linear-gradient(135deg,#E8302A,#C01A14);font-size:12px}
.lang-icon-en{background:linear-gradient(135deg,#2B6BBF,#1A4699);font-size:10px;letter-spacing:-.5px}
.lang-icon-ar{background:linear-gradient(135deg,#1A8C4E,#0E6035);font-size:13px}
.lang-picker-menu{position:absolute;top:calc(100% + 6px);right:0;width:max-content;background:#fff;border:3px solid var(--line);border-radius:12px;box-shadow:0 8px 0 rgba(90,59,34,.25);padding:5px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:70}
.lang-picker.open .lang-picker-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-picker-menu button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;cursor:pointer;padding:8px 14px 8px 9px;border-radius:8px;font-family:inherit;font-size:14px;font-weight:700;text-align:start;white-space:nowrap;color:var(--ink)}
.lang-picker-menu button:hover{background:#FFF1C9}
.lang-picker-menu button.active{background:var(--tealD);color:#fff}
[dir="rtl"] .lang-picker-menu{right:auto;left:0}
[dir="rtl"] .racetimer{direction:ltr}
@media (max-width:640px){ .lang-label{display:none} .lang-picker-btn{padding:0 6px} }

/* =====================================================================
   视觉层级（不要满屏圆角方框）
   一级：每屏只留一个主操作按钮（立体、粗描边），手机答题的四个选项是可点的格子。
   二级：分组靠留白、地面、云朵来分，不加框。
   三级：信息（游戏码标签、人数、模式、计时、分数）用白字直接写在天空上。
   ===================================================================== */
:root{--sh:0 2px 0 rgba(40,70,110,.35),0 0 8px rgba(30,80,140,.25)}
/* 顶栏：游戏码只是信息，不加框；语言按钮改成半透明小圆片 */
.roomtag{background:none;border:0;padding:0;color:#fff;text-shadow:var(--sh);font-size:20px;font-weight:900;letter-spacing:.02em}
.lang-picker-btn{border:2px solid rgba(255,255,255,.7);background:rgba(255,255,255,.28);color:#fff;border-radius:999px;height:34px}
.lang-picker-btn .lang-label{text-shadow:0 1px 0 rgba(0,0,0,.2)}
.lang-picker-menu{border:0;box-shadow:0 10px 30px rgba(20,60,110,.25)}

/* 大厅：游戏码像游戏标题一样直接写在天上 */
.lobbyhead{flex-direction:column;align-items:center;gap:6px}
.codebox{background:none;border:0;box-shadow:none;padding:0}
.cl{color:#fff;text-shadow:var(--sh);font-size:22px;font-weight:700}
.cl b{color:#FFF27A}
.bigcode{color:#fff;font-size:clamp(84px,13vw,170px);letter-spacing:.14em;
  text-shadow:4px 0 0 var(--line),-4px 0 0 var(--line),0 4px 0 var(--line),0 -4px 0 var(--line),3px 3px 0 var(--line),-3px 3px 0 var(--line),3px -3px 0 var(--line),-3px -3px 0 var(--line),0 10px 0 var(--line),0 14px 18px rgba(30,60,100,.35)}
.lobbyctl{flex-direction:row;flex-wrap:wrap;background:none;border:0;box-shadow:none;padding:0;gap:22px}
.modelabel{background:none;border:0;padding:0;color:#fff;text-shadow:var(--sh);font-size:24px}
.modelabel::before{content:"👥 "}
.lobbyctl.solo .modelabel::before{content:"🙋 "}
.seg{border:0;background:rgba(255,255,255,.25);border-radius:999px;padding:4px;gap:2px}
.seg button{background:none;color:#fff;border-radius:999px;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.seg button.on{background:#fff;color:var(--ink);text-shadow:none;box-shadow:0 3px 0 rgba(40,70,110,.25)}
.count{color:#fff;text-shadow:var(--sh);font-size:24px}
.lobbyctl .btn{font-size:26px;padding:12px 40px}

/* 大厅小组：气球＋组名＋组员，靠留白分开，不加框 */
.lobbyteams{gap:8px;margin-top:6px}
.tcol{background:none;border:0;border-radius:0;padding:0;min-height:0;gap:4px}
.tcol img{height:clamp(90px,15vh,130px);filter:drop-shadow(0 6px 6px rgba(30,60,100,.2))}
.tcol h3{background:none!important;border:0;padding:0;font-size:24px;font-weight:900;color:#fff;
  text-shadow:2px 0 0 var(--tc),-2px 0 0 var(--tc),0 2px 0 var(--tc),0 -2px 0 var(--tc),0 4px 0 var(--tc)}
.tcol ul{gap:4px 12px;margin-top:4px}
.tcol li{background:none;border:0;padding:0;flex-direction:column;gap:0;font-size:16px;font-weight:800;color:var(--ink)}
.tcol li .av{height:44px;filter:drop-shadow(0 3px 2px rgba(30,60,100,.2))}
.pcard{background:none;border:0;padding:0;font-size:17px;font-weight:800;color:var(--ink)}
.pcard .avbig{height:72px;filter:drop-shadow(0 4px 3px rgba(30,60,100,.2))}

/* 比赛：整块天空＋一道草坡，不加外框 */
#hostRace{width:100%;max-width:none}
.race{border:0;border-radius:0;background:none;overflow:visible;height:calc(100dvh - 130px)}
.race::before{content:"";position:absolute;left:-16px;right:-16px;bottom:0;height:24%;background:linear-gradient(#A9E08A,#6FC152);border-radius:50% 50% 0 0/40px 40px 0 0;box-shadow:inset 0 6px 0 rgba(255,255,255,.35)}
.lanes{z-index:1}
.finish{border-top:4px dashed rgba(255,255,255,.9)}
.finish span{background:none;border:0;padding:0;top:-30px;right:6px;color:#fff;text-shadow:var(--sh);font-size:20px}
.finish span::before{content:"🏁 "}
.bal .tag{background:none;border:0;padding:0;margin-top:-2px;font-size:clamp(16px,1.8vw,24px);font-weight:900;color:#fff;
  text-shadow:2px 0 0 var(--tc,var(--line)),-2px 0 0 var(--tc,var(--line)),0 2px 0 var(--tc,var(--line)),0 -2px 0 var(--tc,var(--line)),0 3px 0 var(--tc,var(--line))}
.bal .pts{color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.7);font-size:clamp(15px,1.6vw,22px)}
.racetimer{background:none;border:0;box-shadow:none;padding:0;color:#fff;font-size:clamp(36px,5vw,60px);
  text-shadow:3px 0 0 var(--line),-3px 0 0 var(--line),0 3px 0 var(--line),0 -3px 0 var(--line),0 6px 0 var(--line)}
.racetimer.hurry{background:none;color:#FFE04A}
.racebar .count{font-size:20px}
.btn.ghost.sm,.btn.soft{background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.85);color:#fff;box-shadow:none;text-shadow:0 1px 0 rgba(0,0,0,.2);border-radius:999px}

/* 结算：不再套大卡片，奖台站在天上 */
#hostEnd .card{background:none;border:0;box-shadow:none;padding:0}
#winTitle{color:#fff;font-size:clamp(30px,4vw,46px);text-shadow:3px 0 0 var(--line),-3px 0 0 var(--line),0 3px 0 var(--line),0 -3px 0 var(--line),0 6px 0 var(--line)}
.podium .pl{color:var(--ink)}
.podium .pl b{color:#fff;font-size:38px;text-shadow:2px 0 0 var(--line),-2px 0 0 var(--line),0 2px 0 var(--line),0 -2px 0 var(--line),0 4px 0 var(--line)}
#btnNewList{background:none;border:0;box-shadow:none;color:#fff;text-shadow:var(--sh);text-decoration:underline;text-underline-offset:5px;font-size:20px}

/* 老师贴词表：一张卡就够，里面的东西别再一层层描粗边 */
#vSetup textarea{border:2px solid #E6D6BF;background:#fff}
#vSetup textarea:focus{border-color:var(--tealD)}
.mode{border:0;box-shadow:0 7px 0 var(--mc,#2766B5),0 12px 16px rgba(30,60,100,.2)}
.mode[data-mode=solo]{--mc:#2766B5}
.mode[data-mode=team]{--mc:#BC3E73}
.mode:active{box-shadow:0 2px 0 var(--mc)}

/* 手机：题目写在一朵云上，四个选项是唯一的格子 */
.qbar{border:0;background:rgba(255,255,255,.45);height:14px;box-shadow:inset 0 2px 0 rgba(0,0,0,.08)}
.qprompt{position:relative;background:#fff;border:0;border-radius:90px;box-shadow:0 8px 0 rgba(120,170,210,.45);margin-top:26px;min-height:130px}
.qprompt::before,.qprompt::after{content:"";position:absolute;background:#fff;border-radius:50%;z-index:0}
.qprompt::before{width:34%;height:72%;left:14%;top:-26%}
.qprompt::after{width:24%;height:56%;right:18%;top:-18%}
.qprompt>*{position:relative;z-index:1}
.opt{border:0;box-shadow:0 6px 0 #B9CFE3,0 10px 14px rgba(30,60,100,.12);border-radius:18px}
.opt:active{box-shadow:0 2px 0 #B9CFE3}
.opt.ok{background:#5ED97B;color:#fff;box-shadow:0 6px 0 var(--greenD)}
.opt.ok .py{color:#E9FFF0}
.opt.no{background:#FF8C9E;color:#fff;box-shadow:0 6px 0 #C0392B}
.opt.no .py{color:#FFEFF2}
.qtimer{background:none;border:0;padding:0;color:#fff;font-size:30px;text-shadow:2px 0 0 var(--line),-2px 0 0 var(--line),0 2px 0 var(--line),0 -2px 0 var(--line),0 3px 0 var(--line)}
.qtimer.hurry{background:none;color:#FFE04A}

/* 挑头像：不用一格格白框，选中的垫一个金色圆 */
.avpick button{background:none;border:0;border-radius:50%;padding:4px}
.avpick button img{height:50px}
.avpick button.on{background:radial-gradient(circle,#FFE38A 0 62%,transparent 63%);transform:scale(1.12)}

/* 三朵云：不再套框；揭晓结果直接大字，不加卡片 */
.cloudbox{background:none;border:0;padding:6px 0}
.reveal,.reveal.mul{background:none;border:0;padding:6px 0}
.reveal .say{font-size:26px}
.reveal .en{color:#fff;text-shadow:var(--sh)}
.targets button{border:0;background:rgba(255,255,255,.85);border-radius:999px;box-shadow:0 4px 0 rgba(120,170,210,.5)}
.toast{border:0;border-radius:999px;box-shadow:0 8px 24px rgba(20,60,110,.3)}
@media (max-width:640px){ .bigcode{font-size:72px} .lobbyctl{gap:12px} .tcol h3{font-size:20px} .roomtag{font-size:16px} }
/* 草坡铺到屏幕底，底下的信息和按钮落在草地上 */
.race::before{position:fixed;left:0;right:0;bottom:0;height:34vh;z-index:0;border-radius:50% 50% 0 0/50px 50px 0 0}
.racebar{position:relative;z-index:1}
.racebar .count{color:#fff;text-shadow:0 2px 0 rgba(30,90,30,.45)}
/* 效果字在浅色天空上要看得清：深色描边 */
.pop{text-shadow:2px 0 0 var(--line),-2px 0 0 var(--line),0 2px 0 var(--line),0 -2px 0 var(--line),2px 2px 0 var(--line),-2px 2px 0 var(--line),0 4px 0 var(--line)}
.seg{background:rgba(20,80,140,.2)}
/* 大厅里游戏码已经写得很大，顶栏不再重复 */
body:has(#vHost:not([hidden]) #hostLobby:not([hidden])) #roomTag{visibility:hidden}
/* 剩下的卡片（首页输游戏码、老师贴词表）不要粗边框，靠白底和柔和阴影浮在天上 */
.card{border:0;box-shadow:0 14px 34px rgba(30,70,120,.18);background:rgba(255,253,247,.96)}
#vHome input{border:2px solid #E6D6BF}
#vHome input:focus{border-color:var(--tealD)}
/* 学生等待页：气球直接飘在天上，名字白字，挑头像放在底部浅色托盘里 */
#pWait{background:none;box-shadow:none;padding:6px 0 0;gap:6px}
#pWait #pTeam{color:#fff}
#pWait .msg{color:#fff;text-shadow:var(--sh)}
#pWait .avpick{background:rgba(255,255,255,.7);border-radius:24px;padding:8px 10px 12px}
#pEnd{background:none;box-shadow:none}
#pEnd h1,#pEnd .msg{color:#fff;text-shadow:var(--sh)}
#pTeam .tname{color:#fff;font-size:34px;text-shadow:2px 0 0 var(--tc),-2px 0 0 var(--tc),0 2px 0 var(--tc),0 -2px 0 var(--tc),0 4px 0 var(--tc)}
#pTeam small{color:#fff;opacity:1;font-size:18px;text-shadow:var(--sh)}