/* ぶんすうスロット: ゲーム画面・ショップの見た目(白基調+ひさし+いちごの赤)
   - スマホ(よこ向き)でも読めるように、文字は大きめ(最小でも約18px、おもな文字は24px以上)
   - 画面は 1280x720。左パネル280 + 盤面720 + 右パネル280。盤面の座標は fraction.js の定数と同じ */

:root {
    --h: 330; --led: #d6e8fa; --led-soft: rgba(255,179,209,0.45);
    /* ひさし(赤とクリームのしましま+ふち取りの波形)。どの画面も これを使う */
    --awning: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='48' viewBox='0 0 128 48'%3E%3Crect width='64' height='26' fill='%234a9be8'/%3E%3Crect x='64' width='64' height='26' fill='%23fff3dc'/%3E%3Cpath d='M0 26A32 20 0 0 0 64 26Z' fill='%234a9be8'/%3E%3Cpath d='M64 26A32 20 0 0 0 128 26Z' fill='%23fff3dc'/%3E%3Cpath d='M0 26A32 20 0 0 0 64 26M64 26A32 20 0 0 0 128 26' fill='none' stroke='%232a68b0' stroke-width='3'/%3E%3Cpath d='M0 1.5H128' stroke='%232a68b0' stroke-width='3'/%3E%3Crect y='20' width='128' height='6' fill='%232a68b0' opacity='.18'/%3E%3C/svg%3E");
}

/* ---- 分数(たてに書く) ---- */
.fr { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; vertical-align: middle; }
.fr i { display: block; font-style: normal; min-width: 1.05em; text-align: center; padding: 0 0.05em; }
.fr i:first-child { border-bottom: .09em solid currentColor; padding-bottom: .07em; margin-bottom: .07em; }
.pc .fr { font-size: .62em; }

