/* Five-system gameplay layer: fate, techniques, living NPCs, sect ranks and world events. */
.topbar { grid-template-columns: 250px 1fr 370px; }
.top-actions .account-switch { width: auto !important; min-width: 72px; max-width: 116px; }
.top-actions .account-switch span { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Choice hints must carry price, requirement and risk information clearly. */
.story-choice > small { color:#2c625b !important; font-size:9px !important; font-weight:650; letter-spacing:.035em; opacity:1 !important; }
.story-choice:hover > small,.story-choice:focus-visible > small { color:#174f47 !important; }

.settlement-backdrop { position:fixed; z-index:90; inset:0; background:rgba(4,27,25,.54); backdrop-filter:blur(9px) saturate(.88); animation:settlement-fade .22s ease both; }
.settlement-modal { position:fixed; z-index:91; top:50%; left:50%; width:min(520px,calc(100vw - 28px)); max-height:min(760px,calc(100dvh - 28px)); padding:25px; overflow:hidden auto; color:#23463e; background:linear-gradient(145deg,rgba(247,252,248,.98),rgba(221,239,232,.98)); border:1px solid rgba(62,135,118,.42); border-radius:4px 24px 4px 24px; box-shadow:0 34px 100px rgba(3,28,25,.42),inset 0 0 80px rgba(97,190,167,.07); transform:translate(-50%,-50%); animation:settlement-rise .38s cubic-bezier(.18,.78,.18,1) both; }
.settlement-modal::before { content:""; position:absolute; inset:8px; border:1px solid rgba(47,119,103,.12); border-radius:2px 18px 2px 18px; pointer-events:none; }
.settlement-modal__halo { position:absolute; top:-112px; left:50%; width:280px; height:280px; border:1px solid rgba(50,137,117,.13); border-radius:50%; transform:translateX(-50%); pointer-events:none; animation:settlement-orbit 16s linear infinite; }
.settlement-modal__halo::before,.settlement-modal__halo::after { content:""; position:absolute; border:1px dashed rgba(177,136,56,.2); border-radius:50%; }
.settlement-modal__halo::before { inset:32px; }
.settlement-modal__halo::after { inset:70px; }
.settlement-modal__halo i { position:absolute; width:6px; height:6px; background:#d8bb72; border-radius:50%; box-shadow:0 0 14px #d8bb72; }
.settlement-modal__halo i:nth-child(1) { top:48%; left:-3px; }.settlement-modal__halo i:nth-child(2) { right:22px; bottom:42px; }.settlement-modal__halo i:nth-child(3) { top:30px; left:70px; }
.settlement-modal > header { position:relative; z-index:1; padding:3px 6px 17px; text-align:center; border-bottom:1px solid rgba(44,105,91,.16); }
.settlement-modal > header > span { display:inline-block; padding:4px 9px; color:#8c672b; background:rgba(220,188,113,.13); border:1px solid rgba(176,132,49,.22); font-size:8px; letter-spacing:.13em; }
.settlement-modal > header h2 { margin:10px 0 5px; color:#174a40; font:400 31px "STKaiti","KaiTi",serif; letter-spacing:.13em; }
.settlement-modal > header p { margin:0; color:#668079; font-size:10px; line-height:1.6; }
.settlement-results { position:relative; z-index:1; display:grid; max-height:48vh; margin:15px 0; gap:8px; overflow-y:auto; }
.settlement-result { display:grid; min-height:67px; padding:11px 13px; grid-template-columns:42px 1fr auto; align-items:center; gap:11px; background:rgba(255,255,255,.56); border:1px solid rgba(43,99,86,.14); border-radius:2px 11px 2px 11px; animation:settlement-item .4s cubic-bezier(.2,.8,.2,1) both; }
.settlement-result:nth-child(2) { animation-delay:.06s; }.settlement-result:nth-child(3) { animation-delay:.12s; }.settlement-result:nth-child(4) { animation-delay:.18s; }.settlement-result:nth-child(n+5) { animation-delay:.22s; }
.settlement-result > i { display:grid; width:40px; height:40px; place-items:center; color:#28705f; background:radial-gradient(circle,rgba(86,181,158,.14),transparent 70%); border:1px solid rgba(39,115,97,.3); border-radius:50%; font:normal 18px "STKaiti","KaiTi",serif; }
.settlement-result > div { display:grid; gap:2px; }
.settlement-result small { color:#82958f; font-size:7px; letter-spacing:.1em; }
.settlement-result b { color:#214f44; font:400 16px "STKaiti","KaiTi",serif; }
.settlement-result p { margin:1px 0 0; color:#6e827c; font-size:8px; line-height:1.4; }
.settlement-result > em { color:#14715e; font:600 15px Georgia,serif; font-style:normal; white-space:nowrap; }
.settlement-result--cost { background:rgba(250,235,229,.66); border-color:rgba(164,91,77,.2); }
.settlement-result--cost > i { color:#9b4c42; border-color:rgba(160,76,65,.32); }
.settlement-result--cost > em { color:#a34d41; }
.settlement-result--milestone { background:linear-gradient(120deg,rgba(226,242,235,.82),rgba(247,238,210,.72)); border-color:rgba(170,130,48,.3); box-shadow:inset 3px 0 #c39a45; }
.settlement-result--milestone > i { color:#9b6e22; border-color:rgba(166,122,40,.35); }
.settlement-result--milestone > em { color:#8b6424; }
.settlement-time { position:relative; z-index:1; display:grid; margin:17px 0; padding:14px; grid-template-columns:42px 1fr auto; align-items:center; gap:11px; background:rgba(255,255,255,.48); border:1px solid rgba(43,99,86,.14); }
.settlement-time > i { display:grid; width:40px; height:40px; place-items:center; color:#28705f; border:1px solid rgba(39,115,97,.3); border-radius:50%; font:normal 18px "STKaiti","KaiTi",serif; }
.settlement-time > span { display:grid; gap:3px; }.settlement-time b { font:400 16px "STKaiti","KaiTi",serif; }.settlement-time small { color:#748a83; font-size:8px; }.settlement-time > em { color:#9c742a; font:17px Georgia,serif; font-style:normal; }
.settlement-confirm { position:relative; z-index:1; display:flex; width:100%; min-height:48px; padding:0 18px; align-items:center; justify-content:center; gap:11px; color:#f5fbf8; background:linear-gradient(100deg,#176454,#2d8a77); border:1px solid rgba(20,91,76,.5); border-radius:2px 10px 2px 10px; box-shadow:0 12px 28px rgba(25,104,87,.2); cursor:pointer; transition:.25s ease; }
.settlement-confirm:hover { filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 16px 34px rgba(25,104,87,.27); }
.settlement-confirm span { font:400 16px "STKaiti","KaiTi",serif; letter-spacing:.1em; }.settlement-confirm i { width:16px; }
.settlement-modal--cost .settlement-confirm { background:linear-gradient(100deg,#70483f,#9a5b4e); }

.system-mini-grid { display: grid; margin: 0 0 12px; grid-template-columns: 1fr 1fr; gap: 7px; }
.system-mini-grid button { display: grid; min-height: 48px; padding: 7px 8px; grid-template-columns: 26px 1fr; align-items: center; gap: 7px; color: rgba(242,235,216,.76); text-align: left; background: linear-gradient(135deg,rgba(89,151,131,.11),rgba(255,255,255,.025)); border: 1px solid rgba(197,221,208,.12); border-radius: 8px 2px 8px 2px; cursor: pointer; transition: .25s ease; }
.system-mini-grid button:hover { border-color: rgba(124,211,188,.36); box-shadow: inset 0 0 18px rgba(81,192,167,.08); transform: translateY(-2px); }
.system-mini-grid button > i { display: grid; width: 25px; height: 25px; color: #91d5c2; border: 1px solid rgba(145,213,194,.28); border-radius: 50%; place-items: center; font: normal 13px "STKaiti","KaiTi",serif; }
.system-mini-grid button > span { display: grid; gap: 2px; font: 10px "STKaiti","KaiTi",serif; }
.system-mini-grid small { color: rgba(227,240,234,.36); font: 7px system-ui,sans-serif; }

.world-omen { position: absolute; z-index: 13; top: 24px; right: 232px; display: grid; min-width: 188px; min-height: 53px; padding: 8px 12px; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; color: #eaf8f3; text-align: left; background: linear-gradient(125deg,rgba(8,48,42,.84),rgba(11,70,66,.7)); border: 1px solid rgba(136,220,207,.27); border-radius: 14px 2px 14px 2px; box-shadow: 0 12px 36px rgba(4,29,27,.22),inset 0 0 24px rgba(128,227,213,.06); backdrop-filter: blur(12px); cursor: pointer; animation: omen-arrive .55s cubic-bezier(.2,.8,.2,1) both; }
.world-omen::after { content:""; position:absolute; inset:5px; border:1px solid rgba(231,249,244,.055); border-radius:10px 1px 10px 1px; pointer-events:none; }
.world-omen > i { display:grid; width:32px; height:32px; place-items:center; color:#d9f4ec; border:1px solid rgba(184,237,224,.34); border-radius:50%; font:normal 16px "STKaiti","KaiTi",serif; box-shadow:0 0 18px rgba(121,226,203,.13); }
.world-omen > span { display:grid; gap:2px; }
.world-omen small { color:rgba(213,240,233,.55); font-size:7px; letter-spacing:.08em; }
.world-omen b { font:400 14px "STKaiti","KaiTi",serif; letter-spacing:.08em; }
.world-omen > em { color:#aee1d2; font-size:8px; font-style:normal; white-space:nowrap; }
.world-omen--danger { border-color:rgba(232,129,112,.38); background:linear-gradient(125deg,rgba(54,28,28,.84),rgba(100,45,40,.68)); }
.world-omen--wealth { border-color:rgba(225,198,128,.38); }
.world-omen--quiet { opacity:.74; }

.fate-summary,.technique-summary { display:flex; margin-bottom:18px; padding:16px; gap:14px; color:#dff2eb; background:linear-gradient(135deg,#174f43,#0d3730); border:1px solid rgba(182,153,82,.35); border-radius:3px 16px 3px 16px; box-shadow:0 12px 28px rgba(22,52,45,.12); }
.fate-summary > i { display:grid; flex:0 0 52px; height:52px; place-items:center; color:#f0d899; border:1px solid rgba(240,216,153,.48); border-radius:50%; font:normal 25px "STKaiti","KaiTi",serif; box-shadow:inset 0 0 16px rgba(240,216,153,.08); }
.fate-summary small { color:rgba(213,239,231,.48); font:7px Georgia,serif; letter-spacing:.16em; }
.fate-summary h3 { margin:4px 0; color:#fff4d7; font:400 20px "STKaiti","KaiTi",serif; }
.fate-summary p,.technique-summary p { margin:0; color:rgba(226,241,236,.62); font-size:11px; line-height:1.65; }
.fate-mark-list { display:grid; gap:10px; }
.fate-mark { display:grid; padding:14px; grid-template-columns:46px 1fr; gap:13px; background:rgba(255,255,255,.42); border:1px solid rgba(38,86,74,.13); border-radius:2px 12px 2px 12px; }
.fate-mark > i { display:grid; width:44px; height:44px; place-items:center; color:#1f6656; border:1px solid rgba(35,104,89,.3); border-radius:50%; font:normal 21px "STKaiti","KaiTi",serif; }
.fate-mark small { color:#718b84; font-size:8px; }
.fate-mark h3 { margin:2px 0 5px; color:#183f36; font:400 18px "STKaiti","KaiTi",serif; }
.fate-mark h3 em { color:#9c742f; font:11px Georgia,serif; }
.fate-mark p { margin:0; color:#59736c; font-size:11px; line-height:1.55; }
.fate-mark--danger { border-color:rgba(150,70,60,.28); background:rgba(240,215,207,.35); }
.fate-mark--danger > i { color:#994e45; border-color:rgba(153,78,69,.35); }
.fate-pending { margin-bottom:14px; padding:14px; color:#6f351f; background:#f5e6c8; border:1px solid #cba65e; }
.fate-pending span { font-size:8px; letter-spacing:.14em; }
.fate-pending h3 { margin:4px 0; font:400 18px "STKaiti","KaiTi",serif; }
.fate-pending p { margin:0 0 10px; font-size:11px; line-height:1.6; }
.fate-pending button,.sect-ledger button,.world-event-card button { padding:8px 12px; color:white; background:#21695c; border:0; border-radius:2px 7px 2px 7px; cursor:pointer; }
.fate-threads,.fate-history,.world-history { margin-top:18px; padding-top:14px; border-top:1px solid rgba(44,86,75,.16); }
.fate-threads h3,.fate-history h3,.world-history h3 { margin:0 0 10px; color:#234c42; font:400 17px "STKaiti","KaiTi",serif; }
.fate-threads > div { display:flex; padding:8px 0; align-items:center; gap:8px; color:#58736c; font-size:10px; }
.fate-threads > div i { width:7px; height:7px; background:#be9850; border-radius:50%; box-shadow:0 0 8px rgba(190,152,80,.45); }
.fate-threads > div em { margin-left:auto; color:#9a7837; font-style:normal; }
.fate-history p,.world-history p { display:grid; margin:0; padding:8px 0; grid-template-columns:112px 1fr; gap:8px; border-bottom:1px dashed rgba(45,85,75,.12); font-size:10px; }
.fate-history time,.world-history time { color:#81978f; font-size:8px; }

.technique-summary { align-items:center; }
.technique-summary > div { display:grid; flex:0 0 76px; place-items:center; }
.technique-summary span { color:rgba(220,240,233,.58); font-size:8px; }
.technique-summary b { color:#f2d998; font:30px Georgia,serif; font-weight:400; }
.technique-slots { display:grid; margin-bottom:18px; grid-template-columns:1fr 1fr; gap:8px; }
.technique-slots article { display:grid; min-height:78px; padding:11px; gap:3px; background:rgba(250,248,240,.52); border:1px dashed rgba(43,89,77,.2); border-radius:2px 9px 2px 9px; }
.technique-slots article.is-filled { background:linear-gradient(135deg,rgba(214,236,226,.68),rgba(248,244,226,.72)); border-style:solid; border-color:rgba(38,105,89,.28); box-shadow:inset 3px 0 #3b8a78; }
.technique-slots span { color:#7b918a; font-size:8px; }
.technique-slots b { color:#234c42; font:400 15px "STKaiti","KaiTi",serif; }
.technique-slots small { color:#768b84; font-size:8px; line-height:1.4; }
.technique-library { display:grid; gap:10px; }
.technique-card { display:grid; padding:13px; grid-template-columns:40px 1fr auto; align-items:center; gap:11px; background:rgba(255,255,255,.45); border:1px solid rgba(43,89,77,.14); border-radius:3px 12px 3px 12px; }
.technique-card.is-equipped { background:linear-gradient(120deg,rgba(199,231,219,.65),rgba(248,243,222,.7)); border-color:rgba(42,118,100,.42); box-shadow:inset 3px 0 #2f8b77; }
.technique-card > i { display:grid; width:38px; height:38px; place-items:center; color:#9b742e; border:1px solid rgba(155,116,46,.34); border-radius:50%; font:normal 18px "STKaiti","KaiTi",serif; }
.technique-card small { color:#7c928b; font-size:8px; }
.technique-card h3 { margin:2px 0; color:#1d493f; font:400 17px "STKaiti","KaiTi",serif; }
.technique-card p { margin:0 0 4px; color:#607a73; font-size:10px; }
.technique-card em { color:#9b6e24; font-size:8px; font-style:normal; }
.technique-card button { padding:7px 9px; color:#f5f0dd; background:#246b5e; border:0; border-radius:2px 7px 2px 7px; font-size:9px; cursor:pointer; }
.technique-card button:disabled { color:#55786e; background:rgba(37,102,87,.1); cursor:default; }

.people-list--living article { align-items:flex-start; }
.npc-life { min-width:0; width:100%; }
.npc-life h3 { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.npc-life h3 em { color:#a5782e; font:10px system-ui,sans-serif; font-style:normal; }
.npc-life > b { display:block; margin:7px 0; color:#3e665b; font-size:9px; font-weight:500; }
.npc-progress { height:4px; margin-top:9px; overflow:hidden; background:rgba(43,94,80,.1); border-radius:3px; }
.npc-progress i { display:block; height:100%; background:linear-gradient(90deg,#4d9884,#b7d6c9); }
.npc-life details { margin-top:9px; padding-top:8px; border-top:1px dashed rgba(43,89,77,.16); }
.npc-life summary { color:#517168; font-size:9px; cursor:pointer; }
.npc-life details p { display:grid; margin:5px 0 0; grid-template-columns:96px 1fr; gap:6px; color:#6d837c; font-size:8px; }

.world-event-card { display:grid; padding:18px; grid-template-columns:56px 1fr; gap:14px; color:#e7f3ef; background:linear-gradient(135deg,#164d42,#0b332d); border:1px solid rgba(111,202,181,.28); border-radius:3px 16px 3px 16px; }
.world-event-card > i { display:grid; width:52px; height:52px; place-items:center; color:#e7d397; border:1px solid rgba(231,211,151,.4); border-radius:50%; font:normal 24px "STKaiti","KaiTi",serif; }
.world-event-card small { color:rgba(215,239,232,.5); font-size:8px; }
.world-event-card h3 { margin:4px 0; color:#fff3d1; font:400 22px "STKaiti","KaiTi",serif; }
.world-event-card p { margin:0 0 7px; color:rgba(226,240,235,.68); font-size:11px; line-height:1.6; }
.world-event-card em { display:block; margin-bottom:12px; color:#e3c875; font-size:9px; font-style:normal; }
.world-event-forecast { display:grid; margin:10px 0 12px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.world-event-forecast span { padding:8px 9px; color:#e7f3ef; background:rgba(255,255,255,.09); border:1px solid rgba(215,239,232,.17); border-radius:3px 8px; font-size:9px; line-height:1.55; }
.world-event-forecast span:last-child { grid-column:1/-1; }
.world-event-forecast b { display:block; margin-bottom:2px; color:#f2d887; font-size:8px; letter-spacing:.08em; }
.world-event-card button:disabled { opacity:.5; cursor:default; }
.world-event-card--danger { background:linear-gradient(135deg,#55342e,#2e2724); border-color:rgba(204,116,99,.4); }
.world-event-card.is-quiet { color:#44675e; background:rgba(255,255,255,.43); border-color:rgba(43,89,77,.16); }
.world-event-card.is-quiet h3 { color:#284f45; }
.world-event-card.is-quiet p { color:#6a8079; }
.sect-ledger { margin-top:16px; padding:16px; background:rgba(255,255,255,.42); border:1px solid rgba(43,89,77,.16); border-radius:2px 12px 2px 12px; }
.sect-ledger header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.sect-ledger header span { color:#8b7038; font-size:9px; letter-spacing:.12em; }
.sect-ledger header b { color:#254d43; font:400 18px "STKaiti","KaiTi",serif; }
.sect-numbers { display:grid; margin:14px 0; grid-template-columns:repeat(3,1fr); }
.sect-numbers span { display:grid; place-items:center; gap:3px; border-right:1px solid rgba(43,89,77,.12); }
.sect-numbers span:last-child { border-right:0; }
.sect-numbers small { color:#83978f; font-size:8px; }
.sect-numbers b { color:#9d782f; font:20px Georgia,serif; font-weight:400; }
.sect-rank-progress { height:6px; overflow:hidden; background:rgba(42,90,77,.11); border-radius:6px; }
.sect-rank-progress i { display:block; height:100%; background:linear-gradient(90deg,#2f8b77,#d2b66c); }
.sect-ledger p { color:#657b74; font-size:10px; line-height:1.6; }

@keyframes omen-arrive { from { opacity:0; transform:translateY(-10px); } }
@keyframes settlement-fade { from { opacity:0; } }
@keyframes settlement-rise { from { opacity:0; transform:translate(-50%,calc(-50% + 24px)) scale(.965); } }
@keyframes settlement-item { from { opacity:0; transform:translateY(9px); } }
@keyframes settlement-orbit { to { transform:translateX(-50%) rotate(360deg); } }

@media (max-width:1280px) {
  .topbar { grid-template-columns:220px 1fr 320px; }
  .top-actions { gap:2px; }
  .top-actions > button:not(.sound-button) { width:46px; }
  .world-omen { right:200px; }
}

@media (max-width:1020px) {
  .topbar { grid-template-columns:210px 1fr 285px; }
  .top-actions > button:nth-child(2),.top-actions > button:nth-child(3) { display:none; }
  .world-omen { right:184px; }
}

@media (max-width:760px) {
  .topbar { grid-template-columns:auto 1fr auto; }
  .world-omen { top:15px; right:12px; min-width:0; width:138px; min-height:45px; padding:6px 8px; grid-template-columns:28px 1fr; gap:6px; }
  .world-omen > i { width:26px; height:26px; font-size:13px; }
  .world-omen > span small { display:none; }
  .world-omen > span b { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .world-omen > em { display:none; }
  .world-stage__location { max-width:150px; }
  .story-choice { min-height:56px; grid-template-columns:24px 1fr 28px; grid-template-rows:auto auto; }
  .story-choice > b { grid-column:2; grid-row:1; }
  .story-choice > small { display:block !important; grid-column:2; grid-row:2; margin-top:1px; font-size:8px !important; }
  .story-choice > i { grid-column:3; grid-row:1 / span 2; }
  .mobile-tabs.mobile-tabs--systems { display:flex; height:calc(58px + env(safe-area-inset-bottom)); padding:0 max(2px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(2px,env(safe-area-inset-right)); overflow-x:auto; scrollbar-width:none; }
  .mobile-tabs.mobile-tabs--systems::-webkit-scrollbar { display:none; }
  .mobile-tabs--systems button { flex:0 0 58px; }
  .technique-card { grid-template-columns:36px 1fr; }
  .technique-card > button { grid-column:2; justify-self:start; }
  .fate-history p,.world-history p { grid-template-columns:88px 1fr; }
}

@media (max-width:420px) {
  .world-omen { width:124px; }
  .world-stage__location { max-width:126px; }
  .technique-slots { grid-template-columns:1fr; }
  .world-event-card { grid-template-columns:42px 1fr; padding:14px; gap:10px; }
  .world-event-card > i { width:40px; height:40px; font-size:19px; }
  .world-event-forecast { grid-template-columns:1fr; }
  .world-event-forecast span:last-child { grid-column:auto; }
  .npc-life details p { grid-template-columns:1fr; }
  .settlement-modal { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); padding:20px 14px 14px; border-radius:3px 18px 3px 18px; }
  .settlement-modal__halo { top:-88px; width:220px; height:220px; }
  .settlement-modal > header h2 { font-size:27px; }
  .settlement-results { max-height:51vh; }
  .settlement-result { padding:10px; grid-template-columns:38px 1fr auto; gap:8px; }
  .settlement-result > i { width:36px; height:36px; font-size:16px; }
}

@media (prefers-reduced-motion:reduce) { .world-omen,.settlement-backdrop,.settlement-modal,.settlement-result,.settlement-modal__halo { animation:none; } }