/* Orrery Arcade. Sized in vmin so it scales from a phone to a 21" fridge
   screen. Avoids clamp()/min(), flex gap, aspect-ratio and inset so older
   fridge browsers render it correctly. */

:root {
  --bg: #070a1a;
  --panel: rgba(14, 19, 52, 0.95);
  --line: rgba(150, 170, 255, 0.2);
  --ink: #eef1ff;
  --dim: #8a93c4;
  --gold: #ffcf6b;
  --red: #ff4b5c;
  --c: #38e8ff;
  --display: 'Orbitron', 'Trebuchet MS', sans-serif;
  --body: 'Exo 2', 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#sky { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; }

.screen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; }
.screen.is-active { display: flex; animation: fade-in 0.35s ease-out; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- menu ---------- */

#menu {
  flex-direction: column;
  padding: calc(14px + 2.2vmin) calc(14px + 2.2vmin) calc(10px + 1.4vmin);
  overflow-y: auto;
  touch-action: pan-y;
}

.menu-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(10px + 2.4vmin) 0 calc(18px + 3vmin);
}

.brand h1, .attract-title {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: calc(28px + 5vmin);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 0.5em rgba(56, 232, 255, 0.35);
}
.brand h1 span, .attract-title span {
  display: block;
  margin-top: 0.4em;
  padding-left: 0.62em;
  font-size: 0.36em;
  letter-spacing: 0.62em;
  color: var(--gold);
  text-shadow: none;
}

.menu-tools { position: absolute; top: 0; right: 0; display: flex; }
.icon-btn {
  width: calc(50px + 2.6vmin);
  height: calc(50px + 2.6vmin);
  margin-left: calc(8px + 0.8vmin);
  border-radius: 50%;
  border: 2px solid var(--line);
  background: rgba(14, 19, 52, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.icon-btn svg { width: 46%; height: 46%; }
.icon-btn:active { transform: scale(0.94); }
#btn-sound .ico-off { display: none; }
#btn-sound.is-off .ico-on { display: none; }
#btn-sound.is-off .ico-off { display: block; }
#btn-sound.is-off { color: var(--dim); }

.cards {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(220px, 1fr);
  grid-gap: calc(12px + 1.6vmin);
  gap: calc(12px + 1.6vmin);
}
@media (orientation: landscape) {
  .cards { grid-template-columns: 1fr 1fr 1fr; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
  border-radius: calc(16px + 1.2vmin);
  border: 2px solid var(--line);
  background: linear-gradient(165deg, rgba(24, 31, 78, 0.94), rgba(9, 12, 34, 0.96));
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--c);
  z-index: 1;
}
.card:active { transform: scale(0.97); border-color: var(--c); }

.card-art { position: relative; flex: 1 1 auto; min-height: 90px; display: block; }
.card-art canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }

.card-body { display: block; flex: 0 0 auto; padding: calc(8px + 1vmin) calc(14px + 1.3vmin) calc(12px + 1.4vmin); }
.card-title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(15px + 2vmin);
  letter-spacing: 0.03em;
  color: var(--c);
}
.card-tag { display: block; margin-top: 0.3em; color: var(--dim); font-size: calc(12px + 1.15vmin); line-height: 1.3; }
.card-best {
  display: block;
  margin-top: 0.7em;
  font-family: var(--display);
  font-size: calc(11px + 1vmin);
  letter-spacing: 0.08em;
  color: var(--ink);
}
.card-best i { font-style: normal; color: var(--gold); margin-right: 0.6em; }

