:root{--paper:#f0e2bf;--paper-dark:#e4d1a4;--ink:#3d2f1e;--son-do:#b8352b;--son-do-sang:#c8402f;--vam:#e0a92e;--cham:#2f5d8a;--cham-sang:#3b6d9e;--chalk:#fcf8e8}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden}@supports (height:100dvh){html,body,#app{height:100dvh}}body{color:var(--ink);background:var(--paper);font-family:Be Vietnam Pro,system-ui,sans-serif}#scene{position:absolute;inset:0}#scene canvas{display:block}#badge-layer{pointer-events:none;z-index:3;position:absolute;inset:0}.badge{min-width:27px;height:27px;color:var(--chalk);background:#3d2f1ed1;border:1px solid #fcf8e859;border-radius:999px;justify-content:center;align-items:center;padding:0 5px;font-family:"Baloo 2",sans-serif;font-size:14px;font-weight:700;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 6px #3d2f1e4d}.badge-quan{border-color:var(--vam);background:#7a2018e6;min-width:30px;height:30px;font-size:15px}#hud{pointer-events:none;z-index:5;position:absolute;inset:0}#hud button{pointer-events:auto}#title-box{text-align:center;position:absolute;top:14px;left:50%;transform:translate(-50%)}#title-box h1{letter-spacing:.12em;color:var(--son-do);text-shadow:1px 1px 0 var(--chalk), 3px 3px 0 #3d2f1e2e;font-family:"Baloo 2",sans-serif;font-size:clamp(26px,4vw,40px);font-weight:800}#turn-box{border:2px solid var(--ink);white-space:nowrap;text-overflow:ellipsis;background:#fcf8e8eb;border-radius:999px;max-width:min(86vw,340px);padding:7px 22px;font-size:15px;position:absolute;top:86px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 3px #3d2f1e40}#turn-label b.p0{color:var(--son-do)}#turn-label b.p1{color:var(--cham)}.player-panel{border:2px solid var(--ink);background:#fcf8e8f0;border-radius:14px;width:190px;padding:10px 14px;transition:transform .25s,box-shadow .25s;position:absolute;left:16px;box-shadow:0 3px #3d2f1e40}#panel-0{bottom:20px}#panel-1{top:20px}.player-panel.active{transform:scale(1.06)}#panel-0.active{box-shadow:0 0 0 3px var(--son-do), 0 3px 0 #3d2f1e4d}#panel-1.active{box-shadow:0 0 0 3px var(--cham), 0 3px 0 #3d2f1e4d}.pp-head{align-items:center;gap:7px;font-size:14px;font-weight:700;display:flex}.pp-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.avatar{filter:drop-shadow(0 1px 1px #3d2f1e40);flex:none;width:24px;height:24px}.dot{border-radius:50%;width:11px;height:11px;margin-left:auto;display:inline-block}.dot.p0{background:var(--son-do-sang)}.dot.p1{background:var(--cham-sang)}.pp-body{align-items:baseline;gap:6px;margin-top:3px;font-family:"Baloo 2",sans-serif;display:flex}.pp-body .score{font-size:30px;font-weight:800;line-height:1}.pp-body .unit{color:#3d2f1eb3;font-size:12px}.pp-body .trophies{color:var(--vam);margin-left:auto;font-size:17px;font-weight:700}#toolbar{align-items:center;gap:8px;display:flex;position:absolute;top:16px;right:16px}#toolbar-bottom{z-index:5;flex-direction:column;align-items:flex-end;gap:10px;display:flex;position:absolute;bottom:16px;right:16px}#speed-box{border:2px solid var(--ink);background:#fcf8e8f0;border-radius:14px;flex-direction:column;align-items:center;gap:5px;padding:8px 7px 7px;display:flex;box-shadow:0 3px #3d2f1e40}#speed-box .spd-label{color:#3d2f1eb8;white-space:nowrap;font-size:11.5px;font-weight:700}#speed-box .spd-row{gap:2px;display:flex}#speed-box .spd{color:#3d2f1ebf;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:999px;padding:7px 12px;font-family:Be Vietnam Pro,sans-serif;font-size:13px;font-weight:600;line-height:1;transition:background .12s,color .12s}#speed-box .spd:hover{background:#e0a92e40}#speed-box .spd.active{background:var(--son-do);color:var(--chalk)}.btn{color:var(--chalk);background:var(--ink);cursor:pointer;border:none;border-radius:999px;padding:9px 18px;font-family:Be Vietnam Pro,sans-serif;font-size:14px;font-weight:600;transition:transform .12s,background .12s;box-shadow:0 3px #3d2f1e66}.btn:hover{background:#57452c;transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn-icon{justify-content:center;align-items:center;padding:9px 13px;font-size:15px;display:inline-flex}.btn-ico{width:16px;height:16px;display:none}#btn-sound .ico{width:16px;height:16px}#btn-sound .ico-off,#btn-sound.muted .ico-on{display:none}#btn-sound.muted .ico-off{display:block}.btn-big{background:var(--son-do);margin-top:18px;padding:12px 34px;font-size:18px}.btn-big:hover{background:var(--son-do-sang)}#toast{z-index:6;color:var(--chalk);opacity:0;white-space:nowrap;text-overflow:ellipsis;background:#3d2f1eeb;border-radius:999px;max-width:92vw;padding:10px 26px;font-size:15.5px;font-weight:600;transition:opacity .25s,transform .25s;position:absolute;bottom:60px;left:50%;overflow:hidden;transform:translate(-50%)translateY(20px)}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}.overlay{z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#2b1e0e8c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.overlay.hidden{display:none}.hidden{display:none!important}.folk-panel{background:radial-gradient(circle at 12% 8%, #e0a92e24, transparent 34%), radial-gradient(circle at 88% 92%, #b8352b1f, transparent 34%), var(--paper);border:3px solid var(--son-do);outline:1px solid var(--ink);outline-offset:-9px;text-align:center;overscroll-behavior:contain;border-radius:6px;width:100%;max-width:620px;max-height:min(92vh,100dvh - 28px);padding:30px 40px 34px;overflow:auto;box-shadow:0 18px 50px #1e140873}.folk-panel h2{letter-spacing:.1em;color:var(--son-do);margin:4px 0 10px;font-family:"Baloo 2",sans-serif;font-size:34px;font-weight:800}.folk-ornament{color:var(--vam);letter-spacing:12px;font-size:15px}.intro-sub{color:#3d2f1ed9;font-size:14.5px;line-height:1.55}.intro-grid{text-align:left;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;display:grid}.intro-grid>div{background:#fcf8e8bf;border:1.5px solid #3d2f1e59;border-radius:10px;padding:10px 13px;font-size:13px;line-height:1.5}.intro-grid b{color:var(--son-do)}.rules-list{text-align:left;gap:7px;margin:12px 0 4px;padding-left:22px;font-size:14px;line-height:1.6;display:grid}.rules-list b{color:var(--son-do)}#win-score{font-size:16px;line-height:1.7}#win-title .p0{color:var(--son-do)}#win-title .p1{color:var(--cham)}.win-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.win-actions .btn-big{margin-top:18px}.p0{color:var(--son-do)}.p1{color:var(--cham)}@media (width<=640px){.player-panel{width:148px;padding:7px 10px}.pp-head{gap:5px;font-size:12.5px}.pp-body .score{font-size:22px}.pp-body .trophies{font-size:15px}.badge{min-width:22px;height:22px;padding:0 4px;font-size:12px}.badge-quan{min-width:25px;height:25px;font-size:13px}#title-box{top:10px}#turn-box{top:44px}#toolbar{flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:48vw;top:12px;right:12px}.btn{padding:7px 14px;font-size:13px}.btn-icon{padding:7px 11px;font-size:14px}#toolbar-bottom{gap:8px;bottom:12px;right:12px}#speed-box{gap:3px;padding:6px 6px 5px}#speed-box .spd-label{font-size:10.5px}#speed-box .spd{padding:5px 10px;font-size:12px}#toast{padding:8px 20px;font-size:13.5px;bottom:16px}.intro-grid{grid-template-columns:1fr}.overlay{padding:14px}.folk-panel{padding:20px 18px 22px}.folk-panel h2{margin:2px 0 8px;font-size:25px}.folk-ornament{letter-spacing:8px;font-size:12px}.btn-big{margin-top:12px;padding:10px 26px;font-size:16px}.win-actions .btn-big{margin-top:12px}.intro-sub{font-size:13px}.intro-grid{gap:8px;margin-top:12px}.intro-grid>div{padding:8px 11px;font-size:12px}.rules-list{gap:5px;margin:10px 0 2px;padding-left:18px;font-size:13px}#win-score{font-size:14px}.lobby-field{margin-bottom:12px}.lobby-or{margin:16px 0 12px}.lobby-rooms{margin-top:12px}#room-list{max-height:168px}.lobby-footer{flex-wrap:wrap;justify-content:center;margin-top:12px}.lobby-footer .btn-ghost{padding:8px 13px;font-size:13px}}#spec-badge{z-index:12;color:var(--chalk);white-space:nowrap;text-overflow:ellipsis;background:#3d2f1ed9;border:1px solid #fcf8e859;border-radius:999px;max-width:86vw;padding:6px 14px;font-size:13px;font-weight:600;position:absolute;top:14px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 2px 8px #1e140859}#spec-badge.hidden{display:none}.lobby-panel{max-width:480px}.lobby-col{display:contents}.lobby-field{flex-direction:column;align-items:center;gap:6px;margin:4px 0 16px;display:flex}.lobby-field label{color:#3d2f1ed9;font-size:13.5px;font-weight:600}.lobby-panel input{font:inherit;color:var(--ink);background:#fcf8e8e6;border:1.5px solid #3d2f1e73;border-radius:10px;outline:none;padding:11px 14px}.lobby-panel input:focus{border-color:var(--son-do);box-shadow:0 0 0 3px #b8352b2e}#nick-input{text-align:center;width:240px}.create-block{flex-direction:column;align-items:center;gap:9px;display:flex}.lobby-create{margin-top:0}.public-opt{color:#3d2f1ecc;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:7px;font-size:12.5px;font-weight:500;display:inline-flex}.public-opt input{width:17px;height:17px;accent-color:var(--son-do);cursor:pointer;padding:0}.lobby-or{color:#3d2f1e8c;align-items:center;gap:12px;margin:26px 0 16px;font-size:12.5px;display:flex}.lobby-or:before,.lobby-or:after{content:"";background:#3d2f1e40;flex:1;height:1px}.join-box{gap:10px;display:flex}#code-input{text-align:center;letter-spacing:.35em;text-transform:uppercase;flex:1;min-width:0;font-family:"Baloo 2",sans-serif;font-size:17px;font-weight:800}#code-input::placeholder{letter-spacing:.08em;color:#3d2f1e66;font-family:Be Vietnam Pro,sans-serif;font-weight:500}.join-box .btn{flex:none;padding:11px 24px;font-size:15px}.btn-ghost{color:var(--ink);background:0 0;border:1.5px solid #3d2f1e80}.btn-ghost:hover{background:#3d2f1e14}.btn:disabled{opacity:.45;pointer-events:none}.shake{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}.lobby-rooms{text-align:left;background:#fcf8e8b3;border:1.5px solid #3d2f1e59;border-radius:10px;margin-top:18px;overflow:hidden}.lobby-rooms-head{background:#e0a92e1f;border-bottom:1.5px dashed #3d2f1e4d;justify-content:space-between;align-items:center;padding:9px 14px;font-size:13.5px;font-weight:700;display:flex}.net-status{color:#3d2f1ebf;font-size:12px;font-weight:500}.net-status[data-state=online]{color:#2e6b34}.net-status[data-state=offline]{color:var(--son-do)}#room-list{overscroll-behavior:contain;max-height:236px;overflow-y:auto}#room-list::-webkit-scrollbar{width:8px}#room-list::-webkit-scrollbar-thumb{background:#3d2f1e4d;border-radius:999px}#room-list::-webkit-scrollbar-track{background:0 0}.room-row{border-bottom:1px dashed #3d2f1e2e;align-items:center;gap:10px;padding:7px 14px;font-size:13.5px;display:flex}.room-row:hover{background:#e0a92e1a}.room-row:last-child{border-bottom:none}.room-code{letter-spacing:.08em;color:var(--son-do);background:#b8352b1a;border:1px solid #b8352b59;border-radius:6px;flex:none;align-self:center;padding:2px 7px;font-family:"Baloo 2",sans-serif;font-size:11.5px;font-weight:700}.room-main{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.room-name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.room-meta{color:#3d2f1ea6;font-size:12px}.room-row .btn{padding:7px 16px;font-size:13px}.btn-join{background:var(--cham)}.btn-join:hover{background:var(--cham-sang)}.btn-watch{color:var(--cham);border:1.5px solid var(--cham);box-shadow:none;background:0 0}.btn-watch:hover{background:#2f5d8a1a;transform:none}.room-empty{text-align:center;color:#3d2f1e99;padding:20px 14px;font-size:13px}.lobby-footer{justify-content:space-between;align-items:center;gap:10px;margin-top:14px;display:flex}.wait-hint{color:#3d2f1ecc;font-size:14px}.wait-code{box-sizing:border-box;letter-spacing:.35em;text-align:center;width:100%;color:var(--son-do);border:2px dashed var(--son-do);-webkit-user-select:all;user-select:all;background:#fcf8e8f2;border-radius:12px;margin-top:12px;padding:16px 10px 16px calc(10px + .35em);font-family:"Baloo 2",sans-serif;font-size:52px;font-weight:800;display:block}.wait-actions{gap:12px;margin-top:16px;display:flex}.wait-actions .btn{white-space:nowrap;flex:1;font-size:14px}.wait-leave{margin-top:14px}@media (width<=640px){.wait-code{padding:12px 8px 12px calc(8px + .35em);font-size:34px}.wait-actions{flex-direction:column}}@media (height<=500px){#title-box{top:6px}#title-box h1{font-size:22px}#turn-box{top:38px}.player-panel{width:150px;padding:6px 10px}.pp-head{gap:5px;font-size:12.5px}.pp-body .score{font-size:22px}#toolbar{gap:6px;top:10px;right:10px}.btn{padding:7px 14px;font-size:13px}.btn-icon{padding:7px 11px;font-size:14px}#toolbar-bottom{gap:6px;bottom:10px;right:10px}#speed-box{gap:3px;padding:6px 6px 5px}#speed-box .spd-label{font-size:10.5px}#speed-box .spd{padding:5px 10px;font-size:12px}#toast{padding:7px 18px;font-size:13px;bottom:12px}.folk-panel{padding:14px 22px 16px}.folk-panel h2{margin:2px 0 6px;font-size:20px}.folk-ornament{letter-spacing:6px;font-size:11px}.btn-big{margin-top:10px;padding:8px 22px;font-size:14.5px}.win-actions .btn-big{margin-top:10px}.intro-sub{font-size:12.5px;line-height:1.45}.intro-grid{grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.intro-grid>div{padding:6px 9px;font-size:11.5px;line-height:1.4}.rules-list{gap:4px;margin:8px 0 2px;padding-left:16px;font-size:12px;line-height:1.45}#win-score{font-size:13px}.lobby-field{gap:4px;margin:2px 0 10px}.lobby-field label{font-size:12.5px}.lobby-panel input{padding:8px 12px}#nick-input{width:220px}.create-block{gap:6px}.public-opt{font-size:11.5px}.lobby-or{margin:12px 0 10px;font-size:11.5px}.join-box{gap:8px}#code-input{font-size:15px}.join-box .btn{padding:8px 18px;font-size:13.5px}.lobby-rooms{margin-top:10px}.lobby-rooms-head{padding:6px 12px;font-size:12.5px}#room-list{max-height:92px}.room-row{padding:5px 12px;font-size:12.5px}.room-row .btn{padding:5px 12px;font-size:12px}.lobby-footer{flex-wrap:wrap;justify-content:center;margin-top:10px}.lobby-footer .btn-ghost{padding:7px 12px;font-size:12.5px}.overlay{padding:8px}.lobby-panel{grid-template-columns:1.08fr 1fr;grid-template-areas:"title title""colA colB""rooms rooms""footer footer";align-items:stretch;gap:2px 28px;max-width:700px;padding:10px 18px 12px;display:grid}.lobby-panel .folk-ornament{display:none}.lobby-panel h2{grid-area:title}.lobby-panel .lobby-col-create{flex-direction:column;grid-area:colA;justify-content:center;gap:6px;display:flex}.lobby-panel .lobby-col-join{flex-direction:column;grid-area:colB;justify-content:center;gap:10px;display:flex}.lobby-panel .lobby-field,.lobby-panel .lobby-or{margin:0}.lobby-panel .lobby-rooms{grid-area:rooms;margin-top:10px}.lobby-panel #room-list{max-height:48px}.lobby-panel .room-empty{padding:10px 14px}.lobby-panel .lobby-footer{grid-area:footer;justify-content:space-between;margin-top:10px}.wait-hint{font-size:12.5px}.wait-code{border-radius:10px;margin-top:6px;padding:7px 8px 7px calc(8px + .35em);font-size:26px}.wait-actions{flex-direction:row;gap:8px;margin-top:8px}.wait-actions .btn{padding:8px 12px;font-size:13px}.wait-leave{margin-top:8px}}@media (width<=640px),(height<=500px){#toolbar{flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:50vw;top:10px;right:10px}#toolbar .btn,#btn-sound{border-radius:999px;justify-content:center;align-items:center;width:34px;height:34px;padding:0;display:inline-flex;box-shadow:0 2px #3d2f1e66}.btn-txt{display:none}.btn-ico{display:block}.player-panel{align-items:center;gap:7px;width:auto;max-width:44vw;padding:5px 10px;display:flex}#panel-0{bottom:10px}#panel-1{top:auto;bottom:52px}.pp-head{flex:1;gap:5px;min-width:0;font-size:12px}.player-panel .dot{display:none}.avatar{width:20px;height:20px}.pp-body{flex:none;gap:4px;margin-top:0}.pp-body .score{font-size:17px}.pp-body .unit{font-size:10px}.pp-body .trophies{margin-left:0;font-size:13px}#title-box h1{letter-spacing:.08em;font-size:19px}#turn-box{padding:4px 14px;font-size:12.5px}#toolbar-bottom{gap:6px;bottom:10px;right:10px}#speed-box{flex-direction:row;align-items:center;gap:2px;padding:4px 6px}#speed-box .spd-label{display:none}#speed-box .spd{padding:5px 9px;font-size:11.5px}.badge{min-width:21px;height:21px;padding:0 4px;font-size:11.5px}.badge-quan{min-width:24px;height:24px;font-size:12.5px}#toast{padding:7px 16px;font-size:12.5px;bottom:64px}}