/* Tab+Notch Client v0.2.1.6 — main.css */
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=DM+Sans:wght@400;500;600&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{--bg:#1a1a20;--surf:#22222a;--bdr:#38384a;--acc:#f0c040;--txt:#f0ede8;--mut:#7a7888;}
body{background:var(--bg);color:var(--txt);font-family:'DM Sans',sans-serif;height:100vh;display:flex;flex-direction:column;overflow:hidden;user-select:none;}
/* ---- Game Lobby ---- */
.lobby-bg{position:fixed;inset:0;z-index:900;background:var(--bg);display:none;align-items:flex-start;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:opacity .4s;}
.lobby-bg.visible{display:flex;opacity:1;}
.lobby-bg.hiding{display:flex;opacity:0;pointer-events:none;}
.lobby{width:94%;max-width:520px;text-align:center;padding:20px;margin:auto 0;}
.lobby-logo{font-family:'Abril Fatface',serif;font-size:2.8rem;margin-bottom:2px;animation:lobbyFadeIn .8s ease-out;}
.lobby-logo span{color:var(--acc);}
.lobby-tagline{font-size:.72rem;color:var(--mut);margin-bottom:28px;animation:lobbyFadeIn 1s ease-out;}
@keyframes lobbyFadeIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.lobby-card{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;padding:24px;margin-bottom:14px;text-align:center;animation:lobbyFadeIn 1.1s ease-out;}
.lobby-card-title{font-family:'Abril Fatface',serif;font-size:1.1rem;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;}
.lobby-stats{display:flex;gap:16px;margin-bottom:6px;justify-content:center;flex-wrap:wrap;}
.lobby-stat{text-align:center;min-width:60px;}.lobby-stat-val{font-family:'Abril Fatface',serif;font-size:1.8rem;line-height:1;}.lobby-stat-label{font-size:.6rem;color:var(--mut);margin-top:4px;}
.lobby-daily{background:linear-gradient(135deg,rgba(240,192,64,.08),rgba(240,192,64,.02));border-color:rgba(240,192,64,.2);}
.lobby-daily-img{width:100%;height:120px;border-radius:8px;background:var(--bdr);margin-bottom:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.lobby-daily-img canvas{width:100%;height:100%;object-fit:cover;}
.lobby-actions{display:flex;flex-direction:column;gap:8px;margin-top:18px;animation:lobbyFadeIn 1.3s ease-out;}
.lobby-btn{padding:14px 20px;border:1px solid var(--bdr);background:var(--surf);color:var(--txt);font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;border-radius:10px;transition:all .15s;display:flex;align-items:center;gap:10px;}
.lobby-btn:hover{border-color:var(--acc);color:var(--acc);}
.lobby-btn.primary{background:var(--acc);border-color:var(--acc);color:var(--bg);font-size:.9rem;}
.lobby-btn.primary:hover{background:#d4a830;}
.lobby-btn-icon{font-size:1.2rem;}
.lobby-btn-sub{font-size:.55rem;color:var(--mut);margin-left:auto;}
.lobby-signin{font-size:.68rem;color:var(--mut);margin-top:12px;cursor:pointer;}.lobby-signin:hover{color:var(--acc);}
/* ---- Themed Confirm/Alert Modal ---- */
.dialog-bg{position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:fadeIn .15s;}
.dialog-box{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;padding:28px;max-width:360px;width:90%;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.5);animation:popIn .25s cubic-bezier(.34,1.56,.64,1);}
.dialog-msg{font-size:.82rem;margin-bottom:20px;line-height:1.5;}
.dialog-btns{display:flex;gap:8px;justify-content:center;}
.dialog-btns .btn{min-width:90px;}
.topbar{flex-shrink:0;z-index:20;display:flex;flex-direction:column;align-items:center;padding:10px 14px 8px;border-bottom:1px solid var(--bdr);background:var(--surf);gap:2px;}
.logo{font-family:'Abril Fatface',serif;font-size:1.5rem;color:var(--txt);white-space:nowrap;line-height:1;}
.logo span{color:var(--acc);}
.timer-row{display:flex;align-items:center;gap:14px;position:relative;justify-content:center;}
.tb-thumb{width:48px;height:48px;border-radius:6px;overflow:hidden;border:1px solid var(--bdr);flex-shrink:0;background:var(--bg);position:relative;transition:border-color .15s;}
.tb-thumb:hover{border-color:var(--acc);box-shadow:0 0 8px rgba(240,192,64,.3);}
.tb-thumb canvas{width:48px;height:48px;display:block;}
.tb-thumb::after{content:'▾';position:absolute;bottom:1px;right:2px;font-size:.45rem;color:var(--acc);opacity:.7;}

.puz-menu-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:700;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
.puz-menu-bg.on{display:flex;}
.puz-menu-popup{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;box-shadow:0 16px 60px rgba(0,0,0,.6);min-width:300px;max-width:400px;width:90%;max-height:80vh;overflow-y:auto;padding:8px 0;}
.puz-menu-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .12s;font-size:.75rem;}
.puz-menu-item:hover{background:rgba(240,192,64,.06);}
.puz-menu-icon{font-size:1.1rem;flex-shrink:0;width:24px;text-align:center;}
.puz-menu-label{font-weight:600;font-size:.75rem;}
.puz-menu-desc{font-size:.58rem;color:var(--mut);margin-top:1px;}
.puz-menu-divider{height:1px;background:var(--bdr);margin:4px 12px;}
.puz-menu-header{font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);padding:8px 16px 4px;}
.puz-menu-saves{max-height:200px;overflow-y:auto;}
.puz-menu-save{display:flex;align-items:center;gap:8px;padding:6px 16px;cursor:pointer;transition:background .12s;font-size:.68rem;}
.puz-menu-save:hover{background:rgba(240,192,64,.06);}
.puz-menu-save-pct{width:32px;height:3px;background:var(--bdr);border-radius:2px;overflow:hidden;flex-shrink:0;}
.puz-menu-save-pct div{height:100%;background:var(--acc);border-radius:2px;}
.timer-center{display:flex;flex-direction:column;align-items:center;}
.timer-display{font-family:'DM Sans',sans-serif;font-size:1.9rem;font-weight:700;color:var(--acc);line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;min-width:120px;text-align:center;}
.timer-label{font-size:.44rem;color:var(--mut);text-transform:uppercase;letter-spacing:.14em;margin-top:1px;text-align:center;}
.tb-size-badge{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:48px;}
.tb-size-val{font-size:1.1rem;font-weight:700;color:var(--txt);line-height:1;}
.tb-size-lbl{font-size:.44rem;color:var(--mut);text-transform:uppercase;letter-spacing:.12em;}
.topbar-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:2px;}
.stat{display:flex;flex-direction:column;align-items:center;}
.sv{font-size:.9rem;font-weight:600;color:var(--acc);line-height:1;}
.sl{font-size:.46rem;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;}
.pw{width:50px;height:3px;background:var(--bdr);border-radius:2px;overflow:hidden;}
.pb{height:100%;background:var(--acc);transition:width .4s;}
.btn{padding:5px 10px;border:1px solid var(--bdr);background:transparent;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:500;cursor:pointer;border-radius:4px;transition:all .15s;white-space:nowrap;}
.btn:hover{border-color:var(--acc);color:var(--acc);}
.btn.go{background:var(--acc);border-color:var(--acc);color:#1a1a20;}
.btn.go:hover{background:#d4a830;}
.sz-select{background:var(--surf);border:1px solid var(--bdr);color:var(--txt);font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:500;padding:5px 8px;border-radius:4px;cursor:pointer;outline:none;transition:border-color .15s;}
.sz-select:hover,.sz-select:focus{border-color:var(--acc);color:var(--acc);}
.sz-select option{background:var(--surf);color:var(--txt);}
.ctrl-divider{width:1px;height:18px;background:var(--bdr);flex-shrink:0;}
.lb-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:700;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
.lb-modal-bg.on{display:flex;}
.lb-modal{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;box-shadow:0 16px 60px rgba(0,0,0,.6);min-width:420px;max-width:600px;width:94%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;}
.lb-dp-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;border-bottom:1px solid var(--bdr);flex-shrink:0;}
.lb-dp-header h3{font-family:'Abril Fatface',serif;font-size:1.1rem;}
.lb-dp-tabs{display:flex;gap:4px;padding:10px 18px;border-bottom:1px solid var(--bdr);flex-wrap:wrap;flex-shrink:0;}
.lb-dp-tab{padding:3px 9px;border:1px solid var(--bdr);background:transparent;color:var(--mut);font-family:'DM Sans',sans-serif;font-size:.62rem;cursor:pointer;border-radius:20px;transition:all .15s;}
.lb-dp-tab:hover{border-color:var(--acc);color:var(--acc);}
.lb-dp-tab.on{border-color:var(--acc);background:rgba(240,192,64,.12);color:var(--acc);}
.lb-dp-body{flex:1;overflow-y:auto;padding:0 18px 14px;}
.lb-dp-title{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);padding:10px 0 6px;font-weight:600;}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;}
.tray-lbl{font-size:.55rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mut);margin-bottom:0;opacity:.5;}
.pieces-col{position:relative;width:100%;min-height:100px;}
.field{flex:1;position:relative;overflow:hidden;background:#1e1c28;cursor:default;}
.table-picker{position:relative;display:inline-flex;}
.table-picker-btn{display:flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--bdr);border-radius:5px;cursor:pointer;background:var(--surf);transition:border-color .15s;}
.table-picker-btn:hover{border-color:var(--acc);}
.table-picker-dd{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;padding:8px;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.4);min-width:180px;}
.table-picker-dd.open{display:block;}
.table-picker-section{font-size:.5rem;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;margin:6px 0 4px;}.table-picker-section:first-child{margin-top:0;}
.table-picker-colors{display:flex;gap:4px;flex-wrap:wrap;}
.table-picker-color{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color .12s,transform .12s;}
.table-picker-color:hover{transform:scale(1.15);}
.table-picker-color.on{border-color:var(--acc);}
.table-picker-img{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:5px;cursor:pointer;font-size:.62rem;transition:background .12s;}
.table-picker-img:hover{background:rgba(255,255,255,.06);}
.table-picker-img.on{background:rgba(240,192,64,.1);color:var(--acc);}
.table-picker-img img{width:28px;height:28px;border-radius:4px;object-fit:cover;}

