/* Illustrated assets and shared components. Responsive layout lives in tablet.css. */
@font-face {
  font-family: 'Jua'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/jua-korean-400.woff2') format('woff2');
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF, U+3000-303F, U+FF00-FFEF;
}
@font-face {
  font-family: 'Jua'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/jua-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2300-25FF, U+2600-26FF, U+2700-27BF;
}
.buddy-pose {
  display: inline-block; width: 180px; aspect-ratio: 362/272; flex-shrink: 0;
  background: url('/assets/v2/buddy-poses-clean.webp') var(--buddy-x) var(--buddy-y)/400% 400% no-repeat;
  filter: drop-shadow(0 6px 4px #164a4926);
}
.buddy-pose.small { width: 70px; }
.prop-art {
  display: inline-block; width: 110px; height: 110px; flex-shrink: 0;
  background: url('/assets/v2/equipment-atlas.webp') var(--prop-x) var(--prop-y)/300% 300% no-repeat;
}
.workshop-prop {
  display: inline-block; width: 160px; height: 160px;
  background: url('/assets/v2/workshop-atlas.webp') var(--work-x) var(--work-y)/300% 200% no-repeat;
}
.journey-paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.journey-paths polyline { fill: none; stroke: #fff2ba; stroke-width: 4; stroke-linecap: round; opacity: 0; }
.journey-paths polyline.open { opacity: .75; stroke-dasharray: 8 6; animation: pathflow 12s linear infinite; }
.journey-traveler { position: absolute; transform: translate(-100%,-95%); pointer-events: none; z-index: 3; }
.journey-traveler .buddy-pose { width: 100px; }
.world-status { display: none; }
.guide .buddy-pose { width: 64px; }
.companion-panel { display: flex; align-items: center; }
.companion-talk { background: var(--color-panel); border: 2px solid var(--color-border-soft); border-radius: var(--radius-md); padding: var(--space-md); }
.companion-talk b { color: var(--color-primary); }
.part-label { font-size: 24px; fill: var(--color-text-main); font-weight: 750; paint-order: stroke; stroke: #fffbe9; stroke-width: 5px; stroke-linejoin: round; }
.part.active { filter: drop-shadow(0 0 7px #269eae); }
.trial-history { display: flex; gap: var(--space-sm); flex-wrap: wrap; padding-top: var(--space-sm); }
.trial-chip { padding: 8px 12px; background: var(--color-primary-soft); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); font-size: 16px; }
.trial-chip.good { background: #e4f3e4; border-color: #81ac91; }
.workshop-layout > .guide, .final-layout > .guide, .activity-area > .guide { display: none; }
.final-research { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin: var(--space-sm) 0; }
.final-research > div { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); padding: var(--space-sm); font-size: 16px; line-height: 1.5; }
.final-research b { display: block; font-size: 16px; color: var(--color-primary); }
.final-rig { min-height: 250px; }
.final-core { width: 160px; height: 200px; position: relative; display: grid; place-items: center; }
.final-core .workshop-prop { width: 190px; height: 190px; filter: grayscale(.7); }
.final-core.powered .workshop-prop { filter: drop-shadow(0 0 24px #4be9ca); }
.final-core > b { position: absolute; bottom: 0; font-size: 16px; }
.flow-connection { height: 22px; min-width: 45px; border: 4px solid #98b5ad; border-radius: 12px; background: #edf1e8; position: relative; }
.flow-connection.connected { background: #89dbc9; border-color: #529c88; }
.flow-connection.connected::after { content: '→'; position: absolute; top: -21px; left: 10px; color: #277c69; font-size: 30px; }
.reward-character { display: flex; justify-content: center; align-items: center; }
.reward-character .buddy-pose { width: 210px; }
.reward-character .prop-art { width: 130px; height: 130px; }
.reward-proof { padding: 12px 16px; border: 1px solid #a7c5ab; background: #edf5e8; border-radius: var(--radius-sm); font-size: 18px; }
.ending-shell { background: linear-gradient(#eff8e5d9,#eaf7e3eb), url('/assets/v2/research-island-v3.webp') center/cover; }
.ending-core { width: 340px; height: 340px; filter: drop-shadow(0 0 40px #62f6bc); }
.ending-illustration > .buddy-pose { position: absolute; bottom: 10px; right: 0; width: 220px; }
.ending-caption { font-size: 18px; max-width: 80%; margin-top: var(--space-lg); }
.ending-discoveries { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.ending-discoveries > span { display: flex; align-items: center; gap: var(--space-xs); background: var(--color-panel); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 16px; opacity: .6; }
.ending-discoveries > span.earned { opacity: 1; }
.ending-discoveries .prop-art { width: 40px; height: 40px; }
.notebook-record { background: var(--color-panel); }
.notebook-record p { font-size: 18px; }
.workshop-keyboard { border-top: 1px solid var(--color-border-soft); border-bottom: 1px solid var(--color-border-soft); padding: var(--space-xs) 0; margin: var(--space-xs) 0; }
.workshop-keyboard summary { min-height: 48px; cursor: pointer; display: flex; align-items: center; font-size: 16px; font-weight: 750; }
.workshop-keyboard summary::before { content: '＋'; margin-right: var(--space-sm); }
.workshop-keyboard[open] summary::before { content: '−'; }
.workshop-keyboard select { width: 100%; margin: 8px 0; }
.workshop-keyboard .part-arrows { margin-bottom: var(--space-sm); }
.control-panel [data-action='core-cooling'] .prop-art { width: 48px; height: 48px; }
.collector-flow { animation: pathflow 4s linear infinite; }
.loading-screen { min-height: 100svh; display: grid; place-items: center; padding: 24px; text-align: center; font-family: var(--font-display); font-size: 26px; color: var(--color-primary); background: #f5efdc; }
@keyframes pathflow { to { stroke-dashoffset: -140; } }