.menu-foot {
  flex: 0 0 auto;
  margin: calc(12px + 1.6vmin) 0 0;
  text-align: center;
  color: var(--dim);
  font-family: var(--display);
  font-size: calc(10px + 1vmin);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.net { color: var(--red); margin-left: 1em; }

/* ---------- play ---------- */

#play { flex-direction: column; background: var(--bg); }

.hud {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: calc(56px + 3.6vmin);
  padding: 0 calc(10px + 1.4vmin);
  background: linear-gradient(#0e1336, #090d26);
  border-bottom: 2px solid var(--line);
  font-family: var(--display);
}
.hud-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: calc(13px + 1.6vmin);
  color: var(--c);
}
.hud-info { margin-left: calc(10px + 1.4vmin); font-weight: 700; font-size: calc(13px + 1.4vmin); color: var(--c); white-space: nowrap; }
.hud-lives { margin-left: calc(10px + 1.4vmin); color: var(--red); font-size: calc(15px + 1.8vmin); letter-spacing: 0.08em; white-space: nowrap; }
.hud-info:empty, .hud-lives:empty { display: none; }
.hud-stat { margin-left: calc(12px + 1.8vmin); text-align: right; line-height: 1.05; white-space: nowrap; }
.hud-stat small { display: block; font-size: calc(8px + 0.75vmin); letter-spacing: 0.22em; color: var(--dim); }
.hud-stat b { font-weight: 900; font-size: calc(16px + 2vmin); }
.hud-best b { color: var(--gold); font-size: calc(11px + 1.3vmin); letter-spacing: 0.04em; }
.hud-btn {
  flex: 0 0 auto;
  margin-left: calc(12px + 1.8vmin);
  width: calc(46px + 2.8vmin);
  height: calc(46px + 2.8vmin);
  border-radius: 50%;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hud-btn svg { width: 44%; height: 44%; }
.hud-btn:active { transform: scale(0.94); }

@media (max-width: 560px) {
  .hud-best { display: none; }
}

.stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; }
#game { position: absolute; top: 0; left: 0; display: block; touch-action: none; }

/* ---------- overlay panels ---------- */

.overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(12px + 2vmin);
  background: rgba(5, 7, 20, 0.68);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  overflow-y: auto;
  touch-action: pan-y;
}
.overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }

