/* Late-loaded dialog skin. Preparation, battle HUD, journal, guidebook, and talk layouts retain their own structure. */
#prepareDialog .prepare-footer-info .camp-recap:not([hidden]) { display:block; }
#prepareDialog #prepareRecapOpen { min-height:44px;padding:8px 10px;border:7px solid transparent;border-image:url('/assets/preparation/button-icon-v3.png') 22% / 10px stretch;background:url('/assets/preparation/button-secondary-v3.png') center / 112% 260%;color:#f4e1b5;font:16px/1.3 BoardLabel,sans-serif; }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #versionsDialog, #compareDialog, #recapDialog) { color: #482c1b; border: 3px solid #78502e; border-radius: 5px; background: url('/assets/preparation/paper-frame.png') center / 100% 100% no-repeat, #f2e2bb; box-shadow: 0 20px 70px #000c, inset 0 0 0 2px #d9b77888; }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #versionsDialog, #compareDialog, #recapDialog)::backdrop { background: #070a08b8; backdrop-filter: blur(4px); }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) > .dialog-header { display: flex; align-items: center; gap: 12px; margin: -2px -2px 16px; padding: 14px 19px; border-bottom: 2px solid #a57b46; background: linear-gradient(90deg, #432b1b, #21150f); color: #f8e2a7; }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) > .dialog-header > :first-child { min-width: 0; }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) > .dialog-header h2 { margin: 0; color: inherit; font: 700 clamp(25px, 3vw, 39px)/1.3 BoardHand, sans-serif; letter-spacing: -.035em; }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) > .dialog-header p { margin: 0 0 3px; color: #e5c780; font: 13px/1.3 BoardLabel, sans-serif; }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) button { min-height: 44px; border-color: #8f6538; background: linear-gradient(#f8e6b7, #d5ad70); color: #432817; font-family: BoardLabel, sans-serif; }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) button.primary { border-color: #a16a28; background: linear-gradient(#ffe58d, #d89938); color: #43250d; box-shadow: inset 0 0 0 1px #fff2b3; }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) .icon-button { display: grid; width: 44px; min-width: 44px; padding: 0; place-items: center; border: 2px solid #b8833e; background: linear-gradient(#4a301d, #1e120c); color: #ffe2a1; font-size: 26px; }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) :is(input, select, textarea) { min-height: 44px; color: #3e281b; border-color: #b28a58; background: #fff8e8; font: 16px/1.35 system-ui, sans-serif; }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) :is(.field-hint, [role="status"]) { color: #69513b; font: 14px/1.5 system-ui, sans-serif; }

#settingsDialog { width: min(650px, calc(100vw - 24px)); padding: 20px; }
#settingsDialog > .dialog-header { margin: -20px -20px 16px; }
#settingsDialog form { display: grid; gap: 11px; margin-top: 14px; padding: 15px; border: 1px solid #c29c69; border-radius: 4px; background: #fff9e8cc; box-shadow: inset 0 0 0 2px #fffef177; }
#settingsDialog form:first-of-type { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
#settingsDialog label { display: grid; gap: 6px; color: #4b2e1c; font: 16px/1.3 BoardLabel, sans-serif; }
#settingsDialog #renameStatus, #settingsDialog #healthStatus { margin: 0; }
#settingsDialog #compatibleFields { display: grid; gap: 10px; padding: 10px; border-left: 3px solid #9c7445; background: #f3e5c7; }
#settingsDialog .dialog-actions { margin: 3px 0 0; padding: 10px 0 0; border-top-color: #c29c69; background: transparent; }
#settingsDialog .audio-controls { margin-top: 14px; padding: 14px; border: 1px solid #c29c69; border-radius: 4px; background: #fff9e8cc; color: #4a2d1b; }
#settingsDialog .audio-controls summary { min-height: 44px; border-color: #b28a58; background: #f3e4c2; color: #4a2d1b; font-family: BoardLabel, sans-serif; }
#settingsDialog .audio-panel { position: static; width: auto; margin-top: 9px; background: #f9efd9; border-color: #c29c69; box-shadow: none; }
#settingsDialog details > summary { color:#65472b; min-height:44px; }

