/* CSS split file; preserve manifest load order. */ .tool-tip-popover { position: fixed; z-index: 2147483000; width: 220px; max-width: min(220px, calc(100vw - 16px)); padding: 7px 9px; border-radius: 10px; background: rgba(46, 38, 30, 0.78); color: #fff8e6; font-family: "Yomogi", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; font-size: 12px; line-height: 1.45; box-shadow: 0 10px 28px rgba(40, 32, 22, 0.18); backdrop-filter: blur(1px); text-shadow: 0 1px 3px rgba(25, 18, 12, 0.55); pointer-events: none; } .tool-tip-popover.hidden { display: none; } .selected-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; } .favorite-toggle { border: 1px solid rgba(128, 102, 56, 0.32); border-radius: 999px; background: rgba(255, 248, 221, 0.92); color: #5a4630; font-weight: 700; padding: 5px 10px; cursor: pointer; } .favorite-toggle.active { background: rgba(255, 229, 122, 0.95); border-color: rgba(180, 132, 34, 0.55); } .selected-records { margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgba(126, 96, 64, 0.24); } .selected-records h3 { margin: 0 0 5px; font-size: 12px; color: var(--muted); } .selected-records ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .selected-records li { display: grid; grid-template-columns: 38px 1fr; gap: 6px; align-items: start; font-size: 11px; line-height: 1.35; } .selected-records li span { color: var(--muted); font-variant-numeric: tabular-nums; } .selected-records li strong { font-weight: 600; } .selected-change-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .selected-change-list li { display: grid; grid-template-columns: minmax(72px, 0.85fr) minmax(120px, 1.3fr) 34px; gap: 6px; align-items: start; font-size: 11px; line-height: 1.35; } .selected-change-list span { color: var(--muted); font-variant-numeric: tabular-nums; } .selected-change-list strong, .selected-change-list em { min-width: 0; overflow-wrap: anywhere; } .selected-change-list strong { font-weight: 650; } .selected-change-list em { color: var(--muted); font-style: normal; line-height: 1.28; } .relation-list-row { align-items: start; } .relation-list-row > strong { min-width: 0; width: 100%; justify-content: flex-end; } .relation-chip-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 100%; } .relation-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 138px; min-width: 0; border: 1px solid rgba(104, 150, 84, 0.24); border-radius: 999px; background: rgba(250, 255, 242, 0.88); color: #4d6140; padding: 2px 6px 2px 2px; font: inherit; font-size: 11px; line-height: 1.2; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.74); } .relation-chip.enemy { border-color: rgba(178, 92, 74, 0.28); background: rgba(255, 246, 240, 0.92); color: #754739; } .relation-chip:hover, .relation-chip:focus-visible { transform: translateY(-1px); background: rgba(255,255,255,0.98); outline: 2px solid rgba(118, 186, 72, 0.18); } .relation-chip.enemy:hover, .relation-chip.enemy:focus-visible { outline-color: rgba(190, 92, 72, 0.18); } .relation-chip .relation-face { width: 22px; height: 22px; } .relation-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .relation-chip em { font-style: normal; font-size: 10px; opacity: 0.72; flex: 0 0 auto; } .loading-screen { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at top, rgba(255,251,243,0.98), rgba(245,238,225,0.96) 56%, rgba(234,225,208,0.98)); transition: opacity .22s ease, visibility .22s ease; } .loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loading-kicker { font-size: 12px; letter-spacing: 0.14em; color: rgba(116, 96, 76, 0.82); margin-bottom: 6px; } .loading-title { margin: 0 0 8px; font-size: 28px; color: #3f3429; } .loading-text { margin: 0 0 12px; color: rgba(90, 74, 58, 0.86); } .loading-sprite-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0 14px; } .loading-sprite-card { border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(248,243,232,0.90)); border: 1px solid rgba(126, 104, 80, 0.12); min-height: 92px; display: grid; place-items: center; padding: 8px; box-shadow: 0 8px 18px rgba(83, 63, 44, 0.06); } .loading-sprite-card img { width: 68px; height: 68px; object-fit: contain; } .loading-progress-track { width: 100%; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(132, 164, 217, 0.16); border: 1px solid rgba(92, 126, 181, 0.14); } .loading-progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #92d1ff, #a3dfa0 58%, #ffe192); transition: width .18s ease; } .loading-progress-meta { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(88, 73, 60, 0.82); } .loading-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: rgba(111, 92, 73, 0.78); } .collapsible-card { padding-top: 10px; } .panel-card-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 14px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--ink); background: rgba(255,255,255,0.48); box-shadow: inset 0 1px 0 rgba(255,255,255,0.54); } .panel-card-title { font-size: 17px; font-weight: 700; letter-spacing: 0.03em; } .panel-card-state { font-size: 12px; color: rgba(98, 82, 64, 0.78); padding-left: 16px; position: relative; } .panel-card-state::before { content: "▾"; position: absolute; left: 0; top: 50%; transform: translateY(-52%); color: rgba(98, 82, 64, 0.72); } .collapsible-card.collapsed .panel-card-state::before { content: "▸"; } .collapsible-card.collapsed .panel-card-body { display: none; } .panel-card-body { padding-top: 12px; } .tool-card { background: linear-gradient(180deg, rgba(255,247,252,0.92), rgba(249,240,249,0.90)); border-color: rgba(200, 153, 186, 0.34); } .colony-card { background: linear-gradient(180deg, rgba(244,250,238,0.92), rgba(235,246,230,0.90)); border-color: rgba(132, 178, 128, 0.34); } .log-card { background: linear-gradient(180deg, rgba(255,246,238,0.92), rgba(252,239,226,0.90)); border-color: rgba(207, 157, 121, 0.34); } .tool-card .panel-card-toggle { background: linear-gradient(180deg, rgba(255,239,248,0.82), rgba(253,234,246,0.84)); } .colony-card .panel-card-toggle { background: linear-gradient(180deg, rgba(240,252,237,0.82), rgba(230,247,228,0.86)); } .log-card .panel-card-toggle { background: linear-gradient(180deg, rgba(255,242,231,0.84), rgba(253,235,220,0.86)); } .tool-card .tool-category { background: rgba(255,255,255,0.40); border-color: rgba(165,118,150,0.14); } .colony-card .stat { background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(239,248,234,0.84)); } .colony-card .chart-tabs button.active { background: rgba(202, 239, 193, 0.88); border-color: rgba(110,168,92,0.38); } .log-card .log-entry { background: rgba(255,250,246,0.86); } @media (max-width: 920px) { .loading-sprite-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .log-push-controls { margin-top: 10px; padding: 10px; border-radius: 14px; border: 1px solid rgba(192, 138, 96, 0.24); background: rgba(255, 247, 239, 0.74); } .push-master { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; margin-bottom: 8px; } .push-kind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; font-size: 11px; color: rgba(82, 66, 52, 0.88); } .push-kind-grid label { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .push-master input, .push-kind-grid input { accent-color: #dc966c; } .log-push-overlay { position: fixed; left: 16px; bottom: 16px; z-index: 20000; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; } .log-push-toast { position: relative; border-radius: 16px; padding: 10px 12px 10px 14px; border: 1px solid rgba(92, 72, 54, 0.18); background: rgba(255, 251, 244, 0.96); box-shadow: 0 14px 36px rgba(46, 34, 24, 0.20); color: #2f271f; backdrop-filter: blur(8px); animation: logPushIn .18s ease both; overflow: hidden; } .log-push-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: rgba(146, 122, 92, 0.42); } .log-push-toast .log-push-tag { display: inline-block; margin-right: 6px; padding: 2px 6px; border-radius: 999px; background: rgba(238, 224, 204, 0.78); font-size: 10px; font-weight: 700; } .log-push-toast .log-push-time { color: rgba(96, 78, 62, 0.72); font-size: 10px; } .log-push-toast .log-push-text { margin-top: 5px; font-size: 12px; line-height: 1.45; } .log-push-toast.log-push-death::before { background: #8f817a; } .log-push-toast.log-push-accident::before { background: #ee9e5d; } .log-push-toast.log-push-birth::before { background: #98cf7a; } .log-push-toast.log-push-fight::before { background: #e47b80; } .log-push-toast.log-push-relation::before { background: #b99be0; } .log-push-toast.log-push-food::before { background: #e9bd61; } .log-push-toast.log-push-weather::before { background: #7bbbdc; } .log-push-toast.log-push-grass::before { background: #8cc77a; } .log-push-toast.leaving { animation: logPushOut .18s ease both; } @keyframes logPushIn { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes logPushOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(8px); opacity: 0; } } /* v15.12.0: loading / collapsible cards / sound settings */ .loading-screen { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at top, rgba(255,251,243,0.98), rgba(245,238,225,0.96) 56%, rgba(234,225,208,0.98)); transition: opacity .22s ease, visibility .22s ease; } .selected-info .info-row[data-metric] { border-radius: 8px; padding: 3px 5px; } .selected-info .info-row[data-metric="hunger"] { background: rgba(244, 174, 88, 0.10); } .selected-info .info-row[data-metric="loneliness"] { background: rgba(116, 150, 214, 0.10); } .selected-info .info-row[data-metric="energy"] { background: rgba(104, 184, 96, 0.10); } .selected-info .info-row[data-metric="stress"] { background: rgba(214, 104, 88, 0.10); } .selected-info .info-row[data-metric="zunchi"] { background: rgba(112, 142, 70, 0.10); } .selected-info .info-row[data-metric="mood"] { background: rgba(222, 196, 86, 0.10); } .selected-info .info-row[data-metric="lack"] { background: rgba(142, 112, 184, 0.10); } .selected-info .selected-need-row.active { background: rgba(124, 198, 70, 0.18); box-shadow: inset 3px 0 0 rgba(99, 166, 52, 0.78); } .selected-info .selected-need-mark { color: rgba(72, 126, 42, 0.95); font-size: 0.82em; } .selected-personality-changes { align-items: start; } .selected-personality-changes > strong { min-width: 0; width: 100%; } .selected-category[data-selected-category="basic"] { background: rgba(246, 236, 214, 0.32); } .selected-category[data-selected-category="health"] { background: rgba(232, 246, 222, 0.32); } .selected-category[data-selected-category="effects"] { background: rgba(238, 229, 252, 0.28); } .selected-category[data-selected-category="personality"] { background: rgba(255, 239, 214, 0.34); } .selected-category[data-selected-category="relation"] { background: rgba(224, 240, 252, 0.30); } .selected-category[data-selected-category="family"] { background: rgba(246, 226, 236, 0.28); } .selected-category[data-selected-category="records"] { background: rgba(242, 238, 226, 0.30); } /* Color-blind safe panel themes and alternating inner tones. */ .card.tool-card, .card.selected-card, .card.colony-card, .card.log-card { --ui-theme-rgb: 102, 102, 102; --ui-theme-strong: rgba(var(--ui-theme-rgb), 0.64); --ui-theme-mid: rgba(var(--ui-theme-rgb), 0.24); --ui-theme-soft: rgba(var(--ui-theme-rgb), 0.105); --ui-theme-soft-2: rgba(var(--ui-theme-rgb), 0.165); border-color: var(--ui-theme-mid); box-shadow: inset 4px 0 0 var(--ui-theme-strong), 0 10px 30px rgba(64, 48, 32, 0.08); } .card.tool-card { --ui-theme-rgb: 0, 114, 178; background: linear-gradient(180deg, rgba(242, 248, 252, 0.94), rgba(232, 243, 250, 0.91)); } .card.selected-card { --ui-theme-rgb: 204, 121, 167; background: linear-gradient(180deg, rgba(253, 245, 250, 0.94), rgba(249, 235, 244, 0.91)); } .card.colony-card { --ui-theme-rgb: 0, 158, 115; background: linear-gradient(180deg, rgba(240, 250, 247, 0.94), rgba(229, 245, 239, 0.91)); } .card.log-card { --ui-theme-rgb: 230, 159, 0; background: linear-gradient(180deg, rgba(255, 249, 236, 0.94), rgba(253, 242, 215, 0.91)); } .card.tool-card .panel-card-toggle, .card.colony-card .panel-card-toggle, .card.log-card .panel-card-toggle { border: 1px solid var(--ui-theme-mid); background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), var(--ui-theme-soft-2)); } .selected-card .selected-head { border: 1px solid var(--ui-theme-mid); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), var(--ui-theme-soft-2)); padding: 8px 10px; } .tool-card .tool-category:nth-child(odd), .selected-card .selected-category:nth-child(odd) { background: var(--ui-theme-soft); border-color: var(--ui-theme-mid); } .tool-card .tool-category:nth-child(even), .selected-card .selected-category:nth-child(even) { background: var(--ui-theme-soft-2); border-color: rgba(var(--ui-theme-rgb), 0.30); } .tool-card .tool-category-toggle, .selected-card .selected-category-toggle { background: rgba(255, 255, 255, 0.54); border-bottom-color: rgba(var(--ui-theme-rgb), 0.20); } .tool-card .tool-category:nth-child(even) .tool-category-toggle, .selected-card .selected-category:nth-child(even) .selected-category-toggle { background: rgba(255, 255, 255, 0.42); } .tool-card .tool-category-toggle::before, .selected-card .selected-category-toggle::before, .card .panel-card-state::before { color: var(--ui-theme-strong); } .colony-card .stat:nth-child(odd), .colony-card .chart-tabs button:nth-child(odd), .log-card .log-entry:nth-child(odd), .log-card .push-kind-grid label:nth-child(odd) { background: var(--ui-theme-soft); border-color: var(--ui-theme-mid); } .colony-card .stat:nth-child(even), .colony-card .chart-tabs button:nth-child(even), .log-card .log-entry:nth-child(even), .log-card .push-kind-grid label:nth-child(even) { background: var(--ui-theme-soft-2); border-color: rgba(var(--ui-theme-rgb), 0.30); } .colony-card .chart-tabs button.active, .log-card .push-master, .selected-card .selected-name-input:focus { border-color: var(--ui-theme-strong); outline-color: rgba(var(--ui-theme-rgb), 0.24); } .colony-card .chart-tabs button.active { background: rgba(var(--ui-theme-rgb), 0.22); } .selected-card .badge, .selected-card .personality-tag { background: rgba(var(--ui-theme-rgb), 0.11); border-color: rgba(var(--ui-theme-rgb), 0.28); } .save-dialog-panel { width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 760px); overflow: auto; } .save-slot-list { display: grid; gap: 8px; margin: 14px 0; } .save-slot-row { display: grid; grid-template-columns: minmax(86px, 0.7fr) minmax(180px, 2fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid rgba(115, 91, 62, 0.20); border-radius: 12px; background: rgba(255, 255, 255, 0.56); } .save-slot-title { font-weight: 800; color: #4f3928; } .save-slot-meta { color: #6d5a46; font-size: 13px; } .save-slot-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .save-slot-actions .btn[disabled] { opacity: 0.42; pointer-events: none; } .save-export-panel { display: grid; gap: 8px; margin-top: 14px; } .save-export-actions { display: flex; gap: 8px; flex-wrap: wrap; } .save-hash-text { width: 100%; min-height: 118px; resize: vertical; padding: 10px; border: 1px solid rgba(115, 91, 62, 0.26); border-radius: 12px; background: rgba(255,255,255,0.78); color: #3e3023; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; } @media (max-width: 640px) { .save-slot-row { grid-template-columns: 1fr; } .save-slot-actions { justify-content: flex-start; } } /* v15.25.0: save menu grid, thumbnails, compact import/export confirmation. */ .save-dialog-panel { width: min(860px, calc(100vw - 32px)); max-height: min(88vh, 790px); } .save-slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; } .save-slot-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; min-height: 190px; padding: 9px; border: 1px solid rgba(115, 91, 62, 0.20); border-radius: 14px; background: rgba(255, 255, 255, 0.58); box-shadow: 0 2px 8px rgba(68, 52, 33, 0.06); } .save-slot-card.empty { background: rgba(250, 247, 240, 0.54); } .save-slot-thumb { height: 82px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(231, 221, 204, 0.80), rgba(245, 240, 230, 0.90)); border: 1px solid rgba(115, 91, 62, 0.14); display: grid; place-items: center; } .save-slot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .save-slot-thumb-empty { font-size: 11px; letter-spacing: .04em; color: rgba(88, 72, 54, 0.48); font-weight: 800; } .save-slot-title { font-weight: 800; color: #4f3928; line-height: 1.15; } .save-slot-meta { color: #6d5a46; font-size: 12px; line-height: 1.35; min-height: 48px; } .save-slot-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; justify-content: stretch; } .save-slot-actions .btn.mini { min-width: 0; padding-inline: 5px; } .save-confirm-box { margin-top: 10px; padding: 10px; border-radius: 14px; border: 1px solid rgba(169, 90, 73, 0.26); background: rgba(255, 245, 236, 0.96); box-shadow: inset 0 0 0 1px rgba(255,255,255,.62); } .save-confirm-box.hidden { display: none; } .save-confirm-message { font-size: 13px; line-height: 1.45; color: #4f3928; } .save-confirm-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; } .save-hash-text { min-height: 82px; } @media (max-width: 740px) { .save-slot-grid { grid-template-columns: 1fr; } .save-slot-card { min-height: 0; } .save-slot-thumb { height: 96px; } } /* v15.25.0: compact full-width colony mood. */ .colony-stats .stat:nth-child(3) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 9px; min-height: 28px; text-align: left; } .colony-stats .stat:nth-child(3) span { font-size: 10px; } .colony-stats .stat:nth-child(3) strong { font-size: 14px; line-height: 1.15; text-align: right; } /* v15.25.0: event push cards are contained at the top of the event UI. */ .log-push-overlay { position: static; z-index: auto; width: 100%; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } .log-push-toast { box-shadow: 0 6px 18px rgba(46, 34, 24, 0.13); padding: 8px 10px 8px 13px; } /* v15.28.0: smaller save slots with full-card thumbnails. */ .save-dialog-panel { width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 760px); } .save-slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .save-slot-card { position: relative; overflow: hidden; min-height: 126px; padding: 7px; grid-template-rows: auto 1fr auto; gap: 4px; background: rgba(255,255,255,.64); } .save-slot-thumb { position: absolute; inset: 0; height: auto; border: 0; border-radius: inherit; z-index: 0; opacity: .88; } .save-slot-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,250,241,.42), rgba(255,250,241,.78)); } .save-slot-thumb img { object-fit: cover; } .save-slot-thumb-empty { width:100%; height:100%; display:grid; place-items:center; background:rgba(240,234,222,.80); } .save-slot-title, .save-slot-meta, .save-slot-actions { position: relative; z-index: 1; } .save-slot-title { padding: 3px 6px; border-radius: 999px; background: rgba(255,251,244,.76); width: fit-content; } .save-slot-meta { min-height: 34px; font-size: 11px; line-height: 1.25; padding: 5px 6px; border-radius: 10px; background: rgba(255,251,244,.70); } .save-slot-actions { gap: 4px; } .save-slot-actions .btn.mini { padding: 5px 4px; font-size: 11px; } @media (max-width: 740px) { .save-slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .save-slot-card { min-height: 118px; } } @media (max-width: 520px) { .save-slot-grid { grid-template-columns: 1fr; } .save-slot-card { min-height: 128px; } } /* v15.28.0: frozen list lives inside the Operation tool category. */ .tool-category[data-tool-category="operate"] .frozen-panel { grid-column: 1 / -1; margin: 4px 0 0; } /* v15.28.0: large centered load/overwrite warning. */ .save-confirm-box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12000; width: min(560px, calc(100vw - 32px)); margin: 0; padding: 22px 24px; border-radius: 22px; border: 2px solid rgba(169, 90, 73, 0.34); background: rgba(255, 248, 239, 0.98); box-shadow: 0 24px 70px rgba(42, 30, 18, 0.30), inset 0 0 0 1px rgba(255,255,255,.74); } .save-confirm-box::before { content: ""; position: fixed; left: -100vw; right: -100vw; top: -100vh; bottom: -100vh; background: rgba(30, 22, 14, 0.24); z-index: -1; } .save-confirm-message { font-size: 18px; line-height: 1.55; font-weight: 800; color: #4a2f23; } .save-confirm-actions { margin-top: 18px; gap: 12px; } .save-confirm-actions .btn { min-width: 118px; padding: 10px 16px; font-size: 15px; }