/* ソシャゲあるあるゲーム — 色はすべてCSS変数 */
:root {
  --accent: #7b3fe4; --accent-ink: #ffffff; --accent-soft: #ece3fd;
  --ph-bg: #1c1538; --ph-ink: #f4f1ff; --ph-sub: #b9b0dc; --ph-panel: #2b2357; --ph-line: #463c80; --ph-frame: #0c0918;
  --gold: #ffcf3f; --gold-ink: #2b2000; --ssr: #ff5fa2; --sr: #ffcf3f; --r: #8fb3ff; --maint: #ff9f43; --err: #ff6b6b; --dim: rgba(5, 3, 15, .6);
  --black: #000; --white: #fff; --g1: #3b2d7a; --g2: #3e2b8f; --g3: #b03a8a; --sky: #2c4a7a; --grass: #1f3b2a; --gold-dark: #b48a12; --bubble-ink: #222;
  --pink: #e14c8f; --orange: #e18a1c; --red: #e14c4c; --ssr-bg: #4a1f4f; --slime: #6ee7a8; --slime-ink: #102a1d; --gold-glow: rgba(255, 207, 63, .35); --shade: rgba(0, 0, 0, .3);
  --rainbow: linear-gradient(135deg, #ff5f6d, #ffc371, #f9f871, #6ee7a8, #59c3ff, #b28dff);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #b18cff; --accent-ink: #160d2e; --accent-soft: #2e2350; }
}
:root[data-theme="dark"] { --accent: #b18cff; --accent-ink: #160d2e; --accent-soft: #2e2350; }

.sg-hero { text-align: center; }
.sg-art { width: 100%; max-width: 320px; height: auto; }
.sg-a-body { fill: var(--ph-frame); }
.sg-a-screen { fill: var(--ph-bg); }
.sg-a-star { fill: var(--accent); opacity: .5; }
.sg-a-starin { fill: var(--gold); }
.sg-a-logo { animation: sg-pulse 1.6s ease-in-out infinite; transform-origin: 160px 78px; }
.sg-a-track { fill: var(--ph-line); }
.sg-a-bar { fill: var(--gold); }
.sg-a-txt { fill: var(--ph-ink); font-weight: 900; font-size: 15px; animation: sg-blink 1.2s steps(2) infinite; }
.sg-a-gemf { fill: var(--r); }
.sg-a-geml { fill: none; stroke: var(--ph-frame); stroke-width: 2; }
.sg-a-gem { animation: sg-float 2.6s ease-in-out infinite; }
.sg-a-sm { fill: var(--text-sub); font-size: 12px; font-weight: 700; }
.sg-a-maint { fill: var(--maint); }
.sg-a-mtxt { fill: var(--ph-frame); font-size: 13px; font-weight: 900; }
.sg-a-wrench { animation: sg-float 3s .4s ease-in-out infinite; }
@keyframes sg-pulse { 50% { transform: scale(1.08); } }
@keyframes sg-blink { 50% { opacity: .2; } }
@keyframes sg-float { 50% { transform: translateY(-6px); } }

/* プレイ画面 */
.sg-wrap { display: flex; flex-direction: column; gap: 8px; }
.sg-hud { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.sg-hud b { color: var(--text); font-size: 16px; }
.sg-steps { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; }
.sg-steps span { padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--text-sub); }
.sg-steps .done { background: var(--accent-soft); color: var(--accent); }
.sg-steps .on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.sg-phone { position: relative; background: var(--ph-frame); border-radius: 30px; padding: 26px 10px 14px; box-shadow: var(--shadow); }
.sg-notch { position: absolute; top: 9px; left: 50%; width: 80px; height: 8px; border-radius: 8px; transform: translateX(-50%); background: var(--ph-line); }
.sg-screen { position: relative; min-height: 440px; border-radius: 16px; overflow: hidden; background: var(--ph-bg); color: var(--ph-ink); display: flex; flex-direction: column; justify-content: center; padding: 16px; cursor: default; }
.sg-black { background: var(--black); }
.sg-titlebg { background: radial-gradient(circle at 50% 30%, var(--ph-line), var(--ph-bg) 70%); cursor: pointer; }
.sg-home { background: linear-gradient(180deg, var(--ph-line), var(--ph-bg)); justify-content: flex-end; }
.sg-gachabg { background: radial-gradient(circle at 50% 40%, var(--g1), var(--ph-bg) 75%); }
.sg-rainbowbg { background: var(--rainbow); }
.sg-maintbg { background: repeating-linear-gradient(45deg, var(--ph-bg) 0 18px, var(--ph-panel) 18px 36px); }
.sg-battlebg { background: linear-gradient(180deg, var(--sky), var(--grass)); }
.sg-dim { background: var(--ph-bg); }

.sg-logo { text-align: center; display: grid; gap: 6px; }
.sg-logo small { color: var(--ph-sub); letter-spacing: .2em; font-size: 12px; }
.sg-logo b { font-size: 22px; letter-spacing: .06em; color: var(--white); }
.sg-skip { position: absolute; right: 10px; top: 10px; }
.sg-skip-no { opacity: .5; }

.sg-title { text-align: center; display: grid; gap: 10px; justify-items: center; }
.sg-title-star { font-size: 64px; color: var(--gold); line-height: 1; animation: sg-pulse 1.8s infinite; }
.sg-title-name { font-size: 26px; line-height: 1.3; text-shadow: 0 2px 0 var(--accent); }
.sg-title small { color: var(--ph-sub); }
.sg-tap { margin-top: 40px; font-weight: 900; letter-spacing: .2em; animation: sg-blink 1.1s steps(2) infinite; }

.sg-panel { display: grid; gap: 10px; background: var(--ph-panel); border: 1px solid var(--ph-line); border-radius: 14px; padding: 16px 14px; }
.sg-center { text-align: center; justify-items: center; }
.sg-dialog { position: relative; display: grid; gap: 12px; background: var(--ph-panel); border: 2px solid var(--gold); border-radius: 14px; padding: 18px 14px; text-align: center; }
.sg-dlg-t { font-size: 17px; }
.sg-dlg-b { color: var(--ph-sub); font-size: 15px; }
.sg-dlg-btns { display: grid; gap: 8px; }
.sg-btn { min-height: 46px; border-radius: 12px; border: 0; padding: 8px 14px; font-weight: 800; cursor: pointer; width: 100%; touch-action: manipulation; }
.sg-btn-main { background: var(--gold); color: var(--gold-ink); box-shadow: 0 3px 0 var(--gold-dark); }
.sg-btn-sub { background: var(--ph-line); color: var(--ph-ink); }
.sg-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.sg-skip.sg-btn { width: auto; min-height: 34px; font-size: 12px; background: var(--ph-line); color: var(--ph-ink); }
.sg-link { background: none; border: 0; color: var(--gold); text-decoration: underline; cursor: pointer; padding: 0; font-size: 13px; }
.sg-small { font-size: 13px; color: var(--ph-sub); margin: 0; }
.sg-tiny { font-size: 11px; color: var(--ph-sub); margin: 0; }
.sg-hint { font-size: 12px; color: var(--gold); margin: 0; }
.sg-err { color: var(--err); font-size: 13px; min-height: 1.4em; margin: 0; font-weight: 700; }
.sg-terms { height: 180px; overflow-y: auto; background: var(--ph-bg); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--ph-sub); overscroll-behavior: contain; }
.sg-terms p { margin: 0 0 10px; }
.sg-dl { width: 100%; height: 14px; background: var(--ph-bg); border-radius: 99px; overflow: hidden; border: 1px solid var(--ph-line); }
.sg-dl > i { display: block; height: 100%; width: 0; background: var(--gold); }
.sg-tip { font-size: 13px; color: var(--ph-sub); min-height: 2.6em; margin: 0; }
.sg-input { width: 100%; min-height: 46px; border-radius: 10px; border: 2px solid var(--ph-line); background: var(--ph-bg); color: var(--ph-ink); padding: 8px 12px; font: inherit; font-size: 16px; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-chip { border: 1px solid var(--ph-line); background: var(--ph-bg); color: var(--ph-ink); border-radius: 99px; padding: 4px 10px; font-size: 13px; cursor: pointer; }

.sg-say { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 8px; flex-wrap: wrap; }
.sg-say-g { width: 64px; flex: none; animation: sg-float 2s ease-in-out infinite; }
.sg-guide { width: 64px; height: 64px; }
.sg-gd { fill: var(--gold); }
.sg-gd-ear { fill: var(--gold); stroke: var(--gold); stroke-width: 4; stroke-linejoin: round; }
.sg-gd-eye { fill: var(--ph-frame); }
.sg-gd-m { fill: none; stroke: var(--ph-frame); stroke-width: 3; stroke-linecap: round; }
.sg-bubble { flex: 1; min-width: 0; background: var(--white); color: var(--bubble-ink); border-radius: 14px 14px 14px 2px; padding: 10px 12px; font-size: 14px; font-weight: 700; }
.sg-navbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sg-nav { min-height: 52px; border-radius: 10px; border: 1px solid var(--ph-line); background: var(--ph-panel); color: var(--ph-sub); font-weight: 700; font-size: 13px; cursor: pointer; padding: 4px; }
.sg-nav-on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); animation: sg-pulse 1s infinite; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--gold-glow); }