#characterDialog { width: min(1120px, calc(100vw - 24px)); padding: 20px; }
#characterDialog > .dialog-header { margin: -20px -20px 14px; }
#characterDialog .character-choices { gap: 14px; }
#characterDialog .character-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#characterDialog .character-choice { padding: 14px; border-color: #c09a68; background: #fff9e8e6; box-shadow: inset 0 0 0 2px #fffef188; }
#characterDialog .character-choice.is-selected { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: minmax(250px, 1fr) auto; border: 2px solid #278187; background: #fffaea; box-shadow: inset 0 0 0 2px #e2f1e7; }
#characterDialog .character-choice.is-selected .character-choice__select { grid-column: 1; grid-row: 1 / span 2; grid-template-columns: 42% minmax(0, 1fr); min-height: 250px; }
#characterDialog .character-choice.is-selected .character-choice__portrait { width: 100%; height: 100%; min-height: 220px; }
#characterDialog .character-choice__title strong { color: #402717; font: 700 30px/1.3 BoardHand, sans-serif; }
#characterDialog .character-choice__stats { color: #236e76; font: 20px/1.4 BoardLabel, sans-serif; }
#characterDialog .character-choice__description, #characterDialog .character-choice__facts { color: #5c4634; font: 15px/1.55 system-ui, sans-serif; }
#characterDialog .character-choice__details { border-color: #bda17b; }
#characterDialog .character-choice.is-selected .character-choice__details { grid-column: 2; grid-row: 1; }
#characterDialog .character-choice__details > summary { color: #217b83; font: 17px/1.3 BoardLabel, sans-serif; }
#characterDialog .character-choice__facts { grid-template-columns: 105px minmax(0, 1fr); }
#characterDialog .character-choice__facts dt { color: #1f7b83; }
#characterDialog .character-choice__preset { color: #44250e; font-family: BoardLabel, sans-serif; }
#characterDialog .character-choice.is-selected .character-choice__preset { grid-column: 2; grid-row: 2; justify-self: start; }
#characterDialog .character-choice.is-locked { grid-template-columns: 124px minmax(0, 1fr); align-items: center; min-height: 130px; opacity: 1; background: #efe8d9; }
#characterDialog .character-choice.is-locked .character-choice__select { grid-column: 1 / -1; grid-template-columns: 104px minmax(0, 1fr); min-height: 100px; }
#characterDialog .character-choice.is-locked .character-choice__portrait { width: 104px; height: 92px; }
#characterDialog .character-choice.is-locked .character-choice__details, #characterDialog .character-choice.is-locked .character-growth { display: none; }
#characterDialog .character-choice__menu-art { object-fit: contain; image-rendering: pixelated; background: transparent; }