.panel {
  width: 100%;
  max-width: 820px;
  margin: auto;
  padding: calc(18px + 2.4vmin) calc(16px + 2.6vmin);
  text-align: center;
  border-radius: calc(20px + 1.2vmin);
  border: 2px solid var(--line);
  border-top: 5px solid var(--c);
  background: var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.panel.pop { animation: pop-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes pop-in { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }

.p-title { font-family: var(--display); font-weight: 900; font-size: calc(26px + 4vmin); line-height: 1.05; letter-spacing: 0.04em; color: var(--c); }
.p-kicker { font-family: var(--display); font-weight: 700; font-size: calc(12px + 1.5vmin); letter-spacing: 0.3em; color: var(--gold); }
.p-score { font-family: var(--display); font-weight: 900; font-size: calc(40px + 5.5vmin); line-height: 1.1; margin: 0.1em 0 0.1em; }
.p-tag { margin: 0.45em 0 0; color: var(--dim); font-size: calc(14px + 1.4vmin); line-height: 1.35; }
.p-sub { margin: calc(16px + 1.8vmin) 0 0.6em; font-family: var(--display); font-size: calc(10px + 1vmin); letter-spacing: 0.32em; color: var(--dim); }
.p-msg { min-height: 1.5em; margin-top: 0.5em; font-family: var(--display); font-size: calc(12px + 1.2vmin); color: var(--red); }

.howto {
  display: flex;
  align-items: center;
  max-width: 660px;
  margin: calc(14px + 1.8vmin) auto 0;
  padding: calc(10px + 1.1vmin) calc(14px + 1.3vmin);
  text-align: left;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}
.howto p { margin: 0 0 0 calc(12px + 1.4vmin); font-size: calc(14px + 1.4vmin); line-height: 1.35; }

.btn {
  display: block;
  width: 100%;
  margin-top: calc(10px + 1.2vmin);
  padding: calc(14px + 1.3vmin) 0;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(14px + 1.7vmin);
  letter-spacing: 0.12em;
}
.btn:active { transform: scale(0.97); }
.btn-big {
  margin-top: calc(16px + 2.2vmin);
  padding: calc(18px + 1.8vmin) 0;
  border-color: transparent;
  background: var(--c);
  color: #070a1a;
  font-weight: 900;
  font-size: calc(22px + 2.8vmin);
}
.btn-ghost { border-color: transparent; background: none; color: var(--dim); }
.btn-row { display: flex; }
.btn-row .btn + .btn { margin-left: calc(10px + 1vmin); }

/* ---------- leaderboards ---------- */

.board { list-style: none; max-width: 580px; margin: 0 auto; padding: 0; font-family: var(--display); }
.board li {
  display: flex;
  align-items: center;
  padding: calc(5px + 0.55vmin) calc(12px + 1.1vmin);
  border-radius: 12px;
  font-size: calc(15px + 1.6vmin);
}
.board li:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
.board .r { width: 2.4em; text-align: left; color: var(--dim); font-weight: 500; }
.board .n { flex: 1 1 auto; text-align: left; font-weight: 700; letter-spacing: 0.28em; }
.board .s { font-weight: 900; }
.board li:first-child .r, .board li:first-child .n { color: var(--gold); }
.board li.is-me { background: var(--c); color: #070a1a; animation: me-pulse 0.8s ease-in-out infinite alternate; }
.board li.is-me .r, .board li.is-me .n { color: #070a1a; }
@keyframes me-pulse { from { opacity: 1; } to { opacity: 0.72; } }
.board-empty { margin: 0.6em 0; color: var(--dim); font-size: calc(14px + 1.4vmin); }

/* ---------- initials entry ---------- */

.slots { display: flex; justify-content: center; margin: calc(10px + 1.2vmin) 0; }
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(58px + 4.4vmin);
  height: calc(72px + 5.4vmin);
  margin: 0 calc(6px + 0.7vmin);
  border-radius: 16px;
  border: 3px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  font-family: var(--display);
  font-weight: 900;
  font-size: calc(34px + 4.4vmin);
}
.slot.is-cursor { border-color: var(--c); animation: cursor 1s steps(2) infinite; }
@keyframes cursor { 50% { border-color: var(--line); } }

.recent { margin: 0 0 calc(6px + 0.8vmin); }
.chip {
  display: inline-block;
  margin: 4px 6px;
  padding: calc(8px + 0.7vmin) calc(16px + 1.2vmin);
  border-radius: 999px;
  border: 2px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(14px + 1.3vmin);
  letter-spacing: 0.22em;
}
.chip:active { background: var(--c); color: #070a1a; }

.keys {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: calc(6px + 0.7vmin);
  gap: calc(6px + 0.7vmin);
  margin-top: calc(8px + 1vmin);
}
.key {
  height: calc(50px + 3.6vmin);
  border-radius: 14px;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(18px + 2.1vmin);
}
.key:active { background: var(--c); color: #070a1a; }
.key-del { color: var(--dim); }
.key-ok.is-ready { background: var(--c); color: #070a1a; border-color: transparent; }

.shake { animation: shake 0.4s; }
@keyframes shake {
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

/* ---------- gesture hints ---------- */

.gesture {
  position: relative;
  flex: 0 0 auto;
  width: calc(66px + 4.4vmin);
  height: calc(52px + 3.4vmin);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.gesture::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(16px + 1.2vmin);
  height: calc(16px + 1.2vmin);
  margin: calc(-8px - 0.6vmin) 0 0 calc(-8px - 0.6vmin);
  border-radius: 50%;
  background: var(--c);
}
.gesture-tap::before { animation: g-tap 1.1s ease-in-out infinite; }
.gesture-tap::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(16px + 1.2vmin);
  height: calc(16px + 1.2vmin);
  margin: calc(-8px - 0.6vmin) 0 0 calc(-8px - 0.6vmin);
  border-radius: 50%;
  border: 3px solid var(--c);
  animation: g-ring 1.1s ease-out infinite;
}
.gesture-swipe::before { animation: g-swipe 1.3s ease-in infinite; }
.gesture-drag::before { animation: g-drag 1.5s ease-in-out infinite alternate; }

@keyframes g-tap { 0%, 100% { transform: scale(1); } 35% { transform: scale(0.65); } }
@keyframes g-ring { 0%, 30% { transform: scale(0.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes g-swipe {
  0% { transform: translate(-190%, 110%); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translate(190%, -110%); opacity: 1; }
  100% { transform: translate(190%, -110%); opacity: 0; }
}
@keyframes g-drag { from { transform: translateX(-160%); } to { transform: translateX(160%); } }

/* ---------- attract mode ---------- */

#attract {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: calc(16px + 3vmin);
  text-align: center;
}
.attract-inner { width: 100%; max-width: 860px; }
.attract-title { font-size: calc(30px + 6vmin); }
.attract-board {
  margin-top: calc(18px + 3vmin);
  padding: calc(16px + 2vmin) calc(14px + 2.4vmin);
  border-radius: calc(20px + 1.2vmin);
  border: 2px solid var(--line);
  border-top: 5px solid var(--c);
  background: rgba(14, 19, 52, 0.82);
}
.attract-board.swap { animation: pop-in 0.45s ease-out; }
.ab-kicker { font-family: var(--display); font-size: calc(10px + 1vmin); letter-spacing: 0.4em; color: var(--dim); }
.ab-title { margin: 0.25em 0 0.6em; font-family: var(--display); font-weight: 900; font-size: calc(22px + 3vmin); color: var(--c); }
.blink {
  margin: calc(18px + 3vmin) 0 calc(6px + 1vmin);
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(18px + 2.4vmin);
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  color: var(--gold);
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.15; } }

@media (orientation: landscape) {
  #attract { align-items: flex-end; justify-content: center; }
  .attract-inner { width: 50%; }
  .attract-title { font-size: calc(24px + 4.6vmin); }
}