/* Bottom tray — resizable, scrollable */
.tray-handle{height:6px;cursor:ns-resize;background:var(--bdr);position:relative;flex-shrink:0;z-index:12;}
.tray-handle::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:2px;background:var(--mut);border-radius:2px;}
.tray-handle:hover{background:var(--acc);}
.tray-bottom{height:200px;min-height:80px;max-height:60vh;background:rgba(15,14,22,0.92);border-top:1px solid var(--bdr);overflow-y:auto;overflow-x:hidden;padding:10px 16px;z-index:11;flex-shrink:0;}
.tray-bottom::-webkit-scrollbar{width:4px;}
.tray-bottom::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
.version-footer{display:flex;justify-content:center;gap:16px;padding:3px 10px;background:var(--bg);border-top:1px solid var(--bdr);font-size:.48rem;color:var(--mut);flex-shrink:0;letter-spacing:.03em;}
.tray-bottom.drop-target{background:rgba(240,192,64,.08);border-top-color:rgba(240,192,64,.4);}

/* Zoom controls */
.zoom-controls{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;z-index:15;}
.zoom-btn{width:32px;height:32px;border:1px solid var(--bdr);background:rgba(34,34,42,.85);color:var(--txt);font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;transition:all .15s;backdrop-filter:blur(4px);}
.zoom-btn:hover{border-color:var(--acc);color:var(--acc);}
.zoom-level{font-size:.52rem;color:var(--mut);text-align:center;}
#board{position:absolute;pointer-events:none;z-index:1;}
.piece{position:absolute;cursor:grab;z-index:5;transition:filter .12s;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));}
.piece:hover{filter:drop-shadow(0 6px 20px rgba(0,0,0,.7)) brightness(1.12);}
.piece.dragging-piece{cursor:grabbing;z-index:100;filter:drop-shadow(0 14px 36px rgba(0,0,0,.8)) brightness(1.1);transition:none;}
.piece.snapping{transition:left .18s cubic-bezier(.2,1.4,.5,1), top .18s cubic-bezier(.2,1.4,.5,1), filter .12s;}
.piece.locked{cursor:default;filter:none;z-index:3;}
.piece.locked:hover{filter:none;}
.piece canvas{display:block;}
.tray-piece{cursor:grab;transition:filter .12s,box-shadow .15s;display:inline-flex;flex-shrink:0;border-radius:2px;touch-action:none;-webkit-touch-callout:none;user-select:none;}
.tray-piece:hover{filter:brightness(1.25);box-shadow:0 0 12px rgba(240,192,64,.4);z-index:100!important;}
.tray-piece.gone{display:none!important;}
.tray-piece canvas{display:block;pointer-events:none;}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;align-items:center;justify-content:center;overflow:hidden;}
.modal-bg.on{display:flex;}
.modal{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;padding:26px;max-width:500px;width:94%;box-shadow:0 24px 80px rgba(0,0,0,.6);max-height:90vh;overflow:visible;display:flex;flex-direction:column;}
.modal h2{font-family:'Abril Fatface',serif;font-size:1.4rem;margin-bottom:16px;}
.img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px;overflow:visible;padding:4px;}
.img-opt{aspect-ratio:1;border-radius:5px;overflow:hidden;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .1s,box-shadow .1s;position:relative;min-width:0;min-height:0;}
.img-opt:hover{transform:scale(1.06);box-shadow:0 0 0 2px var(--acc);z-index:2;}
.img-opt.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc);z-index:1;}
.img-opt canvas{width:100%;height:100%;display:block;}
.img-opt .ilbl{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.65);color:#fff;font-size:.52rem;text-align:center;padding:2px;letter-spacing:.05em;}
.upload-lbl{display:block;border:1px dashed var(--bdr);border-radius:5px;padding:11px;text-align:center;cursor:pointer;font-size:.7rem;color:var(--mut);transition:all .15s;margin-bottom:16px;}
.upload-lbl:hover{border-color:var(--acc);color:var(--acc);}
#file-in{display:none;}
.modal-btns{display:flex;gap:7px;justify-content:flex-end;}

