/* ==========================================================================
   Door App - Warm Editorial Linen Theme (Inspired by wall.gian.ink)
   - Warm linen / sand background (#f2ebe1)
   - Deep mossy slate (#2d3732) and warm golden amber (#e59b2a) accents
   - Distraction-free, responsive, app-like touch interface
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f2ebe1;
  background-image: 
    radial-gradient(circle at 50% 20%, #faf6ee 0%, #f2ebe1 60%, #e8decb 100%);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #2d3732;
  touch-action: none;
}

.app-viewport {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Center Stage with soft floating card */
.stage {
  position: relative;
  width: min(88vw, 88vh, 420px);
  height: min(88vw, 88vh, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf6ee;
  border: 1px solid #e6decb;
  border-radius: 36px;
  box-shadow: 
    0 20px 48px rgba(45, 55, 50, 0.08),
    0 4px 12px rgba(45, 55, 50, 0.04);
}

/* Pattern Container */
.pattern-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pattern-container.hidden-fade {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}

.pattern-canvas {
  touch-action: none;
  display: block;
}

/* Error Shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.error-shake {
  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Open Door Action Button State */
.action-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-container.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.btn-open {
  position: relative;
  width: min(54vw, 54vh, 220px);
  height: min(54vw, 54vh, 220px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #36423c 0%, #202723 90%);
  border: 3px solid #e59b2a;
  box-shadow: 
    0 14px 36px rgba(45, 55, 50, 0.22),
    0 0 28px rgba(229, 155, 42, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.25s ease;
  animation: warm-pulse 2.2s infinite alternate;
}

@keyframes warm-pulse {
  0% {
    box-shadow: 0 12px 30px rgba(45, 55, 50, 0.18), 0 0 20px rgba(229, 155, 42, 0.25);
    border-color: #e59b2a;
  }
  100% {
    box-shadow: 0 16px 42px rgba(45, 55, 50, 0.26), 0 0 35px rgba(229, 155, 42, 0.45);
    border-color: #f5ad42;
  }
}

.btn-open:active {
  transform: scale(0.94);
  box-shadow: 0 8px 24px rgba(45, 55, 50, 0.3);
}

.btn-open .lock-icon {
  width: 42px;
  height: 42px;
  stroke: #e59b2a;
  fill: none;
  stroke-width: 2.2;
}

.btn-open .btn-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #faf6ee;
  text-transform: uppercase;
}

/* Door Status & Countdown */
.status-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.status-container.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.countdown-box {
  position: relative;
  width: min(60vw, 60vh, 240px);
  height: min(60vw, 60vh, 240px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.countdown-ring-bg {
  stroke: #ede4d4;
}

.countdown-ring {
  stroke: #84a98c;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.05s linear;
}

.countdown-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 2;
}

.countdown-number {
  font-size: 68px;
  font-weight: 800;
  color: #2d3732;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.status-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #528c68;
  text-transform: uppercase;
}

.status-label.unlocked-pulse {
  animation: pulse-sage 1.2s infinite alternate;
}

@keyframes pulse-sage {
  0% { opacity: 0.85; }
  100% { opacity: 1; }
}

.hidden {
  display: none !important;
}