/* Coupons (/coupons, routes/coupons.rs): the ticket, sharing, shop cards and the staff panel. Mobile first;
   tokens from ganesh.css. */
.cp-page{ padding-top:clamp(16px,4vw,32px); }
.cp-wrap{ max-width:560px; margin:0 auto; display:grid; gap:18px; }
.cp-h2{ font:var(--type-h3); color:var(--text-heading); text-align:center; }

/* ---------- party header (the owner's Birthday Free Drink ads, Claude Design v2) ---------- */
.cp-hero{ position:relative; overflow:hidden; min-height:300px; padding:58px 16px 22px; border-radius:24px; background:radial-gradient(120% 90% at 75% 40%,#FFF8EC 0%,#FFF1D6 55%,var(--ganesh-yellow-100) 100%); box-shadow:var(--shadow-md); }
.cp-flags{ position:absolute; left:-6%; right:-6%; top:-2px; height:44px; display:flex; justify-content:space-around; border-top:2px solid var(--ganesh-brown-500); transform:rotate(2.5deg); transform-origin:top center; }
.cp-flags span{ width:22px; height:28px; clip-path:polygon(0 0,100% 0,50% 100%); background:var(--ganesh-orange-500); }
.cp-flags span:nth-child(4n+2){ background:var(--ganesh-green-500); }
.cp-flags span:nth-child(4n+3){ background:#FFB23E; }
.cp-flags span:nth-child(4n){ background:var(--ganesh-orange-700); }
.cp-dots{ position:absolute; border-radius:50%; pointer-events:none; }
.cp-dots--a{ left:-56px; bottom:-56px; width:150px; height:150px; border:4px dotted var(--ganesh-orange-300); }
.cp-dots--b{ right:-46px; bottom:-46px; width:120px; height:120px; border:4px dotted var(--ganesh-green-300); }
.cp-hero__art{ position:absolute; right:-14%; top:34px; width:68%; aspect-ratio:1; pointer-events:none; }
.cp-hero__rays{ position:absolute; inset:-12%; border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(255,178,62,.55) 0deg 6deg,rgba(255,178,62,0) 6deg 15deg); -webkit-mask:radial-gradient(circle,#000 35%,transparent 70%); mask:radial-gradient(circle,#000 35%,transparent 70%); animation:cp-rays 60s linear infinite; }
@keyframes cp-rays{ to{ transform:rotate(360deg); } }
.cp-hero__glow{ position:absolute; inset:6%; border-radius:50%; background:radial-gradient(circle,rgba(255,178,62,.8) 0%,rgba(255,178,62,.25) 50%,rgba(255,178,62,0) 70%); }
.cp-hero__img{ position:absolute; left:50%; top:50%; width:auto; height:104%; max-width:none; transform:translate(-50%,-50%); filter:drop-shadow(8px 14px 14px rgba(74,36,18,.3)); }
.cp-hero__mark{ position:absolute; inset:20%; width:60%; height:60%; filter:drop-shadow(0 6px 10px rgba(74,36,18,.2)); }
.cp-hero__text{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; max-width:70%; }
.cp-hero__script{ font:400 clamp(26px,8vw,40px)/1.3 'Pacifico',cursive; color:var(--ganesh-green-600); transform:rotate(-6deg); margin-left:4px; }
.cp-hero__name{ font:900 clamp(54px,16vw,92px)/1 'Grandstander',var(--font-latin-display); color:var(--ganesh-orange-600); letter-spacing:-0.02em; white-space:nowrap; transform:rotate(-3deg);
  text-shadow:3px 0 0 #fff,-3px 0 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff,6px 7px 0 var(--ganesh-brown-700); }
.cp-hero__badge{ margin-top:16px; padding:9px 16px; border-radius:var(--radius-pill); background:var(--ganesh-green-600); color:#fff; font:800 clamp(14px,4vw,18px)/1 var(--font-display); transform:rotate(-2deg); box-shadow:0 3px 0 var(--ganesh-green-800); }
@media (prefers-reduced-motion: reduce){ .cp-hero__rays{ animation:none; } }

/* ---------- ticket ---------- */
.cp-ticket{ position:relative; overflow:hidden; display:grid; justify-items:center; gap:8px; padding:22px 20px 24px; text-align:center; border-radius:24px; background:var(--surface-card); border:3px solid var(--ganesh-orange-500); box-shadow:var(--shadow-md); }
.cp-ticket__brand{ display:inline-flex; align-items:center; gap:8px; margin-top:4px; font:var(--weight-bold) var(--text-sm)/1 var(--font-display); color:var(--ganesh-brown-700); }
/* Top of the ticket, as on the ads: the orange stub and the big offer. */
.cp-stubrow{ display:flex; width:calc(100% + 40px); margin:-22px -20px 4px; min-height:128px; text-align:left; }
.cp-stub{ flex:none; width:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px 6px; background:linear-gradient(160deg,var(--ganesh-orange-500),var(--ganesh-orange-700)); color:#fff; border-right:4px dotted var(--ganesh-orange-300); }
.cp-stub__label{ font:800 10px/1 'Grandstander',var(--font-latin-display); letter-spacing:.18em; }
.cp-stub__coupon{ font:900 21px/1 'Grandstander',var(--font-latin-display); text-shadow:2px 2px 0 var(--ganesh-orange-900); }
.cp-stub__date{ padding:5px 9px; border-radius:var(--radius-pill); background:#FFB23E; color:var(--ganesh-brown-700); font:900 12px/1 'Grandstander',var(--font-latin-display); white-space:nowrap; }
.cp-main{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:18px 18px 16px; background:radial-gradient(rgba(242,106,33,.13) 2px,transparent 2.5px) 0 0/18px 18px; }
.cp-main::before{ content:""; position:absolute; inset:8px 10px; border:2px solid var(--ganesh-orange-300); border-radius:12px; pointer-events:none; }
.cp-main__big{ position:relative; font:900 clamp(26px,8.4vw,40px)/.95 'Grandstander',var(--font-latin-display); color:var(--ganesh-orange-700); letter-spacing:-0.01em; text-shadow:3px 3px 0 #FFB23E; text-wrap:balance; }
.cp-main__offer{ position:relative; font:700 13px/1.45 var(--font-display); color:var(--ganesh-brown-700); text-wrap:pretty; }
.cp-ticket__brand img{ width:40px; height:auto; }
.cp-ticket__img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:16px; }
.cp-ticket__tear{ position:relative; width:calc(100% + 46px); margin:8px -23px 4px; border-top:3px dashed var(--ganesh-orange-300); }
.cp-ticket__tear::before, .cp-ticket__tear::after{ content:""; position:absolute; top:-15px; width:28px; height:28px; border-radius:50%; background:var(--surface-page); border:3px solid var(--ganesh-orange-500); }
.cp-ticket__tear::before{ left:-14px; }
.cp-ticket__tear::after{ right:-14px; }
.cp-ticket__label{ font:var(--weight-bold) var(--text-xs)/1 var(--font-display); color:var(--text-muted); letter-spacing:.08em; }
.cp-ticket__code{ font:var(--weight-black) clamp(34px,10vw,48px)/1 var(--font-display); letter-spacing:.06em; color:var(--ganesh-green-700); font-variant-numeric:tabular-nums; }
.cp-ticket__valid{ padding:4px 14px; border-radius:var(--radius-pill); background:var(--ganesh-orange-100); color:var(--ganesh-orange-800); font:var(--weight-bold) var(--text-sm)/1.5 var(--font-display); }
.cp-ticket__status{ font:var(--weight-bold) var(--text-base)/1.5 var(--font-display); color:var(--ganesh-green-700); }

/* Live: a shimmer that keeps moving and a ticking clock, so a screenshot is easy to spot. */
.cp-ticket.is-live::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 45%, transparent 60%); transform:translateX(-100%); animation:cp-shimmer 2.8s ease-in-out infinite; pointer-events:none; }
@keyframes cp-shimmer{ to{ transform:translateX(100%); } }
.cp-live{ display:inline-flex; align-items:center; gap:8px; font:var(--weight-bold) var(--text-sm)/1 var(--font-display); color:var(--ganesh-green-700); font-variant-numeric:tabular-nums; }
.cp-live__dot{ width:10px; height:10px; border-radius:50%; background:var(--ganesh-green-500); animation:cp-pulse 1s ease-in-out infinite; }
@keyframes cp-pulse{ 50%{ opacity:.25; transform:scale(.7); } }
@media (prefers-reduced-motion: reduce){ .cp-ticket.is-live::after{ animation-duration:6s; } }

/* Used / expired: greyed out, with a red stamp. */
.cp-ticket.is-used{ border-color:var(--border-strong); background:#F3F0EB; }
.cp-ticket.is-used > :not(.cp-stamp){ opacity:.45; }
.cp-stamp{ position:absolute; top:46%; left:50%; transform:translate(-50%,-50%) rotate(-10deg); padding:8px 16px; border:4px solid #C62828; border-radius:12px; background:rgba(255,255,255,.88); color:#C62828; font:var(--weight-black) clamp(18px,5vw,24px)/1.25 var(--font-display); white-space:nowrap; }
.cp-ticket.is-redeeming{ animation:cp-pop .7s ease; }
@keyframes cp-pop{ 40%{ transform:scale(1.04); } }

.cp-show{ text-align:center; font:var(--weight-bold) var(--text-md)/1.5 var(--font-display); color:var(--text-heading); text-wrap:balance; }

/* ---------- 「発行中」 page ---------- */
.cp-spinner{ width:40px; height:40px; margin:8px 0 2px; border-radius:50%; border:4px solid var(--ganesh-orange-100); border-top-color:var(--ganesh-orange-500); animation:cp-spin .8s linear infinite; }
@keyframes cp-spin{ to{ transform:rotate(360deg); } }
.cp-issue{ display:grid; justify-items:center; }
.cp-issue__btn{ min-width:240px; }
.cp-busy{ padding:12px 16px; border-radius:var(--radius-md); background:var(--ganesh-orange-050); border:2px solid var(--ganesh-orange-300); font:var(--type-small); text-align:center; }
.cp-note{ display:grid; gap:14px; padding:28px 20px; text-align:center; }
.cp-note__title{ font:var(--type-h2); color:var(--text-heading); }

/* ---------- share ---------- */
.cp-share{ display:grid; gap:10px; padding:20px; text-align:center; }
.cp-share p{ font:var(--type-small); }
.cp-share__more{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.cp-chip{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:var(--radius-pill); border:2px solid var(--border-subtle); background:var(--surface-card); color:var(--text-heading); font:var(--weight-bold) var(--text-sm)/1 var(--font-display); text-decoration:none; cursor:pointer; }
.cp-chip[data-channel="line"]{ border-color:#06C755; color:#05A043; }
.cp-share__done{ min-height:1.2em; color:var(--ganesh-green-700); font-weight:var(--weight-bold); }
.cp-tip{ font:var(--type-small); color:var(--text-muted); text-align:center; }

/* ---------- shops, terms, follow ---------- */
.cp-shops{ display:grid; gap:12px; }
.cp-shop{ display:grid; gap:6px; padding:16px; }
.cp-shop__name{ font:var(--weight-bold) var(--text-md)/1.3 var(--font-display); color:var(--text-heading); }
.cp-shop p{ font:var(--type-small); }
.cp-terms{ padding:14px 16px; }
.cp-terms summary{ cursor:pointer; font:var(--weight-bold) var(--text-base)/1.4 var(--font-display); }
.cp-terms__body{ display:grid; gap:6px; margin-top:10px; font:var(--type-small); }
.cp-follow{ justify-content:center; gap:8px; }
.cp-line{ background:#06C755; border-color:#06C755; color:#fff; }

/* ---------- staff panel ---------- */
.cp-staff{ margin-top:20px; text-align:center; }
.cp-staff summary{ display:inline-block; cursor:pointer; font:var(--type-small); color:var(--text-muted); text-decoration:underline; }
.cp-staff__form{ display:grid; gap:12px; margin-top:12px; padding:18px; text-align:left; }
.cp-staff__help{ font:var(--type-small); }
.cp-staff__shops{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.cp-staff__shop{ display:inline-flex; align-items:center; gap:6px; min-height:40px; font-weight:var(--weight-bold); }
.cp-staff__pin{ width:100%; padding:12px; border:2px solid var(--border-subtle); border-radius:var(--radius-md); font:var(--weight-bold) 28px/1 var(--font-display); letter-spacing:.4em; text-align:center; }
.cp-staff__error{ min-height:1.2em; color:var(--ganesh-red-600); font-weight:var(--weight-bold); }