:root { color-scheme: dark; font-family: "Segoe UI", Arial, sans-serif; background: #080c10; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { display: grid; place-items: center; background: radial-gradient(circle at 50% 25%, #263743, #070a0d 72%); }
#game-shell { position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; max-height: 100vh; overflow: hidden; background: #111820; border: clamp(0px, .35vw, 4px) solid #050608; box-shadow: 0 24px 80px #000e; touch-action: none; user-select: none; }
#rotate-device { display: none; }
canvas { display: block; width: 100%; height: 100%; }
.menu-card { position: absolute; z-index: 10; left: 50%; top: 50%; width: min(430px, 90%); max-height: 94%; overflow: auto; translate: -50% -50%; display: grid; gap: 10px; padding: clamp(16px, 3vw, 34px); border: 1px solid #8799a355; border-radius: 7px; background: linear-gradient(145deg, #25313cf2, #10171ef2); box-shadow: 0 24px 80px #000e, inset 0 1px #ffffff20; color: #eef4f5; text-align: center; }
.menu-card.hidden { display: none; }
.menu-card h1 { margin: 0; font: 800 clamp(30px, 6vw, 52px)/.95 "Segoe UI", sans-serif; letter-spacing: -.05em; }
.menu-card strong { color: #e45d53; letter-spacing: .34em; font-size: 12px; }
.menu-card p, .menu-card small { margin: 2px 0; color: #aebbc2; font-weight: 600; }
.menu-card button { border: 1px solid #8ca0aa; border-radius: 4px; padding: .75em; background: linear-gradient(#c9544c, #812f2b); color: #fff; font: 700 clamp(16px, 3vw, 21px) inherit; box-shadow: 0 5px 16px #0008; }
.menu-card button:nth-of-type(2) { background: linear-gradient(#536570, #2c3840); }
button { cursor: pointer; transition: transform .08s ease, filter .08s ease, background .08s ease, box-shadow .08s ease; }
button.clicked, button:active, summary:active { transform: translateY(2px) scale(.98); filter: brightness(1.25); box-shadow: 0 0 0 2px #fff4, 0 2px 8px #000a !important; }
button.loading { opacity: .72; pointer-events: none; }

.profile-panel {
  display: grid;
  gap: 8px;
  margin: 4px 0 2px;
  padding: 10px;
  border: 1px solid #ffffff18;
  border-radius: 6px;
  background: #05090d66;
}
#profile-status {
  color: #cbd7dc;
  font-weight: 700;
  font-size: 12px;
}
.profile-panel input {
  width: 100%;
  min-height: 34px;
  border: 1px solid #7f929c88;
  border-radius: 4px;
  background: #081016;
  color: #f0f6f8;
  padding: 8px 10px;
  font: 600 14px "Segoe UI", Arial, sans-serif;
}
.profile-panel input::placeholder { color: #84939a; }
.cloud-login { display: grid; gap: 7px; text-align: left; }
.cloud-login summary { cursor: pointer; color: #cbd7dc; font-size: 12px; font-weight: 800; list-style-position: inside; }
.cloud-login[open] { gap: 8px; }
.cloud-login[open] summary { margin-bottom: 7px; }
.username-suggestions { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; color: #f0d68a; font-size: 12px; font-weight: 800; justify-content: center; }
.username-suggestions button { border: 1px solid #e4c66f88; border-radius: 4px; background: #3a321c; color: #ffe4a0; padding: 5px 7px; font-size: 12px; font-weight: 800; }
.profile-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.profile-actions button {
  padding: .55em !important;
  font-size: 12px !important;
}
#profile-logout {
  background: linear-gradient(#536570, #2c3840) !important;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 2px 0 0;
  text-align: left;
}
.profile-stats div {
  min-width: 0;
  border: 1px solid #ffffff14;
  border-radius: 4px;
  padding: 5px 7px;
  background: #07101888;
}
.profile-stats dt {
  color: #84939a;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.profile-stats dd {
  margin: 2px 0 0;
  overflow: hidden;
  color: #edf5f7;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar { position: absolute; inset: max(8px, env(safe-area-inset-top)) 2.5% auto; display: flex; align-items: center; justify-content: space-between; pointer-events: none; color: #e6edf0; font-weight: 700; letter-spacing: .14em; font-size: clamp(11px, 1.8vw, 16px); text-shadow: 0 2px 5px #000; }
.top-actions { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.topbar button, .level-picker { border: 1px solid #82939c; border-radius: 4px; background: #172129d9; color: #e6edf0; box-shadow: 0 4px 12px #0008; }
.topbar button { pointer-events: auto; padding: .5em .8em; font: 700 clamp(11px, 1.5vw, 14px) inherit; }
#music-toggle.muted { color: #9da8ad; background: #11181dbb; }
.level-picker { display: flex; align-items: center; gap: 6px; padding: .4em .55em; font-size: 12px; letter-spacing: 0; }
.level-picker select { border: 0; background: #34444d; color: #fff; font: 700 13px inherit; }
#controls { position: absolute; inset: auto 2% max(8px, env(safe-area-inset-bottom)); display: flex; align-items: end; justify-content: space-between; pointer-events: none; }
.move-controls { display: flex; gap: 8px; }
#controls button { pointer-events: auto; min-width: clamp(58px, 9vw, 78px); height: clamp(46px, 7.5vw, 64px); border: 1px solid #a5b1b8; border-radius: 8px; background: #17232bad; color: #e9f0f2; font-size: clamp(13px, 2.1vw, 18px); font-weight: 800; box-shadow: 0 5px 16px #000a; touch-action: none; }
#controls .jump { border-radius: 50%; background: #7d332fbb; }
#controls button.pressed, #controls button:active { translate: 0 2px; background: #b44740; }
@media (hover: hover) and (pointer: fine) { #controls { opacity: .18; } #controls:hover { opacity: .8; } }
@media (max-height: 430px) { #controls button { width: 43px; height: 43px; } }
@media (max-width: 720px) {
  .profile-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stats { grid-template-columns: 1fr; }
}
@media (orientation: portrait) and (max-width: 900px) {
  body { background: #070a0d; }
  #game-shell { filter: blur(2px) brightness(.45); transform: rotate(90deg); width: min(100vh, calc(100vw * 16 / 9)); max-height: 100vw; pointer-events: none; }
  #rotate-device {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-content: center;
    gap: 10px;
    padding: 24px;
    background: #05080bcc;
    color: #f4f8fa;
    text-align: center;
    font-weight: 800;
  }
  #rotate-device strong { font-size: clamp(24px, 8vw, 42px); }
  #rotate-device span { color: #b8c4c9; }
}
@media (orientation: landscape) and (max-height: 540px) {
  #game-shell { width: 100vw; height: 100vh; max-height: none; border: 0; }
  .menu-card { width: min(560px, 78vw); grid-template-columns: 1fr 1fr; align-items: start; }
  .menu-card h1, .menu-card strong, .menu-card p, .menu-card small { grid-column: 1 / -1; }
  .profile-panel { grid-column: 1 / -1; }
  .top-actions { gap: 5px; }
  .topbar button, .level-picker { padding: .38em .48em; }
}