/* Chân dung một người 30 tuổi nổi loạn — eMagazine mobile
   Đơn vị: --e30u = 1px của frame Figma 402px (JS đặt theo bề rộng cột, tối đa 480px).
   --e30vh = chiều cao màn hình (đo 1 lần, không nhảy khi thanh công cụ ẩn/hiện).
   --e30k  = hệ số co các vị trí neo trên khi màn hình thấp hơn khung 402×874. */
@font-face{font-family:"Fragen30";src:url("Fragen-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fragen30";src:url("Fragen-RegularItalic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fragen30";src:url("Fragen-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fragen30";src:url("Fragen-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}

:root{--e30u:1px;--e30vh:100vh;--e30k:1;--e30cw:100vw;--e30top:0px;--e30grain:none;--e30blue:#3bbbff}
html.e30-lock,html.e30-lock body{overflow:hidden!important}
html:not(.e30-lock),html:not(.e30-lock) body{overflow-x:clip!important;overflow-y:visible!important}
body{margin:0;background:var(--e30blue)}

.e30,.e30-menu,.e30-detail{font-family:"Fragen30",Georgia,serif;color:#000;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.e30 *,.e30-menu *,.e30-detail *{box-sizing:border-box}
.e30 img,.e30-menu img,.e30-detail img{display:block;max-width:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:none}
.e30 p,.e30-detail p{margin:0;padding:0;font-size:inherit;line-height:inherit;color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.e30-defs{position:absolute;width:0;height:0;overflow:hidden}

.e30{position:relative;width:100%;background:var(--e30grain) repeat;background-color:var(--e30blue);background-size:128px 128px,auto;overflow:clip;-webkit-tap-highlight-color:transparent}
.e30 section{position:relative;width:var(--e30cw);margin:0 auto}

/* ---------- vật thể (decor, chữ tiêu đề) ---------- */
.o{position:absolute;left:0;top:0;width:0;height:0;z-index:1;transform:translate(var(--dx,0px),var(--dy,0px));touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.o.is-lift{z-index:7}
.pc{position:absolute;pointer-events:auto;cursor:grab}
.o.is-lift .pc{cursor:grabbing}
.pc__e,.pc__w,.pc img{position:absolute;inset:0;width:100%;height:100%}
.pc__e{visibility:hidden}
.pc__e.in{visibility:visible;animation:e30pop .5s steps(2,end) both}
.b0{filter:url(#e30b0)}.b1{filter:url(#e30b1)}.b2{filter:url(#e30b2)}
@keyframes e30pop{0%{transform:scale(.15) rotate(-14deg)}35%{transform:scale(1.22) rotate(7deg)}70%{transform:scale(.9) rotate(-3deg)}100%{transform:none}}

/* ---------- nhân vật ---------- */
.e30-stage{position:sticky;top:var(--e30top);z-index:2;width:var(--e30cw);height:var(--e30vh);margin:0 auto calc(-1 * var(--e30vh));pointer-events:none}
.e30-vis{position:absolute;left:0;right:0;top:0;height:var(--e30vh);pointer-events:none}
.e30{padding-top:var(--e30top)}
.ch{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform}
.ch__e,.ch__m,.ch__f,.ch__p,.ch>.ch__e img{position:absolute;inset:0}
.ch__e{visibility:hidden}
.ch__e.in{visibility:visible;animation:e30rise .7s steps(3,end) both}
.ch__m{transform-origin:50% 100%}
.ch__f.flip{transform:scaleX(-1)}
.ch img{position:absolute;inset:0;width:100%;height:100%}
.ch__eye{position:absolute;border-radius:50%;background:#000}
@keyframes e30rise{0%{transform:translateY(55%) rotate(-3deg)}45%{transform:translateY(-5%) rotate(2deg)}75%{transform:translateY(2%)}100%{transform:none}}

/* ---------- cover + intro ---------- */
.e30-intro{display:flow-root;padding-bottom:calc(var(--e30u) * 230)}
.e30-cover{position:relative;height:calc(var(--e30u) * 455.14);transform:scale(var(--e30ts,1));transform-origin:50% 0;margin-top:calc(var(--e30u) * -70 * var(--e30mt,0));margin-bottom:calc(var(--e30u) * 455.14 * (var(--e30ts,1) - 1))}
.e30-byline{position:relative;z-index:1;font-size:calc(var(--e30u) * 12);line-height:1.55;letter-spacing:.03em;text-align:center}
.e30-byline--top{visibility:hidden}
.e30-byline--top.in{visibility:visible;animation:e30pop .45s steps(2,end) both}
.e30-text{position:relative;z-index:1;width:var(--e30tw,calc(var(--e30u) * 322));margin:calc(var(--e30u) * 48.7) 0 0 calc((var(--e30cw) - var(--e30tw,calc(var(--e30u) * 322))) / 2);font-size:calc(var(--e30u) * 17);line-height:1.55;letter-spacing:.03em}
.e30-text p{margin:0 0 1.55em}
.e30-text p:last-child{margin-bottom:0}
.dropcap{float:left;width:calc(var(--e30u) * 45.49);height:calc(var(--e30u) * 118);margin:calc(var(--e30u) * 4) calc(var(--e30u) * 19.54) calc(var(--e30u) * 8) calc(var(--e30u) * 2.16)}
.dropcap img{width:100%;height:100%}

/* ---------- card list (cuộn dọc → thẻ trượt ngang) ---------- */
.e30-cards{z-index:1}
.e30-pin{position:sticky;top:var(--e30top);height:var(--e30vh)}
.e30-deco{position:absolute;inset:0;pointer-events:none}
.e30-read{position:absolute;left:calc(var(--e30u) * 255);top:calc(var(--e30u) * var(--e30k) * 156.06);transform:translateX(-50%);white-space:nowrap;font-weight:700;font-size:calc(var(--e30u) * 17);line-height:1.32;letter-spacing:.03em}
.e30-arrow{position:absolute;left:calc(var(--e30u) * 104.72);top:calc(var(--e30u) * var(--e30k) * 167.11);width:calc(var(--e30u) * 81.37);height:calc(var(--e30u) * 53.37)}
.e30-arrow img{width:calc(var(--e30u) * 89.05);height:calc(var(--e30u) * 55.54);margin:calc(var(--e30u) * -1.2) 0 0 calc(var(--e30u) * -6.5)}
.e30-track{position:absolute;left:0;top:calc(var(--e30u) * var(--e30k) * 240);transform-origin:0 0;display:flex;gap:calc(var(--e30u) * 5.12);padding:0 calc(var(--e30u) * 33.93);will-change:transform}
.e30-card{position:relative;flex:none;display:block;width:calc(var(--e30u) * 242.29);padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.e30-card__h{display:flex;align-items:center;justify-content:center;height:calc(var(--e30u) * 44.22);background:#ededed;border:1px solid #000;font-weight:700;font-size:calc(var(--e30u) * 25);letter-spacing:.03em;white-space:nowrap}
.e30-card__img{position:relative;display:block;height:calc(var(--e30u) * 277.54);border:1px solid #000;overflow:hidden;background:#ededed}
.e30-card__img img,.e30-cell__img img,.e30-panel__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.e30-card__l{position:absolute;left:0;bottom:0;display:flex;align-items:center;justify-content:center;width:calc(var(--e30u) * 48.59);height:calc(var(--e30u) * 43.47);background:#ededed;border:1px solid #000;font-weight:800;font-size:calc(var(--e30u) * 35.8);line-height:1;letter-spacing:.03em}
.e30-card.is-tap{animation:e30tap .3s steps(2,end)}
@media (hover:hover){
  .e30-card:hover,.e30-cell:hover{z-index:2;animation:e30grow .36s steps(3,end) forwards}
  .e30-menu.open .e30-cell:hover{animation:e30grow .36s steps(3,end) forwards}
}
@keyframes e30grow{0%{transform:none}35%{transform:scale(1.09) rotate(-2.2deg)}70%{transform:scale(1.04) rotate(1.4deg)}100%{transform:scale(1.06) rotate(-.6deg)}}
@keyframes e30tap{0%{transform:none}40%{transform:scale(.95) rotate(-1.5deg)}100%{transform:none}}

/* thẻ chưa có tranh: nền màu + chữ cái lớn */
.e30-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--c,#ff7dd6)}
.e30-ph::before{content:"";position:absolute;inset:0;background:var(--e30grain);background-size:128px 128px}
.e30-ph b{position:relative;font-weight:800;font-size:2.4em;line-height:1;color:#ededed;-webkit-text-stroke:.03em #000;paint-order:stroke fill;transform:rotate(-6deg)}
.e30-card .e30-ph{font-size:calc(var(--e30u) * 60)}

.e30-all{position:absolute;left:50%;margin-left:calc(var(--e30u) * -39.5);pointer-events:auto;visibility:hidden;bottom:calc(var(--e30u) * 14.5 + env(safe-area-inset-bottom,0px));z-index:4;display:flex;flex-direction:column;align-items:center;gap:calc(var(--e30u) * 5);width:calc(var(--e30u) * 79);padding:0;border:0;background:none;font:inherit;color:#000;cursor:pointer;-webkit-tap-highlight-color:transparent}
.e30-all__ic{position:relative;display:block;width:calc(var(--e30u) * 49.28);height:calc(var(--e30u) * 49.28);border:1px solid #000;border-radius:50%;background:#ededed}
.e30-all__ic i{position:absolute;width:calc(var(--e30u) * 13.24);height:calc(var(--e30u) * 13.24);border:1px solid #000}
.e30-all__ic i:nth-child(1){left:calc(var(--e30u) * 10.26);top:calc(var(--e30u) * 10.12);background:#ff7dd6}
.e30-all__ic i:nth-child(2){left:calc(var(--e30u) * 26.03);top:calc(var(--e30u) * 10.12);background:#f8e647}
.e30-all__ic i:nth-child(3){left:calc(var(--e30u) * 10.26);top:calc(var(--e30u) * 26.42);background:#1a59f4}
.e30-all__ic i:nth-child(4){left:calc(var(--e30u) * 26.03);top:calc(var(--e30u) * 26.42);background:#29822b}
.e30-all__t{font-weight:700;font-size:calc(var(--e30u) * 14);line-height:1.32;letter-spacing:.03em;white-space:nowrap}
.e30-all.on{visibility:visible;animation:e30pop .45s steps(2,end) both}
.e30-all.off{visibility:visible;animation:e30out .3s steps(2,end) both}
@keyframes e30out{0%{transform:none}100%{transform:scale(0) rotate(12deg)}}
.e30-all:hover .e30-all__ic,.e30-all.is-tap .e30-all__ic{animation:e30wig .4s steps(2,end)}
@keyframes e30wig{0%,100%{transform:none}33%{transform:rotate(-12deg) scale(1.08)}66%{transform:rotate(9deg)}}

/* ---------- ending ---------- */
.e30-end{z-index:1;height:var(--e30vh)}
.e30-end__txt{position:absolute;left:50%;top:calc(var(--e30u) * var(--e30k) * 215);width:max-content;transform:translateX(-50%);text-align:center}
@media (min-width:900px){.e30-end__q br.m{display:none}.e30-end__txt{top:calc(var(--e30u) * var(--e30k) * 230)}}
.e30-end__q{margin:0;white-space:nowrap;font-weight:700;font-size:calc(var(--e30u) * 58.37 * (.55 + .45 * var(--e30k)));line-height:1.15;letter-spacing:-.05em}
.e30-byline--end{margin-top:calc(var(--e30u) * 27)}
.e30-srcw{position:absolute;left:0;right:0;bottom:calc(var(--e30u) * 59.5 + env(safe-area-inset-bottom,0px));z-index:5;display:flex;justify-content:center;pointer-events:none}
.e30-src{pointer-events:auto;visibility:hidden;display:flex;align-items:center;justify-content:center;padding:0 calc(var(--e30u) * 15);background:#fff;border:1px solid #000;border-radius:calc(var(--e30u) * 38);font-size:calc(var(--e30u) * 10);line-height:1.55;letter-spacing:.03em;color:#000!important;text-decoration:none!important;white-space:nowrap}
.e30-src.on{visibility:visible;animation:e30pop .45s steps(2,end) both}
.e30-src.off{visibility:visible;animation:e30out .3s steps(2,end) both}

/* ---------- overlay: menu + detail ---------- */
.e30-menu,.e30-detail{position:fixed;left:0;right:0;top:var(--e30top);bottom:0;z-index:100000;display:none;overscroll-behavior:contain;-webkit-tap-highlight-color:transparent}
.e30-menu.open,.e30-detail.open{display:block}
.e30-menu{background:var(--e30grain) repeat,#ededed;background-size:128px 128px,auto}
.e30-menu.open .e30-menu__scroll{animation:e30drop .45s steps(3,end) both}
@keyframes e30drop{0%{transform:translateY(12%);opacity:0}50%{transform:translateY(-2%);opacity:1}100%{transform:none}}
.e30-menu__scroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.e30-grid{display:grid;grid-template-columns:repeat(3,calc(var(--e30u) * 126.02));column-gap:calc(var(--e30u) * 2.67);row-gap:calc(var(--e30u) * 8.64);width:var(--e30cw);margin:0 auto;padding:calc(var(--e30u) * 70) calc(var(--e30u) * 10.04) calc(var(--e30u) * 130 + env(safe-area-inset-bottom,0px))}
.e30-cell{position:relative;display:block;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.e30-cell__h{display:flex;align-items:center;justify-content:center;height:calc(var(--e30u) * 23);background:#ededed;border:calc(var(--e30u) * 1.33) solid #000;font-weight:700;font-size:calc(var(--e30u) * 13);letter-spacing:.03em;white-space:nowrap}
.e30-cell__img{position:relative;display:block;height:calc(var(--e30u) * 144.36);border:calc(var(--e30u) * 1.33) solid #000;overflow:hidden;background:#ededed}
.e30-cell__l{position:absolute;left:0;bottom:0;display:flex;align-items:center;justify-content:center;width:calc(var(--e30u) * 25.27);height:calc(var(--e30u) * 22.61);background:#ededed;border:calc(var(--e30u) * 1.33) solid #000;font-weight:800;font-size:calc(var(--e30u) * 18.62);line-height:1}
.e30-cell .e30-ph{font-size:calc(var(--e30u) * 32)}
.e30-menu.open .e30-cell{animation:e30pop .45s steps(2,end) both;animation-delay:calc(var(--i) * 30ms)}

.e30-close{position:absolute;left:50%;bottom:calc(var(--e30u) * 38 + env(safe-area-inset-bottom,0px));z-index:5;width:calc(var(--e30u) * 50.45);height:calc(var(--e30u) * 50.45);margin-left:calc(var(--e30u) * -25.2);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.e30-close img{width:100%;height:100%}
.e30-close:hover,.e30-close.is-tap{animation:e30wig .4s steps(2,end)}

.e30-detail{background:var(--e30grain) repeat,var(--e30blue);background-size:128px 128px,auto;overflow:hidden}
.e30-detail__stage{position:absolute;left:50%;top:0;width:var(--e30cw);height:100%;margin-left:calc(var(--e30cw) / -2);pointer-events:none}
.e30-deco--detail{left:50%;right:auto;width:var(--e30cw);margin-left:calc(var(--e30cw) / -2)}
.e30-panel{position:absolute;left:50%;top:calc(var(--e30u) * var(--e30k) * 67);z-index:3;width:calc(var(--e30u) * 372);max-height:min(calc(var(--e30u) * 743),calc(var(--e30vh) - var(--e30u) * var(--e30k) * 67 - var(--e30u) * 64));margin-left:calc(var(--e30u) * -186.5);display:flex;flex-direction:column;align-items:center;gap:calc(var(--e30u) * 32);padding:calc(var(--e30u) * 20) calc(var(--e30u) * 20) calc(var(--e30u) * 60);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;background:var(--e30grain) repeat,#ededed;background-size:128px 128px,auto;border:calc(var(--e30u) * 1.356) solid #000}
.e30-panel::-webkit-scrollbar,.e30-menu__scroll::-webkit-scrollbar{display:none;width:0;height:0}
.e30-menu__scroll{scrollbar-width:none}
.e30-detail.open .e30-panel{animation:e30card .5s steps(3,end) both}
.e30-detail.open .e30-panel.is-out{animation:e30flyup .32s steps(3,end) both}
@keyframes e30flyup{0%{transform:none}100%{transform:translateY(-70%) rotate(5deg) scale(.85);opacity:0}}
.e30-next{flex:none;display:flex;flex-direction:column;align-items:center;gap:calc(var(--e30u) * 6);width:100%;margin:calc(var(--e30u) * 4) 0 0;padding:calc(var(--e30u) * 14) 0 calc(var(--e30u) * 4);border:0;border-top:1px dashed #000;background:none;font:inherit;color:#000;cursor:pointer}
.e30-next__k{font-size:calc(var(--e30u) * 12);letter-spacing:.03em}
.e30-next__t{font-weight:700;font-size:calc(var(--e30u) * 17);letter-spacing:.03em}
.e30-next__t::after{content:" ↓"}
.e30-next__bar{position:relative;display:block;width:calc(var(--e30u) * 80);height:calc(var(--e30u) * 6);border:1px solid #000;border-radius:9px;overflow:hidden;background:#fff}
.e30-next__bar b{position:absolute;left:0;top:0;bottom:0;width:0;background:#ff7dd6}
.e30-next.is-last .e30-next__t::after{content:""}
@keyframes e30card{0%{transform:translateY(40%) rotate(-6deg) scale(.8)}45%{transform:translateY(-3%) rotate(2deg) scale(1.03)}75%{transform:rotate(-1deg)}100%{transform:none}}
.e30-panel__img{position:relative;flex:none;width:100%;aspect-ratio:2000/2291;border:calc(var(--e30u) * 1.33) solid #000;overflow:hidden;background:#ededed}
.e30-panel__img .e30-ph{font-size:calc(var(--e30u) * 110)}
.e30-panel__head{flex:none;display:flex;flex-direction:column;align-items:center;gap:calc(var(--e30u) * 12)}
.e30-panel__l{font-weight:800;font-size:calc(var(--e30u) * 123.12);line-height:.74;letter-spacing:.03em;padding-top:calc(var(--e30u) * 4)}
.e30-panel__t{font-style:italic;font-size:calc(var(--e30u) * 21.09);letter-spacing:.03em;white-space:nowrap}
.e30-panel__body{flex:none;width:100%;max-width:calc(var(--e30u) * 332);overflow-wrap:break-word;font-size:calc(var(--e30u) * 17);line-height:1.55;letter-spacing:.03em}
.e30-panel__body p{margin:0 0 1.55em}
.e30-panel__body p:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  .pc__e.in,.ch__e.in,.e30-menu.open .e30-cell,.e30-detail.open .e30-panel{animation:none}
}
.e30-end__in{position:absolute;inset:0}

/* ---------- chống CSS của trang IMS (p: 16px/16px + margin 20px, h2: font SFD) ---------- */
.e30 p,.e30-detail p{font-family:"Fragen30",Georgia,serif!important;color:#000!important}
.e30-byline{text-align:center!important;font-size:calc(var(--e30u) * 12)!important;line-height:1.55!important;letter-spacing:.03em!important;margin:0!important}
.e30-byline--end{margin-top:calc(var(--e30u) * 27)!important}
.e30-read{font-size:calc(var(--e30u) * 17)!important;line-height:1.32!important;margin:0!important;font-weight:700!important}
.e30-text p,.e30-panel__body p{font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;margin:0 0 1.55em!important}
.e30-text p:last-child,.e30-panel__body p:last-child{margin-bottom:0!important}
.e30 h1,.e30 h2{font-family:"Fragen30",Georgia,serif!important;text-transform:none!important}
.e30-end__q{font-weight:700!important;font-size:calc(var(--e30u) * 58.37 * (.55 + .45 * var(--e30k)))!important;line-height:1.15!important;letter-spacing:-.05em!important;margin:0!important;color:#000!important}

/* chặn lưu ảnh: không callout khi giữ lâu trên iOS, không chọn/kéo ảnh */
.e30,.e30-menu,.e30-detail{-webkit-touch-callout:none}
.e30 img,.e30-menu img,.e30-detail img,.e30-card__img,.e30-cell__img,.e30-panel__img,.e30-ph{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}

/* chi tiết thẻ — desktop: ảnh trái, chữ phải, khung ngang */
.e30-detail.is-desk .e30-panel{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:44px;row-gap:28px;align-items:start;width:var(--e30pw);height:min(760px,calc(var(--e30vh) - 150px));max-height:none;margin-left:calc(var(--e30pw) / -2);top:max(40px,calc((var(--e30vh) - min(760px,calc(var(--e30vh) - 150px))) / 2 - 30px));padding:28px 40px 28px 28px}
.e30-detail.is-desk .e30-panel__img{grid-column:1;grid-row:1 / span 3;position:sticky;top:0;width:auto;height:calc(min(760px,calc(var(--e30vh) - 150px)) - 56px - 3px)}
.e30-detail.is-desk .e30-panel__head{grid-column:2;grid-row:1;align-items:flex-start;padding-top:12px}
.e30-detail.is-desk .e30-panel__body{grid-column:2;grid-row:2;max-width:620px;font-size:19px}
.e30-detail.is-desk .e30-next{grid-column:2;grid-row:3;align-items:flex-start;max-width:620px;margin-bottom:40px}
.e30-detail.is-desk .e30-panel__l{font-size:120px}
.e30-detail.is-desk .e30-panel__t{font-size:26px}

/* ---------- loading (Figma 204:2679): nền trắng nhiễu + logo THE 30s eMagazine rung kiểu frame-by-frame ---------- */
.e30-loader{position:fixed;inset:0;z-index:100002;display:flex;align-items:center;justify-content:center;background:var(--e30grain) repeat,#fff;background-size:128px 128px,auto}
.e30-loader__logo{display:block;width:min(54vw,260px);aspect-ratio:217.68/58.87;margin-top:min(8vw,40px);animation:e30logo .5s steps(1,end) infinite}
.e30-loader__logo img{width:100%;height:100%}
@keyframes e30logo{0%{transform:rotate(-1.6deg) translate(0,1px);filter:url(#e30b0)}33%{transform:rotate(1.2deg) translate(1px,-1px);filter:url(#e30b1)}66%{transform:rotate(-.4deg) translate(-1px,0);filter:url(#e30b2)}}
.e30-loader.done{animation:e30loadout .42s steps(3,end) forwards;pointer-events:none}
.e30-loader.done .e30-loader__logo{animation:e30pop .42s steps(3,end) reverse both}
@keyframes e30loadout{0%{opacity:1}60%{opacity:1}100%{opacity:0}}

/* ---------- "đánh" nhân vật ---------- */
.ch__h{position:absolute;inset:0;transform-origin:50% 100%}
.ch__h.is-hit{animation:e30hit .45s steps(1,end)}
@keyframes e30hit{
  0%{transform:translateX(calc(var(--hd,1) * 4%)) rotate(calc(var(--hd,1) * 4deg)) scale(1.05,.94)}
  22%{transform:translateX(calc(var(--hd,1) * -2.5%)) rotate(calc(var(--hd,1) * -2.5deg)) scale(.97,1.03)}
  44%{transform:translateX(calc(var(--hd,1) * 1.6%)) rotate(calc(var(--hd,1) * 1.5deg))}
  66%{transform:translateX(calc(var(--hd,1) * -.6%)) rotate(calc(var(--hd,1) * -.6deg))}
  88%,100%{transform:none}}
.ch__hit{position:absolute;border-radius:50%;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.e30-detail .ch__hit{pointer-events:auto}
.e30-bam{position:fixed;z-index:100003;pointer-events:none;transform:rotate(var(--r));animation:e30bam .6s steps(1,end) forwards}
.e30-bam svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.e30-bam b{position:absolute;left:0;right:0;top:50%;transform:translateY(-52%);text-align:center;font-family:"Fragen30",Georgia,serif;font-weight:800;font-size:1em;line-height:1;letter-spacing:.02em;color:#000;white-space:nowrap}
@keyframes e30bam{0%{transform:rotate(var(--r)) scale(.35)}14%{transform:rotate(var(--r)) scale(1.25)}28%{transform:rotate(calc(var(--r) - 6deg)) scale(.95)}42%{transform:rotate(calc(var(--r) + 3deg)) scale(1.05)}70%{transform:rotate(var(--r)) scale(1);opacity:1}84%{transform:rotate(var(--r)) scale(.8);opacity:.6}100%{transform:rotate(var(--r)) scale(.6);opacity:0}}