/* ===== 麵麵研發部：糖果遊戲風（原創）===== */
@import url("/static/fonts/huninn.css");
:root{--ol:#5B1A12;--candy-red1:#FF6A6F;--candy-red2:#E20013;--candy-red3:#9E0A1C;--lemon:#FFD84A;--mint:#3FD3A6;--sky:#4FB7FF;--grape:#A86BFF;--peach:#FFB36B;
  --disp:"Huninn","Noto Sans CJK TC","PingFang TC",system-ui,sans-serif}
.candybg{background:
  radial-gradient(circle at 12% 18%,#fff9 0 3px,transparent 4px) 0 0/90px 90px,
  radial-gradient(circle at 60% 70%,#fff5 0 2px,transparent 3px) 0 0/70px 70px,
  radial-gradient(130% 90% at 50% -10%,#FFFBEA 0,#FFEBB5 40%,#FFCB8E 75%,#FFAE7A 100%);background-attachment:fixed}
.disp{font-family:var(--disp);font-weight:400;letter-spacing:.02em}
.outline-txt{font-family:var(--disp);color:#fff;-webkit-text-stroke:.16em var(--ol);paint-order:stroke fill;text-shadow:0 .1em 0 var(--ol),0 .18em .2em #0004}
/* 糖果按鈕 */
.cbtn{position:relative;font-family:var(--disp);font-size:24px;color:#fff;border:3px solid var(--ol);border-radius:22px;padding:14px 22px;
  background:linear-gradient(180deg,var(--candy-red1) 0%,var(--candy-red2) 60%,#C40D24 100%);
  box-shadow:inset 0 3px 0 #fff8,inset 0 -6px 0 #0003,0 6px 0 var(--ol),0 12px 18px #5b1a1255;text-shadow:0 2px 0 var(--candy-red3);cursor:pointer;overflow:hidden}
.cbtn:before{content:"";position:absolute;left:10%;right:10%;top:4px;height:38%;border-radius:999px;background:linear-gradient(#ffffffcc,#ffffff10);pointer-events:none}
.cbtn.green{background:linear-gradient(180deg,#7BEFC0,#1FB985 60%,#14996C);text-shadow:0 2px 0 #0C6B4B}
.cbtn.yellow{background:linear-gradient(180deg,#FFF09A,#FFC531 60%,#F2A200);color:var(--ol);text-shadow:0 2px 0 #fff8}
.cbtn.blue{background:linear-gradient(180deg,#9AD8FF,#3AA3F5 60%,#1F7FD0);text-shadow:0 2px 0 #145A96}
.cbtn.round{width:62px;height:62px;padding:0;border-radius:50%;font-size:26px}
.cbtn:disabled{filter:grayscale(.7) brightness(.95);opacity:.75}
.jelly{animation:jelly .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes jelly{0%{transform:scale(1,1)}30%{transform:scale(1.14,.86)}55%{transform:scale(.92,1.08)}75%{transform:scale(1.04,.97)}100%{transform:scale(1,1)}}
.boing-in{animation:boingin .55s cubic-bezier(.2,1.7,.4,1) both}
@keyframes boingin{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
/* 粒子與讚美 */
.spark{position:fixed;pointer-events:none;z-index:9998;font-size:22px;line-height:1;will-change:transform,opacity;animation:spark .8s ease-out forwards}
@keyframes spark{0%{transform:translate(-50%,-50%) scale(.4) rotate(0);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(var(--rot));opacity:0}}
.praise{position:fixed;left:50%;top:38%;z-index:9999;pointer-events:none;font-size:46px;white-space:nowrap;transform:translate(-50%,-50%);animation:praise 1.1s cubic-bezier(.2,1.6,.4,1) forwards}
.praise{-webkit-text-stroke:0;text-shadow:none;color:transparent}
.praise span{position:relative;display:inline-block}
.praise span:before{content:attr(data-t);position:absolute;inset:0;color:var(--ol);-webkit-text-stroke:.22em var(--ol);text-shadow:0 .08em 0 var(--ol),0 .16em .25em #0005;z-index:0}
.praise span i{position:relative;z-index:1;font-style:normal;background:linear-gradient(180deg,#FFFBD0 0%,#FFD84A 45%,#FF8A00 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes praise{0%{transform:translate(-50%,-50%) scale(.2) rotate(-12deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15) rotate(-4deg);opacity:1}45%{transform:translate(-50%,-50%) scale(1) rotate(-4deg)}80%{opacity:1}100%{transform:translate(-50%,-90%) scale(1) rotate(-4deg);opacity:0}}
/* 便利貼 */
.sticker{display:inline-block;font-family:var(--disp);background:linear-gradient(180deg,#FFF7C8,#FFE36A);color:var(--ol);border:3px solid var(--ol);border-radius:14px;padding:4px 12px;box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--ol);transform:rotate(-3deg)}

/* ===== 包裝卡（10em × 13.6em，用 font-size 縮放）===== */
.dcard{position:relative;width:10em;height:13.6em;border:.14em solid var(--ol);border-radius:.95em;padding:.45em .5em .5em;
  background:linear-gradient(170deg,color-mix(in srgb,var(--c) 14%,#FFFFFF) 0%,color-mix(in srgb,var(--c) 34%,#FFF4E6) 100%);
  box-shadow:inset 0 .16em 0 #ffffffd0,inset 0 -.28em 0 color-mix(in srgb,var(--c) 40%,#0000),0 .22em 0 var(--ol),0 .5em .7em #5b1a1250;
  overflow:hidden;font-family:var(--font);color:#3A1610;text-align:left}
.dcard:after{content:"";position:absolute;left:4%;right:30%;top:.18em;height:1.1em;border-radius:1em;background:linear-gradient(#ffffffb8,#ffffff00);pointer-events:none}
.dcard:before{content:"";position:absolute;right:-1.4em;bottom:-1.6em;width:6.4em;height:6.4em;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 55%,#fff) 0,transparent 70%);opacity:.8}
.dc-head{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:.42em;margin-bottom:.55em;font-family:var(--disp)}
.dc-head span{background:linear-gradient(180deg,var(--candy-red1),var(--candy-red2));color:#fff;border:.14em solid var(--ol);border-radius:99em;padding:.12em .7em;box-shadow:inset 0 .12em 0 #fff8}
.dc-head b{font-weight:400;color:var(--ol);font-variant-numeric:tabular-nums}
.dc-win{position:relative;height:5.1em;border:.1em solid var(--ol);border-radius:.6em;overflow:hidden;background:#FFF8EA;box-shadow:inset 0 .15em .25em #0003}
.dc-soup{position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,#fff8 0 12%,transparent 13%),radial-gradient(circle at 80% 70%,#fff5 0 7%,transparent 8%),color-mix(in srgb,var(--soup) 72%,#fff);transition:background .4s}
.dc-noodle{position:absolute;inset:0;width:100%;height:100%}
.dc-tops{position:absolute;inset:0}
.dc-top-i{position:absolute;font-size:1.5em;line-height:1;transform:translate(-50%,-50%) rotate(var(--r));filter:drop-shadow(.03em .07em 0 #5B1A12aa)}
.dc-top-i.drop{animation:tdrop .75s cubic-bezier(.3,1.5,.5,1)}
@keyframes tdrop{0%{transform:translate(-50%,-300%) rotate(-120deg) scale(1.7);opacity:0}55%{transform:translate(-50%,-35%) rotate(12deg) scale(1.2,.85);opacity:1}75%{transform:translate(-50%,-58%) rotate(-4deg) scale(.95,1.08)}100%{transform:translate(-50%,-50%) rotate(var(--r))}}
.dc-flv{position:absolute;left:.3em;bottom:.3em;background:linear-gradient(180deg,#5B2A20,#2E120C);color:#fff;font-size:.46em;font-weight:900;border-radius:99em;padding:.2em .7em;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 .1em 0 #fff4}
.dc-name{position:relative;font-family:var(--disp);font-size:1.12em;line-height:1.14;margin:.4em 0 .12em;letter-spacing:.02em;max-height:2.35em;overflow:hidden;word-break:break-all;width:6.8em;color:#3A1610}
.dc-name.long{font-size:.95em;width:8.2em}
.dcard.big .dc-meta{display:none}.dcard.big .dc-name{font-size:1.3em;width:7.4em;margin-top:.35em}.dcard.big .dc-name.long{font-size:1.08em;width:8.3em}.dcard.big .dc-slogan{font-size:.56em;width:11.5em}
.dc-meta{position:relative;font-size:.4em;font-weight:800;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:16.5em}
.dc-slogan{position:relative;font-size:.46em;font-weight:800;line-height:1.3;margin-top:.35em;width:13.6em;max-height:2.7em;overflow:hidden;color:#B3122A}
.dc-foot{position:absolute;left:.55em;bottom:.42em;font-size:.4em;font-weight:900;opacity:.8}
.dc-mascot{position:absolute;right:-.15em;bottom:-.35em;width:3.3em;transform:rotate(-8deg)}
.dc-mascot svg{width:100%;height:auto}
.dc-film{position:absolute;inset:0;border-radius:.8em;background:linear-gradient(115deg,transparent 30%,#ffffff90 40%,transparent 50%),linear-gradient(160deg,#ffffff30,#ffffff00 60%);background-size:300% 100%,100% 100%;background-position:40% 0,0 0;animation:gloss 1.6s ease-in-out infinite;pointer-events:none;box-shadow:inset 0 0 0 .08em #ffffffa0}
@keyframes gloss{0%{background-position:120% 0,0 0}100%{background-position:-60% 0,0 0}}