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