/* Nine-slice skins. Corners stay fixed; only edge strips stretch. No center/icon is copied. */
:root {
  --skin-wood: url('assets/ui/kit/tool-dig.png');
  --skin-panel: url('assets/ui/kit/tooltip-panel.png');
  --skin-paper: url('assets/ui/kit/label-parchment.png');
  --skin-metal: url('assets/ui/kit/slot-blue.png');
  --skin-selected: url('assets/ui/kit/slot-parchment.png');
}
/* Existing selectors are adapters; data-ui is the public API for new components. */
:where([data-ui], button, dialog, select, textarea,
  input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']),
  .resource-panel, .selection, .build-window, .job-tool-panel, .overlay-legend,
  .world-layout, .dupe-card, .print-card, .bio-card, .person-settings, .system-inspector,
  .system-card-grid article, .tech-detail, .tech-sidebar, .tech-node, .unlock-inspector,
  #catalog-details, .prologue-speech, .title-notice, .event, .objective,
  .alert, #toast, #tooltip, #pause-banner, #gameover, .bar, .tech-progress) {
  --skin-surface: var(--ui-surface);
  --skin-ink: var(--text-primary);
  --skin-image: var(--skin-wood);
  --skin-slice: 12;
  --skin-edge: 6px;
  border-image-source: var(--skin-image) !important;
  border-image-slice: var(--skin-slice) !important;
  border-image-width: var(--skin-top, var(--skin-edge)) var(--skin-right, var(--skin-edge)) var(--skin-bottom, var(--skin-edge)) var(--skin-left, var(--skin-edge)) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  image-rendering: pixelated;
}
/* Public primitives opt into layout; adapters preserve existing game geometry. */
[data-ui] {
  box-sizing: border-box;
  border: 1px solid transparent;
  border-image-source: var(--skin-image) !important;
  border-image-slice: var(--skin-slice) !important;
  border-image-width: var(--skin-top, var(--skin-edge)) var(--skin-right, var(--skin-edge)) var(--skin-bottom, var(--skin-edge)) var(--skin-left, var(--skin-edge)) !important;
  border-image-repeat: stretch !important;
  background-color: var(--skin-surface, var(--ui-surface));
  color: var(--skin-ink, var(--text-primary));
  font-family: var(--font-ui);
  border-radius: 0;
}
[data-ui='panel'], [data-ui='card'], [data-ui='tooltip'] { padding: var(--skin-padding, 18px); }
[data-ui='button'], [data-ui='tab'], [data-ui='field'] { padding: var(--skin-padding, 9px 14px); }
:where(dialog, .resource-panel, .selection, .build-window, .job-tool-panel, .overlay-legend,
  .world-layout, .dupe-card, .print-card, .bio-card, .person-settings, .system-inspector,
  .system-card-grid article, .tech-detail, .tech-sidebar, .unlock-inspector,
  #catalog-details, .prologue-speech, .title-notice, #gameover,
  [data-ui='panel'], [data-ui='card']) {
  --skin-image: var(--skin-panel);
  --skin-slice: 22 14 14 26;
  --skin-edge: 9px;
}
:where(#tooltip, #toast, #pause-banner, .event, .objective, .alert, [data-ui='tooltip']) {
  --skin-edge: 4px;
}
:where(select, textarea, input:not([type='range']):not([type='checkbox']):not([type='radio']), [data-ui='field']) {
  --skin-image: var(--skin-metal);
  --skin-slice: 9;
  --skin-edge: 4px;
}
:where(.bar, .tech-progress, [data-ui='meter']) { --skin-edge: 3px; }
[data-ui='meter'] { padding: 3px; min-height: 16px; }
[data-ui='meter'] > span { display: block; width: clamp(0%, var(--value, 0%), 100%); height: 100%; min-height: 10px; background: var(--meter-color, var(--status-success)); }
:where(button.active, button[aria-pressed='true'], button[aria-selected='true'], button[aria-current='page'], .print-card.chosen, [data-state='selected']) {
  --skin-image: var(--skin-selected);
  --skin-slice: 9;
}
/* Material overrides are local: nested controls choose their own frame. */
[data-skin='wood'] { --skin-image: var(--skin-wood); --skin-slice: 12; }
[data-skin='paper'] {
  --skin-image: var(--skin-paper); --skin-slice: 12 22 12 22;
  --skin-surface: #ddc49c; --skin-ink: #30271e;
}
[data-skin='metal'] { --skin-image: var(--skin-metal); --skin-slice: 9; }
[data-skin='plain'] { border-image-source: none !important; }
[data-ui][data-skin='paper'] { background-color: var(--skin-surface); color: var(--skin-ink); }
[data-ui]:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
[data-ui]:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
[data-state='danger'] { --skin-surface: var(--status-danger-bg); }
[data-state='success'] { --skin-surface: #354537; }
/* Native field behavior, keyboard controls and semantic progress values remain native. */
input[type='checkbox'], input[type='radio'], input[type='range'] { accent-color: var(--brand-accent); }
progress { accent-color: var(--status-success); }
progress::-webkit-progress-bar { background: var(--ui-panel); box-shadow: inset 0 0 0 1px var(--ui-border); }
progress::-webkit-progress-value { background: var(--meter-color, var(--status-success)); }
progress::-moz-progress-bar { background: var(--meter-color, var(--status-success)); }
@media (forced-colors: active) {
  :where([data-ui],button,dialog,input,select,textarea) { border-image: none !important; border: 1px solid ButtonText; }
}
/* Containers reserve their frame width so opaque child rows cannot cover the border. */
body :is(dialog, .resource-panel, .selection, .build-window, .job-tool-panel,
  .overlay-legend, .world-layout, .dupe-card, .print-card, .bio-card,
  .person-settings, .system-inspector, .system-card-grid article, .tech-detail,
  .tech-sidebar, .unlock-inspector, #catalog-details, .prologue-speech, .title-notice,
  [data-ui='panel'], [data-ui='card']) {
  border-style: solid;
  border-width: var(--skin-top, var(--skin-edge)) var(--skin-right, var(--skin-edge)) var(--skin-bottom, var(--skin-edge)) var(--skin-left, var(--skin-edge));
  border-color: transparent;
}
/* Inset the backing paint: transparent sprite padding must stay transparent. */
body :is(.build-categories, .command-buttons, .management-nav, .overlay-strip, .simulation-controls) button,
body button[data-ui='button'], body button[data-ui='tab'] {
  border-color: transparent;
  border-radius: 0;
  /* Compensate for transparent sprite edges without overlapping click targets. */
  border-image-outset: 2px !important;
  background-color: transparent !important;
  background-image: linear-gradient(var(--skin-surface), var(--skin-surface)) !important;
  background-size: calc(100% - 6px) calc(100% - 6px) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-origin: border-box;
}
body :is(.build-categories, .command-buttons, .management-nav, .overlay-strip, .simulation-controls) button:is(.active, .primary, [aria-pressed='true'], [aria-selected='true'], [aria-current='page']),
body button:is([data-ui='button'], [data-ui='tab']):is(.active, .primary, [aria-pressed='true'], [aria-selected='true'], [aria-current='page']) {
  border-image-outset: 1px !important;
}
:where(button.active, button.primary, button[aria-pressed='true'], button[aria-selected='true']) { --skin-surface: var(--ui-active); }
button:hover:not(:disabled) { --skin-surface: var(--ui-hover); }
body :is(.build-categories, .command-buttons, .management-nav, .overlay-strip, .simulation-controls) button:hover:not(:focus-visible) { outline: none; }
/* Prologue uses the same materials and frame API as the rest of the interface. */
#prologue-heading[data-ui] {
  border-width: 9px;
  font-family: var(--font-ui);
  font-size: clamp(20px, 3vw, 26px);
  margin-bottom: 6px;
}
#prologue-story[data-ui] {
  border-width: 9px;
  background: var(--skin-surface);
  color: var(--skin-ink);
  box-shadow: none;
}
#prologue-story .prologue-speech {
  border-radius: 0;
  margin-left: 0;
  background: var(--skin-surface);
  color: var(--skin-ink);
}
#prologue-story .prologue-speech::before { content: none; }
#prologue-story :is(h2, .wish-heading) { font-family: var(--font-ui); }
#prologue-story .wish-heading { font-weight: 700; }
#prologue-story .prologue-stage { border-radius: 0; --skin-edge: 6px; }
#prologue-story[data-step='0']::before {
  border: 7px solid transparent;
  border-image: var(--skin-wood) 12 / 7px / 0 stretch;
}
body :is(dialog, .resource-panel, .selection, .build-window, .job-tool-panel,
  .overlay-legend, .world-layout, .dupe-card, .print-card, .bio-card,
  .person-settings, .system-inspector, .system-card-grid article, .tech-detail,
  .tech-sidebar, .unlock-inspector, #catalog-details, .prologue-speech,
  .title-notice, [data-ui='panel'], [data-ui='card']) {
  background-clip: padding-box !important;
}
/* Dedicated cycle pennant: decorative art is separate from live time values. */
.time-hud .cycle-clock {
  --cycle-ink: var(--color-wood-500);
  width: 84px;
  height: 90px;
  flex: 0 0 84px;
  padding: 0;
  border: 0;
  clip-path: none;
  border-radius: 0;
  background: url('assets/ui/kit/cycle-hud-pixel.png') center / 100% 100% no-repeat;
  color: var(--text-inverse);
  image-rendering: pixelated;
}
.cycle-clock[data-phase='낮'] { --cycle-ink: var(--color-ink-800); }
.cycle-clock[data-phase='노을진 저녁'] { --cycle-ink: var(--status-danger-bg); }
.cycle-clock[data-phase='밤'] { --cycle-ink: var(--color-charcoal-500); }
.time-hud .cycle-clock #day-phase {
  position: absolute;
  top: 22px;
  left: 17px;
  right: 9px;
  text-align: center;
  font: 700 11px/14px var(--font-ui);
  color: var(--cycle-ink);
  white-space: nowrap;
}
.cycle-clock .cycle-count {
  position: absolute;
  top: 37px;
  left: 17px;
  right: 9px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}
