/* =========================================================
   アニメキャラクター紹介 ×3D  フロント v4.0.0
   ========================================================= */

/* ---------- 3Dビューワー共通 ---------- */
.acs3d-view { position: relative; width: 100%; height: 100%; }
.acs3d-canvas { display: block; width: 100% !important; height: 100% !important; outline: none; -webkit-tap-highlight-color: transparent; }
.acs3d-loading {
    --p: 0;
    position: absolute; left: 50%; top: 50%; width: 64px; height: 64px;
    transform: translate(-50%, -50%);
    display: grid; place-items: center; pointer-events: none; z-index: 2;
}
.acs3d-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(var(--acs-theme, #c6ff3d) calc(var(--p) * 1%), rgba(255,255,255,.12) 0);
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
            mask: radial-gradient(circle, transparent 58%, #000 60%);
    animation: acs3d-spin 1.2s linear infinite;
}
.acs3d-pct { font: 700 12px/1 "Oswald", system-ui, sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
@keyframes acs3d-spin { to { transform: rotate(360deg); } }
.acs3d-error {
    position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center;
    color: #cfd4e0; font-size: 14px; background: rgba(10,12,18,.8);
}

/* ---------- 一覧カードの3D ---------- */
.character-card .character-image { position: relative; }
.character-card .acs3d-view[data-context="card"] {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0; transition: opacity .45s ease;
    background:
        radial-gradient(ellipse 70% 40% at 50% 92%, var(--acs-theme, #c6ff3d), transparent 70%),
        linear-gradient(180deg, #f7f8fb 0%, #e6e9f1 100%);
}
.character-card .acs3d-view[data-context="card"] .acs3d-loading { display: none; }
.character-card.acs3d-live .acs3d-view[data-context="card"] { opacity: 1; }
.character-card.acs3d-live .character-image img,
.character-card.acs3d-live .character-image .slider-nav,
.character-card.acs3d-live .character-image .slider-arrow { opacity: 0 !important; transition: opacity .3s; }
.acs3d-badge {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    padding: 2px 8px 2px 7px; border-radius: 4px;
    font: 700 11px/1.5 "Oswald", system-ui, sans-serif; letter-spacing: .08em;
    color: #111; background: var(--acs-theme, #c6ff3d);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transform: skewX(-10deg);
    pointer-events: none;
}
.acs3d-card-3d_hover .acs3d-badge::after { content: " ↻"; }

/* ---------- ショートコード / クラシック表示の埋め込み ---------- */
.acs3d-embed {
    position: relative; width: 100%; border-radius: 14px; overflow: hidden; margin: 0 0 24px;
    background:
        radial-gradient(ellipse 50% 30% at 50% 92%, var(--acs-theme, #c6ff3d), transparent 70%),
        linear-gradient(180deg, #1a1e2a, #0b0d12);
}
.acs3d-embed-classic { height: min(70vh, 640px); min-height: 380px; }
.acs3d-embed .acs3d-view { position: absolute; inset: 0; }

/* =========================================================
   ステータス画面
   ========================================================= */
.acs-single-main { width: 100%; max-width: 1440px; margin: 0 auto; padding: 16px 0 48px; box-sizing: border-box; }
/* Cocoon / らんど：本文の白い箱をやめてステータス画面を広く見せる */
body.acs-plugin-template #main.main { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; width: 100% !important; max-width: none !important; }
body.acs-plugin-template #sidebar { display: none !important; }

.acs-st {
    --acs-theme: #c6ff3d;
    --acs-accent: #ff4f8b;
    --acs-ink: #f3f5fa;
    --acs-mute: #98a1b3;
    --acs-line: rgba(255,255,255,.12);
    --mx: 0; --my: 0;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, .95fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    height: clamp(600px, 88vh, 920px);
    color: var(--acs-ink);
    background: #0a0c11;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    font-family: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
    line-height: 1.6;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
    margin: 0 0 32px;
    text-align: left;
}
.acs-st *, .acs-st *::before, .acs-st *::after { box-sizing: border-box; }
/* テーマ（Cocoon等）の見出し・リストの装飾を打ち消す */
.acs-st.acs-st h1, .acs-st.acs-st h2, .acs-st.acs-st h3, .acs-st.acs-st p,
.acs-st.acs-st ul, .acs-st.acs-st li, .acs-st.acs-st dl, .acs-st.acs-st dt, .acs-st.acs-st dd {
    margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font-size: inherit; line-height: inherit;
}
.acs-st.acs-st h1::before, .acs-st.acs-st h1::after, .acs-st.acs-st li::before { content: none; }
.acs-st.acs-st ul { list-style: none; }
.acs-st button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; margin: 0; padding: 0; }
.acs-st a { color: inherit; text-decoration: none; }
.acs-st .acs-num, .acs-st__file-no, .acs-st__power-num, .acs-st__stat-val, .acs-st__name-en, .acs-st__rank b,
.acs-st__navcount, .acs-st__file-label, .acs-st__seg button, .acs-st__tabs button {
    font-family: "Oswald", "Bebas Neue", "Impact", system-ui, sans-serif;
}

/* ---------- 背景 ---------- */
.acs-st__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.acs-st__bg-base { position: absolute; inset: 0; }
.acs-st.has-base, .acs-st.has-base .acs-st__bg-base { background: var(--acs-base) !important; }
.acs-st__bg-img {
    position: absolute; inset: calc(var(--acs-blur, 0px) * -2); width: calc(100% + var(--acs-blur, 0px) * 4); height: calc(100% + var(--acs-blur, 0px) * 4);
    background-size: cover; background-position: center; object-fit: cover; filter: blur(var(--acs-blur, 0px));
}
.acs-st__bg-dim { position: absolute; inset: 0; background: #000; opacity: var(--acs-dim, .45); }
.acs-st.has-bg .acs-st__bg-grad, .acs-st.has-base .acs-st__bg-grad { background: none !important; }
.acs-st__bg-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.acs-st__bg-grad {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 55% 60% at 30% 62%, rgba(255,255,255,.07), transparent 70%),
        linear-gradient(160deg, rgba(18,21,31,.4) 0%, rgba(6,7,10,.85) 100%);
}
.acs-st__bg-grad::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 45% 55% at 30% 65%, var(--acs-theme), transparent 70%);
    opacity: .22;
}
.acs-st__bg-grad::after {
    /* パネル側の斜めの色帯 */
    content: ""; position: absolute; top: -10%; bottom: -10%; right: 30%; width: 26%;
    background: linear-gradient(180deg, var(--acs-theme), var(--acs-accent));
    opacity: .09; transform: skewX(-16deg);
}
.acs-st__bg-stripe {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(-58deg, rgba(255,255,255,.035) 0 2px, transparent 2px 16px);
    -webkit-mask: linear-gradient(90deg, #000 0%, transparent 65%);
            mask: linear-gradient(90deg, #000 0%, transparent 65%);
}
.acs-st__bg-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.4px);
    background-size: 14px 14px;
    -webkit-mask: radial-gradient(ellipse 40% 50% at 100% 100%, #000, transparent 70%);
            mask: radial-gradient(ellipse 40% 50% at 100% 100%, #000, transparent 70%);
}
.acs-st__bg-word {
    position: absolute; left: -10%; right: -10%; top: 8%;
    transform: rotate(-8deg) translate(calc(var(--mx) * -30px), calc(var(--my) * -20px));
    transition: transform .4s ease-out;
    display: flex; flex-direction: column; gap: .02em;
}
.acs-st__bg-line {
    display: flex; white-space: nowrap;
    font: italic 700 clamp(72px, 12vw, 190px)/0.95 "Oswald", "Impact", system-ui, sans-serif;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255,255,255,.07);
    animation: acs-marquee 60s linear infinite;
}
.acs-st__bg-line:nth-child(2) { animation-direction: reverse; animation-duration: 80s; -webkit-text-stroke-color: rgba(255,255,255,.045); }
.acs-st__bg-line:nth-child(3) { animation-duration: 100s; }
.acs-st__bg-line span { padding-right: .4em; }
@keyframes acs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 上のバー ---------- */
.acs-st__top {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 18px 26px 0;
    position: relative; z-index: 3;
}
.acs-st__back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px 6px 12px; font-size: 13px; font-weight: 700;
    background: rgba(255,255,255,.08); border: 1px solid var(--acs-line);
    transform: skewX(-12deg); transition: background .2s, color .2s;
}
.acs-st__back:hover { background: var(--acs-theme); color: #0a0c11; }
.acs-st__file { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.acs-st__file-label { font-size: 11px; letter-spacing: .3em; color: var(--acs-mute); }
.acs-st__file-no { font-size: 22px; font-weight: 700; color: var(--acs-theme); font-style: italic; letter-spacing: .04em; }
.acs-st__faction {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
    padding: 3px 12px; border-left: 3px solid var(--acs-theme); background: rgba(255,255,255,.06);
}
.acs-st__faction img { width: 18px; height: 18px; object-fit: contain; }
.acs-st__nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.acs-st__navbtn {
    display: grid; place-items: center; width: 38px; height: 34px; font-size: 24px; line-height: 1; font-weight: 700;
    background: rgba(255,255,255,.08); border: 1px solid var(--acs-line);
    transform: skewX(-12deg); transition: background .2s, color .2s;
}
.acs-st__navbtn:hover { background: var(--acs-theme); color: #0a0c11; }
.acs-st__navcount { font-size: 14px; color: var(--acs-mute); letter-spacing: .1em; min-width: 3.4em; text-align: center; }

.acs-st__notice {
    grid-column: 1 / -1; margin: 12px 26px 0; padding: 8px 14px; font-size: 13px;
    background: rgba(123, 92, 255, .22); border: 1px solid rgba(160, 130, 255, .5); border-radius: 6px;
    position: relative; z-index: 3;
}

/* ---------- キャラ（左） ---------- */
.acs-st__view { position: relative; grid-column: 1; grid-row: 3; min-height: 520px; }
.acs-st__floor {
    position: absolute; left: 10%; right: 10%; bottom: 6%; height: 90px; border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--acs-theme), transparent 68%);
    opacity: .28; filter: blur(8px);
}
.acs-st__floor::after {
    content: ""; position: absolute; left: 12%; right: 12%; top: 40%; height: 26%; border-radius: 50%;
    border: 2px solid var(--acs-theme); opacity: .6;
}
.acs-st__2d, .acs-st__3d { position: absolute; inset: 0; transition: opacity .45s ease, visibility .45s; }
.acs-st--3d .acs-st__2d, .acs-st--2d .acs-st__3d { opacity: 0; visibility: hidden; pointer-events: none; }
.acs-st__3d .acs3d-view { position: absolute; inset: 0; }
.acs-st__img {
    position: absolute; inset: 4% 4% 7%; width: 92%; height: 89%;
    object-fit: contain; object-position: center bottom;
    filter: drop-shadow(0 0 18px rgba(0,0,0,.55)) drop-shadow(0 0 1px var(--acs-theme));
    opacity: 0; transform: translateX(-14px); transition: opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1);
    -webkit-user-drag: none; user-select: none;
}
.acs-st__img.is-active { opacity: 1; transform: none; }
.acs-st__thumbs {
    position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 10px; z-index: 3;
}
.acs-st__thumb {
    width: 54px; height: 54px; padding: 0; overflow: hidden;
    border: 2px solid rgba(255,255,255,.18) !important; background: rgba(0,0,0,.35) !important;
    transform: skewX(-8deg); opacity: .7; transition: opacity .2s, border-color .2s;
}
.acs-st__thumb img { width: 100%; height: 100%; object-fit: cover; transform: skewX(8deg) scale(1.15); }
.acs-st__thumb.is-active, .acs-st__thumb:hover { opacity: 1; border-color: var(--acs-theme) !important; }
.acs-st--3d .acs-st__thumbs { opacity: .55; }
.acs-st__mask {
    position: absolute; inset: 8% 14% 10%; display: grid; place-items: center;
    background: linear-gradient(135deg, #2b2d42, #3d2c5e 50%, #1f3b57);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.acs-st__mask span { font-size: clamp(90px, 14vw, 200px); font-weight: 900; color: #fff; text-shadow: 0 0 30px rgba(180,140,255,.9); animation: acs-float 2.4s ease-in-out infinite; }
.acs-st__mask--empty span { font: 700 28px "Oswald", sans-serif; letter-spacing: .3em; color: var(--acs-mute); text-shadow: none; animation: none; }
@keyframes acs-float { 50% { transform: translateY(-8px); } }

.acs-st__viewctl {
    position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 4;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.acs-st__seg { display: inline-flex; transform: skewX(-12deg); background: rgba(0,0,0,.45); border: 1px solid var(--acs-line); }
.acs-st__seg button { padding: 7px 16px; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--acs-mute); transition: background .2s, color .2s; }
.acs-st__seg button.is-on { background: var(--acs-theme); color: #0a0c11; }
.acs-st__motions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.acs-st__chip {
    padding: 6px 14px; font-size: 13px; font-weight: 700;
    background: rgba(0,0,0,.45); border: 1px solid var(--acs-line) !important;
    transform: skewX(-12deg); transition: background .2s, color .2s, border-color .2s;
}
.acs-st__chip:hover { border-color: var(--acs-theme) !important; }
.acs-st__chip.is-on { background: #fff; color: #0a0c11; }
.acs-st__tools { margin-left: auto; display: inline-flex; gap: 6px; }
.acs-st__tool {
    width: 38px; height: 38px; display: grid; place-items: center; font-size: 18px; line-height: 1;
    background: rgba(0,0,0,.45); border: 1px solid var(--acs-line) !important; border-radius: 50%;
    transition: background .2s, color .2s;
}
.acs-st__tool:hover, .acs-st__tool.is-on { background: var(--acs-theme); color: #0a0c11; }
.acs-st--2d .acs-st__tool[data-act="reset"], .acs-st--2d .acs-st__tool[data-act="spin"] { display: none; }
.acs-st__hint {
    position: absolute; right: 22px; top: 14px; z-index: 3; font-size: 12px; color: var(--acs-mute);
    animation: acs-hint 6s ease forwards;
}
.acs-st--2d .acs-st__hint { display: none; }
@keyframes acs-hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- ステータスパネル（右） ---------- */
.acs-st__panel {
    grid-column: 2; grid-row: 3;
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: 16px;
    padding: 26px 34px 26px 58px;
    min-height: 0;
}
.acs-st__panel::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(8,10,15,0) 0%, rgba(8,10,15,.78) 16%, rgba(8,10,15,.9) 100%);
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

.acs-st__badges { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.acs-st__rank {
    --rk: var(--acs-theme);
    position: relative; display: inline-grid; place-items: center; width: 58px; height: 58px; color: #0a0c11;
    background: var(--rk);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.acs-st__rank[data-rank="s"], .acs-st__rank[data-rank="ss"], .acs-st__rank[data-rank="sss"] { --rk: linear-gradient(135deg, #fff1a8, #ffc93a 45%, #ff8a2b); }
.acs-st__rank[data-rank="a"] { --rk: linear-gradient(135deg, #e8d4ff, #b67bff 50%, #7b45e6); }
.acs-st__rank[data-rank="b"] { --rk: linear-gradient(135deg, #d4f0ff, #56b8ff 50%, #2a7be0); }
.acs-st__rank[data-rank="c"] { --rk: linear-gradient(135deg, #e7ebf2, #a5afc2); }
.acs-st__rank b { font-size: 26px; font-weight: 700; font-style: italic; line-height: 1; transform: translateY(-5px); }
.acs-st__rank small { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 7px; line-height: 1; letter-spacing: .2em; font-weight: 800; }
.acs-st__attr {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; font-size: 13px; font-weight: 700;
    border: 1px solid var(--acs-line); background: rgba(255,255,255,.05); transform: skewX(-12deg);
}
.acs-st__attr i { width: 10px; height: 10px; border-radius: 50%; background: var(--acs-accent); box-shadow: 0 0 10px var(--acs-accent); }
.acs-st__epithet { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--acs-theme); }
.acs-st__epithet::before { content: "— "; opacity: .7; }
.acs-st.acs-st .acs-st__name {
    position: relative;
    font-size: clamp(34px, 4.2vw, 62px); font-weight: 900; font-style: italic; line-height: 1.08; letter-spacing: .02em;
    text-shadow: 0 4px 20px rgba(0,0,0,.5);
    word-break: keep-all; overflow-wrap: anywhere;
    padding-bottom: 12px;
}
.acs-st.acs-st .acs-st__name::after {
    content: ""; position: absolute; left: 2px; bottom: 0; width: 72px; height: 6px;
    background: var(--acs-theme); transform: skewX(-24deg);
}
.acs-st__name.is-hidden { letter-spacing: .25em; }
.acs-st__name-en { margin-top: 6px !important; font-size: 14px; letter-spacing: .32em; color: var(--acs-mute); text-transform: uppercase; }

.acs-st__power { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 8px 18px; }
.acs-st__power::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, var(--acs-theme), transparent 85%); opacity: .16; transform: skewX(-14deg);
    border-left: 4px solid var(--acs-theme);
}
.acs-st__power-label { font-size: 13px; font-weight: 700; letter-spacing: .15em; color: var(--acs-mute); }
.acs-st__power-num { font-size: 38px; line-height: 1; font-weight: 700; font-style: italic; color: var(--acs-theme); letter-spacing: .02em; }

.acs-st__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.acs-st__tabs button {
    padding: 7px 18px; font-size: 14px; font-weight: 700; letter-spacing: .06em;
    background: rgba(255,255,255,.06); color: var(--acs-mute);
    transform: skewX(-12deg); transition: background .2s, color .2s;
}
.acs-st__tabs button:hover { color: var(--acs-ink); }
.acs-st__tabs button.is-on { background: var(--acs-theme); color: #0a0c11; }

.acs-st__body { flex: 1; min-height: 0; overflow: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--acs-theme) transparent; }
.acs-st__pane { display: none; animation: acs-pane .35s ease; }
.acs-st__pane.is-on { display: block; }
@keyframes acs-pane { from { opacity: 0; transform: translateX(10px); } }

/* ステータス行（交互に濃淡） */
.acs-st__stats { display: flex; flex-direction: column; }
.acs-st__stat {
    display: grid; grid-template-columns: auto minmax(70px, 1fr) auto; align-items: center; gap: 14px;
    padding: 11px 14px;
}
.acs-st__stat:nth-child(odd) { background: rgba(255,255,255,.045); }
.acs-st__stat-label { font-size: 14px; font-weight: 700; white-space: nowrap; min-width: 4.5em; }
.acs-st__stat-bar { position: relative; height: 8px; background: rgba(255,255,255,.1); transform: skewX(-20deg); overflow: hidden; }
.acs-st__stat-bar i {
    position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct);
    background: linear-gradient(90deg, var(--acs-theme), var(--acs-theme) 70%, #fff);
    box-shadow: 0 0 12px var(--acs-theme);
    transition: width 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 80ms + 150ms);
}
.acs-st__stat-val { font-size: 20px; font-weight: 700; min-width: 3.2em; text-align: right; letter-spacing: .02em; }

.acs-st__profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px !important; }
.acs-st__profile > div { padding: 9px 14px; background: rgba(255,255,255,.05); border-left: 3px solid var(--acs-theme); }
.acs-st.acs-st .acs-st__profile dt { font-size: 11px; letter-spacing: .12em; color: var(--acs-mute); font-weight: 700; }
.acs-st.acs-st .acs-st__profile dd { font-size: 15px; font-weight: 700; }
.acs-st.acs-st .acs-st__excerpt { font-size: 14px; color: #d7dbe5; margin-bottom: 12px; }
.acs-st__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.acs-st.acs-st .acs-st__tags li { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--acs-theme); }

.acs-st__story { font-size: 15px; color: #dfe3ec; }
.acs-st.acs-st .acs-st__story p { margin: 0 0 1em; }
.acs-st.acs-st .acs-st__story h2, .acs-st.acs-st .acs-st__story h3 {
    margin: 1.2em 0 .6em; padding-left: 12px; border-left: 4px solid var(--acs-theme); font-size: 17px; font-weight: 800;
}
.acs-st__story a { color: var(--acs-theme); text-decoration: underline; }
.acs-st__story img, .acs-st__story iframe, .acs-st__story video { max-width: 100%; height: auto; border-radius: 8px; }
.acs-st.acs-st .acs-st__story ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }

.acs-st__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--acs-line); }
.acs-st__audio {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 700;
    background: rgba(255,255,255,.07); border: 1px solid var(--acs-line) !important; border-radius: 999px;
    transition: background .2s, color .2s;
}
.acs-st__audio.is-on { background: var(--acs-theme); color: #0a0c11; animation: acs-pulse 1.4s ease infinite; }
@keyframes acs-pulse { 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0), 0 0 18px var(--acs-theme); } }
.acs-st__vol { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.acs-st__vol input { width: 110px; accent-color: var(--acs-theme); }
.acs-st__goods {
    margin-left: auto; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
    background: #ff6f91; color: #fff !important; transition: transform .2s;
}
.acs-st__goods:hover { transform: translateY(-2px); }

.acs-st__toast {
    position: absolute; left: 50%; bottom: 80px; z-index: 20; transform: translateX(-50%);
    padding: 10px 18px; border-radius: 8px; font-size: 14px;
    background: rgba(0,0,0,.8); border: 1px solid var(--acs-line); transition: opacity .5s;
}
.acs-st__toast.is-out { opacity: 0; }

/* ---------- 登場アニメーション（JSが動いた時だけ） ---------- */
.acs-st:not(.is-shown) .acs-st__stat-bar i { width: 0; }
.acs-st .acs-st__head, .acs-st .acs-st__power, .acs-st .acs-st__tabs, .acs-st .acs-st__body, .acs-st .acs-st__foot {
    transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.acs-st[data-acs-init]:not(.is-shown) .acs-st__head,
.acs-st[data-acs-init]:not(.is-shown) .acs-st__power,
.acs-st[data-acs-init]:not(.is-shown) .acs-st__tabs,
.acs-st[data-acs-init]:not(.is-shown) .acs-st__body,
.acs-st[data-acs-init]:not(.is-shown) .acs-st__foot { opacity: 0; transform: translateX(36px); }
.acs-st.is-shown .acs-st__power { transition-delay: .08s; }
.acs-st.is-shown .acs-st__tabs { transition-delay: .16s; }
.acs-st.is-shown .acs-st__body { transition-delay: .24s; }
.acs-st.is-shown .acs-st__foot { transition-delay: .32s; }

/* ---------- フルスクリーン ---------- */
.acs-st.is-fullscreen { border-radius: 0; margin: 0; width: 100%; height: 100%; min-height: 100vh; }
.acs-st.is-pseudo-fs { position: fixed; inset: 0; z-index: 999999; height: 100vh; height: 100dvh; }
html.acs-noscroll, html.acs-noscroll body { overflow: hidden !important; }

/* ---------- スマホ・タブレット ---------- */
@media (max-width: 900px) {
    .acs-st {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        height: auto;
        min-height: 0;
        border-radius: 14px;
    }
    .acs-st__top { padding: 14px 16px 0; gap: 10px; }
    .acs-st__file-label { display: none; }
    .acs-st__view { grid-column: 1; grid-row: 3; min-height: 0; height: 64vh; height: 64svh; max-height: 620px; }
    .acs-st__panel { grid-column: 1; grid-row: 4; padding: 30px 18px 22px; }
    .acs-st__panel::before { clip-path: polygon(0 22px, 100% 0, 100% 100%, 0 100%); background: rgba(8,10,15,.92); }
    .acs-st__panel::after { display: none; }
    .acs-st__body { overflow: visible; max-height: none; }
    .acs-st__thumbs { left: 50%; top: auto; bottom: 66px; transform: translateX(-50%); flex-direction: row; }
    .acs-st__thumb { width: 44px; height: 44px; }
    .acs-st__viewctl { left: 12px; right: 12px; bottom: 12px; gap: 6px; }
    .acs-st__tool { width: 34px; height: 34px; font-size: 16px; }
    .acs-st__hint { display: none; }
    .acs-st__bg-grad::after { display: none; }
    .acs-st.is-fullscreen .acs-st__view { height: 100vh; height: 100dvh; max-height: none; }
    .acs-st.is-fullscreen .acs-st__panel { display: none; }
    .acs-st__power-num { font-size: 32px; }
    .acs-st__stat { gap: 10px; padding: 10px; }
    .acs-single-main { padding: 8px 0 32px; }
}
@media (max-width: 480px) {
    .acs-st__profile { grid-template-columns: 1fr; }
    .acs-st__vol input { width: 80px; }
    .acs-st__goods { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .acs-st__bg-line, .acs-st__mask span, .acs3d-ring { animation: none !important; }
}

/* =========================================================
   レーダーチャート（多角形グラフ）— プリセット5種
   ========================================================= */
.acs-st__radar { max-width: 400px; margin: 0 auto 8px; }
.acs-radar { --acs-theme: inherit; display: block; width: 100%; height: auto; overflow: visible; font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }
.acs-radar__grid polygon, .acs-radar__grid circle { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 1; }
.acs-radar__grid .lv0 { stroke: rgba(255,255,255,.3); stroke-width: 1.5; fill: rgba(255,255,255,.025); }
.acs-radar__grid line { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.acs-radar .shape { fill: var(--acs-theme); fill-opacity: .32; stroke: var(--acs-theme); stroke-width: 2; stroke-linejoin: round; }
.acs-radar .dot { fill: #fff; stroke: var(--acs-theme); stroke-width: 2; }
.acs-radar__data { transform-origin: 0 0; transition: transform 1s cubic-bezier(.2,.9,.25,1.15) .25s, opacity .4s ease .25s; }
.acs-st[data-acs-init]:not(.is-shown) .acs-radar__data { transform: scale(0) rotate(-20deg); opacity: 0; }
.acs-radar__labels text { fill: var(--acs-ink, #f3f5fa); font-size: 12px; font-weight: 700; }
.acs-radar__labels .val { fill: var(--acs-mute, #98a1b3); font-family: "Oswald", system-ui, sans-serif; font-weight: 500; font-size: 12.5px; letter-spacing: .04em; }
.acs-radar__labels .grd { font-family: "Oswald", "Impact", sans-serif; font-style: italic; font-size: 14px; fill: var(--acs-theme); }
.acs-radar__labels .grd-s { fill: #ffc93a; }
.acs-radar__labels .grd-a { fill: #c08bff; }
.acs-radar__labels .grd-b { fill: #56b8ff; }
.acs-radar__labels .grd-c { fill: #a5afc2; }
.acs-radar__labels .grd-d { fill: #6b7385; }

/* ① ヘキサ：いちばんゲームっぽい標準形 */
.acs-radar--hex .acs-radar__grid .lv1, .acs-radar--hex .acs-radar__grid .lv3 { fill: rgba(255,255,255,.03); }

/* ② ネオン：線だけ発光 */
.acs-radar--neon .acs-radar__grid polygon { stroke-dasharray: 2 5; }
.acs-radar--neon .acs-radar__grid .lv0 { stroke-dasharray: none; stroke: var(--acs-theme); stroke-opacity: .35; }
.acs-radar--neon .shape { fill-opacity: .08; stroke-width: 2.6; filter: drop-shadow(0 0 5px var(--acs-theme)) drop-shadow(0 0 12px var(--acs-theme)); }
.acs-radar--neon .dot { fill: var(--acs-theme); stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 0 6px var(--acs-theme)); }

/* ③ サークル：円の目盛り＋アクセント色 */
.acs-radar--circle .acs-radar__grid .lv0 { fill: rgba(255,255,255,.04); }
.acs-radar--circle .acs-radar__grid .lv2 { stroke-dasharray: 3 4; }
.acs-radar--circle .shape { fill: var(--acs-accent); fill-opacity: .28; stroke: var(--acs-accent); }
.acs-radar--circle .dot { stroke: var(--acs-accent); }

/* ④ ブレード：尖った星型 */
.acs-radar--blade .acs-radar__grid polygon { stroke: rgba(255,255,255,.08); }
.acs-radar--blade .acs-radar__grid .lv0 { stroke: rgba(255,255,255,.26); }
.acs-radar--blade .shape { fill-opacity: .6; stroke: #fff; stroke-width: 1.2; }
.acs-radar--blade .dot { fill: var(--acs-theme); stroke: #fff; stroke-width: 1.5; }

/* ⑤ クリスタル：多重ガラス */
.acs-radar--crystal .shape.layer0 { fill-opacity: .22; stroke-width: 2; }
.acs-radar--crystal .shape.layer1 { fill: var(--acs-accent); fill-opacity: .22; stroke: var(--acs-accent); stroke-opacity: .7; stroke-width: 1.2; }
.acs-radar--crystal .shape.layer2 { fill: #fff; fill-opacity: .18; stroke: #fff; stroke-opacity: .6; stroke-width: 1; }
.acs-radar--crystal .dot { fill: #fff; stroke-width: 1.5; }

/* レーダーと一緒の時はバーを小さめに */
.acs-st__stats.is-compact .acs-st__stat { padding: 6px 12px; }
.acs-st__stats.is-compact .acs-st__stat-label { font-size: 13px; }
.acs-st__stats.is-compact .acs-st__stat-val { font-size: 16px; }
.acs-st__stats.is-compact .acs-st__stat-bar { height: 6px; }

/* 管理画面のプリセット見本 */
.acs-radar-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.acs-radar-preset {
    position: relative; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 108px; min-height: 118px; padding: 8px; border-radius: 10px; cursor: pointer;
    background: #10131b; color: #dfe3ec; border: 2px solid #2a2f3d; font-weight: 600 !important;
}
.acs-radar-preset input { position: absolute; top: 6px; left: 6px; margin: 0 !important; }
.acs-radar-preset:has(input:checked) { border-color: var(--acs-theme); box-shadow: 0 0 0 3px rgba(0,0,0,.05), 0 0 14px -2px var(--acs-theme); }
.acs-radar-preset__svg { width: 80px; height: 80px; display: block; }
.acs-radar-preset small { font-size: 12px; color: #dfe3ec; }
.acs-radar-preset__inherit { font-size: 13px; }

/* 3D表示中もサムネは薄く見せて押せる（押すと2Dに切り替わる） */
.acs-st.acs-st--3d .acs-st__2d { opacity: 1; visibility: visible; pointer-events: none; z-index: 3; }
.acs-st.acs-st--3d .acs-st__2d .acs-st__img,
.acs-st.acs-st--3d .acs-st__2d .acs-st__mask { opacity: 0 !important; visibility: hidden; }
.acs-st.acs-st--3d .acs-st__thumbs { pointer-events: auto; opacity: .6; }
.acs-st.acs-st--3d .acs-st__thumbs:hover { opacity: 1; }
.acs-st.acs-st--3d .acs-st__thumb.is-active { border-color: rgba(255,255,255,.18) !important; }


/* =========================================================
   見切れ対策：画面の高さに合わせる
   ========================================================= */
@media (min-width: 901px) {
    .acs-st { height: clamp(540px, calc(100vh - 70px), 920px); height: clamp(540px, calc(100svh - 70px), 920px); }
    .acs-st__radar svg { max-height: min(330px, 36vh); margin: 0 auto; }
}
@media (min-width: 901px) and (max-height: 880px) {
    .acs-st__top { padding-top: 12px; }
    .acs-st__panel { gap: 10px; padding-top: 14px; padding-bottom: 16px; }
    .acs-st.acs-st .acs-st__name { font-size: clamp(30px, 3.4vw, 46px); padding-bottom: 8px; }
    .acs-st__rank { width: 48px; height: 48px; }
    .acs-st__rank b { font-size: 21px; }
    .acs-st__badges { margin-bottom: 4px; }
    .acs-st__power { padding: 4px 16px; }
    .acs-st__power-num { font-size: 30px; }
    .acs-st__name-en { margin-top: 2px !important; font-size: 12px; }
    .acs-st__radar svg { max-height: min(280px, 34vh); }
    .acs-st__viewctl { bottom: 14px; }
}
@media (min-width: 901px) and (max-height: 700px) {
    .acs-st__epithet, .acs-st__name-en { display: none; }
    .acs-st__radar svg { max-height: 30vh; }
}

/* =========================================================
   背景プリセット
   ========================================================= */

/* --- 宇宙 --- */
.acs-st--bg-space { background: #04050d; }
.acs-st--bg-space .acs-st__bg-stripe, .acs-st--bg-space .acs-st__bg-dots { display: none; }
.acs-st--bg-space .acs-st__bg-grad {
    background:
        radial-gradient(ellipse 45% 40% at 78% 18%, rgba(60,110,200,.22), transparent 70%),
        radial-gradient(ellipse 60% 50% at 22% 70%, rgba(110,60,190,.22), transparent 70%),
        linear-gradient(180deg, #080b1f 0%, #03040a 100%);
}
.acs-st--bg-space .acs-st__bg-grad::before { opacity: .28; }
.acs-st--bg-space .acs-st__bg-grad::after { display: none; }
.acs-st--bg-space .acs-st__bg-fx::before, .acs-st--bg-space .acs-st__bg-fx::after {
    content: ""; position: absolute; inset: -50%;
    background-image:
        radial-gradient(circle at 25px 35px, #fff 0 1.6px, transparent 2.2px),
        radial-gradient(circle at 110px 80px, #cfe0ff 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 180px 20px, #fff 0 1px, transparent 1.6px),
        radial-gradient(circle at 60px 150px, #ffe9c9 0 1.4px, transparent 2px),
        radial-gradient(circle at 150px 190px, #fff 0 1px, transparent 1.6px),
        radial-gradient(circle at 200px 120px, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 90px 210px, #d8e4ff 0 1.1px, transparent 1.7px),
        radial-gradient(circle at 15px 120px, #fff 0 .9px, transparent 1.5px);
    background-size: 230px 230px;
    animation: acs-drift 180s linear infinite, acs-twinkle 4s ease-in-out infinite alternate;
}
.acs-st--bg-space .acs-st__bg-fx::after { background-size: 370px 370px; opacity: .6; animation-duration: 260s, 6s; animation-delay: 0s, -2s; }
@keyframes acs-drift { to { transform: translate(230px, 115px); } }
@keyframes acs-twinkle { from { opacity: .45; } to { opacity: 1; } }
.acs-st--bg-space .acs-st__bg-line { -webkit-text-stroke-color: rgba(190,210,255,.06); }

/* --- サイバー --- */
.acs-st--bg-cyber { background: #02050b; }
.acs-st--bg-cyber .acs-st__bg-dots { display: none; }
.acs-st--bg-cyber .acs-st__bg-grad { background: radial-gradient(ellipse 70% 45% at 40% 0%, rgba(255,255,255,.06), transparent 70%), linear-gradient(180deg, #050a14, #010307); }
.acs-st--bg-cyber .acs-st__bg-grad::before { background: radial-gradient(ellipse 60% 40% at 35% 85%, var(--acs-theme), transparent 70%); opacity: .25; }
.acs-st--bg-cyber .acs-st__bg-grad::after { display: none; }
.acs-st--bg-cyber .acs-st__bg-stripe {
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px);
    -webkit-mask: none; mask: none; z-index: 2;
}
.acs-st--bg-cyber .acs-st__bg-fx {
    inset: auto -90% 0 -90%; height: 100%;
    background-image: linear-gradient(var(--acs-theme) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--acs-theme) 1.5px, transparent 1.5px);
    background-size: 64px 64px;
    opacity: .42;
    transform: perspective(600px) rotateX(52deg); transform-origin: 50% 100%;
    -webkit-mask: linear-gradient(to top, #000 10%, transparent 85%); mask: linear-gradient(to top, #000 10%, transparent 85%);
    animation: acs-grid 2.2s linear infinite;
}
@keyframes acs-grid { to { background-position: 0 64px, 0 0; } }
.acs-st--bg-cyber .acs-st__bg-word { opacity: .5; }
.acs-st--bg-cyber .acs-st__bg-line { -webkit-text-stroke-color: var(--acs-theme); opacity: .18; }

/* --- ポップ（明るい） --- */
.acs-st--bg-pop {
    --acs-ink: #1e1f2e; --acs-mute: #636879; --acs-line: rgba(0,0,0,.12);
    background: #fff4e2; color: var(--acs-ink); box-shadow: 0 30px 60px -30px rgba(120,80,40,.35);
}
.acs-st--bg-pop .acs-st__bg-grad { background: linear-gradient(135deg, #fff5e4 0%, #ffe4ef 50%, #e2f0ff 100%); }
.acs-st--bg-pop .acs-st__bg-grad::before { opacity: .35; }
.acs-st--bg-pop .acs-st__bg-grad::after { opacity: .14; }
.acs-st--bg-pop .acs-st__bg-stripe { background: repeating-linear-gradient(-58deg, rgba(0,0,0,.03) 0 12px, transparent 12px 34px); }
.acs-st--bg-pop .acs-st__bg-dots { background-image: radial-gradient(var(--acs-accent) 2.4px, transparent 2.8px); background-size: 18px 18px; opacity: .35; }
.acs-st--bg-pop .acs-st__bg-line { -webkit-text-stroke-color: rgba(0,0,0,.07); }
.acs-st--bg-pop .acs-st__bg-fx {
    background:
        radial-gradient(circle at 8% 18%, var(--acs-accent) 0 7px, transparent 8px),
        radial-gradient(circle at 52% 9%, var(--acs-theme) 0 9px, transparent 10px),
        radial-gradient(circle at 36% 88%, #ffd23d 0 6px, transparent 7px),
        radial-gradient(circle at 62% 64%, #4dc3ff 0 5px, transparent 6px),
        radial-gradient(circle at 18% 58%, #ffd23d 0 4px, transparent 5px),
        radial-gradient(circle at 90% 90%, var(--acs-theme) 0 6px, transparent 7px),
        linear-gradient(35deg, transparent 47%, var(--acs-accent) 47% 53%, transparent 53%) 44% 30% / 22px 22px no-repeat,
        linear-gradient(-25deg, transparent 45%, #4dc3ff 45% 55%, transparent 55%) 14% 80% / 26px 26px no-repeat,
        linear-gradient(70deg, transparent 45%, #ffd23d 45% 55%, transparent 55%) 70% 20% / 24px 24px no-repeat;
    animation: acs-bob 5s ease-in-out infinite alternate;
}
@keyframes acs-bob { to { transform: translateY(-10px); } }
.acs-st--bg-pop .acs-st__panel::before { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 16%, rgba(255,255,255,.88) 100%); }
.acs-st--bg-pop .acs-st__back, .acs-st--bg-pop .acs-st__navbtn, .acs-st--bg-pop .acs-st__faction,
.acs-st--bg-pop .acs-st__tabs button, .acs-st--bg-pop .acs-st__attr, .acs-st--bg-pop .acs-st__audio { background: rgba(0,0,0,.06); }
.acs-st--bg-pop .acs-st__seg, .acs-st--bg-pop .acs-st__chip, .acs-st--bg-pop .acs-st__tool { background: rgba(255,255,255,.85); }
.acs-st--bg-pop .acs-st__chip.is-on { background: var(--acs-ink); color: #fff; }
.acs-st--bg-pop .acs-st__stat:nth-child(odd), .acs-st--bg-pop .acs-st__profile > div, .acs-st--bg-pop .acs-st.acs-st .acs-st__tags li { background: rgba(0,0,0,.045); }
.acs-st--bg-pop .acs-st__stat-bar { background: rgba(0,0,0,.1); }
.acs-st.acs-st--bg-pop .acs-st__excerpt, .acs-st--bg-pop .acs-st__story { color: #34364a; }
.acs-st.acs-st--bg-pop .acs-st__name { text-shadow: 3px 3px 0 rgba(255,255,255,.9); }
.acs-st--bg-pop .acs-st__power-num, .acs-st--bg-pop .acs-st__file-no, .acs-st--bg-pop .acs-st__epithet,
.acs-st--bg-pop .acs-st__stat-val, .acs-st.acs-st--bg-pop .acs-st__tags li { text-shadow: 0 1px 0 rgba(0,0,0,.45), 1px 0 0 rgba(0,0,0,.25); }
.acs-st--bg-pop .acs-radar__grid polygon, .acs-st--bg-pop .acs-radar__grid circle { stroke: rgba(0,0,0,.14); }
.acs-st--bg-pop .acs-radar__grid .lv0 { stroke: rgba(0,0,0,.28); fill: rgba(255,255,255,.4); }
.acs-st--bg-pop .acs-radar__grid line { stroke: rgba(0,0,0,.1); }
.acs-st--bg-pop .acs-radar .shape { stroke: var(--acs-ink); stroke-opacity: .55; }
.acs-st--bg-pop .acs-st__floor { opacity: .4; }

/* --- 和風 --- */
.acs-st--bg-wa { background: #0e1430; }
.acs-st--bg-wa .acs-st__bg-dots { display: none; }
.acs-st--bg-wa .acs-st__bg-grad { background: linear-gradient(170deg, #17204a 0%, #0b1026 100%); }
.acs-st--bg-wa .acs-st__bg-grad::before { opacity: .15; }
.acs-st--bg-wa .acs-st__bg-grad::after { background: linear-gradient(180deg, #e2bd67, #8f6b2b); opacity: .12; }
.acs-st--bg-wa .acs-st__bg-stripe {
    --c: rgba(226,189,103,.09);
    background:
        radial-gradient(circle at 50% 100%, transparent 18%, var(--c) 19% 23%, transparent 24% 33%, var(--c) 34% 38%, transparent 39% 48%, var(--c) 49% 53%, transparent 54%) 0 0 / 84px 42px,
        radial-gradient(circle at 50% 100%, transparent 18%, var(--c) 19% 23%, transparent 24% 33%, var(--c) 34% 38%, transparent 39% 48%, var(--c) 49% 53%, transparent 54%) 42px 21px / 84px 42px;
    -webkit-mask: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); mask: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}
.acs-st--bg-wa .acs-st__bg-fx::before {
    content: ""; position: absolute; left: 31%; top: 50%; width: min(66vh, 540px); aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--acs-theme) 0 60%, transparent 71%);
    opacity: .22; filter: blur(1px);
}
.acs-st--bg-wa .acs-st__bg-fx::after {
    content: ""; position: absolute; left: 31%; top: 50%; width: min(74vh, 610px); aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%); border: 1.5px solid rgba(226,189,103,.35);
}
.acs-st--bg-wa .acs-st__bg-line { font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-style: normal; -webkit-text-stroke-color: rgba(226,189,103,.08); }

/* --- スタジオ --- */
.acs-st--bg-studio { background: #15171d; }
.acs-st--bg-studio .acs-st__bg-stripe, .acs-st--bg-studio .acs-st__bg-dots, .acs-st--bg-studio .acs-st__bg-word { display: none; }
.acs-st--bg-studio .acs-st__bg-grad { background: radial-gradient(ellipse 45% 75% at 31% 5%, rgba(255,255,255,.16), transparent 65%), linear-gradient(180deg, #24272f 0%, #0d0e12 100%); }
.acs-st--bg-studio .acs-st__bg-grad::before { opacity: .1; }
.acs-st--bg-studio .acs-st__bg-grad::after { display: none; }
.acs-st--bg-studio .acs-st__bg-fx::before {
    content: ""; position: absolute; left: 31%; top: -5%; width: 60%; height: 100%; transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 85%);
    clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
    filter: blur(6px);
}
.acs-st--bg-studio .acs-st__floor { opacity: .16; background: radial-gradient(ellipse at center, #fff, transparent 68%); }
.acs-st--bg-studio .acs-st__floor::after { border-color: rgba(255,255,255,.4); }

/* =========================================================
   管理画面：背景プリセットの見本
   ========================================================= */
.acs-bg-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.acs-bg-preset {
    position: relative; display: inline-flex !important; flex-direction: column; gap: 3px; width: 150px; padding: 6px 6px 8px; cursor: pointer;
    border-radius: 10px; background: #fff; border: 2px solid #dcdcde; font-weight: 400 !important; vertical-align: top;
}
.acs-bg-preset input { position: absolute; top: 10px; left: 10px; margin: 0 !important; z-index: 2; }
.acs-bg-preset:has(input:checked) { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; }
.acs-bg-preset b { font-size: 13px; }
.acs-bg-preset small { font-size: 11px; color: #646970; line-height: 1.4; }
.acs-bg-preset__sw { display: block; height: 64px; border-radius: 6px; background: #eee; position: relative; overflow: hidden; }
.acs-bg-preset--inherit .acs-bg-preset__sw { background: repeating-linear-gradient(45deg, #f0f0f1 0 8px, #fff 8px 16px); }
.acs-bg-sw--street { background: repeating-linear-gradient(-58deg, rgba(255,255,255,.06) 0 2px, transparent 2px 9px), radial-gradient(ellipse at 30% 70%, var(--acs-theme), transparent 60%), #0a0c11 !important; }
.acs-bg-sw--space { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 60%, #fff, transparent), radial-gradient(1px 1px at 35% 75%, #fff, transparent), radial-gradient(ellipse at 30% 70%, rgba(120,70,200,.6), transparent 60%), #05061a !important; }
.acs-bg-sw--cyber { background: linear-gradient(transparent 55%, rgba(0,0,0,0) 55%), linear-gradient(var(--acs-theme) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, var(--acs-theme) 1px, transparent 1px) 0 0 / 14px 14px, #02050b !important; }
.acs-bg-sw--cyber::after { content: ""; position: absolute; inset: 0 0 45% 0; background: #02050b; }
.acs-bg-sw--pop { background: radial-gradient(circle at 20% 30%, var(--acs-accent) 0 4px, transparent 5px), radial-gradient(circle at 70% 25%, #ffd23d 0 5px, transparent 6px), radial-gradient(circle at 55% 75%, #4dc3ff 0 4px, transparent 5px), linear-gradient(135deg, #fff5e4, #ffe4ef 50%, #e2f0ff) !important; }
.acs-bg-sw--wa { background: radial-gradient(circle at 35% 55%, var(--acs-theme) 0 18px, transparent 19px), radial-gradient(circle at 50% 100%, transparent 18%, rgba(226,189,103,.3) 19% 24%, transparent 25% 34%, rgba(226,189,103,.3) 35% 40%, transparent 41%) 0 0 / 22px 11px, #0e1430 !important; }
.acs-bg-sw--studio { background: radial-gradient(ellipse 40% 90% at 40% 0%, rgba(255,255,255,.35), transparent 70%), linear-gradient(180deg, #2a2d36, #0d0e12) !important; }
.acs-st-admin__range label { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; }
.acs-st-admin__range output { min-width: 3em; }