/* ================================================================
* sphere dex — Arena Glass Theme
* ----------------------------------------------------------------
* プロトタイプに install して使える、すりガラスUI + 虹色メダリオン。
* プレーンCSSのみ。React/Vue/素のHTML どれでも使える。
*
* 使い方:
*
* ← これ必須
* ...
* ...
*
*
* 前提:
* 1. 背景に何か (HDMIキャプチャ映像 / ゲーム画面 / 画像) が敷かれていること
* — すりガラスは下に何かないと効かない
* 2. 上にオーバーレイする UI を .sd-panel などで包む
* ================================================================ */
/* === Design Tokens ============================================== */
.sphere-theme {
/* 背景・パネル */
--sd-bg-deep: rgba(8, 12, 40, 0.76);
--sd-bg-panel: rgba(12, 18, 50, 0.78);
--sd-edge: rgba(140, 200, 255, 0.18);
--sd-edge-gold: rgba(255, 210, 120, 0.35);
/* テキスト */
--sd-ink: #EAF2FF;
--sd-ink-dim: rgba(234, 242, 255, 0.60);
--sd-ink-mute: rgba(234, 242, 255, 0.38);
/* アクセント（虹色メダリオンの3原色） */
--sd-elec: #4DB7FF; /* electric blue — 自分側 */
--sd-magenta: #FF4DA6; /* stadium pink — 相手側 */
--sd-gold: #FFCD5E; /* gold — 威力・先制・BEST */
/* 判定色 */
--sd-crit: #FF5477;
--sd-warn: #FFB85A;
--sd-ok: #7DE2A5;
/* タイポ */
--sd-font-mono: "JetBrains Mono", "DM Mono", ui-monospace, monospace;
--sd-font-sans: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
--sd-font-display: "Space Grotesk", "Zen Kaku Gothic New", system-ui, sans-serif;
color: var(--sd-ink);
font-family: var(--sd-font-sans);
}
/* === すりガラスパネル ============================================
* 下レイヤに何か（ゲーム画面など）が敷かれている前提。
* backdrop-filter で下レイヤをぼかす + 半透明ネイビー + 細い青エッジ。
* ================================================================ */
.sd-panel {
background: var(--sd-bg-panel);
backdrop-filter: blur(22px) saturate(150%);
-webkit-backdrop-filter: blur(22px) saturate(150%);
border: 1px solid var(--sd-edge);
border-radius: 10px;
box-shadow:
0 8px 30px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
color: var(--sd-ink);
position: relative;
}
/* gold エッジバリアント (中央の対面パネル用) */
.sd-panel--gold {
border-color: var(--sd-edge-gold);
}
/* アクティブ状態（電気ブルーのグロー） */
.sd-panel--active {
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(77, 183, 255, 0.27),
0 0 30px rgba(77, 183, 255, 0.2);
}
/* アクティブ（マゼンタ＝相手側） */
.sd-panel--active-opp {
border-color: rgba(255, 77, 166, 0.53);
background: linear-gradient(135deg, rgba(255, 77, 166, 0.09), var(--sd-bg-panel));
}
/* 対面パネル用の内側グロー背景（中央だけで使う） */
.sd-panel--arena {
background: linear-gradient(180deg, rgba(18, 24, 60, 0.85), rgba(10, 14, 40, 0.85));
overflow: visible;
}
.sd-panel--arena::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(ellipse 120% 100% at 50% 110%, rgba(77, 183, 255, 0.2), transparent 55%),
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 77, 166, 0.13), transparent 60%);
}
/* === 虹色メダリオン (先制バッジ) ================================
* 外周: conic-gradient (gold → magenta → elec → gold)
* 内側: 暗いネイビー radial
* 回りに gold の glow
* ----------------------------------------------------------------
*
* ================================================================ */
.sd-medallion {
width: 70px;
height: 70px;
border-radius: 50%;
padding: 2px;
background: conic-gradient(
from 90deg,
var(--sd-gold),
var(--sd-magenta),
var(--sd-elec),
var(--sd-gold)
);
box-shadow: 0 0 25px rgba(255, 205, 94, 0.4);
display: inline-flex;
align-items: center;
justify-content: center;
}
.sd-medallion__inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #1a2050, #0a0e28);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sd-medallion__title {
font-family: var(--sd-font-display);
font-size: 14px;
font-weight: 700;
color: var(--sd-gold);
line-height: 1;
}
.sd-medallion__sub {
font-family: var(--sd-font-mono);
font-size: 9px;
color: var(--sd-ink-dim);
letter-spacing: 1px;
margin-top: 2px;
}
/* 回転アニメ（欲しければ付ける） */
.sd-medallion--spin {
animation: sd-medallion-spin 8s linear infinite;
}
.sd-medallion--spin .sd-medallion__inner {
/* 中身は回さない */
animation: sd-medallion-spin 8s linear infinite reverse;
}
@keyframes sd-medallion-spin {
to { transform: rotate(360deg); }
}
/* === 小ドットロゴ（sphere·dex のヘッダ円）===================== */
.sd-logo-dot {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
var(--sd-gold),
var(--sd-magenta),
var(--sd-elec),
var(--sd-gold)
);
box-shadow: 0 0 10px rgba(255, 205, 94, 0.53);
vertical-align: middle;
}
/* === アリーナ床グロー ==========================================
* 画面下に敷くスタジアム床の光リング。body直下に置く。
*
* ================================================================ */
.sd-stage-floor {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 280px;
pointer-events: none;
background:
radial-gradient(ellipse 900px 280px at 50% 100%,
rgba(77, 183, 255, 0.35) 0%,
rgba(255, 77, 166, 0.18) 50%,
transparent 100%);
z-index: 0;
}
/* 同心リング付き版（より強めの装飾）— svgパターン */
.sd-stage-floor--rings {
background-image:
radial-gradient(ellipse 900px 280px at 50% 100%,
rgba(77, 183, 255, 0.35) 0%,
rgba(255, 77, 166, 0.18) 50%,
transparent 100%),
radial-gradient(ellipse 740px 235px at 50% 100%, transparent 99.3%, rgba(77, 183, 255, 0.2) 99.4%, transparent 100%),
radial-gradient(ellipse 580px 190px at 50% 100%, transparent 99.2%, rgba(255, 77, 166, 0.16) 99.3%, transparent 100%),
radial-gradient(ellipse 420px 145px at 50% 100%, transparent 99.0%, rgba(77, 183, 255, 0.16) 99.1%, transparent 100%);
}
/* === タイプチップ（平行四辺形）================================
* ドラゴン
* ================================================================ */
.sd-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px 2px 5px;
background: linear-gradient(180deg, var(--c, #888), color-mix(in srgb, var(--c, #888) 87%, black));
color: #fff;
font-family: var(--sd-font-sans);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.5px;
box-shadow: 0 2px 4px color-mix(in srgb, var(--c, #888) 40%, transparent);
clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
border-radius: 3px;
}
.sd-chip::before {
content: "";
width: 4px; height: 4px; border-radius: 1px;
background: #fff; opacity: 0.7;
}
/* === ダメージバー ===============================================
*
* ================================================================ */
.sd-bar {
position: relative;
height: 8px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--sd-edge);
overflow: hidden;
}
.sd-bar__max {
position: absolute; inset: 0 auto 0 0;
background: color-mix(in srgb, var(--c, #fff) 50%, transparent);
}
.sd-bar__min {
position: absolute; inset: 0 auto 0 0;
background: var(--c, #fff);
box-shadow: 0 0 8px color-mix(in srgb, var(--c, #fff) 53%, transparent);
}
.sd-bar__hpline {
position: absolute; left: 100%; top: -2px; bottom: -2px; width: 2px;
background: var(--sd-gold);
box-shadow: 0 0 6px var(--sd-gold);
}
/* === ユーティリティ ============================================= */
.sd-micro {
font-family: var(--sd-font-mono);
font-size: 9px;
letter-spacing: 2.2px;
color: var(--sd-ink-mute);
text-transform: uppercase;
font-weight: 600;
}
.sd-display {
font-family: var(--sd-font-display);
font-weight: 700;
letter-spacing: -0.3px;
}
.sd-mono {
font-family: var(--sd-font-mono);
}
.sd-ink-dim { color: var(--sd-ink-dim); }
.sd-ink-mute { color: var(--sd-ink-mute); }
.sd-elec { color: var(--sd-elec); }
.sd-magenta { color: var(--sd-magenta); }
.sd-gold { color: var(--sd-gold); }
/* ネオングロー付きテキスト（ポケモン名用） */
.sd-glow-elec { text-shadow: 0 0 20px rgba(77, 183, 255, 0.4); }
.sd-glow-magenta { text-shadow: 0 0 20px rgba(255, 77, 166, 0.33); }
.sd-glow-gold { text-shadow: 0 0 20px rgba(255, 205, 94, 0.4); }
/* === プライマリボタン =========================================== */
.sd-btn-primary {
background: linear-gradient(135deg, var(--sd-elec), var(--sd-magenta));
border: none;
color: #fff;
font-family: var(--sd-font-display);
font-weight: 700;
font-size: 11px;
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
letter-spacing: 0.5px;
box-shadow: 0 2px 12px rgba(255, 77, 166, 0.33);
}
.sd-btn-primary:hover {
filter: brightness(1.1);
}
.sd-btn-ghost {
background: transparent;
border: 1px solid var(--sd-edge);
color: var(--sd-ink-dim);
font-family: var(--sd-font-mono);
font-size: 9px;
letter-spacing: 1.2px;
padding: 4px 8px;
border-radius: 5px;
cursor: pointer;
text-transform: uppercase;
}
.sd-btn-ghost:hover {
border-color: var(--sd-elec);
color: var(--sd-elec);
}
/* === セレクト（ガラス風）======================================= */
.sd-select {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--sd-edge);
color: var(--sd-ink);
font-family: var(--sd-font-mono);
font-size: 11px;
padding: 4px 8px;
border-radius: 5px;
}
/* === エフェクトバッジ（"抜群" など）============================ */
.sd-effect-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
background: linear-gradient(135deg, var(--sd-crit), var(--sd-magenta));
color: #fff;
font-family: var(--sd-font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
box-shadow: 0 0 10px rgba(255, 84, 119, 0.4);
}