/* ---- ケーキの絵 ---- */
.ck { width: 100%; height: 100%; display: block; --ck: #fff08a; }
.ck .pl { fill: #fff; stroke: #e4d3c6; stroke-width: 3; }
.ck .bd { fill: #f7ede0; }
.ck .sl path { transition: fill .3s; }
.ck .sl .tp { fill: transparent; } .ck .sl .rm { fill: transparent; }
.ck .sl.on .tp { fill: var(--ck); } .ck .sl.on .rm { fill: #b8d4ee; }
.ck .gl { stroke: #b5835a; stroke-width: 1.6; opacity: .5; stroke-linecap: round; }
.ck .sb { display: none; }
.ck .ct { fill: #fff; stroke: #e0c8b0; stroke-width: 2; opacity: .9; }
.ck.whole .ct { fill: #ffd24a; stroke: #d99a10; }

/* ==================== 画面全体 ==================== */
#game-layer { position: relative; background: #fffdfe; color: #2a3a55; }
#game-layer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 48px; z-index: 9; pointer-events: none; }
#game-layer::after { display: none; }
#game-area { background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%),
        conic-gradient(rgba(255,170,200,0.13) 25%, rgba(255,255,255,0) 0 50%, rgba(255,170,200,0.13) 0 75%, rgba(255,255,255,0) 0) 0 0 / 88px 88px, #fffdfe; }
#game-area::before, #game-area::after { display: none; }

/* ==================== 盤面(720x720) ==================== */
/* のこりAP: 中央の上 */
.fc-ap { position: absolute; left: 50%; top: 54px; transform: translateX(-50%); z-index: 6; pointer-events: none; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 34px;
    border-radius: 28px; border: 4px solid #2a68b0; background: linear-gradient(#6db2f4, #3f8fe0 60%, #2f7fd0); box-shadow: 0 5px 0 #1f4a7a; color: #fff; font-weight: 900; white-space: nowrap; }
.fc-ap span { font-size: 1.4rem; letter-spacing: 3px; }
.fc-ap #disp-ap { display: block; font-size: 2.6rem; line-height: 1; color: #fff1b8; text-shadow: 0 3px 0 rgba(120,10,40,0.5); margin: 0; }
.fc-ap:has(#disp-ap.low) { animation: apLow .7s ease-in-out infinite; background: linear-gradient(#ffb0a0, #ff4a3a); }

/* けいさんしき */
.fc-eq { position: absolute; left: 20px; top: 114px; width: 680px; height: 54px; box-sizing: border-box; border-radius: 27px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 4px solid #bcd8f2; box-shadow: 0 4px 0 #b8d4ee; }
.fc-eq span { font-size: 1.8rem; font-weight: 900; color: #2f4a6a; letter-spacing: 1px; white-space: nowrap; }
.fc-eq.ph span { font-size: 1.35rem; color: #7a96b4; letter-spacing: 0; }

/* ケーキの台 */
.fc-table { position: absolute; left: 12px; top: 178px; width: 696px; height: 342px; box-sizing: border-box; border-radius: 28px; border: 5px solid #bcd8f2;
    background: conic-gradient(rgba(255,255,255,.85) 25%, rgba(255,205,222,.85) 0 50%, rgba(255,255,255,.85) 0 75%, rgba(255,205,222,.85) 0) 0 0 / 46px 46px, #eaf3fd;
    box-shadow: inset 0 0 24px rgba(200,70,110,.22), 0 6px 0 #b8d4ee; }
.fc-cake { position: absolute; transition: transform .15s; filter: drop-shadow(0 8px 5px rgba(150,40,80,.35)); }
.fc-cake.over { transform: scale(1.07); }
.fc-cake.matched { animation: fcMatch .6s ease-in-out infinite; }
@keyframes fcMatch { 0%,100% { filter: drop-shadow(0 0 6px #ffe27a) drop-shadow(0 10px 6px rgba(40,0,20,.45)); transform: scale(1); } 50% { filter: drop-shadow(0 0 22px #ffd24a) drop-shadow(0 10px 6px rgba(40,0,20,.45)); transform: scale(1.07); } }

/* ケーキの下の大きさ(分数)の札: 分数が札の中に ちゃんと収まる大きさ */
.fc-lab { position: absolute; width: 120px; text-align: center; transition: transform .15s; }
.fc-lab .pill { display: inline-flex; align-items: center; justify-content: center; min-width: 100px; height: 86px; padding: 0 16px; box-sizing: border-box; border-radius: 24px;
    background: #fff; border: 4px solid #bcd8f2; box-shadow: 0 5px 0 #b8d4ee; font-size: 2.1rem; font-weight: 900; color: #2f4a6a; }
.fc-lab.over { transform: scale(1.1); } .fc-lab.over .pill { border-color: #f0a020; }

/* 手札 */
.fc-hbox { position: absolute; box-sizing: border-box; border-radius: 24px; background: rgba(255,255,255,.75); border: 4px solid #bcd8f2; box-shadow: 0 5px 0 #c8dcf0; }
.hc.fc-hc { border-width: 5px; border-radius: 18px; }
.fc-hc .nm { top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; color: #2f4a6a; }
.fc-hc.t1 { border-color: #a8d88a; } .fc-hc.t2 { border-color: #ffd24a; } .fc-hc.t3 { border-color: #ffb86b; } .fc-hc.t4 { border-color: #7cbaf0; }
.bl-hint { font-size: 1.5rem; padding: 6px 18px 8px; }

.fc-pt { position: absolute; z-index: 30; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; animation: fcPt .9s ease-out forwards; }
@keyframes fcPt { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)) scale(.2); opacity: 0; } }
.fc-cf { position: absolute; z-index: 40; width: 12px; height: 18px; border-radius: 3px; pointer-events: none; animation: fcCf 2s ease-in forwards; }
@keyframes fcCf { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx),740px) rotate(720deg); opacity: .9; } }
#game-area.danger { animation: fcDanger 1.2s ease-in-out infinite; }
@keyframes fcDanger { 0%,100% { box-shadow: inset 0 0 36px 4px rgba(255,70,90,.06); } 50% { box-shadow: inset 0 0 46px 8px rgba(255,70,90,.4); } }
.fx-t { font-size: 2.6rem; }

/* ==================== 左右のパネル ==================== */
#left-panel, #right-panel { flex: 0 0 280px; width: 280px; padding: 58px 12px 14px; gap: 10px; background: linear-gradient(#ffffff, #f0f7ff); color: #2a3a55; }
#left-panel { border-right: 4px solid #bcd8f2; }
#right-panel { border-left: 4px solid #bcd8f2; }
#left-panel::before, #right-panel::before { display: none; }
#right-panel-content { gap: 10px; }

.sp-brand { height: 62px; font-size: 1.9rem; letter-spacing: 3px; text-indent: 0; color: #fff; border: 4px solid #2a68b0; background: linear-gradient(#6db2f4, #3f8fe0 60%, #2f7fd0); box-shadow: 0 4px 0 #1f4a7a; text-shadow: 0 2px 0 rgba(120,10,40,0.5); }
.sp-brand .ico { width: 30px; height: 30px; color: #fff; }
.sp-mode { gap: 8px; }
.sp-mode span { padding: 3px 18px; font-size: 1.4rem; }
.sp-mode .df { color: #5a4016; background: linear-gradient(#ffe58a, #ffc43a); border: 3px solid #d9961e; }

.sp-card { padding: 10px 14px 12px; border-radius: 16px; background: #fff; border: 3px solid #bcd8f2; box-shadow: 0 4px 0 #c8dcf0; }
.sp-lb { margin-bottom: 8px; font-size: 1.25rem; letter-spacing: 1px; color: #2a68b0; }
.sp-lb .ico { width: 26px; height: 26px; color: #3f8fe0; }
.sp-lb .rt-num { font-size: 1.7rem; color: #2a3a55; text-shadow: none; }
.sp-player { padding: 10px 14px; gap: 12px; }
.sp-player .av { width: 58px; height: 58px; font-size: 1.9rem; border-color: #d9961e; }
.sp-player .sp-lb { margin: 0 0 2px; font-size: 1.1rem; }
#disp-player-name { font-size: 1.6rem; color: #2a3a55; text-shadow: none; }

/* ステージ: 番号だけの丸(4つ+3つ) */
.rt-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px; justify-items: center; }
.rt-list::before { display: none; }
.rt { height: auto; padding: 0; background: none; box-shadow: none; }
.rt .nm { display: none; }
.rt .no { flex: 0 0 auto; width: 46px; height: 46px; font-size: 1.4rem; background: #eaf3fd; border: 3px solid #bcd8f2; color: #5a7a9e; }
.rt.last .no { border-radius: 14px; }
.rt.done .no { background: var(--rc); border-color: #2a68b0; }
.rt.now { background: none; box-shadow: none; }
.rt.now::after { display: none; }
.rt.now .no { background: linear-gradient(#ffe58a, #ffc43a); border-color: #d9961e; color: #5a4016; }

/* もちもの(ショップで買った能力アップ) */
.sp-items { flex: 1; min-height: 0; overflow: hidden; }
.it-list { display: flex; flex-direction: column; gap: 6px; }
.it-list .it { font-style: normal; font-weight: 900; font-size: 1.15rem; line-height: 1.25; padding: 3px 10px; border-radius: 12px; background: #fff0c4; border: 2px solid #e8b040; color: #5a4016; }
.it-list .it-shape { background: #eef6fe; border-color: #bcd8f2; color: #2f4a6a; }
.it-list .it-fav { background: #e4f6e8; border-color: #8fc0a8; color: #2f5a48; }
.it-none { font-size: 1.15rem; font-weight: 800; color: #7a96b4; line-height: 1.4; }

.sp-btn { height: 56px; font-size: 1.35rem; gap: 10px; border-radius: 16px; color: #2f4a6a; border: 3px solid #b8d4ee; background: linear-gradient(#fff, #eef6fe); box-shadow: 0 4px 0 #b8d4ee; text-shadow: none; }
.sp-btn .ico { width: 28px; height: 28px; color: #2a68b0; }
.sp-btn.red { color: #fff; border-color: #2a68b0; background: linear-gradient(#6db2f4, #3f8fe0); box-shadow: 0 4px 0 #1f4a7a; }
.sp-btn.red .ico { color: #fff; }

/* スコア札(右の上): 点数・コイン・最終ばいりつ */
.sp-scorecard { padding: 8px 14px 12px; }
.sp-score { font-size: 3.4rem; line-height: 1.05; color: #3f8fe0; text-shadow: 0 3px 0 #e0eefc; }
.fc-sub { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 6px; font-weight: 900; color: #2f4a6a; font-size: 1.2rem; }
.fc-coin { display: inline-flex; align-items: center; gap: 6px; padding: 2px 14px 2px 6px; border-radius: 50px; background: #fff4d0; border: 3px solid #e8b040; }
.fc-coin svg { width: 28px; height: 28px; }
.fc-coin b { font-size: 1.7rem; color: #7a5418; }
.fc-mul { text-align: right; line-height: 1.15; }
.fc-mul b { display: block; font-size: 1.5rem; color: #3f8fe0; }

/* ターゲット: カードの形(手札とは別の金ぶち)。ホールを作るたびに増える。同じ大きさは ×まい数 */
.fc-tarea { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 8px 12px; box-sizing: border-box; border-radius: 20px;
    border: 5px solid #d9961e; background: linear-gradient(#fffbe6, #fff0c0); box-shadow: 0 6px 0 #a8701a, 0 0 0 3px #ffd24a; }
.tc-lb { margin: -3px -3px 0; padding: 4px 0 6px; border-radius: 13px 13px 6px 6px; background: linear-gradient(#3a5070, #2a3a55); color: #ffe27a; font-weight: 900; font-size: 1.5rem; letter-spacing: 5px; text-indent: 5px; text-align: center; }
.tc-note { text-align: center; font-size: 1.1rem; font-weight: 900; color: #8a5a10; line-height: 1.25; }
.tc-grid { flex: 1; min-height: 0; display: grid; gap: 10px; align-content: center; overflow-y: auto; scrollbar-width: thin; padding: 2px; }
.tc-grid.n1 { grid-template-columns: 1fr; padding: 2px 14px; }
.tc-grid.n4 { grid-template-columns: repeat(2, 1fr); }
.tc-grid.n9 { grid-template-columns: repeat(2, 1fr); align-content: start; }
.tc-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 8px; border-radius: 16px; border: 4px solid #e8b040; background: #fff; box-shadow: 0 4px 0 #e8b040; text-align: center; }
.tc-card.dup { border-color: #3f8fe0; box-shadow: 0 4px 0 #24558f, 0 0 0 2px #cfe0f4; }
.tc-card.new { animation: tcNew 0.7s cubic-bezier(.2,1.5,.4,1); }
@keyframes tcNew { 0% { transform: scale(0.2) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.15) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.tc-x { position: absolute; right: -8px; top: -14px; padding: 0 10px; border-radius: 50px; background: #3f8fe0; color: #fff; border: 3px solid #24558f; font-size: 1.35rem; font-weight: 900; line-height: 1.35; z-index: 2; }
.tc-cake { width: 120px; height: 120px; filter: drop-shadow(0 3px 2px rgba(150,40,80,0.3)); }
.tc-grid.n4 .tc-cake, .tc-grid.n9 .tc-cake { width: 84px; height: 84px; }
.tc-cake svg { width: 100%; height: 100%; display: block; }
/* 分数の札: 分数が収まるよう 高さは中身に合わせる */
.tc-fr { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 8px 16px; border-radius: 14px; background: #fff; border: 3px solid #bcd8f2; color: #2f4a6a; font-size: 2.3rem; font-weight: 900; box-shadow: 0 3px 0 #b8d4ee; }
.tc-grid.n4 .tc-fr { font-size: 1.7rem; padding: 6px 10px; }
.tc-grid.n9 .tc-fr { font-size: 1.5rem; padding: 4px 8px; }
.tc-pts { padding: 1px 14px; border-radius: 50px; background: #3f8fe0; color: #fff; font-weight: 900; font-size: 1.25rem; border: 3px solid #2a68b0; white-space: nowrap; }
.tc-grid.n4 .tc-pts, .tc-grid.n9 .tc-pts { font-size: 1.05rem; padding: 0 8px; }

/* チェンジ(右の下) */
.fc-change { width: 100%; height: 92px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: inherit; cursor: pointer; border-radius: 24px;
    color: #5a4016; border: 5px solid #d9961e; background: linear-gradient(#ffe58a, #ffc43a); box-shadow: 0 6px 0 #a8701a, 0 10px 16px rgba(150,90,0,0.3); }
.fc-change b { font-size: 2.1rem; font-weight: 900; letter-spacing: 4px; text-shadow: 0 2px 0 rgba(255,255,255,0.6); }
.fc-change small { font-size: 1.2rem; font-weight: 900; color: #7a5418; }
.fc-change:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #a8701a; }
.fc-change:disabled { filter: grayscale(0.85); opacity: 0.55; cursor: default; }

/* ステージの演出・クリア画面: 番号だけ(名前なし)で、文字は大きく */
#stage-intro:not(.final) .si-no { display: none; }
#stage-clear .sc-theme { display: none; }
.sc-ribbon { font-size: 3rem; }
.sc-rows { width: 560px; font-size: 1.6rem; }
.sc-rows .big { font-size: 2rem; }
.sc-next { font-size: 1.4rem; }
.sc-box .rs-go { height: 64px; font-size: 1.8rem; }
.howto-inner { max-height: 640px; overflow-y: auto; }
.howto-inner p, .howto-inner div { font-size: 1.15rem; }

/* ==================== ショップ ==================== */
#shop-screen { position: absolute; inset: 0; z-index: 300; box-sizing: border-box; padding: 54px 24px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #2a3a55;
    background: radial-gradient(ellipse at 50% 55%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 66%),
        conic-gradient(rgba(255,170,200,0.13) 25%, rgba(255,255,255,0) 0 50%, rgba(255,170,200,0.13) 0 75%, rgba(255,255,255,0) 0) 0 0 / 88px 88px, #fffdfe; }
#shop-screen::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 48px; pointer-events: none; }
#shop-screen::after { display: none; }
.sh-top { position: relative; width: 100%; height: 58px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 2; }
.sh-plaque { padding: 4px 56px 6px; border-radius: 40px; border: 5px solid #2a68b0; color: #fff; font-size: 2rem; font-weight: 900; letter-spacing: 5px; background: linear-gradient(#6db2f4, #3f8fe0 60%, #2f7fd0); box-shadow: 0 6px 0 #1f4a7a; text-shadow: 0 3px 0 rgba(120,10,40,0.5); }
.sh-coins { position: absolute; right: 4px; top: 2px; display: flex; align-items: center; gap: 8px; padding: 4px 20px 4px 10px; border-radius: 32px; border: 4px solid #d9961e; background: linear-gradient(#fff6d8, #ffd24a); box-shadow: 0 4px 0 #a8701a; font-weight: 900; color: #5a4016; }
.sh-coins .coin { width: 36px; height: 36px; }
.sh-coins b { font-size: 2.4rem; line-height: 1; } .sh-coins span { font-size: 1.15rem; }
.sh-grid { width: 100%; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 14px 14px; z-index: 2; }
.sh-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; padding: 8px 10px 10px; border-radius: 20px; border: 5px solid #bcd8f2; background: linear-gradient(#fff, #f4f9ff); box-shadow: 0 6px 0 #b8d4ee; text-align: center; }
.sh-card.sale { border-color: #3f8fe0; box-shadow: 0 6px 0 #24558f, 0 0 0 3px #cfe0f4; }
.sh-sale { position: absolute; right: -8px; top: -14px; transform: rotate(8deg); padding: 1px 16px; border-radius: 50px; background: #3f8fe0; color: #fff; border: 3px solid #fff; box-shadow: 0 3px 0 #24558f; font-size: 1.3rem; font-weight: 900; }
.sh-name { font-size: 1.55rem; font-weight: 900; color: #2f4a6a; line-height: 1.15; }
.sh-val { display: flex; align-items: center; justify-content: center; min-width: 76px; padding: 4px 16px; border-radius: 14px; background: #fff; border: 3px solid #bcd8f2; color: #2f4a6a; font-size: 2rem; font-weight: 900; box-shadow: 0 4px 0 #b8d4ee; }
.sh-lv { padding: 0 16px; border-radius: 50px; background: #fff0c4; border: 3px solid #e8b040; color: #7a5418; font-weight: 900; font-size: 1.3rem; }
.sh-desc { font-size: 1.2rem; font-weight: 800; color: #2a3a55; line-height: 1.3; }
.sh-buy { width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: inherit; font-weight: 900; font-size: 1.4rem; color: #fff; cursor: pointer; border-radius: 27px; border: 4px solid #2a68b0;
    background: linear-gradient(#6db2f4, #3f8fe0 60%, #2f7fd0); box-shadow: 0 5px 0 #1f4a7a; text-shadow: 0 2px 0 rgba(120,10,40,0.5); }
.sh-buy:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #1f4a7a; }
.sh-buy:disabled { filter: grayscale(0.7); opacity: 0.6; cursor: default; }
.sh-pr { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px 0 5px; border-radius: 50px; background: #fff4d0; color: #7a5418; border: 3px solid #e8b040; text-shadow: none; font-size: 1.35rem; }
.sh-pr .coin { width: 26px; height: 26px; }
.sh-have { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; z-index: 2; min-height: 38px; max-height: 76px; overflow: hidden; font-weight: 900; color: #2f4a6a; font-size: 1.15rem; }
.sh-have i { font-style: normal; padding: 1px 12px; border-radius: 50px; background: #fff0c4; border: 2px solid #e8b040; color: #5a4016; }
.sh-have em { font-style: normal; color: #7a96b4; }
.sh-go { z-index: 2; flex-shrink: 0; width: 520px; height: 64px; font-family: inherit; font-weight: 900; font-size: 1.9rem; letter-spacing: 4px; color: #5a4016; cursor: pointer; border-radius: 32px; border: 5px solid #d9961e;
    background: linear-gradient(#ffe58a, #ffc43a); box-shadow: 0 6px 0 #a8701a, 0 10px 16px rgba(150,90,0,0.3); text-shadow: 0 2px 0 rgba(255,255,255,0.6); }
.sh-go:active { transform: translateY(4px); box-shadow: 0 1px 0 #a8701a; }

/* ==================== ひさし(どの画面も同じ絵) ==================== */
#run-select-screen::before, #ranking-screen::before, #settings-screen .fx-screen::before, #player-manager-overlay .fx-screen::before,
#game-layer::before, #shop-screen::before {
    content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; height: 48px; border: 0; box-sizing: border-box; pointer-events: none;
    background: var(--awning) repeat-x 0 0 / 128px 48px; filter: drop-shadow(0 4px 0 rgba(120,20,60,0.22));
    -webkit-mask: none; mask: none;
}
#run-select-screen::after, #ranking-screen::after, #settings-screen .fx-screen::after, #player-manager-overlay .fx-screen::after { display: none; }
.ft-awning { height: 48px; border: 0; background: var(--awning) repeat-x 0 0 / 128px 48px; filter: drop-shadow(0 4px 0 rgba(120,20,60,0.22)); }
.ft-awning::after { display: none; }
#run-select-screen, #ranking-screen { padding-top: 58px; }
#settings-screen .fx-screen, #player-manager-overlay .fx-screen { padding-top: 58px; }

/* ---- 左パネルの高さを整える(もちものの欄を広く) ---- */
.sp-brand { box-sizing: border-box; height: 60px; }
.sp-player { padding: 8px 14px; }
.sp-player .av { width: 52px; height: 52px; font-size: 1.7rem; }
.rt-list { grid-template-columns: repeat(7, 1fr); gap: 0; }
.rt .no { width: 30px; height: 30px; font-size: 1.05rem; border-width: 2px; }
.sp-items { overflow-y: auto; scrollbar-width: thin; }
.sp-btn { box-sizing: border-box; height: 54px; }
/* 手札の枠: 影が はみ出して見えないよう 少し広く */
#bl .fc-hbox { box-sizing: border-box; }

/* ターゲットが2種類以上: ケーキの絵は出さず、分数をできるだけ大きく */
.tc-grid.n4 { grid-template-columns: repeat(2, 1fr); align-content: center; }
.tc-grid.n9 { grid-template-columns: repeat(3, 1fr); align-content: start; gap: 8px 6px; }
.tc-grid.n4 .tc-fr { font-size: 2.1rem; padding: 8px 10px; }
.tc-grid.n9 .tc-fr { font-size: 1.55rem; padding: 6px 6px; }
.tc-grid.n4 .tc-pts { font-size: 1.15rem; }
.tc-grid.n9 .tc-pts { font-size: 0.95rem; padding: 0 6px; }
.tc-grid.n9 .tc-card { padding: 6px 2px; }
/* ステージの丸: 4つ+3つの2列(大きめ) */
.rt-list { grid-template-columns: repeat(4, 1fr); gap: 6px 2px; }
.rt .no { width: 40px; height: 40px; font-size: 1.25rem; }
.tc-grid.n4 { align-content: start; }
.tc-grid.n4 .tc-fr { font-size: 1.9rem; padding: 6px 8px; }
.tc-grid.n4 .tc-card { padding: 8px 4px 8px; }
.tc-pts { font-size: 1.3rem; }
/* ターゲットが2種類以上のときは 「ふえる」の説明を消して、カードの場所を広く */
.fc-tarea:has(.tc-grid:not(.n1)) .tc-note { display: none; }
.tc-grid.n4 .tc-card { gap: 4px; }
.tc-grid.n4 .tc-pts { font-size: 1.15rem; }
.tc-grid.n4 { gap: 8px; padding: 0 2px; }
.tc-grid.n4 .tc-fr { font-size: 1.75rem; padding: 4px 8px; }
.tc-grid.n4 .tc-card { padding: 6px 4px; gap: 3px; }
.tc-grid.n4 .tc-pts { font-size: 1.1rem; line-height: 1.3; }

/* ==================== 第3版: 色で大きさが分かる・九九ポーカー風のゾーン札・絵で見せるショップ ==================== */

/* のこりAP: 「AP 8」だけのシンプル表示 */
.fc-ap { gap: 12px; height: 54px; padding: 0 30px; }
.fc-ap span { font-size: 1.6rem; letter-spacing: 2px; }
.fc-ap #disp-ap { font-size: 2.8rem; }

/* けいさんしき */
.fc-eq { top: 114px; height: 46px; border-radius: 23px; }
.fc-eq span { font-size: 1.7rem; }

/* ゾーンの札(九九ポーカーのように「ケーキ」「てふだ」の見出しを枠にのせる) */
.fc-tag { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; padding: 0 28px 3px; border-radius: 18px; border: 4px solid #fff; color: #fff; font-size: 1.4rem; font-weight: 900; letter-spacing: 4px; text-indent: 4px; line-height: 1.5; white-space: nowrap;
    text-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.fc-tag.t-cake { top: 160px; background: linear-gradient(#6db2f4, #3f8fe0); box-shadow: 0 4px 0 #1f4a7a; }
.fc-tag.t-hand { background: linear-gradient(#ffb25a, #f07a1a); box-shadow: 0 4px 0 #8a4308; }

/* 台・手札の枠 */
.fc-table { top: 178px; height: 340px; }
.fc-hbox { border-color: #f0a060; background: rgba(255,248,238,0.8); box-shadow: 0 5px 0 #f3c9a0; }

/* ケーキの下の札: 大きさの色 */
.fc-lab .pill { background: color-mix(in srgb, var(--cc, #bcd8f2) 20%, #fff); border-color: var(--cc, #bcd8f2); box-shadow: 0 5px 0 color-mix(in srgb, var(--cc, #bcd8f2) 62%, #1f2d45); color: #2a3a55; }
.fc-lab.over .pill { border-color: #f0a020; }

/* 手札: 大きさごとに はっきり色を変える(1こ分=赤 2=だいだい 3=黄 4=みどり 5=青緑 6=青 7=あい 8=むらさき 9=ピンク) */
.hc.fc-hc { --cc: #ff5a5f; border: 5px solid color-mix(in srgb, var(--cc) 62%, #1a2638); border-radius: 18px;
    background: linear-gradient(165deg, color-mix(in srgb, var(--cc) 62%, #fff), var(--cc) 62%);
    box-shadow: 0 7px 0 color-mix(in srgb, var(--cc) 55%, #1a2638), 0 12px 16px rgba(60,20,40,0.28); }
.hc.fc-hc.dragging { box-shadow: 0 14px 0 rgba(60,20,40,0.2), 0 22px 28px rgba(60,20,40,0.4); }
.fc-hc .nm { color: #fff; font-size: 3.5rem; -webkit-text-stroke: 8px color-mix(in srgb, var(--cc) 38%, #1a2638); paint-order: stroke fill; text-shadow: 0 4px 0 color-mix(in srgb, var(--cc) 38%, #1a2638); }
.fc-hc .fr i:first-child { border-bottom-width: .11em; }
.hc.fc-hc::after { display: none; }

/* 左パネル: ステージは横ならびの道のり */
.rt-list { display: flex; align-items: center; gap: 0; padding: 16px 0 2px; }
.rt { flex: 1; position: relative; display: flex; justify-content: center; padding: 0; height: auto; background: none; box-shadow: none; }
.rt::before, .rt::after { content: ''; position: absolute; top: 50%; width: 50%; height: 6px; margin-top: -3px; background: #f0c9d6; display: block; border: 0; }
.rt::before { left: 0; } .rt::after { right: 0; }
.rt:first-child::before, .rt:last-child::after { display: none; }
.rt.done::before, .rt.done::after, .rt.now::before { background: #3f8fe0; }
.rt .no { position: relative; z-index: 1; width: 31px; height: 31px; font-size: 1.1rem; border-radius: 50%; background: #fff; border: 3px solid #bcd8f2; color: #5a7a9e; }
.rt.done .no { background: #3f8fe0; border-color: #2a68b0; }
.rt.now .no { width: 36px; height: 36px; margin: -3px 0; background: linear-gradient(#ffe58a, #ffc43a); border-color: #d9961e; color: #5a4016; font-size: 1.3rem; box-shadow: 0 0 0 4px rgba(255,200,60,0.45); animation: none; }
.rt.last .no { border-radius: 50%; }
/* ゴールの旗(最後のステージのまるの上) */
.rt.last .no::before { content: ''; position: absolute; left: 50%; top: -20px; width: 3px; height: 20px; background: #1f4a7a; transform: translateX(-50%); }
.rt.last .no::after { content: ''; position: absolute; left: calc(50% + 2px); top: -20px; border-left: 14px solid #3f8fe0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; transform: none; width: 0; height: 0; background: none; }
.rt.done .no::after { display: block; }
.rt.last.done .no::after { display: block; }

/* もちもの: 絵のアイコン */
.it-list { flex-direction: row; flex-wrap: wrap; gap: 8px 10px; }
.it { display: flex; flex-direction: column; align-items: center; gap: 0; width: 62px; font-style: normal; }
.it em { font-style: normal; font-size: 1.05rem; font-weight: 900; color: #2f4a6a; line-height: 1.2; }
.ic-ap { display: flex; align-items: center; justify-content: center; gap: 2px; width: 56px; height: 40px; border-radius: 20px; border: 3px solid #2a68b0; background: linear-gradient(#6db2f4, #3f8fe0); color: #fff; font-size: 1rem; font-weight: 900; }
.ic-ap b { color: #fff1b8; font-size: 1.3rem; }
.ic-spice { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 3px solid #d9961e; background: linear-gradient(#ffe58a, #ffc43a); color: #5a4016; font-size: 1.5rem; font-weight: 900; }
.ic-cake { display: block; width: 46px; height: 46px; }
.ic-cake svg { width: 100%; height: 100%; display: block; }
.ic-card { display: flex; align-items: center; justify-content: center; width: 40px; height: 50px; border-radius: 8px; border: 3px solid color-mix(in srgb, var(--cc) 62%, #1a2638); background: linear-gradient(165deg, color-mix(in srgb, var(--cc) 62%, #fff), var(--cc)); color: #fff; font-size: 0.95rem; font-weight: 900; -webkit-text-stroke: 3px color-mix(in srgb, var(--cc) 38%, #1a2638); paint-order: stroke fill; }
.it-none { font-size: 1.15rem; }

/* 右パネル: ターゲット(ケーキの絵) */
.fc-tarea { gap: 6px; padding: 6px 8px 10px; }
.tc-lb { display: flex; align-items: center; justify-content: space-between; margin: -3px -3px 0; padding: 4px 12px 6px; text-indent: 0; letter-spacing: 2px; font-size: 1.4rem; text-align: left; }
.tc-lb b { color: #ffd24a; font-size: 1.5rem; letter-spacing: 0; }
.tc-grid { flex: 1; min-height: 0; display: grid; gap: 8px; justify-content: center; align-content: center; overflow: hidden; padding: 0; }
.tc-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; border-radius: 16px; border: 4px solid var(--cc, #e8b040);
    background: color-mix(in srgb, var(--cc, #e8b040) 14%, #fff); box-shadow: 0 4px 0 color-mix(in srgb, var(--cc, #e8b040) 60%, #1f2d45); }
.tc-card.dup { box-shadow: 0 4px 0 color-mix(in srgb, var(--cc, #e8b040) 60%, #1f2d45), 0 0 0 3px #fff, 0 0 0 6px var(--cc, #e8b040); }
.tc-cake { flex: none; filter: drop-shadow(0 3px 2px rgba(150,40,80,0.3)); }
.tc-fr { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #2a3a55; font-weight: 900; line-height: 1; }
.tc-x { position: absolute; right: -6px; top: -12px; padding: 0 8px; border-radius: 50px; background: #3f8fe0; color: #fff; border: 3px solid #fff; box-shadow: 0 2px 0 #24558f; font-weight: 900; line-height: 1.3; z-index: 2; }
.tc-note, .tc-pts { display: none; }

/* ==================== ショップ(絵と数字) ==================== */
.sh-grid { gap: 14px 14px; }
.sh-card { --c: #3f8fe0; padding: 6px 10px 10px; gap: 2px; border-color: var(--c); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 60%, #1f2d45); background: linear-gradient(#fff, color-mix(in srgb, var(--c) 10%, #fff)); }
.sh-card.sh-spice { --c: #e0a020; }
.sh-card.sh-shape { --c: #e07090; }
.sh-card.sh-fav { --c: #3a9bff; }
.sh-card.sale { box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 60%, #1f2d45), 0 0 0 4px #fff, 0 0 0 7px #3f8fe0; }
.sh-card.sold { filter: grayscale(0.6); opacity: 0.75; }
.sh-name { font-size: 1.55rem; color: color-mix(in srgb, var(--c) 70%, #1f2d45); }
.sh-pic { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.pic-ap { display: flex; align-items: center; gap: 8px; padding: 4px 20px; border-radius: 32px; border: 4px solid #2a68b0; background: linear-gradient(#6db2f4, #3f8fe0); box-shadow: 0 4px 0 #1f4a7a; color: #fff; font-weight: 900; }
.pic-ap span { font-size: 1.8rem; letter-spacing: 1px; }
.pic-ap b { font-size: 2.8rem; line-height: 1; color: #fff1b8; text-shadow: 0 3px 0 rgba(120,10,40,0.5); }
.pic-spice { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 18px; border: 5px solid #d9961e; background: linear-gradient(#ffe58a, #ffc43a); box-shadow: 0 5px 0 #a8701a; color: #5a4016; font-size: 3.2rem; font-weight: 900; }
.pic-cake { position: relative; width: 90px; height: 90px; }
.pic-cake .pk { width: 100%; height: 100%; filter: drop-shadow(0 4px 3px rgba(150,40,80,0.3)); }
.pic-cake .pk svg { width: 100%; height: 100%; display: block; }
.pic-cake .pf { position: absolute; right: -26px; bottom: -6px; padding: 2px 8px; border-radius: 12px; border: 3px solid var(--cc); background: #fff; color: #2a3a55; font-size: 1.5rem; font-weight: 900; box-shadow: 0 3px 0 color-mix(in srgb, var(--cc) 60%, #1f2d45); }
.pic-card { display: flex; align-items: center; justify-content: center; width: 68px; height: 84px; border-radius: 14px; border: 5px solid color-mix(in srgb, var(--cc) 62%, #1a2638); background: linear-gradient(165deg, color-mix(in srgb, var(--cc) 62%, #fff), var(--cc) 62%);
    box-shadow: 0 5px 0 color-mix(in srgb, var(--cc) 55%, #1a2638); color: #fff; font-size: 2.1rem; font-weight: 900; -webkit-text-stroke: 6px color-mix(in srgb, var(--cc) 38%, #1a2638); paint-order: stroke fill; }
.sh-eff { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.9rem; font-weight: 900; color: #2a3a55; line-height: 1.1; }
.sh-eff i { font-style: normal; color: #5a7a9e; font-size: 1.2rem; }
.sh-eff .nx { color: #3f8fe0; }
.sh-pips { display: flex; justify-content: center; gap: 4px; height: 14px; }
.sh-pips i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #d9a0b4; display: block; }
.sh-pips i.on { background: #ffc43a; border-color: #d9961e; }
.sh-pips.none { visibility: hidden; }
.sh-buy { height: 52px; margin-top: 2px; border-radius: 26px; }
.sh-pr { background: none; border: 0; color: #fff; font-size: 1.9rem; gap: 6px; padding: 0; text-shadow: 0 2px 0 rgba(120,10,40,0.5); }
.sh-pr .coin { width: 32px; height: 32px; }
.sh-buy:disabled { font-size: 1.4rem; }
.sh-go i { font-style: normal; }
.sh-have { display: none; }
.rt-list { flex-direction: row !important; }
.rt .nm { display: none; }
/* ステージの道のり: 7つが カードに収まる大きさ */
.sp-stage { padding: 8px 10px 10px; }
.rt-list { padding: 18px 0 0; }
.rt .no { width: 27px; height: 27px; font-size: 1rem; border-width: 3px; }
.rt.now .no { width: 33px; height: 33px; font-size: 1.2rem; margin: -3px 0; }
.rt.last .no::before { top: -18px; height: 18px; }
.rt.last .no::after { top: -18px; }
/* もちもの: 小さめのアイコン */
.it { width: 56px; }
.ic-ap { width: 52px; height: 36px; font-size: 0.95rem; }
.ic-spice { width: 42px; height: 42px; font-size: 1.35rem; }
.ic-cake { width: 42px; height: 42px; }
.ic-card { width: 36px; height: 46px; }
.it-list { gap: 6px 8px; }
/* もちもの: Lv・倍率は アイコンの角のバッジに */
.it { position: relative; width: 58px; height: 50px; justify-content: center; }
.it em { position: absolute; right: -6px; bottom: -6px; padding: 0 6px; border-radius: 10px; border: 2px solid #bcd8f2; background: #fff; font-size: 0.95rem; line-height: 1.25; color: #2f4a6a; }
.it-list { gap: 10px 10px; padding: 2px 4px 6px 0; }
/* ショップ: 下のボタンと かさならないよう、カードを少し低く */
#shop-screen { padding: 54px 24px 10px; gap: 8px; }
.sh-top { height: 54px; }
.sh-grid { gap: 12px; }
.sh-card { padding: 4px 10px 8px; }
.sh-name { font-size: 1.45rem; }
.sh-pic { max-height: 92px; }
.pic-ap { padding: 2px 18px; }
.pic-ap b { font-size: 2.4rem; }
.pic-spice { width: 70px; height: 70px; font-size: 2.8rem; }
.pic-cake { width: 76px; height: 76px; }
.pic-card { width: 58px; height: 72px; font-size: 1.8rem; }
.sh-eff { font-size: 1.7rem; }
.sh-buy { height: 46px; }
.sh-go { height: 56px; font-size: 1.7rem; }

/* ==================== シンプル版: ホールのカード・ターゲットの3だんかい ==================== */
.sp-hole { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(#fffbe6, #fff0c0); border-color: #e8b040; box-shadow: 0 4px 0 #d9961e; }
.sp-hole .sp-lb { margin-bottom: 0; color: #7a5418; font-size: 1.35rem; }
.hole-mul { margin-left: auto; font-size: 2.2rem; color: #3f8fe0; line-height: 1; font-weight: 900; }
.hole-cakes { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 2px; }
.hole-cakes i { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff1b8 0 22%, #ffc61a 24%); border: 3px solid #b8d4ee; box-shadow: 0 2px 0 #d9961e; display: block; }
.hole-cakes b { font-size: 1.4rem; color: #7a5418; }
.hole-cakes .h0 { font-size: 1.1rem; font-weight: 900; color: #b0876a; }
.hole-note { font-size: 1.1rem; font-weight: 800; color: #7a5418; line-height: 1.3; }

/* ターゲット: ×2 / ×3 / ×4 を 3だんかいの色で */
.fc-tarea .tc-lb b { font-size: 2.2rem; line-height: 1; letter-spacing: 0; }
.fc-tarea.tier-2 { border-color: #d9961e; }
.fc-tarea.tier-3 { border-color: #ec7a1a; background: linear-gradient(#fff4e6, #ffcf9a); box-shadow: 0 6px 0 #8a4a10, 0 0 0 3px #ffa84a; }
.fc-tarea.tier-3 .tc-lb { background: linear-gradient(#c8480a, #7a3a10); }
.fc-tarea.tier-3 .tc-lb b { color: #ffe27a; }
.fc-tarea.tier-4 { border-color: #2a68b0; background: linear-gradient(#ffecf2, #ffb0c8); box-shadow: 0 6px 0 #1f4a7a, 0 0 0 3px #3f8fe0, 0 0 24px 6px rgba(232,52,79,0.45); }
.fc-tarea.tier-4 .tc-lb { background: linear-gradient(#2f7fd0, #1f4a7a); }
.fc-tarea.tier-4 .tc-lb b { color: #fff1b8; }
.tc-grid { align-content: center; justify-content: center; grid-template-columns: 1fr !important; }
.tc-grid .tc-cake { width: 150px; height: 150px; }
.tc-grid .tc-fr { font-size: 2.8rem; }
.tc-grid .tc-card { padding: 8px 14px 10px; }

/* ターゲットの名前(チャンス / ビッグチャンス / スーパービッグチャンス)を 言葉で大きく */
.tc-name { text-align: center; font-weight: 900; font-size: 1.55rem; line-height: 1.15; padding: 4px 6px 5px; border-radius: 12px; color: #5a4016; background: linear-gradient(#fff6d8, #ffd24a); border: 3px solid #d9961e; box-shadow: 0 3px 0 #a8701a; }
.fc-tarea.tier-3 .tc-name { color: #fff; background: linear-gradient(#ffa84a, #ec7a1a); border-color: #8a4a10; box-shadow: 0 3px 0 #5a2400; text-shadow: 0 2px 0 rgba(90,36,0,0.5); }
.fc-tarea.tier-4 .tc-name { color: #fff; background: linear-gradient(#6db2f4, #2a68b0); border-color: #1f4a7a; box-shadow: 0 3px 0 #4a0818; font-size: 1.35rem; text-shadow: 0 2px 0 rgba(74,8,24,0.5); }
.tc-grid .tc-cake { width: 130px; height: 130px; }
.tc-grid .tc-fr { font-size: 2.4rem; }

/* ==================== 第4版: ケーキの数が変わる・できあがりボタン・APアラート ==================== */
/* けいさんしきは なし。縦いっぱいに 台と手札 */
.fc-eq { display: none; }
.fc-tag.t-cake { top: 112px; }
.fc-table { top: 128px; height: 356px; }
.fc-ap { top: 52px; }
.fc-lab { text-align: center; }
.fc-lab .pill { min-width: 0; width: 100%; height: var(--ph, 96px); padding: 0 4px; font-size: var(--pf, 2.3rem); border-radius: 22px; }
.fc-hc .nm { font-size: 4.4rem; }
.hc.fc-hc { border-radius: 22px; }

/* ケーキ1つにつき1回の「AP+1」(ホールで もらえる)。もらったら はいいろ */
.fc-apb { position: absolute; z-index: 4; padding: 0 8px; border-radius: 12px; border: 3px solid #2a68b0; background: linear-gradient(#6db2f4, #3f8fe0); color: #fff; font-size: 1.1rem; font-weight: 900; line-height: 1.3; box-shadow: 0 3px 0 #1f4a7a; white-space: nowrap; pointer-events: none; }
.fc-apb.used { background: #e6e0e4; border-color: #b8aab2; color: #a09098; box-shadow: none; text-decoration: line-through; }
.fc-cake.match { filter: drop-shadow(0 0 10px #ffd24a) drop-shadow(0 8px 5px rgba(150,40,80,.35)); }

/* 右下: ふだんは「チェンジ」。そろったら「できあがり！」(大きく光る) */
.fc-change.done { color: #fff; border-color: #2a68b0; background: linear-gradient(#6db2f4, #3f8fe0 60%, #2f7fd0); box-shadow: 0 6px 0 #1f4a7a, 0 0 0 4px #fff, 0 0 26px 8px rgba(255,200,60,0.85); animation: doneGlow 0.9s ease-in-out infinite; }
.fc-change.done b { font-size: 2.3rem; letter-spacing: 2px; text-shadow: 0 3px 0 rgba(120,10,40,0.5); }
@keyframes doneGlow { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ターゲット: 名前(言葉)と ばいりつ。4だんかい */
.tc-name { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 8px 5px; }
.tc-name span { font-size: 1.45rem; line-height: 1.1; }
.tc-name b { font-size: 2.1rem; line-height: 1; }
.fc-tarea.tier-2 .tc-name { color: #5a4016; }
.fc-tarea.tier-3 .tc-name { color: #fff; background: linear-gradient(#ffb35a, #f09a2a); border-color: #8a5410; box-shadow: 0 3px 0 #5a4016; text-shadow: 0 2px 0 rgba(90,48,0,0.5); }
.fc-tarea.tier-3 { border-color: #d98a0a; background: linear-gradient(#fff6e6, #ffd9a0); box-shadow: 0 6px 0 #8a5410, 0 0 0 3px #ffb35a; }
.fc-tarea.tier-3 .tc-lb { background: linear-gradient(#c8700a, #7a4000); }
.fc-tarea.tier-4 .tc-name { background: linear-gradient(#ff9a7a, #d9342a); border-color: #7a1810; box-shadow: 0 3px 0 #4a0c08; font-size: 1.35rem; }
.fc-tarea.tier-4 .tc-name span { font-size: 1.45rem; }
.fc-tarea.tier-5 { border-color: #7a3ac8; background: linear-gradient(#f6eaff, #cfa8ff); box-shadow: 0 6px 0 #4a1a8a, 0 0 0 3px #b070ff, 0 0 26px 8px rgba(160,90,255,0.5); }
.fc-tarea.tier-5 .tc-lb { background: linear-gradient(#8a4ae0, #3a1a7a); }
.fc-tarea.tier-5 .tc-name { color: #fff; background: linear-gradient(#b878ff, #6a2ad0); border-color: #3a1a7a; box-shadow: 0 3px 0 #2a0a5a; text-shadow: 0 2px 0 rgba(42,10,90,0.5); }
.fc-tarea.tier-5 .tc-name span { font-size: 1.3rem; }

/* ホールのカード: 数と倍率だけ(説明は出さない) */
.hole-note { display: none; }

/* ステージの✓マーク: まるの まんなかに */
.rt.done .no::after { content: '✓'; position: static; width: auto; height: auto; border: 0; transform: none; background: none; color: #fff; font-size: 1.15rem; font-weight: 900; line-height: 1; display: block; }
.rt.done .no { color: transparent; font-size: 0; display: flex; align-items: center; justify-content: center; }

/* APが少ないとき: 画面ぜんたいが アラート(3以下=黄〜だいだいが ゆっくり、1以下=赤が はやくてんめつ) */
#game-layer::after { content: ''; display: block; position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; }
#game-layer.ap-warn::after { box-shadow: inset 0 0 70px 14px rgba(255,150,40,0.55); animation: apWarn 1.4s ease-in-out infinite; }
#game-layer.ap-crit::after { background: radial-gradient(ellipse at 50% 50%, rgba(255,0,40,0) 40%, rgba(220,0,40,0.45) 100%); box-shadow: inset 0 0 90px 22px rgba(230,10,40,0.75); animation: apCrit 0.6s ease-in-out infinite; }
@keyframes apWarn { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes apCrit { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
#game-layer.ap-warn .fc-ap { background: linear-gradient(#ffb35a, #f09a2a); border-color: #8a5410; box-shadow: 0 5px 0 #5a4016; }
#game-layer.ap-crit .fc-ap { background: linear-gradient(#ff8a5a, #d9561a); border-color: #6a0a06; box-shadow: 0 5px 0 #4a0402; animation: apLow .5s ease-in-out infinite; }
#game-layer.ap-crit .fc-ap b { color: #fff; }

/* ホールのカード: ばいりつを まんなかに大きく */
.sp-hole { align-items: center; justify-content: center; text-align: center; gap: 4px; }
.sp-hole .sp-lb { align-self: stretch; }
.sp-hole .sp-lb .hole-mul { display: none; }
.sp-hole::before { content: attr(data-mul); display: block; font-size: 3.6rem; font-weight: 900; line-height: 1; color: #3f8fe0; text-shadow: 0 3px 0 #e0eefc; }
.hole-cakes { flex: 0 0 auto; justify-content: center; align-content: center; min-height: 36px; }
.sp-hole .sp-lb { order: 0; }
.sp-hole::before { order: 1; }
.hole-cakes { order: 2; }
.fc-change.done b { font-size: 1.95rem; letter-spacing: 0; white-space: nowrap; }
.fc-apb { font-size: 1.05rem; padding: 0 4px; }

/* ==================== 第5版: 整える(センタリング・重なり・ホールボーナス) ==================== */
.fc-tag { left: 64px; transform: none; }
.fc-tag.t-cake { top: 120px; }
.fc-table { top: 136px; height: 348px; }
.fc-ap { top: 50px; }
.sp-scorecard { text-align: center; }
.sp-scorecard .sp-lb { justify-content: center; }
.sp-scorecard .sp-score { text-align: center; font-size: 3.6rem; }
.fc-hc .nm { font-size: 3.5rem; -webkit-text-stroke: 6px color-mix(in srgb, var(--cc) 38%, #1a2638); }
.fc-apb { z-index: 5; }

/* ホールボーナス: 「ホールの数」と「ばいりつ」の2行 */
.sp-hole { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; text-align: left; }
.sp-hole::before { display: none; }
.sp-hole .sp-lb { margin-bottom: 0; font-size: 1.3rem; }
.sp-hole .sp-lb .hole-mul { display: none; }
.hole-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 900; color: #2a3a55; font-size: 1.2rem; }
.hole-row b { font-size: 2.3rem; line-height: 1; color: #2a3a55; }
.hole-row b.hm { color: #c4506a; font-size: 2.6rem; }
.hole-cakes, .hole-note { display: none; }
.tc-name { text-align: center; }
.tc-name span { text-align: center; }

/* ==================== 第5版: 色をおさえて 目に やさしく ==================== */
/* ひかり・ふちの色を へらし、ゾーンの札は同じ色に */
.fc-tag.t-cake, .fc-tag.t-hand { background: #c9808f; border-color: #fff; box-shadow: 0 3px 0 #9a5a68; }
.fc-hbox { border-color: #dcc0c8; background: rgba(255,250,248,0.85); box-shadow: 0 4px 0 #ecd8de; }
.fc-table { border-color: #dcb0be; box-shadow: inset 0 0 18px rgba(190,100,130,0.12), 0 5px 0 #b8d4ee; background: conic-gradient(rgba(255,255,255,.9) 25%, rgba(250,225,233,.9) 0 50%, rgba(255,255,255,.9) 0 75%, rgba(250,225,233,.9) 0) 0 0 / 46px 46px, #eaf3fd; }
.fc-cake.match { filter: drop-shadow(0 0 5px rgba(232,192,80,.8)) drop-shadow(0 8px 5px rgba(150,40,80,.25)); }
.fc-cake, .tc-cake { filter: drop-shadow(0 6px 4px rgba(120,60,80,.22)); }
.fc-change.done { box-shadow: 0 5px 0 #1f4a7a, 0 0 0 3px #fff, 0 0 14px 3px rgba(220,170,80,.55); }
.fc-tarea, .fc-tarea.tier-3, .fc-tarea.tier-4, .fc-tarea.tier-5 { box-shadow: 0 5px 0 #b8a07a; }
.fc-tarea { background: linear-gradient(#fffaf0, #f8ecd0); border-color: #e8b040; }
.fc-tarea .tc-lb { background: linear-gradient(#7a5a68, #5a3a48); }
.fc-tarea.tier-3 { background: linear-gradient(#fffaf0, #f8e4c8); border-color: #d8a060; }
.fc-tarea.tier-4 { background: linear-gradient(#fff6f2, #f8d8d0); border-color: #c97868; }
.fc-tarea.tier-5 { background: linear-gradient(#faf4ff, #e6d6f8); border-color: #9a78c8; }
.fc-tarea.tier-3 .tc-lb, .fc-tarea.tier-4 .tc-lb, .fc-tarea.tier-5 .tc-lb { background: linear-gradient(#7a5a68, #5a3a48); }
.tc-card, .tc-card.dup { box-shadow: 0 3px 0 color-mix(in srgb, var(--cc, #e8b040) 55%, #1f2d45); }
.hc.fc-hc { box-shadow: 0 6px 0 color-mix(in srgb, var(--cc) 55%, #1a2638), 0 8px 10px rgba(60,30,45,0.18); }
#game-layer.ap-warn::after { box-shadow: inset 0 0 50px 8px rgba(230,150,70,0.4); }
#game-layer.ap-crit::after { background: none; box-shadow: inset 0 0 60px 14px rgba(200,40,60,0.55); }
.sp-brand { background: linear-gradient(#4a9be8, #c05a74); }
.fc-ap { background: linear-gradient(#4a9be8, #c05a74); }
.fc-tag.t-cake { top: 110px; }
.fc-tag { left: 14px; }

/* ==================== 第6版: 九九ポーカーの色ちがい版(空いろ+ひまわり色)。ピンクとギンガムチェックはやめ、明るさはそのまま ==================== */
:root { --h: 212; --led: #8cc4f6; --led-soft: rgba(110,170,240,0.4); }

/* ---- 背景: ギンガムをやめて、明るい空いろ ---- */
.ft-bg { background: radial-gradient(ellipse at 40% 60%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 62%), linear-gradient(#f3faff, #d8ebfd); }
.ft-bg::after { background: none; }
.ft-bg .ts-city { background: linear-gradient(#cfe4fa, #b8d6f4); opacity: 0.75; }
.ft-bg .ts-city.far { background: linear-gradient(#e0eefc, #cfe4fa); opacity: 0.7; }
#title-screen { background: #eef7ff; }
#run-select-screen, #ranking-screen, #settings-screen .fx-screen, #player-manager-overlay .fx-screen {
    background: radial-gradient(ellipse at 50% 55%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 66%), linear-gradient(#f6fbff, #dcebfc); color: #2a3a55; }
#game-layer { background: #f4faff; color: #2a3a55; }
#game-area { background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%), linear-gradient(#f6fbff, #e2f0ff); }

/* ---- ケーキの台・手札の枠 ---- */
.fc-table { background: radial-gradient(circle, rgba(255,255,255,0.95) 2px, transparent 3px) 0 0 / 30px 30px, #d9eafb; border-color: #9fc4ec; box-shadow: inset 0 0 18px rgba(60,120,190,0.12), 0 5px 0 #b8d4ee; }
.fc-hbox { border-color: #b8d4ee; background: rgba(255,255,255,0.88); box-shadow: 0 4px 0 #d4e6f8; }
.fc-tag.t-cake { background: linear-gradient(#5aa8f0, #3f8fe0); border-color: #fff; box-shadow: 0 3px 0 #24558f; }
.fc-tag.t-hand { background: linear-gradient(#ffb25a, #f08a1a); border-color: #fff; box-shadow: 0 3px 0 #a85a08; }

/* ---- 左右パネル ---- */
#left-panel, #right-panel { background: linear-gradient(#ffffff, #eef6ff); color: #2a3a55; }
#left-panel { border-right: 4px solid #b8d4ee; }
#right-panel { border-left: 4px solid #b8d4ee; }
.sp-card { background: #fff; border-color: #bcd8f2; box-shadow: 0 3px 0 #d4e6f8; }
.sp-lb { color: #2a68b0; }
.sp-lb .ico { color: #3f8fe0; }
.sp-lb .rt-num { color: #2a3a55; }
.sp-brand { background: linear-gradient(#5aa8f0, #3f8fe0); border-color: #2a68b0; box-shadow: 0 4px 0 #1f4a7a; text-shadow: 0 2px 0 rgba(20,60,120,0.35); }
.sp-mode .df { color: #5a4016; background: linear-gradient(#ffe58a, #ffc43a); border-color: #d9961e; }
#disp-player-name { color: #2a3a55; }
.sp-player .av { background: radial-gradient(circle at 35% 30%, #fff3b8, #ffc43a); border-color: #d9961e; box-shadow: 0 3px 0 #a8701a; color: #5a4016; }
.sp-btn { color: #2a68b0; border-color: #9fc4ec; background: linear-gradient(#fff, #e4f0fc); box-shadow: 0 4px 0 #b8d4ee; }
.sp-btn .ico { color: #3f8fe0; }
.sp-btn.red { color: #fff; border-color: #2a68b0; background: linear-gradient(#5aa8f0, #3f8fe0); box-shadow: 0 4px 0 #1f4a7a; }
.sp-btn.red .ico { color: #fff; }
.sp-score { color: #2a68b0; text-shadow: 0 3px 0 #d6e8fa; }
.sp-hole { background: linear-gradient(#fffdf0, #fff1b8); border-color: #e8b040; box-shadow: 0 4px 0 #d9961e; }
.sp-hole .sp-lb { color: #8a5a10; }
.hole-row { color: #2a3a55; }
.hole-row b { color: #2a3a55; }
.hole-row b.hm { color: #2a68b0; }

/* ---- ステージの道のり ---- */
.rt::before, .rt::after { background: #cfe0f4; }
.rt.done::before, .rt.done::after, .rt.now::before { background: #3f8fe0; }
.rt .no { background: #fff; border-color: #bcd8f2; color: #5a7a9e; }
.rt.done .no { background: #3f8fe0; border-color: #2a68b0; }
.rt.now .no { background: linear-gradient(#ffe58a, #ffc43a); border-color: #d9961e; color: #5a4016; box-shadow: 0 0 0 4px rgba(255,200,60,0.4); }
.rt.last .no::before { background: #1f4a7a; }
.rt.last .no::after { border-left-color: #3f8fe0; }

/* ---- のこりAP ---- */
.fc-ap { background: linear-gradient(#5aa8f0, #3f8fe0); border-color: #2a68b0; box-shadow: 0 5px 0 #1f4a7a; }
.fc-ap #disp-ap { color: #fff3b0; text-shadow: 0 3px 0 rgba(20,60,120,0.35); }

/* ---- ターゲット ---- */
.fc-tarea, .fc-tarea.tier-2 { background: linear-gradient(#fffdf0, #fff1b8); border-color: #e8b040; box-shadow: 0 5px 0 #d9961e; }
.fc-tarea .tc-lb, .fc-tarea.tier-3 .tc-lb, .fc-tarea.tier-4 .tc-lb, .fc-tarea.tier-5 .tc-lb { background: linear-gradient(#3a5a8a, #2a4570); color: #ffe27a; }
.fc-tarea.tier-3 { background: linear-gradient(#fff9ee, #ffe2b8); border-color: #f09a2a; box-shadow: 0 5px 0 #c8701a; }
.fc-tarea.tier-4 { background: linear-gradient(#fff5ef, #ffd2c0); border-color: #ec6a3a; box-shadow: 0 5px 0 #b8481a; }
.fc-tarea.tier-5 { background: linear-gradient(#f8f2ff, #dccaf8); border-color: #8a6ae0; box-shadow: 0 5px 0 #5a3ab0; }
.tc-name { background: linear-gradient(#fff6c0, #ffd24a); border-color: #d9961e; color: #5a4016; box-shadow: 0 3px 0 #a8701a; }
.fc-tarea.tier-3 .tc-name { background: linear-gradient(#ffb35a, #f08a1a); border-color: #b8701a; box-shadow: 0 3px 0 #8a5410; }
.fc-tarea.tier-4 .tc-name { background: linear-gradient(#ff8a5a, #e05a2a); border-color: #a8401a; box-shadow: 0 3px 0 #7a2a0a; }
.fc-tarea.tier-5 .tc-name { background: linear-gradient(#a888f8, #7a5ae0); border-color: #4a2a9a; box-shadow: 0 3px 0 #2a1a6a; }
.tc-card { background: #fff; }
.tc-fr { color: #2a3a55; }

/* ---- チェンジ / できあがり ---- */
.fc-change { color: #5a4016; border-color: #d9961e; background: linear-gradient(#ffe58a, #ffc43a); box-shadow: 0 5px 0 #a8701a, 0 8px 12px rgba(120,90,20,0.2); }
.fc-change small { color: #8a5a10; }
.fc-change.done { color: #fff; border-color: #c8701a; background: linear-gradient(#ffb25a, #f08a1a); box-shadow: 0 5px 0 #8a4a08, 0 0 0 3px #fff, 0 0 16px 3px rgba(255,170,60,0.55); }
.fc-change.done b { text-shadow: 0 2px 0 rgba(120,50,0,0.4); }

/* ---- 「AP+1」の札 ---- */
.fc-apb { background: linear-gradient(#5aa8f0, #3f8fe0); border-color: #2a68b0; box-shadow: 0 3px 0 #1f4a7a; }
.fc-apb.used { background: #e6edf4; border-color: #b8c8d8; color: #98a8b8; }

/* ---- 手札・大きさの札: 明るい大きさの色のまま、ふちは同じ色のこいめ ---- */
.hc.fc-hc { border-color: color-mix(in srgb, var(--cc) 72%, #1a2638); box-shadow: 0 6px 0 color-mix(in srgb, var(--cc) 68%, #1a2638), 0 8px 10px rgba(30,60,100,0.16); }
.fc-hc .nm { -webkit-text-stroke: 6px color-mix(in srgb, var(--cc) 58%, #1a2638); text-shadow: 0 3px 0 color-mix(in srgb, var(--cc) 58%, #1a2638); }
.fc-lab .pill { box-shadow: 0 4px 0 color-mix(in srgb, var(--cc, #8ab4e0) 70%, #1a2638); color: #2a3a55; }
.fc-cake, .tc-cake { filter: drop-shadow(0 6px 4px rgba(40,80,130,0.22)); }
.fc-cake.match { filter: drop-shadow(0 0 6px rgba(255,200,60,0.9)) drop-shadow(0 6px 4px rgba(40,80,130,0.22)); }
.ck .sl.on .rm { fill: #7a9cc0; }
.ck .pl { stroke: #c9d8e8; }
.ck .gl { stroke: #8a9fb8; }
.ck .ct { stroke: #8a9fb8; }
.fx-t { -webkit-text-stroke: 6px #1f3a5e; }

/* ---- タイトル ---- */
.ft-start { background: linear-gradient(#ffb25a, #f08a1a); border-color: #c8701a; color: #fff; text-shadow: 0 3px 0 rgba(120,50,0,0.4);
    box-shadow: 0 7px 0 #8a4a08, 0 0 0 3px #fff, 0 0 0 5px #ffd9a8, 0 12px 18px rgba(120,70,20,0.22); animation: none; }
.ft-start:active { box-shadow: 0 2px 0 #8a4a08, 0 0 0 3px #fff, 0 0 0 5px #ffd9a8; }
.ft-start .bd { color: #f08a1a; box-shadow: inset 0 -5px 0 #ffe0b8, 0 4px 0 rgba(120,50,0,0.3); }
.ft-tut { color: #5a4016; border-color: #d9961e; background: linear-gradient(#fffbe8, #ffe9a8); box-shadow: 0 6px 0 #a8701a, 0 10px 16px rgba(120,90,20,0.18); }
.ft-tut .bd { background: #ffc43a; box-shadow: 0 3px 0 #a8701a; }
.ft-rank { color: #fff; border-color: #2a68b0; background: linear-gradient(#5aa8f0, #3f8fe0); box-shadow: 0 6px 0 #1f4a7a, 0 10px 16px rgba(30,70,130,0.2); text-shadow: 0 2px 0 rgba(20,60,120,0.35); }
.ft-rank .bd { background: #fff; color: #3f8fe0; box-shadow: 0 3px 0 #1f4a7a; }
.ft-chip { color: #2a68b0; border-color: #9fc4ec; background: linear-gradient(#ffffff, #e4f0fc); box-shadow: 0 5px 0 #b8d4ee, 0 8px 12px rgba(40,80,130,0.15); }
.ft-chip.me { color: #2a3a55; border-color: #9fc4ec; background: linear-gradient(#fff, #eaf3fd); }
.ft-chip.idx { color: #1d5a3a; border-color: #8fc0a8; background: linear-gradient(#f4fff8, #d8f0e0); box-shadow: 0 5px 0 #a8d0b8; }
#title-screen .ts-floaters span { color: #8cc4f6; text-shadow: none; }

/* ---- RUN選択・ランキング・設定 ---- */
.rs-plaque, .fx-light .fx-plaque { background: linear-gradient(#5aa8f0, #3f8fe0); border-color: #2a68b0; box-shadow: 0 6px 0 #1f4a7a; text-shadow: 0 3px 0 rgba(20,60,120,0.35); }
.rs-mini, .fx-top .fx-btn { color: #2a68b0; border-color: #9fc4ec; background: linear-gradient(#ffffff, #e4f0fc); box-shadow: 0 5px 0 #b8d4ee; }
.rs-mini.blue { color: #5a4016; border-color: #d9961e; background: linear-gradient(#ffe58a, #ffc43a); box-shadow: 0 5px 0 #a8701a; }
.rs-arrow { color: #3f8fe0; border-color: #9fc4ec; background: linear-gradient(#fff, #e4f0fc); box-shadow: 0 5px 0 #b8d4ee; }
.rs-card, .rk-card { border-color: #bcd8f2; background: linear-gradient(#ffffff, #eef6ff); box-shadow: 0 6px 0 #c8dcf0, 0 12px 18px rgba(40,80,130,0.14); }
.rs-card.sel, .rk-card.sel { border-color: #ffc43a; box-shadow: 0 6px 0 #c8dcf0, 0 0 0 4px #fff, 0 0 20px 4px rgba(255,200,60,0.4), 0 16px 22px rgba(40,80,130,0.16); }
.rs-art { border-color: #bcd8f2; background: linear-gradient(#f4faff, #d6e8fa) !important; }
.rs-art .rsa-floor { background: linear-gradient(#cfe4fa, #b8d6f4); border-top-color: #fff; }
.rs-short, .rs-desc { color: #2a3a55; }
.rs-go { color: #fff; border-color: #c8701a; background: linear-gradient(#ffb25a, #f08a1a); box-shadow: 0 5px 0 #8a4a08, 0 10px 14px rgba(120,70,20,0.2); text-shadow: 0 2px 0 rgba(120,50,0,0.4); }
.rs-go .go-st { color: #fff3b0; }
.rs-bottom, .rk-panel { background: rgba(255,255,255,0.92); border-color: #bcd8f2; box-shadow: 0 5px 0 #c8dcf0; }
.star-btn { color: #5a4016; border-color: #d9961e; background: linear-gradient(#fffbe8, #ffe9a8); box-shadow: 0 4px 0 #a8701a; }
.star-btn.active, .star-btn.cleared.active { color: #5a4016; border-color: #c8701a; background: linear-gradient(#ffe58a, #ffc43a); box-shadow: 0 4px 0 #a8701a, 0 0 0 3px rgba(255,200,60,0.4); }
.rk-seg { background: #e4f0fc; border-color: #bcd8f2; }
.rk-seg button { color: #2a68b0; }
.rk-seg button.on { color: #5a4016; border-color: #c8701a; background: linear-gradient(#ffe58a, #ffc43a); box-shadow: 0 3px 0 #a8701a; }
.rk-head { color: #5a7a9e; }
.rk-row { border-color: #bcd8f2; box-shadow: 0 3px 0 #d4e6f8; }
.rk-star { background: #2a68b0; }
.rk-list { scrollbar-color: #8cc4f6 #e4f0fc; }
#settings-screen .fx-board, #player-manager-overlay .fx-board { background: rgba(255,255,255,0.88); border-color: #bcd8f2; box-shadow: 0 6px 0 #c8dcf0; }
#settings-screen .fx-label { color: #2a68b0; }
#player-manager-overlay .fx-note b { color: #2a68b0; }
#player-manager-overlay .fx-input { border-color: #9fc4ec; }
#player-manager-overlay .delete-btn { background: #e8604b; border-color: #8a2a1a; box-shadow: 0 3px 0 #8a2a1a; }

.sp-mode .df:empty { display: none; }

/* ==================== 第7版: 表示の見なおし・できあがりの演出 ==================== */
/* ターゲット: 名前 → 改行して 倍率 */
.tc-name { flex-direction: column; gap: 2px; padding: 6px 8px 7px; }
.tc-name span { font-size: 1.45rem; line-height: 1.15; }
.tc-name b { font-size: 2.4rem; line-height: 1; }

/* ホールボーナス: ゆとりを持たせ、「数」と「ばいりつ」を 2つの帯に分ける */
.sp-hole { justify-content: flex-start; gap: 0; padding: 10px 14px 12px; }
.sp-hole .sp-lb { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 3px dotted #e8c070; font-size: 1.25rem; }
.hole-row { flex: 1; align-items: center; padding: 0 2px; }
.hole-row + .hole-row { border-top: 2px solid rgba(217,150,30,0.35); }
.hole-row span { font-size: 1.15rem; }
.hole-row b { font-size: 2.6rem; }
.hole-row b.hm { font-size: 2.9rem; }

/* AP+1: とったら灰色になるだけ(取り消し線なし) */
.fc-apb.used { text-decoration: none; }

/* 「つぎは…」は出さない */
.sc-next { display: none; }

/* できあがりの演出 */
.fc-cake.matched { animation: none; }
.fc-cake.done { animation: fcPop .6s cubic-bezier(.2,1.7,.4,1) both; animation-delay: calc(var(--i, 0) * .12s); filter: drop-shadow(0 0 16px #ffd24a) drop-shadow(0 8px 5px rgba(30,70,130,.3)); }
@keyframes fcPop { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.2) rotate(-4deg); } 65% { transform: scale(0.96) rotate(2deg); } 100% { transform: scale(1.04) rotate(0); } }
.fx-ring { position: absolute; z-index: 30; box-sizing: border-box; border-radius: 50%; border: 8px solid #ffd24a; margin: calc(var(--r, 0px) * -1) 0 0 0; transform: translate(-50%, -50%) scale(0.5); opacity: 0; pointer-events: none; animation: fxRing .7s ease-out both; }
@keyframes fxRing { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.95; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; border-width: 2px; } }
.fx-star { position: absolute; z-index: 31; width: 26px; height: 26px; margin: -13px 0 0 -13px; background: currentColor; pointer-events: none;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 4px rgba(255,200,60,.9)); opacity: 0; animation: fxStar .9s ease-out both; }
@keyframes fxStar { 0% { transform: translate(0, 0) scale(0.2) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(var(--s, 1)) rotate(180deg); opacity: 0; } }
.fx-sweep { position: absolute; z-index: 29; left: 12px; top: 178px; width: 696px; height: 342px; border-radius: 28px; overflow: hidden; pointer-events: none; }
.fx-sweep::after { content: ''; position: absolute; top: -10%; bottom: -10%; width: 22%; left: -30%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent); animation: fxSweep .8s .15s ease-in-out both; }
@keyframes fxSweep { to { left: 120%; } }
.fx-score { position: absolute; z-index: 40; transform: translate(-50%, -50%); font-size: 5.2rem; font-weight: 900; color: #fff; white-space: nowrap; pointer-events: none;
    -webkit-text-stroke: 10px #d9561a; paint-order: stroke fill; text-shadow: 0 6px 0 #a8401a; opacity: 0; animation: fxScore 1.1s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes fxScore { 0% { transform: translate(-50%, -30%) scale(0.4); opacity: 0; } 30% { transform: translate(-50%, -60%) scale(1.15); opacity: 1; } 70% { transform: translate(-50%, -75%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -110%) scale(1); opacity: 0; } }
.fx-heal { position: absolute; z-index: 40; transform: translate(-50%, 0); font-size: 2.6rem; font-weight: 900; color: #fff; white-space: nowrap; pointer-events: none;
    -webkit-text-stroke: 7px #2a68b0; paint-order: stroke fill; opacity: 0; animation: fxHeal 1s ease-out both; }
@keyframes fxHeal { 0% { transform: translate(-50%, 20px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -10px); opacity: 0; } }

/* RUNクリア・ゲームオーバー画面: ボタンの文字を まん中に、✓を 円のまん中に */
#run-end-screen .end-btns .rs-mini { height: auto; min-height: 58px; padding: 0 30px; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; font-size: 1.3rem; }
#run-end-screen .ej::before { top: 20px; }
#run-end-screen .ej .dot { display: flex; align-items: center; justify-content: center; line-height: 1; padding-top: 2px; box-sizing: border-box; }
.tc-name span { font-size: 1.2rem; white-space: nowrap; }
.tc-grid .tc-cake { width: 108px; height: 108px; }
.fc-tarea.tier-5 .tc-grid .tc-cake { width: 92px; height: 92px; }

/* ==================== 第8版: 左パネルの整理 + かたち(きほんてん)の表 ==================== */
.sp-player { display: none; }
.sp-hole { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 8px; padding: 8px 10px; text-align: center; flex: none; }
.sp-hole .hole-cell { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.sp-hole .hole-cell + .hole-cell { border-left: 3px dotted #e8c070; }
.sp-hole .hole-cell span { font-size: 1.05rem; font-weight: 900; color: #8a5a10; }
.sp-hole .hole-cell b { font-size: 2.2rem; line-height: 1.05; color: #2a3a55; }
.sp-hole .hole-cell b.hm { color: #2a68b0; }
.sp-forms { flex: 1; min-height: 0; padding: 8px 8px 8px; display: flex; flex-direction: column; }
.sp-forms .sp-lb { margin: 0 0 6px; font-size: 1.05rem; text-align: center; justify-content: center; }
.form-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px; }
.fm-chip { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 4px; border-radius: 12px; border: 3px solid var(--cc, #e8b040); background: color-mix(in srgb, var(--cc, #e8b040) 12%, #fff); }
.fm-chip.tgt { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ffa84a; z-index: 1; }
.fm-pie { flex: none; width: 40px; height: 40px; }
.fm-pie svg { width: 100%; height: 100%; display: block; }
.fm-txt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.05; min-width: 0; }
.fm-n { font-size: .95rem; font-weight: 900; color: #5a6a85; }
.fm-pts { font-size: 1.45rem; font-weight: 900; color: #2a3a55; }
.fm-chip.up .fm-pts { color: #d9561a; }
.fm-lv { position: absolute; top: -9px; right: -4px; padding: 0 6px; border-radius: 9px; background: #ff9a3c; border: 2px solid #fff; color: #fff; font-style: normal; font-size: .8rem; font-weight: 900; line-height: 1.25; }
.form-grid.n3, .form-grid.n4, .form-grid.n5 { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.form-grid.n3 .fm-pie, .form-grid.n4 .fm-pie, .form-grid.n5 .fm-pie { width: 52px; height: 52px; }
.form-grid.n3 .fm-chip, .form-grid.n4 .fm-chip, .form-grid.n5 .fm-chip { gap: 10px; padding: 2px 10px; max-height: 76px; }
.form-grid.n3 .fm-txt, .form-grid.n4 .fm-txt, .form-grid.n5 .fm-txt { flex-direction: row; align-items: baseline; gap: 12px; }
.form-grid.n3 .fm-n, .form-grid.n4 .fm-n, .form-grid.n5 .fm-n { font-size: 1.3rem; min-width: 48px; }
.form-grid.n3 .fm-pts, .form-grid.n4 .fm-pts, .form-grid.n5 .fm-pts { font-size: 2rem; }
.sp-btns { display: flex; flex-direction: column; gap: 8px; }
.sp-btns .sp-btn { height: 48px; font-size: 1.2rem; }
.sp-btns .sp-btn.hidden { display: none; }
.sp-mode { display: none; }
/* 左パネルを ぎゅっと: 10分割でも「きほんてん」が5行 収まるように */
#left-panel { gap: 8px; padding-bottom: 12px; }
#left-panel .sp-brand { height: 52px; font-size: 1.7rem; }
#left-panel .sp-stage { padding: 6px 10px 8px; }
.sp-btns { gap: 6px; }
.sp-btns .sp-btn { height: 42px; font-size: 1.1rem; }
.sp-forms { overflow: hidden; padding: 6px 8px 8px; }
.sp-forms .sp-lb { margin-bottom: 4px; font-size: .95rem; }
.form-grid { gap: 5px; }
.form-grid.n6, .form-grid.n7, .form-grid.n8, .form-grid.n9, .form-grid.n10 { grid-auto-rows: minmax(0, 1fr); }
.form-grid.n6 .fm-chip, .form-grid.n7 .fm-chip, .form-grid.n8 .fm-chip, .form-grid.n9 .fm-chip, .form-grid.n10 .fm-chip { padding: 0 4px; overflow: visible; }
.form-grid.n6 .fm-pie, .form-grid.n7 .fm-pie, .form-grid.n8 .fm-pie, .form-grid.n9 .fm-pie, .form-grid.n10 .fm-pie { width: 34px; height: 34px; }
.form-grid.n6 .fm-n, .form-grid.n7 .fm-n, .form-grid.n8 .fm-n, .form-grid.n9 .fm-n, .form-grid.n10 .fm-n { font-size: .85rem; }
.form-grid.n6 .fm-pts, .form-grid.n7 .fm-pts, .form-grid.n8 .fm-pts, .form-grid.n9 .fm-pts, .form-grid.n10 .fm-pts { font-size: 1.3rem; }

/* ==================== 第9版: かたち表の Lv札を手前に / ステージクリアの見せ方 ==================== */
.fm-chip.tgt { box-shadow: inset 0 0 0 3px #ffa84a; z-index: auto; }
.fm-chip { z-index: auto; }
.fm-lv { z-index: 5; top: -10px; right: -2px; box-shadow: 0 2px 0 #c8600a; }
.form-grid { overflow: visible; }

.sc-rows { width: 600px; font-size: 1.5rem; }
.sc-rows .cl-calc { display: flex; flex-direction: column; gap: 4px; }
.cl-row { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 8px; font-weight: 900; color: #2a3a55; border-bottom: 2px dotted #e8d49a; }
.cl-row b { font-size: 1.7rem; }
.cl-row.stage { margin-top: 4px; border-bottom: 0; background: #fff6d8; border-radius: 12px; color: #8a5a10; }
.cl-row.stage b { font-size: 2rem; color: #d9561a; }
.cl-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding: 6px 12px 4px; border-top: 5px solid #d9961e; font-weight: 900; color: #2a3a55; }
.cl-total span { font-size: 1.6rem; }
.cl-total b { font-size: 3.3rem; line-height: 1.05; color: #2a68b0; text-shadow: 0 3px 0 #e0eefc; }
.cl-uptitle { margin: 8px 0 4px; text-align: center; font-size: 1.15rem; font-weight: 900; color: #fff; background: linear-gradient(#ffa84a, #ec7a1a); border-radius: 12px; padding: 1px 0; text-shadow: 0 2px 0 rgba(120,50,0,.4); }
.cl-ups { display: flex; gap: 10px; justify-content: center; }
.cl-up { position: relative; flex: 1; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-items: center; padding: 6px 10px 6px 8px; border-radius: 16px; border: 4px solid var(--cc); background: color-mix(in srgb, var(--cc) 12%, #fff); }
.cl-up.sub { opacity: .92; }
.cu-pie { grid-row: 1 / 4; width: 56px; height: 56px; }
.cu-pie svg { width: 100%; height: 100%; display: block; }
.cu-fr { font-size: 1.15rem; font-weight: 900; color: #5a6a85; line-height: 1.1; }
.cu-lv, .cu-pts { display: flex; align-items: baseline; gap: 5px; font-weight: 900; line-height: 1.15; }
.cu-lv span, .cu-pts span { font-size: 1rem; color: #7a8aa5; }
.cu-lv i, .cu-pts i { font-style: normal; font-size: .8rem; color: #ff9a3c; }
.cu-lv b { font-size: 1.35rem; color: #d9561a; }
.cu-pts b { font-size: 1.35rem; color: #2a3a55; }
.cl-up em { position: absolute; top: -12px; right: -6px; padding: 0 8px; border-radius: 12px; background: #ff9a3c; border: 3px solid #fff; color: #fff; font-style: normal; font-size: 1.05rem; font-weight: 900; box-shadow: 0 2px 0 #c8600a; }
.cl-ap { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: 6px; font-weight: 900; color: #2a68b0; font-size: 1.2rem; }
.cl-ap b { font-size: 1.5rem; }

.sc-rows { font-size: 1.35rem; width: 600px; max-width: 100%; }
.cl-row { padding: 1px 8px; }
.cl-row b { font-size: 1.55rem; }
.cl-row.stage b { font-size: 1.8rem; }
.cl-total { margin-top: 6px; padding: 4px 12px 2px; border-top-width: 4px; }
.cl-total b { font-size: 3rem; }
.cl-uptitle { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px; font-size: 1.1rem; }
.cl-uptitle em { font-style: normal; background: #fff; color: #2a68b0; border-radius: 10px; padding: 0 10px; text-shadow: none; }
.cl-ups { gap: 8px; }
.cl-up { min-width: 0; grid-template-columns: 48px 1fr; padding: 5px 8px; }
.cu-pie { width: 48px; height: 48px; }
.cu-lv span, .cu-pts span { font-size: .9rem; }
.cu-lv b, .cu-pts b { font-size: 1.2rem; }
/* 共通の「.sc-rows div」(横ならび+点線)を、ステージクリアの新しい部品では打ち消す */
.sc-rows .cl-calc, .sc-rows .cl-ups, .sc-rows .cl-uptitle, .sc-rows .cl-total { border-bottom: 0; }
.sc-rows .cl-calc, .sc-rows .cl-ups { padding: 0; }
.sc-rows .cl-total { border-top: 4px solid #d9961e; padding: 4px 12px 2px; }
.sc-rows .cl-uptitle { padding: 2px 10px; }
.sc-rows .cl-up { display: grid; justify-content: normal; padding: 5px 8px; border: 4px solid var(--cc); }
.sc-rows .cl-up > div { display: block; padding: 0; border: 0; }
.sc-rows .cl-up .cu-lv, .sc-rows .cl-up .cu-pts { display: flex; justify-content: flex-start; }
.sc-rows .cl-up .cu-pie { width: 48px; height: 48px; }
.sc-rows .cl-row.stage { border-bottom: 0; }
.sc-rows .cl-up { grid-template-columns: 62px 1fr; column-gap: 10px; padding: 8px 10px; }
.sc-rows .cl-up .cu-pie { width: 62px; height: 62px; }
.cu-fr { font-size: 1.5rem; }
.cu-lv span, .cu-pts span { font-size: 1.1rem; }
.cu-lv b { font-size: 1.55rem; }
.cu-pts b { font-size: 1.45rem; }
.cu-lv i, .cu-pts i { font-size: .95rem; }
.cl-up em { font-size: 1.25rem; }
/* 4・5分割も 2列にして、10個(10分割)まで どれも見切れないように */
.form-grid.n4, .form-grid.n5 { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); }
.form-grid.n4 .fm-chip, .form-grid.n5 .fm-chip { gap: 4px; padding: 0 5px; max-height: 84px; }
.form-grid.n4 .fm-pie { width: 44px; height: 44px; }
.form-grid.n5 .fm-pie { width: 40px; height: 40px; }
.form-grid.n4 .fm-txt, .form-grid.n5 .fm-txt { flex-direction: column; align-items: flex-start; gap: 0; }
.form-grid.n4 .fm-n, .form-grid.n5 .fm-n { font-size: 1rem; min-width: 0; }
.form-grid.n4 .fm-pts, .form-grid.n5 .fm-pts { font-size: 1.5rem; }
.form-grid { gap: 4px; }
/* 9・10分割は 5行になるので 枠を細く・文字を少し小さくして 中身が枠からはみ出さないように */
.form-grid.n9 .fm-chip, .form-grid.n10 .fm-chip { border-width: 2px; }
.form-grid.n9 .fm-n, .form-grid.n10 .fm-n { font-size: .78rem; }
.form-grid.n9 .fm-pts, .form-grid.n10 .fm-pts { font-size: 1.2rem; }
.form-grid.n9 .fm-pie, .form-grid.n10 .fm-pie { width: 32px; height: 32px; }

/* ==================== 第7版: タイトルは「夢見るピクセルベーカリー」の絵を背景に。まん中の床に スロット、その下に ボタンを まとめる ==================== */
#title-screen .ft-bg { background: url('images/key.webp') center / cover no-repeat; }
#title-screen .ft-bg::after { background: linear-gradient(180deg, rgba(60,30,10,0.32) 0, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 70%, rgba(60,30,10,0.28) 100%); }
#title-screen .ft-bg .ts-city, #title-screen .ft-bg .pc { display: none; }
#title-screen .ft-awning { display: none; }
#title-screen .ts-floaters span { color: #fff6c0; text-shadow: 0 0 10px #ffd84d; }
#title-screen .ft-logo { top: 6px; }
#title-screen .ft-logo .l1 { font-size: 1.1rem; --tfill: linear-gradient(180deg,#fffdf0,#ffe9a8); --tstroke: #6a3010; --tshadow: #3a1806; }
#title-screen .ft-logo .l2 { font-size: 5.6rem !important; }
/* スロット: まん中の床へ(大きさ0.62) */
#title-screen #ts-hero2 { transform: translate(405px, 62px) scale(0.62); transform-origin: 0 0; }
/* ボタン: スロットの下に、白いボードの上へ まとめる(大きなボタンは やめて コンパクトに) */
#title-screen .ft-menu { left: 50%; top: 478px; width: 560px; margin-left: -298px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 12px 14px 14px;
    background: rgba(255,250,238,0.88); border: 4px solid #fff; border-radius: 26px; box-shadow: 0 8px 0 rgba(120,70,20,0.35), 0 14px 26px rgba(60,30,10,0.35); }
#title-screen .ft-menu .ft-start { grid-column: 1 / -1; height: 70px; font-size: 2.1rem; letter-spacing: 10px; border-width: 4px; gap: 12px; padding: 0 20px 0 12px; border-radius: 35px; }
#title-screen .ft-menu .ft-start .bd { width: 48px; height: 48px; font-size: 1.9rem; }
#title-screen .ft-menu .ft-wide { height: 50px; font-size: 1.05rem; letter-spacing: 0; padding: 0 10px 0 8px; gap: 8px; border-width: 3px; border-radius: 25px; }
#title-screen .ft-menu .ft-wide .bd { width: 34px; height: 34px; font-size: 1.2rem; }
#title-screen .ft-menu .ft-wide span:last-child { padding-right: 20px; }
#title-screen .ft-menu .ft-small { grid-column: 1 / -1; gap: 8px; }
#title-screen .ft-menu .ft-chip { height: 44px; font-size: .92rem; border-width: 3px; padding: 0 10px; }
#title-screen .ft-menu .ft-chip .ico { width: 20px; height: 20px; }
#title-screen .ft-menu .ft-chip.set { flex: 0 0 96px; } #title-screen .ft-menu .ft-chip.idx { flex: 0 0 116px; }