:root{
  --bg-image:url("https://lost-city-frontend.s3.eu-north-1.amazonaws.com/assets/kzqsfw9jzw+(2).png");
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,
body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
  font-family:system-ui,sans-serif;
}

body{
  touch-action:manipulation;
}

a,
button{
  font-family:inherit;
}

a{
  text-decoration:none;
  color:inherit;
}

.app{
  position:relative;
  width:100vw;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:#000;
}

/* TŁO */

.bg{
  position:absolute;
  inset:-14%;

  background-image:
    linear-gradient(
      to bottom,
      rgba(255,245,225,.32),
      rgba(255,245,225,.08),
      rgba(0,0,0,.72)
    ),
    var(--bg-image);

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  filter:grayscale(.18) sepia(.20) contrast(1.08) brightness(.88);

  transform:translate3d(0,0,0) scale(1.18);
  opacity:1;

  transition:opacity 2.2s ease;
  will-change:transform,opacity;

  z-index:1;
  pointer-events:none;
}

.fog{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.16), transparent 42%),
    radial-gradient(circle at 20% 80%, rgba(255,241,220,.10), transparent 48%);
  mix-blend-mode:screen;
  opacity:.55;
  pointer-events:none;
  z-index:2;
}

.noise{
  position:absolute;
  inset:0;
  opacity:.07;
  pointer-events:none;
  z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* JĘZYKI */

.lang-bar{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:calc(46px + var(--safe-top));

  display:flex;
  align-items:center;
  gap:6px;

  padding:calc(7px + var(--safe-top)) 10px 7px;

  z-index:40;

  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.76),
    rgba(0,0,0,.22),
    rgba(0,0,0,0)
  );

  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.lang-bar::-webkit-scrollbar{
  display:none;
}

.lang-bar button{
  flex:0 0 auto;
  min-width:34px;
  height:28px;
  padding:0 8px;

  border:1px solid rgba(255,241,220,.48);
  border-radius:999px;

  background:rgba(0,0,0,.48);
  color:#fff1de;

  font-size:10.5px;
  font-weight:800;
  letter-spacing:.3px;

  cursor:pointer;
}

.lang-bar button.active{
  background:#fff1de;
  color:#171311;
}

/* HOME */

.home-btn{
  position:absolute;
  top:calc(58px + var(--safe-top));
  right:20px;

  width:62px;
  height:62px;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:35;

  border-radius:50%;
  border:2px solid rgba(255,241,220,.62);

  background:rgba(22,19,17,.84);
  color:#fff1de;

  font-size:44px;
  line-height:1;

  box-shadow:0 14px 32px rgba(0,0,0,.38);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  transition:transform .16s ease, filter .16s ease;
}

.home-btn:active{
  transform:scale(.94);
}

/* CONTENT */

.content{
  position:relative;
  z-index:5;

  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  align-items:center;

  padding:
    calc(58px + var(--safe-top))
    18px
    calc(92px + var(--safe-bottom));

  overflow-y:auto;
  overflow-x:hidden;

  -webkit-overflow-scrolling:touch;
}

.logo{
  width:clamp(72px,21vw,128px);
  margin-top:4px;
  flex:0 0 auto;
}

.logo img{
  width:100%;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.48));
}

h1{
  margin:8px 0 0;

  font-family:'Anton',sans-serif;
  font-size:clamp(40px,11vw,84px);
  line-height:.9;
  letter-spacing:2px;

  color:#111;
  text-transform:uppercase;
  text-align:center;

  text-shadow:
    0 2px 0 rgba(255,255,255,.20),
    0 10px 26px rgba(0,0,0,.50);
}

.breslau{
  margin-top:4px;

  font-family:'Anton',sans-serif;
  font-size:clamp(18px,5vw,38px);
  line-height:1;
  letter-spacing:clamp(2px,1vw,5px);

  color:#1c1714;
  text-align:center;

  text-shadow:
    0 2px 0 rgba(255,255,255,.16),
    0 6px 16px rgba(0,0,0,.42);
}

/* MENU HISTORII */

.history-menu{
  width:min(88vw,430px);

  display:flex;
  flex-direction:column;
  gap:14px;

  margin-top:clamp(28px,6vh,58px);
  padding-bottom:22px;
}

.history-card{
  width:100%;
  min-height:64px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  border-radius:999px;

  font-family:
    "Century Gothic",
    CenturyGothic,
    AppleGothic,
    sans-serif;

  font-size:clamp(17px,4.5vw,24px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:1.2px;

  text-transform:uppercase;

  cursor:pointer;
  user-select:none;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  transition:
    transform .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

.history-card:active{
  transform:scale(.96);
}

.history-card.dark{
  background:rgba(22,19,17,.86);
  color:#fff1de;

  border:2px solid rgba(255,236,214,.64);

  box-shadow:
    0 12px 30px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.history-card.light{
  background:rgba(255,241,220,.86);
  color:#211a15;

  border:2px solid rgba(24,20,18,.92);

  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.46);
}

/* BACK */

.back-btn{
  position:absolute;
  right:22px;
  bottom:calc(18px + var(--safe-bottom));

  width:64px;
  height:64px;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:40;

  border-radius:50%;
  border:2px solid rgba(255,241,220,.58);

  background:rgba(0,0,0,.90);
  color:#fff;

  font-size:50px;
  font-weight:900;
  line-height:1;

  box-shadow:0 12px 30px rgba(0,0,0,.46);

  transition:transform .16s ease, filter .16s ease;
}

.back-btn:active{
  transform:scale(.94);
}

/* MAŁE TELEFONY */

@media(max-height:700px){

  .content{
    padding-top:calc(52px + var(--safe-top));
    padding-bottom:calc(78px + var(--safe-bottom));
  }

  .home-btn{
    width:56px;
    height:56px;
    font-size:40px;
    right:18px;
  }

  .logo{
    width:62px;
  }

  h1{
    font-size:38px;
  }

  .breslau{
    font-size:18px;
  }

  .history-menu{
    margin-top:24px;
    gap:11px;
  }

  .history-card{
    min-height:54px;
    font-size:20px;
  }

  .back-btn{
    width:56px;
    height:56px;
    font-size:42px;
  }
}

@media(max-height:590px){

  .logo{
    display:none;
  }

  .history-menu{
    margin-top:20px;
  }

  .history-card{
    min-height:48px;
    font-size:18px;
  }
}

/* TABLETY */

@media(min-width:768px) and (min-height:760px){

  .lang-bar{
    height:64px;
    padding:14px 22px;
    gap:10px;
  }

  .lang-bar button{
    height:34px;
    min-width:44px;
    font-size:13px;
    padding:0 12px;
  }

  .content{
    padding-top:90px;
  }

  .home-btn{
    top:96px;
    right:42px;
    width:84px;
    height:84px;
    font-size:60px;
  }

  .logo{
    width:150px;
  }

  h1{
    font-size:94px;
  }

  .breslau{
    font-size:42px;
  }

  .history-menu{
    width:480px;
    gap:20px;
  }

  .history-card{
    min-height:80px;
    font-size:32px;
  }

  .back-btn{
    width:78px;
    height:78px;
    font-size:60px;
    right:38px;
  }
}