/* ---- reset & layout ---- */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:#06090f;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:100vh;font-family:'Orbitron',monospace;
  overflow-x:hidden;user-select:none;
}
#wrap{display:flex;align-items:flex-start;position:relative;}

/* ---- left panel ---- */
#ul{width:118px;padding:14px 10px;display:flex;flex-direction:column;gap:14px;color:#8eb4d4;}
.lbl{font-size:8px;letter-spacing:3px;color:#253d5a;margin-bottom:2px;}
.val{font-size:20px;font-weight:900;color:#7dd6f0;text-shadow:0 0 14px #4ac8f0aa;line-height:1;}

/* ---- size unlock dots ---- */
#sizes-row{display:flex;gap:4px;flex-wrap:wrap;}
.sz-dot{
  width:13px;height:13px;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  transition:all .4s;
  position:relative;
}
.sz-dot.locked{background:#131e2a;border-color:rgba(255,255,255,.05);}
.sz-dot.unlocking{animation:unlockPop .5s cubic-bezier(.17,.67,.2,1.5);}
@keyframes unlockPop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.4)}100%{transform:scale(1);opacity:1}}

/* ---- danger bar ---- */
.bar-bg{height:6px;background:rgba(255,100,100,.08);border:1px solid rgba(255,100,100,.15);border-radius:3px;overflow:hidden;}
#danger-bar{height:100%;width:0%;background:linear-gradient(90deg,#4ac8f0,#ff9f43);border-radius:3px;transition:width .3s,background .3s;}

/* ---- speed bar ---- */
.bar-bg2{height:5px;background:rgba(74,200,240,.06);border:1px solid rgba(74,200,240,.12);border-radius:2px;overflow:hidden;}
#speed-bar{height:100%;width:4%;background:linear-gradient(90deg,#4ac8f0,#7dd6f0);border-radius:2px;transition:width .4s;}

