:root {
  --ink: #090909;
  --paper: #f4f0e9;
  --copper: #bc7a4a;
  --wine: #742e35;
  --warm-gray: #bdb3a6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  background: var(--ink);
}

button, a { font: inherit; }

.page-shell {
  min-height: 100vh;
  padding: 26px 16px 44px;
  background-color: var(--ink);
  background-image: linear-gradient(rgba(9,9,9,.56), rgba(9,9,9,.7)), url("https://naarhookahlounge.com/assets/hero-lounge-DlA7kGCE.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.experience { width: min(100%, 510px); margin: 0 auto; text-align: center; }

.brand-header { padding: 4px 10px 16px; }

.brand-logo { display: block; width: min(100%, 270px); height: 145px; margin: 0 auto 2px; object-fit: contain; }

.eyebrow, .modal-kicker {
  margin: 0;
  color: var(--copper);
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

h1, h2 { margin: 8px 0; line-height: 1; }

h1 { font-size: clamp(34px, 8vw, 48px); letter-spacing: .4px; }

.lead { max-width: 330px; margin: 12px auto 0; color: var(--warm-gray); font-size: 17px; line-height: 1.45; }

.wheel-area { position: relative; width: min(88vw, 390px); aspect-ratio: 1; margin: 10px auto 22px; }

.pointer {
  position: absolute;
  z-index: 3;
  top: -5px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-top: 28px solid var(--paper);
  border-right: 18px solid transparent;
  border-left: 18px solid transparent;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.5));
}

.wheel {
  --label-distance: min(30vw, 118px);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 9px solid var(--paper);
  border-radius: 50%;
  background: conic-gradient(from -22.5deg, var(--copper) 0deg 45deg, var(--paper) 45deg 90deg, var(--wine) 90deg 135deg, #d4b488 135deg 180deg, var(--copper) 180deg 225deg, var(--paper) 225deg 270deg, var(--wine) 270deg 315deg, #d4b488 315deg 360deg);
  box-shadow: 0 0 0 5px rgba(188,122,74,.35), 0 24px 42px rgba(0,0,0,.45);
  transition: transform 4.2s cubic-bezier(.12,.7,.08,1);
}

.wheel-label {
  position: absolute;
  z-index: 1;
  top: 50%; left: 50%;
  width: 96px;
  color: var(--ink);
  font-family: Arial, sans-serif;
  font-size: clamp(11px, 2.9vw, 13px);
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  transform-origin: center;
}

.label-0 { transform: translate(-50%, -50%) rotate(0deg) translateY(calc(-1 * var(--label-distance))) rotate(0deg); }
.label-1 { transform: translate(-50%, -50%) rotate(45deg) translateY(calc(-1 * var(--label-distance))) rotate(-45deg); }
.label-2 { transform: translate(-50%, -50%) rotate(90deg) translateY(calc(-1 * var(--label-distance))) rotate(-90deg); }
.label-3 { transform: translate(-50%, -50%) rotate(135deg) translateY(calc(-1 * var(--label-distance))) rotate(-135deg); }
.label-4 { transform: translate(-50%, -50%) rotate(180deg) translateY(calc(-1 * var(--label-distance))) rotate(-180deg); }
.label-5 { transform: translate(-50%, -50%) rotate(225deg) translateY(calc(-1 * var(--label-distance))) rotate(-225deg); }
.label-6 { transform: translate(-50%, -50%) rotate(270deg) translateY(calc(-1 * var(--label-distance))) rotate(-270deg); }
.label-7 { transform: translate(-50%, -50%) rotate(315deg) translateY(calc(-1 * var(--label-distance))) rotate(-315deg); }

.hub {
  position: absolute;
  z-index: 2;
  top: 50%; left: 50%;
  display: grid;
  width: 92px; height: 92px;
  place-content: center;
  border: 5px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
  transform: translate(-50%, -50%);
}

.spin-button, .modal-button {
  width: 100%;
  border: 0;
  border-radius: 4px;
  padding: 17px 20px;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 0 var(--copper);
}

.spin-button:active, .modal-button:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--copper); }
.spin-button:disabled { cursor: not-allowed; opacity: .65; }

.status { min-height: 26px; margin: 22px 0 4px; color: #f5dfca; font-family: Arial, sans-serif; font-size: 15px; font-weight: 700; }

.entry-card { margin: 12px 0 10px; padding: 25px 20px 20px; border: 1px solid rgba(244,240,233,.34); border-radius: 24px; background: rgba(9,9,9,.42); box-shadow: 0 18px 45px rgba(0,0,0,.22); }
.entry-mark { margin: 0; color: var(--copper); font-family: Arial, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
.entry-card h2 { margin: 10px 0 8px; font-size: 30px; }
.entry-card > p:not(.entry-mark) { margin: 0 auto 20px; max-width: 290px; color: var(--warm-gray); line-height: 1.4; }
.entry-button { display: block; width: 100%; border-radius: 4px; padding: 16px; font-family: Arial, sans-serif; font-size: 16px; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
.review-button { border: 1px solid var(--paper); background: var(--paper); color: var(--ink); box-shadow: 0 6px 0 var(--copper); }
.code-access { margin-top: 22px; text-align: left; }
.code-access label { display: block; margin-bottom: 8px; color: var(--paper); font-family: Arial, sans-serif; font-size: 13px; font-weight: 800; }
.code-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.code-row input { min-width: 0; border: 1px solid rgba(244,240,233,.6); border-radius: 4px; padding: 14px 12px; background: rgba(9,9,9,.5); color: var(--paper); font-family: Arial, sans-serif; font-size: 15px; outline: none; }
.code-row input:focus { border-color: var(--copper); box-shadow: 0 0 0 2px rgba(188,122,74,.25); }
.code-row input::placeholder { color: #a69d92; }
.entered-button { border: 1px solid var(--paper); border-radius: 4px; padding: 0 18px; background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; }
.code-message { min-height: 19px; margin: 8px 0 0; color: #ffd2bd; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; }
.entry-card small { display: block; margin-top: 15px; color: var(--warm-gray); font-family: Arial, sans-serif; font-size: 11px; }

.terms { margin: 24px 10px 0; color: #938b82; font-family: Arial, sans-serif; font-size: 11px; line-height: 1.5; }

.modal[hidden] { display: none; }
.modal { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.8); }
.modal-card { position: relative; width: min(100%, 410px); padding: 34px 28px 30px; border: 1px solid var(--copper); background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 20px 80px rgba(0,0,0,.5); }
.modal-card h2 { margin: 11px 0 3px; font-size: 36px; }
.modal-gift { margin: 16px 0 12px; color: var(--wine); font-size: 25px; font-weight: 700; }
.modal-copy { color: #5a514a; line-height: 1.45; }
.modal-button { margin-top: 14px; background: var(--ink); color: var(--paper); box-shadow: 0 8px 0 var(--copper); }