.win-initials-wrap{margin-bottom:18px;}
.win-initials-label{font-size:.6rem;color:var(--mut);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;display:block;}
.win-initials-input{background:#16161e;border:2px solid var(--acc);border-radius:6px;color:var(--acc);font-family:'Abril Fatface',serif;font-size:1.6rem;font-weight:700;text-align:center;width:100px;padding:8px 4px;letter-spacing:.18em;text-transform:uppercase;outline:none;caret-color:var(--acc);}
.win-initials-input::placeholder{color:rgba(240,192,64,.3);}
.win-btn-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.win-btn-row .btn{font-size:.65rem;padding:6px 12px;min-width:0;}

.win-bg{display:none;position:fixed;inset:0;background:rgba(26,26,32,.9);z-index:800;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
.ach-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--bdr);border-radius:8px;margin-bottom:6px;transition:border-color .15s;}
.ach-item.unlocked{border-color:rgba(240,192,64,.3);background:rgba(240,192,64,.03);}
.ach-item.locked{opacity:.45;}
.ach-item .ach-icon{font-size:1.5rem;width:36px;text-align:center;flex-shrink:0;}
.ach-item .ach-info{flex:1;}
.ach-item .ach-name{font-weight:600;font-size:.72rem;}
.ach-item .ach-desc{font-size:.58rem;color:var(--mut);}
.ach-item .ach-date{font-size:.48rem;color:var(--acc);margin-top:2px;}
.win-bg.on{display:flex;}
.win-box{background:var(--surf);border:1px solid var(--acc);border-radius:12px;padding:24px 28px;text-align:center;width:90%;max-width:340px;max-height:90vh;overflow-y:auto;box-shadow:0 0 80px rgba(240,192,64,.2);animation:popIn .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes popIn{from{transform:scale(.72);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.win-ico{font-size:2rem;margin-bottom:4px;}
.win-h{font-family:'Abril Fatface',serif;font-size:1.6rem;color:var(--acc);margin-bottom:4px;}
.win-sub{font-size:.72rem;color:var(--mut);line-height:1.5;margin-bottom:14px;}
.lb-table{width:100%;border-collapse:collapse;margin-top:10px;}
.lb-table th{font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);padding:6px 8px;text-align:left;border-bottom:1px solid var(--bdr);}
.lb-table td{padding:8px 8px;font-size:.78rem;border-bottom:1px solid rgba(56,56,74,.4);}
.lb-table tr:last-child td{border-bottom:none;}
.lb-table tr:hover td{background:rgba(255,255,255,.03);}
.lb-rank{font-weight:700;color:var(--mut);width:28px;}
.lb-rank.gold{color:#f0c040;}
.lb-rank.silver{color:#aab0bc;}
.lb-rank.bronze{color:#cd7f32;}
.lb-time{font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums;}
.lb-user{color:var(--txt);}
.lb-size{color:var(--mut);font-size:.7rem;}
.lb-date{color:var(--mut);font-size:.65rem;}
.lb-empty{text-align:center;color:var(--mut);font-size:.78rem;padding:32px 0;}
.lb-view-tabs{display:flex;gap:0;border-bottom:1px solid var(--bdr);flex-shrink:0;}
.lb-view-tabs .lb-dp-tab{flex:1;border-radius:0;border:none;border-bottom:2px solid transparent;padding:8px 4px;text-align:center;}
.lb-view-tabs .lb-dp-tab.on{border-bottom-color:var(--acc);background:rgba(240,192,64,.06);}
.lb-me{color:var(--acc);font-weight:600;}
.lb-filter-row{display:flex;gap:6px;padding:10px 18px;border-bottom:1px solid var(--bdr);flex-shrink:0;}
.lb-filter-row select{flex:1;}
.lb-stats-row{display:flex;gap:8px;padding:10px 18px;border-bottom:1px solid var(--bdr);flex-wrap:wrap;}
.lb-stat-item{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:60px;flex:1;}
.lb-stat-val{font-size:.82rem;font-weight:700;color:var(--acc);line-height:1;font-variant-numeric:tabular-nums;}
.lb-stat-lbl{font-size:.44rem;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;}
.score-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--surf);border:1px solid var(--bdr);border-radius:8px;padding:8px 18px;font-family:'DM Sans',sans-serif;font-size:.76rem;color:var(--txt);box-shadow:0 8px 32px rgba(0,0,0,.4);z-index:900;opacity:0;transition:all .3s cubic-bezier(.2,1.4,.5,1);pointer-events:none;white-space:nowrap;}
.score-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.score-toast.pb{border-color:var(--acc);color:var(--acc);}
.score-toast.rank{border-color:#54a0ff;color:#54a0ff;}
.puz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;overflow:visible;padding:4px;}
.puz-card{border-radius:7px;overflow:hidden;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .1s,box-shadow .1s;position:relative;aspect-ratio:1;background:var(--bdr);}
.puz-card:hover{transform:scale(1.06);box-shadow:0 0 0 2px var(--acc);z-index:2;}
.puz-card.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc);z-index:1;}
.puz-card canvas{width:100%;height:100%;display:block;}
.puz-card .puz-lbl{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);color:#fff;font-size:.52rem;text-align:center;padding:3px 2px;letter-spacing:.05em;}
.puz-empty{grid-column:1/-1;text-align:center;color:var(--mut);font-size:.75rem;padding:30px 0;}
/* Auth UI */
.auth-bar{display:flex;align-items:center;gap:6px;}
.auth-bar .btn{font-size:.64rem;padding:4px 10px;}
.user-pill{display:flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--bdr);border-radius:20px;font-size:.68rem;color:var(--txt);cursor:pointer;background:rgba(255,255,255,.03);transition:border-color .15s;}
.user-pill:hover{border-color:var(--acc);}
.user-pill .user-initials{background:var(--acc);color:#1a1a20;font-weight:700;font-size:.55rem;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;letter-spacing:.04em;overflow:hidden;}
.user-pill .user-initials img{width:100%;height:100%;object-fit:cover;display:block;}
.user-pill .user-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-standings{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:644px;max-width:94vw;max-height:85vh;overflow-y:auto;background:var(--surf);border:1px solid var(--bdr);border-radius:12px;box-shadow:0 16px 60px rgba(0,0,0,.6);z-index:1010;padding:28px;font-size:1rem;}
.user-standings.open{display:block;}
.us-section{margin-bottom:18px;}
.us-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin-bottom:8px;font-weight:600;}
.us-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.us-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.us-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.us-stat{background:var(--bg);border:1px solid var(--bdr);border-radius:8px;padding:12px;text-align:center;}
.us-val{font-family:'Abril Fatface',serif;font-size:1.3rem;color:var(--acc);}
.us-label{font-size:.58rem;color:var(--mut);margin-top:3px;}
.us-mode-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(56,56,74,.2);font-size:.78rem;}
.us-mode-row:last-child{border-bottom:none;}
.us-mode-name{flex:1;font-weight:600;}
.us-mode-val{color:var(--mut);}
.user-dropdown{position:relative;}
.user-dd-panel{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:600;min-width:180px;padding:6px;}
.user-dd-panel.open{display:block;}
.user-dd-item{padding:8px 12px;font-size:.72rem;color:var(--txt);cursor:pointer;border-radius:5px;transition:background .12s;}
.user-dd-item:hover{background:rgba(255,255,255,.06);}
.user-dd-item.danger{color:#ff6b6b;}
.user-dd-divider{height:1px;background:var(--bdr);margin:4px 0;}

.auth-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:900;align-items:center;justify-content:center;}
.auth-modal-bg.on{display:flex;}
.auth-modal{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;padding:32px;max-width:380px;width:94%;box-shadow:0 24px 80px rgba(0,0,0,.6);}
.auth-modal h2{font-family:'Abril Fatface',serif;font-size:1.4rem;margin-bottom:6px;}
.auth-modal .auth-sub{font-size:.72rem;color:var(--mut);margin-bottom:20px;}
.auth-tabs{display:flex;gap:0;margin-bottom:18px;border-bottom:1px solid var(--bdr);}
.auth-tab{flex:1;padding:8px 0;text-align:center;font-size:.72rem;font-weight:600;color:var(--mut);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;}
.auth-tab:hover{color:var(--txt);}
.auth-tab.on{color:var(--acc);border-bottom-color:var(--acc);}
.auth-field{margin-bottom:12px;}
.auth-field label{display:block;font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin-bottom:5px;}
.auth-field input{width:100%;padding:9px 12px;background:#16161e;border:1px solid var(--bdr);border-radius:6px;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:.82rem;outline:none;transition:border-color .15s;}
.auth-field input:focus{border-color:var(--acc);}
.auth-error{font-size:.68rem;color:#ff6b6b;margin-bottom:10px;min-height:1.2em;}
.auth-submit{width:100%;padding:10px;background:var(--acc);border:none;border-radius:6px;color:#1a1a20;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s;margin-bottom:10px;}
.auth-submit:hover{background:#d4a830;}
.auth-submit:disabled{opacity:.5;cursor:not-allowed;}
.auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:.6rem;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--bdr);}
.auth-google{width:100%;padding:9px;background:transparent;border:1px solid var(--bdr);border-radius:6px;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:500;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px;}
.auth-google:hover{border-color:var(--acc);color:var(--acc);}
.auth-google svg{width:16px;height:16px;}

.rot-hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(26,26,32,.88);border:1px solid var(--bdr);border-radius:20px;padding:5px 14px;font-size:.62rem;color:var(--mut);pointer-events:none;z-index:200;opacity:0;transition:opacity .2s;white-space:nowrap;}
.rot-hint.show{opacity:1;}
.rot-hint kbd{background:var(--bdr);border-radius:3px;padding:1px 5px;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:.6rem;}
.touch-rot-btns{display:none;position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:300;flex-direction:column;gap:12px;align-items:center;}
.touch-rot-btns.show{display:flex;}
.touch-rot-btn{width:52px;height:52px;border-radius:50%;border:2px solid var(--acc);background:rgba(26,26,32,.92);color:var(--acc);font-size:1.4rem;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;}
.touch-rot-btn:active{background:var(--acc);color:var(--bg);}
.touch-rot-label{font-size:.45rem;color:var(--mut);text-align:center;}
.piece{touch-action:none;-webkit-touch-callout:none;user-select:none;}

/* Save/Resume */
.resume-bar{display:none;align-items:center;justify-content:center;gap:10px;padding:8px 14px;background:rgba(240,192,64,.08);border-bottom:1px solid rgba(240,192,64,.2);flex-shrink:0;font-size:.7rem;color:var(--txt);}
.resume-bar.on{display:flex;}
.resume-bar .resume-info{color:var(--mut);font-size:.62rem;}
.ann-banner{display:none;align-items:center;justify-content:center;gap:10px;padding:7px 14px;flex-shrink:0;font-size:.68rem;color:var(--txt);}
.ann-banner.on{display:flex;}
.ann-banner.info{background:rgba(84,160,255,.08);border-bottom:1px solid rgba(84,160,255,.2);}
.ann-banner.warning{background:rgba(255,165,2,.08);border-bottom:1px solid rgba(255,165,2,.2);}
.ann-banner.success{background:rgba(123,237,159,.08);border-bottom:1px solid rgba(123,237,159,.2);}
.ann-banner.event{background:rgba(167,139,250,.08);border-bottom:1px solid rgba(167,139,250,.2);}
.ann-banner .ann-close{cursor:pointer;opacity:.5;font-size:.8rem;margin-left:8px;}.ann-banner .ann-close:hover{opacity:1;}
.saves-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:850;align-items:center;justify-content:center;}
.saves-modal-bg.on{display:flex;}
.saves-modal{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;padding:24px;max-width:500px;width:94%;max-height:80vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.6);}
.saves-modal h2{font-family:'Abril Fatface',serif;font-size:1.2rem;margin-bottom:14px;}
.save-slot{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg);border:1px solid var(--bdr);border-radius:8px;margin-bottom:8px;transition:border-color .15s;}
.save-slot:hover{border-color:rgba(240,192,64,.3);}
.save-slot-info{flex:1;min-width:0;}
.save-slot-title{font-weight:600;font-size:.8rem;margin-bottom:2px;}
.save-slot-meta{font-size:.6rem;color:var(--mut);margin-bottom:4px;}
.save-slot-bar{height:3px;background:var(--bdr);border-radius:2px;overflow:hidden;}
.save-slot-fill{height:100%;background:var(--acc);border-radius:2px;transition:width .3s;}
.save-slot-actions{display:flex;flex-direction:column;gap:4px;}

