/* タイトル画面の「主役の絵」を組み立てる共通の部品(カード・HPバー・式のふきだし・キラキラ・光)。
   位置はタイトルの舞台(1280x720)の中の px で決める。ゲームごとに、中身を吟味して組み合わせる。 */
.hv-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hv { position: absolute; }
/* 数字カード(白。goldは金のカード=答え・ターゲット) */
.hv-card { position: absolute; box-sizing: border-box; border-radius: 20px; border: 6px solid var(--bd, #c8dcff); display: flex; align-items: center; justify-content: center; line-height: 1; font-weight: 900; color: var(--tx, #2d3d78);
    background: linear-gradient(165deg, #ffffff, var(--bg2, #e4ecff)); box-shadow: 0 9px 0 var(--sh, rgba(20,30,90,0.45)), 0 18px 26px rgba(0,0,0,0.42); text-shadow: 0 4px 0 #fff; transform: rotate(var(--r, 0deg)); }
.hv-card.gold { --bd: #ffe58a; --tx: #7a2a00; background: linear-gradient(160deg, #fff4b0, #ffc93d 55%, #e8a317); box-shadow: 0 9px 0 #a35c00, 0 0 34px 8px rgba(255,216,77,0.7), 0 18px 26px rgba(0,0,0,0.42); text-shadow: 0 4px 0 rgba(255,255,255,0.6); }
.hv-card.dark { --bd: #ffd24a; --tx: #ffd24a; background: linear-gradient(180deg, #3d4b44, #1f2a26); text-shadow: 0 3px 0 rgba(0,0,0,0.5); box-shadow: 0 9px 0 rgba(0,0,0,0.5), 0 0 26px 6px rgba(255,210,74,0.5), 0 18px 26px rgba(0,0,0,0.42); }
/* 式のふきだし(白いカプセル) */
.hv-pill { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; white-space: nowrap; padding: 0 28px; height: 56px; border-radius: 28px; font-weight: 900; font-size: 1.9rem; color: var(--tx, #2d3d78); letter-spacing: 1px;
    background: rgba(255,255,255,0.95); border: 4px solid var(--bd, #7ee8ff); box-shadow: 0 5px 0 rgba(0,0,0,0.3); }
/* 演算のコイン */
.hv-coin { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; line-height: 1; color: #4a2800; background: radial-gradient(circle at 35% 28%, #fff6b8, #ffd24a 55%, #e8a317); border: 5px solid #fff3b0; box-shadow: 0 7px 0 #a35c00, 0 0 0 4px rgba(255,214,100,0.35), 0 14px 22px rgba(0,0,0,0.45); text-shadow: 0 3px 0 rgba(255,255,255,0.55); }
/* HPバー */
.hv-hp { position: absolute; height: 30px; box-sizing: border-box; border-radius: 16px; background: rgba(0,0,0,0.5); border: 3px solid #fff; overflow: hidden; box-shadow: 0 4px 0 rgba(0,0,0,0.35); }
.hv-hp i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 12px; background: linear-gradient(#7be07f, #2e9d3a); }
.hv-hp b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 900; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,0.8); }
/* ぼうっとした光 */
.hv-glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--gc, rgba(255,226,122,0.75)) 0%, transparent 68%); animation: hvGlow 3s ease-in-out infinite; }
@keyframes hvGlow { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
/* ギザギザの爆発(ダメージ・コンボ) */
.hv-burst { position: absolute; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; line-height: 1; -webkit-text-stroke: 7px var(--sk, #b71c1c); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0,0,0,0.3);
    background: var(--bc, #ffd24a); clip-path: polygon(50% 0, 60% 22%, 82% 8%, 76% 32%, 100% 34%, 80% 50%, 100% 66%, 76% 68%, 82% 92%, 60% 78%, 50% 100%, 40% 78%, 18% 92%, 24% 68%, 0 66%, 20% 50%, 0 34%, 24% 32%, 18% 8%, 40% 22%); animation: hvPop 1.6s ease-in-out infinite; }
@keyframes hvPop { 0%,100% { transform: rotate(var(--r, 0deg)) scale(1); } 50% { transform: rotate(var(--r, 0deg)) scale(1.07); } }
.hv-bob { animation: hvBob 3.2s ease-in-out infinite; }
.hv-bob2 { animation: hvBob 2.6s ease-in-out -1s infinite; }
@keyframes hvBob { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-9px) rotate(var(--r, 0deg)); } }
.hv-star { position: absolute; color: #fff6c0; text-shadow: 0 0 10px #ffd84d, 0 0 18px #ffb300; animation: hvTw 2.4s ease-in-out infinite; }
@keyframes hvTw { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
/* 盤のマス(ブロック) */
.hv-cell { position: absolute; box-sizing: border-box; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,0.3); }
/* 本物のゲーム画面の切りぬき */
.hv-shot { position: absolute; box-sizing: border-box; border-radius: 18px; border: 5px solid #fff; background: #fff; object-fit: cover; transform: rotate(var(--r, 0deg));
    box-shadow: 0 9px 0 rgba(0,0,0,0.22), 0 18px 28px rgba(0,0,0,0.38); }