:root {
    --black-deep: #050608;
    --black-soft: #0c0f14;
    --steel-dark: #1a1f26;
    --steel-mid: #2c323c;
    --steel-light: #9aa3ad;
    --chrome: #cfd6df;
    --accent-glow: rgba(220, 230, 255, 0.35);
    --white-soft: #e8ebef;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(18, 18, 18, 0.95);
  border-radius: 50px;
}
::-webkit-scrollbar-thumb {
  background: #BFA14A;
  border-radius: 50px;
}

.cormorant-upright-bold {
  font-family: "Cormorant Upright", serif;
  font-weight: 700;
  font-style: normal;
}

html{
    margin-top: 0;
    margin-left: 0;
    padding-top: 0;
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.04), transparent 60%),
        linear-gradient(145deg, #0b0e13, #020305);
    box-shadow: inset 0 0 180px rgba(0,0,0,0.95);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    height: 100vh;
}

body{
    margin: 0;
}

br{
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
}

.bruno-ace-sc-regular {
    font-family: "Bruno Ace SC", sans-serif;
    font-weight: 400;
    font-style: normal;
  }


.asul-bold {
    font-family: "Asul", serif;
    font-weight: 700;
    font-style: normal;
  }

.mode{
    font-family: "Bruno Ace SC", sans-serif;
    font-weight: bold;
}

#link{
    display: inline;
    text-decoration: none;
    color: white;
}

div{
    margin-left: 0;
}

div>p{
    margin-left: 0;
    padding-left: 0;
}

.app {
    position: relative;
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.04), transparent 60%),
        linear-gradient(145deg, #0b0e13, #020305);
    box-shadow: inset 0 0 180px rgba(0,0,0,0.95);
    overflow: hidden;
}

.app h1 {
    text-align: center;
    font-family: 'Bruno Ace SC', sans-serif;
    color: var(--chrome);
    text-shadow:
        0 0 20px rgba(255,255,255,0.15),
        0 10px 40px rgba(0,0,0,0.8);
}

h1::after {
  content: '';
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.box {
    background:
        linear-gradient(145deg, #2a313b, #0d1118);
    border-radius: 14px;
    position: relative;
    box-shadow:
        inset 0 0 30px rgba(255,255,255,0.08),
        inset 0 -12px 25px rgba(0,0,0,0.9),
        0 30px 70px rgba(0,0,0,0.85);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.box::before,
.box::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #cfd6df, #5a616b);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
}

.box::before { top: 14px; left: 14px; }
.box::after  { bottom: 14px; right: 14px; }

.box:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow:
        inset 0 0 40px rgba(255,255,255,0.12),
        0 40px 90px rgba(0,0,0,0.95);
}

.boxes {
  display: grid;
  margin: 0 auto;
}

.push {
    text-decoration: none;
    color: var(--white-soft);
    font-family: 'Bruno Ace SC', sans-serif;
    font-family: 'Asul', 'Franklin Gothic Medium', serif;
    font-weight: 700;
}

.push p {
    margin: 0;
    text-shadow: 0 0 12px rgba(255,255,255,0.2);
    text-align: center;
}

#handle{
    position: absolute;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding-left: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
}

  #handle:hover {
    transform: scale(1.1);
  }

.metal-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 101;
    background:
        linear-gradient(
            180deg,
            #1b1f25 0%,
            #3a4049 10%,
            #cfd6df 22%,
            #7b828c 35%,
            #2a2f36 50%,
            #7b828c 65%,
            #cfd6df 78%,
            #3a4049 90%,
            #1b1f25 100%
        );
    box-shadow:
        inset 0 0 6px rgba(255,255,255,0.35),
        inset 0 0 22px rgba(0,0,0,0.9),
        0 0 25px rgba(0,0,0,0.8);
    border-radius: 6px;
}

.metal-bar::before,
.metal-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.metal-bar::before {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.65),
        rgba(255,255,255,0.15),
        rgba(255,255,255,0.55)
    );
    filter: blur(0.3px);
}

.metal-bar::after {
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.8),
        rgba(0,0,0,0.3),
        rgba(0,0,0,0.9)
    );
}

@keyframes steel-shimmer {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.08); }
    100% { filter: brightness(1); }
}

.metal-bar {
    animation: steel-shimmer 18s ease-in-out infinite;
}

.confirm{
  font-size: 0.8em;
}

@media screen and (min-width: 1025px){
.app {
    min-height: 65vh;
    padding: 120px 20px 140px;
}

.app h1 {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    letter-spacing: 0.3em;
    margin-bottom: 90px;
}

h1::after {
  width: 60%;
  height: 6px;
  margin: 20px auto 0;
}

.box {
    padding: 80px 60px;
}

.box::before,
.box::after {
    width: 14px;
    height: 14px;
}

.boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  width: 80%;
}

.push {
    letter-spacing: 0.15em;
    font-size: 1.1rem;
    font-weight: 700;
}

