:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html,body{margin:0;background:#0b1320;color:#c7d5e0;font-family:Arial;overscroll-behavior:contain}
body{padding-left:var(--safe-left);padding-right:var(--safe-right)}

/* navbar */
.navbar{
  background:#0f1a2b;
  padding:12px 20px;
  display:flex;
  gap:20px;
  align-items:center;
  border-bottom:1px solid #22324a;
  flex-wrap:wrap;
  padding-top: calc(12px + var(--safe-top));
}
.navbar a{
  color:#7fff7f;text-decoration:none;font-weight:bold;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:8px 10px;border-radius:10px;
}
.navbar .spacer{margin-left:auto}

.wrap{max-width:1200px;margin:auto;padding:20px;padding-bottom:calc(20px + var(--safe-bottom))}
.panel{background:#1b2838;border:1px solid #22324a;border-radius:12px;padding:18px}
h1{margin:0 0 8px;color:#7fff7f;font-size:22px}
.desc{opacity:.9;margin:0 0 10px;white-space:pre-wrap}
.metaLine{font-size:13px;opacity:.9;line-height:1.45;margin:6px 0 12px}
.metaLine b{color:#7fff7f}
.metaLine .sep{opacity:.45;margin:0 8px}
.tagLine{font-size:12px;opacity:.85;margin:0 0 10px}

.center{display:flex;justify-content:center}

/* game frame */
.playerFrame{
  position:relative;
  background:#0f1a2b;
  border:1px solid #22324a;
  border-radius:12px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  max-width:100%;
}
#ruffle_container{
  border-radius:10px;
  overflow:hidden;
}

/* top bar */
.playBar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  margin:10px 0 14px;
}
.playBtn{
  background:#0f1a2b;
  border:1px solid #22324a;
  color:#c7d5e0;
  font-weight:bold;
  border-radius:12px;
  padding:10px 12px;
  min-height:44px;
  cursor:pointer;
}
.playBtn:hover{color:#7fff7f}
.playHint{font-size:12px;opacity:.85}

/* Vibrate toggle (mobile only via html.touch-ui) */
.vibToggle{
  display:none;
  align-items:center;
  gap:8px;
  background:#0f1a2b;
  border:1px solid #22324a;
  color:#c7d5e0;
  border-radius:12px;
  padding:10px 12px;
  min-height:44px;
  cursor:pointer;
  font-size:13px;
}
html.touch-ui .vibToggle{ display:inline-flex; }
.vibToggle input{
  width:18px;
  height:18px;
  accent-color:#7fff7f;
}
.vibToggle.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Touch UI: show overlays only on touch devices */
.mc_only{display:none !important;}
html.touch-ui .mc_only{display:initial !important;}

/* Center in fullscreen (desktop + mobile) */
#player_frame:fullscreen,
#player_frame:-webkit-full-screen{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  background:#000;
  border-radius:0;
}
#player_frame:fullscreen #ruffle_container,
#player_frame:-webkit-full-screen #ruffle_container{
  border-radius:0;
}

/* leaderboard */
.leaderWrap{display:flex;justify-content:center;margin-top:18px}
.leaderBox{
  width:100%;
  max-width:820px;
  background:#0f1a2b;
  border:1px solid #22324a;
  border-radius:12px;
  padding:14px;
}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #22324a;font-size:12px;text-align:left}
th{color:#7fff7f}
.small{font-size:12px;opacity:.85}
.rowInfo{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 10px}
.uCell{display:flex;align-items:center;gap:8px}
.uAva{width:26px;height:26px;border-radius:8px;border:1px solid #22324a;object-fit:cover;background:#0b1b2a}
.uLink{color:#c7d5e0;text-decoration:none;font-weight:bold}
.uLink:hover{color:#7fff7f}
.meRow{background:rgba(127,255,127,0.07)}

@media(max-width:640px){
  .navbar{padding:10px 12px;gap:10px}
  .wrap{padding:14px}
  .panel{padding:14px}
  .playerFrame{padding:10px}
  .playBtn{width:100%}
}