/* Orbricks Toppler — UI styling (the 3D scene renders on #scene) */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: 'Avenir Next', 'Nunito', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  background: #11182b;
  color: #eef3ff;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; cursor: grab; }
#scene:active { cursor: grabbing; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 20px; pointer-events: none; gap: 12px;
}
.hud-left, .hud-right { display: flex; flex-direction: column; gap: 8px; }
.hud-right { align-items: flex-end; }
.hud-pill {
  background: rgba(12, 20, 38, 0.66);
  border: 1px solid rgba(120, 160, 220, 0.28);
  backdrop-filter: blur(6px);
  padding: 7px 14px; border-radius: 999px; font-size: 15px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.hud-pill.big { font-size: 22px; font-variant-numeric: tabular-nums; color: #ffe08a; }
.hud-name { font-size: 14px; opacity: 0.8; padding-left: 6px; }

/* in-game button pills (Menu) — the HUD itself ignores pointer events, so
   interactive controls must opt back in */
.hud-btn {
  pointer-events: auto; cursor: pointer; color: inherit;
  font-family: inherit; font-weight: 700; letter-spacing: 0.3px;
  transition: transform 0.08s, background 0.15s, border-color 0.15s;
}
.hud-btn:hover { background: rgba(28, 44, 78, 0.85); border-color: rgba(150, 190, 245, 0.55); }
.hud-btn:active { transform: scale(0.95); }

/* ---------- fullscreen toggle (floats over every screen) ---------- */
.fs-toggle {
  position: fixed; bottom: 16px; right: 16px; z-index: 50;
  width: 42px; height: 42px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 20, 38, 0.66);
  border: 1px solid rgba(120, 160, 220, 0.28);
  backdrop-filter: blur(6px);
  border-radius: 12px; color: #cfe0ff; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform 0.08s, background 0.15s, border-color 0.15s, opacity 0.15s;
  opacity: 0.72;
}
.fs-toggle:hover { opacity: 1; background: rgba(28, 44, 78, 0.85); border-color: rgba(150, 190, 245, 0.55); }
.fs-toggle:active { transform: scale(0.94); }
.fs-toggle svg { width: 22px; height: 22px; }
.fs-toggle .fs-exit { display: none; }
.fs-toggle.is-fullscreen .fs-enter { display: none; }
.fs-toggle.is-fullscreen .fs-exit { display: block; }

/* ---------- balance-analysis indicator ---------- */
#analyze {
  position: fixed; top: 22%; left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: analyze-in 0.3s ease;
}
@keyframes analyze-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.analyze-ring { position: relative; width: 96px; height: 96px; }
.analyze-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.analyze-ring .ring-track {
  fill: none; stroke: rgba(120, 160, 220, 0.22); stroke-width: 7;
}
.analyze-ring .ring-fill {
  fill: none; stroke: #6df0b0; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 213.6; stroke-dashoffset: 213.6;
  transition: stroke-dashoffset 0.12s linear;
  filter: drop-shadow(0 0 6px rgba(80, 240, 170, 0.6));
}
.analyze-core {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 34px; animation: analyze-pulse 1.1s ease-in-out infinite;
}
@keyframes analyze-pulse { 0%, 100% { transform: scale(0.92); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } }
.analyze-label {
  font-size: 17px; font-weight: 700;
  background: rgba(12, 20, 38, 0.66); border: 1px solid rgba(120, 160, 220, 0.28);
  backdrop-filter: blur(6px); padding: 7px 16px; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25); text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
#analyze.safe .ring-fill { stroke: #6df0b0; }
#analyze.safe .analyze-label { color: #6df0b0; }

/* ---------- banner ---------- */
#banner {
  position: fixed; top: 16%; left: 50%; transform: translateX(-50%);
  width: min(620px, 90vw); text-align: center; pointer-events: none; z-index: 5;
}
.banner-title { font-size: 28px; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.banner-intro {
  margin: 10px auto 0; max-width: 560px; font-size: 16px; line-height: 1.5;
  background: rgba(12, 20, 38, 0.6); border: 1px solid rgba(120,160,220,0.25);
  padding: 12px 18px; border-radius: 14px; backdrop-filter: blur(6px);
}
.banner-sub { margin-top: 14px; font-size: 18px; opacity: 0.85; }
.banner-go {
  font-size: 88px; font-weight: 900; color: #6df0b0;
  text-shadow: 0 0 30px rgba(80,240,170,0.7);
}
#banner.flash { animation: pop 0.5s ease; }
@keyframes pop { 0% { transform: translateX(-50%) scale(0.6); opacity: 0; } 50% { transform: translateX(-50%) scale(1.1); opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ---------- screens / panels ---------- */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 28px 16px;
  background: radial-gradient(ellipse at center, rgba(10,16,32,0.55), rgba(8,12,24,0.85));
  backdrop-filter: blur(3px);
}
/* margin:auto centers the panel but, unlike align-items:center, lets a panel
   taller than the viewport scroll without its top edge being clipped */
.screen > .panel { margin: auto; }
/* title screen: let the live 3D backdrop show through */
#screen-title {
  background: radial-gradient(ellipse at center, rgba(8,12,24,0.15) 20%, rgba(8,12,24,0.55) 100%);
  backdrop-filter: none;
}
#screen-title .panel {
  background: linear-gradient(160deg, rgba(28,40,70,0.82), rgba(18,26,48,0.82));
  backdrop-filter: blur(8px);
}

