/* CAREER SUGOROKU 作り込み版 — 和モダンのお祭り調（朱・金・生成り・青緑・空色。よく晴れた昼） */
:root {
    --ink: #2B2130;
    --mute: #6A5E62;
    --cream: #FFF6E5;
    --washi: #FFFBF2;
    --red: #E8432E;
    --red-d: #B8261A;
    --gold: #E7B53C;
    --gold-d: #B9861A;
    --teal: #16AFA0;
    --sky: #4BB4F0;
    --m: "Shippori Mincho B1", "Zen Kaku Gothic New", serif;
    --g: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
    --seigaiha: radial-gradient(circle at 50% 100%, transparent 0 30%, rgba(255, 255, 255, .7) 31% 34%, transparent 35% 50%, rgba(255, 255, 255, .7) 51% 54%, transparent 55% 70%, rgba(255, 255, 255, .7) 71% 74%, transparent 75%);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: #FDEFD8; color: var(--ink); font-family: var(--g); font-weight: 500; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }
.sg-backdrop {
    position: fixed; inset: 0;
    background: var(--seigaiha) 0 0 / 64px 32px, var(--seigaiha) 32px 16px / 64px 32px, linear-gradient(180deg, #BFE7FF, #FFF1DA 60%, #FDE3C4);
}
.sg-stage {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    overflow: hidden; background: #DDF1FF; border-radius: 22px;
    box-shadow: 0 0 0 4px var(--gold), 0 0 0 7px #fff, 0 30px 80px rgba(43, 33, 48, .28);
    container-type: size;
}
.sg-stage.sg-full { border-radius: 0; box-shadow: none; }
.sg-stage [hidden] { display: none !important; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ───── ボタン（朱塗りに金の縁／和紙に朱の縁） ───── */
.sg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-height: 44px; cursor: pointer; text-decoration: none; border-radius: 999px;
    font: 900 clamp(14px, 4.4cqw, 22px)/1.2 var(--g); letter-spacing: .08em; word-break: keep-all;
    padding: .7em 1.8em .75em; transition: transform .12s, filter .2s;
}
.sg-btn:active { transform: scale(.95); }
.sg-btn-main {
    color: #fff; border: 3px solid var(--gold);
    background: radial-gradient(120% 90% at 50% 0%, #FF7A5C 0, var(--red) 55%, var(--red-d) 100%);
    box-shadow: 0 0 0 3px #fff, 0 .35em 0 3px var(--red-d), 0 .9em 1.6em rgba(232, 67, 46, .35);
    text-shadow: 0 .08em 0 rgba(120, 20, 10, .45);
}
.sg-btn-sub {
    color: var(--ink); border: 3px solid var(--red); background: var(--washi);
    box-shadow: 0 0 0 2px #fff, 0 .28em 0 2px var(--red-d);
}
.sg-btn-s { font-size: clamp(13px, 3.8cqw, 18px); padding: .55em 1.3em .6em; }
.sg-btn:disabled { filter: grayscale(.9) opacity(.55); cursor: default; }
.sg-link { color: var(--ink); font: 700 clamp(12px, 3.4cqw, 15px)/1 var(--g); min-height: 44px; display: inline-flex; align-items: center; }
.sg-link-btn { background: none; border: 0; padding: .4em; text-decoration: underline; cursor: pointer; }
.sg-row { display: flex; gap: 3cqw; justify-content: center; flex-wrap: wrap; }
.sg-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: max(4cqw, env(safe-area-inset-top)) 5cqw max(4cqw, env(safe-area-inset-bottom)); text-align: center; }

/* ───── 上の帯 ───── */
.sg-hud { position: absolute; left: 0; right: 0; top: 0; padding: max(2cqw, env(safe-area-inset-top)) 2.4cqw 0; pointer-events: none; font-size: clamp(10px, 3.1cqw, 16px); }
.sg-hud-row { display: flex; align-items: center; gap: 1.6cqw; }
.sg-icon {
    pointer-events: auto; cursor: pointer; flex: none; width: max(44px, 11.5cqw); height: max(44px, 11.5cqw); border-radius: 50%;
    border: 3px solid var(--gold); background: radial-gradient(circle at 50% 30%, #FFFDF6, #FBE9CC); box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(43, 33, 48, .2);
    font: 800 .82em/1 var(--m); letter-spacing: .02em; color: var(--red-d);
}
.sg-icon.on { background: radial-gradient(circle at 50% 30%, #FF7A5C, var(--red)); color: #fff; }
.img-ui .sg-icon { border: 0; background: url(assets/ui_round.webp) center / 100% 100% no-repeat; box-shadow: none; color: #fff; }
.sg-chapter {
    flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: 800 1.02em/1 var(--m); color: #fff; background: linear-gradient(180deg, #F35A3E, var(--red-d)); border: 2px solid var(--gold);
    padding: .6em .9em; border-radius: 999px; box-shadow: 0 3px 8px rgba(43, 33, 48, .18);
}
.sg-pill { flex: none; display: flex; align-items: baseline; gap: .35em; background: var(--washi); border: 2px solid var(--gold); border-radius: 999px; padding: .45em .8em; box-shadow: 0 3px 8px rgba(43, 33, 48, .14); }
.sg-pill small { font: 800 .62em/1 var(--m); letter-spacing: .12em; color: var(--mute); }
.sg-pill b { font: 800 1.3em/1 var(--m); font-variant-numeric: tabular-nums; }
.sg-plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; margin-top: 1.8cqw; }
.sg-plate {
    position: relative; display: flex; align-items: center; gap: .4em; min-width: 0;
    background: rgba(255, 251, 242, .95); border: 2px solid var(--c); border-radius: 14px; padding: .3em .4em .3em .3em;
    box-shadow: 0 3px 8px rgba(43, 33, 48, .14); transition: transform .25s, box-shadow .25s;
}
.sg-plate.on { transform: translateY(.3em) scale(1.05); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c), 0 6px 14px rgba(43, 33, 48, .22); }
.sg-plate img { width: 2.6em; height: 2.6em; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #fff; border: 2px solid var(--c); }
.sg-plate div { min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.sg-plate b { font: 900 .82em/1 var(--g); color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; filter: brightness(.8); }
.sg-pk { display: flex; align-items: center; gap: .2em; font: 800 .95em/1 var(--m); }
.sg-pk i { width: .9em; height: .65em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFE58A, var(--gold) 60%, var(--gold-d)); flex: none; }
.sg-pc { font: 700 .66em/1 var(--g); color: var(--mute); white-space: nowrap; }
.sg-pc em { font: 800 1.2em/1 var(--m); color: var(--ink); font-style: normal; margin-left: .2em; }
.sg-pk em { font-style: normal; }
.sg-plate s { position: absolute; right: -.3em; top: -.5em; text-decoration: none; font: 800 .7em/1 var(--m); color: #fff; background: var(--c); border: 2px solid #fff; border-radius: 999px; padding: .25em .5em; }

/* ───── 告知・トースト・数字 ───── */
.sg-toast {
    position: absolute; left: 50%; top: calc(max(2cqw, env(safe-area-inset-top)) + 29cqw); transform: translateX(-50%);
    display: flex; align-items: center; gap: .6em; width: max-content; max-width: 92cqw;
    padding: .45em 1.1em .45em .45em; border-radius: 999px; background: var(--washi); border: 3px solid var(--c, var(--red));
    box-shadow: 0 .25em 0 var(--c, var(--red)), 0 6px 14px rgba(43, 33, 48, .16);
    font: 900 clamp(12px, 3.6cqw, 17px)/1.35 var(--g); pointer-events: none; animation: sgToast 2.3s ease forwards;
}
.sg-toast img { width: 2.2em; height: 2.2em; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #fff; flex: none; }
.sg-toast span { word-break: keep-all; overflow-wrap: anywhere; text-align: left; }
.sg-toast b { color: var(--red-d); }
@keyframes sgToast { 0% { opacity: 0; transform: translate(-50%, -2cqw) scale(.9); } 10% { opacity: 1; transform: translate(-50%, 0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -1cqw); } }
.sg-banner { position: absolute; left: 0; right: 0; top: 36%; display: flex; flex-direction: column; align-items: center; gap: .3em; pointer-events: none; animation: sgBanner 1.8s ease forwards; }
.sg-banner small { font: 900 clamp(12px, 3.8cqw, 19px)/1.2 var(--g); letter-spacing: .08em; color: #fff; background: var(--red); border: 2px solid var(--gold); padding: .45em 1.2em; border-radius: 999px; }
.sg-banner b, .sg-word b, .sg-rollnum, .sg-mini-judge, .sg-mini-count {
    font-family: var(--m); font-weight: 800; color: #fff; paint-order: stroke fill; -webkit-text-stroke: .08em var(--red-d);
    text-shadow: 0 .06em 0 var(--gold-d), 0 .12em 0 var(--red-d), 0 .22em .3em rgba(43, 33, 48, .25);
}
.sg-banner b { font-size: clamp(36px, 13cqw, 70px); line-height: 1.05; white-space: nowrap; }
.sg-banner.sg-jp b { font-size: clamp(28px, 10cqw, 54px); }
@keyframes sgBanner { 0% { opacity: 0; transform: scale(1.6); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9) translateY(-4cqw); } }
.sg-word { position: absolute; left: 0; right: 0; top: 26%; display: flex; justify-content: center; pointer-events: none; animation: sgWord 1.7s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.sg-word img { width: 84cqw; height: auto; }
.sg-word b { font-size: clamp(48px, 18cqw, 96px); background: linear-gradient(180deg, #FFF2B0, var(--gold) 50%, #F07A2C); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes sgWord { 0% { opacity: 0; transform: scale(.3) rotate(-8deg); } 20% { opacity: 1; transform: scale(1.1) rotate(2deg); } 35% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6cqw); } }
.sg-rollnum { position: absolute; left: 0; right: 0; top: calc(max(2cqw, env(safe-area-inset-top)) + 36cqw); margin: 0; text-align: center; pointer-events: none; font-size: clamp(60px, 26cqw, 140px); line-height: 1; -webkit-text-stroke-color: var(--c, var(--red-d)); animation: sgRoll 1s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.sg-rollnum small { font: 900 .26em/1 var(--g); -webkit-text-stroke-width: .12em; margin-left: .1em; }
@keyframes sgRoll { 0% { opacity: 0; transform: scale(.3) rotate(-12deg); } 25% { opacity: 1; transform: scale(1.1) rotate(4deg); } 40% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6cqw); } }

/* 案内役の吹き出し */
.sg-tip { position: absolute; left: 3cqw; right: 3cqw; top: calc(max(2cqw, env(safe-area-inset-top)) + 30cqw); display: flex; gap: 2cqw; align-items: flex-start; animation: sgUp .4s cubic-bezier(.34, 1.56, .64, 1); z-index: 3; }
.sg-tip > img { width: 20cqw; height: 20cqw; flex: none; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid var(--gold); box-shadow: 0 0 0 3px #fff; }
.sg-tip-box { flex: 1; background: var(--washi); border: 3px solid var(--red); border-radius: 18px; padding: 2.4cqw 3.2cqw; text-align: left; box-shadow: 0 .3em 0 var(--red-d), 0 8px 18px rgba(43, 33, 48, .18); }
.sg-tip-box small { display: block; font: 800 clamp(10px, 2.7cqw, 13px)/1.2 var(--m); color: var(--red-d); margin-bottom: .3em; }
.sg-tip-box p { margin: 0 0 .6em; font: 700 clamp(13px, 3.9cqw, 18px)/1.6 var(--g); line-break: strict; }
.sg-tip-box b { color: var(--red-d); }
.sg-tip-box .sg-btn { float: right; }
@keyframes sgUp { from { opacity: 0; transform: translateY(6cqw); } }

/* ───── 下の帯（サイコロ・道具） ───── */
.sg-dock {
    position: absolute; left: 3cqw; right: 3cqw; bottom: max(3cqw, env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 2.6cqw;
    background: var(--washi); border: 3px solid var(--gold); border-radius: 26px; padding: 2.2cqw 3cqw 2.4cqw 2cqw;
    box-shadow: 0 0 0 3px #fff, 0 .3em 0 3px var(--gold-d), 0 1em 2em rgba(43, 33, 48, .2); font-size: clamp(10px, 3cqw, 16px);
}
.sg-dice-wrap { --ds: 17cqw; position: relative; flex: none; width: calc(var(--ds) * 1.45); height: calc(var(--ds) * 1.4); display: flex; align-items: center; justify-content: center; gap: 1cqw; padding: 0; border: 0; background: none; cursor: pointer; perspective: 800px; touch-action: manipulation; }
.sg-dice-wrap::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 2%; height: 11%; border-radius: 50%; background: rgba(43, 33, 48, .16); filter: blur(2px); }
.sg-dice-wrap:has(.sg-die2:not([hidden])) { --ds: 12cqw; }
.sg-dice-tilt { display: block; transform-style: preserve-3d; transform: rotateX(-18deg) rotateY(-24deg); }
.sg-dice { display: block; position: relative; width: var(--ds); height: var(--ds); transform-style: preserve-3d; }
.sg-face { position: absolute; inset: 0; border-radius: 20%; background: radial-gradient(circle at 30% 25%, #fff, #FBF4E8 65%, #EEE2CC); box-shadow: inset 0 0 0 .35cqw rgba(185, 134, 26, .5); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 15%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sg-face i { width: 70%; height: 70%; border-radius: 50%; place-self: center; background: radial-gradient(circle at 35% 30%, #56495A, var(--ink)); }
.sg-f1 { transform: translateZ(calc(var(--ds) / 2)); } .sg-f6 { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.sg-f3 { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); } .sg-f4 { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.sg-f2 { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); } .sg-f5 { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }
.sg-f1 i { grid-area: 2 / 2; width: 100%; height: 100%; background: radial-gradient(circle at 35% 30%, #FF8A6E, var(--red-d)); }
.sg-f2 i:nth-child(1) { grid-area: 1 / 3; } .sg-f2 i:nth-child(2) { grid-area: 3 / 1; }
.sg-f3 i:nth-child(1) { grid-area: 1 / 3; } .sg-f3 i:nth-child(2) { grid-area: 2 / 2; } .sg-f3 i:nth-child(3) { grid-area: 3 / 1; }
.sg-f4 i:nth-child(1) { grid-area: 1 / 1; } .sg-f4 i:nth-child(2) { grid-area: 1 / 3; } .sg-f4 i:nth-child(3) { grid-area: 3 / 1; } .sg-f4 i:nth-child(4) { grid-area: 3 / 3; }
.sg-f5 i:nth-child(1) { grid-area: 1 / 1; } .sg-f5 i:nth-child(2) { grid-area: 1 / 3; } .sg-f5 i:nth-child(3) { grid-area: 2 / 2; } .sg-f5 i:nth-child(4) { grid-area: 3 / 1; } .sg-f5 i:nth-child(5) { grid-area: 3 / 3; }
.sg-f6 i:nth-child(1) { grid-area: 1 / 1; } .sg-f6 i:nth-child(2) { grid-area: 2 / 1; } .sg-f6 i:nth-child(3) { grid-area: 3 / 1; } .sg-f6 i:nth-child(4) { grid-area: 1 / 3; } .sg-f6 i:nth-child(5) { grid-area: 2 / 3; } .sg-f6 i:nth-child(6) { grid-area: 3 / 3; }
.sg-die2 .sg-face { background: radial-gradient(circle at 30% 25%, #FFF6C8, #FFD24D 65%, #E7B53C); }
.sg-dock.sg-mine .sg-dice-tilt { animation: sgInvite 1.3s ease-in-out infinite; }
@keyframes sgInvite { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6cqw; } }
.sg-dock.sg-rolling .sg-dice-tilt { animation: sgHop .86s cubic-bezier(.3, .7, .4, 1); }
@keyframes sgHop { 0% { translate: 0 0; } 30% { translate: 0 -9cqw; } 62% { translate: 0 0; } 76% { translate: 0 -2.4cqw; } 100% { translate: 0 0; } }
.sg-dock-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.6cqw; }
.sg-dock-top { display: flex; align-items: center; justify-content: flex-end; gap: 1.6cqw; }
.sg-turn-label:empty { display: none; }
.sg-turn-label { position: absolute; left: 4cqw; top: -1.5em; margin: 0; max-width: 60%; white-space: nowrap;font: 800 clamp(12px, 3.8cqw, 18px)/1 var(--m); color: #fff; background: var(--c, var(--red)); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--c, var(--red)); padding: .55em .9em; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; }
.sg-items { display: flex; gap: 1.2cqw; flex: none; }
.sg-slot { width: max(44px, 11.5cqw); height: max(44px, 11.5cqw); border-radius: 14px; border: 2px solid var(--gold); background: #fff; padding: 2px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 0 var(--gold-d); transition: transform .15s; }
.sg-slot img { width: 100%; height: 100%; object-fit: contain; }
.sg-slot.empty { background: rgba(231, 181, 60, .12); border-style: dashed; box-shadow: none; }
.sg-slot.armed { transform: translateY(-.4em) scale(1.08); border-color: var(--red); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--red); }
.sg-slot:disabled { cursor: default; opacity: .75; }
.sg-dock .sg-btn-main { font-size: clamp(15px, 5cqw, 26px); padding: .55em .4em .6em; }
.sg-dock.sg-mine .sg-btn-main { animation: sgPulse 1.6s ease-in-out infinite; }
@keyframes sgPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
#btnFF.on { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ───── 分かれ道 ───── */
.sg-choice { position: absolute; left: 3cqw; right: 3cqw; bottom: max(3cqw, env(safe-area-inset-bottom)); background: var(--washi); border: 3px solid var(--gold); border-radius: 26px; box-shadow: 0 0 0 3px #fff, 0 1em 2em rgba(43, 33, 48, .22); padding: 3cqw; display: flex; flex-direction: column; gap: 2.4cqw; animation: sgUp .35s cubic-bezier(.34, 1.56, .64, 1); }
.sg-choice-head { margin: 0; font: 800 clamp(16px, 5cqw, 25px)/1.2 var(--m); color: var(--red-d); }
.sg-choice-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.sg-route { cursor: pointer; border: 3px solid var(--c); border-radius: 18px; box-shadow: 0 .3em 0 var(--d); background: linear-gradient(180deg, #fff, var(--l)); padding: 2.2cqw 1.4cqw 2.4cqw; display: flex; flex-direction: column; align-items: center; gap: .35em; transition: transform .12s; min-height: 44px; }
.sg-route:active { transform: scale(.96); }
.sg-route small { font: 800 clamp(11px, 3cqw, 14px)/1 var(--g); color: #fff; background: var(--c); padding: .35em .8em; border-radius: 999px; }
.sg-route b { font: 800 clamp(16px, 5.2cqw, 26px)/1.15 var(--m); color: var(--d); word-break: keep-all; }
.sg-route span { font: 700 clamp(11px, 3.2cqw, 15px)/1.35 var(--g); color: var(--mute); }

/* ───── ポップアップ ───── */
.sg-modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 5cqw; background: rgba(255, 246, 229, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: sgFade .25s ease; z-index: 4; }
@keyframes sgFade { from { opacity: 0; } }
.sg-pop {
    position: relative; width: 100%; max-width: 88cqw; max-height: 100%; overflow-y: auto; touch-action: pan-y;
    background: var(--washi); border: 3px solid var(--gold); border-radius: 24px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--red), 0 1.2em 2.4em rgba(43, 33, 48, .25);
    padding: 5cqw 5cqw 5cqw; display: flex; flex-direction: column; align-items: center; gap: 2.2cqw; text-align: center;
    animation: sgPop .45s cubic-bezier(.34, 1.56, .64, 1);
}
.sg-pop::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9cqw; border-radius: 21px 21px 0 0; background: var(--seigaiha) 0 0 / 40px 20px, linear-gradient(180deg, #FCE7C4, rgba(252, 231, 196, 0)); opacity: .9; pointer-events: none; }
.sg-pop > * { position: relative; }
@keyframes sgPop { from { opacity: 0; transform: scale(.6) rotate(-2deg); } }
.sg-pop-icon { width: 26cqw; height: 26cqw; object-fit: contain; animation: sgBob 1.6s ease-in-out infinite; filter: drop-shadow(0 1cqw 1.2cqw rgba(43, 33, 48, .2)); }
@keyframes sgBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2cqw) rotate(4deg); } }
.sg-pop-tag { margin: 0; font: 800 clamp(10px, 2.8cqw, 13px)/1 var(--m); letter-spacing: .24em; color: #fff; background: var(--red); border: 2px solid var(--gold); padding: .5em 1.2em; border-radius: 999px; }
.sg-pop.good .sg-pop-tag { background: var(--teal); }
.sg-pop.bad .sg-pop-tag { background: #6D86C9; }
.sg-pop-name { margin: 0; font: 800 clamp(20px, 6.6cqw, 34px)/1.25 var(--m); word-break: keep-all; overflow-wrap: anywhere; }
.sg-pop-eff { margin: 0; font: 900 clamp(15px, 4.8cqw, 24px)/1.1 var(--g); color: #fff; background: linear-gradient(180deg, #33D6B8, #129C85); padding: .45em 1.1em .5em; border-radius: 999px; box-shadow: 0 .18em 0 #0B7564; }
.sg-pop.bad .sg-pop-eff { background: linear-gradient(180deg, #FFA45C, #EE772A); box-shadow: 0 .18em 0 #B9561A; }
.sg-pop.item .sg-pop-eff, .sg-pop.gate .sg-pop-eff { background: linear-gradient(180deg, #FFD24D, #E39B12); box-shadow: 0 .18em 0 var(--gold-d); color: var(--ink); }
.sg-pop-msg { margin: 0; font: 700 clamp(13px, 3.9cqw, 18px)/1.65 var(--g); color: var(--mute); line-break: strict; }
.sg-pop-btns { display: flex; gap: 3cqw; justify-content: center; margin-top: 1cqw; }
.sg-pop-btns .sg-btn { min-width: 30cqw; }
.sg-pick { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.sg-pick button { cursor: pointer; border: 3px solid var(--c); border-radius: 16px; background: var(--l); padding: 2cqw 1cqw; display: flex; align-items: center; gap: 1.6cqw; text-align: left; font: 900 clamp(12px, 3.6cqw, 17px)/1.25 var(--g); word-break: keep-all; min-height: 44px; }
.sg-pick img { width: 12cqw; height: 12cqw; border-radius: 50%; border: 2px solid #fff; background: #fff; flex: none; object-fit: cover; }
.sg-compass { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; width: 80%; }
.sg-compass button { min-height: 44px; aspect-ratio: 1; border-radius: 18%; border: 3px solid var(--gold); background: #fff; font: 800 clamp(22px, 8cqw, 40px)/1 var(--m); color: var(--red-d); cursor: pointer; box-shadow: 0 .2em 0 var(--gold-d); }
.sg-gate-team { display: flex; gap: 2cqw; }
.sg-gate-team img { width: 16cqw; height: 16cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: #fff; animation: sgBob 1.4s ease-in-out infinite; }
.sg-gate-team img:nth-child(2) { animation-delay: .15s; } .sg-gate-team img:nth-child(3) { animation-delay: .3s; } .sg-gate-team img:nth-child(4) { animation-delay: .45s; }
.sg-chap-area { margin: -1cqw 0 0; font: 700 clamp(12px, 3.4cqw, 16px)/1.3 var(--g); color: var(--red-d); }
.sg-chap-goal { margin: 0; font: 700 clamp(13px, 3.8cqw, 18px)/1.3 var(--g); }
.sg-chap-goal b { font-family: var(--m); color: var(--red-d); font-size: 1.15em; }
.sg-chap-mis { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.2cqw; text-align: left; }
.sg-chap-mis li { font: 700 clamp(12px, 3.5cqw, 16px)/1.3 var(--g); background: #fff; border: 2px solid rgba(231, 181, 60, .6); border-radius: 12px; padding: .5em .8em; color: var(--mute); }
.sg-chap-mis li.done { color: var(--ink); border-color: var(--gold); background: #FFF6D6; }
/* スキルカード */
.sg-card { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; position: relative; }
.sg-pop.card { animation: sgCardIn .55s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes sgCardIn { 0% { opacity: 0; transform: perspective(900px) rotateY(80deg) scale(.6); } 60% { opacity: 1; transform: perspective(900px) rotateY(-8deg) scale(1.03); } 100% { transform: none; } }
.sg-card-get { margin: 0; font: 800 clamp(22px, 7.4cqw, 38px)/1 var(--m); background: linear-gradient(180deg, #FFE27A, var(--gold) 45%, var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .03em var(--red-d); filter: drop-shadow(0 .05em 0 #fff) drop-shadow(0 .08em 0 var(--gold-d)); }
.sg-new { position: absolute; right: -1cqw; top: 9cqw; z-index: 2; font: 800 clamp(11px, 3cqw, 14px)/1 var(--m); color: #fff; background: var(--red); border: 2px solid var(--gold); border-radius: 999px; padding: .4em .8em; transform: rotate(8deg); animation: sgPop .5s .3s backwards; }
.sg-card-band { width: 100%; display: flex; align-items: center; gap: 3cqw; text-align: left; background: linear-gradient(135deg, var(--c), var(--d)); border: 3px solid var(--gold); border-radius: 18px; padding: 2.4cqw 3cqw; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.sg-card-band img { width: 21cqw; height: 21cqw; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid #fff; flex: none; }
.sg-card-band div { min-width: 0; }
.sg-card-band small { display: block; font: 800 clamp(10px, 3cqw, 14px)/1.3 var(--g); color: #fff; margin-bottom: .3em; }
.sg-card-band b { display: block; font: 800 clamp(19px, 6.4cqw, 32px)/1.15 var(--m); color: #fff; -webkit-text-stroke: .1em rgba(43, 33, 48, .55); paint-order: stroke fill; word-break: keep-all; overflow-wrap: anywhere; }
.sg-card-desc { margin: 0; font: 700 clamp(14px, 4.2cqw, 20px)/1.6 var(--g); line-break: strict; }
.sg-card-intro { margin: 0; width: 100%; text-align: left; background: var(--l); border-radius: 14px; padding: 2cqw 3cqw; font: 500 clamp(12px, 3.4cqw, 15.5px)/1.65 var(--g); line-break: strict; }
.sg-card-intro b { display: block; font-weight: 900; color: var(--d); margin-bottom: .2em; }
.sg-card-why { margin: 0; font: 800 clamp(12px, 3.4cqw, 15px)/1.3 var(--m); color: var(--red-d); }

/* ───── ミニゲーム ───── */
.sg-mini { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 2cqw; padding: max(3cqw, env(safe-area-inset-top)) 3cqw max(3cqw, env(safe-area-inset-bottom)); background: var(--seigaiha) 0 0 / 48px 24px, var(--seigaiha) 24px 12px / 48px 24px, linear-gradient(180deg, var(--l, #FFF1DA), #FFF6E5); animation: sgFade .3s; }
.sg-mini-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6cqw; padding-top: 2cqw; }
.sg-mini-face { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; background: #fff; border: 4px solid var(--c); box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(43, 33, 48, .18); margin-bottom: 1cqw; animation: sgBob 1.8s ease-in-out infinite; }
.sg-mini-job { font: 800 clamp(11px, 3.2cqw, 15px)/1 var(--m); color: #fff; background: var(--c); border: 2px solid var(--gold); border-radius: 999px; padding: .45em 1em; }
.sg-mini-head b { font: 800 clamp(24px, 8cqw, 40px)/1.1 var(--m); color: var(--d); -webkit-text-stroke: .05em #fff; paint-order: stroke fill; text-shadow: 0 .06em 0 var(--gold); }
.sg-mini-head p { margin: 0; font: 700 clamp(12px, 3.6cqw, 17px)/1.4 var(--g); color: var(--mute); }
.sg-mini-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
#mcv { width: 100%; max-height: 100%; aspect-ratio: 640 / 560; object-fit: contain; border-radius: 20px; border: 3px solid var(--gold); box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(43, 33, 48, .2); background: #fff; touch-action: none; }
.sg-mini-count { position: absolute; inset: 0; margin: auto; height: max-content; text-align: center; font-size: clamp(48px, 20cqw, 110px); pointer-events: none; animation: sgCount .5s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.sg-mini-count:empty { display: none; }
@keyframes sgCount { 0% { opacity: 0; transform: scale(2); } 30% { opacity: 1; transform: scale(1); } 90% { opacity: 1; } 100% { opacity: 0; } }
.sg-mini-judge { position: absolute; left: 0; right: 0; top: 8%; margin: 0; text-align: center; font-size: clamp(30px, 11cqw, 60px); pointer-events: none; animation: sgWord 1s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.sg-mini-judge.good { -webkit-text-stroke-color: #1670C9; }
.sg-mini-judge.miss { -webkit-text-stroke-color: #6A6A78; text-shadow: none; }
.sg-mini-foot { display: flex; align-items: center; gap: 3cqw; }
.sg-mini-timer { flex: 1; height: 3cqw; min-height: 10px; background: rgba(43, 33, 48, .1); border-radius: 999px; overflow: hidden; }
.sg-mini-timer em { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--red)); border-radius: inherit; }
.sg-mini-foot span { font: 800 clamp(13px, 3.8cqw, 18px)/1 var(--m); white-space: nowrap; min-width: 9em; text-align: right; }
.sg-quiz { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqw; padding: 6% 7% 10%; }
.sg-quiz-no { margin: 0; font: 800 clamp(12px, 3.4cqw, 16px)/1 var(--m); color: var(--red-d); }
.sg-quiz-q { margin: 0 0 2cqw; font: 900 clamp(16px, 5cqw, 25px)/1.5 var(--g); line-break: strict; background: rgba(255, 251, 242, .9); border-radius: 14px; padding: 2cqw 3cqw; }
.sg-quiz-a { display: flex; flex-direction: column; gap: 2cqw; }
.sg-quiz-btn { min-height: 48px; cursor: pointer; border: 3px solid var(--gold); background: #fff; border-radius: 999px; font: 900 clamp(15px, 4.6cqw, 22px)/1.2 var(--g); padding: .6em 1em; box-shadow: 0 .22em 0 var(--gold-d); }
.sg-quiz-btn.ok { background: var(--teal); color: #fff; border-color: #fff; }
.sg-quiz-btn.ng { background: #C9CDD8; color: #fff; border-color: #fff; }

/* ───── 表彰式・称号・職業の発表 ───── */
.sg-cer { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: 6cqw 5cqw; text-align: center; cursor: pointer; background: var(--seigaiha) 0 0 / 56px 28px, var(--seigaiha) 28px 14px / 56px 28px, radial-gradient(120% 80% at 50% 20%, #FFF6D9, #FCE0B0); animation: sgFade .4s; }
.sg-cer-head { margin: 0; font: 800 clamp(22px, 7.4cqw, 40px)/1.25 var(--m); word-break: keep-all; color: var(--red-d); -webkit-text-stroke: .05em #fff; paint-order: stroke fill; text-shadow: 0 .07em 0 var(--gold); }
.sg-cer-sub { margin: -2cqw 0 0; font: 700 clamp(12px, 3.6cqw, 17px)/1.3 var(--g); color: var(--mute); }
.sg-cer-tap { margin: 2cqw 0 0; font: 700 clamp(12px, 3.4cqw, 15px)/1 var(--g); color: var(--mute); animation: sgBlink 1.2s ease-in-out infinite; }
@keyframes sgBlink { 50% { opacity: .35; } }
.sg-podium { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2cqw; }
.sg-podium li { position: relative; display: grid; grid-template-columns: 12cqw 13cqw 1fr auto; align-items: center; gap: 2cqw; background: #fff; border: 3px solid var(--c); border-radius: 18px; padding: 1.6cqw 3cqw 1.6cqw 1.6cqw; text-align: left; box-shadow: 0 .25em 0 var(--c); animation: sgSlide .5s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.sg-podium li:first-child { transform: scale(1.04); background: linear-gradient(90deg, #FFF3C4, #fff); }
.sg-podium li.me { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--red), 0 .25em 0 6px var(--red-d); }
@keyframes sgSlide { from { opacity: 0; transform: translateX(-20cqw); } }
.sg-medal { width: 12cqw; height: 12cqw; display: grid; place-items: center; }
.sg-medal img { width: 100%; height: 100%; object-fit: contain; }
.sg-medal i { width: 10cqw; height: 10cqw; border-radius: 50%; display: grid; place-items: center; font: 800 clamp(13px, 4cqw, 20px)/1 var(--m); font-style: normal; color: #fff; background: radial-gradient(circle at 35% 30%, #FFE58A, var(--gold) 60%, var(--gold-d)); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--gold-d); }
.sg-podium li:nth-child(2) .sg-medal i { background: radial-gradient(circle at 35% 30%, #fff, #C9D3DF 60%, #8E9AAA); box-shadow: 0 0 0 2px #8E9AAA; }
.sg-podium li:nth-child(3) .sg-medal i { background: radial-gradient(circle at 35% 30%, #FFD9B8, #D98A4E 60%, #A35E2B); box-shadow: 0 0 0 2px #A35E2B; }
.sg-podium li:nth-child(4) .sg-medal i { background: radial-gradient(circle at 35% 30%, #fff, #CBEFE9 60%, #6FBFB2); box-shadow: 0 0 0 2px #6FBFB2; color: var(--ink); }
.sg-pav { width: 13cqw; height: 13cqw; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #FFF6E5; border: 2px solid var(--c); }
.sg-podium b { font: 900 clamp(15px, 4.6cqw, 22px)/1.2 var(--g); }
.sg-podium em { font: 800 clamp(18px, 6cqw, 30px)/1 var(--m); font-style: normal; color: var(--gold-d); font-variant-numeric: tabular-nums; }
.sg-podium em::after { content: " 両"; font-size: .55em; color: var(--mute); }
.sg-podium small { position: absolute; right: 2cqw; top: -1.6cqw; font: 800 clamp(10px, 2.8cqw, 13px)/1 var(--m); color: #fff; background: var(--c); padding: .3em .6em; border-radius: 999px; }
.sg-crown { position: absolute; left: 13cqw; top: -5cqw; width: 9cqw; height: 7cqw; animation: sgBob 1.4s ease-in-out infinite; }
.sg-crown img { width: 100%; height: 100%; object-fit: contain; }
.sg-crown.fb { background: linear-gradient(180deg, #FFE58A, var(--gold) 70%, var(--gold-d)); clip-path: polygon(0 100%, 0 25%, 25% 55%, 50% 0, 75% 55%, 100% 25%, 100% 100%); }
.sg-plaque { position: relative; padding: 5cqw 8cqw; background: linear-gradient(180deg, #D8A86A, #B9824A); border: 4px solid var(--gold); border-radius: 12px; box-shadow: 0 0 0 4px #fff, 0 1em 2em rgba(43, 33, 48, .25); animation: sgStamp .6s cubic-bezier(.34, 1.56, .64, 1); }
.sg-plaque b { display: block; font: 800 clamp(26px, 9cqw, 48px)/1.2 var(--m); color: #fff; -webkit-text-stroke: .07em #6B3E1C; paint-order: stroke fill; text-shadow: 0 .06em 0 #6B3E1C; word-break: keep-all; }
@keyframes sgStamp { 0% { opacity: 0; transform: scale(2.2) rotate(-6deg); } 60% { opacity: 1; transform: scale(.95); } 100% { transform: none; } }
.sg-cer-new { margin: 0; font: 800 clamp(13px, 3.8cqw, 18px)/1 var(--m); color: #fff; background: var(--red); border: 2px solid var(--gold); padding: .5em 1.2em; border-radius: 999px; }
.sg-cer-hint { margin: 0; font: 700 clamp(13px, 3.8cqw, 17px)/1.4 var(--g); color: var(--mute); }
.sg-scroll { width: 78cqw; background: linear-gradient(90deg, #8A5A34, #C08A56 8%, #C08A56 92%, #8A5A34); border-radius: 10px; padding: 3cqw 3cqw; box-shadow: 0 1em 2em rgba(43, 33, 48, .25); }
.sg-scroll-in { overflow: hidden; max-height: 0; transition: max-height 1.4s cubic-bezier(.2, .8, .2, 1); background: var(--washi); border: 4px solid var(--gold); border-left-width: 6px; border-right-width: 6px; border-radius: 4px; display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.sg-scroll.open .sg-scroll-in { max-height: 120cqw; padding: 4cqw 3cqw; }
.sg-scroll-in img { width: 34cqw; height: 34cqw; border-radius: 50%; object-fit: cover; border: 4px solid var(--c); background: var(--l); }
.sg-scroll-type { margin: 0; font: 800 clamp(12px, 3.4cqw, 16px)/1 var(--m); color: var(--d); }
.sg-scroll-name { margin: 0; font: 800 clamp(26px, 8.6cqw, 44px)/1.15 var(--m); color: var(--c); -webkit-text-stroke: .05em var(--d); paint-order: stroke fill; word-break: keep-all; }
.sg-scroll-why { margin: 0; font: 700 clamp(13px, 3.8cqw, 17px)/1.6 var(--g); line-break: strict; }

/* ───── メニュー ───── */
.sg-menu { background: rgba(255, 246, 229, .95); gap: 5cqw; z-index: 7; }
.sg-menu-head { margin: 0; font: 800 clamp(34px, 11cqw, 60px)/1 var(--m); color: var(--red-d); -webkit-text-stroke: .04em #fff; paint-order: stroke fill; text-shadow: 0 .07em 0 var(--gold); }
.sg-menu .sg-btn { min-width: 62cqw; }

/* ───── タイトル ───── */
.sg-title { justify-content: flex-end; gap: 2.6cqw; padding-bottom: max(5cqw, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255, 246, 229, 0) 54%, rgba(255, 246, 229, .9) 68%, rgba(255, 246, 229, .97)); }
.sg-logo-wrap { margin-bottom: auto; margin-top: 14cqw; width: 92cqw; display: flex; justify-content: center; }
.sg-logo { width: 90cqw; height: auto; filter: drop-shadow(0 1.4cqw 2cqw rgba(43, 33, 48, .22)); animation: sgFloat 3.2s ease-in-out infinite; }
@keyframes sgFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.6cqw) rotate(1deg); } }
/* 題字の画像が無いときの代わり：朱塗りの明朝に金の縁、扇の飾り */
.sg-logo-text { position: relative; margin: 0; padding: 7cqw 6cqw 3cqw; display: flex; flex-direction: column; align-items: center; animation: sgFloat 3.2s ease-in-out infinite; }
.sg-lt-fan { position: absolute; left: 50%; top: 0; width: 70cqw; height: 35cqw; transform: translateX(-50%); border-radius: 70cqw 70cqw 0 0; background: repeating-conic-gradient(from -90deg at 50% 100%, #FFF3D0 0 9deg, #FCE0A8 9deg 18deg); border: 1cqw solid var(--gold); border-bottom: 0; box-shadow: 0 0 0 1cqw #fff; z-index: -1; opacity: .95; }
.sg-logo-text small { font: 800 8.6cqw/1 var(--m); letter-spacing: .3em; margin-right: -.3em; color: var(--red-d); -webkit-text-stroke: .1em #fff; paint-order: stroke fill; text-shadow: 0 .08em 0 var(--gold); }
.sg-logo-text b {
    font: 800 12.6cqw/1.05 var(--m); letter-spacing: 0;
    background: linear-gradient(180deg, #FF7A5C 0%, var(--red) 45%, var(--red-d) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: .025em var(--gold-d);
    filter: drop-shadow(.6cqw 0 0 #fff) drop-shadow(-.6cqw 0 0 #fff) drop-shadow(0 .6cqw 0 #fff) drop-shadow(0 -.6cqw 0 #fff) drop-shadow(0 1.2cqw 0 var(--gold)) drop-shadow(0 1.8cqw 1cqw rgba(43, 33, 48, .25));
}
.sg-lt-ja { margin-top: 3cqw; font: 800 5cqw/1 var(--m); letter-spacing: .3em; color: var(--ink); background: var(--washi); padding: .5em .8em .5em 1.1em; border: .6cqw solid var(--gold); border-radius: 4px; box-shadow: 0 0 0 .6cqw #fff, 0 1.2cqw 0 .6cqw var(--red); }
.sg-catch { margin: 0; font: 800 clamp(16px, 5.2cqw, 28px)/1.5 var(--m); letter-spacing: .04em; word-break: keep-all; text-shadow: 0 0 .3em #fff, 0 0 .6em #fff; background: rgba(255, 251, 242, .94); border: 2px solid var(--gold); border-radius: 16px; padding: .5em 1.1em; box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(43, 33, 48, .14); position: relative; z-index: 1; }
.sg-title-btns { display: flex; flex-direction: column; gap: 2.6cqw; align-items: center; }
.sg-title-btns > .sg-btn-main { font-size: clamp(19px, 6.8cqw, 34px); padding: .55em 2.6em .6em; animation: sgPulse 1.6s ease-in-out infinite; }
.sg-title-stats { margin: 0; display: flex; gap: 2cqw; flex-wrap: wrap; justify-content: center; }
.sg-title-stats span { font: 700 clamp(11px, 3.2cqw, 15px)/1 var(--g); background: rgba(255, 255, 255, .9); border: 2px solid var(--gold); border-radius: 999px; padding: .5em .9em; }
.sg-title-stats b { font-family: var(--m); color: var(--red-d); }
.sg-note { margin: 0; font-size: clamp(11px, 3cqw, 14px); color: var(--mute); line-height: 1.6; word-break: keep-all; }
.sg-demo-tag { position: absolute; top: max(3cqw, env(safe-area-inset-top)); left: 3cqw; font: 800 clamp(10px, 2.8cqw, 14px)/1 var(--m); letter-spacing: .2em; background: var(--red); border: 2px solid var(--gold); color: #fff; padding: .6em 1em; border-radius: 999px; }
.sg-demo-tag::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: #FFE58A; margin-right: .6em; animation: sgBlink 1s steps(2) infinite; }
.sg-sound { position: absolute; top: max(3cqw, env(safe-area-inset-top)); right: 3cqw; min-width: 44px; min-height: 44px; cursor: pointer; border: 2px solid var(--gold); background: var(--washi); border-radius: 999px; padding: 0 1em; font: 800 clamp(11px, 3.2cqw, 15px)/1 var(--m); box-shadow: 0 3px 8px rgba(43, 33, 48, .15); }

/* ───── 章をえらぶ・あそびかた・図鑑 共通 ───── */
.sg-select, .sg-howto, .sg-dex { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; gap: 3cqw; background: var(--seigaiha) 0 0 / 56px 28px, var(--seigaiha) 28px 14px / 56px 28px, linear-gradient(180deg, #CDEBFF, #FFF6E5 40%); }
.sg-select > *, .sg-howto > *, .sg-dex > * { flex: none; }
.sg-topbar { width: 100%; display: flex; align-items: center; gap: 2.4cqw; }
.sg-back { width: max(44px, 11.5cqw); height: max(44px, 11.5cqw); border-radius: 50%; border: 3px solid var(--gold); background: var(--red); color: #fff; font: 800 7cqw/1 var(--m); cursor: pointer; padding-bottom: .12em; box-shadow: 0 0 0 2px #fff; }
.sg-screen-title { flex: 1; margin: 0; text-align: left; font: 800 clamp(20px, 6.6cqw, 34px)/1 var(--m); color: var(--red-d); -webkit-text-stroke: .04em #fff; paint-order: stroke fill; text-shadow: 0 .06em 0 var(--gold); }
.sg-stage-list { width: 100%; display: flex; flex-direction: column; gap: 3.4cqw; }
.sg-stage-card { position: relative; overflow: hidden; cursor: pointer; text-align: left; display: grid; grid-template-columns: 1fr; gap: .45em; padding: 3.4cqw 4cqw 3.6cqw 40cqw; min-height: 36cqw; border-radius: 20px; background: var(--washi); border: 3px solid var(--gold); box-shadow: 0 0 0 3px #fff, 0 .35em 0 3px var(--gold-d); transition: transform .12s; font-size: clamp(11px, 3.2cqw, 15px); }
.sg-stage-card:active { transform: scale(.98); }
.sg-sc-art { position: absolute; left: 0; top: 0; bottom: 0; width: 36cqw; background: center / cover no-repeat; border-right: 3px solid var(--gold); }
.sg-sc-no { font: 800 .85em/1 var(--m); letter-spacing: .2em; color: var(--red-d); }
.sg-stage-card b { font: 800 1.45em/1.25 var(--m); word-break: keep-all; overflow-wrap: anywhere; }
.sg-sc-area, .sg-sc-best { color: var(--mute); font-weight: 700; }
.sg-sc-goal { font-weight: 900; }
.sg-sc-stars i { font-style: normal; font-size: 1.5em; color: #DCCFB8; margin-right: .1em; }
.sg-sc-stars i.on { color: var(--gold); text-shadow: 0 0 .3em #fff, 0 .05em 0 var(--gold-d); }
.sg-stage-card.locked { cursor: default; filter: grayscale(.6); }
.sg-sc-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4cqw; text-align: center; background: rgba(255, 246, 229, .88); font: 900 1.1em/1.4 var(--g); }
.sg-howto-body { width: 100%; display: flex; flex-direction: column; gap: 3cqw; text-align: left; }
.sg-howto-body section { background: var(--washi); border: 3px solid var(--gold); border-radius: 18px; padding: 3.4cqw 4cqw; box-shadow: 0 0 0 3px #fff; }
.sg-howto-body h3 { margin: 0 0 .5em; font: 800 clamp(16px, 5cqw, 24px)/1.2 var(--m); color: var(--red-d); }
.sg-howto-body p { margin: .4em 0 0; font: 500 clamp(13px, 3.8cqw, 17px)/1.7 var(--g); line-break: strict; }
.sg-howto-body b { color: var(--red-d); }
.sg-how-tiles, .sg-how-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2cqw; }
.sg-how-tiles li, .sg-how-list li { display: flex; align-items: center; gap: 3cqw; font: 500 clamp(12px, 3.5cqw, 16px)/1.5 var(--g); }
.sg-how-tiles i { width: 12cqw; height: 12cqw; flex: none; border-radius: 50%; display: grid; place-items: center; font: 900 clamp(11px, 3.2cqw, 15px)/1 var(--g); font-style: normal; color: #fff; border: 3px solid var(--gold); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.sg-how-tiles img, .sg-how-list img { width: 12cqw; height: 12cqw; flex: none; object-fit: contain; }
.sg-how-tiles b, .sg-how-list b { display: block; font-weight: 900; color: var(--ink); }
.sg-how-list small { display: inline-block; margin: 0 0 .2em; font: 800 .8em/1 var(--m); color: #fff; background: var(--red); border-radius: 999px; padding: .3em .7em; }
.sg-dex-count { font: 800 clamp(11px, 3.2cqw, 15px)/1.2 var(--m); color: var(--mute); text-align: right; }
.sg-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.sg-tabs button { min-height: 44px; cursor: pointer; border: 3px solid var(--gold); border-radius: 999px; background: #fff; font: 800 clamp(13px, 3.8cqw, 18px)/1 var(--m); }
.sg-tabs button.on { background: var(--red); color: #fff; }
.sg-dex-body { width: 100%; display: flex; flex-direction: column; gap: 3cqw; text-align: left; padding-bottom: 6cqw; }
.sg-dex-job { background: var(--washi); border: 3px solid var(--c); border-radius: 18px; padding: 3cqw 4cqw; box-shadow: 0 .3em 0 var(--d); font: 500 clamp(12px, 3.6cqw, 16px)/1.65 var(--g); }
.sg-dex-job header { display: flex; align-items: center; gap: 3cqw; }
.sg-dex-job header img { width: 20cqw; height: 20cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: var(--l); flex: none; }
.sg-dex-job.locked header img { filter: brightness(0) opacity(.25); }
.sg-dex-job header small { display: block; font: 800 .85em/1.3 var(--m); color: var(--d); }
.sg-dex-job header b { display: block; font: 800 1.45em/1.2 var(--m); }
.sg-dex-job header span { display: block; color: var(--mute); font-weight: 700; }
.sg-dex-job p { margin: .8em 0 0; line-break: strict; }
.sg-dex-flow { margin: .8em 0 0; padding: 0; list-style: none; display: flex; gap: 1.6cqw; counter-reset: f; }
.sg-dex-flow li { flex: 1; background: var(--l); border-radius: 12px; padding: .6em .5em; font: 800 .9em/1.4 var(--g); text-align: center; counter-increment: f; }
.sg-dex-flow li::before { content: counter(f); display: block; font: 800 1.2em/1 var(--m); color: var(--d); margin-bottom: .2em; }
.sg-dex-job dl { margin: .8em 0 0; display: grid; grid-template-columns: auto 1fr; gap: .3em 1em; }
.sg-dex-job dt { font-weight: 900; color: var(--d); }
.sg-dex-job dd { margin: 0; }
.sg-dex-lock { color: var(--mute); font-weight: 700; }
.sg-dex-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.sg-dex-card { background: var(--l); border: 2px solid var(--c); border-radius: 14px; padding: 2.4cqw; display: flex; flex-direction: column; gap: .3em; font: 500 clamp(11px, 3.2cqw, 14px)/1.5 var(--g); }
.sg-dex-card small { align-self: flex-start; font: 800 .85em/1 var(--m); color: #fff; background: var(--c); padding: .3em .7em; border-radius: 999px; }
.sg-dex-card b { font: 800 1.2em/1.25 var(--m); }
.sg-dex-card.locked { background: #F2EEE6; border-color: #D9D0C0; color: var(--mute); }
.sg-dex-card.locked small { background: #BDB3A2; }
.sg-dex-titles { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.sg-dex-title { background: linear-gradient(180deg, #D8A86A, #B9824A); border: 3px solid var(--gold); border-radius: 12px; padding: 2.4cqw; display: flex; flex-direction: column; gap: .3em; color: #fff; font: 600 clamp(11px, 3cqw, 14px)/1.45 var(--g); }
.sg-dex-title b { font: 800 1.3em/1.2 var(--m); }
.sg-dex-title.locked { background: #E8E1D3; border-color: #D2C6B0; color: var(--mute); }

/* ───── 結果 ───── */
.sg-result { z-index: 6; justify-content: flex-start; overflow-y: auto; touch-action: pan-y; gap: 3cqw; padding-top: max(7cqw, env(safe-area-inset-top)); background: var(--seigaiha) 0 0 / 56px 28px, var(--seigaiha) 28px 14px / 56px 28px, linear-gradient(180deg, #FFF3D6, #FFF6E5 30%); }
.sg-result > * { flex: none; }
.sg-res-top { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; }
.sg-res-head { margin: 0; font: 800 clamp(36px, 12.6cqw, 66px)/1 var(--m); background: linear-gradient(180deg, #FFE27A, var(--gold) 45%, #F07A2C); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .03em var(--red-d); filter: drop-shadow(0 .05em 0 #fff) drop-shadow(0 .09em 0 var(--red-d)); animation: sgPop .6s cubic-bezier(.34, 1.56, .64, 1); }
.sg-res-sub { margin: 0; font: 800 clamp(13px, 3.9cqw, 18px)/1.4 var(--m); color: var(--mute); }
.sg-res-stats { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8cqw; }
.sg-res-stats div { background: var(--washi); border: 3px solid var(--gold); border-radius: 14px; padding: 2cqw .5cqw; display: flex; flex-direction: column; gap: .35em; }
.sg-res-stats small { font: 800 clamp(10px, 2.8cqw, 13px)/1 var(--g); color: var(--mute); }
.sg-res-stats b { font: 800 clamp(17px, 5.8cqw, 30px)/1 var(--m); font-variant-numeric: tabular-nums; }
.sg-res-stats div:first-child b { color: var(--red-d); }
.sg-res-best, .sg-res-unlock { margin: 0; font: 800 clamp(13px, 3.9cqw, 18px)/1.3 var(--m); color: #fff; background: var(--red); border: 2px solid var(--gold); padding: .5em 1.2em; border-radius: 999px; animation: sgPop .5s .6s backwards; }
.sg-res-unlock { background: var(--teal); }
.sg-res-mis { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.4cqw; }
.sg-res-mis li { display: flex; align-items: center; gap: 2cqw; background: #fff; border: 2px solid #E6D7BC; border-radius: 999px; padding: .4em 1em .4em .5em; text-align: left; font: 700 clamp(12px, 3.6cqw, 16px)/1.3 var(--g); color: var(--mute); }
.sg-res-mis li.got { color: var(--ink); border-color: var(--gold); }
.sg-star { font-size: 1.6em; line-height: 1; color: #DCCFB8; }
.sg-res-mis li.got .sg-star { color: var(--gold); animation: sgStamp .5s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: inherit; text-shadow: 0 .05em 0 var(--gold-d); }
.sg-res-mis em { margin-left: auto; font: 800 .8em/1 var(--m); font-style: normal; color: #fff; background: var(--red); border-radius: 999px; padding: .35em .6em; }
.sg-res-hand { width: 100%; display: flex; flex-wrap: wrap; gap: 1.4cqw; justify-content: center; }
.sg-mini-card { display: inline-flex; align-items: center; padding: .45em .8em; border-radius: 8px; background: var(--l); border: 2px solid var(--c); font: 900 clamp(11px, 3.1cqw, 14px)/1.2 var(--g); animation: sgPop .4s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.sg-res-none { font: 700 clamp(12px, 3.4cqw, 15px)/1.5 var(--g); color: var(--mute); }
.sg-res-btns { display: flex; flex-direction: column; gap: 3cqw; align-items: center; padding-bottom: 5cqw; }
.sg-res-btns .sg-btn { min-width: 76cqw; }
.sg-res-btns-top { padding-bottom: 0; }
.sg-res-btns-top .sg-row .sg-btn { min-width: 34cqw; }
.sg-res-match { width: 100%; background: var(--washi); border: 3px solid var(--gold); border-radius: 20px; padding: 3.4cqw 4cqw; text-align: left; box-shadow: 0 0 0 3px #fff, 0 .3em 0 3px var(--gold-d); }
.sg-res-lead { margin: 0 0 1.6cqw; font: 800 clamp(12px, 3.6cqw, 17px)/1.4 var(--m); color: var(--mute); }
.sg-res-job { display: flex; align-items: center; gap: 3cqw; }
.sg-res-job img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); background: var(--cream); flex: none; }
.sg-res-job > div { min-width: 0; }
.sg-res-type { margin: 0 0 .3em; font: 800 clamp(11px, 3cqw, 14px)/1.3 var(--m); color: var(--red-d); }
.sg-res-name { margin: 0; font: 800 clamp(16px, 5.5cqw, 27px)/1.25 var(--m); word-break: keep-all; overflow-wrap: anywhere; }
.sg-res-why { margin: 2.4cqw 0 0; font: 900 clamp(13px, 3.8cqw, 17px)/1.6 var(--g); color: var(--red-d); line-break: strict; }
.sg-res-desc { margin: 1.4cqw 0 2.4cqw; font: 500 clamp(13px, 3.7cqw, 17px)/1.7 var(--g); line-break: strict; }
.sg-res-bars { display: flex; flex-direction: column; gap: 1.2cqw; }
.sg-res-bar { display: grid; grid-template-columns: 9em 1fr 3.4em; align-items: center; gap: .8em; font: 700 clamp(11px, 3cqw, 14px)/1 var(--g); }
.sg-res-bar i { height: 1.1em; background: rgba(43, 33, 48, .08); border-radius: 999px; overflow: hidden; }
.sg-res-bar em { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.sg-res-bar span:last-child { text-align: right; font-family: var(--m); font-weight: 800; }
.sg-res-small { margin: 2cqw 0 0; font-size: clamp(11px, 2.8cqw, 13.6px); color: var(--mute); line-height: 1.6; }

/* ───── ふすまの切り替え・読み込み ───── */
.sg-fusuma { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.sg-fusuma i { position: absolute; top: 0; bottom: 0; width: 51%; background: var(--seigaiha) 0 0 / 56px 28px, var(--seigaiha) 28px 14px / 56px 28px, linear-gradient(180deg, #F6D79E, #F2C27C); border: 0 solid var(--red-d); transition: transform .42s cubic-bezier(.7, 0, .3, 1); }
.sg-fusuma i:first-child { left: 0; transform: translateX(-102%); border-right-width: 1.2cqw; box-shadow: inset -2cqw 0 0 var(--gold); }
.sg-fusuma i:last-child { right: 0; transform: translateX(102%); border-left-width: 1.2cqw; box-shadow: inset 2cqw 0 0 var(--gold); }
.sg-fusuma.close i { transform: none; }
.sg-fusuma.close { pointer-events: auto; }
.sg-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: var(--cream); font: 800 clamp(12px, 3cqw, 15px)/1 var(--m); letter-spacing: .3em; transition: opacity .4s; z-index: 10; }
.sg-loading i { width: 10cqw; height: 10cqw; border-radius: 22%; background: #fff; border: .8cqw solid var(--red); animation: sgBounce .6s ease-in-out infinite alternate; }
@keyframes sgBounce { to { transform: translateY(-4cqw) rotate(90deg); } }
.sg-loading.off { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .sg-logo, .sg-logo-text, .sg-title-btns > .sg-btn-main, .sg-dock.sg-mine .sg-dice-tilt, .sg-dock.sg-mine .sg-btn-main, .sg-pop-icon, .sg-gate-team img, .sg-crown { animation: none; }
}

/* ───── スマホ（幅375px前後）でも文字を12px未満にしない（2026-10-20 審査対応）。元の大きさは保ち、下限だけを足す ───── */
.sg-hud { font-size: max(12px, clamp(10px, 3.1cqw, 16px)); }
.sg-icon { font-size: max(12px, .82em); }
.img-ui .sg-icon.on { background: radial-gradient(circle at 50% 30%, #FF7A5C, var(--red)); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--gold); color: #fff; }
.sg-chapter { font-size: max(12px, 1.02em); }
.sg-pill small { font-size: max(12px, .62em); letter-spacing: .04em; }
.sg-plates { gap: 1cqw; }
.sg-plate { gap: .25em; padding: .3em .3em .3em .25em; }
.sg-plate img { width: 2.3em; height: 2.3em; }
.sg-plate b { font-size: max(12px, .82em); }
.sg-pk { font-size: max(12px, .95em); }
.sg-pc { font-size: max(12px, .66em); }
.sg-pc em { font-size: 1em; }
.sg-plate s { font-size: max(12px, .7em); }
.sg-tip-box small { font-size: max(12px, clamp(10px, 2.7cqw, 13px)); }
.sg-dock { font-size: max(12px, clamp(10px, 3cqw, 16px)); }
.sg-route small { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.sg-route span { font-size: max(12px, clamp(11px, 3.2cqw, 15px)); }
.sg-pop-tag { font-size: max(12px, clamp(10px, 2.8cqw, 13px)); }
.sg-new { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.sg-card-band small { font-size: max(12px, clamp(10px, 3cqw, 14px)); }
.sg-mini-job { font-size: max(12px, clamp(11px, 3.2cqw, 15px)); }
.sg-podium small { font-size: max(12px, clamp(10px, 2.8cqw, 13px)); }
.sg-title-stats span { font-size: max(12px, clamp(11px, 3.2cqw, 15px)); }
.sg-note { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.sg-demo-tag { font-size: max(12px, clamp(10px, 2.8cqw, 14px)); }
.sg-sound { font-size: max(12px, clamp(11px, 3.2cqw, 15px)); }
.sg-sc-no { font-size: max(12px, .85em); }
.sg-how-tiles i { font-size: max(12px, clamp(11px, 3.2cqw, 15px)); }
.sg-how-list small { font-size: max(12px, .8em); }
.sg-dex-count { font-size: max(12px, clamp(11px, 3.2cqw, 15px)); }
.sg-dex-job header small { font-size: max(12px, .85em); }
.sg-dex-card { font-size: max(12px, clamp(11px, 3.2cqw, 14px)); }
.sg-dex-card small { font-size: max(12px, .85em); }
.sg-dex-title { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.sg-res-stats small { font-size: max(12px, clamp(10px, 2.8cqw, 13px)); }
.sg-res-mis em { font-size: max(12px, .8em); }
.sg-mini-card { font-size: max(12px, clamp(11px, 3.1cqw, 14px)); }
.sg-res-type { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.sg-res-bar { font-size: max(12px, clamp(11px, 3cqw, 14px)); }
.sg-res-small { font-size: max(12px, clamp(11px, 2.8cqw, 13.6px)); }