.sg-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.sg-day { background: var(--ph-bg); border-radius: 8px; padding: 6px 2px; display: grid; font-size: 12px; color: var(--ph-sub); }
.sg-day b { color: var(--r); font-size: 16px; }
.sg-day.on { background: var(--gold); color: var(--gold-ink); }
.sg-day.on b { color: var(--gold-ink); }
.sg-popup { text-align: left; }
.sg-x { position: absolute; right: 8px; top: 6px; width: 36px; height: 36px; border: 0; background: var(--ph-line); color: var(--ph-ink); border-radius: 50%; cursor: pointer; font-size: 18px; }
.sg-x-tiny { width: 18px; height: 18px; font-size: 11px; line-height: 18px; padding: 0; right: 6px; top: 6px; }
.sg-banner { display: grid; gap: 4px; background: linear-gradient(135deg, var(--accent), var(--pink)); color: var(--white); border-radius: 10px; padding: 14px 12px; }
.sg-banner-pack { background: linear-gradient(135deg, var(--orange), var(--red)); }
.sg-wrench { font-size: 40px; }
.sg-present { position: relative; width: 70px; height: 60px; background: var(--ssr); border-radius: 6px; animation: sg-pulse 1.2s infinite; }
.sg-present i { position: absolute; left: 30px; top: 0; width: 10px; height: 60px; background: var(--gold); }
.sg-present b { position: absolute; left: 0; top: 24px; width: 70px; height: 10px; background: var(--gold); }
.sg-spin { width: 40px; height: 40px; border: 4px solid var(--ph-line); border-top-color: var(--gold); border-radius: 50%; animation: sg-rot 1s linear infinite; }
@keyframes sg-rot { to { transform: rotate(360deg); } }