/* Challenge Modes */
.ch-select{background:var(--surf);border:1px solid var(--bdr);color:var(--txt);font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:500;padding:5px 8px;border-radius:4px;cursor:pointer;outline:none;transition:border-color .15s;}
.ch-select:hover,.ch-select:focus{border-color:var(--acc);color:var(--acc);}
.ch-select option{background:var(--surf);color:var(--txt);}
.ch-badge{display:none;padding:2px 8px;border-radius:10px;font-size:.52rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;animation:chBadgePulse 2s ease-in-out infinite;}
.ch-badge.on{display:inline-flex;align-items:center;gap:4px;}
.ch-badge.sprint{background:rgba(255,107,107,.12);color:#ff6b6b;}
.ch-badge.zen{background:rgba(123,237,159,.12);color:#7bed9f;}
.ch-badge.edges{background:rgba(84,160,255,.12);color:#54a0ff;}
.ch-badge.fade{background:rgba(255,159,243,.12);color:#ff9ff3;}
.ch-badge.dark{background:rgba(167,139,250,.12);color:#a78bfa;}
@keyframes chBadgePulse{0%,100%{opacity:1;}50%{opacity:.7;}}
.ch-countdown-display{font-family:'DM Sans',sans-serif;font-size:1.9rem;font-weight:700;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.ch-countdown-display.warn{color:#ff6b6b;animation:chTimerWarn .5s ease-in-out infinite;}
.ch-countdown-display.crit{color:#ff6b6b;animation:chTimerWarn .25s ease-in-out infinite;font-size:2.1rem;}
@keyframes chTimerWarn{0%,100%{opacity:1;}50%{opacity:.5;}}
.ch-hint-btn{padding:5px 10px;border:1px solid var(--bdr);background:transparent;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:500;cursor:pointer;border-radius:4px;transition:all .15s;white-space:nowrap;}
.ch-hint-btn:hover{border-color:var(--acc);color:var(--acc);}
.ch-hint-btn:disabled{opacity:.3;cursor:not-allowed;}
.ch-hint-btn .ch-hint-count{font-weight:700;color:var(--acc);}
.ch-info-btn{width:26px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;border-radius:50%;color:var(--mut);min-width:0;}
.ch-info-btn:hover{color:var(--acc);border-color:var(--acc);}
.ch-info-list{display:flex;flex-direction:column;}
.ch-info-item{padding:12px 0;border-bottom:1px solid var(--bdr);}
.ch-info-head{font-weight:600;font-size:.82rem;margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.ch-info-icon{font-size:1rem;flex-shrink:0;}
.ch-info-desc{font-size:.7rem;color:var(--mut);line-height:1.55;padding-left:26px;}
.ch-ghost-overlay{position:absolute;pointer-events:none;z-index:2;opacity:0;transition:opacity .3s;}
.ch-ghost-overlay.show{opacity:.45;}
.ch-edge-lock-msg{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:rgba(84,160,255,.12);border:1px solid rgba(84,160,255,.3);border-radius:20px;padding:6px 16px;font-size:.64rem;color:#54a0ff;pointer-events:none;z-index:200;opacity:0;transition:opacity .25s;white-space:nowrap;}
.ch-edge-lock-msg.show{opacity:1;}
.ch-fail-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:810;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.ch-fail-overlay.on{display:flex;}
.ch-fail-box{background:var(--surf);border:1px solid #ff6b6b;border-radius:12px;padding:40px;text-align:center;max-width:320px;box-shadow:0 0 60px rgba(255,107,107,.15);animation:popIn .4s cubic-bezier(.34,1.56,.64,1);}
.ch-fail-box h2{font-family:'Abril Fatface',serif;font-size:2rem;color:#ff6b6b;margin-bottom:6px;}
.ch-fail-box p{font-size:.78rem;color:var(--mut);margin-bottom:20px;line-height:1.5;}
.piece.ch-fade-out canvas{transition:opacity 2s ease-out;}
.piece.ch-fade-outd canvas{opacity:.08;}
.tray-piece.ch-edge-glow{box-shadow:0 0 8px rgba(84,160,255,.5),inset 0 0 4px rgba(84,160,255,.2);}
.tray-piece.ch-dark-back canvas{opacity:0;}
.tray-piece.ch-dark-back{position:relative;background:radial-gradient(ellipse at 40% 35%,#3a3650,#24223a);border:1px solid rgba(167,139,250,.25);border-radius:4px;}
.tray-piece.ch-dark-back::after{content:'?';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Abril Fatface',serif;font-size:1.1rem;color:rgba(167,139,250,.35);pointer-events:none;}

/* Chat Panel */
.chat-panel{position:fixed;bottom:0;right:0;width:280px;max-height:320px;background:var(--surf);border:1px solid var(--bdr);border-bottom:none;border-radius:10px 10px 0 0;z-index:100;display:none;flex-direction:column;box-shadow:0 -4px 24px rgba(0,0,0,.3);}
.chat-panel.on{display:flex;}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--bdr);cursor:pointer;flex-shrink:0;}
.chat-header h4{font-family:'Abril Fatface',serif;font-size:.82rem;margin:0;}
.chat-header .chat-close{background:none;border:none;color:var(--mut);cursor:pointer;font-size:.9rem;}
.chat-msgs{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px;min-height:120px;}
.chat-msg{font-size:.66rem;line-height:1.4;}
.chat-msg .chat-name{font-weight:600;color:var(--acc);margin-right:4px;}
.chat-msg .chat-name.spectator{color:var(--mut);font-style:italic;}
.chat-msg .chat-text{color:var(--txt);}
.chat-msg .chat-time{color:var(--mut);font-size:.5rem;margin-left:4px;}
.chat-sys{font-size:.58rem;color:var(--mut);font-style:italic;padding:2px 0;}
.chat-input-row{display:flex;gap:4px;padding:8px 12px;border-top:1px solid var(--bdr);flex-shrink:0;}
.chat-input-row input{flex:1;padding:6px 10px;background:#16161e;border:1px solid var(--bdr);border-radius:5px;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:.68rem;outline:none;}
.chat-input-row input:focus{border-color:var(--acc);}
.chat-input-row button{padding:6px 10px;background:var(--acc);border:none;border-radius:5px;color:#1a1a20;font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:600;cursor:pointer;}
.chat-toggle-btn{position:fixed;bottom:12px;right:12px;z-index:99;padding:6px 12px;border:1px solid var(--bdr);background:var(--surf);color:var(--txt);font-family:'DM Sans',sans-serif;font-size:.64rem;border-radius:20px;cursor:pointer;display:none;box-shadow:0 2px 12px rgba(0,0,0,.3);}
.chat-toggle-btn.on{display:inline-flex;align-items:center;gap:4px;}
.chat-toggle-btn .chat-unread{background:var(--acc);color:#1a1a20;font-size:.5rem;font-weight:700;padding:1px 5px;border-radius:8px;}

/* Spectator banner */
.spec-banner{display:none;align-items:center;justify-content:center;gap:8px;padding:6px 14px;background:rgba(167,139,250,.1);border-bottom:1px solid rgba(167,139,250,.2);font-size:.66rem;color:#a78bfa;flex-shrink:0;}
.spec-banner.on{display:flex;}
.spec-banner .btn{font-size:.58rem;padding:3px 8px;}

/* Tournament UI */
.tn-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:860;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.tn-modal-bg.on{display:flex;}
.tn-modal{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;padding:28px;max-width:640px;width:94%;box-shadow:0 24px 80px rgba(0,0,0,.6);max-height:88vh;overflow-y:auto;}
.tn-modal h2{font-family:'Abril Fatface',serif;font-size:1.4rem;margin-bottom:16px;}
.tn-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.tn-card{padding:14px;border:1px solid var(--bdr);border-radius:8px;cursor:pointer;transition:all .12s;}
.tn-card:hover{border-color:var(--acc);background:rgba(240,192,64,.04);}
.tn-card-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.tn-card-name{font-weight:600;font-size:.82rem;flex:1;}
.tn-card-status{padding:2px 8px;border-radius:10px;font-size:.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.tn-card-status.registration{background:rgba(123,237,159,.12);color:#7bed9f;}
.tn-card-status.active{background:rgba(240,192,64,.12);color:var(--acc);}
.tn-card-status.completed{background:rgba(122,120,136,.12);color:var(--mut);}
.tn-card-meta{font-size:.6rem;color:var(--mut);}
.tn-bracket{overflow-x:auto;padding:16px 0;}
.tn-bracket-round{display:inline-flex;flex-direction:column;gap:12px;margin-right:24px;vertical-align:top;min-width:160px;}
.tn-bracket-round-title{font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin-bottom:4px;text-align:center;}
.tn-match-card{padding:6px 10px;border:1px solid var(--bdr);border-radius:6px;font-size:.66rem;background:var(--bg);}
.tn-match-card.active{border-color:var(--acc);}
.tn-match-card.completed{opacity:.7;}
.tn-match-player{display:flex;justify-content:space-between;padding:2px 0;}
.tn-match-player.winner{font-weight:700;color:var(--acc);}
.tn-match-player.bye{color:var(--mut);font-style:italic;}

/* Multiplayer UI */
.mp-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:850;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.mp-modal-bg.on{display:flex;}
.mp-modal{background:var(--surf);border:1px solid var(--bdr);border-radius:12px;padding:28px;max-width:580px;width:94%;box-shadow:0 24px 80px rgba(0,0,0,.6);max-height:88vh;overflow-y:auto;}
.mp-modal h2{font-family:'Abril Fatface',serif;font-size:1.4rem;margin-bottom:16px;}
.mp-mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.mp-mode-card{padding:18px 14px;border:2px solid var(--bdr);border-radius:10px;cursor:pointer;transition:all .15s;text-align:center;}
.mp-mode-card:hover{border-color:var(--acc);transform:scale(1.02);}
.mp-mode-card.on{border-color:var(--acc);background:rgba(240,192,64,.08);box-shadow:0 0 0 1px var(--acc);}
.mp-mode-card h3{font-family:'Abril Fatface',serif;font-size:1rem;margin-bottom:4px;}
.mp-mode-card p{font-size:.62rem;color:var(--mut);line-height:1.4;}
.mp-field{margin-bottom:12px;}
.mp-field label{display:block;font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin-bottom:5px;}
.mp-field input,.mp-field select{width:100%;padding:9px 12px;background:#16161e;border:1px solid var(--bdr);border-radius:6px;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:.82rem;outline:none;transition:border-color .15s;}
.mp-field input:focus,.mp-field select:focus{border-color:var(--acc);}
.mp-row{display:flex;gap:8px;margin-bottom:12px;}
.mp-row .mp-field{flex:1;margin-bottom:0;}
.mp-btn-row{display:flex;gap:8px;margin-top:16px;}
.mp-btn-row .btn{flex:1;}
.mp-room-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-height:240px;overflow-y:auto;}
.mp-room-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--bdr);border-radius:8px;cursor:pointer;transition:all .12s;}
.mp-room-item:hover{border-color:var(--acc);background:rgba(240,192,64,.04);}
.mp-room-item.on{border-color:var(--acc);background:rgba(240,192,64,.08);}
.mp-room-name{font-weight:600;font-size:.82rem;flex:1;}
.mp-room-meta{font-size:.6rem;color:var(--mut);}
.mp-room-badge{padding:2px 8px;border-radius:10px;font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.mp-room-badge.coop{background:rgba(123,237,159,.12);color:#7bed9f;}
.mp-room-badge.versus{background:rgba(255,107,107,.12);color:#ff6b6b;}
.mp-empty{text-align:center;color:var(--mut);font-size:.76rem;padding:28px 0;}
.mp-lobby-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(240,192,64,.06);border:1px solid rgba(240,192,64,.2);border-radius:8px;margin-bottom:8px;flex-shrink:0;}
.mp-lobby-bar .mp-room-code{font-family:'Abril Fatface',serif;font-size:1.2rem;color:var(--acc);letter-spacing:.15em;}
.mp-lobby-bar .mp-room-info{flex:1;font-size:.68rem;color:var(--mut);}
.mp-player-list{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;}
.mp-player-pill{display:flex;align-items:center;gap:5px;padding:4px 10px 4px 4px;border:1px solid var(--bdr);border-radius:20px;font-size:.68rem;}
.mp-igp{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 4px;border-radius:12px;font-size:.55rem;border:1px solid var(--bdr);}
.mp-igp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.mp-player-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.mp-player-name{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-player-ready{font-size:.5rem;color:#7bed9f;text-transform:uppercase;letter-spacing:.08em;margin-left:2px;}
.mp-player-host{font-size:.5rem;color:var(--acc);text-transform:uppercase;letter-spacing:.08em;margin-left:2px;}
.mp-countdown{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:860;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);}
.mp-countdown.on{display:flex;}
.mp-countdown-num{font-family:'Abril Fatface',serif;font-size:6rem;color:var(--acc);animation:countPulse .9s ease-in-out infinite;}
@keyframes countPulse{0%{transform:scale(1);opacity:1;}50%{transform:scale(1.15);opacity:.7;}100%{transform:scale(1);opacity:1;}}
.mp-vs-bar{display:none;align-items:stretch;padding:6px 16px 8px;gap:16px;font-size:.68rem;background:var(--surf);border-bottom:1px solid var(--bdr);z-index:18;flex-shrink:0;}
.mp-vs-bar.on{display:flex;}
.mp-vs-player{display:flex;flex-direction:column;flex:1;gap:3px;}
.mp-vs-player .mp-vs-name{font-weight:600;font-size:.62rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-vs-player .mp-vs-prog{width:100%;height:6px;background:var(--bdr);border-radius:3px;overflow:hidden;}
.mp-vs-player .mp-vs-fill{height:100%;border-radius:3px;transition:width .3s;}
.mp-vs-player .mp-vs-pct{font-size:.5rem;color:var(--mut);text-align:right;}
.mp-cursor{position:absolute;pointer-events:none;z-index:50;transition:left 50ms linear, top 50ms linear;}
.mp-cursor-dot{width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.mp-cursor-label{font-size:.5rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap;margin-top:2px;text-align:center;}
.mp-results-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:870;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);}
.mp-results-overlay.on{display:flex;}
.mp-results-box{background:var(--surf);border:1px solid var(--acc);border-radius:12px;padding:36px;text-align:center;max-width:400px;width:94%;box-shadow:0 0 60px rgba(240,192,64,.15);animation:popIn .4s cubic-bezier(.34,1.56,.64,1);}
.mp-results-box h2{font-family:'Abril Fatface',serif;font-size:1.8rem;color:var(--acc);margin-bottom:12px;}
.mp-results-table{width:100%;border-collapse:collapse;margin:14px 0;}
.mp-results-table th{font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);padding:6px 8px;text-align:left;border-bottom:1px solid var(--bdr);}
.mp-results-table td{padding:8px;font-size:.78rem;border-bottom:1px solid rgba(56,56,74,.3);}