/*
 * 离谱咖啡 / customer-only art direction
 * A crayon-and-collage layer loaded last so the public experience can feel
 * deliberately unruly without changing any order, payment or API behavior.
 */

:root{
  --wild-ink:#152b25;
  --wild-paper:#fff9e8;
  --wild-acid:#dcff59;
  --wild-orange:#ff5b35;
  --wild-pink:#ffb5ce;
  --wild-blue:#9edcff;
  --wild-yellow:#ffd84d;
  --wild-line:2px solid var(--wild-ink);
  --wild-shadow:5px 6px 0 var(--wild-ink);
}

body{
  background:
    radial-gradient(circle at 14% 12%,rgba(255,91,53,.9) 0 4px,transparent 5px),
    radial-gradient(circle at 88% 16%,rgba(21,43,37,.78) 0 3px,transparent 4px),
    linear-gradient(135deg,#f4dd72 0 24%,#f1e5b5 24% 50%,#c9eaae 50% 76%,#f1d6e0 76%);
  background-size:54px 54px,70px 70px,100% 100%;
}

.app-shell{
  max-width:1120px;
  background:var(--wild-paper);
  border-inline:var(--wild-line);
  box-shadow:12px 0 0 rgba(21,43,37,.18),-12px 0 0 rgba(21,43,37,.12);
}

.topbar{
  min-height:68px;
  padding:10px 24px;
  border-bottom:var(--wild-line);
  background:
    linear-gradient(92deg,transparent 0 68%,rgba(255,181,206,.58) 68% 76%,transparent 76%),
    var(--wild-yellow);
}

.topbar .brand-logo-frame{
  --club-mark-size:48px;
  border:2px solid var(--wild-ink);
  border-radius:11px 49% 12px 44%;
  box-shadow:3px 3px 0 var(--wild-ink);
  transform:rotate(-3deg);
}
.topbar .brand-logo-frame>img{width:178.6px!important;height:48px!important;min-width:178.6px!important}
.screen-link{
  padding:10px 14px;
  border:2px solid var(--wild-ink);
  border-radius:999px 12px 999px 12px;
  background:var(--wild-paper);
  box-shadow:3px 3px 0 var(--wild-ink);
  color:var(--wild-ink);
  font-weight:900;
  transform:rotate(2deg);
}
.screen-link:hover,.screen-link:focus-visible{background:var(--wild-acid);outline:2px dashed var(--wild-orange);outline-offset:4px}

/* Hero: a poster, a food fight and a clear action in one viewport. */
.hero{
  min-height:660px;
  padding:70px 7% 62px;
  grid-template-columns:minmax(340px,.88fr) minmax(320px,1.12fr);
  border-bottom:var(--wild-line);
  background:
    linear-gradient(90deg,rgba(8,37,30,.96) 0%,rgba(8,42,34,.84) 43%,rgba(8,42,34,.26) 70%,rgba(8,42,34,.08) 100%),
    url('/assets/hero/absurd-coffee-lab-v2.jpg') 59% center/cover no-repeat;
  isolation:isolate;
}
.hero:before{
  content:'';
  display:block;
  position:absolute;
  z-index:0;
  inset:18px;
  width:auto;
  height:auto;
  border:2px dashed rgba(255,249,232,.55);
  border-radius:18px 70px 24px 42px;
  pointer-events:none;
}
.hero:after{
  content:'一杯正常咖啡的反方向 →';
  display:block;
  position:absolute;
  z-index:2;
  right:25px;
  top:auto;
  bottom:28px;
  width:auto;
  height:auto;
  padding:7px 10px;
  border:2px solid var(--wild-ink);
  border-radius:3px;
  background:var(--wild-blue);
  color:var(--wild-ink);
  font:900 11px/1 var(--sans);
  transform:rotate(-2deg);
}
.hero .hero-copy{max-width:480px}
.hero .eyebrow{
  margin:0 0 21px;
  padding:8px 12px;
  border:1px solid rgba(255,249,232,.68);
  border-radius:0;
  background:rgba(21,43,37,.62);
  box-shadow:4px 4px 0 var(--wild-orange);
  transform:rotate(-1deg);
}
.pulse{border-radius:1px;background:var(--wild-acid);transform:rotate(18deg)}
.hero h1{
  max-width:470px;
  margin:0 0 20px;
  font-size:clamp(58px,6.1vw,82px);
  line-height:.98;
  letter-spacing:-.1em;
  text-wrap:balance;
  text-shadow:3px 3px 0 rgba(0,0,0,.2);
}
.hero h1 strong{
  display:inline-block;
  padding:0 .08em .08em;
  background:linear-gradient(transparent 58%,var(--wild-orange) 58% 91%,transparent 91%);
  color:var(--wild-acid);
  transform:rotate(-2deg);
}
.hero p{max-width:390px;font-size:15px;line-height:1.72;opacity:1}
.hero .hero-cta-wrap{
  display:flex;
  position:relative;
  flex-direction:column;
  align-items:flex-start;
  gap:11px;
  width:min(390px,100%);
  margin-top:26px;
}
.hero .cta-arrow{
  display:inline-flex!important;
  position:static;
  align-items:center;
  width:auto;
  height:auto;
  min-height:0;
  padding:7px 11px;
  border:2px solid var(--wild-ink);
  border-radius:2px;
  background:var(--wild-pink);
  box-shadow:3px 3px 0 var(--wild-ink);
  clip-path:none;
  color:var(--wild-ink);
  font:900 12px/1 var(--sans);
  transform:rotate(-4deg);
  animation:wild-note-wiggle 2.4s steps(2,end) infinite;
}
.hero .cta-arrow:after{display:none}
.hero .hero-cta{
  width:min(365px,100%);
  min-height:64px;
  padding:17px 22px;
  border:var(--wild-line);
  border-radius:4px 20px 5px 20px;
  background:var(--wild-acid);
  box-shadow:7px 8px 0 var(--wild-ink);
  font-size:18px;
  animation:wild-cta 2.8s ease-in-out infinite;
}
.hero .hero-cta:before,.hero .hero-cta:after{display:none}
.hero .hero-cta:hover,.hero .hero-cta:focus-visible{transform:translate(-3px,-3px) rotate(-1deg);outline:3px dashed var(--wild-pink);outline-offset:5px}
.hero .hero-footnote{display:block;margin:22px 0 0!important;font-size:9px!important;opacity:.72!important}
.store-price{display:inline-block;margin:14px 0 0!important;padding:6px 9px;border:1px dashed var(--wild-acid);color:var(--wild-acid)!important;transform:rotate(1deg)}
.hero-brand-ghost{display:none}

.hero-collage{position:absolute;z-index:2;inset:35px 3% 55px 54%;pointer-events:none}
.wild-note{position:absolute;right:0;top:18%;padding:12px 13px;border:var(--wild-line);border-radius:50%;background:var(--wild-yellow);box-shadow:4px 5px 0 var(--wild-ink);color:var(--wild-ink);font:900 15px/1.13 var(--serif);text-align:center;transform:rotate(9deg)}
.wild-scribble{position:absolute;right:11%;top:35%;color:var(--wild-acid);font:900 88px/1 var(--serif);transform:rotate(28deg)}

/* Maker: like a messy recipe notebook, but with adult-size tap targets. */
.creator{
  position:relative;
  padding:50px 6% 46px;
  border-bottom:var(--wild-line);
  background:
    linear-gradient(rgba(21,43,37,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(21,43,37,.055) 1px,transparent 1px),
    var(--wild-paper);
  background-size:24px 24px;
}
.creator:before{content:'乱来有理';position:absolute;right:4%;top:25px;color:rgba(255,91,53,.24);font:900 clamp(42px,8vw,84px)/1 var(--serif);transform:rotate(5deg);pointer-events:none}
.brew-lab{grid-template-columns:224px minmax(0,1fr);gap:34px}
.machine-stage{
  top:18px;
  min-height:286px;
  border:var(--wild-line);
  border-radius:45% 45% 18px 18px;
  background:
    radial-gradient(circle at 20% 22%,var(--wild-pink) 0 6px,transparent 7px),
    radial-gradient(circle at 79% 35%,var(--wild-orange) 0 5px,transparent 6px),
    linear-gradient(145deg,#e9ff9c,#bfe5bc);
  box-shadow:var(--wild-shadow);
  transform:rotate(-1deg);
}
.machine-status{border:1px solid var(--wild-ink);background:var(--wild-yellow);color:var(--wild-ink);font-weight:700;transform:rotate(1deg)}
.coffee-machine{filter:drop-shadow(7px 8px 0 rgba(21,43,37,.25))}
.section-kicker{display:inline-block;padding:5px 7px;background:var(--wild-blue);color:var(--wild-ink)!important;font-weight:700;transform:rotate(-1deg)}
.ingredient-heading h2,.source-module h2,.emotion-stage h2{color:var(--wild-ink);font-weight:900}
.ingredient-heading h2{font-size:34px}
.selection-counter{border:1px solid var(--wild-ink);border-radius:2px;background:var(--wild-yellow);color:var(--wild-ink);box-shadow:2px 2px 0 var(--wild-ink)}
.ingredient-grid{gap:14px}
.ingredient-card{
  min-height:0;
  aspect-ratio:1/1;
  padding:12px;
  border:var(--wild-line);
  border-radius:4px 19px 6px 17px;
  box-shadow:4px 5px 0 var(--wild-ink);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.ingredient-card:nth-child(3n+1){transform:rotate(-1.2deg)}
.ingredient-card:nth-child(3n+2){transform:rotate(1.4deg)}
.ingredient-card:nth-child(3n){transform:rotate(-.5deg)}
.ingredient-card:has(img):before{background:linear-gradient(180deg,rgba(5,22,17,.02) 22%,rgba(5,22,17,.09) 45%,rgba(5,22,17,.85) 100%)}
.ingredient-card img{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center!important;transform:scale(1.02)!important}
.ingredient-card b{margin-top:auto;font-size:23px;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.ingredient-card small{font-size:10px}
.ingredient-card .ingredient-index{display:inline-block;width:max-content;padding:3px 5px;background:var(--wild-paper);color:var(--wild-ink);opacity:1;text-shadow:none}
.ingredient-card:hover,.ingredient-card:focus-visible{z-index:3;transform:translate(-3px,-3px) rotate(0);box-shadow:8px 9px 0 var(--wild-orange);outline:3px dashed var(--wild-blue);outline-offset:3px}
.ingredient-card.is-active:has(img){border:3px solid var(--wild-acid);box-shadow:7px 8px 0 var(--wild-orange)}
.ingredient-card.is-active:after{content:'已投！';width:auto;height:auto;padding:5px 7px;border:1px solid var(--wild-ink);border-radius:2px;background:var(--wild-acid);color:var(--wild-ink);font:900 9px/1 var(--sans);box-shadow:2px 2px 0 var(--wild-ink)}
.ingredient-card:disabled{opacity:.5;filter:grayscale(.65)}
.creator-scroll-content .ingredient-tip{border:1px dashed var(--wild-ink);border-radius:2px;background:#ecf7bf;transform:rotate(.3deg)}
.source-module{position:relative;border-top:2px dashed rgba(21,43,37,.38)!important}
.source-chip{border:1.5px solid var(--wild-ink);border-radius:6px 16px 5px 14px;background:var(--wild-paper);font-weight:900}
.source-chip:nth-child(even){transform:rotate(1deg)}
.source-chip.is-active{border-color:var(--wild-ink);background:var(--wild-orange);box-shadow:3px 3px 0 var(--wild-ink);transform:translate(-2px,-2px) rotate(-1deg)}
.prompt-field{padding:12px 13px;border:var(--wild-line);background:#fff;box-shadow:4px 4px 0 var(--wild-ink);transform:rotate(-.4deg)}
.prompt-field input{min-width:0}
.mood-card{border:1.5px solid var(--wild-ink);border-radius:50% 9px 50% 11px;background:#fff;box-shadow:3px 3px 0 var(--wild-ink)}
.mood-card:nth-child(3n+1){background:#fff0b7}.mood-card:nth-child(3n+2){background:#ffdce8}.mood-card:nth-child(3n){background:#d9f1ff}
.mood-card.is-active{border-color:var(--wild-ink);background:var(--wild-acid);box-shadow:5px 5px 0 var(--wild-orange);transform:translate(-2px,-2px) rotate(-1deg)}
.full-button{
  min-height:66px;
  border:var(--wild-line);
  border-radius:5px 23px 5px 23px;
  background:var(--wild-orange);
  color:#fff;
  box-shadow:7px 8px 0 var(--wild-ink);
  font-size:18px;
}
.full-button:hover,.full-button:focus-visible{transform:translate(-3px,-3px) rotate(-.5deg);outline:3px dashed var(--wild-blue);outline-offset:4px}

/* Reveal: a collectible recipe card, not a generic confirmation pane. */
.reveal{
  position:relative;
  min-height:0;
  padding:48px 7% 54px;
  border-bottom:var(--wild-line);
  background:
    radial-gradient(circle at 16% 20%,rgba(220,255,89,.18) 0 4px,transparent 5px),
    radial-gradient(circle at 80% 32%,rgba(255,181,206,.18) 0 5px,transparent 6px),
    var(--wild-ink);
  background-size:48px 48px,63px 63px,auto;
}
.reveal:before{content:'AI 乱炖完毕';position:absolute;right:5%;top:22px;padding:7px 10px;border:2px solid var(--wild-ink);background:var(--wild-yellow);color:var(--wild-ink);font:900 12px/1 var(--sans);box-shadow:3px 3px 0 var(--wild-orange);transform:rotate(5deg)}
.ai-reading{width:max-content;max-width:100%;border:1px solid var(--wild-acid);border-radius:2px;background:transparent;color:var(--wild-acid)}
.recipe-card{
  position:relative;
  width:min(600px,100%);
  margin:23px auto 20px;
  padding:18px;
  border:var(--wild-line);
  border-radius:5px 28px 7px 24px;
  background:var(--wild-paper);
  box-shadow:10px 12px 0 var(--wild-orange);
  transform:rotate(-.7deg);
}
.recipe-card:before{content:'可饮用怪东西';position:absolute;z-index:3;right:-18px;top:34px;padding:8px 10px;border:var(--wild-line);background:var(--wild-pink);color:var(--wild-ink);font:900 11px/1 var(--sans);transform:rotate(7deg)}
.recipe-mix-card{height:280px;border:var(--wild-line);border-radius:3px 18px 4px 16px;box-shadow:4px 4px 0 var(--wild-ink)}
.recipe-label{display:inline-block;padding:4px 6px;background:var(--wild-blue);color:var(--wild-ink)!important;font-weight:800;transform:rotate(-1deg)}
.recipe-card h2{font-size:38px!important;font-weight:900!important}
.recipe-copy{border-left:5px solid var(--wild-orange);background:#fff1c7;padding:12px 14px}
.recipe-chips span{border:1px solid var(--wild-ink);background:var(--wild-acid)}
.name-box{border:1px dashed var(--wild-acid);border-radius:4px;background:rgba(255,255,255,.08)}
.name-box input{border:var(--wild-line);box-shadow:3px 3px 0 var(--wild-orange)}
.ghost-button,.button-pair .primary-button{border:var(--wild-line);border-radius:4px 15px 4px 15px;box-shadow:4px 5px 0 #081a15}

/* Pickup: turn the code into a loud paper ticket. */
.success{
  position:relative;
  min-height:0;
  padding:54px 7% 50px;
  border-bottom:var(--wild-line);
  background:
    linear-gradient(115deg,transparent 0 70%,rgba(158,220,255,.52) 70% 86%,transparent 86%),
    var(--wild-yellow);
}
.success:before{content:'拿好！别拿错！';position:absolute;right:7%;top:28px;padding:6px 9px;border:var(--wild-line);background:var(--wild-pink);font:900 11px/1 var(--sans);box-shadow:3px 3px 0 var(--wild-ink);transform:rotate(5deg)}
.success h2#success-title{color:var(--wild-ink);font-weight:900}
.success-star{color:var(--wild-orange);transform:rotate(13deg)}
.status-work-card{border:var(--wild-line);border-radius:4px;background:var(--wild-paper);box-shadow:4px 5px 0 var(--wild-ink);transform:rotate(-.5deg)}
.pickup-card{
  position:relative;
  width:min(520px,100%);
  margin:18px 0;
  padding:23px;
  border:3px solid var(--wild-ink);
  border-radius:7px;
  background:var(--wild-paper);
  box-shadow:8px 9px 0 var(--wild-orange);
  text-align:center;
}
.pickup-card:before,.pickup-card:after{content:'';position:absolute;top:50%;width:20px;height:20px;border:2px solid var(--wild-ink);border-radius:50%;background:var(--wild-yellow);transform:translateY(-50%)}
.pickup-card:before{left:-13px}.pickup-card:after{right:-13px}
.pickup-card b{font-size:54px;letter-spacing:.08em}
.payment-card{border:var(--wild-line);border-radius:5px 18px 5px 18px;background:#edf7c6;box-shadow:5px 6px 0 var(--wild-ink)}
.payment-card img{border:2px solid var(--wild-ink);border-radius:4px}
.success .primary-button,.pickup-screen-cta{border:var(--wild-line);border-radius:5px 17px 5px 17px;box-shadow:4px 5px 0 var(--wild-ink)}

/* Network + recoverable order receipt. Keep failures visible without replacing
   the last known pickup state, especially after returning from WeChat. */
.network-status{position:fixed;z-index:90;left:50%;top:14px;width:min(560px,calc(100vw - 28px));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border:2px solid var(--wild-ink);border-radius:5px 15px 5px 15px;background:#fff4bd;color:var(--wild-ink);box-shadow:5px 6px 0 rgba(21,43,37,.82);transform:translateX(-50%)}
.network-status[hidden]{display:none!important}.network-status[data-kind="success"]{background:var(--wild-acid)}.network-status[data-kind="error"]{background:#ffd2c6}
.network-status-dot{width:10px;height:10px;border:2px solid var(--wild-ink);border-radius:50%;background:var(--wild-orange);box-shadow:0 0 0 3px rgba(255,91,53,.18)}
.network-status[data-kind="success"] .network-status-dot{background:#64b56a}.network-status p{margin:0;font:800 12px/1.45 var(--sans)}
.network-status button,.order-sync-state button{min-height:34px;padding:7px 10px;border:1.5px solid var(--wild-ink);border-radius:3px 9px 3px 9px;background:var(--wild-paper);color:var(--wild-ink);font:900 11px/1 var(--sans);box-shadow:2px 2px 0 var(--wild-ink)}
.network-status button[hidden],.order-sync-state button[hidden]{display:none!important}
.submit-error{min-height:19px;margin:12px 0 0;color:var(--wild-acid);font:800 11px/1.5 var(--sans)}
.order-sync-state{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin:15px 0 8px;padding:10px 11px;border:1.5px dashed rgba(21,43,37,.42);border-radius:4px 13px 4px 13px;background:rgba(255,253,240,.64);color:var(--wild-ink);text-align:left}
.order-sync-state.is-error{border-style:solid;border-color:#b64d35;background:#ffe2d8}.order-sync-dot{width:9px;height:9px;border-radius:50%;background:#64b56a}.order-sync-state.is-error .order-sync-dot{background:var(--wild-orange)}
.order-sync-state p{margin:0!important;font:800 11px/1.4 var(--sans)!important}.order-storage-note{margin:0 auto 13px!important;max-width:520px;color:#566b61;font:700 10px/1.55 var(--sans)!important}.order-storage-note.is-warning{color:#a43c28}
.clear-local-order{display:block;margin:16px auto 0;padding:7px 4px;border:0;border-bottom:1px dashed rgba(21,43,37,.55);background:transparent;color:#50655b;font:700 10px/1.3 var(--sans);cursor:pointer}.clear-local-order:hover,.clear-local-order:focus-visible{color:#a43c28;outline:0;border-bottom-color:#a43c28}

/* Leaderboard: horizontal zine cards, each one slightly misprinted. */
.leaderboard{
  position:relative;
  padding:50px 6% 54px;
  background:
    radial-gradient(circle at 14px 14px,rgba(21,43,37,.1) 0 2px,transparent 2.5px),
    #ffd9e6;
  background-size:28px 28px;
}
.leaderboard:before{content:'好喝就夸，难喝就砸';position:absolute;right:5%;top:22px;padding:7px 10px;border:var(--wild-line);background:var(--wild-acid);box-shadow:3px 3px 0 var(--wild-ink);font:900 11px/1 var(--sans);transform:rotate(3deg)}
.board-heading h2{font-size:38px;font-weight:900;color:var(--wild-ink)}
.live-dot{border:var(--wild-line);border-radius:3px;background:var(--wild-orange);color:#fff;box-shadow:2px 2px 0 var(--wild-ink);transform:rotate(4deg)}
.vote-guide{border:var(--wild-line);border-radius:4px;background:var(--wild-paper);box-shadow:4px 4px 0 var(--wild-ink)}
.rank-card{
  flex-basis:370px;
  border:var(--wild-line);
  border-radius:5px 20px 6px 18px;
  box-shadow:6px 7px 0 var(--wild-ink);
  transform:rotate(-.6deg);
}
.rank-card:nth-child(even){transform:rotate(.7deg)}
.rank-media{height:180px;border-bottom:var(--wild-line)}
.rank-media .rank-number{border:1px solid var(--wild-ink);border-radius:2px;background:var(--wild-yellow);color:var(--wild-ink);box-shadow:2px 2px 0 var(--wild-ink)}
.rank-main>b{font-size:24px;font-weight:900}
.vote-button{border:1.5px solid var(--wild-ink);border-radius:4px 12px 4px 12px;box-shadow:2px 3px 0 var(--wild-ink)}
.vote-button.like{background:#e8f8a7}.vote-button.egg{background:#ffd5c7}
.same-order-button{border:1.5px solid var(--wild-ink);border-radius:4px 12px 4px 12px;background:var(--wild-blue);box-shadow:2px 3px 0 var(--wild-ink)}

/* Public creator identity: transparent about what appears on the live board. */
.customer-name-box>label,.same-order-panel>label{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-weight:900}
.customer-name-box>label em,.same-order-panel>label em{padding:4px 6px;border:1px solid var(--wild-ink);background:var(--wild-pink);color:var(--wild-ink);font:900 9px/1 var(--sans);font-style:normal;transform:rotate(-1deg)}
.customer-name-box #customer-name-privacy{color:rgba(255,255,255,.78);font-size:11px}
.customer-name-preview{color:var(--wild-acid);font-weight:800}
.avatar-picker{display:grid;grid-template-columns:82px minmax(0,1fr);gap:13px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.28)}
.avatar-preview{position:relative;display:grid;place-items:center;width:78px;height:78px;overflow:hidden;border:2px solid var(--wild-ink);border-radius:16px 42% 14px 45%;background:var(--wild-acid);box-shadow:4px 4px 0 var(--wild-orange);transform:rotate(-2deg)}
.avatar-preview img{display:block;width:100%;height:100%;object-fit:cover}
.avatar-picker-copy{min-width:0}.avatar-picker-copy>strong{display:flex;align-items:center;gap:6px;color:var(--wild-paper);font:900 14px/1.2 var(--sans)}
.avatar-picker-copy>strong small{padding:3px 5px;border:1px solid rgba(255,255,255,.45);font:700 9px/1 var(--sans)}
.avatar-picker-copy>p{margin:5px 0 0!important;color:rgba(255,255,255,.68);font-size:10px!important;line-height:1.45!important}
.avatar-picker-actions{display:flex;gap:7px;margin-top:8px}
.avatar-upload-button,.avatar-remove-button{display:inline-flex;align-items:center;justify-content:center;min-height:35px;padding:7px 10px;border:1.5px solid var(--wild-ink);border-radius:3px 10px 3px 10px;background:var(--wild-acid);box-shadow:2px 2px 0 var(--wild-ink);color:var(--wild-ink);font:900 11px/1 var(--sans);cursor:pointer}
.avatar-upload-button[aria-busy="true"]{opacity:.68}.avatar-upload-button[aria-disabled="true"]{opacity:.45;pointer-events:none}.avatar-remove-button{background:var(--wild-paper)}
.avatar-upload-button:focus-visible,.avatar-remove-button:focus-visible{outline:3px dashed var(--wild-orange);outline-offset:3px}
.avatar-remove-button[hidden]{display:none}.avatar-remove-button:disabled{opacity:.45;cursor:not-allowed}
.avatar-file-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.avatar-error{min-height:15px;color:var(--wild-acid)!important;font-weight:700}

.rank-main>.rank-work-name{display:block;margin:0 0 10px;font-size:clamp(24px,2.5vw,30px);line-height:1.08;letter-spacing:-.055em;color:var(--wild-ink)}
.rank-creator{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px;border:1px dashed rgba(21,43,37,.3);background:#fff4bd}
.rank-creator-avatar{position:relative;display:grid;place-items:center;width:46px;height:46px;overflow:hidden;border:1.5px solid var(--wild-ink);border-radius:12px 45% 10px 45%;background:var(--wild-acid);color:var(--wild-ink);font:900 16px/1 var(--serif);transform:rotate(-2deg)}
.rank-creator-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rank-creator-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.rank-creator-copy small{color:#68786f;font:700 8px/1 var(--mono);letter-spacing:.06em}.rank-creator-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wild-ink);font:900 14px/1.2 var(--sans)}
.rank-creator>em{color:#6b796f;font:700 8px/1 var(--mono);font-style:normal}

body.same-order-open{overflow:hidden}
.same-order-dialog{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:18px;background:rgba(5,23,18,.78);backdrop-filter:blur(7px)}
.same-order-dialog[hidden]{display:none!important}
.same-order-panel{position:relative;width:min(500px,100%);max-height:calc(100dvh - 36px);overflow:auto;padding:27px 25px 24px;border:3px solid var(--wild-ink);border-radius:8px 30px 8px 25px;background:var(--wild-paper);box-shadow:10px 12px 0 var(--wild-orange)}
.same-order-close{position:absolute;right:12px;top:11px;width:38px;height:38px;border:2px solid var(--wild-ink);border-radius:50%;background:var(--wild-pink);color:var(--wild-ink);font:900 24px/1 var(--sans)}
.same-order-kicker{display:inline-block;margin:0 0 7px;padding:5px 7px;background:var(--wild-blue);font:800 9px/1 var(--mono);transform:rotate(-1deg)}
.same-order-panel h2{margin:3px 46px 2px 0;color:var(--wild-ink);font:900 36px/1.08 var(--serif);letter-spacing:-.07em}
.same-order-coffee{margin:0 0 19px;color:var(--wild-orange);font:900 17px/1.35 var(--serif)}
.same-order-panel>label{color:var(--wild-ink);font-size:13px}.same-order-panel>input{width:100%;min-height:48px;margin-top:8px;padding:10px 12px;border:2px solid var(--wild-ink);border-radius:4px 13px 4px 13px;background:#fff;color:var(--wild-ink);box-shadow:3px 3px 0 var(--wild-blue);font:800 14px/1 var(--sans);outline:0}
.same-order-panel>input:focus{outline:3px dashed var(--wild-orange);outline-offset:3px}.same-order-panel>input[aria-invalid="true"]{box-shadow:3px 3px 0 var(--wild-orange)}
.same-order-privacy{margin:8px 0 0;color:#5d7066;font-size:10px;line-height:1.45}
.same-order-panel>.input-error{color:#b63e24}.same-order-panel .avatar-picker{border-top-color:rgba(21,43,37,.2)}
.same-order-panel .avatar-picker-copy>strong{color:var(--wild-ink)}.same-order-panel .avatar-picker-copy>strong small{border-color:rgba(21,43,37,.3)}.same-order-panel .avatar-picker-copy>p{color:#617269}
.same-order-panel .avatar-error{color:#a83d28!important}.same-order-submit-error{min-height:18px;margin:7px 0 0;color:#a83d28;font-size:11px;font-weight:800}
.same-order-actions{display:grid;grid-template-columns:.8fr 1.4fr;gap:9px;margin-top:10px}.same-order-actions button{min-height:52px;border:2px solid var(--wild-ink);border-radius:4px 15px 4px 15px;box-shadow:4px 4px 0 var(--wild-ink)}
.same-order-actions .ghost-button{border-color:var(--wild-ink);background:#fffdf0;color:var(--wild-ink)}
.same-order-actions button:disabled,.same-order-close:disabled{opacity:.5;cursor:wait}
.same-order-dialog[aria-busy="true"] .same-order-panel{cursor:progress}

.co-branding{border-top:var(--wild-line);background:var(--wild-paper)}
footer{border-top:var(--wild-line)!important;background:var(--wild-ink)!important;color:var(--wild-paper)!important}

@keyframes wild-note-wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(1deg)}}
@keyframes wild-cta{0%,100%{box-shadow:7px 8px 0 var(--wild-ink)}50%{box-shadow:9px 10px 0 var(--wild-ink);transform:translate(-1px,-1px)}}

@media(max-width:700px){
  .app-shell{border-inline:0;box-shadow:none}
  .topbar{min-height:62px;padding:8px 15px}
  .topbar .brand-logo-frame{--club-mark-size:44px}
  .topbar .brand-logo-frame>img{width:163.75px!important;height:44px!important;min-width:163.75px!important}
  .screen-link{padding:9px 11px;font-size:10px}

  .hero{
    min-height:735px;
    display:block;
    padding:42px 20px 88px;
    background:
      linear-gradient(180deg,rgba(8,37,30,.97) 0%,rgba(8,42,34,.87) 50%,rgba(8,42,34,.38) 72%,rgba(8,42,34,.08) 100%),
      url('/assets/hero/absurd-coffee-lab-v2.jpg') 54% center/cover no-repeat;
  }
  .hero:before{inset:12px;border-radius:16px 43px 18px 34px}
  .hero:after{right:16px;bottom:14px;font-size:9px}
  .hero .hero-copy{max-width:none}
  .hero .eyebrow{margin-bottom:19px;font-size:9px}
  .hero h1{max-width:340px;margin-bottom:17px;font-size:clamp(49px,14vw,60px);line-height:1.01}
  .hero p{max-width:335px;font-size:14px;line-height:1.58}
  .hero .hero-cta-wrap{width:100%;margin-top:21px;gap:10px}
  .hero .hero-cta{width:100%;min-height:61px;font-size:17px}
  .hero .hero-footnote{display:none}
  .store-price{margin-top:15px!important}
  .hero-collage{inset:auto 18px 34px 18px;height:160px}
  .wild-note{right:1%;top:91px;padding:8px;font-size:10px}
  .wild-scribble{left:auto;right:8%;top:37px;font-size:50px}

  .creator{padding:28px 18px 34px}
  .creator:before{right:10px;top:15px;font-size:41px}
  .brew-lab{display:block;padding:0}
  .machine-stage{position:sticky;top:6px;min-height:146px;height:146px;margin:0 -3px 20px;border-radius:40% 40% 14px 14px;box-shadow:4px 5px 0 var(--wild-ink);transform:none}
  .machine-stage .coffee-machine{transform:scale(.55);transform-origin:bottom}
  .machine-stage .machine-status{top:7px;font-size:9px}
  .ingredient-heading{display:block;margin-bottom:13px}
  .ingredient-heading h2{max-width:280px;margin:7px 0 4px;font-size:26px;white-space:normal}
  .ingredient-heading p{padding-right:82px;font-size:12px}
  .selection-counter{bottom:0}
  .ingredient-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .ingredient-card{width:auto!important;min-width:0!important;min-height:0!important;aspect-ratio:1/1!important;padding:10px;border-radius:4px 17px 5px 15px}
  .ingredient-card:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:2/1!important}
  .ingredient-card b{margin-top:auto;font-size:21px}
  .ingredient-card small{font-size:10px}
  .creator-scroll-content .ingredient-tip{padding:9px 10px;font-size:11px}
  .creator-scroll-content .source-module{margin-top:26px;padding-top:20px}
  .creator-scroll-content .source-module h2,.emotion-stage h2{font-size:23px}
  .source-row{grid-template-columns:repeat(2,1fr);gap:9px}
  .source-chip{min-height:46px;font-size:13px}
  .prompt-field{margin:13px 0 17px;padding:11px 9px}
  .prompt-field input{font-size:13px}
  .mood-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mood-card{min-height:58px;padding:8px 9px;align-items:flex-start;text-align:left}
  .mood-card span{font-size:13px}.mood-card b{font-size:10px}
  .full-button{min-height:61px;margin-top:20px;font-size:17px}

  .reveal{padding:38px 18px 43px}
  .reveal:before{right:14px;top:14px;font-size:9px}
  .ai-reading{font-size:9px}
  .recipe-card{margin-top:22px;padding:12px;box-shadow:7px 8px 0 var(--wild-orange)}
  .recipe-card:before{right:-5px;top:35px;font-size:9px}
  .recipe-mix-card{height:220px}
  .recipe-card h2{font-size:32px!important}
  .button-pair{display:grid;grid-template-columns:1fr 1.45fr}

  .success{padding:45px 18px 42px}
  .success:before{right:14px;top:14px;font-size:9px}
  .success h2#success-title{font-size:40px}
  .pickup-card{padding:18px 14px;box-shadow:6px 7px 0 var(--wild-orange)}
  .pickup-card b{font-size:44px}
  .payment-card{align-items:flex-start;box-shadow:4px 5px 0 var(--wild-ink)}
  .network-status{top:9px;grid-template-columns:auto minmax(0,1fr);padding:10px}.network-status button{grid-column:2;justify-self:start}.order-sync-state{grid-template-columns:auto minmax(0,1fr)}.order-sync-state button{grid-column:2;justify-self:start}

  .leaderboard{padding:42px 18px 45px}
  .leaderboard:before{right:13px;top:15px;font-size:9px}
  .board-heading{padding-top:14px}
  .board-heading h2{font-size:32px}
  .leaderboard-list{gap:16px}
  .rank-card{flex-basis:86vw;box-shadow:5px 6px 0 var(--wild-ink)}
  .rank-media{height:165px}
  .rank-main>.rank-work-name{font-size:25px}.rank-creator{grid-template-columns:44px minmax(0,1fr) auto}.rank-creator-avatar{width:44px;height:44px}
  .avatar-picker{grid-template-columns:72px minmax(0,1fr);gap:11px}.avatar-preview{width:68px;height:68px}.avatar-picker-copy>p{font-size:9px!important}
  .same-order-dialog{padding:12px}.same-order-panel{max-height:calc(100dvh - 24px);padding:24px 18px 19px;border-radius:6px 24px 6px 20px;box-shadow:7px 8px 0 var(--wild-orange)}
  .same-order-panel h2{font-size:31px}.same-order-coffee{margin-bottom:15px;font-size:15px}.same-order-panel .avatar-picker{margin-top:10px;padding-top:10px}.same-order-actions{position:sticky;bottom:-19px;margin-inline:-18px;margin-bottom:-19px;padding:12px 18px 19px;background:linear-gradient(transparent,var(--wild-paper) 24%)}
}

@media(max-width:380px){
  .hero{padding-inline:16px}
  .hero h1{font-size:47px}
  .ingredient-grid{gap:10px!important}
  .ingredient-card b{font-size:19px}
  .payment-card{display:grid;grid-template-columns:92px 1fr}.payment-card img{width:92px;height:92px}
}

@media(prefers-reduced-motion:reduce){
  .hero .cta-arrow,.hero .hero-cta{animation:none!important}
  .ingredient-card,.source-chip,.mood-card,.recipe-card,.rank-card{transform:none!important}
}