.screen--entry {
  position:        relative;
  justify-content: flex-end;
  overflow:        hidden;
}

/* Volcano illustration fills top portion */
.entry__volcano {
  position:  absolute;
  inset:     0;
  top:       -20px;
}

.volcano-svg {
  width:  100%;
  height: 100%;
}

/* Lava glow pulse */
.lava-glow-anim {
  animation: lava-pulse 3s ease-in-out infinite;
}

.crater-anim {
  animation: crater-pulse 2s ease-in-out infinite alternate;
}

@keyframes lava-pulse {
  0%, 100% { opacity: 0.6; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(1.1); }
}

@keyframes crater-pulse {
  from { opacity: 0.6; }
  to   { opacity: 1; fill: #FF6B35; }
}

/* Content sits above the volcano */
.entry__content {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  padding:         var(--sp-6);
  padding-bottom:  var(--sp-10);
  gap:             var(--sp-3);
  background:      linear-gradient(to top, var(--c-bg) 60%, transparent);
}

.entry__title {
  font-size:      var(--fs-3xl);
  font-weight:    var(--fw-bold);
  letter-spacing: 8px;
  color:          var(--c-text);
  text-shadow:    0 0 30px rgba(255,107,53,0.6);
}

.entry__tagline {
  font-size:  var(--fs-sm);
  color:      var(--c-text-muted);
  font-style: italic;
  margin-bottom: var(--sp-4);
}

.entry__actions {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  width:          100%;
  max-width:      340px;
}

/* Profile button top-right */
.entry__profile {
  position:        absolute;
  top:             calc(var(--sp-4) + var(--safe-top));
  right:           var(--sp-4);
  z-index:         2;
  background:      rgba(255,255,255,0.1);
  border:          none;
  border-radius:   var(--r-full);
  width:           40px;
  height:          40px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  cursor:          pointer;
  transition:      background var(--t-fast);
}

.entry__profile:hover { background: rgba(255,255,255,0.2); }

/* ─── Bottom sheet ───────────────────────────────────────────────────────────── */

.sheet {
  position:   fixed;
  inset:      0;
  z-index:    100;
  display:    flex;
  align-items: flex-end;
  visibility: hidden;
  pointer-events: none;
}

.sheet.open {
  visibility:     visible;
  pointer-events: all;
}

.sheet__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0.6);
  opacity:    0;
  transition: opacity var(--t-normal);
}

.sheet.open .sheet__backdrop {
  opacity: 1;
}

.sheet__content {
  position:       relative;
  width:          100%;
  max-width:      480px;
  margin:         0 auto;
  padding:        var(--sp-6);
  padding-bottom: calc(var(--sp-6) + var(--safe-bottom));
  border-radius:  var(--r-lg) var(--r-lg) 0 0;
  transform:      translateY(100%);
  transition:     transform var(--t-normal);
}

.sheet.open .sheet__content {
  transform: translateY(0);
}

.sheet__handle {
  width:         40px;
  height:        4px;
  background:    rgba(255,255,255,0.2);
  border-radius: var(--r-full);
  margin:        0 auto var(--sp-5);
}

/* ─── Code input ─────────────────────────────────────────────────────────────── */

.code-input {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
}

.code-input__prefix {
  font-size:   var(--fs-lg);
  font-weight: var(--fw-bold);
  color:       var(--c-primary);
  white-space: nowrap;
}

.code-input__boxes {
  display: flex;
  gap:     var(--sp-2);
}

.code-box {
  width:         44px;
  height:        52px;
  background:    var(--c-bg-elevated);
  border:        2px solid transparent;
  border-radius: var(--r-md);
  color:         var(--c-text);
  font-family:   var(--font);
  font-size:     var(--fs-xl);
  font-weight:   var(--fw-bold);
  text-align:    center;
  text-transform: uppercase;
  outline:       none;
  transition:    border-color var(--t-fast);
}

.code-box:focus  { border-color: var(--c-primary); }
.code-box.filled { border-color: rgba(255,255,255,0.2); }
.code-box.error  { border-color: var(--c-accent); animation: shake 300ms ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}