@import url("../fonts/fonts.css");

/* ---- reset / base ------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #0a1020; }
body {
  color: #f7eedd;
  font-family: 'VT323', monospace;
  -webkit-font-smoothing: none;
}
img { display: block; }

@keyframes ogfloaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---- layout shells ------------------------------------------------------ */
.og-root {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  background: #0a1020;
  color: #f7eedd;
  overflow: hidden;
}
.og-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100dvh;
  display: block;
  image-rendering: pixelated;
  z-index: 0;
}
.og-vignette {
  position: fixed; inset: 0;
  z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,16,32,.46) 0%, rgba(10,16,32,0) 28%),
    linear-gradient(to top, rgba(10,16,32,.6) 0%, rgba(10,16,32,0) 30%);
}
.og-main {
  position: relative; z-index: 3;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: clamp(1.4rem, 4vh, 2.6rem) 1rem clamp(1.2rem, 3vh, 2rem);
}

/* ---- speech bubbles ----------------------------------------------------- */
.og-bubble {
  position: fixed; left: 0; top: 0; z-index: 2;
  opacity: 0; transform: translate(-50%, -118%) scale(.7);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; max-width: 230px;
}
.og-bubble-body {
  position: relative;
  font-family: 'VT323', monospace; font-size: 19px; line-height: 1.02;
  padding: 8px 12px 9px;
  box-shadow: 4px 4px 0 rgba(8,12,24,.4);
  text-align: center; white-space: normal;
}
.og-bubble-tail {
  position: absolute; bottom: -8px; left: 50%;
  width: 11px; height: 11px;
  transform: translateX(-50%) rotate(45deg);
}
.og-bubble--a .og-bubble-body { background: #fbf3e0; color: #16233e; border: 3px solid #16233e; }
.og-bubble--a .og-bubble-tail { background: #fbf3e0; border-right: 3px solid #16233e; border-bottom: 3px solid #16233e; }
.og-bubble--b .og-bubble-body { background: #fff4e2; color: #5a2a14; border: 3px solid #c2542a; }
.og-bubble--b .og-bubble-tail { background: #fff4e2; border-right: 3px solid #c2542a; border-bottom: 3px solid #c2542a; }

/* ---- header ------------------------------------------------------------- */
.og-header { text-align: center; }
.og-eyebrow {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(.42rem, 2.2vw, .58rem);
  letter-spacing: .24em; color: #f3b87e;
  text-transform: uppercase; margin: 0 0 1.1rem;
  text-shadow: 2px 2px 0 rgba(10,16,32,.85);
}
.og-title {
  font-family: 'Silkscreen', monospace; font-weight: 700;
  line-height: 1.05; font-size: clamp(1.5rem, 7.2vw, 3.5rem);
  color: #f7eedd; letter-spacing: .05em; margin: 0; padding-top: .14em;
  text-shadow: 3px 3px 0 #14203a, 4px 4px 0 rgba(0,0,0,.3);
}
.og-title .og-cap { font-size: 1.4em; color: #39c6cc; text-shadow: 3px 3px 0 #0b2630; }
.og-tagline-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: nowrap; margin-top: 1rem;
}
.og-tagline {
  margin: 0; white-space: nowrap;
  font-family: 'VT323', monospace; font-size: clamp(1.05rem, 3.4vw, 1.45rem);
  color: #cdd8e6; letter-spacing: .04em; font-style: italic;
  text-shadow: 1px 1px 0 rgba(10,16,32,.95), 2px 2px 0 rgba(10,16,32,.55);
}

/* ---- buttons (shared pixel-button look) --------------------------------- */
.og-scene-btn {
  align-items: center; gap: 8px;
  font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: .1em;
  color: #f7eedd; background: rgba(11,17,33,.86);
  border: 2px solid rgba(247,238,221,.65);
  box-shadow: 4px 4px 0 rgba(8,12,24,.5);
  padding: 9px 11px; cursor: pointer;
  animation: ogfloaty 3.4s ease-in-out infinite;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.og-scene-btn .og-diamond { color: #ffce5c; }
.og-scene-btn:hover { animation: none; transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(8,12,24,.6); border-color: #ffce5c; }
.og-scene-btn:active { animation: none; transform: translateY(1px); box-shadow: 2px 2px 0 rgba(8,12,24,.5); }

.og-yellow-btn {
  font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: .06em;
  color: #16233e; background: #ffce5c; border: 2px solid #16233e;
  box-shadow: 3px 3px 0 rgba(8,12,24,.5);
  padding: 10px 14px; cursor: pointer;
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.og-yellow-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(8,12,24,.6); }
.og-yellow-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 rgba(8,12,24,.5); }

/* ---- products: desktop grid -------------------------------------------- */
.og-lower { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.og-products {
  width: 100%; max-width: 940px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px;
}
.og-product {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  text-decoration: none; color: #f7eedd;
  background: rgba(16,24,42,.66);
  border: 2px solid rgba(247,238,221,.8);
  box-shadow: 5px 5px 0 rgba(8,12,24,.62);
  backdrop-filter: blur(3px);
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.og-product:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(8,12,24,.72); }
.og-product-icon {
  width: 54px; height: 54px; flex: 0 0 auto;
  border-radius: 13px; overflow: hidden;
  background: rgba(255,255,255,.05); border: 1px solid rgba(247,238,221,.22);
  display: flex; align-items: center; justify-content: center;
}
.og-product-icon img { width: 100%; height: 100%; object-fit: cover; }
.og-product-icon--light { background: rgba(247,242,230,.92); padding: 9px; }
.og-product-icon--light img { object-fit: contain; }
.og-product-text { display: flex; flex-direction: column; gap: 4px; }
.og-product-name { font-family: 'Press Start 2P', monospace; font-size: 11px; line-height: 1.5; color: #f7eedd; }
.og-product-tag { font-family: 'VT323', monospace; font-size: 17px; line-height: 1.05; color: #aebfd2; }

/* ---- products: mobile icon row + card ----------------------------------- */
.og-products-mobile {
  width: 100%; max-width: 430px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.og-card {
  position: relative; width: 100%;
  background: rgba(16,24,42,.84);
  border: 2px solid rgba(247,238,221,.8);
  box-shadow: 5px 5px 0 rgba(8,12,24,.62);
  backdrop-filter: blur(4px);
  padding: 16px 16px 17px;
  display: flex; flex-direction: column; gap: 9px;
}
.og-card[hidden] { display: none; }
.og-card-name { font-family: 'Press Start 2P', monospace; font-size: 12px; line-height: 1.5; color: #f7eedd; padding-right: 18px; }
.og-card-tag { font-family: 'VT323', monospace; font-size: 19px; line-height: 1.08; color: #aebfd2; }
.og-card-link {
  margin-top: 5px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: .06em;
  color: #16233e; background: #ffce5c; border: 2px solid #16233e;
  box-shadow: 3px 3px 0 rgba(8,12,24,.5); padding: 11px 14px; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.og-card-link:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(8,12,24,.6); }
.og-card-link:active { transform: translate(2px, 2px); box-shadow: 0 0 0 rgba(8,12,24,.5); }
.og-taps { display: flex; gap: 18px; justify-content: center; }
.og-tap {
  width: 66px; height: 66px; flex: 0 0 auto; padding: 0;
  border-radius: 17px; overflow: hidden; cursor: pointer;
  background: rgba(16,24,42,.66);
  border: 2px solid rgba(247,238,221,.8);
  box-shadow: 4px 4px 0 rgba(8,12,24,.55);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.og-tap img { width: 100%; height: 100%; object-fit: cover; }
.og-tap--light { background: rgba(247,242,230,.92); padding: 11px; }
.og-tap--light img { object-fit: contain; }
.og-tap:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(8,12,24,.6); border-color: #ffce5c; }
.og-tap:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(8,12,24,.5); }

/* close "x" (cards, panel, modal) */
.og-x {
  appearance: none; border: none; background: transparent;
  color: #aebfd2; font-family: 'VT323', monospace; line-height: 1;
  cursor: pointer; padding: 0 2px;
  transition: color .1s ease, transform .1s ease;
}
.og-x:hover { color: #f7eedd; transform: scale(1.2); }
.og-x:active { transform: scale(.85); }
.og-card-close { position: absolute; top: 6px; right: 10px; font-size: 22px; }

/* ---- footer ------------------------------------------------------------- */
.og-footer-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.og-footer-text {
  font-family: 'VT323', monospace; font-size: 1.05rem; color: #aebfd2;
  letter-spacing: .05em; text-shadow: 1px 1px 0 rgba(10,16,32,.7); text-align: center; margin: 0;
}
.og-copy {
  font-family: 'Press Start 2P', monospace; font-size: 7.5px; letter-spacing: .1em;
  color: #7c8ba0; text-shadow: 1px 1px 0 rgba(10,16,32,.7); text-align: center; margin: 0;
}

/* ---- scene panel -------------------------------------------------------- */
.og-panel {
  position: fixed; top: 18px; right: 18px; z-index: 20; width: 236px;
  background: rgba(11,17,33,.9); backdrop-filter: blur(8px);
  border: 2px solid rgba(247,238,221,.7);
  box-shadow: 6px 6px 0 rgba(8,12,24,.55);
  padding: 15px 15px 16px; color: #f7eedd;
}
.og-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.og-panel-title { font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: .12em; color: #ffce5c; }
.og-panel-close { font-size: 22px; }
.og-panel-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.og-panel-label { font-family: 'Press Start 2P', monospace; font-size: 7.5px; letter-spacing: .1em; color: #aebfd2; }
.og-hour { font-family: 'VT323', monospace; font-size: 17px; color: #f3b87e; }
.og-range { width: 100%; accent-color: #ee8866; margin: 0 0 11px; cursor: pointer; }
.og-pausebtn {
  width: 100%; margin: 0 0 15px;
  font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: .08em;
  color: #f7eedd; background: rgba(255,255,255,.04);
  border: 2px solid rgba(247,238,221,.45);
  padding: 9px 6px; cursor: pointer;
  transition: filter .1s ease, transform .1s ease, background .1s ease, color .1s ease;
}
.og-pausebtn:hover { filter: brightness(1.14); transform: translateY(-1px); }
.og-pausebtn:active { transform: translateY(1px); }
.og-pausebtn.is-paused { background: #ffce5c; color: #16233e; border-color: #16233e; }
.og-mood-heading { font-family: 'Press Start 2P', monospace; font-size: 7.5px; letter-spacing: .1em; color: #aebfd2; margin-bottom: 9px; }
.og-mood-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.og-mood {
  font-family: 'VT323', monospace; font-size: 16px; line-height: 1; padding: 9px 6px;
  cursor: pointer; border: 2px solid rgba(247,238,221,.45);
  background: rgba(255,255,255,.04); color: #aebfd2;
  transition: transform .1s ease, filter .1s ease;
}
.og-mood:hover { filter: brightness(1.14); transform: translateY(-1px); }
.og-mood:active { transform: translateY(1px); }
.og-mood.is-active { background: #ee8866; color: #16233e; }

/* ---- contact modal ------------------------------------------------------ */
.og-overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(6,10,20,.66); backdrop-filter: blur(3px);
}
.og-overlay[hidden] { display: none; }
.og-dialog {
  position: relative; width: 100%; max-width: 470px; max-height: 88vh; overflow-y: auto;
  background: rgba(13,19,34,.95);
  border: 2px solid rgba(247,238,221,.8);
  box-shadow: 7px 7px 0 rgba(8,12,24,.6);
  padding: 22px 22px 24px; color: #f7eedd;
}
.og-dialog-close { position: absolute; top: 9px; right: 14px; font-size: 24px; }
.og-dialog-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.og-dialog-icon { color: #ffce5c; font-size: 13px; }
.og-dialog-title { font-family: 'Press Start 2P', monospace; font-size: 12px; letter-spacing: .03em; }
.og-form-intro { font-family: 'VT323', monospace; font-size: 18px; color: #aebfd2; margin: 0 0 16px; }
.og-form { display: flex; flex-direction: column; gap: 13px; }
.og-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.og-field {
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: .08em; color: #aebfd2;
}
.og-field input, .og-field textarea {
  font-family: 'VT323', monospace; font-size: 18px; color: #f7eedd;
  background: rgba(8,12,24,.5); border: 2px solid rgba(247,238,221,.3);
  padding: 9px 11px; width: 100%; outline: none;
}
.og-field textarea { resize: vertical; min-height: 84px; }
.og-field input:focus, .og-field textarea:focus { border-color: #ffce5c; }
.og-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.og-submit {
  margin-top: 3px; font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: .05em;
  color: #16233e; background: #ffce5c; border: 2px solid #16233e;
  box-shadow: 3px 3px 0 rgba(8,12,24,.5); padding: 13px 16px; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.og-submit:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(8,12,24,.6); }
.og-submit:active { transform: translate(2px, 2px); box-shadow: 0 0 0 rgba(8,12,24,.5); }
.og-submit:disabled { opacity: .7; cursor: default; }
.og-error {
  font-family: 'VT323', monospace; font-size: 17px; color: #ff9a8a; margin: 4px 0 0;
}
.og-sent { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 18px 6px 8px; text-align: center; }
.og-check { font-family: 'VT323', monospace; font-size: 42px; line-height: 1; color: #7ad08a; }
.og-sent-title { font-family: 'Press Start 2P', monospace; font-size: 12px; line-height: 1.6; }
.og-sent-text { font-family: 'VT323', monospace; font-size: 18px; color: #aebfd2; }
.og-done {
  margin-top: 4px; font-family: 'Press Start 2P', monospace; font-size: 10px;
  color: #16233e; background: #ffce5c; border: 2px solid #16233e;
  box-shadow: 3px 3px 0 rgba(8,12,24,.5); padding: 12px 18px; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.og-done:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(8,12,24,.6); }
.og-done:active { transform: translate(2px, 2px); box-shadow: 0 0 0 rgba(8,12,24,.5); }

[hidden] { display: none !important; }

/* ---- responsive: desktop grid vs mobile icon row ------------------------ */
.og-products-mobile { display: none; }
@media (max-width: 819px) {
  .og-products { display: none; }
  .og-products-mobile { display: flex; }
  .og-form-row { grid-template-columns: 1fr; }
}