@import url('https://fonts.googleapis.com/css2?family=Anton&family=Courier+Prime:wght@400;700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

:root{
  --paper:#f7f1e3;
  --paper-2:#efe6d2;
  --ink:#2b2420;
  --red:#e63946;
  --red-dark:#b21f2d;
  --red-soft:#f3d6d9;
  --frame-width:min(100vw, 560px);
  --app-height:100vh;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{background:var(--paper);}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Crimson Pro', Georgia, serif;
  min-height:100vh;
  min-height:var(--app-height);
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  position:relative;
}

/* ---------- paper grain overlay ---------- */
.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.5;
  mix-blend-mode:multiply;
}
.grain svg{width:100%;height:100%;}

@media (prefers-reduced-motion:no-preference){
  .fade-in{animation:fadeIn .7s ease both;}
  @keyframes fadeIn{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
  }
}

.page{
  width:100%;
  display:flex;
  justify-content:center;
}

.frame-shell{
  width:var(--frame-width);
  min-height:100vh;
  min-height:var(--app-height);
  position:relative;
  display:block;
}

.frame-top{
  width:100%;
  aspect-ratio:1452 / 1371;
  background-image:url("RahmenOben.svg");
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
}

.frame-middle{
  width:100%;
  background-image:url("RahmenMitte.svg");
  background-repeat:repeat-y;
  background-size:100% auto;
  background-position:center top;
  min-height:auto;
  margin-top:-2px;
}

.frame-bottom{
  width:100%;
  aspect-ratio:1452 / 328;
  background-image:url("RahmenUnten.svg");
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
  margin-top:-2px;
  position:relative;
}

.content{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  pointer-events:none;
}

.content-inner{
  width:100%;
  max-width:420px;
  margin:0 auto;
  padding:
    clamp(72px, 16vw, 120px)
    20px
    0;
  pointer-events:auto;
  flex:1;
  display:flex;
  flex-direction:column;
}

.form-section{
  flex:1;
  display:flex;
  flex-direction:column;
}

