/* High Roller Lounge page styles */

.high-roller-lounge {
  --hrl-paper: #FDFCF7;
  --hrl-note: #FFF3CD;
  --hrl-charcoal: #3D3A3A;
  --hrl-sketch-blue: #4EA8DE;
  --hrl-ink-muted: #6B6B6B;
  --hrl-paper-dark: #F2EFE6;
  --hrl-border: rgba(61, 58, 58, 0.25);
  --hrl-border-strong: rgba(61, 58, 58, 0.4);
  --hrl-shadow: rgba(0, 0, 0, 0.1);
  --hrl-shadow-hover: rgba(0, 0, 0, 0.16);
  --hrl-font-heading: Georgia, 'Times New Roman', serif;
  --hrl-font-body: Arial, 'Helvetica Neue', sans-serif;
  --hrl-space-1: 0.25rem;
  --hrl-space-2: 0.5rem;
  --hrl-space-3: 1rem;
  --hrl-space-4: 1.5rem;
  --hrl-space-5: 2rem;
  --hrl-space-6: 3rem;
  --hrl-space-7: 4rem;
  --hrl-space-8: 6rem;
  --hrl-radius-1: 2px;
  --hrl-radius-2: 4px;
  --hrl-radius-3: 8px;
  --hrl-radius-4: 12px;
  --hrl-transition-fast: 150ms ease-in-out;
  --hrl-transition-base: 200ms ease-in-out;
  background-color: var(--hrl-paper);
  color: var(--hrl-charcoal);
  font-family: var(--hrl-font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

.high-roller-lounge .container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--hrl-space-4);
}

.high-roller-lounge h1,
.high-roller-lounge h2,
.high-roller-lounge h3 {
  font-family: var(--hrl-font-heading);
  color: var(--hrl-charcoal);
  letter-spacing: 0.01em;
  margin-block-start: 0;
  margin-block-end: var(--hrl-space-3);
  line-height: 1.2;
}

.high-roller-lounge h1 {
  font-size: clamp(2rem, 4vw + 1rem, 2.5rem);
  font-weight: 700;
}

.high-roller-lounge h2 {
  font-size: clamp(1.6rem, 2.5vw + 0.6rem, 2rem);
  font-weight: 600;
  margin-block-end: var(--hrl-space-3);
}

.high-roller-lounge h3 {
  font-size: clamp(1.3rem, 1.5vw + 0.5rem, 1.5rem);
  font-weight: 600;
  margin-block-end: var(--hrl-space-2);
}

.high-roller-lounge p {
  margin-block-start: 0;
  margin-block-end: var(--hrl-space-3);
  line-height: 1.6;
}

.high-roller-lounge ul,
.high-roller-lounge ol {
  margin-block-start: 0;
  margin-block-end: var(--hrl-space-3);
  padding-inline-start: var(--hrl-space-4);
}

.high-roller-lounge li {
  line-height: 1.6;
}

.high-roller-lounge a {
  color: var(--hrl-sketch-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--hrl-transition-fast), text-decoration-color var(--hrl-transition-fast);
}

.high-roller-lounge a:hover {
  color: var(--hrl-charcoal);
  text-decoration-color: var(--hrl-sketch-blue);
}

.high-roller-lounge a:focus-visible {
  outline: 2px solid var(--hrl-charcoal);
  outline-offset: 2px;
  border-radius: var(--hrl-radius-1);
}

/* Sticky note shared styles */
.hrl-sticky-note {
  background-color: var(--hrl-note);
  border: 1px solid var(--hrl-border);
  border-radius: var(--hrl-radius-2);
  box-shadow: 0 2px 4px var(--hrl-shadow);
  padding: var(--hrl-space-4);
  position: relative;
  transition: transform var(--hrl-transition-base), box-shadow var(--hrl-transition-base);
}

.hrl-sticky-note::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent var(--hrl-paper) transparent;
  filter: drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.05));
}

.hrl-sticky-note:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 6px 12px var(--hrl-shadow-hover);
}

