.story-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.story-tabs button { font-size: 12px; }
#pane-life { flex-direction: column; gap: 8px; }
#morning-controls { margin: 0; padding: 0; }
#morning-controls h3 { font-size: 12px; margin: 0; }
#morning-note { font-size: 11px; margin: 3px 0; }
#morning-options { display: flex; overflow-x: auto; gap: 5px; }
#morning-options button { flex: 0 0 auto; padding: 5px 10px; font-size: 12px; }
#morning-options small { display: block; max-width: 130px; font-size: 10px; }
#skill-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.skills-compact { display: none; }
#pane-skills, #pane-world { overflow-wrap: anywhere; }
#pane-world > p, #world-view p, #world-view small { font-size: 12px; line-height: 1.7; }
.world-map { position: relative; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); background: #f7f1e5; border-radius: 16px; overflow: hidden; }
.world-map svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.world-map line { stroke: #a69a83; stroke-width: .5; }
.world-map button { position: absolute; transform: translate(-50%, -50%); padding: 2px; min-width: 44px; min-height: 44px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; font-size: 11px; }
.world-map button[aria-pressed=true] { border: 2px solid var(--red); color: var(--red); z-index: 2; }
.world-map button.player-city { background: var(--ink); color: var(--paper); }
.geographic-map { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #f6efdf; margin-bottom: 16px; }
.geo-heading { display: flex; justify-content: space-between; gap: 12px; padding: 16px 16px 0; align-items: baseline; }
.geo-heading strong { font-size: 20px; letter-spacing: .12em; }
.geo-heading span, .geo-help, .geo-notes { font-size: 12px; color: var(--soft-ink); line-height: 1.7; }
.geo-help { margin: 8px 16px 12px; }
.geo-scroll { overflow: auto; max-height: 620px; scrollbar-color: #a79b7e #eee7d2; border-block: 1px solid var(--line); }
.geo-canvas { position: relative; width: max(100%, 880px); aspect-ratio: 10 / 9; }
.geo-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.geo-sea { fill: #d6e2de; stroke: #8aa8a3; stroke-width: 1.5; }
.geo-basin { fill: #d6debd; stroke: #bac39c; stroke-width: 1; }
.geo-plain { fill: #e2dfbd; opacity: .7; }
.geo-range-shadow { stroke: #adad85; stroke-width: 35; fill: none; opacity: .23; stroke-linecap: round; stroke-linejoin: round; }
.geo-ridge { stroke: #9a9875; stroke-width: 1.5; fill: none; opacity: .5; }
.geo-peak { stroke: #969574; stroke-width: 1.2; fill: #c5c5a3; }
.geo-river { stroke: #6f9b9d; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.geo-label { fill: #81865e; font-size: 25px; letter-spacing: 4px; text-anchor: middle; opacity: .68; }
.geo-mountain-label { fill: #6b7054; font-size: 15px; letter-spacing: 3px; text-anchor: middle; paint-order: stroke; stroke: #eee7d2; stroke-width: 3px; }
.geo-water-label, .geo-water-small { fill: #567f86; font-size: 19px; letter-spacing: 3px; text-anchor: middle; }
.geo-water-small { font-size: 12px; letter-spacing: 1px; }
.geo-route { stroke: #9b7658; stroke-width: 1.5; stroke-dasharray: 5 5; fill: none; opacity: .7; }
.geo-leader { stroke: #8d826d; stroke-width: .8; }
.geo-compass { fill: #5c5c49; font-size: 15px; }
.geo-compass path { fill: none; stroke: #5c5c49; stroke-width: 2; }
.geo-canvas .geo-city { position: absolute; transform: translate(-50%, -50%); min-width: 44px; min-height: 34px; padding: 4px 8px; border: 1px solid var(--city-color); border-radius: 4px; background: #f8f2e3; color: var(--city-color); font-size: 13px; white-space: nowrap; box-shadow: 0 1px 2px #51452c15; }
.geo-canvas .geo-city[aria-pressed=true] { background: var(--city-color); color: #fff9e9; z-index: 2; outline: 2px solid #fff9e9; }
.geo-canvas .geo-city:focus-visible { outline: 3px solid #2b607e; outline-offset: 3px; z-index: 3; }
.geo-canvas .geo-home::after { content: '・你'; font-size: 11px; }
.geo-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; font-size: 12px; }
.geo-legend span { display: inline-flex; align-items: center; gap: 5px; }
.geo-legend i { width: 8px; height: 8px; border-radius: 50%; }
.geo-notes { padding: 0 16px 12px; }
.geo-notes p { margin: 8px 0; }
.geo-notes a { color: #476d70; }
.realm-card { padding: 16px; margin: 14px 0; border: 1px solid var(--line); border-radius: 16px; background: #f7f1e5; }
.realm-card h3 { font-size: 21px; margin: 0 0 10px; }
.realm-card h4 { margin: 16px 0 6px; }
.realm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.realm-actions button { border: 1px solid var(--ink); border-radius: 9px; background: transparent; color: var(--ink); padding: 8px; min-height: 44px; font-size: 12px; }
.realm-actions button:disabled { opacity: .45; cursor: not-allowed; }
.realm-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; font-size: 12px; }
.realm-metrics > span { border-bottom: 1px solid var(--line); padding: 6px 0; }
.realm-card select { width: 100%; background: var(--paper); color: var(--ink); margin-bottom: 8px; }
.realm-locked { opacity: .55; }
.realm-message { border-left: 3px solid var(--red); padding-left: 10px; }
.realm-expedition { margin: 16px 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--red) 45%, var(--line)); border-radius: 12px; background: #fff9eb; }
.realm-expedition > h4 { margin-top: 0; color: var(--red); }
.realm-route { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.realm-route h5 { margin: 0 0 6px; font-size: 15px; }
.realm-route details { margin-top: 8px; }
.realm-route summary { cursor: pointer; font-weight: 700; }
.realm-route [role=status] { color: var(--red); font-weight: 700; }