:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#222;background:#f2f5fb;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;line-height:1.35}*{box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{margin:0}.page{width:100%;height:100dvh;padding:14px;overflow:hidden}.center-page{place-items:center;display:grid}.card{background:#fff;border:1px solid #d6dfef;border-radius:18px;padding:16px;box-shadow:0 8px 22px #1d2f4f1f}.home-card,.create-card{flex-direction:column;gap:14px;width:min(820px,100%);max-height:calc(100dvh - 32px);padding:30px;display:flex;overflow:hidden}.home-card h1{font-size:clamp(32px,5vw,48px)}.home-card .muted{font-size:16px;line-height:1.5}.home-card .label{margin-top:2px;margin-bottom:4px}.home-card .input{padding:12px 14px;font-size:16px}.home-card .btn{margin-top:2px;padding:12px 16px;font-size:16px}.create-card h2{font-size:clamp(28px,4.5vw,40px)}.create-card .muted{font-size:16px}.create-card .btn{padding:12px 16px;font-size:16px}h1,h2,h3{color:#1e2d4d;margin:0}.muted{color:#63718e}.label,.section-title{color:#243559;margin-top:8px;margin-bottom:6px;font-weight:700;display:block}.input{background:#f9fbff;border:1px solid #c6d4eb;border-radius:12px;outline:none;width:100%;padding:10px 12px;font-size:14px}.input:focus{border-color:#4e73df;box-shadow:0 0 0 2px #4e73df2e}.btn{color:#243559;cursor:pointer;background:#eef3ff;border:1px solid #c6d4eb;border-radius:12px;padding:10px 14px;font-weight:700}.btn.primary{color:#fff;background:#4668d5;border-color:#4668d5}.btn:disabled{opacity:.55;cursor:not-allowed}.hint{color:#6c7a98;margin:4px 0 8px;font-size:12px}.grid{gap:8px;padding-bottom:2px;display:flex;overflow-x:auto}.theme-btn,.score-btn{cursor:pointer;white-space:nowrap;color:#334873;background:#f8fbff;border:1px solid #c9d7ef;border-radius:12px;justify-content:center;align-items:center;gap:6px;min-width:104px;padding:9px 10px;font-weight:700;display:flex}.score-btn{min-width:74px}.theme-btn.active,.score-btn.active{color:#1f3f9e;background:#e9f0ff;border-color:#4668d5}.room-page{grid-template-columns:310px minmax(0,1fr);gap:12px;display:grid}.room-left{flex-direction:column;min-height:0;display:flex}.player-list{flex-direction:column;gap:7px;margin:8px 0;padding:0;list-style:none;display:flex;overflow:auto}.player-item{background:#f9fbff;border:1px solid #d8e1f2;border-radius:12px;justify-content:space-between;align-items:center;gap:8px;padding:7px 9px;display:flex}.room-right{grid-template-rows:auto minmax(0,1fr);gap:10px;min-height:0;display:grid}.canvas-card,.chat-card{flex-direction:column;gap:8px;min-height:0;display:flex}.canvas-card{box-shadow:none;background:0 0;border:none;border-radius:0;padding:0}.compact-tools{flex-wrap:wrap;gap:6px}.canvas-stage{flex:none;width:100%;min-height:0;position:relative}.board-wrap{aspect-ratio:16/9;background:#fff;border:1px solid #ccd7eb;border-radius:14px;width:100%;position:relative;overflow:hidden;container-type:inline-size}.board{touch-action:none;background:#fff;width:100%;height:100%;display:block}.board.drawing{cursor:crosshair}.canvas-overlay{pointer-events:none;flex-direction:column;justify-content:space-between;padding:clamp(8px,1.6cqi,12px);display:flex;position:absolute;inset:0}.canvas-head{flex-wrap:wrap;gap:6px;display:flex}.countdown-bar-wrap{background:#ffffffd1;border:1px solid #cedaef;border-radius:999px;height:clamp(8px,1.5cqi,12px);position:absolute;bottom:clamp(8px,1.6cqi,12px);left:clamp(8px,1.6cqi,12px);right:clamp(8px,1.6cqi,12px);overflow:hidden}.countdown-bar-fill{border-radius:999px;height:100%;transition:width .1s linear,background-color .1s linear}.pill{color:#2d426b;background:#ffffffe0;border:1px solid #d3def2;border-radius:999px;padding:clamp(4px,1.1cqi,6px) clamp(8px,2.2cqi,11px);font-size:clamp(10px,1.9cqi,13px);font-weight:700}.pill.strong{background:#4a72df24;border-color:#98b3f2}.pill.alarm{background:#f3c34733;border-color:#e2bd62}.phase-big-card{text-align:center;overflow-wrap:anywhere;background:#ffffffed;border:1px solid #d2ddf2;border-radius:18px;width:min(90%,86cqi);margin:auto;padding:clamp(10px,3cqi,26px) clamp(10px,2.6cqi,22px);box-shadow:0 12px 28px #25385f26}.phase-start-card{place-items:center;display:grid}.phase-start-btn{pointer-events:auto;border-radius:14px;min-width:min(260px,72%);height:clamp(46px,6.2cqi,64px);font-size:clamp(16px,2.4cqi,28px)}.phase-big-title{color:#1f3461;font-size:clamp(16px,5cqi,44px);font-weight:800;line-height:1.2}.phase-big-sub{color:#3f5483;margin-top:10px;font-size:clamp(12px,2.3cqi,22px);font-weight:600}.drawing-hint-box{color:#213761;overflow-wrap:anywhere;background:#ffffffe6;border:1px solid #d2ddf2;border-radius:14px;max-width:calc(100% - 12px);margin:auto auto 8px;padding:clamp(6px,1.7cqi,9px) clamp(10px,2.6cqi,14px);font-size:clamp(12px,2.4cqi,22px);font-weight:700}.choice-huge-panel{pointer-events:auto;text-align:center;background:0 0;border:none;border-radius:0;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}.choice-title{color:#223a69;margin-bottom:14px;font-size:clamp(13px,3cqi,32px);font-weight:800}.choice-huge-buttons{grid-template-columns:1fr 1fr;gap:0;width:100%;height:100%;display:grid;position:relative}.choice-huge-buttons:before{content:"";z-index:2;pointer-events:none;background:#a6badef2;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-1px)}.choice-huge-btn{color:#1d3361;background:#f0f6fff5;border:1px solid #bfceeb;border-radius:0;width:100%;height:100%;font-size:clamp(16px,4cqi,36px)}.row{align-items:center;display:flex}.row.between{justify-content:space-between}.row.gap{gap:8px}.row.wrap{flex-wrap:wrap}.tag{background:#f2f6ff;border:1px solid #d2dcef;border-radius:999px;margin-left:6px;padding:2px 8px;font-size:11px}.tag.blue{color:#1d4ed8;border-color:#9fc2ff}.mini{color:#2f446f;cursor:pointer;background:#f3f7ff;border:1px solid #c9d6ef;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700}.mini.active{color:#1d3c97;background:#e6eeff;border-color:#4668d5}.mini.danger{color:#ad1e1e;background:#fff5f5;border-color:#ef9f9f}.feed{background:#f8fbff;border:1px solid #d8e1f2;border-radius:12px;flex:1;padding:10px;overflow:auto}.feed-item{margin-bottom:5px;font-size:13px}.feed-item.system{color:#334e7f}.feed-item.correct{color:#15803d;font-weight:700}.feed-item.near{color:#c2410c;font-weight:700}.private-tip{color:#5f35c5;min-height:20px;font-size:13px}.private-tip.correct{color:#15803d;font-weight:700}.private-tip.near{color:#c2410c;font-weight:700}.private-tip.error{color:#b42318}.color-dot{cursor:pointer;border:2px solid #0000;border-radius:999px;width:20px;height:20px}.color-dot.active{border-color:#111827}.spacer{flex:1}.entry-info{color:#30466f;background:#f8fbff;border:1px solid #d7e0f1;border-radius:12px;gap:4px;margin:8px 0;padding:10px;font-weight:600;display:grid}.afk-overlay{z-index:999;background:#0006;place-items:center;display:grid;position:fixed;inset:0}.afk-card{background:#fff;border:1px solid #d4ddf0;border-radius:16px;width:min(440px,100vw - 26px);padding:18px;box-shadow:0 18px 36px #0000003d}.mobile-hidden{display:flex}.mobile-guess-bar{z-index:6;pointer-events:auto;background:#ffffffeb;border:1px solid #d4ddef;border-radius:12px;padding:8px;position:absolute;bottom:12px;left:10px;right:10px}.mobile-canvas-toasts{gap:6px;display:grid;position:absolute;bottom:66px;left:10px;right:10px}.mobile-toast-item{color:#fff;text-align:center;background:#203050d6;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:600}.mobile-toast-item.correct{background:#16a34aeb}.mobile-toast-item.near{background:#ea580ceb}@media (width<=900px){.page{padding:10px}.home-card,.create-card{gap:10px;max-height:calc(100dvh - 20px);padding:20px}.home-card .muted{font-size:14px}.home-card .input,.home-card .btn,.create-card .muted,.create-card .btn{font-size:15px}.room-page:not(.mobile-fullscreen){grid-template-columns:24% minmax(0,76%);gap:0}.room-page:not(.mobile-fullscreen) .room-left{gap:6px;min-height:0;max-height:none;padding:10px;overflow:auto}.room-page:not(.mobile-fullscreen) .room-left .row.between{place-items:start;gap:2px;display:grid}.room-page:not(.mobile-fullscreen) .room-left h3{font-size:13px;line-height:1.2}.room-page:not(.mobile-fullscreen) .room-left .muted{font-size:11px;line-height:1.2}.room-page:not(.mobile-fullscreen) .room-right{grid-template-rows:auto minmax(0,1fr);min-width:0;overflow:hidden}.room-page:not(.mobile-fullscreen) .canvas-card{min-width:0;box-shadow:none;background:0 0;border:none;border-radius:0;padding:0;overflow:visible}.room-page:not(.mobile-fullscreen) .chat-card{border-radius:16px;min-width:0;padding:10px;overflow:hidden}.room-page:not(.mobile-fullscreen) .canvas-stage{overflow:visible}.room-page:not(.mobile-fullscreen) .board-wrap{border-radius:16px;width:100%;max-width:100%}.room-page:not(.mobile-fullscreen) .canvas-overlay{grid-template-rows:auto minmax(0,1fr) auto;justify-content:stretch;place-items:stretch center;gap:6px;padding:6px;display:grid}.room-page:not(.mobile-fullscreen) .canvas-head{grid-row:1;align-self:start;width:100%}.room-page:not(.mobile-fullscreen) .phase-big-card,.room-page:not(.mobile-fullscreen) .choice-huge-panel,.room-page:not(.mobile-fullscreen) .drawing-hint-box{overflow-wrap:anywhere;word-break:break-word;width:calc(100% - 8px);max-width:calc(100% - 8px);margin:0 auto}.room-page:not(.mobile-fullscreen) .phase-big-card{border-radius:12px;grid-row:2;align-self:center;max-height:calc(100% - 8px);margin:auto;padding:12px 10px;overflow:auto}.room-page:not(.mobile-fullscreen) .phase-big-title{white-space:normal;overflow-wrap:anywhere;font-size:clamp(14px,2.4vw,22px);line-height:1.2}.room-page:not(.mobile-fullscreen) .phase-big-sub{font-size:clamp(11px,1.8vw,16px);line-height:1.25}.room-page:not(.mobile-fullscreen) .drawing-hint-box{grid-row:3;align-self:end;margin-bottom:2px;padding:8px 10px;font-size:clamp(11px,1.7vw,16px)}.room-page:not(.mobile-fullscreen) .choice-huge-panel{border-radius:0;grid-row:2;align-self:center;max-height:100%;padding:0;overflow:hidden}.room-page:not(.mobile-fullscreen) .choice-title{margin-bottom:8px;font-size:clamp(13px,2vw,20px)}.room-page:not(.mobile-fullscreen) .choice-huge-btn{height:100%;font-size:clamp(15px,2.1vw,24px)}.room-page:not(.mobile-fullscreen) .feed,.room-page:not(.mobile-fullscreen) .feed-item{overflow-wrap:anywhere;word-break:break-word;min-width:0}.room-page:not(.mobile-fullscreen) .chat-card form.row.gap{width:100%;min-width:0}.room-page:not(.mobile-fullscreen) .chat-card form.row.gap .input{flex:1;min-width:0}.room-page:not(.mobile-fullscreen) .player-list{gap:5px}.room-page:not(.mobile-fullscreen) .player-item{flex-direction:column;align-items:stretch;gap:4px;padding:6px}.room-page:not(.mobile-fullscreen) .player-item>div:first-child{flex-wrap:wrap;align-items:center;gap:3px;line-height:1.2;display:flex}.room-page:not(.mobile-fullscreen) .player-item>div:first-child strong{word-break:break-all;font-size:12px}.room-page:not(.mobile-fullscreen) .player-item .row.gap{justify-content:space-between;width:100%;font-size:11px}.room-page:not(.mobile-fullscreen) .tag{margin-left:0;padding:1px 6px;font-size:10px}.room-page:not(.mobile-fullscreen) .mini{padding:3px 6px;font-size:10px}.room-page:not(.mobile-fullscreen) .btn{padding:8px 10px;font-size:12px}.choice-huge-buttons{grid-template-columns:1fr}.phase-big-card{width:96%;padding:18px 14px}.mobile-fullscreen{width:100vw;height:100dvh;padding:0;display:block}.mobile-fullscreen.room-page{grid-template-columns:1fr;gap:0}.mobile-fullscreen .room-left{display:none}.mobile-fullscreen .room-right{grid-template-rows:1fr;min-width:0;height:100dvh;display:block}.mobile-fullscreen .canvas-card{box-shadow:none;border:none;border-radius:0;width:100vw;height:100dvh;padding:0}.mobile-fullscreen .canvas-stage{background:#0f172a;place-items:center;width:100vw;height:100dvh;display:grid}.mobile-fullscreen .board-wrap{aspect-ratio:16/9;width:100vw;max-width:100vw;height:auto;max-height:100dvh;box-shadow:none;background:#fff;border:none;border-radius:0}.mobile-fullscreen .mobile-hidden{display:none!important}.mobile-fullscreen .compact-tools{z-index:7;background:#ffffffeb;border:1px solid #d4ddef;border-radius:12px;padding:6px;position:absolute;top:10px;left:10px;right:10px}.mobile-fullscreen .choice-huge-buttons{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.mobile-fullscreen .choice-huge-buttons:before{width:auto;height:2px;inset:50% 0 auto;transform:translateY(-1px)}}