/* Polaroid shared styles */
.hrl-polaroid {
  margin: 0;
  background-color: var(--hrl-paper);
  border: 1px solid var(--hrl-border);
  border-radius: var(--hrl-radius-2);
  box-shadow: 0 2px 4px var(--hrl-shadow);
  padding: var(--hrl-space-3);
  transition: transform var(--hrl-transition-base), box-shadow var(--hrl-transition-base);
}

.hrl-polaroid:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 6px 12px var(--hrl-shadow-hover);
}

.hrl-polaroid__frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--hrl-radius-1);
  background-color: var(--hrl-paper-dark);
}

.hrl-polaroid__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hrl-polaroid__caption {
  margin: var(--hrl-space-2) 0 0;
  font-size: 0.875rem;
  color: var(--hrl-ink-muted);
  line-height: 1.5;
  text-align: center;
  font-style: italic;
}

/* Section 1: Introduction */
.hrl-intro {
  padding-block: var(--hrl-space-7) var(--hrl-space-6);
  background-color: var(--hrl-paper);
}

.hrl-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 30%);
  gap: var(--hrl-space-6);
  align-items: start;
}

.hrl-intro__text {
  min-width: 0;
}

.hrl-intro__note {
  transform: rotate(2deg);
  max-width: 400px;
  justify-self: end;
}

.hrl-intro__note h2 {
  font-size: 1.5rem;
  margin-block-end: var(--hrl-space-2);
}

.hrl-intro__note p {
  margin-block-end: 0;
}

/* Section 2: Card Room */
.hrl-card-room {
  padding-block: var(--hrl-space-6);
  background-color: var(--hrl-charcoal);
  color: var(--hrl-paper);
}

.hrl-card-room__inner {
  display: flex;
  justify-content: center;
}

.hrl-card-room__content {
  max-width: 700px;
  width: 100%;
  color: var(--hrl-paper);
}

.hrl-card-room__content h2,
.hrl-card-room__content h3 {
  color: var(--hrl-paper);
}

.hrl-card-room__content p {
  color: var(--hrl-paper);
}

.hrl-card-room__list {
  color: var(--hrl-paper);
}

.hrl-card-room__list li {
  color: var(--hrl-paper);
}

/* Section 3: Snapshot */
.hrl-snapshot {
  padding-block: var(--hrl-space-6);
  background-color: var(--hrl-paper-dark);
}

.hrl-snapshot__inner {
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 40%);
  gap: var(--hrl-space-6);
  align-items: start;
}

.hrl-snapshot__text {
  min-width: 0;
}

.hrl-snapshot__photo {
  transform: rotate(-1.5deg);
  max-width: 500px;
  justify-self: center;
}

/* Section 4: Etiquette */
.hrl-etiquette {
  padding-block: var(--hrl-space-6);
  background-color: var(--hrl-paper);
}

.hrl-etiquette__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--hrl-space-5);
  align-items: start;
  margin-block-end: var(--hrl-space-5);
}

.hrl-etiquette__intro {
  min-width: 0;
}

.hrl-etiquette__scraps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hrl-space-3);
  min-width: 0;
}

.hrl-etiquette__scrap {
  background-color: var(--hrl-paper);
  border: 1px solid var(--hrl-border);
  border-radius: var(--hrl-radius-2);
  box-shadow: 0 2px 4px var(--hrl-shadow);
  padding: var(--hrl-space-3);
  font-size: 0.875rem;
  line-height: 1.5;
  min-width: 0;
  transition: transform var(--hrl-transition-base), box-shadow var(--hrl-transition-base);
}

.hrl-etiquette__scrap:nth-child(1) {
  transform: rotate(-1deg);
}

.hrl-etiquette__scrap:nth-child(2) {
  transform: rotate(1.5deg);
}

.hrl-etiquette__scrap:nth-child(3) {
  transform: rotate(-0.5deg);
}

.hrl-etiquette__scrap:nth-child(4) {
  transform: rotate(1deg);
}

.hrl-etiquette__scrap:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 6px 12px var(--hrl-shadow-hover);
}

.hrl-etiquette__dealer {
  max-width: 700px;
}

/* Section 5: Food */
.hrl-food {
  padding-block: var(--hrl-space-6);
  background-color: var(--hrl-paper);
}

