/* him.css - "she invites him" skin: soda mint + peach-coral hearts. Only active under html[data-ver=him]. */
html[data-ver=him]{--bg:#EDF8F2;--pri:#178A76;--deep:#0F6B5B;--deeper:#063A31;--pri-h:#0F705F;--err:#D9433F;--ok:#1E7A45;--tint:#D8F1E7;--pink1:#8ED8C2;--line1:#BFE2D5;--line2:#A6C4BA;--line3:#CDE6DB;--line4:#B9D6CA;--soft:#4E6F67;--bg2:#DDF0E7;--dis1:#DCEAE4;--dis2:#9BB6AD;--paper:#FBFFFC;--rule:#D7ECE2;--rule2:#C7DFD4;--mute:#6F9A8D;--pink2:#FFB5A3;--pink3:#FFD6CB;--wine:#2E5A50;--ink:#16302A;--dark:#10211D;--pri-rgb:23,138,118;--ink-rgb:22,48,42;--heart:#F0605D;--heart2:#FF9A88;--heart3:#FFC7BB}
html[data-ver=him] .sk-her{display:none}
html[data-ver=him] .sk-him{display:inline}
html[data-ver=him] body{background-image:radial-gradient(rgba(23,138,118,.11) 1.6px,transparent 2.2px);background-size:28px 28px}
html[data-ver=him] .plane{transform-box:fill-box;transform-origin:50% 50%;animation:plane 4.2s ease-in-out infinite}
@keyframes plane{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-9px,-7px) rotate(-7deg)}60%{transform:translate(-3px,3px) rotate(3deg)}}
:where(html[data-ver=him]) .mochi .mochi-body{animation:jelly 3.6s ease-in-out infinite}
@keyframes jelly{0%,100%{transform:scale(1,1)}22%{transform:scale(1.025,.972)}48%{transform:scale(.982,1.022)}74%{transform:scale(1.012,.992)}}
html[data-ver=him] .pud-cherry{transform-box:fill-box;transform-origin:50% 100%}
html[data-ver=him] .ruled{background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:28px 28px;background-position:-1px 6px}
html[data-ver=him] .letter::before{content:"";position:absolute;top:-13px;left:50%;width:128px;height:26px;margin-left:-64px;transform:rotate(-3deg);background:repeating-linear-gradient(45deg,#BFE6D6 0 9px,#D8F1E7 9px 18px);border-radius:3px;box-shadow:0 2px 4px rgba(var(--ink-rgb),.14);opacity:.95;z-index:2}
html[data-ver=him] .letter::after{content:"";position:absolute;right:14px;bottom:-12px;width:62px;height:22px;transform:rotate(4deg);background:repeating-linear-gradient(45deg,#FFD6CB 0 9px,#FFE7E0 9px 18px);border-radius:3px;box-shadow:0 2px 4px rgba(var(--ink-rgb),.12);opacity:.95}
html[data-ver=him] .stamp{background:rgba(251,255,252,.8)}
html[data-ver=him] .fh.bub{filter:drop-shadow(0 0 1px rgba(23,138,118,.35))}
/* ---- new food overlays (yakiniku / stir-fry bar / steak) ---- */
.ffx .hm-fl{transform-box:fill-box;transform-origin:50% 100%;animation:hmFl .46s ease-in-out infinite alternate}
.ffx .hm-fl2{animation-duration:.34s}
.ffx .hm-fx{animation-duration:.3s;animation-iteration-count:9}
@keyframes hmFl{0%{transform:scale(.82,.7) skewX(-5deg);opacity:.92}100%{transform:scale(1.08,1.28) skewX(6deg);opacity:1}}
.ffx .hm-fin{animation:hmFin .5s ease-out .55s both}
@keyframes hmFin{0%{opacity:0}100%{opacity:1}}
.ffx .hm-sm{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:hmSm 2.1s ease-out infinite}
@keyframes hmSm{0%{opacity:0;transform:translate(0,6px) scale(.5)}22%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),-30px) scale(1.7)}}
.ffx .hm-sp{opacity:0;animation:hmSp 1.15s ease-out infinite}
@keyframes hmSp{0%{opacity:0;transform:translate(0,0)}14%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.ffx .hm-wp{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:hmWp 2.6s ease-in-out both}
@keyframes hmWp{0%{opacity:0;transform:none}6%{opacity:1}22%{transform:translate(calc(var(--dx) * .5),var(--dy)) rotate(calc(var(--r) * .5))}42%{transform:translate(var(--dx),0) rotate(var(--r))}60%{transform:translate(calc(var(--dx) * .4),calc(var(--dy) * .7)) rotate(calc(var(--r) * 1.4))}80%{transform:translate(0,0) rotate(calc(var(--r) * 1.8))}94%{opacity:1}100%{opacity:0;transform:translate(0,0)}}
html[data-ver=him] .yk-m1,html[data-ver=him] .yk-m2,html[data-ver=him] .yk-m3{transform-box:fill-box;transform-origin:50% 50%}
html[data-ver=him] .food.play[data-food=sushi] .yk-m1{animation:ykFlip .5s ease-in-out .1s both}
html[data-ver=him] .food.play[data-food=sushi] .yk-m2{animation:ykFlip .5s ease-in-out .25s both}
html[data-ver=him] .food.play[data-food=sushi] .yk-m3{animation:ykFlip .5s ease-in-out .4s both}
@keyframes ykFlip{0%{transform:translateY(0) scaleY(1)}35%{transform:translateY(-14px) scaleY(.15)}70%{transform:translateY(-3px) scaleY(1.1)}100%{transform:translateY(0) scaleY(1)}}
html[data-ver=him] .food.play[data-food=izakaya] .art{opacity:1}
/* ---- "what she says" line under the food cards ---- */
.hm-note{display:flex;align-items:center;gap:10px;margin:12px auto 0;max-width:560px;padding:9px 14px;background:var(--paper);border:2px dashed var(--pri);border-radius:16px;color:var(--ink);font-size:15px;line-height:1.5}
.hm-note[hidden]{display:none}
.hm-tag{flex:none;padding:2px 10px;border-radius:999px;background:var(--pri);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px}
.hm-pop{animation:numpop .5s var(--sp)}
@media (max-width:760px){.hm-note{font-size:14px;margin-top:10px}}