/* ---- right panel ---- */
#ur{width:90px;padding:14px 8px;display:flex;flex-direction:column;gap:10px;}
.badge{background:rgba(0,180,255,.07);border:1px solid rgba(0,180,255,.2);border-radius:6px;padding:8px 6px;text-align:center;}
.badge-n{font-size:18px;font-weight:900;color:#ffd43b;text-shadow:0 0 10px #ffd43b88;}
.badge-l{font-size:7px;letter-spacing:2px;color:#3a6080;margin-top:2px;}
#roles{margin-top:2px;display:flex;flex-direction:column;gap:3px;}
.role-row{display:flex;align-items:center;gap:4px;}
.role-n{font-size:7px;color:#2a4a6a;width:10px;text-align:right;}
.role-name{font-size:7px;font-weight:700;letter-spacing:1px;transition:opacity .4s,color .4s;}
.role-name.locked{opacity:.2;color:#334 !important;}
.hint{font-size:8px;letter-spacing:1px;color:#253d5a;line-height:2.1;margin-top:4px;}
.st-dot{width:11px;height:11px;border-radius:2px;background:#4ac8f0;box-shadow:0 0 6px #4ac8f088;transition:all .3s;}
.st-dot.used{background:#131e2a;box-shadow:none;}
.hint b{color:#4a8aaa;}

/* ---- overlay ---- */
#ov{position:absolute;inset:0;background:rgba(3,6,12,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:10;border-radius:4px;}
.diff-btn{
  width:108px;padding:12px 8px;border:1px solid rgba(74,200,240,.25);background:rgba(0,180,255,.06);
  border-radius:8px;cursor:pointer;text-align:center;transition:all .2s;
}
.diff-btn:hover{background:rgba(0,180,255,.18);border-color:rgba(74,200,240,.6);box-shadow:0 0 14px rgba(0,180,255,.3);}
.diff-name{font-size:13px;font-weight:900;color:#7dd6f0;letter-spacing:2px;margin-bottom:6px;}
.diff-desc{font-size:8px;letter-spacing:1px;color:#3a6080;line-height:1.8;}
#ov.h{display:none;}
.ot{font-size:22px;font-weight:900;color:#7dd6f0;text-shadow:0 0 26px #4ac8f0;letter-spacing:4px;}
.os{font-size:9px;letter-spacing:2px;color:#4a8aaa;text-align:center;line-height:2.6;}
.osc{font-size:34px;font-weight:900;color:#ffd43b;text-shadow:0 0 18px #ffd43b88;}
.btn{padding:9px 26px;border:1px solid #4ac8f0;background:rgba(0,180,255,.1);color:#7dd6f0;font-family:'Orbitron',monospace;font-size:10px;letter-spacing:3px;cursor:pointer;transition:all .2s;}
.btn:hover{background:rgba(0,180,255,.25);box-shadow:0 0 16px rgba(0,180,255,.4);}

/* ---- cutin ---- */
#cutin{position:absolute;inset:0;pointer-events:none;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;}
#cutin.show{opacity:1;}
#cutin-bg{position:absolute;inset:0;opacity:0;transition:opacity .15s;}
#cutin.show #cutin-bg{opacity:1;}
#cutin-inner{display:flex;flex-direction:column;align-items:center;gap:4px;transform:scale(.25) translateY(40px);transition:transform .3s cubic-bezier(.15,.65,.2,1.45);}
#cutin.show #cutin-inner{transform:scale(1) translateY(0);}
#cutin-title{font-size:56px;font-weight:900;letter-spacing:6px;}
#cutin-count{font-size:11px;letter-spacing:5px;opacity:0;transition:opacity .2s .25s;color:#888;}
#cutin.show #cutin-count{opacity:.5;}

/* ---- unlock cutin ---- */
#unlock{position:absolute;inset:0;pointer-events:none;z-index:21;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;transition:opacity .15s;}
#unlock.show{opacity:1;}
#unlock-inner{display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateY(20px) scale(.8);transition:transform .35s cubic-bezier(.15,.65,.2,1.4);}
#unlock.show #unlock-inner{transform:translateY(0) scale(1);}
#unlock-label{font-size:10px;letter-spacing:5px;color:#7dd6f0;}
#unlock-name{font-size:28px;font-weight:900;letter-spacing:4px;}
#unlock-sub{font-size:9px;letter-spacing:3px;color:#aaa;}

/* ---- level up ---- */
#lvup{position:absolute;inset:0;pointer-events:none;z-index:19;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;transition:opacity .12s;}
#lvup.show{opacity:1;}
#lvup-text{font-size:34px;font-weight:900;color:#4dabf7;text-shadow:0 0 28px #4dabf7,0 0 56px #4dabf788;letter-spacing:5px;transform:scale(.5);transition:transform .25s cubic-bezier(.17,.67,.22,1.5);}
#lvup.show #lvup-text{transform:scale(1);}
#lvup-wave{font-size:10px;letter-spacing:4px;color:#4dabf7;opacity:0;transition:opacity .2s .2s;}
#lvup.show #lvup-wave{opacity:.65;}

/* ---- audio toggles ---- */
.audio-toggles{display:flex;gap:8px;margin-top:6px;}
.audio-toggle-btn{
  padding:5px 12px;border:1px solid rgba(74,200,240,.3);background:rgba(0,180,255,.08);
  color:#7dd6f0;font-family:'Orbitron',monospace;font-size:8px;letter-spacing:2px;
  cursor:pointer;border-radius:4px;transition:all .2s;
}
.audio-toggle-btn:hover{background:rgba(0,180,255,.2);}
.audio-toggle-btn.audio-off{color:#334;border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02);}

/* ---- share button ---- */
.share-section{margin-top:4px;}
.share-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);
  color:#aaa;font-family:'Orbitron',monospace;font-size:9px;letter-spacing:2px;
  cursor:pointer;border-radius:4px;transition:all .2s;
}
.share-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.share-btn svg{flex-shrink:0;}

/* ---- footer ---- */
.game-footer{
  margin-top:14px;padding-top:10px;border-top:1px solid rgba(74,200,240,.1);
  font-size:8px;letter-spacing:1px;color:#253d5a;text-align:center;
  display:flex;flex-direction:column;gap:2px;
}
.game-footer a{color:#3a6080;text-decoration:none;transition:color .2s;}
.game-footer a:hover{color:#7dd6f0;}

/* ---- ranking ---- */
.ranking-section{width:100%;max-width:420px;margin-top:8px;}
.ranking-input{display:flex;gap:6px;justify-content:center;margin-bottom:8px;}
.ranking-name-input{
  width:140px;padding:6px 10px;background:rgba(0,180,255,.06);
  border:1px solid rgba(74,200,240,.25);color:#7dd6f0;
  font-family:'Orbitron',monospace;font-size:10px;letter-spacing:1px;
  border-radius:4px;outline:none;transition:border-color .2s;
}
.ranking-name-input:focus{border-color:rgba(74,200,240,.6);}
.ranking-name-input::placeholder{color:#253d5a;}
.ranking-submit-btn{padding:6px 16px !important;font-size:9px !important;}
.ranking-submit-btn.submitted{background:rgba(0,255,120,.12) !important;border-color:rgba(0,255,120,.4) !important;color:#69db7c !important;cursor:default;}
.ranking-tabs{display:flex;gap:4px;justify-content:center;margin-bottom:6px;}
.ranking-tab{
  padding:5px 14px;border:1px solid rgba(74,200,240,.2);background:rgba(0,180,255,.04);
  color:#3a6080;font-family:'Orbitron',monospace;font-size:8px;letter-spacing:2px;
  cursor:pointer;border-radius:4px;transition:all .2s;
}
.ranking-tab:hover{background:rgba(0,180,255,.12);color:#7dd6f0;}
.ranking-tab.active{background:rgba(0,180,255,.18);border-color:rgba(74,200,240,.5);color:#7dd6f0;}
.ranking-table-wrap{
  max-height:280px;overflow-y:auto;width:100%;
  scrollbar-width:thin;scrollbar-color:#253d5a transparent;
}
.ranking-table-wrap::-webkit-scrollbar{width:4px;}
.ranking-table-wrap::-webkit-scrollbar-track{background:transparent;}
.ranking-table-wrap::-webkit-scrollbar-thumb{background:#253d5a;border-radius:2px;}
.ranking-table{
  width:100%;border-collapse:collapse;font-size:9px;letter-spacing:1px;
}
.ranking-table th{
  padding:5px 6px;color:#253d5a;font-weight:500;
  border-bottom:1px solid rgba(74,200,240,.12);text-align:center;font-size:8px;
}
.ranking-table th:first-child{width:28px;}
.ranking-table td{
  padding:4px 6px;text-align:center;color:#4a8aaa;
  border-bottom:1px solid rgba(74,200,240,.06);
  font-variant-numeric:tabular-nums;
}
.ranking-table td:nth-child(2){text-align:left;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ranking-table tr.highlight td{color:#ffd43b;font-weight:700;}
.ranking-table tr.top1 td:first-child{color:#ffd700;}
.ranking-table tr.top2 td:first-child{color:#c0c0c0;}
.ranking-table tr.top3 td:first-child{color:#cd7f32;}
.ranking-loading{text-align:center;color:#253d5a;padding:16px;font-size:9px;letter-spacing:2px;}

/* ---- responsive ---- */
@media (max-width: 768px) {
  body{overflow:auto;align-items:flex-start;padding:8px 0;}
  #wrap{transform:scale(0.65);transform-origin:top center;}
}
@media (max-width: 480px) {
  #wrap{transform:scale(0.48);transform-origin:top center;}
}