@font-face{font-family:"Mochiy Local";src:url("fonts/MochiyPopOne-subset.woff") format("woff");font-display:swap}
:root{
  --ink:#000;
  --yellow:#ffd60a;
  --yellow-hi:#fff3a3;
  --orange:#ff8a00;
  --red:#ee2b24;
  --red-dk:#a91c17;
  --cream:#fff6d6;
  --sky:#22b5f0;
  --steel:#cfd6d8;
  --pop:"Mochiy Local","Mochiy Pop One","M PLUS Rounded 1c",sans-serif;
  --display:var(--pop);
  --body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Noto Sans CJK JP",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--yellow)}
body{margin:0;min-height:100svh;color:var(--ink);font-family:var(--body);font-weight:800;background:var(--yellow);overflow-x:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}
button,a{font-family:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* ===== 背景：網点＋集中線 ===== */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(circle,var(--orange) 1.7px,transparent 2px);background-size:11px 11px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,transparent 30%,#000 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,transparent 30%,#000 100%);opacity:.55}
.rays{position:fixed;left:50%;top:56%;width:260vmax;height:260vmax;margin:-130vmax 0 0 -130vmax;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,var(--ink) 0deg 1.1deg,transparent 1.1deg 5deg,var(--ink) 5deg 5.5deg,transparent 5.5deg 10deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 22vmax,#000 60vmax);mask-image:radial-gradient(circle,transparent 0 22vmax,#000 60vmax);
  opacity:.38;animation:rays 60s linear infinite}
body.fast-rays .rays{animation-duration:1.2s;opacity:.75}
body.is-rare{background:#ffc400}
body.is-rare .rays{background:repeating-conic-gradient(from 0deg,#fff 0deg 2deg,transparent 2deg 6deg,#ff8a00 6deg 7deg,transparent 7deg 10deg);opacity:.9}
body.flash::after{content:"";position:fixed;inset:0;z-index:40;background:#fff;pointer-events:none;animation:flash .5s ease-out forwards}

/* ===== ヘッダー：ポップなロゴ ===== */
.masthead{display:flex;flex-direction:column;align-items:center;padding:20px 16px 0}
.logo{margin:0;display:inline-flex;flex-direction:column;align-items:center;font-family:var(--pop);font-weight:400;line-height:1;transform:rotate(-4deg)}
.logo span{display:block;color:#fff;-webkit-text-stroke:.16em var(--ink);paint-order:stroke fill;
  text-shadow:.06em .06em 0 var(--red),.09em .09em 0 var(--red),.12em .12em 0 var(--ink)}
.logo-sm{font-size:clamp(1.6rem,8vw,2.6rem);letter-spacing:.04em}
.logo-lg{font-size:clamp(3.6rem,19vw,6.2rem);margin-top:-.08em;letter-spacing:.02em}
.logo-lg{color:var(--yellow)!important}
.subtitle{display:inline-block;margin:14px 0 0;padding:6px 16px 7px;background:var(--ink);color:#fff;font-family:var(--pop);font-size:.85rem;border-radius:999px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--red)}

/* ===== ステージ ===== */
.app-shell{width:100%;max-width:980px;margin:0 auto}
.machine-view{padding:6px 16px 10px}
.stage{position:relative;max-width:460px;margin:0 auto}

/* 店員＋吹き出し（スマホは自販機の上に横並び） */
.greeter{display:flex;align-items:flex-end;gap:6px;margin:0 0 -6px 4px;position:relative;z-index:3}
.clerk-wrap{flex:0 0 auto;width:76px;transform-origin:bottom center}
.clerk-wrap img{display:block;width:100%;height:auto;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.25))}
.speech{position:relative;margin:0;background:#fff;border:4px solid var(--ink);border-radius:999px;padding:10px 18px;font-family:var(--pop);font-size:.9rem;font-weight:400;line-height:1.35;box-shadow:4px 4px 0 var(--ink)}
.clerk-speech{margin-bottom:34px;max-width:260px}
.clerk-speech::before{content:"";position:absolute;left:-13px;bottom:10px;border:9px solid transparent;border-right:14px solid var(--ink);border-left:0}
.clerk-speech::after{content:"";position:absolute;left:-8px;bottom:12px;border:7px solid transparent;border-right:11px solid #fff;border-left:0}

/* ===== 自販機本体（Canvaのイラストに部品を重ねる。位置は画像1024×1536に対する%） ===== */
.machine-wrap{position:relative;z-index:2}
.machine-wrap::before{content:"";position:absolute;left:-14%;right:-14%;top:-4%;aspect-ratio:1;z-index:-1;background:#fff;clip-path:polygon(50.0% 0.0%,55.6% 7.4%,62.9% 1.7%,66.5% 10.3%,75.0% 6.7%,76.2% 15.9%,85.4% 14.6%,84.1% 23.8%,93.3% 25.0%,89.7% 33.5%,98.3% 37.1%,92.6% 44.4%,100.0% 50.0%,92.6% 55.6%,98.3% 62.9%,89.7% 66.5%,93.3% 75.0%,84.1% 76.2%,85.4% 85.4%,76.2% 84.1%,75.0% 93.3%,66.5% 89.7%,62.9% 98.3%,55.6% 92.6%,50.0% 100.0%,44.4% 92.6%,37.1% 98.3%,33.5% 89.7%,25.0% 93.3%,23.8% 84.1%,14.6% 85.4%,15.9% 76.2%,6.7% 75.0%,10.3% 66.5%,1.7% 62.9%,7.4% 55.6%,0.0% 50.0%,7.4% 44.4%,1.7% 37.1%,10.3% 33.5%,6.7% 25.0%,15.9% 23.8%,14.6% 14.6%,23.8% 15.9%,25.0% 6.7%,33.5% 10.3%,37.1% 1.7%,44.4% 7.4%);opacity:.95}
.burst{position:absolute;z-index:4;right:-12px;top:-58px;width:88px;aspect-ratio:1;transform:rotate(12deg);animation:wobble 2.4s ease-in-out infinite}
.burst::before,.burst::after{content:"";position:absolute;inset:0;clip-path:polygon(50.0% 0.0%,58.0% 14.9%,71.7% 5.0%,72.4% 21.9%,89.1% 18.8%,82.4% 34.4%,98.7% 38.9%,86.0% 50.0%,98.7% 61.1%,82.4% 65.6%,89.1% 81.2%,72.4% 78.1%,71.7% 95.0%,58.0% 85.1%,50.0% 100.0%,42.0% 85.1%,28.3% 95.0%,27.6% 78.1%,10.9% 81.2%,17.6% 65.6%,1.3% 61.1%,14.0% 50.0%,1.3% 38.9%,17.6% 34.4%,10.9% 18.8%,27.6% 21.9%,28.3% 5.0%,42.0% 14.9%)}
.burst::before{background:var(--ink);transform:scale(1.12)}
.burst::after{background:var(--red)}
.burst span{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center;font-family:var(--pop);font-size:.82rem;line-height:1.2;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.machine{position:relative;aspect-ratio:1024/1536;container-type:inline-size;filter:drop-shadow(8px 8px 0 rgba(0,0,0,.85))}
.machine-art{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}

/* 看板 */
.sign{position:absolute;left:14.6%;top:5.3%;width:70.8%;height:10.6%;display:grid;place-items:center}
.sign span{font-family:var(--display);font-size:10.6cqw;line-height:1;letter-spacing:.04em;color:var(--red);-webkit-text-stroke:.6cqw var(--ink);paint-order:stroke fill;text-shadow:.9cqw .9cqw 0 var(--ink)}

/* ショーケースの缶（押せる） */
.slot{position:absolute;top:var(--y);left:calc(var(--x) - 7.6%);width:15.2%;height:15.6%;border:0;padding:0;background:none;cursor:pointer;border-radius:10px}
.slot::before{content:"";position:absolute;left:22%;right:22%;top:3%;height:6%;border-radius:50%;background:transparent;transition:background .1s,box-shadow .1s}
.slot::after{content:"";position:absolute;inset:12% 6% 0;border-radius:12px;background:radial-gradient(ellipse at 50% 45%,rgba(255,250,170,.85),rgba(255,240,80,0) 70%);opacity:0;transition:opacity .1s;mix-blend-mode:screen}
.slot:hover::after{opacity:.5}
.slot.lit::before{background:#fff46a;box-shadow:0 0 14px 6px #fff46a}
.slot.lit::after{opacity:1;animation:can-pulse .3s ease-in-out infinite alternate}

/* ボタン盤（空白のクリーム色パネル） */
.buttons{position:absolute;left:15.6%;top:56%;width:59.6%;height:20.6%;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:repeat(4,1fr);gap:1.4cqw 1.4cqw}
.category-button{display:flex;align-items:center;gap:1.1cqw;min-width:0;padding:0 1cqw;border:.7cqw solid var(--ink);border-radius:1.6cqw;
  background:#fff;color:var(--ink);font:400 2.7cqw/1 var(--pop);letter-spacing:-.04em;text-align:left;box-shadow:0 .8cqw 0 var(--ink);cursor:pointer;touch-action:manipulation;transition:transform .08s,box-shadow .08s}
.category-button .icon{flex:0 0 auto;width:5cqw;height:5cqw;border:.5cqw solid var(--ink);border-radius:50%;background:var(--c);display:grid;place-items:center;font-size:2.7cqw}
.category-button .label{min-width:0;white-space:nowrap;overflow:hidden}
.category-button:hover{background:var(--yellow-hi)}
.category-button:active,.category-button.selected{transform:translateY(.8cqw);box-shadow:0 0 0 var(--ink)}
.category-button.selected{background:var(--yellow);animation:btn-glow .25s steps(2) infinite}
.category-button:disabled{cursor:default}
.category-button:disabled:not(.selected){opacity:.75}

/* あたりランプ（右の赤い帯） */
.win-lamp{position:absolute;left:79.4%;top:69.2%;width:6.6%;height:9.6%;display:grid;place-items:center;border:.6cqw solid var(--ink);border-radius:1.4cqw;background:#6e120f;
  font-family:var(--display);font-size:2.3cqw;line-height:1;color:#d55;writing-mode:vertical-rl;letter-spacing:.05em}
.machine-wrap.roulette .win-lamp{animation:roulette .12s steps(1) infinite}
.machine-wrap.winner .win-lamp{background:#fff23a;color:var(--red);box-shadow:0 0 22px 8px #fff23a}

/* 取り出し口 */
.outlet{position:absolute;left:24.6%;top:81.4%;width:49.6%;height:8.6%;overflow:hidden}
.drop-can{position:absolute;left:50%;bottom:8%;width:36%;height:52%;margin-left:-18%;border:.7cqw solid var(--ink);border-radius:1.6cqw;background:linear-gradient(90deg,#ff8a00 0 18%,#fff 18% 82%,#ff8a00 82%);transform:translateY(-200%) rotate(-8deg);opacity:0}
.drop-can.drop{animation:drop .45s cubic-bezier(.5,0,.75,0) forwards,thud .3s .45s ease-out}
body.is-rare .drop-can{background:linear-gradient(90deg,#f2b200 0 18%,#fff6b0 18% 82%,#f2b200 82%)}

/* ===== 演出パーツ ===== */
.coin{position:absolute;z-index:8;width:9cqw;height:9cqw;left:82%;top:54%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7b0,#e6a91a 70%);border:3px solid var(--ink);font-size:2.4cqw;font-weight:900;opacity:0;pointer-events:none}
.coin.insert{animation:coin-in .34s ease-in forwards}
.onomatopoeia{position:fixed;z-index:30;left:50%;top:44%;font-family:var(--display);font-size:clamp(3.2rem,17vw,8rem);line-height:1;white-space:nowrap;
  color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:7px 7px 0 var(--red);opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.1)}
.onomatopoeia.pop{animation:onomatopoeia .7s cubic-bezier(.16,1.6,.35,1) forwards}
.can-flight{position:fixed;z-index:31;left:50%;top:50%;width:min(62vw,280px);aspect-ratio:1;border:5px solid var(--ink);background:#fff;box-shadow:10px 10px 0 var(--ink);opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.1)}
.can-flight img{display:block;width:100%;height:100%;object-fit:cover}
.can-flight.fly{animation:can-flight .95s cubic-bezier(.2,.9,.3,1.2) forwards}
body.is-rare .can-flight img{filter:sepia(.9) saturate(3) hue-rotate(-8deg) brightness(1.1)}
body.is-rare .can-flight{box-shadow:0 0 0 6px #fff23a,10px 10px 0 var(--ink)}
.clerk-wrap.jump{animation:jump .5s ease-in-out}
.machine-wrap.shake .machine{animation:machine-shake .08s linear 10}
.machine-view.shake{animation:screen-shake .1s linear 6}

.loading,.error-message{font-size:.85rem;text-align:center;padding:8px}
.error-message{color:var(--red-dk);background:#fff;border:3px solid var(--ink);margin-top:10px}

/* ===== 結果カード ===== */
.result-view{padding:10px 16px 24px}
.result-card{position:relative;max-width:620px;margin:6px auto 16px;padding:22px 18px 18px;background:#fff;border:4px solid var(--ink);box-shadow:9px 9px 0 var(--ink);transform:rotate(-.8deg);animation:card-in .5s cubic-bezier(.18,1.3,.4,1) both}
.result-card.result-rare{box-shadow:0 0 0 6px #fff23a,9px 9px 0 var(--ink)}
.result-topline{display:flex;align-items:center;justify-content:space-between;gap:8px}
.category-tag,.rare-badge{font-family:var(--pop);font-weight:400;font-size:.74rem;border:2.5px solid var(--ink);border-radius:999px;padding:3px 11px;background:var(--sky);color:#fff}
.rare-badge{background:var(--yellow);color:var(--ink)}
.result-card h2{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,6vw,1.9rem);line-height:1.25;margin:12px 0 8px}
.ai-badge{display:inline-block;font-family:var(--pop);font-weight:400!important;border:2.5px solid var(--ink);border-radius:999px;background:#fff;padding:3px 11px;font-size:.7rem;font-weight:900;box-shadow:3px 3px 0 var(--ink)}
.prompt-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.95rem;font-weight:500;line-height:1.85;margin:16px 0 12px;padding:14px;background:var(--cream);border:2.5px solid var(--ink);border-radius:8px;min-height:120px;outline:none}
.prompt-body mark{background:linear-gradient(transparent 45%,var(--yellow) 45%);color:inherit;font-weight:800;padding:0 .05em}
.result-tip{margin:0 0 16px;padding:8px 12px;background:var(--yellow-hi);border-radius:8px;font-size:.84rem;font-weight:800}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.button{min-height:50px;padding:8px 10px;border:3px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font:400 .92rem/1.2 var(--pop);text-align:center;text-decoration:none;box-shadow:0 4px 0 var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;touch-action:manipulation}
.button:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.button-copy{background:var(--yellow);grid-column:1/-1;font-size:1rem;min-height:56px}
.button-again{background:#fff}.button-share{background:var(--sky);color:#fff}
.button-diagnosis{grid-column:1/-1;background:var(--red);color:#fff}
.follow-box{margin-top:18px;padding-top:14px;border-top:2.5px dashed var(--ink);text-align:center}
.follow-box strong{font-family:var(--pop);font-weight:400;font-size:.82rem}
.social-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.social-links a{color:var(--ink);text-decoration:none;background:var(--yellow);border:2.5px solid var(--ink);border-radius:999px;padding:6px 12px;font-family:var(--pop);font-size:.74rem;box-shadow:0 3px 0 var(--ink);display:flex;gap:4px;align-items:center}

/* ===== フッター ===== */
.site-footer{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 12px 18px;font-size:.78rem}
.byline{color:var(--ink);text-decoration:none;font-family:var(--pop)}
.footer-links{display:flex;gap:8px}
.footer-links a{width:36px;height:36px;border:2.5px solid var(--ink);border-radius:50%;background:#fff;box-shadow:0 3px 0 var(--ink);color:var(--ink);display:grid;place-items:center;text-decoration:none;font-size:.85rem}

/* ===== トースト・シェア ===== */
.toast{font-family:var(--pop);position:fixed;z-index:60;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:var(--yellow);padding:11px 20px;border-radius:999px;font-weight:900;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.share-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.overlay-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.55)}
.share-panel{position:relative;width:min(100%,560px);padding:22px 18px calc(24px + env(safe-area-inset-bottom));border:4px solid var(--ink);border-bottom:0;border-radius:24px 24px 0 0;background:#fff;animation:panel-up .35s cubic-bezier(.2,1.25,.35,1)}
.close-share{position:absolute;right:14px;top:12px;width:40px;height:40px;border:3px solid var(--ink);border-radius:50%;background:#fff;font-size:1.4rem;font-weight:900;line-height:1;cursor:pointer}
.share-clerk{display:flex;align-items:center;gap:10px;padding-right:44px}
.share-clerk img{width:60px;height:auto}
.share-clerk .speech{font-size:.85rem;padding:9px 16px}
.share-panel h2{font-family:var(--display);font-weight:400;text-align:center;font-size:1.3rem;margin:14px 0 16px}
.share-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.share-option{min-width:0;padding:12px 4px 10px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;font:inherit;cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.share-option:active{transform:translateY(4px);box-shadow:none}
.share-option span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.3rem;font-weight:900;border:2.5px solid var(--ink)}
.share-option b{font-family:var(--pop);font-weight:400;font-size:.72rem}
.brand-x span{background:#000}.brand-line span{background:#06c755}.brand-facebook span{background:#1877f2}.brand-threads span{background:#000}.brand-native span{background:#6853d4}.brand-copy span{background:#f0a400}
.share-note{text-align:center;font-size:.72rem;font-weight:500;margin:14px 0 0}

/* ===== アニメーション ===== */
@keyframes rays{to{transform:rotate(360deg)}}
@keyframes wobble{50%{transform:rotate(4deg) scale(1.06)}}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
@keyframes can-pulse{to{transform:scale(1.06)}}
@keyframes btn-glow{50%{box-shadow:0 0 0 var(--ink),0 0 16px 4px #fff23a}}
@keyframes roulette{50%{background:#fff23a;color:var(--red)}}
@keyframes coin-in{0%{opacity:1;transform:translate(-40%,60%) scale(1) rotate(0)}100%{opacity:0;transform:translate(10%,0) scale(.2) rotate(540deg)}}
@keyframes machine-shake{25%{transform:translate(-5px,1px) rotate(-1.2deg)}75%{transform:translate(5px,-1px) rotate(1.2deg)}}
@keyframes screen-shake{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-6px,-3px)}80%{transform:translate(5px,5px)}}
@keyframes drop{0%{opacity:1;transform:translateY(-200%) rotate(-8deg)}100%{opacity:1;transform:translateY(0) rotate(4deg)}}
@keyframes thud{40%{transform:translateY(-8px) rotate(-3deg)}100%{transform:translateY(0) rotate(4deg);opacity:1}}
@keyframes onomatopoeia{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-14deg)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(5deg)}80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.05) rotate(-2deg)}}
@keyframes can-flight{0%{opacity:0;transform:translate(-50%,10%) scale(.15) rotate(-260deg)}50%{opacity:1;transform:translate(-50%,-55%) scale(1.08) rotate(8deg)}70%{transform:translate(-50%,-50%) scale(.98) rotate(-3deg)}90%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(0)}}
@keyframes jump{35%{transform:translateY(-30px) rotate(-6deg)}70%{transform:translateY(2px) rotate(4deg)}}
@keyframes card-in{from{opacity:0;transform:translateY(30px) rotate(-4deg) scale(.92)}to{opacity:1;transform:rotate(-.8deg) scale(1)}}
@keyframes panel-up{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ===== PC：店員を自販機の右に大きく ===== */
@media (min-width:860px){
  .masthead{padding-top:28px}
  .stage{max-width:820px;display:grid;grid-template-columns:500px 1fr;align-items:end;gap:20px}
  .machine-wrap{grid-column:1;grid-row:1}
  .greeter{grid-column:2;grid-row:1;flex-direction:column-reverse;align-items:flex-start;margin:0 0 10px}
  .clerk-wrap{width:200px}
  .burst{right:-70px;top:-40px;width:120px}
  .machine-view{padding-top:28px}
  .burst span{font-size:1rem}
  .clerk-speech{margin:0 0 10px 30px;font-size:1.05rem}
  .clerk-speech::before{left:34px;bottom:-15px;border:10px solid transparent;border-top:15px solid var(--ink);border-bottom:0}
  .clerk-speech::after{left:37px;bottom:-9px;border:7px solid transparent;border-top:11px solid #fff;border-bottom:0}
  .result-card{padding:28px 30px 24px}
}
@media (max-width:370px){
  .machine-view{padding-left:8px;padding-right:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rays{animation:none!important}
  .onomatopoeia.pop,.can-flight.fly{animation:fade-blip .6s ease forwards!important}
}
@keyframes fade-blip{0%,100%{opacity:0}30%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}}