.hrl-food__inner {
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 40%);
  gap: var(--hrl-space-6);
  align-items: start;
}

.hrl-food__text {
  min-width: 0;
}

.hrl-food__photo {
  transform: rotate(1.5deg);
  max-width: 500px;
  justify-self: center;
}

/* Section 6: Personalities */
.hrl-personalities {
  padding-block: var(--hrl-space-6);
  background-color: var(--hrl-paper-dark);
}

.hrl-personalities__intro {
  max-width: 800px;
}

.hrl-personalities__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hrl-space-4);
  margin-block-start: var(--hrl-space-4);
}

.hrl-profile-card {
  background-color: var(--hrl-paper);
  border: 1px solid var(--hrl-border);
  border-radius: var(--hrl-radius-3);
  box-shadow: 0 2px 4px var(--hrl-shadow);
  padding: var(--hrl-space-4);
  min-width: 0;
  transition: transform var(--hrl-transition-base), box-shadow var(--hrl-transition-base);
}

.hrl-profile-card:nth-child(1) {
  transform: rotate(-1deg);
}

.hrl-profile-card:nth-child(2) {
  transform: rotate(1.5deg);
}

.hrl-profile-card:nth-child(3) {
  transform: rotate(-0.5deg);
}

.hrl-profile-card:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 6px 12px var(--hrl-shadow-hover);
}

.hrl-profile-card h3 {
  margin-block-end: var(--hrl-space-2);
}

.hrl-profile-card p {
  margin-block-end: var(--hrl-space-2);
}

.hrl-profile-card__detail {
  font-size: 0.875rem;
  color: var(--hrl-ink-muted);
  margin-block-end: 0;
}

/* Section 7: Tournament */
.hrl-tournament {
  padding-block: var(--hrl-space-6);
  background-color: var(--hrl-paper);
}

.hrl-tournament__inner {
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 30%);
  gap: var(--hrl-space-5);
  align-items: start;
}

.hrl-tournament__text {
  min-width: 0;
}

.hrl-tournament__sketch {
  max-width: 300px;
  justify-self: center;
  transform: rotate(2deg);
  color: var(--hrl-charcoal);
}

.hrl-tournament__sketch svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Section 8: Atmosphere */
.hrl-atmosphere {
  padding-block: var(--hrl-space-6);
  background-color: var(--hrl-paper-dark);
}

.hrl-atmosphere__inner {
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 40%);
  gap: var(--hrl-space-6);
  align-items: start;
}

.hrl-atmosphere__text {
  min-width: 0;
}

.hrl-atmosphere__photo {
  transform: rotate(-1deg);
  max-width: 500px;
  justify-self: center;
}

/* Section 9: Unwritten Rules */
.hrl-unwritten {
  padding-block: var(--hrl-space-6);
  background-color: var(--hrl-paper);
}

.hrl-unwritten__inner {
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 30%);
  gap: var(--hrl-space-5);
  align-items: start;
}

.hrl-unwritten__content {
  min-width: 0;
}

.hrl-unwritten__list {
  padding-inline-start: var(--hrl-space-4);
}

.hrl-unwritten__sketch {
  max-width: 200px;
  justify-self: center;
  transform: rotate(-2deg);
  color: var(--hrl-charcoal);
}

.hrl-unwritten__sketch svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Section 10: Restaurant Connection */
.hrl-restaurant {
  padding-block: var(--hrl-space-6);
  background-color: var(--hrl-paper-dark);
}

.hrl-restaurant__inner {
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 30%);
  gap: var(--hrl-space-6);
  align-items: start;
}

.hrl-restaurant__text {
  min-width: 0;
}

.hrl-restaurant__note {
  transform: rotate(-2deg);
  max-width: 400px;
  justify-self: end;
}

.hrl-restaurant__note h2 {
  font-size: 1.5rem;
  margin-block-end: var(--hrl-space-2);
}

.hrl-restaurant__note p {
  margin-block-end: 0;
}

