* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff;
  font-family: "Segoe UI", "Rubik", Arial, sans-serif; user-select: none; -webkit-user-select: none;
  touch-action: none; overscroll-behavior: none;
}
#stage {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #10264f 0%, #000 75%);
}
/* the game keeps its 7:5 shape and fills the screen (size set by main.js) */
#game { position: relative; }
#game ruffle-player, #game ruffle-object, #game > * { width: 100%; height: 100%; display: block; }

/* ---------- touch pad ---------- */
#pad { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#pad .cluster { position: absolute; bottom: max(3vmin, env(safe-area-inset-bottom)); display: flex; gap: 2.2vmin; align-items: flex-end; pointer-events: none; }
#pad .left { left: max(3vmin, env(safe-area-inset-left)); direction: ltr; }
#pad .right { right: max(3vmin, env(safe-area-inset-right)); direction: ltr; }
.key {
  pointer-events: auto; touch-action: none;
  width: 15vmin; height: 15vmin; min-width: 54px; min-height: 54px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55); background: rgba(20, 40, 90, .38); color: #fff;
  font: 700 6vmin/1 "Segoe UI", Arial, sans-serif; backdrop-filter: blur(2px);
  box-shadow: 0 0 1.5vmin rgba(0, 0, 0, .5);
}
.key.big { width: 22vmin; height: 22vmin; font-size: 4.6vmin; background: rgba(0, 90, 255, .42); }
.key.small { width: 11vmin; height: 11vmin; font-size: 4vmin; align-self: flex-start; }
.key.on { background: rgba(255, 200, 0, .6); border-color: #fff; transform: scale(.94); }
body.portrait #pad .cluster { bottom: max(4vmin, env(safe-area-inset-bottom)); }

/* ---------- top bar ---------- */
#bar { position: fixed; top: max(1vmin, env(safe-area-inset-top)); left: max(1vmin, env(safe-area-inset-left)); z-index: 6; display: flex; gap: 1vmin; opacity: .55; }
#bar:hover { opacity: 1; }
#bar button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.45); color: #fff; font-size: 20px; cursor: pointer; }
body.playing-fs #bar { opacity: .25; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(0, 6, 25, .82); backdrop-filter: blur(6px); }
.overlay[hidden] { display: none; }
.card { text-align: center; padding: 4vmin 5vmin; max-width: min(92vw, 720px); border-radius: 22px;
  background: linear-gradient(160deg, rgba(30, 70, 160, .9), rgba(8, 20, 60, .95)); box-shadow: 0 10px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255,255,255,.2); }
.logo { width: min(24vmin, 140px); filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
h1 { margin: 1vmin 0; font-size: clamp(22px, 5.4vmin, 44px); letter-spacing: .5px;
  background: linear-gradient(#fff, #9fb6e6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { margin: 0 0 2.5vmin; color: #bcd0ff; font-size: clamp(13px, 2.6vmin, 18px); }
#play, #rotate-ok { font: 700 clamp(18px, 4.5vmin, 30px) "Segoe UI", Arial, sans-serif; padding: 1.6vmin 7vmin; border-radius: 99px; border: 0; cursor: pointer;
  color: #10204a; background: linear-gradient(#ffe46b, #ffb000); box-shadow: 0 6px 20px rgba(255, 176, 0, .45); }
#play:disabled { filter: grayscale(1) brightness(.7); cursor: wait; }
.help { margin-top: 2.5vmin; font-size: clamp(12px, 2.3vmin, 16px); color: #d5e0ff; line-height: 1.5; }
.help p { margin: .5vmin 0; }
.loading { color: #9fb6e6; font-size: 14px; min-height: 1em; }
.big-icon { font-size: 18vmin; margin: 0; }