:root{
  --bg:#7a2f2a;
  --fg:#f1e7d6;
  --border: rgba(241,231,214,.55);
  --panel2: rgba(0,0,0,.10);
  --shadow: rgba(0,0,0,.35);
  --safe-bottom: max(env(safe-area-inset-bottom), 16px);
  --safe-top: max(env(safe-area-inset-top), 12px);
}

html,body{
  height:100%;
  margin:0;
  overflow: hidden;
}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--fg);
  background:
    radial-gradient(1200px 700px at 50% 35%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 500px at 25% 70%, rgba(0,0,0,.15), transparent 65%),
    var(--bg);
}

.frame{
  height: var(--app-height);
  width: 100vw;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           calc(env(safe-area-inset-bottom) + var(--vv-bottom, 0px))
           env(safe-area-inset-left);
  box-sizing: border-box;
  overflow: hidden;
}

.card{
  width: 100vw;
  height: var(--app-height);
  border: none;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel2), transparent 55%);
}

.card:before{
  content:"";
  position:absolute;inset:-20%;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 6px);
  opacity:.25;
  transform: rotate(-6deg);
  pointer-events:none;
}

.card:after{
  content:"";
  position:absolute;
  inset: clamp(16px, 6vw, 52px);
  border:2px solid var(--border);
  pointer-events:none;
  /*opacity: .50;*/
}

.mark{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:min(44vw,340px);
  opacity:.06;
  transform: rotate(-10deg);
  user-select:none;
  pointer-events:none;
}

.center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding: clamp(18px, 4vw, 48px);
  box-sizing:border-box;
  text-align:center;
  transform: translateY(-1.5svh);
}

.title{
  letter-spacing:.22em;
  font-size:12px;
  opacity:.75;
  margin-bottom:18px;
}

.row{
  display:grid;
  gap:12px;
  justify-content:center;
}

.pin{
  display:grid;
  grid-template-columns: repeat(4, clamp(48px, 10vw, 68px));
  gap: 12px;
  justify-content:center;
  align-items:center;
}

.digit, button{
  box-sizing: border-box;
}

.digit{
  width: clamp(48px, 10vw, 68px);
  height: clamp(56px, 12vw, 78px);
  font-size: clamp(22px, 5vw, 32px);
  text-align: center;
  border-radius: 14px;
  border: 1px solid rgba(241,231,214,.45);
  background: rgba(0,0,0,.22);
  color: var(--fg);
  outline: none;
}

.digit:focus {
  border-color: rgba(241,231,214,.8);
}

button{
  padding:14px 18px;
  font-size:16px;
  border-radius:12px;
  border:1px solid rgba(241,231,214,.40);
  background: rgba(241,231,214,.10);
  color: var(--fg);
  cursor:pointer;
  grid-column: 1 / -1;
  justify-self: center;
  width: clamp(120px, 40vw, 180px);
}
button:active{transform: translateY(1px);}

.msg{
  height:22px;
  margin-top:14px;
  opacity:.8;
}

.reveal-content{
  max-width: 780px;
  margin: 0 auto;
  padding: 0 12px;
  display: grid;
  gap: 18px;
  justify-items: center;
}

.reveal-illustration{
  width: min(520px, 80vw);
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.25));
}

.reveal{
  display:none;
  width:100%;
  transform: translateY(-2svh);
}
.reveal > div{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 12px;
}

.reveal h1{
  margin:0 0 10px;
  font-size: clamp(52px, 6vw, 120px);
  letter-spacing:.06em;
}

.reveal p{
  margin:0;
  font-size: clamp(18px, 1.6vw, 28px);
  opacity:.9;
}

.card-animate:after{
  animation: frameBreath 2s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(241,231,214,.10));
}

/* basic animations */
.fade-out{ animation: fadeOut 220ms ease forwards; }
.fade-in{ animation: fadeIn 320ms ease forwards; }

@keyframes fadeOut {
  to { opacity: 0; transform: translateY(6px); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes frameBreath{
  0%, 100% { opacity: .2; }
  50%      { opacity: .9; }
}

@media (max-width: 480px){
  .pin{
    width: min(320px, 88vw);
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .digit{
    width: 100%;
    height: 58px;
    font-size: 28px;
  }

  button{
    width: min(320px, 88vw);
  }
}