*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}:root{--bg: #1e1f22;--panel: #2b2d31;--panel-2: #313338;--text: #dbdee1;--muted: #949ba4;--accent: #5865f2;--accent-2: #23a559}html,body,#app{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:gg sans,Noto Sans,Helvetica Neue,Helvetica,Arial,sans-serif;user-select:none;-webkit-user-select:none}#topbar{position:absolute;top:0;left:0;right:0;height:48px;display:flex;align-items:center;gap:14px;padding:0 14px;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(6px);z-index:10}.brand{font-weight:700;letter-spacing:.3px;white-space:nowrap}#progress{position:relative;flex:1;height:10px;max-width:420px;border-radius:5px;background:#1a1b1e;overflow:hidden}#progress-fill{height:100%;width:0%;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .35s ease}#progress-label{position:absolute;right:6px;top:-1px;font-size:9px;color:var(--muted)}#players{display:flex;gap:7px;align-items:center;margin-left:auto}#players .avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;overflow:hidden;position:relative}#players .avatar img{width:100%;height:100%;object-fit:cover}#players .avatar.host:after{content:"👑";position:absolute;top:-8px;right:-6px;font-size:10px}.controls{display:flex;gap:6px}.icon-btn{width:32px;height:32px;border:none;border-radius:8px;background:var(--panel-2);color:var(--text);font-size:15px;cursor:pointer}.icon-btn:hover{background:#3a3c42}.icon-btn.off{color:#5c5f66;text-decoration:line-through}.text-btn{height:32px;padding:0 12px;border:none;border-radius:8px;background:var(--panel-2);color:var(--text);font-size:13px;cursor:pointer;white-space:nowrap}.text-btn:hover{background:#3a3c42}.text-btn.danger{background:#da373c;color:#fff}#board-wrap{position:absolute;inset:0}#board{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#board.dragging{cursor:grabbing}#preview-img{position:absolute;right:14px;bottom:14px;max-width:26%;max-height:30%;border-radius:8px;border:2px solid #0008;box-shadow:0 6px 24px #000a;opacity:.92;z-index:9;pointer-events:none}#lobby{position:absolute;inset:0;overflow-y:auto;padding:40px 24px 24px;display:flex;flex-direction:column;align-items:center;gap:18px;z-index:5}#lobby h1{font-size:30px}.tagline{color:var(--muted)}#gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;width:min(860px,100%)}#gallery .tile,.upload-tile{position:relative;aspect-ratio:3 / 2;border-radius:10px;overflow:hidden;cursor:pointer;border:3px solid transparent;background:var(--panel)}#gallery .tile img{width:100%;height:100%;object-fit:cover;display:block}#gallery .tile.sel,.upload-tile.sel{border-color:var(--accent)}#gallery .tile:hover,.upload-tile:hover{border-color:#5865f288}#lobby-host{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(860px,100%)}.lobby-row{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;justify-content:center;width:100%}.upload-tile{min-width:180px;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;color:var(--muted);padding:12px}#difficulty{display:flex;gap:8px;align-items:center;flex-wrap:wrap}#difficulty button{padding:10px 14px;border:none;border-radius:8px;background:var(--panel);color:var(--text);cursor:pointer}#difficulty button.sel{background:var(--accent);color:#fff}#custom-pieces{width:92px;padding:10px 12px;border:none;border-radius:8px;background:var(--panel);color:var(--text);font:inherit;outline:none}#custom-pieces::placeholder{color:var(--muted)}#custom-pieces.sel{background:var(--accent);color:#fff}#custom-pieces.sel::placeholder{color:#fffa}#btn-start,#btn-again{padding:12px 34px;font-size:16px;font-weight:700;border:none;border-radius:10px;background:var(--accent-2);color:#fff;cursor:pointer}#btn-start:disabled{background:var(--panel);color:var(--muted);cursor:default}.waiting{color:var(--muted);font-size:17px;padding:30px 0}#lobby-players{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;color:var(--muted);font-size:13px}#lobby-players .chip{background:var(--panel);border-radius:999px;padding:5px 12px;display:inline-flex;gap:6px;align-items:center}.chip-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}#complete-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8vh;z-index:20;pointer-events:none}.complete-card{background:color-mix(in srgb,var(--panel) 92%,transparent);border-radius:14px;padding:22px 34px;text-align:center;box-shadow:0 10px 40px #000c;pointer-events:auto}.complete-card h2{margin-bottom:6px}.complete-card p{color:var(--muted);margin-bottom:12px}#status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted);z-index:30;background:var(--bg)}#toast{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#111214ee;color:var(--text);padding:10px 18px;border-radius:10px;z-index:40;font-size:14px}