* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--black); color:var(--cream); font-family:'DM Mono',monospace; overflow:hidden; }

#back { position:fixed; top:1rem; left:1rem; z-index:100; color:rgba(255,243,208,0.7); text-decoration:none; font-size:1.4rem; padding:0.4rem; }

/* ── Idle screen ── */
#screen-idle {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:1.5rem; padding:2rem; text-align:center;
}
.logo { font-family:Anton,sans-serif; font-size:2.8rem; color:var(--amber-hi); letter-spacing:0.05em; }
.rule { font-size:0.95rem; color:var(--cream); font-style:italic; max-width:280px; line-height:1.5; }
.sub  { font-size:0.78rem; color:rgba(255,243,208,0.45); letter-spacing:0.06em; }
#cam-input { display:none; }
.btn-shoot {
  background:var(--amber); color:var(--black); border:none; border-radius:50%;
  width:96px; height:96px; font-size:2.6rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px rgba(212,146,10,0.25), 0 0 32px rgba(212,146,10,0.15);
  transition:transform 0.12s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.12s;
}
.btn-shoot:active { transform:scale(0.88); box-shadow:0 0 0 2px rgba(212,146,10,0.15); }

#auth-hint {
  font-size:0.72rem; color:rgba(255,243,208,0.45); letter-spacing:0.05em;
  min-height:1.1rem; transition:opacity 0.3s;
}
#auth-hint.logged-in  { color:var(--amber); }
#auth-hint.logged-out { color:rgba(255,243,208,0.4); }

/* ── Stamp picker screen ── */
#screen-stamp { display:none; flex-direction:column; height:100%; }
#stamp-canvas-wrap { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0.5rem; }
#canvas-stamp {
  display:block; max-width:100%; max-height:100%;
  transition:opacity 0.15s ease;
}
#canvas-stamp.fading { opacity:0; }
.stamp-picker-bar {
  background:linear-gradient(to top, rgba(6,4,0,0.99) 0%, rgba(6,4,0,0.94) 100%);
  border-top:1px solid rgba(212,146,10,0.2);
  box-shadow:0 -8px 24px rgba(0,0,0,0.35);
  padding:0.6rem 0.75rem 0.6rem;
}

/* Design segmented switcher */
.design-switch {
  display:flex; gap:0; background:rgba(6,4,0,0.6);
  border:1px solid rgba(212,146,10,0.25); border-radius:10px;
  padding:3px; margin-bottom:0.55rem;
}
.design-btn {
  flex:1; padding:0.5rem 0.4rem; border:none; background:transparent;
  color:rgba(255,243,208,0.55); font-family:Anton,sans-serif;
  font-size:0.82rem; letter-spacing:0.05em; cursor:pointer;
  border-radius:7px; transition:background 0.15s, color 0.15s, transform 0.1s;
}
.design-btn:active { transform:scale(0.97); }
.design-btn.active {
  background:linear-gradient(to bottom, var(--amber-hi), var(--amber));
  color:var(--black);
  box-shadow:0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
}

.stamp-btns {
  display:flex; gap:0.4rem; overflow-x:auto; padding-bottom:0.4rem;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.stamp-btns::-webkit-scrollbar { display:none; }
.stamp-btn {
  flex-shrink:0; padding:0.5rem 0.85rem; border-radius:9999px;
  border:1.5px solid rgba(212,146,10,0.35); background:rgba(212,146,10,0.08);
  color:var(--cream); font-family:'DM Mono',monospace; font-size:0.72rem; font-weight:500;
  cursor:pointer; white-space:nowrap;
  transition:border-color 0.12s, background 0.12s, color 0.12s, transform 0.1s;
}
.stamp-btn:active { transform:scale(0.93); }
.stamp-btn.active {
  border-color:var(--amber-hi);
  background:linear-gradient(to bottom, rgba(245,176,48,0.28), rgba(245,176,48,0.14));
  color:var(--amber-hi);
  box-shadow:0 0 12px rgba(245,176,48,0.22);
}

#custom-text-input {
  width:100%; margin-top:0.55rem; padding:0.7rem 0.9rem;
  background:rgba(6,4,0,0.6); border:1.5px solid rgba(245,176,48,0.4);
  border-radius:10px; color:var(--amber-hi);
  font-family:Anton,sans-serif; font-size:1rem; letter-spacing:0.06em;
  text-transform:uppercase; outline:none;
  transition:border-color 0.15s, background 0.15s;
}
#custom-text-input::placeholder { color:rgba(255,243,208,0.35); letter-spacing:0.04em; }
#custom-text-input:focus { border-color:var(--amber-hi); background:rgba(6,4,0,0.8); }

