:root {
  --bg: #0b0d17;
  --bg2: #12152a;
  --text: #f4f5fa;
  --sub: rgba(226, 229, 245, .62);
  --card: #171a31;
  --card2: #1e2240;
  --line: rgba(255, 255, 255, .1);
  --btn: #232849;
  --btn-press: #2d3360;
  --red: #ff4d5e;
  --yellow: #ffd23f;
  --green: #36d399;
  --blue: #5aa9ff;
  --accent: #8b7bff;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", Meiryo, sans-serif;
}
/* The game keeps a dark "news terminal" look in both color schemes. */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #0b0d17; } }
:root[data-theme="dark"] { --bg: #0b0d17; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); }
body { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; line-height: 1.5; }
button, a { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }
[hidden] { display: none !important; }

#app { position: relative; max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(120% 50% at 50% -10%, rgba(139, 123, 255, .22), transparent 60%), var(--bg); overflow-x: hidden; }
.view { padding: max(14px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 14px;
  background: var(--btn); font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .08s, background .15s; }
.btn:active { transform: scale(.97); background: var(--btn-press); }
.btn.primary { background: linear-gradient(135deg, #8b7bff, #5aa9ff); color: #0b0d17; }
.btn.big { min-height: 58px; font-size: 18px; width: 100%; border-radius: 18px; }
.btn.danger { background: var(--red); color: #fff; width: 100%; }
.btn.x { background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.btn.x svg { width: 18px; height: 18px; fill: currentColor; }
.linkbtn { background: none; border: 0; color: var(--sub); min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn.sub { font-size: 13px; opacity: .8; }
.chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 800; letter-spacing: .04em; flex: none; }
.chip.red { background: var(--red); color: #fff; }

/* start */
.start { justify-content: space-between; }
.start-tick { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; overflow: hidden; }
.tick-run { overflow: hidden; white-space: nowrap; flex: 1; font-size: 13px; color: var(--sub); }
.tick-run span { display: inline-block; padding-left: 100%; animation: tick 16s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }
.start-body { text-align: center; margin: 24px 0; }
.robot { position: relative; width: 92px; height: 78px; margin: 0 auto 18px; border-radius: 24px; background: linear-gradient(160deg, #2a2f5a, #1a1d38); border: 2px solid rgba(139, 123, 255, .6); box-shadow: 0 0 40px rgba(139, 123, 255, .35); }
.robot::before { content: ""; position: absolute; left: 50%; top: -16px; width: 4px; height: 14px; margin-left: -2px; background: rgba(139, 123, 255, .8); border-radius: 2px; }
.robot::after { content: ""; position: absolute; left: 50%; top: -22px; width: 10px; height: 10px; margin-left: -5px; background: var(--red); border-radius: 50%; animation: blink 1.4s steps(2, start) infinite; }
.robot .eye { position: absolute; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: #5aa9ff; box-shadow: 0 0 10px #5aa9ff; animation: look 4s ease-in-out infinite; }
.robot .eye.l { left: 24px; } .robot .eye.r { right: 24px; }
.robot .mouth { position: absolute; left: 30px; right: 30px; bottom: 16px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .5); }
@keyframes look { 0%, 40%, 100% { transform: translateX(0); } 50%, 80% { transform: translateX(5px); } }
@keyframes blink { to { opacity: .2; } }
.game-title { margin: 0; font-size: 34px; line-height: 1.22; font-weight: 900; letter-spacing: -.01em; }
.game-title span { display: block; }
.game-title span:nth-child(2) { color: var(--red); font-size: 44px; }
.game-title span:nth-child(3) { font-size: 26px; color: var(--sub); }
.lead { color: var(--sub); font-size: 15px; margin: 16px auto 0; max-width: 340px; text-align: left; }
.start-btns { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* draw */
.draw { justify-content: center; text-align: center; gap: 18px; }
.draw-lead { color: var(--sub); margin: 0; font-size: 16px; }
.slot { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px 16px; }
.slot-name { font-size: 34px; font-weight: 900; min-height: 52px; }
.slot-cat { color: var(--sub); font-size: 14px; min-height: 21px; }
.slot.spin .slot-name { filter: blur(.6px); opacity: .8; }
.slot.done { animation: pop .35s ease-out; border-color: rgba(139, 123, 255, .6); }
@keyframes pop { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.draw-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.draw-info .box { background: var(--card); border-radius: 14px; padding: 12px 14px; }
.draw-info .box span { display: block; font-size: 12px; color: var(--sub); }
.draw-info .box b { font-size: 22px; }

/* game */
.game { gap: 8px; padding-top: max(10px, env(safe-area-inset-top)); }
.top { display: flex; align-items: center; gap: 14px; }
.age { display: flex; align-items: baseline; gap: 2px; min-width: 76px; }
.age b { font-size: 38px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.age span { color: var(--sub); font-weight: 700; }
.lifewrap { flex: 1; }
.life-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.life-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #8b7bff, #5aa9ff); transition: width .6s cubic-bezier(.3, .8, .3, 1); }
.life-lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); margin-top: 4px; font-variant-numeric: tabular-nums; }

.ticker { background: #0e1022; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; min-height: 92px; display: flex; flex-direction: column; gap: 8px; }
.news { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.news.in { opacity: 1; transform: none; }
.news .chip { margin-top: 2px; }
.chip.tech { background: #8b7bff; color: #0b0d17; }
.chip.eco { background: var(--yellow); color: #0b0d17; }
.chip.me { background: var(--red); color: #fff; }
.chip.filler { background: rgba(255, 255, 255, .16); color: #fff; }
.news .d { font-weight: 800; font-size: 12px; margin-left: 4px; white-space: nowrap; }
.d.up { color: var(--red); } .d.down { color: var(--green); }

.jobcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; transition: border-color .3s, box-shadow .3s; }
.jobcard.hot { border-color: rgba(255, 77, 94, .7); box-shadow: 0 0 0 3px rgba(255, 77, 94, .15); }
.jobcard.none { opacity: .85; }
.jc-head { display: flex; align-items: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.jc-name { font-size: 19px; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-sal { font-size: 13px; color: var(--sub); white-space: nowrap; }
.risk { margin-top: 8px; }
.risk-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--sub); }
.risk-num { color: var(--text); font-size: 13px; }
.risk-num b { font-size: 22px; font-variant-numeric: tabular-nums; }
.risk-num em { font-style: normal; font-weight: 800; margin-left: 6px; font-size: 13px; }
.risk-bar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 4px; }
.risk-bar i { display: block; height: 100%; width: 0; border-radius: 5px; transition: width .7s cubic-bezier(.3, .8, .3, 1), background .4s; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--card); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.stat span { font-size: 11px; color: var(--sub); }
.stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.stat b.neg { color: var(--red); }
.mbar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 7px; }
.mbar i { display: block; height: 100%; border-radius: 5px; transition: width .6s, background .4s; }
.skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sk { background: var(--card); border-radius: 10px; padding: 6px 8px; }
.sk span { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); }
.sk span b { color: var(--text); font-variant-numeric: tabular-nums; }
.sk .pips { display: flex; gap: 2px; margin-top: 4px; }
.sk .pips i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.sk .pips i.on { background: var(--blue); }
.sk.up { animation: skup .8s ease-out; }
@keyframes skup { 0% { box-shadow: 0 0 0 2px var(--green); } 100% { box-shadow: 0 0 0 0 transparent; } }

.actions-wrap { margin-top: auto; }
.actions-head { font-size: 13px; color: var(--sub); margin: 4px 2px 8px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.act { min-height: 62px; border: 1px solid var(--line); border-radius: 14px; background: var(--btn); text-align: left; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; transition: transform .08s, background .15s, opacity .3s; }
.act:active { transform: scale(.97); background: var(--btn-press); }
.act b { font-size: 15.5px; }
.act small { font-size: 11.5px; color: var(--sub); line-height: 1.35; }
.act.special { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(255, 210, 63, .2), rgba(255, 77, 94, .14)); border-color: rgba(255, 210, 63, .5); }
.act.special b::before { content: "チャンス"; font-size: 10px; font-weight: 800; color: #0b0d17; background: var(--yellow); border-radius: 4px; padding: 1px 5px; margin-right: 6px; vertical-align: 2px; }
.act[disabled] { opacity: .4; }
.actions.wait .act { opacity: .35; pointer-events: none; }

.career { font-size: 12.5px; color: var(--text); background: rgba(255, 255, 255, .04); border-radius: 10px; padding: 8px 10px; line-height: 1.5; }
.career span { color: var(--sub); margin-right: 8px; font-size: 11px; }
.career em { font-style: normal; color: var(--red); font-weight: 700; margin-left: 6px; font-size: 11px; }

/* sheets */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(4, 5, 12, .62); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 480px; max-height: 88vh; overflow: auto; background: var(--bg2); border-radius: 22px 22px 0 0; padding: 14px 16px max(18px, env(safe-area-inset-bottom)); animation: up .25s cubic-bezier(.3, .8, .3, 1); }
@keyframes up { from { transform: translateY(40px); opacity: .4; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 17px; }
.sheet-x { background: var(--btn); border: 0; border-radius: 12px; min-height: 44px; padding: 0 16px; font-weight: 700; font-size: 14px; }
.offers, .learn { display: flex; flex-direction: column; gap: 10px; }
.offer { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; min-height: 64px; }
.offer:active { background: var(--card2); }
.offer .o-top { display: flex; align-items: center; gap: 8px; }
.offer .o-name { font-size: 17px; font-weight: 800; flex: 1; }
.offer .o-sal { font-size: 13px; color: var(--sub); }
.offer .o-risk { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--sub); }
.offer .o-risk .risk-bar { flex: 1; margin: 0; height: 8px; }
.offer .o-risk b { color: var(--text); font-size: 14px; min-width: 38px; text-align: right; }
.offer .o-p { margin-top: 6px; font-size: 12px; font-weight: 700; }
.offer.locked { opacity: .5; border-style: dashed; }
.offer.locked .o-p { color: var(--sub); }
.lskill { width: 100%; min-height: 60px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.lskill b { font-size: 17px; }
.lskill span { color: var(--sub); font-size: 13px; }

/* modal */
.modal-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(4, 5, 12, .74); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .2s; }
.modal { width: 100%; max-width: 360px; background: var(--bg2); border: 1px solid rgba(255, 77, 94, .5); border-radius: 22px; padding: 20px; text-align: center; animation: shake .45s; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.m-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--red); border: 1px solid var(--red); border-radius: 6px; padding: 2px 8px; }
.m-title { font-size: 24px; font-weight: 900; margin: 12px 0 8px; }
.m-body { color: var(--sub); font-size: 15px; margin-bottom: 18px; }

.toast { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 60; background: rgba(30, 34, 64, .96); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 700; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; animation: tin .25s ease-out; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.toast.good { border-color: rgba(54, 211, 153, .6); }
.toast.bad { border-color: rgba(255, 77, 94, .6); }
@keyframes tin { from { opacity: 0; transform: translate(-50%, -8px); } }

/* result */
.result { gap: 12px; }
#card { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.found { text-align: center; color: var(--sub); font-size: 14px; }
.found .new { color: #0b0d17; background: var(--yellow); border-radius: 5px; padding: 1px 6px; font-weight: 800; font-size: 12px; margin-left: 4px; }
.result-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result-btns .btn.primary { grid-column: 1 / -1; }
.next-link { margin: 6px 0 0; text-align: center; font-size: 14px; color: var(--sub); }
.next-link a { color: var(--blue); display: inline-block; min-height: 44px; line-height: 44px; }
.tabs { display: flex; gap: 6px; background: rgba(255, 255, 255, .06); border-radius: 12px; padding: 4px; }
.tab { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: none; color: var(--sub); font-weight: 700; font-size: 14px; }
.tab.on { background: var(--btn-press); color: var(--text); }
.endings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
.endings li { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.endings li .no { width: 24px; color: var(--sub); font-variant-numeric: tabular-nums; font-size: 12px; }
.endings li.lock { color: var(--sub); }
.endings li.cur { box-shadow: inset 0 0 0 2px var(--accent); }
.endings li .rare { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--yellow); }
.sheet .tabs { flex: 1; }

.about p { color: var(--sub); font-size: 14px; margin: 0 0 10px; }
.about h3 { font-size: 14px; margin: 16px 0 8px; }
.about ol { padding-left: 18px; margin: 0; font-size: 12.5px; color: var(--sub); }
.about li { margin-bottom: 8px; word-break: break-word; }
.about a { color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- auto-progress life (v2) ---- */
.game { height: 100vh; height: 100dvh; min-height: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.age small { margin-left: 6px; font-size: 13px; color: var(--sub); font-weight: 700; }
.speed { display: flex; gap: 4px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.sp { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: none; color: var(--sub); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.sp svg { width: 16px; height: 16px; fill: currentColor; }
.sp.on { background: var(--btn-press); color: var(--text); }
.jobcard.bump { animation: bump .6s ease-out; }
@keyframes bump { 0% { transform: scale(1.02); box-shadow: 0 0 0 3px rgba(255, 77, 94, .35); } 100% { transform: none; } }
.feed-wrap { flex: 1; min-height: 120px; position: relative; overflow: hidden; background: #0e1022; border: 1px solid var(--line); border-radius: 14px;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.feed { list-style: none; margin: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.fi { display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: rgba(244, 245, 250, .86); animation: fin .35s ease-out; }
@keyframes fin { from { opacity: 0; transform: translateY(-6px); } }
.fi .fa { flex: none; width: 22px; text-align: right; font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; margin-top: 3px; }
.fi .chip { margin-top: 1px; }
.fi.hl { color: #fff; font-weight: 600; }
.fi.res { color: #fff; }
.fi.big { font-size: 16px; font-weight: 800; color: #fff; }
.fi .d { font-size: 11.5px; margin-left: 6px; white-space: nowrap; }
.chip.c-news { background: #8b7bff; color: #0b0d17; }
.chip.c-life { background: rgba(255, 255, 255, .16); color: #fff; }
.chip.c-eco { background: var(--yellow); color: #0b0d17; }
.chip.c-me { background: var(--red); color: #fff; }
.bottom { display: flex; align-items: center; gap: 8px; }
.bottom .career { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.probtn { flex: none; min-height: 44px; padding: 0 14px; border-radius: 12px; background: none; border: 1px solid rgba(255, 255, 255, .22); color: var(--sub); font-weight: 700; font-size: 13.5px; }
.probtn:active { background: var(--btn); }
.probtn[disabled] { opacity: .55; }
.pro-note { margin: -4px 0 12px; font-size: 13px; color: var(--sub); }
.lskill[disabled] { opacity: .4; }

.evcard { width: 100%; max-width: 380px; max-height: 92vh; overflow: auto; background: var(--bg2); border: 1px solid rgba(139, 123, 255, .45); border-radius: 22px; padding: 18px 16px 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
#evModal.in .evcard { animation: cardIn .32s cubic-bezier(.3, .8, .3, 1); }
@keyframes cardIn { from { transform: translateY(24px) scale(.97); opacity: 0; } }
.ev-top { display: flex; align-items: center; justify-content: space-between; }
.ev-age { font-size: 13px; color: var(--sub); font-weight: 700; }
.ev-title { font-size: 21px; font-weight: 900; margin: 10px 0 6px; line-height: 1.35; }
.ev-body { color: var(--sub); font-size: 14.5px; margin-bottom: 14px; }
.ev-choices { display: flex; flex-direction: column; gap: 8px; }
.choice { width: 100%; min-height: 52px; text-align: left; background: var(--btn); border: 1px solid var(--line); border-radius: 14px; padding: 9px 14px; display: flex; flex-direction: column; justify-content: center; }
.choice:active { background: var(--btn-press); }
.choice b { font-size: 15.5px; }
.choice small { font-size: 12px; color: var(--sub); }
.choice[disabled] { opacity: .4; }
.choice.ghost { background: none; min-height: 44px; }
.ev-choices .offer { min-height: 60px; }

.fi .chip { flex: 0 0 auto; }
.fi .ft { flex: 1 1 auto; min-width: 0; }
.chip.c-you { background: var(--green); color: #0b0d17; }

/* ---- v3: life bars, satisfaction, proactive bar, speed, resume toggle ---- */
.sp { font-size: 13px; min-width: 0; }
.rule { margin: 14px auto 0; max-width: 340px; font-size: 15px; font-weight: 800; color: #fff; background: rgba(255, 77, 94, .14); border: 1px solid rgba(255, 77, 94, .45); border-radius: 12px; padding: 10px 12px; text-align: left; }
.shared { text-align: center; font-size: 15px; font-weight: 800; color: var(--yellow); margin: 0 0 8px; }
.lifebars { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.lb-head { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--sub); }
.lb-head b { font-size: 11px; color: #0b0d17; background: var(--red); border-radius: 4px; padding: 1px 6px; letter-spacing: .06em; }
.hp { display: grid; grid-template-columns: 16px 56px 1fr 74px; align-items: center; gap: 8px; }
.hp-name { font-size: 12.5px; font-weight: 700; }
.hp-bar { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.hp-bar i { display: block; height: 100%; border-radius: 6px; transition: width .5s, background .4s; }
.hp b { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.hp b.neg { color: var(--red); }
.hp.low .hp-bar { animation: hpPulse 1s ease-in-out infinite; }
.hp.low .hp-name, .hp.low b { color: var(--red); }
@keyframes hpPulse { 50% { box-shadow: 0 0 0 3px rgba(255, 77, 94, .45); } }
.hp.sat { padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, .12); }
.hp.sat .hp-bar i { background: linear-gradient(90deg, #8b7bff, #5aa9ff); }
.hp-ic { width: 14px; height: 14px; display: inline-block; }
.hp-ic.coin { border-radius: 50%; background: #ffc94d; box-shadow: inset 0 0 0 3px #e0a92c; }
.hp-ic.heart { background: #ff7aa8; clip-path: polygon(50% 100%, 0 38%, 12% 8%, 50% 22%, 88% 8%, 100% 38%); }
.hp-ic.star { background: #8b7bff; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.sk-head { font-size: 11px; color: var(--sub); margin: 2px 2px -4px; }
.probar { width: 100%; min-height: 54px; border-radius: 14px; border: 1px solid rgba(139, 123, 255, .6); background: linear-gradient(135deg, rgba(139, 123, 255, .28), rgba(90, 169, 255, .2)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.probar span { font-size: 16px; font-weight: 900; }
.probar small { font-size: 11.5px; color: var(--sub); }
.probar[disabled] { opacity: .6; border-color: var(--line); background: var(--btn); }
.probar.pulse { animation: proPulse 1.6s ease-in-out infinite; }
@keyframes proPulse { 50% { box-shadow: 0 0 0 4px rgba(139, 123, 255, .35); } }
.game .career { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pact { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; min-height: 56px; display: flex; flex-direction: column; gap: 5px; }
.pact b { font-size: 15.5px; }
.pact .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pact .tags i { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--text); }
.pact .tags i.pos { background: rgba(54, 211, 153, .18); color: #7ef0c1; }
.pact .tags i.neg { background: rgba(255, 77, 94, .16); color: #ff9aa5; }
.pact small { font-size: 11.5px; color: var(--sub); }
.pact small.why { color: var(--yellow); }
.pact[disabled] { opacity: .45; }
#proList { gap: 8px; }
.ev-tip { margin: -4px 0 12px; font-size: 12.5px; color: #c4bbff; background: rgba(139, 123, 255, .12); border-radius: 10px; padding: 8px 10px; }
.cardtoggle { display: flex; gap: 6px; justify-content: center; }
.ct { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--sub); font-weight: 700; font-size: 13px; }
.ct.on { background: var(--btn-press); color: var(--text); }
.stats-real { background: var(--card); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; }
.stats-real h3 { margin: 0 0 8px; font-size: 14px; }
.stats-real .row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.stats-real .row:first-of-type { border-top: 0; }
.stats-real .row b { white-space: nowrap; }
.stats-real small { display: block; color: var(--sub); font-size: 11px; margin-top: 6px; }
.fi .src { color: var(--sub); font-size: 10.5px; margin-left: 6px; white-space: nowrap; }
.jc-real { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.jc-real .src, .fi .src { color: rgba(226, 229, 245, .45); font-size: 10px; margin-left: 6px; }
.offer .o-real { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.chip.c-stat { background: #2fb5c6; color: #0b0d17; }
.fi.st { color: #bfeff5; }

/* ---- v4: 自分 block, compact job line, tall log, gauge button ---- */
.game { gap: 6px; }
.me { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px 8px; display: flex; flex-direction: column; gap: 5px; }
.me-top { display: flex; align-items: center; gap: 12px; }
.me .age b { font-size: 30px; }
.me .age small { font-size: 12px; }
.bars { display: flex; flex-direction: column; gap: 4px; }
.bars .hp { display: grid; grid-template-columns: 56px 1fr 72px; align-items: center; gap: 8px; }
.bars .hp-name { font-size: 12px; font-weight: 800; }
.bars .hp-bar { height: 10px; }
.bars .hp b { font-size: 13px; }
.exp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.exp-l { font-size: 11px; color: var(--sub); margin-right: 2px; }
.exp i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(139, 123, 255, .18); color: #cfc8ff; }
.exp i.cert { background: rgba(54, 211, 153, .16); color: #8ff0c6; }
.exp i.none { background: none; color: var(--sub); padding: 0; }
.jobline { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 7px 12px; }
.jobline.none { opacity: .85; }
.jl-top { display: flex; align-items: center; gap: 8px; }
.jl-top .jc-name { font-size: 16px; }
.jl-imp { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--sub); }
.imp-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.imp-bar i { display: block; height: 100%; background: #9aa3c7; border-radius: 3px; transition: width .6s; }
.jl-imp b { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.jl-imp em { font-style: normal; font-size: 11px; color: #c4bbff; min-width: 0; }
.jobline .jc-real { font-size: 10.5px; margin-top: 2px; }
.feed-wrap { flex: 1; min-height: 200px; }
.fi .note { display: block; font-size: 11px; color: rgba(191, 239, 245, .8); margin-top: 2px; line-height: 1.4; }
.dock2 { display: flex; gap: 8px; align-items: stretch; }
.dock2 .speed { flex: none; padding: 2px; border-radius: 10px; gap: 1px; }
.dock2 .sp { flex: none; width: 32px; min-height: 44px; font-size: 11px; padding: 0; }
.dock2 .sp svg { width: 12px; height: 12px; }
.gaugebtn { position: relative; flex: 1; min-height: 48px; border-radius: 12px; border: 1px solid rgba(139, 123, 255, .35); background: rgba(255, 255, 255, .04); overflow: hidden; font-weight: 800; font-size: 13.5px; color: var(--sub); }
.gaugebtn i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(139, 123, 255, .22); transition: width .5s; }
.gaugebtn span { position: relative; }
.gaugebtn.ready { color: #fff; border-color: rgba(139, 123, 255, .9); background: linear-gradient(135deg, rgba(139, 123, 255, .45), rgba(90, 169, 255, .35)); animation: proPulse 1.4s ease-in-out infinite; }
.gaugebtn.ready i { display: none; }
.gaugebtn[disabled] { opacity: 1; cursor: default; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); margin: -4px auto 10px; }
.closebig { width: 100%; margin-top: 12px; }
#proSheetBox { transition: transform .15s; }
/* offers: 採用の見込み is the headline number; AI impact is small and secondary */
.offer .o-main { display: flex; gap: 10px; align-items: center; }
.offer .o-left { flex: 1; min-width: 0; }
.offer .o-sal { font-size: 12.5px; color: var(--text); margin-top: 3px; }
.offer .o-real { margin-left: 8px; font-size: 11px; color: var(--sub); }
.offer .o-why { font-size: 11.5px; color: var(--sub); margin-top: 3px; }
.offer .o-p { flex: none; min-width: 78px; text-align: center; border-radius: 12px; padding: 6px 8px; background: rgba(255, 255, 255, .06); }
.offer .o-p small { display: block; font-size: 10px; color: var(--sub); }
.offer .o-p b { font-size: 28px; line-height: 1.1; font-weight: 900; }
.offer .o-p b span { font-size: 14px; }
.offer .o-p.hi b { color: var(--green); } .offer .o-p.mid b { color: var(--yellow); } .offer .o-p.lo b { color: var(--red); }
.offer .o-imp { margin-top: 6px; font-size: 10.5px; color: rgba(226, 229, 245, .5); }
.toast { pointer-events: none; }
/* toasts sit just above the bottom controls, never over the 自分 block */
.toast { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); }
@keyframes tin { from { opacity: 0; transform: translate(-50%, 8px); } }

/* 10/14 iOS Safari: 背の高いカード・シートが画面からはみ出して上に戻れない → 実際に見えている高さ(dvh)に収めて中だけスクロール */
.modal-wrap { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.evcard, .modal { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: auto; }
.sheet { max-height: 88vh; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Scroll safety (iOS): overlays size to their fixed wrapper (= the visible area), never to vh.
   Flex-centering a child taller than its box makes the top unreachable, so the card is aligned from the top and centered with margin:auto. */
.sheet-wrap { overscroll-behavior: contain; }
.sheet-wrap > .sheet { max-height: calc(100% - 12px); }
.modal-wrap { align-items: flex-start; }
.modal-wrap > .evcard, .modal-wrap > .modal { max-height: calc(100% - 24px); margin: auto; }
.sheet-head { position: sticky; top: -14px; z-index: 2; background: var(--bg2); padding: 14px 0 8px; margin-top: -14px; }
.feed-wrap { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.view.start, .view.result { min-height: 100vh; min-height: 100dvh; height: auto; }
/* bigger age row (mzumt: 「ここ大きくてもいい」) */
.me .age b { font-size: 42px; letter-spacing: -.02em; }
.me .age small { font-size: 14px; }
.me .life-bar { height: 12px; border-radius: 6px; }
.me .life-lbl { font-size: 13px; color: var(--text); margin-top: 5px; }
.me .life-lbl span:nth-child(2) { font-weight: 800; color: #fff; }
.me .life-lbl span:first-child, .me .life-lbl span:last-child { color: var(--sub); font-size: 11px; }
/* back / close affordances */
.navbtn { flex: none; min-height: 36px; min-width: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--sub); font-size: 12px; font-weight: 700; }
.ev-top .navbtn { margin-left: 8px; }
.result-top { display: flex; justify-content: flex-start; }
@media (max-height: 640px) { .feed-wrap { min-height: 110px; } .me .age b { font-size: 36px; } .bars .hp { gap: 6px; } }
.ev-top { gap: 6px; } .ev-top .ev-age { margin-left: auto; }
.exp i.trained { background: rgba(255, 210, 63, .14); color: #ffe08a; border: 1px dashed rgba(255, 210, 63, .4); }
.view.result { padding-bottom: calc(max(20px, env(safe-area-inset-bottom)) + 96px); }
/* QA round: toasts wrap (never cut off) and sit at the top while a card or sheet is open */
.toast { white-space: normal; text-align: center; line-height: 1.45; border-radius: 16px; width: max-content; max-width: calc(100vw - 32px); overflow: visible; text-overflow: clip; }
.toast.attop { top: max(10px, env(safe-area-inset-top)); bottom: auto; z-index: 70; }
/* 44px tap targets */
.navbtn { min-height: 44px; }
.about li a { display: inline-block; min-height: 44px; line-height: 44px; }
.dock2 .sp { width: 44px; }
.me .life-lbl span:nth-child(2) { white-space: nowrap; }
.me .life-lbl { gap: 4px; }
.dock2 .sp.cyc { width: 56px; font-size: 13px; }
.cloud { flex: none; font-style: normal; font-size: 11px; font-weight: 800; color: #0b0d17; background: var(--yellow); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.cloud[hidden] { display: none; }
/* a long job + title wraps to a second line instead of hiding the ⚠ flag */
.jl-top { flex-wrap: wrap; row-gap: 2px; }
.jl-top .jc-name { flex: 1 1 auto; white-space: normal; overflow: visible; line-height: 1.25; word-break: break-all; }
.jl-top .jc-sal { margin-left: auto; }
.offer .o-diff { margin-left: 6px; font-size: 11.5px; font-weight: 700; }
.offer .o-diff.up { color: var(--green); } .offer .o-diff.down { color: #ff9aa5; }
.offer .o-real { white-space: nowrap; display: inline-block; }