/* V126: one quiet, readable shell for the player's earned collection. Combat
   controls and game rules keep their existing independent styles and behavior. */
#app {
  --journey-ink:#09191f; --journey-surface:#112a30; --journey-line:#577a754f;
  --journey-paper:#ede3c5; --journey-muted:#a4bbb5; --journey-jade:#8fd0b5; --journey-gold:#dcbf80;
}
#app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu) {
  display:flex; flex-direction:column; background:var(--journey-ink); color:var(--journey-paper);
  background-image:radial-gradient(ellipse at 85% 0,#274b4733,transparent 48%);
  color-scheme:dark;
}
#app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu)>.panel-head {
  position:relative; flex:none; min-height:76px; padding:calc(14px + var(--safe-t)) 18px 14px;
  gap:12px; background:#0b2026f5; border-bottom:1px solid var(--journey-line); box-shadow:none;
}
#app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu)>.panel-head h2 {
  min-width:0; margin:0; font:800 23px/1.35 var(--serif); letter-spacing:-.04em; color:var(--journey-paper);
}
#app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu)>.panel-head .btn-icon {
  flex:0 0 44px; width:44px; height:44px; border:1px solid #78a89c70; border-radius:50%;
  background:#153139; color:#ede3c5; box-shadow:none; font:400 24px var(--sans);
}
#app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu)>.panel-body {
  position:relative; inset:auto; flex:1; min-height:0; width:100%; overflow-y:auto; overflow-x:hidden;
  padding:18px 16px calc(26px + var(--safe-b)); scroll-padding:16px; overscroll-behavior:contain;
}
#app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu) :is(button,summary,a,input,select):focus-visible {
  outline:3px solid var(--journey-jade); outline-offset:3px;
}
#app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu) :is(button,summary) {touch-action:manipulation}
#app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu) .btn {box-shadow:none;min-height:44px}
#app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu) .btn-primary {
  background:linear-gradient(120deg,#b3e2c4,#7cbfa8); color:#0c2928; border:1px solid #b0e2c7;
  border-radius:12px; text-shadow:none; font-family:var(--sans); font-weight:700;
}
#app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu) button:disabled {opacity:.55;cursor:default}
#app #screen-menu .play-menu-grid {display:flex;flex-direction:column;gap:24px;padding-top:22px}
#app .play-menu-section {display:grid;grid-template-columns:1fr 1fr;gap:10px}
#app .play-menu-section h3 {grid-column:1/-1;margin:0 0 4px;font:700 13px/1.5 var(--sans);letter-spacing:.08em;color:var(--journey-muted)}
#app .play-menu-grid .play-menu-card {display:flex;flex-direction:row;align-items:center;gap:12px;min-height:96px;padding:14px 12px;border:1px solid var(--journey-line);border-radius:15px;background:linear-gradient(135deg,#19383d,#10282e);color:var(--journey-paper)}
#app .play-menu-card img {width:44px;height:54px;object-fit:contain;flex:none}
#app .play-menu-card b {font:700 16px/1.4 var(--sans)}
#app .play-menu-card small {font:11px/1.6 var(--sans);color:var(--journey-muted);margin-top:4px;word-break:keep-all}
#app .play-menu-card[data-open=companions] {grid-column:1/-1;min-height:132px;background:linear-gradient(90deg,#102b30f5,#102b30ac 62%,#102b3011),url('../assets/img/ui-v126/sanctuary.webp') center 54%/cover}
#app .play-menu-card[data-open=companions] img {height:88px;width:74px}
#app .play-menu-card[data-open=companions] b {font:800 24px/1.5 var(--serif)}
#app .play-menu-card[data-open=companions] small {font-size:12px}
#app .play-tabbar {background:#0b2026f7;border-top:1px solid var(--journey-line);padding:7px 8px calc(7px + var(--safe-b));gap:5px}
#app .play-tabbar .tab {font:600 12px/1.3 var(--sans);color:#aec5bd;min-height:48px;border-radius:12px}
#app .play-tabbar .tab.active {background:#24463e;color:#e9f4dd;box-shadow:inset 0 0 0 1px #739b8270}
#app .hunt-screen {background:var(--journey-ink)}
#app .hunt-screen .hunt-scroll {max-width:780px;width:100%;margin-inline:auto}
#app .hunt-screen .hunt-header h1 {font-size:24px}
#app .hunt-screen .hunt-stage {border-color:var(--journey-line);border-radius:18px}
#app .hunt-screen .hunt-journey {display:grid;grid-template-columns:1fr;gap:9px;border-top:1px solid var(--journey-line)}
#app .hunt-screen .hunt-journey h3 {font:700 18px/1.4 var(--serif);color:var(--journey-paper)}
#app .hunt-screen .hunt-journey-step {display:flex;flex-direction:row;align-items:center;min-height:84px;gap:14px;padding:12px;border:1px solid var(--journey-line);border-radius:14px;background:#122a30;color:var(--journey-paper);text-align:left}
#app .hunt-screen .hunt-journey-step img {position:static;flex:none;width:52px;height:58px;object-fit:contain;border:0;background:none;border-radius:0;mask-image:none;opacity:1}
#app .hunt-screen .hunt-journey-copy {flex:1;min-width:0}
#app .hunt-screen .hunt-journey-copy b {font:700 15px/1.5 var(--sans)}
#app .hunt-screen .hunt-journey-copy small {display:block;font:11px/1.6 var(--sans);color:var(--journey-muted);margin-top:3px}
#app .hunt-screen .hunt-journey-arrow {font-size:25px;color:var(--journey-jade)}
#app .hunt-screen .hunt-go {background:linear-gradient(120deg,#b3e2c4,#7cbfa8);color:#0c2928;border-color:#b0e2c7}
#app .hunt-screen .hunt-loot-chip {font-size:12px}
#app .hunt-screen .hunt-options {font-size:11px}
#app .hunt-screen .hunt-options label {min-height:44px}
#app .hunt-screen .hunt-nav {background:#0b2026;border-color:var(--journey-line)}
#app #screen-codex .panel-head {flex-wrap:wrap;gap:5px 12px}
#app #screen-codex .panel-head h2 {flex:1}
#app #screen-codex .panel-head #codex-count {order:3;flex-basis:100%;color:var(--journey-muted);font:11px/1.5 var(--sans);margin-top:-4px}
#app #screen-codex .panel-intro {color:var(--journey-muted);font:12px/1.7 var(--sans)}
#app #screen-codex .codex-filters {display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
#app #screen-codex .codex-filters label {display:flex;align-items:center;gap:7px;min-height:44px;font-size:12px}
#app #screen-codex .codex-filters select {min-height:44px;background:#16333a;border:1px solid var(--journey-line);border-radius:10px;color:var(--journey-paper);padding:7px}
#app #screen-codex .collection-showcase {padding:14px;margin:0 0 18px;border:1px solid var(--journey-line);border-radius:14px;background:#122b31}
#app #screen-codex .collection-showcase h3 {font:700 18px/1.4 var(--serif);margin:0 0 6px}
#app #screen-codex .collection-showcase p {margin:0 0 10px;color:var(--journey-muted);font-size:12px}
#app #screen-codex .collection-showcase .btn {font:600 12px/1.4 var(--sans);border-radius:10px;margin:0 5px 0 0}
#app #screen-codex .codex-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
#app #screen-codex .dossier {border:1px solid var(--journey-line);background:linear-gradient(160deg,#18353c,#10262e);border-radius:16px;overflow:hidden;box-shadow:none}
#app #screen-codex .dossier.recorded {border-color:#b0c48f85}
#app #screen-codex .dossier-art {height:185px;min-height:0;background:radial-gradient(ellipse at 50% 55%,#69978622,transparent 70%)}
#app #screen-codex .dossier-art .portrait {position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#app #screen-codex .dossier-unrecorded {position:absolute;inset:auto 6px 5px;padding:5px;border-radius:5px;background:#09191fed;color:#d3dfd2;font:10px/1.45 var(--sans);text-align:center;pointer-events:none}
#app #screen-codex .dossier .model-open {bottom:48px}
#app #screen-codex .dossier .codex-body {padding:12px}
#app #screen-codex .dossier-name {font:800 19px/1.4 var(--serif);color:var(--journey-paper);margin:8px 0}
#app #screen-codex .portrait-forms {display:flex;gap:5px;flex-wrap:wrap}
#app #screen-codex .portrait-forms button {min-height:44px;padding:5px 6px;font-size:10px;border-radius:8px}
#app #screen-codex .model-open {min-height:44px;border-radius:9px;font-size:11px}
#app #screen-codex .dossier-story summary {min-height:44px;display:flex;align-items:center;font-size:11px;color:var(--journey-jade)}
#app #screen-codex .dossier-story summary::before {content:'+';margin-right:8px}
#app #screen-codex .dossier-story[open] summary::before {content:'−'}
#app #screen-codex .dossier-story p {font:12px/1.7 var(--sans);color:#c4d4cc}
#app #screen-map #spot-sheet {background:linear-gradient(150deg,#18373cf5,#0b232bf9);color:var(--journey-paper);border:1px solid #779b8266;border-radius:22px;padding:12px 18px 18px;box-shadow:0 14px 60px #020b12aa}
#app #screen-map #spot-sheet::before {display:none}
#app #screen-map .sheet-handle {background:#9bbdaf66;width:34px;height:3px;margin:0 auto 14px}
#app #screen-map .sheet-title h3 {font:800 21px/1.4 var(--serif);color:var(--journey-paper)}
#app #screen-map :is(.sheet-title small,.sheet-desc) {color:var(--journey-muted);line-height:1.7}
#app #screen-map .sheet-status {color:var(--journey-gold);padding:10px 0;font:600 13px/1.6 var(--sans)}
#app #screen-map .sheet-actions .btn {min-height:46px;border:1px solid #7ba59d55;border-radius:12px;background:#21423e;color:var(--journey-paper);box-shadow:none;font:600 13px/1.4 var(--sans)}
#app #screen-map .sheet-actions .btn-primary {background:#a5d5b7;color:#0d2a29}
#app .loot-presentation {border-top:1px solid var(--journey-line);padding-top:14px}
#app .loot-presentation .loot-heading {font:700 18px/1.45 var(--serif);letter-spacing:0;color:var(--journey-paper)}
#app .loot-presentation .loot-featured {background:radial-gradient(ellipse at 50% 22%,#aacf951c,transparent 65%),#112a30;border-radius:18px;padding:16px}
#app .loot-presentation .loot-featured .loot-art {height:116px}
#app .loot-presentation .loot-featured .loot-name {font:800 22px/1.45 var(--serif)}
#app .loot-presentation .loot-card {border-radius:13px;border-color:#90b3a34f;background-color:#10282e}
#app .loot-presentation :is(.loot-inspect,.loot-skip,.loot-detail summary) {min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-family:var(--sans)}
#app .loot-presentation .loot-inspect {background:#a0d2b6;color:#102d2a;border:1px solid #b5ddc6;font-weight:700}
#app .loot-presentation .loot-detail {border-top:1px solid var(--journey-line);margin-top:8px}
#app .loot-presentation .loot-detail summary {color:var(--journey-jade);justify-content:flex-start}
#app #capture-panel[data-stage=complete] {border-color:#93baa56b;background:radial-gradient(ellipse at 50% 20%,#375c4844,transparent 70%),#0c242bf7;border-radius:24px;max-height:calc(100dvh - 32px);overflow-y:auto;box-shadow:0 20px 80px #010e15c0}
#app #capture-panel[data-stage=complete] #capture-title {font:800 25px/1.4 var(--serif);color:var(--journey-paper)}
#app #capture-panel[data-stage=complete] #btn-capture-done {min-height:50px;width:100%;border-radius:12px;background:#9dceae;color:#102d2a;border:1px solid #b5dbc0;box-shadow:none;font:700 14px/1.5 var(--sans)}
#app #capture-panel[data-stage=complete] #btn-capture-return {flex:none;min-height:44px;width:100%;border:0;border-radius:10px;background:transparent;box-shadow:none;color:#bdd0c4;font:600 12px/1.5 var(--sans)}
#app #screen-ar #capture-panel[data-stage=complete] {padding:20px 16px 12px;gap:8px;border-radius:22px;overflow:hidden;box-shadow:0 18px 70px #010e15c0}
#app #screen-ar #capture-panel[data-stage=complete]::before,
#app #screen-ar #capture-panel[data-stage=complete]::after {display:none}
#app #screen-ar #capture-panel[data-stage=complete] #capture-title {font:800 22px/1.35 var(--serif);margin:0;color:var(--journey-paper)}
#app #screen-ar #capture-panel[data-stage=complete] #capture-desc {font:12px/1.65 var(--sans);color:var(--journey-muted);margin:0;max-height:none}
#app #screen-ar #capture-panel[data-stage=complete] .capture-result-hero {display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px 12px;align-items:center;flex:none}
#app #screen-ar #capture-panel[data-stage=complete] .capture-result-art {grid-column:1;grid-row:1;width:112px;height:132px;min-height:0;border:0;border-radius:16px;background:radial-gradient(ellipse,#77bc8a22,transparent 70%);box-shadow:none}
#app #screen-ar #capture-panel[data-stage=complete] .capture-result-art::before,
#app #screen-ar #capture-panel[data-stage=complete] .capture-result-art::after {display:none}
#app #screen-ar #capture-panel[data-stage=complete] #capture-spirit-art {width:100%;height:100%;object-fit:contain;animation:none;filter:drop-shadow(0 5px 12px #030e1299)}
#app #screen-ar #capture-panel[data-stage=complete] .capture-result-awards {grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:6px;margin:0}
#app #screen-ar #capture-panel[data-stage=complete] .capture-result-award {display:flex;justify-content:center;gap:7px;min-height:42px;padding:7px;border-radius:10px;background:#173a36;border:1px solid #789c7f55;box-shadow:none;font:600 11px/1.4 var(--sans);color:var(--journey-paper)}
#app #screen-ar #capture-panel[data-stage=complete] .capture-result-award::before {flex:0 0 24px;width:24px;height:28px}
#app #screen-ar #capture-panel[data-stage=complete] .capture-award-amount {font:800 20px/1.2 var(--sans)}
#app #screen-ar #capture-panel[data-stage=complete] .capture-bond-progress {grid-column:1/-1;margin:0;padding:10px;border:1px solid #7497854f;background:#10282d;box-shadow:none}
#app #screen-ar #capture-panel[data-stage=complete] .capture-bond-line {flex-wrap:wrap;gap:4px;text-align:left}
#app #screen-ar #capture-panel[data-stage=complete] .capture-bond-line span {text-align:left;font:11px/1.4 var(--sans);color:var(--journey-muted)}
#app #screen-ar #capture-panel[data-stage=complete] .loot-presentation {flex:1 1 180px;min-height:72px;overflow:auto;border-top:1px solid var(--journey-line);padding:12px 2px 8px;margin:0}
#app #screen-ar #capture-panel[data-stage=complete] .loot-heading {font:700 15px/1.5 var(--sans);letter-spacing:0;color:var(--journey-paper);text-align:left}
#app #screen-ar #capture-panel[data-stage=complete] .loot-heading::before,
#app #screen-ar #capture-panel[data-stage=complete] .loot-heading::after {display:none}
#app #screen-ar #capture-panel[data-stage=complete] .loot-card {border:1px solid #91b0984f;background:#112b31;box-shadow:none}
#app #screen-ar #capture-panel[data-stage=complete] .loot-featured {grid-column:1/-1;display:grid;grid-template-columns:68px minmax(0,1fr);gap:4px 10px;padding:12px;min-height:110px}
#app #screen-ar #capture-panel[data-stage=complete] .loot-featured>* {grid-column:2}
#app #screen-ar #capture-panel[data-stage=complete] .loot-featured .loot-art {display:block;grid-column:1;grid-row:1/6;width:68px;height:84px;max-width:none;align-self:center}
#app #screen-ar #capture-panel[data-stage=complete] .loot-featured .loot-name {font:700 17px/1.4 var(--serif);text-align:left;margin:0}
#app #screen-ar #capture-panel[data-stage=complete] .loot-featured :is(.loot-new,.loot-rarity,.loot-quantity) {text-align:left;margin:0;justify-self:start}
#app #screen-ar #capture-panel[data-stage=complete] .loot-featured :is(p,.loot-detail,.loot-inspect) {grid-column:1/-1}
#app #screen-ar #capture-panel[data-stage=complete] .loot-inspect {min-height:44px;border-radius:10px;background:#9dceae;color:#102d2a}
#app #screen-ar #capture-panel[data-stage=complete] #btn-capture-done {text-shadow:none}
@media(min-width:760px){
  #app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu)>.panel-body {padding-inline:max(24px,calc((100% - 850px)/2))}
  #app #screen-menu .play-menu-section {grid-template-columns:repeat(3,minmax(0,1fr))}
  #app #screen-menu .play-menu-card[data-open=companions] {grid-column:span 1}
  #app #screen-codex .codex-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  #app .hunt-screen .hunt-journey {grid-template-columns:1fr 1fr}
  #app .hunt-screen .hunt-journey h3 {grid-column:1/-1}
}
@media(max-width:360px){
  #app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu)>.panel-head {padding-inline:14px}
  #app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu)>.panel-head h2 {font-size:21px}
  #app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu)>.panel-body {padding-inline:12px}
  #app .play-menu-grid .play-menu-card {gap:8px;padding:12px 9px}
  #app .play-menu-card img {width:32px}
  #app .play-menu-card b {font-size:14px}
  #app #screen-codex .dossier-art {height:152px}
  #app #screen-codex .dossier .codex-body {padding:9px}
  #app #screen-codex .codex-grid {gap:8px}
}
@media(max-height:500px) and (orientation:landscape){
  #app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu)>.panel-head {min-height:62px;padding-block:8px}
  #app #screen-codex .panel-head #codex-count {order:0;flex-basis:auto;margin:0}
  #app #screen-ar #capture-panel[data-stage=complete] {display:flex;left:50%;top:50%;width:min(760px,calc(100% - 24px));height:calc(100dvh - 20px);padding:14px;overflow-y:auto}
  #app #screen-ar #capture-panel[data-stage=complete] .capture-result-hero {grid-template-columns:70px 1fr 1.3fr;width:100%;gap:10px}
  #app #screen-ar #capture-panel[data-stage=complete] .capture-result-art {width:70px;height:72px}
  #app #screen-ar #capture-panel[data-stage=complete] .capture-bond-progress {grid-column:3;grid-row:1}
  #app #screen-ar #capture-panel[data-stage=complete] .loot-presentation {min-height:160px;flex:none}
  #app #screen-ar #capture-panel[data-stage=complete] #btn-capture-done {min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  #app :is(#screen-inventory,#screen-companions,#screen-community,#screen-codex,#screen-menu) {transition:none;scroll-behavior:auto}
}
/* V126 independent visual review refinements. */
#app #screen-inventory .inventory-intro {min-height:86px;padding:12px 14px}
#app #screen-inventory .inventory-intro p {display:none}
#app #screen-inventory .inventory-overview {padding:10px 12px}
#app #screen-inventory .inventory-loadout-details>summary {padding-block:10px}
#app #screen-inventory .inventory-bag-heading {margin-top:10px}
#app #screen-inventory .inventory-goal {margin-top:16px}
#app #screen-inventory .inventory-card-hint {color:#bfd3c5;font:11px/1.4 var(--sans)}
#app #screen-companions .companions-unlock-note {display:block;color:#c2d6c8;font:12px/1.6 var(--sans);margin:8px 0}
#app .loot-receipt-items {color:#c5d7ca;font:12px/1.65 var(--sans);word-break:keep-all;overflow-wrap:break-word;text-align:left}
#app #screen-ar #capture-panel[data-stage=complete] #capture-desc {word-break:keep-all;font-size:11px}
#app #screen-ar #capture-panel[data-stage=complete] .loot-inspect {background:#20483f;color:#d8eadb;border:1px solid #90b4a066}
@media(max-width:360px){
}
#app #screen-companions .companions-roster-card:only-child {grid-column:1/-1;display:flex;align-items:center;gap:16px;text-align:left;padding:8px 14px}
#app #screen-companions .companions-roster-card:only-child .companions-thumb {width:56px;height:62px}
@media(max-height:700px) and (orientation:portrait){
 #app #screen-ar #capture-panel[data-stage=complete] {padding:14px 12px 8px;gap:6px}
 #app #screen-ar #capture-panel[data-stage=complete] .capture-result-hero {grid-template-columns:64px 1fr;gap:5px 10px}
 #app #screen-ar #capture-panel[data-stage=complete] .capture-result-art {width:64px;height:70px}
 #app #screen-ar #capture-panel[data-stage=complete] #capture-title {font-size:20px}
 #app #screen-ar #capture-panel[data-stage=complete] .capture-bond-progress {padding:7px}
}
@media(max-height:500px) and (orientation:landscape){
 #app #screen-ar #capture-panel[data-stage=complete] {display:grid;grid-template-columns:minmax(240px,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto minmax(100px,1fr) 44px 44px;gap:6px 16px;overflow:hidden}
 #app #screen-ar #capture-panel[data-stage=complete] #capture-title {grid-column:1/-1}
 #app #screen-ar #capture-panel[data-stage=complete] #capture-desc {grid-column:1;grid-row:2}
 #app #screen-ar #capture-panel[data-stage=complete] .capture-result-hero {grid-column:1;grid-row:3;grid-template-columns:60px 1fr;gap:4px 8px}
 #app #screen-ar #capture-panel[data-stage=complete] .capture-result-art {width:60px;height:64px}
 #app #screen-ar #capture-panel[data-stage=complete] .capture-bond-progress {grid-column:1/-1;grid-row:2;padding:6px}
 #app #screen-ar #capture-panel[data-stage=complete] .loot-presentation {grid-column:2;grid-row:2/6;min-height:0;height:100%;max-height:100%;border-top:0;border-left:1px solid var(--journey-line);padding:0 0 0 12px}
 #app #screen-ar #capture-panel[data-stage=complete] #btn-capture-done {grid-column:1;grid-row:4;min-height:44px;margin:0}
 #app #screen-ar #capture-panel[data-stage=complete] #btn-capture-return {grid-column:1;grid-row:5;margin:0}
}
#app #screen-ar #capture-panel[data-stage=complete] .loot-presentation {scrollbar-width:thin;scrollbar-color:#83b8a0 #18373b;scrollbar-gutter:stable}
#app #screen-ar #capture-panel[data-stage=complete] .loot-summary::after {content:' · 위아래로 상세 보기';color:#acc6b7;font-size:11px}
#app #screen-ar #capture-panel[data-stage=complete] .loot-presentation::-webkit-scrollbar {width:5px}
#app #screen-ar #capture-panel[data-stage=complete] .loot-presentation::-webkit-scrollbar-thumb {background:#83b8a0;border-radius:4px}