.time-hud .cycle-count b { font: 400 20px/23px var(--font-ui); font-variant-numeric: tabular-nums; }
.cycle-count > span { font: 400 9px/12px var(--font-ui); }
.time-hud .cycle-clock svg {
  position: absolute;
  width: 17px;
  height: 17px;
  top: 63px;
  left: calc(50% - 4px);
}
.cycle-clock svg circle:first-child { stroke: var(--color-wood-100); }
.cycle-clock #cycle-ring { stroke: var(--cycle-ink); stroke-width: 4; }
@media (max-width: 650px) {
  .time-hud .cycle-clock { width: 70px; height: 80px; flex-basis: 70px; }
  .time-hud .cycle-clock #day-phase { top: 19px; left: 14px; right: 8px; font-size: 10px; }
  .cycle-clock .cycle-count { top: 33px; left: 14px; right: 8px; }
  .time-hud .cycle-count b { font-size: 17px; line-height: 21px; }
  .time-hud .cycle-clock svg { top: 55px; width: 15px; height: 15px; }
}

.mobile-dock { display: none; }
.mobile-panel { display: contents; }
.mobile-panel > p { display: none; }
@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px) {
  .title-page {
    min-height: 100svh; display: flex; flex-direction: column; align-items: center; gap: 20px;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(40px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  .title-menu, .title-news { position: static; width: min(100%, 320px); }
  .title-menu > button, .title-news button, dialog button { min-height: 44px; }
  .mobile-panel > p { display: block; margin: 0; font-size: 12px; color: var(--text-secondary); }
  #game-screen { --mobile-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  #game-screen .key-hint, #game-screen .speed-key-hint,
  .time-hud .colony-name, .time-hud .vital-strip,
  .time-hud #home, .time-hud #art-palette-toggle,
  .time-hud #day-phase, .time-hud .cycle-clock svg,
  #game-screen .map-status, #tooltip { display: none !important; }
  .time-hud {
    top: max(6px, env(safe-area-inset-top, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    gap: 8px; align-items: center; pointer-events: none;
  }
  .time-hud button { pointer-events: auto; }
  .time-hud .cycle-clock {
    width: 56px; height: 44px; flex-basis: 56px;
    background: var(--ui-panel); border: 1px solid var(--ui-border);
  }
  .time-hud .cycle-clock .cycle-count { position: static; height: 100%; align-items: center; }
  .time-hud .cycle-count b, .time-hud .cycle-count span { color: var(--text-primary); }
  .time-hud .simulation-controls { gap: 3px; }
  .time-hud .simulation-controls button { min-width: 44px; min-height: 44px; padding: 6px; }
  .mobile-dock {
    position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    background: var(--ui-canvas);
  }
  .mobile-dock button { min-width: 0; min-height: 44px; font-size: 13px; }
  .mobile-dock button[aria-expanded='true'] { background: var(--ui-active); color: var(--text-accent); }
  .mobile-panel { display: none; }
  .mobile-panel.is-open {
    display: flex; flex-direction: column; gap: 8px;
    position: fixed; z-index: 9; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px));
    bottom: var(--mobile-bottom);
    max-height: calc(100vh - var(--mobile-bottom) - 66px - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - var(--mobile-bottom) - 66px - env(safe-area-inset-top, 0px));
    overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y;
    padding: 10px; background: var(--ui-panel); border: 1px solid var(--ui-border);
  }
  .mobile-panel > :is(nav, section, aside) {
    position: static; width: 100%; min-width: 0; max-width: none; max-height: none;
    margin: 0; flex-shrink: 0;
  }
  .mobile-panel button, .mobile-panel summary { min-height: 44px; }
  .mobile-panel .management-nav, .mobile-panel .overlay-strip,
  .mobile-panel .build-categories, .mobile-panel .command-buttons {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 6px; overflow: visible;
  }
  .mobile-panel :is(.management-nav, .overlay-strip, .build-categories, .command-buttons) button {
    width: auto; min-width: 0; height: auto; min-height: 54px;
    display: flex; flex-direction: column; gap: 3px; padding: 5px;
  }
  .mobile-panel .management-nav b { display: block; font-size: 11px; }
  .mobile-panel .overlay-strip > b { display: none; }
  .mobile-panel .priority-control { position: static; margin-bottom: 8px; }
  .mobile-panel .command-toolbar { display: block; }
  .mobile-panel .resource-panel dl { display: block; font-size: 12px; }
  .mobile-panel .resource-panel { font-size: 13px; }
  .mobile-panel #buildings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #game-screen .selection, #game-screen .overlay-legend {
    top: auto; bottom: var(--mobile-bottom); left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); width: auto;
    max-height: 42vh; max-height: 42dvh; overflow: auto; overscroll-behavior: contain;
  }
  #game-screen .selection button { min-height: 44px; }
  #game-screen .zoom-controls { z-index: 1; bottom: calc(var(--mobile-bottom) + 8px); left: max(8px, env(safe-area-inset-left, 0px)); right: auto; }
  #game-screen .zoom-controls button { min-width: 44px; min-height: 44px; }
  #game-screen .zoom-controls #center { display: block; }
  dialog {
    max-width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow: auto; overscroll-behavior: contain;
  }
}