/* goldenticket.run/gen — the printing booth. Rides on style.css; only the booth here. */
.genpage main{background:var(--cream)}
.genhero{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,214,120,.30),transparent 62%),
    repeating-linear-gradient(90deg,#8C0C15 0 26px,#B4121F 26px 52px,#6F080F 52px 78px),
    var(--red-dp);
  padding:clamp(1.8rem,5vw,3rem) 0 clamp(1.6rem,4vw,2.4rem);text-align:center}
.genhero h1{font-family:var(--disp);font-size:clamp(2.1rem,7vw,4.2rem);line-height:.95;margin:.1em 0 .2em}
.genhero .lede{margin-left:auto;margin-right:auto}

.booth{padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(2rem,5vw,3rem)}
.boothgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,1.8rem);align-items:start}
.panel{background:var(--paper);border:3px solid var(--ink);border-radius:14px;overflow:hidden;
  box-shadow:0 12px 0 rgba(169,116,26,.25)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:repeating-linear-gradient(135deg,#FFE7B0 0 12px,#FFDD95 12px 24px);
  border-bottom:3px dashed var(--ink);padding:.65rem 1.1rem;font-family:var(--disp);font-size:1rem}
.panel-head .live{font-family:var(--cond);font-weight:700;letter-spacing:.14em;font-size:.8rem;
  text-transform:uppercase;color:var(--ink-soft)}
.panel-body{padding:1.1rem}

.drop{display:block;border:3px dashed rgba(43,22,8,.35);border-radius:12px;background:#FFF8E8;
  min-height:260px;display:flex;align-items:center;justify-content:center;text-align:center;
  cursor:pointer;overflow:hidden;padding:1rem;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--red);background:#FFF1D6}
.drop img{max-height:360px;width:auto;border-radius:8px}
.drop-empty{display:flex;flex-direction:column;align-items:center;gap:.35rem;color:var(--ink-soft)}
.drop-empty b{font-size:1.05rem;color:var(--ink)}
.drop-empty span{font-size:.9rem;max-width:30ch}
.drop-icon{width:52px;height:52px;border-radius:50%;background:var(--gold);color:#3B2405;
  border:3px solid var(--ink);display:grid;place-items:center;font-size:1.8rem;font-weight:900;
  line-height:1;margin-bottom:.3rem}
.btn.go{width:100%;justify-content:center;margin-top:1rem;font-size:1.15rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 5px 0 var(--gold-dk)}
.note{font-size:.85rem;color:var(--ink-soft);margin:.7rem 0 0;text-align:center}
.err{margin:.8rem 0 0;padding:.7rem .9rem;border-radius:8px;background:#FBE3E3;border:2px solid var(--red);
  color:#7C0A14;font-size:.92rem}

.tray{position:relative;border:3px solid var(--ink);border-radius:12px;background:#2B1608;
  min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tray img#result{width:100%;height:auto;display:block}
.tray-idle{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.4rem;text-align:center}
.tray-idle img{width:130px;opacity:.5}
.tray-idle span{font-family:var(--cond);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#C6A26A;font-size:.85rem}
.printing{position:absolute;inset:0;background:rgba(43,22,8,.92);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:1rem}
.printing .bulbs{width:70%;margin-bottom:.6rem}
.printing b{font-family:var(--disp);color:var(--gold-hi);font-size:1.2rem}
.printing span{font-family:var(--cond);font-weight:700;letter-spacing:.18em;color:#C6A26A;font-size:.9rem}
.outcta{display:flex;gap:.7rem;margin-top:1rem}
.outcta .btn{flex:1;justify-content:center}
.btn.ghost.dark{color:var(--ink);border-color:var(--ink)}
.btn.ghost.dark:hover{background:rgba(43,22,8,.08)}

.wall{background:linear-gradient(180deg,var(--cream),#F6E3BC);padding:clamp(2rem,6vw,3.4rem) 0}
.wall .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;margin-top:1.4rem}
.wall .grid a{display:block;border:3px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--paper);
  box-shadow:0 8px 0 rgba(169,116,26,.25);transition:transform .12s}
.wall .grid a:hover{transform:translateY(-3px)}
.wall .grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}

@media (max-width:820px){
  .boothgrid{grid-template-columns:1fr}
  .drop{min-height:200px}
  .drop img{max-height:280px}
}