/*!
 * Hard Piston Toolkit - Piston Meter
 * 高級スポーツカーのタコメーターを模したスコアメーター用スタイル。
 * BEM命名規則に準拠。全セレクタを .hpt- 名前空間配下に限定し、
 * テーマ（Cocoon等）とのCSS競合を防止する。
 */
 .hpt-meter{--hpt-bg:#111111;--hpt-text:#ececec;--hpt-primary:#ff4fa3;--hpt-primary-rgb:255, 79, 163;--hpt-max:#ff1493;--hpt-max-rgb:255, 20, 147;--hpt-gray:#6f6f6f;--hpt-white:#ececec;--hpt-track:#2a2a2a;--hpt-accent-color:var(--hpt-gray);--hpt-scale:1;position:relative;box-sizing:border-box;max-width:calc(320px * var(--hpt-scale));width:100%;margin:0 auto;padding:calc(22px * var(--hpt-scale)) calc(18px * var(--hpt-scale)) calc(18px * var(--hpt-scale));overflow:hidden;isolation:isolate;background:radial-gradient(120% 90% at 50% -20%,rgb(255 255 255 / .05) 0%,#fff0 55%),radial-gradient(140% 100% at 50% 115%,rgb(0 0 0 / .55) 0%,#fff0 60%),linear-gradient(155deg,#1a1a1a 0%,#101010 45%,#0a0a0a 75%,#050505 100%);border:1px solid rgb(255 255 255 / .07);border-radius:calc(18px * var(--hpt-scale));box-shadow:0 24px 48px rgb(0 0 0 / .55),0 2px 6px rgb(0 0 0 / .5),inset 0 1px 0 rgb(255 255 255 / .08),inset 0 -18px 30px rgb(0 0 0 / .55),inset 0 0 0 1px rgb(255 255 255 / .02);color:var(--hpt-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;line-height:1.4}.hpt-meter *,.hpt-meter *::before,.hpt-meter *::after{box-sizing:border-box}.hpt-meter::before{content:"";position:absolute;inset:-40% -20%;background:linear-gradient(115deg,#fff0 30%,rgb(255 255 255 / .06) 45%,rgb(255 255 255 / .1) 50%,rgb(255 255 255 / .02) 58%,#fff0 70%);pointer-events:none;z-index:1}.hpt-meter::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:180px 180px;opacity:.035;mix-blend-mode:overlay;pointer-events:none;z-index:1}.hpt-meter__texture{display:none;position:absolute;inset:0;pointer-events:none;z-index:1}.hpt-meter__title,.hpt-meter__body{position:relative;z-index:2}.hpt-meter__title{margin:0 0 calc(10px * var(--hpt-scale));font-size:calc(17px * var(--hpt-scale));font-weight:800;letter-spacing:.16em;text-align:center;text-transform:uppercase;color:var(--hpt-meter-title-color,var(--hpt-text))}.hpt-meter__body{position:relative;width:100%;padding:calc(10px * var(--hpt-scale)) calc(6px * var(--hpt-scale)) calc(4px * var(--hpt-scale));border-radius:calc(14px * var(--hpt-scale));background:linear-gradient(180deg,rgb(0 0 0 / .35) 0%,#fff0 40%);box-shadow:inset 0 6px 14px rgb(0 0 0 / .5),inset 0 -1px 0 rgb(255 255 255 / .04)}.hpt-meter__svg{display:block;width:100%;height:auto;overflow:visible}.hpt-meter__track{fill:none;stroke:var(--hpt-track);stroke-width:6;stroke-linecap:round}.hpt-meter__progress{fill:none;stroke:var(--hpt-accent-color);stroke-width:6;stroke-linecap:round;transition:stroke 0.6s ease-out}.hpt-meter__tick{stroke:#4a4a4a;stroke-width:1.4}.hpt-meter__tick--major{stroke:#7a7a7a;stroke-width:2}.hpt-meter__tick-label{fill:#b6b6b6;font-size:8.4px;font-weight:700;font-family:inherit}.hpt-meter__needle{stroke:var(--hpt-accent-color);stroke-width:3;stroke-linecap:round;transition:stroke 0.6s ease-out}.hpt-meter__needle-tail{stroke:var(--hpt-accent-color);stroke-width:3;stroke-linecap:round;opacity:.5;transition:stroke 0.6s ease-out}.hpt-meter__hub{fill:#1a1a1a;stroke:var(--hpt-accent-color);stroke-width:2;transition:stroke 0.6s ease-out}.hpt-meter__hub-inner{fill:var(--hpt-accent-color);transition:fill 0.6s ease-out}.hpt-meter__score{margin-top:-2px;display:flex;align-items:flex-end;justify-content:center;gap:calc(3px * var(--hpt-scale))}.hpt-meter__score-number{font-size:calc(56px * var(--hpt-scale));font-weight:900;font-variant-numeric:tabular-nums;color:var(--hpt-accent-color);letter-spacing:-.015em;line-height:1;transition:color 0.6s ease-out;-webkit-text-stroke:.6px currentColor}.hpt-meter__score-max{font-size:calc(22px * var(--hpt-scale));font-weight:700;font-variant-numeric:tabular-nums;line-height:1;padding-bottom:calc(6px * var(--hpt-scale));color:#b0b0b0}.hpt-meter__score-suffix{font-size:calc(12px * var(--hpt-scale));font-weight:600;line-height:1;padding-bottom:calc(5px * var(--hpt-scale));color:#a6a6a6}.hpt-meter[data-band="low"]{--hpt-accent-color:var(--hpt-gray)}.hpt-meter[data-band="mid"]{--hpt-accent-color:var(--hpt-white)}.hpt-meter[data-band="high"]{--hpt-accent-color:var(--hpt-primary)}.hpt-meter[data-band="max"]{--hpt-accent-color:var(--hpt-max)}.hpt-meter[data-color="pink"]{--hpt-primary:#ff4fa3;--hpt-primary-rgb:255, 79, 163;--hpt-max:#ff1493;--hpt-max-rgb:255, 20, 147}.hpt-meter[data-color="red"]{--hpt-primary:#ff4f4f;--hpt-primary-rgb:255, 79, 79;--hpt-max:#ff1a1a;--hpt-max-rgb:255, 26, 26}.hpt-meter[data-color="blue"]{--hpt-primary:#4f9dff;--hpt-primary-rgb:79, 157, 255;--hpt-max:#0066ff;--hpt-max-rgb:0, 102, 255}.hpt-meter[data-color="green"]{--hpt-primary:#4fe38a;--hpt-primary-rgb:79, 227, 138;--hpt-max:#00d26a;--hpt-max-rgb:0, 210, 106}.hpt-meter[data-color="orange"]{--hpt-primary:#ff9d4f;--hpt-primary-rgb:255, 157, 79;--hpt-max:#ff7a00;--hpt-max-rgb:255, 122, 0}.hpt-meter[data-color="purple"]{--hpt-primary:#b34fff;--hpt-primary-rgb:179, 79, 255;--hpt-max:#9000ff;--hpt-max-rgb:144, 0, 255}.hpt-meter[data-theme="carbon"] .hpt-meter__texture{display:block;background-image:repeating-linear-gradient(45deg,rgb(255 255 255 / .05) 0 1.5px,#fff0 1.5px 5px),repeating-linear-gradient(-45deg,rgb(0 0 0 / .45) 0 1.5px,#fff0 1.5px 5px);background-size:7px 7px;opacity:.55;mix-blend-mode:overlay}.hpt-meter[data-theme="glass"]{background:linear-gradient(160deg,rgb(255 255 255 / .1) 0%,rgb(255 255 255 / .03) 45%,rgb(10 10 10 / .4) 100%);border:1px solid rgb(255 255 255 / .16);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 20px 44px rgb(0 0 0 / .4),inset 0 1px 0 rgb(255 255 255 / .22),inset 0 -14px 26px rgb(0 0 0 / .3)}.hpt-meter[data-theme="glass"] .hpt-meter__body{background:linear-gradient(180deg,rgb(0 0 0 / .22) 0%,#fff0 40%);box-shadow:inset 0 6px 14px rgb(0 0 0 / .3),inset 0 -1px 0 rgb(255 255 255 / .08)}.hpt-meter[data-size="small"]{--hpt-scale:0.8}.hpt-meter[data-size="medium"]{--hpt-scale:1}.hpt-meter[data-size="large"]{--hpt-scale:1.2}.hpt-meter[data-size="xlarge"]{--hpt-scale:1.45}.hpt-meter[data-glow-active="true"] .hpt-meter__needle,.hpt-meter[data-glow-active="true"] .hpt-meter__needle-tail,.hpt-meter[data-glow-active="true"] .hpt-meter__hub{filter:drop-shadow(0 0 2.2px var(--hpt-max)) drop-shadow(0 0 5.3px rgba(var(--hpt-max-rgb),.45))}.hpt-meter[data-glow-active="true"] .hpt-meter__progress{filter:drop-shadow(0 0 3px var(--hpt-max))}.hpt-meter[data-glow-active="true"] .hpt-meter__tick--major,.hpt-meter[data-glow-active="true"] .hpt-meter__tick{stroke:var(--hpt-max);filter:drop-shadow(0 0 1.5px rgba(var(--hpt-max-rgb),.53))}.hpt-meter[data-glow-active="true"] .hpt-meter__score-number{text-shadow:0 0 4.5px rgba(var(--hpt-max-rgb),.56),0 0 12px rgba(var(--hpt-max-rgb),.26)}.hpt-meter[data-glow-active="true"].is-animated .hpt-meter__score-number,.hpt-meter[data-glow-active="true"].is-animated .hpt-meter__needle,.hpt-meter[data-glow-active="true"].is-animated .hpt-meter__hub{animation:hpt-neon-breathe 5.5s ease-in-out infinite}@keyframes hpt-neon-breathe{0%,100%{filter:drop-shadow(0 0 1.5px var(--hpt-max)) drop-shadow(0 0 3.8px rgba(var(--hpt-max-rgb),.34))}50%{filter:drop-shadow(0 0 3.8px var(--hpt-max)) drop-shadow(0 0 9px rgba(var(--hpt-max-rgb),.6))}}.hpt-meter[data-glow-active="true"].is-animated .hpt-meter__score-number{animation-name:hpt-neon-breathe-text}@keyframes hpt-neon-breathe-text{0%,100%{text-shadow:0 0 3px rgba(var(--hpt-max-rgb),.41),0 0 7.5px rgba(var(--hpt-max-rgb),.19)}50%{text-shadow:0 0 6px rgba(var(--hpt-max-rgb),.68),0 0 15px rgba(var(--hpt-max-rgb),.38)}}.hpt-meter .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion:reduce){.hpt-meter[data-glow-active="true"].is-animated .hpt-meter__score-number,.hpt-meter[data-glow-active="true"].is-animated .hpt-meter__needle,.hpt-meter[data-glow-active="true"].is-animated .hpt-meter__hub{animation:none}.hpt-meter__needle-group,.hpt-meter__progress,.hpt-meter__score-number{transition:none!important}}.hpt-meter[data-animate="off"] .hpt-meter__needle-group,.hpt-meter[data-animate="off"] .hpt-meter__progress,.hpt-meter[data-animate="off"] .hpt-meter__needle,.hpt-meter[data-animate="off"] .hpt-meter__needle-tail,.hpt-meter[data-animate="off"] .hpt-meter__hub,.hpt-meter[data-animate="off"] .hpt-meter__hub-inner,.hpt-meter[data-animate="off"] .hpt-meter__score-number{transition:none}.hpt-meter[data-variant="compact"]{--hpt-scale:calc(var(--hpt-scale) * 0.45);background:none;border:none;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:calc(4px * var(--hpt-scale)) 0 0;max-width:100%;width:100%}.hpt-meter[data-variant="compact"]::before,.hpt-meter[data-variant="compact"]::after,.hpt-meter[data-variant="compact"] .hpt-meter__texture{display:none}.hpt-meter[data-variant="compact"] .hpt-meter__body{background:none;box-shadow:none;padding:0}@media (max-width:782px){.hpt-meter{max-width:calc(280px * var(--hpt-scale));padding:calc(16px * var(--hpt-scale)) calc(12px * var(--hpt-scale)) calc(12px * var(--hpt-scale))}.hpt-meter__title{font-size:calc(16px * var(--hpt-scale))}.hpt-meter__score-number{font-size:calc(48px * var(--hpt-scale))}.hpt-meter__score-suffix{font-size:calc(11px * var(--hpt-scale))}}@media (max-width:480px){.hpt-meter{max-width:100%;padding:calc(14px * var(--hpt-scale)) calc(10px * var(--hpt-scale)) calc(10px * var(--hpt-scale))}.hpt-meter__title{font-size:calc(15px * var(--hpt-scale));letter-spacing:.12em}.hpt-meter__score-number{font-size:calc(42px * var(--hpt-scale))}.hpt-meter__score-suffix{font-size:calc(11px * var(--hpt-scale))}}