.button-section{
  margin-top:auto;
  padding-bottom:clamp(60px, 12vw, 120px);
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* ---------- title ---------- */
.stamp-title{
  text-align:center;
  margin:0 0 2px;
}
.amp{
  display:block;
  font-family:'Crimson Pro', Georgia, serif;
  font-style:italic;
  color:var(--red);
  font-size:2.5rem;
  line-height:1;
  margin:0 0 4px;
  transform:rotate(-4deg);
}
h1{
  font-family:'Anton', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:2.5rem;
  margin:0;
  color:var(--ink);
  text-align:center;
  line-height:1.05;
  filter:url(#inkRough);
}
h1 .row{display:block;}
h1 .row span{display:inline-block;}
h1 .row span:nth-child(odd){transform:translateY(-1px) rotate(-1.5deg);}
h1 .row span:nth-child(3n){transform:translateY(2px) rotate(1.5deg);}
h1 .row span:nth-child(5n){transform:translateY(-2px) rotate(-2.5deg);}

.date-line{
  text-align:center;
  color:var(--red-dark);
  font-family:'Courier Prime', monospace;
  font-weight:700;
  letter-spacing:.18em;
  font-size:.92rem;
  margin-top:14px;
  margin-bottom:8px;
}

.rule-wrap{
  display:flex;
  justify-content:center;
  margin:18px 0 30px;
}
.rule-wrap svg{
  width:200px;
  height:14px;
  filter:url(#inkRough);
}

.lede{
  text-align:center;
  font-size:1.08rem;
  line-height:1.6;
  color:var(--ink);
  margin-bottom:36px;
  padding:0 6px;
}
.lede em{
  color:var(--red-dark);
  font-style:normal;
  font-weight:600;
}

label.field-label{
  display:block;
  font-family:'Courier Prime', monospace;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.76rem;
  color:var(--red-dark);
  margin-bottom:8px;
}

/* ---------- inputs ---------- */
.carved-field{
  position:relative;
  margin-bottom:28px;
}
.carved-field svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  filter:url(#inkRough);
  pointer-events:none;
}
input[type=text]{
  position:relative;
  width:100%;
  padding:14px 16px;
  font-size:1.08rem;
  font-family:'Crimson Pro', Georgia, serif;
  border:none;
  background:transparent;
  color:var(--ink);
  display:block;
}
input[type=text]:focus{outline:none;}
.carved-field:focus-within svg .field-rect{stroke:var(--red);}

/* ---------- dropzone ---------- */
.dropzone-wrap{
  position:relative;
  margin-bottom:22px;
  cursor:pointer;
}
.dropzone-wrap svg.dz-border{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  filter:url(#inkRough);
  pointer-events:none;
  transition:opacity .2s;
}
.dropzone{
  position:relative;
  padding:38px 18px;
  text-align:center;
  transition:background .2s;
  border-radius:2px;
}
.dropzone-wrap.drag .dropzone{background:var(--red-soft);}
.dropzone svg.icon{
  width:44px;
  height:44px;
  margin-bottom:12px;
}
.dropzone p{
  margin:0;
  font-size:1.02rem;
}
.dropzone .sub{
  font-size:.85rem;
  color:#7a6d5c;
  margin-top:5px;
  font-family:'Courier Prime', monospace;
}
input[type=file]{display:none;}

.preview-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:26px;
}
.thumb{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--paper-2);
  border:2px solid var(--ink);
  border-radius:2px;
}
.thumb:nth-child(3n+1){border-radius:6px 2px 4px 2px;}
.thumb:nth-child(3n+2){border-radius:2px 6px 2px 4px;}
.thumb:nth-child(3n){border-radius:4px 2px 6px 2px;}
.thumb img,
.thumb video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.thumb .remove{
  position:absolute;
  top:2px;
  right:2px;
  width:22px;
  height:22px;
  background:var(--red);
  color:#fff;
  border:none;
  border-radius:50%;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.thumb .status{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:3px 4px;
  font-size:.64rem;
  font-family:'Courier Prime', monospace;
  text-align:center;
  color:#fff;
  background:rgba(0,0,0,.55);
}
.thumb.done .status{background:rgba(30,100,45,.8);}
.thumb.error .status{background:rgba(178,31,45,.9);}

/* ---------- button ---------- */
.stamp-btn-wrap{position:relative;}
.stamp-btn-wrap svg.btn-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  filter:url(#inkRough);
  pointer-events:none;
}
button.upload-btn{
  position:relative;
  display:block;
  width:100%;
  padding:17px;
  background:transparent;
  border:none;
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:1.05rem;
  color:#fff;
  cursor:pointer;
  transition:transform .1s, opacity .15s;
}
button.upload-btn:active:not(:disabled){transform:scale(.98);}
button.upload-btn:disabled{opacity:.4;cursor:not-allowed;}
.stamp-btn-wrap.disabled svg .btn-fill{fill:#b9ad98;}
.stamp-btn-wrap:not(.disabled) svg .btn-fill{fill:var(--red);}

.status-msg{
  text-align:center;
  font-size:.95rem;
  min-height:1.4em;
  font-family:'Courier Prime', monospace;
}
.status-msg.ok{color:#1e6a2d;font-weight:700;}
.status-msg.err{color:var(--red-dark);font-weight:700;}

/* ---------- overlay ---------- */
.stamp-overlay{
  position:fixed;
  inset:0;
  background:rgba(43,36,32,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:20px;
}
.stamp-overlay.show{display:flex;}
.stamp-card{
  position:relative;
  background:var(--paper);
  padding:38px 28px;
  max-width:340px;
  text-align:center;
  filter:url(#inkRoughStrong);
}
.stamp-card > *{filter:none;}
.stamp-card svg.flower{
  width:92px;
  height:92px;
  margin-bottom:16px;
  animation:stampIn .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes stampIn{
  0%{transform:scale(2.6) rotate(-20deg);opacity:0;}
  60%{transform:scale(.9) rotate(3deg);opacity:1;}
  100%{transform:scale(1) rotate(0);}
}
.stamp-card h2{
  font-family:'Anton', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--red);
  font-size:1.5rem;
  margin:0 0 10px;
}
.stamp-card p{
  margin:0 0 22px;
  line-height:1.5;
}
.stamp-card button{
  background:var(--ink);
  color:var(--paper);
  border:none;
  padding:11px 24px;
  font-family:'Courier Prime', monospace;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.85rem;
  cursor:pointer;
  border-radius:2px;
}

footer{
  text-align:center;
  margin-top:44px;
  font-family:'Courier Prime', monospace;
  font-size:.7rem;
  letter-spacing:.1em;
  color:#8a7f70;
}

@media (max-width:480px){
  .content-inner{
    max-width:100%;
    padding:
      clamp(58px, 15vw, 92px)
      16px
      0;
  }

  h1{font-size:2rem;}
  .amp{
    font-size:1.9rem;
    margin-bottom:2px;
  }
  .date-line{
    font-size:.82rem;
    letter-spacing:.12em;
    margin-top:10px;
  }
  .lede{
    font-size:1rem;
    margin-bottom:24px;
  }
}

@media (max-width:400px){
  .content-inner{
    padding:
      clamp(48px, 14vw, 76px)
      14px
      0;
  }

  h1{font-size:1.85rem;}
  .amp{font-size:1.7rem;}
}