.metal-bar {
    width: 30px;
}

.metal-bar::before,
.metal-bar::after {
    width: 3px;
}

.metal-bar::before {
    left: 2px;
}

.metal-bar::after {
    right: 2px;
}

.left-bar.outer-bar {
    left: 20px;
}

.left-bar.inner-bar {
    left: 60px;
    width: 18px;
    opacity: 0.85;
}

.right-bar.outer-bar {
    right: 20px;
}

.right-bar.inner-bar {
    right: 60px;
    width: 18px;
    opacity: 0.85;
}
}

@media screen and (min-width: 901px) and (max-width: 1024px){
.app {
    min-height: 65vh;
    padding: 120px 20px 140px;
}

.app h1 {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    letter-spacing: 0.3em;
    margin-bottom: 90px;
}

h1::after {
  width: 60%;
  height: 6px;
  margin: 20px auto 0;
}

.box {
    padding: 80px 60px;
}

.box::before,
.box::after {
    width: 14px;
    height: 14px;
}

.boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  width: 80%;
}

.push {
    letter-spacing: 0.15em;
    font-size: 1.1rem;
    font-weight: 700;
}

.metal-bar {
    width: 30px;
}

.metal-bar::before,
.metal-bar::after {
    width: 3px;
}

.metal-bar::before {
    left: 2px;
}

.metal-bar::after {
    right: 2px;
}

.left-bar.outer-bar {
    left: 20px;
}

.left-bar.inner-bar {
    left: 60px;
    width: 18px;
    opacity: 0.85;
}

.right-bar.outer-bar {
    right: 20px;
}

.right-bar.inner-bar {
    right: 60px;
    width: 18px;
    opacity: 0.85;
}
}

@media screen and (min-width: 769px) and (max-width: 900px) and (orientation: portrait){
.app {
    min-height: 65vh;
    padding: 120px 20px 140px;
}

.app h1 {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    letter-spacing: 0.3em;
    margin-bottom: 90px;
}

h1::after {
  width: 60%;
  height: 6px;
  margin: 20px auto 0;
}

.box {
    padding: 80px 60px;
}

.box::before,
.box::after {
    width: 14px;
    height: 14px;
}

.boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  width: 80%;
}

.push {
    letter-spacing: 0.15em;
    font-size: 1.1rem;
    font-weight: 700;
}

.metal-bar {
    width: 30px;
}

.metal-bar::before,
.metal-bar::after {
    width: 3px;
}

.metal-bar::before {
    left: 2px;
}

.metal-bar::after {
    right: 2px;
}

.left-bar.outer-bar {
    left: 20px;
}

.left-bar.inner-bar {
    left: 60px;
    width: 18px;
    opacity: 0.85;
}

.right-bar.outer-bar {
    right: 20px;
}

.right-bar.inner-bar {
    right: 60px;
    width: 18px;
    opacity: 0.85;
}
}

@media screen and (min-width: 569px) and (max-width: 768px) and (orientation: portrait){
.app {
    min-height: 65vh;
    padding: 120px 20px 160px;
}

.app h1 {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    letter-spacing: 0.3em;
    padding-bottom: 70px;
    width: 70%;
    margin: 0 auto;
}

h1::after {
  width: 60%;
  height: 6px;
  margin: 20px auto 0;
}

.box {
    padding: 80px 60px;
}

.box::before,
.box::after {
    width: 14px;
    height: 14px;
}

.boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  width: 80%;
}

.push {
    letter-spacing: 0.15em;
    font-size: 1.1rem;
    font-weight: 700;
}

.metal-bar {
    width: 30px;
}

.metal-bar::before,
.metal-bar::after {
    width: 3px;
}

.metal-bar::before {
    left: 2px;
}

.metal-bar::after {
    right: 2px;
}

.left-bar.outer-bar {
    left: 20px;
}

.left-bar.inner-bar {
    left: 60px;
    width: 18px;
    opacity: 0.85;
}

.right-bar.outer-bar {
    right: 20px;
}

.right-bar.inner-bar {
    right: 60px;
    width: 18px;
    opacity: 0.85;
}
}

@media screen and (min-width: 481px) and (max-width: 568px) and (orientation: portrait){
.app {
    min-height: 65vh;
    padding: 80px 20px 90px;
}

.app h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.7rem);
    letter-spacing: 0.3em;
    padding-bottom: 40px;
    margin: 0 auto;
}

h1::after {
  width: 60%;
  height: 6px;
  margin: 20px auto 0;
}

.box {
    padding: 80px 60px;
}

.box::before,
.box::after {
    width: 14px;
    height: 14px;
}

.boxes {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 40px;
  width: 65%;
}

.push {
    letter-spacing: 0.15em;
    font-size: 1.1rem;
    font-weight: 700;
}

.metal-bar {
    width: 30px;
}

.metal-bar::before,
.metal-bar::after {
    width: 3px;
}

.metal-bar::before {
    left: 2px;
}

