*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;background:#16233a;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;position:fixed;inset:0}
#app{position:fixed;inset:0}
canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.hidden{display:none!important}
#hud{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  padding:calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 12px) 0 calc(env(safe-area-inset-left) + 14px);
  pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.hud-left{padding-top:4px;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.k{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;opacity:.8;font-weight:700}
.k2{margin-top:6px}
.hud-mid{text-align:center;min-width:180px}
#bname{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;opacity:.9}
.fl{margin-top:2px}
#floors{font-size:48px;font-weight:800;line-height:1;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
#feet{font-size:17px;font-weight:700;margin-top:1px;font-variant-numeric:tabular-nums}
.bar{width:150px;height:4px;margin:6px auto 0;background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#9fd3ff,#ffffff);transform-origin:0 50%;transform:scaleX(0);transition:transform .3s}
#next{font-size:12px;font-weight:600;margin-top:5px;opacity:.9;white-space:nowrap}
.hud-right{display:flex;justify-content:flex-end}
.icon-btn{pointer-events:auto;width:44px;height:44px;border-radius:22px;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:20px;line-height:44px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.icon-btn:focus-visible,.big-btn:focus-visible{outline:3px solid #ffd27a;outline-offset:2px}
#toast{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 150px);transform:translate(-50%,-10px);text-align:center;opacity:0;
  transition:opacity .35s,transform .35s;pointer-events:none;width:92%}
#toast.show{opacity:1;transform:translate(-50%,0)}
.toast-sub{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#ffd27a;text-shadow:0 2px 4px rgba(0,0,0,.8)}
.toast-name{display:inline-block;margin-top:5px;background:rgba(12,18,32,.72);border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:7px 14px;font-size:17px;font-weight:700;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 20px) 22px calc(env(safe-area-inset-bottom) + 20px);
  background:linear-gradient(180deg,rgba(8,14,28,.55) 0%,rgba(8,14,28,.12) 45%,rgba(8,14,28,.55) 100%)}
.panel{width:100%;max-width:360px;text-align:center}
.kicker{font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:700;opacity:.9;text-shadow:0 1px 6px rgba(0,0,0,.7)}
h1{margin-top:8px;font-size:54px;line-height:.92;font-weight:800;letter-spacing:-1px;text-shadow:0 2px 0 rgba(0,0,0,.35),0 8px 30px rgba(0,0,0,.55)}
.sub{margin-top:8px;font-size:18px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#cfe6ff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.tag{margin-top:12px;font-size:15px;color:#eef3fa;line-height:1.4;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.controls{list-style:none;margin:16px auto 0;max-width:300px;text-align:left;background:rgba(10,16,30,.6);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:11px 14px;font-size:14px;line-height:1.6;color:#e8edf6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.controls b{color:#fff}
.best{margin-top:14px;color:#e6ecf5;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.cta{display:inline-block;margin-top:12px;padding:8px 20px;border-radius:22px;background:rgba(10,16,30,.62);font-size:19px;font-weight:800;color:#ffd27a;animation:pulse 1.2s ease-in-out infinite;letter-spacing:2px;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.8)}
@keyframes pulse{50%{opacity:.35}}
.card{background:rgba(10,16,30,.74);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:22px 18px 20px;box-shadow:0 10px 40px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.over-kicker{color:#ffd27a;font-weight:800;font-size:13px;letter-spacing:1.5px;text-transform:uppercase}
.tname{margin-top:6px;font-size:26px;font-weight:800;line-height:1.1}
.tname.small{font-size:16px;font-weight:700;opacity:.9}
.final{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:4px}
#finalFloors{font-size:68px;font-weight:800;letter-spacing:-2px;line-height:1;font-variant-numeric:tabular-nums}
.unit{font-size:18px;font-weight:700;opacity:.85;text-transform:uppercase;letter-spacing:1px}
.feetbig{font-size:20px;font-weight:700;margin-top:4px}
.badge{display:inline-block;margin-top:8px;background:#e8473f;color:#fff;font-weight:800;font-size:12px;padding:4px 9px;border-radius:4px;letter-spacing:1px}
.beat{margin:12px auto 12px;font-size:15px;font-weight:700;color:#fff;background:rgba(255,210,122,.14);border:1px solid rgba(255,210,122,.55);border-radius:10px;padding:9px 12px;line-height:1.3}
.stats{margin-top:10px;background:rgba(255,255,255,.06);border-radius:12px;padding:6px 14px;text-align:left}
.stats div{display:flex;justify-content:space-between;padding:6px 0;font-size:15px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.08)}
.stats div:last-child{border:0}
.stats .k{color:#b7c0cf;font-weight:500;font-size:15px;letter-spacing:0;text-transform:none;opacity:1}
.big-btn{margin-top:18px;width:100%;min-height:56px;border:0;border-radius:28px;background:#f4f7fb;color:#13203a;font-size:19px;font-weight:800;letter-spacing:.3px;cursor:pointer;box-shadow:0 4px 0 #9aa8bd;padding:0 14px}
.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #9aa8bd}
#topped{align-items:flex-end;background:linear-gradient(180deg,rgba(8,14,28,0) 40%,rgba(8,14,28,.6) 100%)}
#topped .card{padding:16px 16px 16px}
#topped .tname{font-size:22px}

/* short landscape phones: keep the whole result card and its button on screen */
@media (max-height: 500px) {
  .overlay{padding-top:calc(env(safe-area-inset-top) + 8px);padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}
  #over .panel,#topped .panel{max-width:460px}
  .card{padding:10px 16px 12px;border-radius:18px}
  .over-kicker{font-size:11px}
  .tname{font-size:20px}.tname.small{font-size:13px;margin-top:2px}
  #finalFloors{font-size:40px}.unit{font-size:14px}
  .feetbig{font-size:15px;margin-top:2px}
  .badge{margin-top:4px;font-size:11px;padding:2px 7px}
  .beat{margin:6px auto;font-size:13px;padding:5px 10px}
  .stats{margin-top:4px;padding:2px 12px;display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .stats div{padding:3px 0;font-size:13px}.stats .k{font-size:13px}
  .stats div:nth-last-child(2){border:0}
  .big-btn{margin-top:8px;min-height:44px;font-size:17px}
}