/* Section 11: Visit */
.hrl-visit {
  padding-block: var(--hrl-space-7) var(--hrl-space-8);
  background-color: var(--hrl-paper);
}

.hrl-visit__inner {
  display: flex;
  justify-content: center;
}

.hrl-visit__content {
  max-width: 700px;
  width: 100%;
}

.hrl-visit__contact-card {
  background-color: var(--hrl-paper);
  border: 1px solid var(--hrl-border-strong);
  border-radius: var(--hrl-radius-3);
  box-shadow: 0 2px 4px var(--hrl-shadow);
  padding: var(--hrl-space-4);
  max-width: 400px;
  margin-inline: auto;
  margin-block-end: var(--hrl-space-5);
  transform: rotate(1deg);
  transition: transform var(--hrl-transition-base), box-shadow var(--hrl-transition-base);
}

.hrl-visit__contact-card:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 6px 12px var(--hrl-shadow-hover);
}

.hrl-visit__contact-card p {
  margin-block-end: var(--hrl-space-2);
}

.hrl-visit__contact-card p:last-child {
  margin-block-end: 0;
}

.hrl-visit__invitation {
  font-style: italic;
  border-top: 1px solid var(--hrl-border);
  padding-block-start: var(--hrl-space-3);
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .hrl-intro__inner,
  .hrl-snapshot__inner,
  .hrl-food__inner,
  .hrl-atmosphere__inner,
  .hrl-restaurant__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hrl-space-5);
  }

  .hrl-intro__note,
  .hrl-restaurant__note {
    justify-self: start;
    max-width: 500px;
    transform: rotate(1deg);
  }

  .hrl-snapshot__photo,
  .hrl-food__photo,
  .hrl-atmosphere__photo {
    max-width: 600px;
    justify-self: start;
    transform: rotate(0deg);
  }

  .hrl-etiquette__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hrl-space-4);
  }

  .hrl-etiquette__scraps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hrl-tournament__inner,
  .hrl-unwritten__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hrl-space-4);
  }

  .hrl-tournament__sketch,
  .hrl-unwritten__sketch {
    max-width: 200px;
    justify-self: start;
    transform: rotate(0deg);
  }

  .hrl-personalities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .high-roller-lounge .container {
    padding-inline: var(--hrl-space-3);
  }

  .hrl-intro,
  .hrl-card-room,
  .hrl-snapshot,
  .hrl-etiquette,
  .hrl-food,
  .hrl-personalities,
  .hrl-tournament,
  .hrl-atmosphere,
  .hrl-unwritten,
  .hrl-restaurant,
  .hrl-visit {
    padding-block: var(--hrl-space-5);
  }

  .hrl-intro__inner,
  .hrl-snapshot__inner,
  .hrl-food__inner,
  .hrl-atmosphere__inner,
  .hrl-restaurant__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hrl-space-4);
  }

  .hrl-intro__note,
  .hrl-restaurant__note {
    max-width: 100%;
    transform: rotate(0deg);
    justify-self: stretch;
  }

  .hrl-snapshot__photo,
  .hrl-food__photo,
  .hrl-atmosphere__photo {
    max-width: 100%;
    transform: rotate(0deg);
    justify-self: stretch;
  }

  .hrl-etiquette__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hrl-space-3);
  }

  .hrl-etiquette__scraps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hrl-space-2);
  }

  .hrl-etiquette__scrap {
    transform: rotate(0deg);
  }

  .hrl-personalities__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hrl-space-3);
  }

  .hrl-profile-card {
    transform: rotate(0deg);
  }

  .hrl-tournament__inner,
  .hrl-unwritten__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hrl-space-3);
  }

  .hrl-tournament__sketch,
  .hrl-unwritten__sketch {
    max-width: 150px;
    justify-self: start;
    transform: rotate(0deg);
  }

  .hrl-visit__contact-card {
    transform: rotate(0deg);
    max-width: 100%;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .high-roller-lounge .container {
    padding-inline: var(--hrl-space-2);
  }

  .hrl-sticky-note,
  .hrl-polaroid {
    padding: var(--hrl-space-3);
  }

  .hrl-profile-card {
    padding: var(--hrl-space-3);
  }
}