.metal-bar::after {
    right: 2px;
}

.left-bar.outer-bar {
    left: 20px;
}

.left-bar.inner-bar {
    left: 60px;
    width: 18px;
    opacity: 0.85;
}

.right-bar.outer-bar {
    right: 20px;
}

.right-bar.inner-bar {
    right: 60px;
    width: 18px;
    opacity: 0.85;
}
}


@media screen and (min-width: 370px) and (max-width: 480px) and (orientation: portrait){
html, body {
    position: fixed;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.04), transparent 60%),
        linear-gradient(145deg, #0b0e13, #020305);
    box-shadow: inset 0 0 180px rgba(0,0,0,0.95);
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    background-attachment: fixed;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.app {
    position: relative;
    min-height: 80vh;
    padding-top: 80px;
    padding-bottom: 80px;
}

  .app h1 {
    width: 60%;
    font-size: clamp(1.4rem, 4.2vw, 2.2rem);
    letter-spacing: 0.3em;
    padding-bottom: 35px;
    margin: 0 auto;
    justify-content: center;
}

h1::after {
  width: 60%;
  height: 6px;
}

.metal-bar {
    width: 30px;
}

.metal-bar::before,
.metal-bar::after {
    width: 3px;
}

.metal-bar::before {
    left: 2px;
}

.metal-bar::after {
    right: 2px;
}

.left-bar.outer-bar {
    left: 5px;
}

.left-bar.inner-bar {
    left: 45px;
    width: 15px;
    opacity: 0.85;
}

.right-bar.outer-bar {
    right: 5px;
}

.right-bar.inner-bar {
    right: 45px;
    width: 15px;
    opacity: 0.85;
}

.box {
    width: 60%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.box::before,
.box::after {
    width: 14px;
    height: 14px;
}

.push {
    letter-spacing: 0.15em;
    font-size: 1.1rem;
}

.boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  justify-items: stretch;
}
}

@media screen and (min-width: 345px) and (max-width: 812px) and (orientation: landscape){
  html, body {
    position: fixed;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.04), transparent 60%),
        linear-gradient(145deg, #0b0e13, #020305);
    box-shadow: inset 0 0 180px rgba(0,0,0,0.95);
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    background-attachment: fixed;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.app {
    min-height: 65vh;
    padding: 80px 20px 80px;
}

.app h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.8rem);
    letter-spacing: 0.3em;
    margin-bottom: 70px;
    margin: 0 auto;
    width: 70%;
}

h1::after {
  width: 60%;
  height: 6px;
  margin: 20px auto 0;
}

.box {
    padding: 80px 60px;
}

.box::before,
.box::after {
    width: 14px;
    height: 14px;
}

.boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  width: 80%;
}

.push {
    letter-spacing: 0.15em;
    font-size: 1.1rem;
    font-weight: 700;
}

.metal-bar {
    width: 30px;
}

.metal-bar::before,
.metal-bar::after {
    width: 3px;
}

.metal-bar::before {
    left: 2px;
}

.metal-bar::after {
    right: 2px;
}

.left-bar.outer-bar {
    left: 5px;
}

.left-bar.inner-bar {
    left: 45px;
    width: 13px;
    opacity: 0.85;
}

.right-bar.outer-bar {
    right: 5px;
}

.right-bar.inner-bar {
    right: 45px;
    width: 13px;
    opacity: 0.85;
}
}

@media screen and (max-width: 369px) and (orientation: portrait){
html, body {
    position: fixed;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.04), transparent 60%),
        linear-gradient(145deg, #0b0e13, #020305);
    box-shadow: inset 0 0 180px rgba(0,0,0,0.95);
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    background-attachment: fixed;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.app {
    position: relative;
    min-height: 80vh;
    padding-top: 80px;
    padding-bottom: 80px;
}

  .app h1 {
    width: 60%;
    font-size: clamp(1.4rem, 4.2vw, 2.2rem);
    letter-spacing: 0.3em;
    padding-bottom: 35px;
    margin: 0 auto;
    justify-content: center;
}

h1::after {
  width: 60%;
  height: 6px;
}

.metal-bar {
    width: 30px;
}

.metal-bar::before,
.metal-bar::after {
    width: 3px;
}

.metal-bar::before {
    left: 2px;
}

.metal-bar::after {
    right: 2px;
}

.left-bar.outer-bar {
    left: 5px;
}

.left-bar.inner-bar {
    left: 45px;
    width: 15px;
    opacity: 0.85;
}

.right-bar.outer-bar {
    right: 5px;
}

.right-bar.inner-bar {
    right: 45px;
    width: 15px;
    opacity: 0.85;
}

.box {
    width: 60%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.box::before,
.box::after {
    width: 14px;
    height: 14px;
}

.push {
    letter-spacing: 0.15em;
    font-size: 1.1rem;
}

.boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  justify-items: stretch;
}

.drink{
    display: none;
}
}