/* =========================================================
   THE LATCHKEY LOUNGE - shared styles (every page)
   WebSite-v1.0
   Page-specific styles live in css/menu.css, events.css, etc.
   ========================================================= */
* { box-sizing: border-box; }
html { background: #02020c; }
body {
  margin: 0; color: #eee; font-family: "Courier New", monospace;
  background-color: #02020c;
  background-image:
    radial-gradient(circle at 12px 18px, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 70px 50px, #2356ff 0 1px, transparent 1.5px),
    radial-gradient(circle at 110px 95px, #a020f0 0 1px, transparent 1.5px);
  background-size: 140px 120px;
}
a { color: #61a8ff; }
img { max-width: 100%; }

.browser-note {
  max-width: 1180px; margin: 8px auto 0; padding: 5px 10px;
  background: #c0c0c0; color: #111; border: 2px outset #eee; font-family: Arial, sans-serif;
}
.site { max-width: 1180px; margin: 0 auto; padding: 10px; }

/* Logo header */
.header {
  border: 3px ridge #5835ff; background: #000; padding: 8px 18px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 14px #c000ff inset;
}
.header a { display: block; width: 100%; text-align: center; }
.site-logo { display: block; max-width: 100%; height: auto; max-height: 200px; margin: 0 auto; }

/* Layout: menu buttons on the left, page on the right */
.layout { display: grid; grid-template-columns: 205px 1fr; gap: 10px; align-items: start; }
.content { min-width: 0; }

/* Menu buttons (left-aligned) */
.nav { display: flex; flex-direction: column; gap: 7px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: #111; font-weight: bold; font-family: Arial, sans-serif;
  background: linear-gradient(#efefef, #a9a9a9); border: 4px outset #ddd;
  padding: 13px 14px; text-align: left; font-size: 17px; text-transform: uppercase;
}
.nav a .ico { width: 1.4em; text-align: center; flex: none; }
.nav a:hover, .nav a.active { color: #1029bd; background: linear-gradient(#fff, #d5d5d5); }
.nav a:active { border-style: inset; }

/* Common boxes */
.page {
  background: #f3edcf; color: #151515; border: 4px ridge #6644ff;
  padding: 24px; min-height: 500px;
}
.page h2 { margin-top: 0; color: #1745d2; font-size: 32px; border-bottom: 4px solid #ef3434; }
.paper {
  background: #f3edcf; color: #18268c; padding: 20px;
  border: 2px solid #b8ae84; box-shadow: 5px 5px 0 #111;
}
.paper h2 { margin-top: 0; color: #1745d2; border-bottom: 3px solid #ef3434; }
.box { border: 3px ridge #6a38ff; background: #050505; padding: 13px; }
.box h3 { margin: 0 0 10px; color: #34eaff; text-align: center; }
input, textarea, select { font-family: inherit; }
button, .fakebutton {
  display: inline-block; background: #c0c0c0; color: #111; border: 4px outset #eee;
  padding: 7px 12px; font-weight: bold; font-family: Arial, sans-serif; cursor: pointer; text-decoration: none;
}
button:active, .fakebutton:active { border-style: inset; }
.small { font-size: 12px; }
.center { text-align: center; }
.blink { animation: blink .8s steps(2, start) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.new-tag { font: 700 15px "Courier New", monospace; color: #ff3030; animation: blink .8s steps(2, start) infinite; }

.tax-note {
  margin: 12px auto; padding: 9px 14px; max-width: 520px; text-align: center; background: #050505;
  color: #ffe42d; border: 3px double #ffe42d; font-weight: bold;
}
.tax-note span { color: #fff; font-size: 13px; }
.age-callout {
  margin: 8px auto; padding: 8px; text-align: center; background: #111; color: #ffdf2d;
  border: 3px double #ffdf2d; font-weight: bold; font-size: 18px;
}
.concept-caption { text-align: center; font-size: 12px; font-style: italic; }

/* Footer */
.footer { margin-top: 12px; border-top: 2px solid #4433e5; padding: 14px 8px; text-align: center; font-size: 13px; }
.counter { margin: 7px auto; }
.digit {
  display: inline-block; background: #061b05; color: #51ff51; border: 3px inset #aaa;
  padding: 5px 7px; font-size: 25px; text-shadow: 0 0 7px #3cff3c;
}
.badge {
  display: inline-block; margin: 8px; padding: 8px 12px; color: #111;
  background: #c0c0c0; border: 3px outset white; font-family: Arial, sans-serif;
}
.age-footer { text-align: center; margin-top: 10px; padding: 7px; background: #111; color: #ffdf2d; font-weight: bold; }
.version { margin-top: 8px; color: #8a86c8; font-size: 11px; }

/* ---------- Home ---------- */
.homegrid { display: grid; grid-template-columns: 1.4fr .85fr; gap: 10px; align-items: stretch; }
.home-photo { border: 3px ridge #4d3aff; background: #000; overflow: hidden; min-height: 320px; }
.home-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% 60%; }
.cover-box { margin: 10px 0; padding: 15px; text-align: center; background: #050505; color: #fff; border: 4px ridge #ffdf2d; }
.cover-box h2 { color: #34eaff; margin: 0 0 6px; }
.cover-price { font: 38px Impact, Arial, sans-serif; color: #ffe42d; text-shadow: 2px 2px #e22; }
.arcade-box { margin: 12px 0; padding: 12px; text-align: center; background: #070707; color: #fff; border: 4px ridge #6b48ff; }
.arcade-box h2 { color: #34eaff; }

/* ---------- Directions ---------- */
.directions-photo { width: 100%; height: auto; display: block; border: 5px ridge #aaa; }
.address-box { text-align: center; margin: 15px auto; padding: 18px; max-width: 650px; background: #fff7cf; border: 4px ridge #777; }
.directions-joke { font-family: "Courier New", monospace; font-weight: bold; margin-top: 20px; }

/* ---------- The Future ---------- */
.construction { text-align: center; padding: 55px 10px; background: #050505; color: #ffe62e; min-height: 500px; }
.worker { font-size: 90px; display: block; animation: bob .65s alternate infinite; }
@keyframes bob { to { transform: translateY(-8px) rotate(2deg); } }

/* ---------- Phones ---------- */
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .nav { display: grid; grid-template-columns: repeat(2, 1fr); }
  .nav a { font-size: 15px; padding: 11px 10px; }
  .homegrid { grid-template-columns: 1fr; }
  .home-photo { min-height: 0; }
  .home-photo img { height: auto; }
  .page { padding: 16px; }
  .page h2 { font-size: 24px; }
  .site-logo { max-height: 140px; }
  .header { padding: 8px; }
}