/* Small actions reuse the real preparation button frames; card-sized selection controls stay paper surfaces. */
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) :is(.icon-button, .dialog-actions button, #renameButton, #checkConnection, #compareOpen, #compareForm > button, .character-choice__preset) { border: 7px solid transparent; border-image: url('/assets/preparation/button-icon-v3.png') 22% / 10px stretch; border-radius: 0; background-image: var(--button-surface, url('/assets/preparation/button-secondary-v3.png')); background-position: center; background-size: 112% 260%; background-origin: padding-box; background-clip: padding-box; box-shadow: none; color:var(--button-ink,#f4e1b5); }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) :is(button.primary, #saveAndLeave, #confirmStop, .character-choice__preset) { --button-surface: url('/assets/preparation/button-primary-v3.png'); --button-ink:#43250d; }
:is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog, #companionsDialog, #battleInfoDialog, #stopDialog, #leaveDraftDialog, #deleteRecordDialog, #talkSceneDialog, #reviewDialog, #versionsDialog, #compareDialog, #recapDialog) :is(.icon-button, .dialog-actions button, #renameButton, #checkConnection, #compareOpen, #compareForm > button, .character-choice__preset):hover:not(:disabled) { filter: brightness(1.09); }

:is(#regionPicker, #loadoutPicker, #relicPicker, #skillDialog) { padding: 19px; }
:is(#regionPicker, #loadoutPicker, #relicPicker, #skillDialog) > .dialog-header { margin: -19px -19px 15px; }
:is(#regionPicker, #loadoutPicker, #relicPicker) :is(.region-choice, .preparation-skill, .relic-choice) { border-color: #c19c6b; background: #fff9e8; box-shadow: inset 0 0 0 1px #fffef088; }
:is(#regionPicker, #loadoutPicker, #relicPicker) :is(.region-choice, .preparation-skill, .relic-choice)[aria-pressed="true"] { border-color: #257a80; background: #f0faf5; }
#relicPicker .relic-choice { color:#493420; }
#skillDialog #skillPortrait .skill-art { border-color: #a87e49; background: #17211e; }
#skillDialog .skill-facts { border-top-color: #c4a070; }
#skillDialog #skillDescription { color:#594129;font:16px/1.6 system-ui,sans-serif; }

#companionsDialog #companionList { display: grid; gap: 9px; }
#companionsDialog .companion-card { border-color: #c19c6b; background: #fff9e8; }
#companionsDialog { width:min(760px,calc(100vw - 24px)); }
#companionsDialog .companion-card { grid-template-columns:96px minmax(0,1fr);padding:16px; }
#companionsDialog .companion-card canvas { width:96px;height:96px; }
#companionsDialog .companion-card b { color:#48311d;font:26px BoardHand,sans-serif; }
#companionsDialog .companion-card small { color:#624b34;font:15px/1.5 system-ui,sans-serif; }
#companionsDialog .companion-card:disabled { opacity:1;border:2px solid #5f7e72; }
#companionsDialog .companion-card:disabled b::after { content:' · 선택됨';color:#3d6a63;font:14px BoardLabel,sans-serif; }
#battleInfoDialog { color: #482c1b; border-color: #78502e; background: #f2e2bb; }
#battleInfoDialog > .dialog-header { margin: 0; }
#battleInfoDialog .dialog-actions { background: #f2e2bb; border-top-color: #c29c69; }
#battleInfoDialog :is(.decision,.adventure-info details,.decision-details) { background:#fff6df;border-color:#bb9768;box-shadow:none; }
#battleInfoDialog :is(summary,p,small,#gamerRules) { color:#594129; }
#battleInfoDialog details > summary { min-height:44px;font:17px BoardLabel,sans-serif; }
#battleInfoDialog .status-pill { color:#594129;background:#eadab8;border-color:#b89a6e; }
#stopDialog #confirmStop, #battleInfoDialog #stopOpen, #deleteRecordDialog #confirmDeleteRecord { --button-surface:linear-gradient(#a92f25bb,#641712dd),url('/assets/preparation/button-primary-v3.png');--button-ink:#fff1d2; }
#talkSceneDialog > .dialog-header, #reviewDialog > .dialog-header { border-bottom-color: #a57b46; }
#talkSceneDialog > .dialog-header h2, #reviewDialog > .dialog-header h2 { font-family: BoardHand, sans-serif; }

@media (max-width: 700px) { :is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog) { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 12px; } :is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog) > .dialog-header { margin: -12px -12px 12px; padding: 11px 12px; } :is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog) > .dialog-header h2 { font-size: 27px; } #settingsDialog form:first-of-type { grid-template-columns: 1fr; } #characterDialog .character-options { grid-template-columns: 1fr; } #characterDialog .character-choice.is-selected { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } #characterDialog .character-choice.is-selected .character-choice__select { grid-column: 1; grid-row: 1; grid-template-columns: 100px minmax(0, 1fr); min-height: 128px; } #characterDialog .character-choice.is-selected .character-choice__portrait { min-height: 112px; } #characterDialog .character-choice.is-selected .character-choice__details, #characterDialog .character-choice__details { grid-column: 1; grid-row: auto; } #characterDialog .character-choice.is-selected .character-choice__preset { grid-column: 1; grid-row: auto; } #characterDialog .character-choice__title strong { font-size: 24px; } }
@media (max-height: 500px) and (orientation: landscape) { :is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog) { max-height: calc(100dvh - 10px); padding: 10px; } :is(#settingsDialog, #characterDialog, #regionPicker, #loadoutPicker, #relicPicker, #skillDialog) > .dialog-header { margin: -10px -10px 9px; padding: 8px 10px; } #settingsDialog .audio-controls, #settingsDialog form { margin-top: 8px; padding: 9px; } #characterDialog .character-choice.is-selected .character-choice__select { min-height: 160px; } #characterDialog .character-choice.is-selected .character-choice__portrait { min-height: 145px; } }

/* Display lettering is for short labels; descriptions and numbers use the reading font. */
#settingsDialog :is(form,label,input,select,textarea,[role="status"]) { min-width:0;max-width:100%;overflow-wrap:anywhere; }
#characterDialog .character-choice.is-selected { grid-template-rows:auto auto; }
#characterDialog .character-choice.is-selected .character-choice__select { min-height:180px; }
#characterDialog .character-choice.is-selected .character-choice__portrait { min-height:150px;max-height:210px; }
#characterDialog .character-choice__stats { font:600 17px/1.5 var(--font-copy);word-break:keep-all; }
#characterDialog .character-choice__details > summary { min-height:44px;line-height:1.5;padding-inline:6px; }
#characterDialog .character-choice__unlock { font:13px/1.5 var(--font-copy);word-break:keep-all;overflow-wrap:anywhere; }
#characterDialog .character-choice.is-locked .character-choice__unlock { grid-column:1 / -1; }
#characterDialog .character-choice__title strong { overflow-wrap:anywhere; }
#loadoutPicker .skill-card-heading b { font:19px/1.4 BoardLabel,sans-serif; }
#loadoutPicker #skillSelectionHint { margin:0 0 8px;padding:0;border:0;background:transparent; }
#loadoutPicker :is(.skill-card-heading small,.skill-card-footer,.skill-card-footer small,.skill-card-footer b,.mastery-stages) { font-family:var(--font-copy);font-size:13px;line-height:1.5;white-space:normal;overflow-wrap:anywhere; }
#loadoutPicker .skill-card-footer { gap:6px; }
#loadoutPicker .mastery-stages { padding:0 10px; }
#loadoutPicker .mastery-stages > summary { min-height:44px;padding:8px 0;font:15px/1.5 var(--font-copy); }
#relicPicker :is(#missingRelics,#relicRules) { margin-top:12px;padding:10px;border:1px solid #c2ab88;background:#fff8e5; }
#relicPicker :is(#missingRelics,#relicRules) > summary { min-height:44px;color:#63492c;font:15px/1.5 var(--font-copy); }
#relicPicker #relicCollectionHint { font:14px/1.6 var(--font-copy); }
#relicPicker #relicRulesText { color:#594129;font:14px/1.6 var(--font-copy);overflow-wrap:anywhere; }
@media(max-width:700px) {
  #characterDialog .character-choice.is-selected .character-choice__select { min-height:120px;grid-template-columns:84px minmax(0,1fr); }
  #characterDialog .character-choice.is-selected .character-choice__portrait { min-height:96px;max-height:140px; }
  #characterDialog .character-choice__facts { grid-template-columns:80px minmax(0,1fr); }
}