/* UNIVERSAL ---------------------------------------------------------------- */
:root {
	--awning-height: 100px;
}

html {
	min-height: 100% !important;
}

html.no-scroll {
	height: 100%;
	overflow: hidden;
}

body{
   margin: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(119, 182, 194, 0.25) 0px 20px,
    white 20px 40px,
    rgba(255, 210, 100, 0.25) 40px 60px,
    white 60px 80px,
    rgba(223, 109, 124, 0.25) 80px 100px,
    white 100px 120px,
    rgba(186, 110, 165, 0.25) 120px 140px,
    white 140px 160px,
    rgba(157, 217, 185, 0.25) 160px 180px,
    white 180px 200px
  );
}

body.no-scroll {
  height: 100%;
  overflow: hidden;
}

p{
  font-family: "Quicksand";
  font-weight: 500;
}

h1{
    font-family: "Pacifico";
}

/* LANDING PAGE  ---------------------------------------------------------------- */
.menu-btn{
text-align: center
}

.menu-btn button{
  font-size:2em;
  font-family: "Pacifico";
  margin:10px;
  background-color: #FDDAA0;
  color: #12320D;
  border: 2px solid #12320D;
  padding:10px;
  border-radius: 0.25em;

}
.landing-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: calc(100vh - var(--awning-height));
    width: 100vw;
    margin: 0 auto;
    overflow: hidden;
}

.char {
    position: absolute;
    bottom: 0;
    height: auto; /* let width drive */
    object-fit: unset;
}

/* ── Side groups ── */
.characters-left,
.characters-right {
    position: relative;
    flex-shrink: 0;
    width: 38%;
    height: 750px;
    overflow: visible;
    transform: translateY(50%);
}

/* Left: 3 characters — char-left-3 bleeds furthest into center */
.char-left-1 { left: -15%;  width: 100%; z-index: 1; }
.char-left-2 { left: 14%;  width: 100%; z-index: 2; }
.char-left-3 { left: 38%;  width: 90%; z-index: 3; transform: translateY(10%);}

/* Right: 2 characters — char-right-1 bleeds furthest into center */
.char-right-1 { right: 38%; width: 100%; z-index: 2; }
.char-right-2 { right: -7%; width: 100%; z-index: 3;  transform: translateY(5%);}

/* ── Center ── */
.hero-center {
    position: absolute;
        left: 50%;
    top: 0; /* anchor to top instead of true center */
    transform: translateX(-50%); /* only horizontal centering */
    z-index: 10; /* sits above character images */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    width: auto;
    padding-bottom: 2rem;
}

.hero-logo {
    width: 100%;
    max-width: 750px;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.menu-btn-hero {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-family: "Pacifico";
    width: 30%;
    background-color: #FDDAA0;
    color: #12320D;
    border: 2px solid #12320D;
    padding: 10px;
    border-radius: 0.25em;
    cursor: pointer;
}

/* ── Mobile: hide characters, center the logo + buttons ── */
@media (max-width: 768px) {

    .landing-hero {
        min-height: unset;
        padding: 2rem 1rem;
    }

    .hero-center {
        width: 100%;
    }
.hero-logo {
    width: 100%;
    max-width: 400px;
}

.characters-left,
.characters-right {
    transform: none;
        width: 50%;
}
}

/* OSHIKATSU ---------------------------------------------------------------- */

p.caption {
  color: #1d1b1b
}

p.name{
  color: #FFFFFF;
  text-align: right;
  font-family: "Pacifico";
  font-size: 18px;
  margin-bottom: 0px;
}

.oshi-container{
  margin-top: 3em
}

.oshi-card{
  border-radius: 10px;
  margin:1em;
  padding: 1em;
}

.soma{
  background-color: #BA6EA5;
}
.berry{
background-color: #DF6D7C
}
.tama{
background-color: #FFD264
}
.tora{
background-color: #77B6C2
}
.suzu{
background-color: #9DD9B9
}

.soma img {
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius: 5px
}

.tora img {
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius: 5px
}
.berry img {
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius: 5px
}
.tama img {
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius: 5px
}
.suzu img {
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius: 5px
}




/* OSHIKATSU ---------------------------------------------------------------- */

.modal-custom{
  padding:1em;
}

.dome-wrapper {
    position: relative; /* this becomes the positioning context */
}

.heading-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
}

.heading {
    font-size: clamp(1.5rem, 4vw, 6rem);
    margin: 0;
    line-height: 1;
    color: #9DD9B9;
}

/* AWNING HEADER ---------------------------------------------------------------- */

.awning-header {
    position: relative;
    width: 100%;
    height: var(--awning-height);
    overflow: hidden;
}

/* Brick backdrop behind the awning */
.awning-brick {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.25em;
    background-color: #9c4a3d;
    background-image:
        linear-gradient(335deg, rgba(0, 0, 0, 0.18) 23px, transparent 23px),
        linear-gradient(155deg, rgba(0, 0, 0, 0.18) 23px, transparent 23px),
        linear-gradient(335deg, rgba(0, 0, 0, 0.18) 23px, transparent 23px),
        linear-gradient(155deg, rgba(0, 0, 0, 0.18) 23px, transparent 23px);
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
    box-shadow: inset 0 -6px 12px -6px rgba(0, 0, 0, 0.4);
}

.awning-brand {
    font-family: "Pacifico";
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    color: #FDDAA0;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

/* The awning band itself */
.awning-band {
    height: 32%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #B5342E;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.08) 0px 18px,
        transparent 18px 36px
    );
    box-shadow: inset 0 4px 6px -4px rgba(0, 0, 0, 0.5);
}

.awning-text {
    font-family: "Pacifico";
    font-style: italic;
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    color: #FDDAA0;
    letter-spacing: 0.05em;
}