.panel {
  width: min(560px, 92vw);
  background: linear-gradient(160deg, rgba(28,40,70,0.95), rgba(18,26,48,0.95));
  border: 1px solid rgba(120,160,220,0.3);
  border-radius: 22px; padding: 34px 32px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
  text-align: center;
}
.logo {
  font-size: clamp(34px, 11vw, 54px); font-weight: 900; letter-spacing: 0.04em; line-height: 0.95;
  background: linear-gradient(180deg, #ffd27a, #ff7a4d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* em-based so the subtitle scales with the responsive logo size */
.logo span { display: block; font-size: 0.56em; letter-spacing: 0.27em; color: #8fb4ff; -webkit-text-fill-color: #8fb4ff; }
.tagline { margin: 18px 0 26px; font-size: 17px; opacity: 0.88; line-height: 1.5; }
.tagline .nowrap { white-space: nowrap; }
.credit { margin-top: 22px; font-size: 13px; opacity: 0.55; }
/* show the control hint matching the device's primary input (set on <html>) */
.credit-touch { display: none; }
html.is-touch .credit-desktop { display: none; }
html.is-touch .credit-touch { display: inline; }

.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  cursor: pointer; border: none; border-radius: 12px;
  padding: 12px 22px; font-size: 16px; font-weight: 700; font-family: inherit;
  background: rgba(120,160,220,0.18); color: #eef3ff;
  border: 1px solid rgba(120,160,220,0.35); transition: transform 0.08s, background 0.15s;
}
.btn:hover { background: rgba(120,160,220,0.32); }
.btn:active { transform: scale(0.96); }
.btn-big {
  background: linear-gradient(180deg, #ffce6a, #ff8a4d); color: #2a1500;
  border: none; padding: 14px 30px; font-size: 19px;
  box-shadow: 0 8px 24px rgba(255,140,70,0.35);
}
.btn-big:hover { filter: brightness(1.06); background: linear-gradient(180deg, #ffce6a, #ff8a4d); }

/* ---------- new-game intro (How to Play) ---------- */
.panel.howto { width: min(540px, 92vw); padding: 26px 30px 24px; }
.howto-title { font-size: 28px; font-weight: 800; letter-spacing: 0.3px; }
.howto-goal {
  margin: 8px auto 18px; max-width: 32rem;
  font-size: 18px; line-height: 1.5; font-weight: 600; color: #eaf1ff;
}
.howto-goal b { font-weight: 800; color: #fff; }
.howto-goal .goal-em { color: #ffd27a; font-weight: 700; }

/* grouped sections with a quiet uppercase label (visual hierarchy) */
.howto-section { text-align: left; margin-bottom: 13px; }
.section-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: #8fb4ff; opacity: 0.85; margin-bottom: 9px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(120,160,220,0.16);
}

/* device-aware control diagrams: drawn input devices + concise labels.
   show only the variant matching the device's primary input (set on <html>) */
.ctrl-diagram { display: flex; flex-direction: column; gap: 12px; }
.controls-touch { display: none; }
html.is-touch .controls-desktop { display: none; }
html.is-touch .controls-touch { display: flex; }

.ctrl-row { display: flex; align-items: center; gap: 20px; }
.ctrl-art { flex: none; display: flex; align-items: center; justify-content: center; }
.ctrl-art svg {
  display: block; height: auto; color: #9cc3ff;
  filter: drop-shadow(0 0 3px rgba(110,160,255,0.28));
}
.ctrl-art .cap { fill: rgba(120,160,220,0.10); }
.ctrl-art.art-keys { width: 96px; }
.ctrl-art.art-keys svg { width: 96px; }
.ctrl-art.art-mouse { width: 96px; }
.ctrl-art.art-mouse svg { width: 38px; }
.ctrl-art.art-gesture { width: 96px; }
.ctrl-art.art-gesture svg { width: 58px; }
.ctrl-art.art-fs { width: 96px; }
.ctrl-art.art-fs svg { width: 42px; }

.ctrl-info { display: flex; flex-direction: column; gap: 5px; font-size: 15px; line-height: 1.3; }
.ctrl-info b { font-weight: 700; }
.ctrl-info .ci-keys { opacity: 0.6; }

/* blocks: isometric cube · fixed-width name · muted description, columns aligned */
.block-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 24px; font-size: 14px; }
.block-legend .legend-item {
  display: grid; grid-template-columns: 24px 50px 1fr; align-items: center; gap: 10px;
}
.block-legend .cube { width: 24px; height: 26px; display: block; }
.block-legend .cube svg { width: 24px; height: 26px; display: block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45)); }
.block-legend .lname { font-weight: 700; }
.block-legend .ldesc { opacity: 0.62; }
.block-legend .legend-item.lava-row {
  grid-column: 1 / -1; justify-self: center; grid-template-columns: 24px auto auto;
}

.panel.howto .btn-big { margin-top: 8px; width: min(280px, 100%); }
@media (max-width: 520px) { .block-legend { grid-template-columns: 1fr; } }

/* ---------- result ---------- */
.res-win { font-size: 30px; color: #6df0b0; }
.res-lose { font-size: 30px; color: #ff8a7a; }
.res-score { font-size: 56px; font-weight: 900; margin: 10px 0; color: #ffe08a; }
.res-score span { font-size: 24px; opacity: 0.6; }
.res-detail { font-size: 16px; opacity: 0.85; margin-bottom: 22px; line-height: 1.5; }
.res-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 15px; }
.res-table td { padding: 6px 10px; border-bottom: 1px solid rgba(120,160,220,0.18); text-align: left; }
.res-table td:last-child { text-align: right; font-weight: 700; color: #ffe08a; }

/* ---------- leaderboard ---------- */
.lb-save { margin: 18px 0 6px; }
.lb-save-label { display: block; font-size: 14px; opacity: 0.85; margin-bottom: 10px; }
.lb-save-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lb-input {
  flex: 1 1 180px; min-width: 0; max-width: 260px;
  padding: 12px 16px; font-size: 16px; font-family: inherit; font-weight: 600;
  color: #eef3ff; background: rgba(12,20,38,0.66);
  border: 1px solid rgba(120,160,220,0.35); border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.lb-input::placeholder { color: rgba(238,243,255,0.45); font-weight: 500; }
.lb-input:focus { outline: none; border-color: rgba(150,190,245,0.7); background: rgba(16,26,48,0.85); }
.lb-saved { font-size: 17px; font-weight: 700; color: #6df0b0; margin: 16px 0 6px; }

.lb-table { margin-top: 8px; }
.lb-table .lb-rank { width: 44px; text-align: center; color: #eef3ff; font-weight: 700; }
.lb-table .lb-name { text-align: left; font-weight: 600; }
.lb-table td:last-child { text-align: right; font-weight: 700; color: #ffe08a; }
.lb-table .lb-mine td {
  background: rgba(109,240,176,0.16);
  color: #d6ffe9; border-bottom-color: rgba(109,240,176,0.4);
}
.lb-table .lb-mine td:last-child { color: #6df0b0; }
.lb-empty { font-size: 16px; opacity: 0.75; margin: 20px 0; line-height: 1.5; }

/* ---------- Control Score star system (added) ---------- */
/* Result-screen headline star rating */
.res-stars {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin: 4px 0 14px;
  line-height: 1;
}
.res-stars .star {
  font-size: 2.3rem;
  transition: transform 0.12s ease;
}
.star.on {
  color: #ffd34d;
  text-shadow: 0 0 10px rgba(255,200,80,0.65), 0 0 22px rgba(255,170,60,0.35);
  animation: star-pop 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.star.off {
  color: #6f7a93;
  opacity: 0.4;
  text-shadow: none;
}
@keyframes star-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Result-screen detail variants */
.res-detail-dim {
  font-size: 16px; opacity: 0.55; margin-bottom: 22px; line-height: 1.5;
}
.res-streak {
  font-size: 17px; font-weight: 700; text-align: center;
  color: #ff7a2a; margin: 2px 0 18px; line-height: 1.4;
  text-shadow: 0 0 12px rgba(255,110,40,0.45);
}

/* Final-screen per-level table stars (small, inline) */
.res-table .row-stars-cell {
  width: 88px; text-align: center; white-space: nowrap;
}
.row-stars { display: inline-flex; gap: 2px; line-height: 1; }
.row-stars .star {
  font-size: 0.9rem;
}
/* keep the cell from inheriting the gold last-child weight/color quirk */
.res-table td.row-stars-cell { font-weight: 400; color: inherit; }

/* HUD streak chip — fiery accent variant of .hud-pill */
.hud-streak {
  background: rgba(58, 22, 8, 0.62);
  border: 1px solid rgba(255,140,70,0.55);
  color: #ffd0a8;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 14px rgba(255,120,50,0.3);
  text-shadow: 0 0 8px rgba(255,120,50,0.4);
}