.sg-gbanner { display: grid; gap: 2px; text-align: center; background: linear-gradient(135deg, var(--g2), var(--g3)); border-radius: 12px; padding: 16px 10px; color: var(--white); }
.sg-gbanner b { font-size: 21px; }
.sg-gbanner small, .sg-gbanner span { font-size: 12px; opacity: .9; }
.sg-gbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.sg-orb { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--white), var(--r) 60%); animation: sg-pulse .7s infinite; }
.sg-orb-gold { background: radial-gradient(circle at 35% 35%, var(--white), var(--sr) 60%); }
.sg-orb-rainbow { background: var(--rainbow); box-shadow: 0 0 40px var(--white); }
.sg-results { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 100%; }
.sg-results-1 { grid-template-columns: 1fr; justify-items: center; }
.sg-char { display: grid; justify-items: center; gap: 2px; background: var(--ph-bg); border: 2px solid var(--r); border-radius: 8px; padding: 4px 2px; min-width: 0; }
.sg-r2 { border-color: var(--sr); }
.sg-r3 { border-color: var(--ssr); background: linear-gradient(160deg, var(--ph-bg), var(--ssr-bg)); }
.sg-char-r { font-size: 10px; font-weight: 900; color: var(--r); }
.sg-r2 .sg-char-r { color: var(--sr); }
.sg-r3 .sg-char-r { color: var(--ssr); }
.sg-char-face { width: 34px; height: 34px; border-radius: 50%; background: var(--ph-line); display: grid; place-items: center; font-weight: 900; }
.sg-char-n { font-size: 9px; line-height: 1.3; text-align: center; color: var(--ph-sub); word-break: break-all; }
.sg-char-big { padding: 10px 14px; }
.sg-char-big .sg-char-face { width: 64px; height: 64px; font-size: 28px; }
.sg-char-big .sg-char-n { font-size: 13px; color: var(--ph-ink); }
.sg-char-big .sg-char-r { font-size: 14px; }

.sg-hp { width: 70%; height: 10px; border-radius: 99px; background: var(--ph-bg); overflow: hidden; }
.sg-hp > i { display: block; height: 100%; background: var(--err); transition: width .3s; }
.sg-slime { width: 120px; height: 100px; }
.sg-sl { fill: var(--slime); }
.sg-sl-eye { fill: var(--slime-ink); }
.sg-sl-mouth { fill: none; stroke: var(--slime-ink); stroke-width: 3; stroke-linecap: round; }
.sg-enemy { animation: sg-float 1.4s ease-in-out infinite; }
.sg-hit { animation: sg-hit .3s; }
@keyframes sg-hit { 30% { transform: translateX(-8px) scale(.94); filter: brightness(2); } 60% { transform: translateX(6px); } }
.sg-win { font-size: 54px; color: var(--gold); letter-spacing: .1em; }

.sg-arflash { height: 30px; margin: -8px 0 6px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.sg-arpop { background: var(--gold); color: var(--gold-ink); border-radius: 99px; padding: 2px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; animation: mn-pop .3s; }
.sg-arpop b { margin-right: 4px; }

/* 結果 */
.sg-titlename { font-size: 22px; font-weight: 900; margin: 6px 0 2px; }
.sg-titles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sg-zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-top: 8px; }
.sg-z { background: var(--surface-2); border-radius: 8px; padding: 6px 8px; font-size: 12px; color: var(--text-sub); display: grid; gap: 2px; }
.sg-z.on { background: var(--accent-soft); color: var(--text); }
.sg-z.on b { color: var(--accent); }
.sg-z small { font-size: 11px; line-height: 1.45; color: var(--text-sub); }
.sg-rates table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sg-rates th, .sg-rates td { border-bottom: 1px solid var(--line); padding: 6px; text-align: left; }

.mn-daily-num { white-space: nowrap; flex: none; }