*{box-sizing:border-box}
:root{--padTop: env(safe-area-inset-top, 0px); --padBottom: env(safe-area-inset-bottom, 0px); --headerH: calc(52px + var(--padTop)); --barH: calc(64px + var(--padBottom));}
html,body{
  margin:0;
  height:100%;
  min-height:100dvh;
  background:#0b0e14;color:#fff;
  font-family:system-ui;
}
body{overflow:hidden;-webkit-tap-highlight-color:transparent}

header{
  height:var(--headerH);
  padding:calc(10px + var(--padTop)) 12px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#111827;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
h1{margin:0;font-size:18px;color:#f0b90b;letter-spacing:.2px}
.hud{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.combo{color:rgba(255,255,255,0.75);font-weight:800;font-size:12px}
.hud b{color:#fff}

canvas{
  display:block;
  width:100%;
  height:calc(100dvh - var(--headerH) - var(--barH));
  background:linear-gradient(#f0b90b22,#000);
  touch-action:none;
}

button{
  border:none;
  font-weight:900;
}
#restart{
  padding:8px 10px;
  background:rgba(240,185,11,0.15);
  color:#fff;
  border:1px solid rgba(240,185,11,0.35);
  border-radius:10px;
}
#lbBtn{
  width:38px;height:38px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  color:#fff;
  border:1px solid rgba(255,255,255,0.10);
}

.bottomBar{
  height:var(--barH);
  padding-bottom:var(--padBottom);
  display:flex;
  align-items:stretch;
}
#drop{
  width:100%;
  font-size:18px;
  background:#f0b90b;
  color:#000;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Modal */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:12px;
}
.modal.open{ display:flex; }
.sheet{
  width:min(560px, 100%);
  background:#0f1626;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  padding:12px;
}
.sheetHead{
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 4px 10px;
}
.title{font-size:16px;font-weight:900}
.x{
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,0.06);
  color:#fff;
  border:1px solid rgba(255,255,255,0.10);
}
.row{display:flex; gap:8px; margin-top:8px}
input{
  flex:1;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.25);
  color:#fff;
  outline:none;
}
.primary{
  padding:10px 12px;
  border-radius:12px;
  background:#f0b90b;
  color:#000;
}
.ghost{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  color:#fff;
  border:1px solid rgba(255,255,255,0.10);
}
.lb{margin:10px 0 0; padding-left:18px; max-height:42vh; overflow:auto}
.lb li{padding:6px 0; border-bottom:1px dashed rgba(255,255,255,0.10)}
.lb li:last-child{border-bottom:none}
.hint{margin:10px 2px 2px; color:rgba(255,255,255,0.65); font-size:12px}


.infoBox{
  margin-top:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.18);
}
.infoTitle{font-weight:900;margin-bottom:6px}
.infoText{font-size:13px;color:rgba(255,255,255,0.80);line-height:1.35}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px; color:rgba(255,255,255,0.90); word-break:break-all}
.link{color:#f0b90b;text-decoration:none;font-weight:900}
.link:active{opacity:0.8}
.hint2{color:rgba(255,255,255,0.65);font-size:12px}

.tabs{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.tab{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  color:#fff;
  border:1px solid rgba(255,255,255,0.10);
  font-weight:900;
}
.tab.active{
  background:rgba(240,185,11,0.20);
  border-color:rgba(240,185,11,0.45);
  color:#fff;
}


/* Leaderboard table */
.lbWrap{margin-top:10px; max-height:55vh; overflow:auto; -webkit-overflow-scrolling:touch; border-radius:14px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.16);} 
.lbTable{width:100%; border-collapse:collapse; font-size:13px;} 
.lbTable thead th{position:sticky; top:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(8px); text-align:left; padding:10px; font-weight:900; border-bottom:1px solid rgba(255,255,255,0.10);} 
.lbTable tbody td{padding:12px 10px; border-bottom:1px solid rgba(255,255,255,0.06);} 
.colRank{width:46px; text-align:right;} .colScore{width:92px; text-align:right;} .lbTable tbody td:nth-child(1){text-align:right; color:rgba(255,255,255,0.75); font-weight:900;} .lbTable tbody td:nth-child(3){text-align:right; font-weight:900;}

.bigSubmit{min-height:52px;font-size:15px;border-radius:14px;}

.yourRank{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px dashed rgba(240,185,11,0.55);background:rgba(240,185,11,0.10);color:rgba(255,255,255,0.90);font-weight:900;font-size:13px;}

/* Trophy top-right */
header{position:relative;}
#lbBtn{
  position:absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  width:44px;height:44px;
  border-radius:14px;
}
.hud{padding-right:54px;}

/* Fullscreen LB mobile */
@media (max-width:520px){
  .modal.open{padding:0 !important;}
  .sheet{
    width:100vw !important; max-width:100vw !important;
    height:100dvh !important; max-height:100dvh !important;
    margin:0 !important; border-radius:0 !important;
    padding: calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px)) !important;
    display:flex; flex-direction:column;
  }
  .lbWrap{flex:1; max-height:none !important; min-height:0;}
  .row{gap:10px;}
  #playerName{font-size:16px; min-height:48px;}
  .bigSubmit{min-height:56px; font-size:16px;}
}