/* Fun & Growth Lab 共通のタイトル画面(見た目の型)。
   既存のタイトル画面の上に重ねて表示し、ボタンは裏の本物のボタンを押すだけ(ゲームの動きは変えない)。
   色は --fh(色相)で決まる。大きな題名・主役(カードの扇など)・大きな「はじめる」・小さなサブボタンの列。 */
.fgt-all > :not(.fgt), .fgt-hide { visibility: hidden !important; }
.fgt { pointer-events: auto; position: absolute; inset: 0; z-index: 9000; overflow: hidden; font-family: 'M PLUS Rounded 1c', sans-serif; color: #fff; --fh: 200; }
.fgt-bg { position: absolute; inset: 0; }
.fgt-shade { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 38%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.28) 100%), linear-gradient(180deg, rgba(0,0,0,0.30) 0, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.30) 100%); }
.fgt-stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: 50% 50%; }
.fgt-tag { position: absolute; left: 0; right: 0; top: 12px; text-align: center; font-weight: 900; font-size: 1.55rem; letter-spacing: 14px; text-indent: 14px; color: #ffe27a; text-shadow: 0 3px 0 rgba(0,0,0,0.5), 0 0 14px rgba(0,0,0,0.5); }
.fgt-name { position: absolute; left: 0; right: 0; top: 46px; text-align: center; font-size: 7rem; line-height: 1; white-space: nowrap; letter-spacing: 2px; }
.fgt-sub { position: absolute; left: 0; right: 0; text-align: center; }
.fgt-sub span { display: inline-block; padding: 6px 30px 8px; border-radius: 50px; font-weight: 900; font-size: 1.5rem; letter-spacing: 3px; color: #fff; background: rgba(0,0,0,0.42); border: 3px solid rgba(255,255,255,0.6); text-shadow: 0 2px 0 rgba(0,0,0,0.5); box-shadow: 0 4px 0 rgba(0,0,0,0.3); }
.fgt-sp { display: inline-block; width: .35em; }
.fgt-l { position: relative; display: inline-block; font-weight: 900; color: transparent; animation: fgtBob 3s ease-in-out infinite; animation-delay: calc(1.4s + var(--i) * 0.14s); }
.fgt-l::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; color: var(--tstroke, hsl(var(--fh) 76% 18%)); -webkit-text-stroke: .13em var(--tstroke, hsl(var(--fh) 76% 18%)); text-shadow: 0 .07em 0 var(--tshadow, hsl(var(--fh) 79% 11%)), 0 .13em .2em rgba(0,0,0,0.45); }
.fgt-l::after { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: 1; color: transparent; background: var(--tfill, linear-gradient(180deg,#fffbe0 0%,#ffe27a 36%,#ffb81f 58%,#ffd95a 100%)); -webkit-background-clip: text; background-clip: text; }
.fgt-in .fgt-l { animation: fgtIn 0.55s cubic-bezier(.2,.9,.3,1.4) backwards, fgtBob 3s ease-in-out infinite; animation-delay: calc(0.2s + var(--i) * 0.07s), calc(1.4s + var(--i) * 0.14s); }
@keyframes fgtIn { 0% { transform: translateY(-90px) rotate(-12deg) scale(0.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fgtBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.fgt-hero { position: absolute; left: 50%; top: 232px; width: 0; height: 0; pointer-events: none; }
.fgt-card { position: absolute; left: -84px; top: 0; width: 168px; height: 224px; box-sizing: border-box; border-radius: 22px; border: 6px solid hsl(var(--fh) 85% 82%); display: flex; align-items: center; justify-content: center; padding-bottom: 30px;
    background: linear-gradient(165deg,#ffffff,hsl(calc(var(--fh) + 4) 90% 90%)); transform: translate(var(--x),var(--y)) rotate(var(--r)); transform-origin: 50% 140%; box-shadow: 0 10px 0 hsl(calc(var(--fh) + 8) 60% 30% / 0.55), 0 20px 30px rgba(0,0,0,0.45); }
.fgt-card.l { justify-content: flex-start; padding-left: 16px; } .fgt-card.r { justify-content: flex-end; padding-right: 16px; }
.fgt-card b { font-size: var(--fs); font-weight: 900; line-height: 1; color: hsl(calc(var(--fh) + 6) 55% 28%); text-shadow: 0 5px 0 #fff; animation: fgtBob 3.2s ease-in-out infinite; }
.fgt-card.gold { border-color: #ffe58a; background: linear-gradient(160deg,#fff4b0,#ffc93d 55%,#e8a317); box-shadow: 0 10px 0 #a35c00, 0 0 36px 10px rgba(255,216,77,0.75), 0 20px 30px rgba(0,0,0,0.45); }
.fgt-card.gold b { color: #7a2a00; text-shadow: 0 5px 0 rgba(255,255,255,0.6); }
.fgt-in .fgt-card { animation: fgtCardIn 0.7s cubic-bezier(.2,1.2,.3,1) 0.5s backwards; }
@keyframes fgtCardIn { from { transform: translate(var(--x),420px) rotate(0deg); opacity: 0; } }
.fgt-op { position: absolute; left: -58px; top: 166px; width: 116px; height: 116px; border-radius: 50%; z-index: 20; display: flex; align-items: center; justify-content: center; font-size: 4.6rem; font-weight: 900; line-height: 1; color: #4a2800;
    background: radial-gradient(circle at 35% 28%,#fff6b8,#ffd24a 55%,#e8a317); border: 6px solid #fff3b0; box-shadow: 0 8px 0 #a35c00, 0 0 0 5px rgba(255,214,100,0.35), 0 16px 26px rgba(0,0,0,0.45); text-shadow: 0 3px 0 rgba(255,255,255,0.55); }
.fgt-menu { position: absolute; left: 50%; top: 514px; width: 1100px; margin-left: -550px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fgt-btn { position: relative; font-family: inherit; font-weight: 900; color: #fff; cursor: pointer; overflow: hidden; white-space: nowrap; -webkit-tap-highlight-color: transparent; text-shadow: 0 2px 0 rgba(0,0,0,0.45); }
.fgt-btn.primary { width: 560px; height: 84px; font-size: 2.6rem; letter-spacing: 16px; text-indent: 6px; border-radius: 20px; color: #4a2800; text-shadow: 0 2px 0 rgba(255,255,255,0.55); border: 3px solid #fff3b0;
    background: linear-gradient(180deg,#fff0a0 0%,#ffcb3d 48%,#f09a1a 100%); box-shadow: 0 6px 0 #a35c00, 0 0 0 3px rgba(255,214,100,0.35), 0 12px 26px rgba(0,0,0,0.4); animation: fgtPulse 1.8s ease-in-out infinite; }
.fgt-btn.primary::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 38%; left: -60%; transform: skewX(-22deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,0.75),transparent); animation: fgtShine 3s ease-in-out infinite; }
.fgt-btn.primary:active { transform: translateY(5px); box-shadow: 0 1px 0 #a35c00; animation: none; }
@keyframes fgtShine { 0%,55% { left: -60%; } 100% { left: 130%; } }
@keyframes fgtPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.fgt-row { display: flex; gap: 10px; justify-content: center; }
.fgt-btn.mini { height: 50px; min-width: 160px; padding: 0 14px 0 46px; font-size: .98rem; text-align: left; border-radius: 14px; border: 2px solid rgba(255,214,100,0.85);
    background: linear-gradient(180deg, hsl(calc(var(--fh) + 6) 63% 36% / 0.86), hsl(calc(var(--fh) + 8) 72% 20% / 0.92)); box-shadow: 0 4px 0 hsl(calc(var(--fh) + 8) 79% 11% / 0.8), inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 18px rgba(0,0,0,0.3); }
.fgt-btn.mini::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 40px; background: rgba(255,214,100,0.18); border-right: 2px solid rgba(255,214,100,0.5); }
.fgt-btn.mini .ic { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; display: flex; align-items: center; justify-content: center; color: #ffd24a; }
.fgt-btn.mini .ic svg { width: 24px; height: 24px; }
.fgt-btn.mini:hover { filter: brightness(1.18); }
.fgt-btn.mini:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(calc(var(--fh) + 8) 79% 11% / 0.8); }
.fgt-btn.mini.sub { background: linear-gradient(180deg, rgba(40,110,90,0.88), rgba(14,60,50,0.94)); }
.fgt-btn.hide { display: none; }
/* ===== 中央たて並びレイアウト(layout:'column'): 背景の絵が「まん中にボタンのたて並び」前提で描かれているゲーム用 ===== */
.fgt.col .fgt-menu { top: 286px; width: 400px; margin-left: -200px; gap: 8px; }
.fgt.col .fgt-btn.primary { width: 400px; height: 68px; font-size: 2.1rem; letter-spacing: 12px; border-radius: 18px; }
.fgt.col .fgt-row { flex-direction: column; width: 400px; gap: 8px; }
.fgt.col .fgt-btn.mini { width: 100%; height: 46px; font-size: 1.05rem; }
.fgt .hv-thumb { display: none; }

/* ============================================================================================
   ゲームごとのボタンの見た目(スキン)。FGLTitle.mount({ skin: 'board' })
   art:true は「背景いっぱいの絵(盤面入り)」用の配置: 題名をうえ、ボタンを下に寄せて、絵のまん中をあける
   ============================================================================================ */
.fgt.art .fgt-tag { top: 8px; font-size: 1.3rem; }
.fgt.art .fgt-name { top: 34px; }
.fgt.art .fgt-sub { display: none; }
.fgt.art .fgt-shade { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.58) 100%); }
.fgt.art .fgt-menu { top: 548px; gap: 14px; }
.fgt.art .fgt-btn.primary { width: 470px; height: 72px; font-size: 2.1rem; letter-spacing: 14px; }
.fgt.art .fgt-btn.mini { height: 48px; min-width: 150px; }
.fgt.art .fgt-name { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)); }
.fgt[class*="sk-"] .fgt-btn { overflow: visible; }
.fgt[class*="sk-"] .fgt-btn.primary::after { display: none; }

/* ---------- art:'compact' = 背景いっぱいの絵の上に、ボタンを「下のまん中に小さくまとめる」(シンプルな共通ボタン+うす暗いボード) ---------- */
.fgt.art-c .fgt-tag { top: 8px; font-size: 1.3rem; }
.fgt.art-c .fgt-name { top: 32px; }
.fgt.art-c .fgt-sub { display: none; }
.fgt.art-c .fgt-menu { top: auto; bottom: 16px; left: 50%; width: auto; margin-left: 0; transform: translateX(-50%); gap: 10px; padding: 12px 14px 14px;
    background: rgba(14,20,38,0.62); border: 2px solid rgba(255,255,255,0.3); border-radius: 22px; box-shadow: 0 8px 22px rgba(0,0,0,0.38); }
.fgt.art-c .fgt-btn.primary { width: 380px; height: 58px; font-size: 1.85rem; letter-spacing: 12px; border-radius: 14px; }
.fgt.art-c .fgt-row { gap: 8px; flex-wrap: nowrap; }
.fgt.art-c .fgt-btn.mini { height: 40px; min-width: 0; padding: 0 12px 0 38px; font-size: .86rem; border-radius: 11px; }
.fgt.art-c .fgt-btn.mini::before { width: 32px; }
.fgt.art-c .fgt-btn.mini .ic { width: 32px; }
.fgt.art-c .fgt-btn.mini .ic svg { width: 18px; height: 18px; }

/* ---------- board: ぶんすうスロットと おなじ つくり(白いボードの上に、まるいバッジつきの はじめる・ひろいボタン2つ・ちいさなボタン) ---------- */
.fgt.sk-board .fgt-menu { width: 580px; align-items: stretch; gap: 10px; padding: 12px 14px 16px; background: rgba(255,250,238,0.95); border: 4px solid #fff; border-radius: 26px;
    box-shadow: 0 8px 0 rgba(120,70,20,0.35), 0 14px 26px rgba(30,20,10,0.38); }
.fgt.sk-board .fgt-btn { font-weight: 900; }
.fgt.sk-board .fgt-btn.primary { width: 100%; height: 70px; margin: 0; font-size: 2.1rem; letter-spacing: 10px; text-indent: 36px; border-radius: 35px; color: #fff; border: 4px solid #fff;
    background: linear-gradient(#ffb25a, #f08a1a); text-shadow: 0 3px 0 rgba(120,50,0,0.4); box-shadow: 0 6px 0 #b8600e, 0 10px 18px rgba(150,70,20,0.35); animation: fgtPulse 2s ease-in-out infinite; }
.fgt.sk-board .fgt-btn.primary::before { content: '▶'; position: absolute; left: 10px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: #fff; color: #f08a1a;
    font-size: 1.5rem; letter-spacing: 0; text-indent: 3px; line-height: 48px; text-shadow: none; box-shadow: inset 0 -4px 0 #ffe0b8, 0 3px 0 rgba(120,50,0,0.3); }
.fgt.sk-board .fgt-btn.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #b8600e; animation: none; }
.fgt.sk-board .fgt-row { flex-wrap: wrap; width: 100%; gap: 9px; }
.fgt.sk-board .fgt-btn.mini { flex: 1 1 auto; height: 44px; min-width: 0; padding: 0 12px 0 44px; border: 3px solid #fff; border-radius: 22px; font-size: .95rem; text-align: center; color: #4a4452; text-shadow: none;
    background: linear-gradient(#ffffff, #e8f0fa); box-shadow: 0 5px 0 #9fb4d0, 0 8px 14px rgba(40,60,90,0.2); }
.fgt.sk-board .fgt-btn.mini::before { left: 5px; top: 50%; bottom: auto; width: 30px; height: 30px; margin-top: -15px; border: none; border-radius: 50%; background: #7cbaf0; box-shadow: 0 2px 0 rgba(0,0,0,0.18); }
.fgt.sk-board .fgt-btn.mini .ic { left: 5px; top: 50%; bottom: auto; width: 30px; height: 30px; margin-top: -15px; color: #fff; }
.fgt.sk-board .fgt-btn.mini .ic svg { width: 17px; height: 17px; stroke-width: 2.6; }
/* 1つめ=チュートリアル(クリーム色) 2つめ=ランキング(青): 横に ひろい */
.fgt.sk-board .fgt-btn.mini:nth-child(-n+2) { flex: 1 1 calc(50% - 5px); height: 50px; font-size: 1.05rem; }
.fgt.sk-board .fgt-btn.mini:nth-child(1) { color: #6a3a10; background: linear-gradient(#fffbe8, #fff0c4); box-shadow: 0 5px 0 #e8b040, 0 8px 14px rgba(150,70,20,0.25); }
.fgt.sk-board .fgt-btn.mini:nth-child(1)::before { background: #ffc43a; }
.fgt.sk-board .fgt-btn.mini:nth-child(2) { color: #fff; background: linear-gradient(#6db2f4, #2f7fd0); border-color: #fff; box-shadow: 0 5px 0 #24558f, 0 8px 14px rgba(30,70,130,0.3); text-shadow: 0 2px 0 rgba(20,50,100,0.45); }
.fgt.sk-board .fgt-btn.mini:nth-child(2)::before { background: #fff; }
.fgt.sk-board .fgt-btn.mini:nth-child(2) .ic { color: #e08a00; }
/* プレーヤー名は みどりの黒板ではなく うす青、INDEXは うすみどり */
.fgt.sk-board .fgt-btn.mini.sub { color: #2f4a6a; background: linear-gradient(#fff, #eef6fe); box-shadow: 0 5px 0 #b8d4ee, 0 8px 14px rgba(40,80,130,0.2); }
.fgt.sk-board .fgt-btn.mini:last-child { color: #2f5a48; background: linear-gradient(#f4fff8, #e0f4e6); box-shadow: 0 5px 0 #8fc0a8, 0 8px 14px rgba(20,90,50,0.2); }
.fgt.sk-board .fgt-btn.mini:last-child::before { background: #5cc08a; }
.fgt.sk-board .fgt-btn.mini:hover, .fgt.sk-board .fgt-btn.primary:hover { filter: brightness(1.06); }
.fgt.sk-board .fgt-btn.mini:active { transform: translateY(4px); box-shadow: 0 1px 0 #9fb4d0; }
.fgt.art-c.sub-on .fgt-sub { display: block; }
.fgt.art-c.sk-board .fgt-menu { margin-left: 0; }