/* stranger-art.css: layout for www/stranger-art.js (the stranger art pass, 14 Nov 2026).
   Art first: pictures carry each step, one short label each, one next action. */
.ka-room { display: grid; gap: var(--s3, 1.5rem); margin-top: var(--s3, 1.5rem); }
.ka-panel {
  padding: var(--s2, 1rem);
  border: 1px solid var(--line, #1e2a3a);
  border-radius: var(--radius, 12px);
  background: linear-gradient(180deg, #0b1220e6, #080d15f2);
}
.ka-head { display: flex; align-items: baseline; gap: var(--s1, .5rem); margin-bottom: var(--s2, 1rem); }
.ka-head h2 { margin: 0; }
.ka-panel h3 { margin: var(--s2, 1rem) 0 var(--s1, .5rem); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #9aa4b2; }
.ka-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .15rem .5rem; border-radius: 99px; border: 1px solid var(--accent, #3fd0ff); color: var(--accent, #3fd0ff);
}
.ka-strip {
  display: grid; grid-auto-flow: column; gap: var(--s1, .5rem);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem;
  grid-auto-columns: minmax(7.5rem, 9rem);
}
.ka-strip.ka-wide { grid-auto-columns: minmax(12rem, 16rem); }
.ka-strip.ka-roles { grid-auto-columns: minmax(7rem, 8rem); }
.ka-tile {
  margin: 0; scroll-snap-align: start; display: grid; gap: .3rem;
  text-decoration: none; color: inherit; font-size: .78rem; font-weight: 600;
}
.ka-tile img {
  width: 100%; border-radius: 10px; border: 1px solid #ffffff1a; background: #05080e;
  aspect-ratio: 2 / 3; object-fit: cover;
}
.ka-wide .ka-tile img { aspect-ratio: 16 / 10; }
.ka-roles .ka-tile img { aspect-ratio: 1; }
a.ka-tile:hover img { border-color: var(--accent, #3fd0ff); }
.ka-fan .ka-tile img { transition: transform .2s; }
.ka-fan .ka-tile:hover img { transform: translateY(-4px) rotate(-1deg); }
.ka-hero { width: 100%; max-height: 22rem; object-fit: cover; border-radius: 10px; margin-bottom: var(--s2, 1rem); }
.ka-line { color: #9aa4b2; font-size: .85rem; margin: var(--s1, .5rem) 0; }
.ka-receipt {
  display: grid; grid-template-columns: 8rem 1fr; gap: var(--s2, 1rem); align-items: center;
  padding: var(--s1, .5rem); margin-bottom: var(--s2, 1rem);
  border: 1px dashed #3fd0ff66; border-radius: 10px; background: #08131ccc;
}
.ka-receipt-art { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; }
.ka-receipt-body { display: grid; gap: .25rem; font-size: .9rem; }
.ka-receipt-body strong { letter-spacing: .12em; color: var(--accent, #3fd0ff); }
.ka-receipt-line::before { content: "✓ "; color: #4fe39b; }
.ka-programs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s1, .5rem); }
.ka-program {
  display: grid; gap: .35rem; padding: var(--s1, .5rem) var(--s2, 1rem);
  border: 1px solid #ffffff1a; border-radius: 10px; background: #0b1424;
}
.ka-scope { font-size: .8rem; color: #9aa4b2; }
.ka-next, .ka-nation {
  display: grid; grid-template-columns: 4.5rem 1fr; grid-template-rows: auto auto; column-gap: var(--s2, 1rem);
  align-items: center; margin-top: var(--s2, 1rem); padding: .5rem; text-decoration: none; color: inherit;
  border: 1px solid var(--accent, #3fd0ff); border-radius: 10px; background: #0b1a2a;
}
.ka-next img, .ka-nation img { grid-row: 1 / 3; width: 4.5rem; height: 3rem; object-fit: cover; border-radius: 6px; }
.ka-nation img { object-fit: contain; background: #05080e; }
.ka-next-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #9aa4b2; }
.ka-board { margin-top: var(--s2, 1rem); }
.engine-fallback .ka-panel { margin-top: var(--s2, 1rem); }

/* feat/one-app-works (14 Nov 2026): Most Wanted posters, the hunter identity card, the arsenal. */
.ka-poster img { aspect-ratio: 16 / 10; }
.ka-poster strong { font-size: .85rem; }
.ka-poster-line { font-size: .74rem; font-weight: 400; color: #9aa4b2; }
.ka-event-art { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 8px; }
.ka-hero-short { max-height: 12rem; }
.ka-actions { display: flex; flex-wrap: wrap; gap: var(--s1, .5rem); margin-top: var(--s2, 1rem); }
.ka-id { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s2, 1rem); align-items: start; }
.ka-id-face { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 2px solid var(--accent, #3fd0ff); }
.ka-id-body { display: grid; gap: .35rem; }
.ka-id-name { font-size: 1.25rem; letter-spacing: .04em; }
.ka-id-arch { color: #ffd76a; font-size: .85rem; font-weight: 600; }
.ka-id-nation { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; }
.ka-id-nation img { width: 1.8rem; height: 1.8rem; object-fit: contain; }
.ka-slots { display: grid; grid-template-columns: repeat(6, 2.6rem); gap: .3rem; }
.ka-slot { position: relative; width: 2.6rem; height: 2.6rem; border-radius: 8px; border: 1px dashed #ffffff33; background: #05080e; overflow: hidden; }
.ka-slot.on { border: 1px solid var(--accent, #3fd0ff); }
.ka-slot img { width: 100%; height: 100%; object-fit: cover; }
.ka-slot em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ka-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: var(--s2, 1rem); }
.ka-chip { font: inherit; font-size: .75rem; padding: .3rem .7rem; border-radius: 99px; border: 1px solid #ffffff33; background: transparent; color: inherit; cursor: pointer; }
.ka-chip[aria-pressed="true"] { border-color: var(--accent, #3fd0ff); color: var(--accent, #3fd0ff); }
.ka-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s1, .5rem); }
.ka-item { display: grid; gap: .3rem; align-content: start; padding: .5rem; border: 1px solid #ffffff1a; border-radius: 10px; background: #0b1424; font-size: .82rem; }
.ka-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.ka-item-does { color: #9aa4b2; font-size: .76rem; }
.ka-item-lock { font-size: .74rem; color: #ffd76a; }
.ka-equip { font: inherit; font-size: .78rem; font-weight: 700; padding: .35rem; border-radius: 8px; border: 1px solid var(--accent, #3fd0ff); background: #0b1a2a; color: var(--accent, #3fd0ff); cursor: pointer; }
.ka-equip.on { background: var(--accent, #3fd0ff); color: #04121c; }
.ka-equip:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) { .ka-id { grid-template-columns: 5rem 1fr; } .ka-slots { grid-template-columns: repeat(6, 2.1rem); } .ka-slot { width: 2.1rem; height: 2.1rem; } }
.ka-wanted { margin-top: var(--s2, 1rem); }