/* Menus: title, world list, create world, options, controls, pause, death, loading, click-to-play. */
#menus { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#menus.menu-title, #menus.menu-worlds, #menus.menu-create, #menus.menu-help, #menus.menu-confirmDelete,
#menus.menu-options, #menus.menu-controls { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55)); backdrop-filter: blur(3px); }
#menus.menu-pause, #menus.menu-helpInGame { background: var(--overlay); }

h2 { font-size: calc(var(--s) * 10); font-weight: 400; text-align: center; margin: 0 0 calc(var(--s) * 8); }

/* ---------- title ---------- */
.title-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.logo-wrap { position: relative; margin-top: 12vh; }
.logo {
  margin: 0; font-family: var(--logo-font); font-weight: 400; font-size: calc(var(--s) * 22); letter-spacing: calc(var(--s) * 1);
  color: transparent; background-size: calc(var(--s) * 32); image-rendering: pixelated; -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: calc(var(--s) * 0.6) #1c1c1c;
  filter: drop-shadow(0 calc(var(--s) * 2) 0 #2a2a2a) drop-shadow(0 calc(var(--s) * 2) 0 #151515) drop-shadow(0 calc(var(--s) * 3) calc(var(--s) * 3) rgba(0, 0, 0, 0.6));
}
.splash {
  position: absolute; right: calc(var(--s) * -14); bottom: calc(var(--s) * -8); color: var(--yellow); font-size: calc(var(--s) * 8);
  text-shadow: var(--s) var(--s) 0 #3f3f00; transform: rotate(-20deg); white-space: nowrap; animation: splash 0.5s ease-in-out infinite alternate;
}
@keyframes splash { from { transform: rotate(-20deg) scale(1); } to { transform: rotate(-20deg) scale(1.08); } }
.menu-buttons { width: calc(var(--s) * 200); max-width: 92vw; margin-top: calc(var(--s) * 28); display: flex; flex-direction: column; gap: calc(var(--s) * 4); }
.row { display: flex; gap: calc(var(--s) * 4); margin-top: calc(var(--s) * 4); }
.row > * { flex: 1; }
.footer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: calc(var(--s) * 2) calc(var(--s) * 3); font-size: calc(var(--s) * 6); text-shadow: var(--s) var(--s) 0 var(--text-shadow); }

/* ---------- generic menu panel ---------- */
.panel-menu { width: calc(var(--s) * 200); max-width: 94vw; max-height: 96vh; overflow-y: auto; padding: calc(var(--s) * 2); display: flex; flex-direction: column; gap: calc(var(--s) * 4); }
.panel-menu > * { flex-shrink: 0; }
.panel-menu.wide { width: calc(var(--s) * 310); }
.panel-menu p { text-align: center; margin: calc(var(--s) * 2) 0; text-shadow: var(--s) var(--s) 0 var(--text-shadow); }
.panel-menu label { display: block; color: var(--muted); font-size: calc(var(--s) * 7); margin-top: calc(var(--s) * 4); }

.world-list { height: 42vh; overflow-y: auto; background: rgba(0, 0, 0, 0.55); border-top: var(--s) solid #000; border-bottom: var(--s) solid #000; padding: calc(var(--s) * 2); }
.world-entry { padding: calc(var(--s) * 3) calc(var(--s) * 5); border: var(--s) solid transparent; cursor: pointer; }
.world-entry:hover { background: rgba(255, 255, 255, 0.06); }
.world-entry.sel { border-color: #a0a0a0; background: rgba(0, 0, 0, 0.6); }
.w-name { text-shadow: var(--s) var(--s) 0 var(--text-shadow); }
.w-meta { color: #808080; font-size: calc(var(--s) * 7); }

.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--s) * 4); }
.controls-list { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: calc(var(--s) * 2); padding-right: calc(var(--s) * 2); }
.control-row { display: grid; grid-template-columns: 1fr calc(var(--s) * 110); align-items: center; gap: calc(var(--s) * 6); text-shadow: var(--s) var(--s) 0 var(--text-shadow); }
.help-grid { display: grid; grid-template-columns: auto 1fr; gap: 0 calc(var(--s) * 10); font-size: calc(var(--s) * 7); background: rgba(0, 0, 0, 0.45); padding: calc(var(--s) * 6); }
.help-a { color: var(--muted); } .help-b { text-shadow: var(--s) var(--s) 0 var(--text-shadow); }
.hint { font-size: calc(var(--s) * 7); color: #d0d0d0; line-height: 1.4; }

/* ---------- death ---------- */
#menus.menu-death { background: linear-gradient(rgba(110, 0, 0, 0.35), rgba(160, 20, 20, 0.6)); }
.death-screen { display: flex; flex-direction: column; align-items: center; }
.death-screen h1 { font-size: calc(var(--s) * 18); font-weight: 400; margin: 0 0 calc(var(--s) * 10); }
.death-msg { margin-bottom: calc(var(--s) * 6); text-shadow: var(--s) var(--s) 0 var(--text-shadow); }
.score { color: #fff; text-shadow: var(--s) var(--s) 0 var(--text-shadow); } .score span { color: var(--yellow); }

/* ---------- loading ---------- */
#menus.menu-loading { background: #000; }
.loading-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-size: calc(var(--s) * 32); image-rendering: pixelated; }
.loading-text { margin-bottom: calc(var(--s) * 8); text-shadow: var(--s) var(--s) 0 var(--text-shadow); }
.progress { width: calc(var(--s) * 100); height: calc(var(--s) * 3); background: #808080; }
.progress-fill { width: 0; height: 100%; background: #80ff80; transition: width 0.15s; }

/* ---------- click to play ---------- */
#click-to-play { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); cursor: pointer; }
#click-to-play div { padding: calc(var(--s) * 4) calc(var(--s) * 10); background: rgba(0, 0, 0, 0.6); text-shadow: var(--s) var(--s) 0 var(--text-shadow); }

/* iPhone: how to get a full-screen Home Screen app */
.home-tip { width: calc(var(--s) * 200); max-width: 92vw; margin-top: calc(var(--s) * 6); z-index: 1;
  display: flex; align-items: center; gap: calc(var(--s) * 4); padding: calc(var(--s) * 3) calc(var(--s) * 4); background: rgba(0, 0, 0, 0.72); border: var(--s) solid rgba(255, 255, 255, 0.25);
  font-size: calc(var(--s) * 6.5); line-height: 1.35; text-shadow: var(--s) var(--s) 0 var(--text-shadow); }
.home-tip b { color: var(--yellow); }
.share-glyph { display: inline-block; padding: 0 0.3em; border: 1px solid #aaa; border-radius: 3px; }
.home-tip-x { flex: none; font: inherit; color: #fff; background: #4a7a4f; border: var(--s) solid #000; padding: calc(var(--s) * 2) calc(var(--s) * 4); cursor: pointer; }
@media (max-height: 420px) { /* phones in landscape: pull the title menu up so everything fits */
  .logo-wrap { margin-top: 5vh; }
  .menu-buttons { margin-top: calc(var(--s) * 16); }
}