.btn-weiter {
  width:100%; margin-top:0.6rem; padding:0.95rem; border:none; border-radius:12px;
  background:linear-gradient(to bottom, var(--amber-hi), var(--amber));
  color:var(--black);
  font-family:Anton,sans-serif; font-size:1.2rem; letter-spacing:0.08em; cursor:pointer;
  box-shadow:0 4px 14px rgba(245,176,48,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
  transition:opacity 0.12s, transform 0.12s;
}
.btn-weiter:active { opacity:0.85; transform:scale(0.98); }

/* ── Preview screen ── */
#screen-preview { display:none; flex-direction:column; height:100%; }
#canvas-out { flex:1; display:block; margin:auto; max-width:100%; max-height:calc(100% - 90px); }
.action-bar {
  display:flex; gap:0.5rem; padding:0.9rem 1rem;
  background:rgba(6,4,0,0.97); border-top:1px solid rgba(212,146,10,0.15);
  flex-wrap:wrap;
}
.btn-action {
  flex:1; min-width:calc(50% - 0.25rem); padding:0.9rem 0.4rem; border:none; border-radius:10px;
  font-family:Anton,sans-serif; font-size:0.95rem; letter-spacing:0.04em;
  cursor:pointer; transition:opacity 0.12s, transform 0.1s;
}
.btn-action:active { opacity:0.65; transform:scale(0.97); }
.btn-share    { background:#25D366; color:#fff; }
.btn-upload   { background:var(--amber-hi); color:var(--black); }
.btn-upload:disabled { opacity:0.3; cursor:default; transform:none !important; }
.btn-save     { background:var(--amber); color:var(--black); }
.btn-retake   { background:rgba(255,243,208,0.08); color:var(--cream); border:1px solid rgba(255,243,208,0.15); }

#upload-hint {
  width:100%; text-align:center; font-size:0.68rem;
  color:rgba(255,243,208,0.45); letter-spacing:0.05em;
  margin-top:-0.3rem; min-height:1rem;
}

/* ── Toast ── */
#toast {
  position:fixed; bottom:6rem; left:50%; transform:translateX(-50%) translateY(1rem);
  background:var(--amber-hi); color:var(--black); padding:0.6rem 1.2rem;
  border-radius:9999px; font-family:Anton,sans-serif; font-size:0.9rem;
  opacity:0; transition:opacity 0.25s, transform 0.25s; pointer-events:none; white-space:nowrap;
  z-index:200;
}
#toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Success overlay ── */
#success-overlay {
  position:fixed; inset:0; background:rgba(6,4,0,0.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.2rem; z-index:300; opacity:0; pointer-events:none;
  transition:opacity 0.3s;
}
#success-overlay.visible { opacity:1; pointer-events:auto; }
.success-icon  { font-size:4rem; animation:pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
.success-title {
  font-family:Anton,sans-serif; font-size:2rem; color:var(--amber-hi);
  letter-spacing:0.05em; text-align:center; line-height:1.1;
}
.success-sub   { font-size:0.85rem; color:rgba(255,243,208,0.65); text-align:center; }
@keyframes pop {
  from { transform:scale(0.3); opacity:0; }
  to   { transform:scale(1);   opacity:1; }
}