/* Compact browsing, with the full record available in its dialog. */
html { scroll-padding-top: calc(var(--ik-release-height) + 16px + env(safe-area-inset-top, 0px)); }
.sidebar { top: calc(var(--ik-release-height) + env(safe-area-inset-top, 0px)); height: calc(100dvh - var(--ik-release-height) - env(safe-area-inset-top, 0px)); }
.filter-panel { margin-top: 12px; }
.filter-panel > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; width: fit-content; min-height: 44px; color: #d6cba9; font-size: 12px; }
.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-panel > summary::after { content: '⌄'; margin-left: 7px; color: #bda373; }
.filter-panel[open] > summary::after { content: '⌃'; }
.filter-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 5px; color: #101921; background: #dbbf83; font-size: 11px; }
.filter-panel .filters { margin-top: 5px; }
.mobile-menu { position: relative; display: none; }
.mobile-menu > summary { list-style: none; cursor: pointer; display: grid; place-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid #c3a56e44; border-radius: 8px; color: #d9c394; }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu-panel { position: absolute; top: 50px; right: 0; z-index: 35; width: 230px; padding: 6px; background: #172a36; border: 1px solid #7f8a7355; border-radius: 10px; box-shadow: 0 10px 30px #0007; }
.mobile-menu-panel button { display: block; width: 100%; min-height: 44px; text-align: left; border: 0; background: transparent; font-size: 13px; padding: 10px; }
.mobile-menu-panel button:hover { background: #243b45; }
.pages button { min-width: 44px; min-height: 44px; }
.dialog-close { width: 44px; height: 44px; font-size: 24px; }
.loot-row { min-height: 56px; }
:is(button, summary, input, select, a):focus-visible { outline: 2px solid #e4c585; outline-offset: 3px; }
@media (max-width: 820px) {
  .shell { min-height: calc(100dvh - var(--ik-release-height)); }
  .sidebar { position: static; height: auto; display: block; padding: 12px 18px 0; background: transparent; border: 0; }
  .brand { width: fit-content; gap: 8px; }
  .brand .sigil { font-size: 22px; }
  .brand strong { font-size: 16px; letter-spacing: .09em; }
  .brand small { font-size: 8px; letter-spacing: .25em; }
  .sidebar nav { position: fixed; z-index: 45; inset: auto 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px max(10px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); background: #101e28; border-top: 1px solid #b4a57933; box-shadow: 0 -5px 22px #0003; }
  .sidebar nav button { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; min-height: 46px; margin: 0; padding: 6px; font-size: 12px; border-radius: 8px; white-space: normal; }
  .sidebar nav button > span { display: inline; font-size: 17px; }
  .sidebar nav button b { display: inline; font-size: 10px; font-weight: 400; opacity: .7; }
  main { padding: 0 18px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .topbar { height: auto; min-height: 44px; border: 0; justify-content: flex-end; margin-top: -43px; margin-bottom: 12px; }
  .topbar > span, #help { display: none; }
  .topbar > div { display: flex; gap: 6px; align-items: center; }
  #reload { min-height: 44px; font-size: 12px; padding-inline: 10px; }
  #installApp { display: none; }
  .mobile-menu { display: block; }
  .heading { display: flex; align-items: center; gap: 15px; margin: 12px 0; padding: 18px; background-position: center; border-radius: 12px; }
  .heading > div:first-child { flex: 1; min-width: 0; }
  .heading .eyebrow { font-size: 8px; letter-spacing: .12em; margin-bottom: 6px; }
  .heading h1 { font-size: 29px; line-height: 1.15; margin: 0 0 6px; }
  .heading #intro { font-size: 12px; line-height: 1.45; margin: 0; max-width: 400px; }
  .totals { margin: 0; gap: 16px; }
  .totals b { font-size: 20px; }
  .totals span { font-size: 9px; }
  .toolbar { padding: 12px; margin: 0; border-radius: 10px; }
  .search { min-height: 46px; padding: 0 12px; }
  .search input { font-size: 16px; }
  .search kbd { display: none; }
  .filter-panel { margin-top: 4px; }
  .filter-panel > summary { width: 100%; min-height: 38px; }
  .filter-panel > summary::after { margin-left: auto; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .filters label { font-size: 11px; }
  .filters input, .filters select { font-size: 16px; min-height: 44px; padding: 8px; }
  #reset { min-height: 44px; font-size: 12px; }
  .filter-hint { font-size: 11px; line-height: 1.5; margin-bottom: 0; }
  .result-header { margin: 14px 0 9px; gap: 8px; align-items: center; }
  #resultCount { font-size: 11px; }
  #stamp { font-size: 10px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid .monster-card { display: grid; grid-template-columns: 78px minmax(0, 1fr); padding: 0; text-align: left; border-radius: 10px; align-items: stretch; }
  .monster-card .monster-art { width: 78px; height: auto; min-height: 112px; border: 0; }
  .monster-card .monster-art img { height: 100%; position: absolute; inset: 0; object-fit: cover; }
  .monster-card .id-tag { top: auto; bottom: 5px; left: 5px; padding: 3px; font-size: 8px; letter-spacing: 0; }
  .monster-card .card-body { min-width: 0; padding: 10px; }
  .monster-card h2 { font-size: 16px; line-height: 1.25; margin: 0 0 5px; overflow-wrap: anywhere; }
  .monster-card .meta { font-size: 11px; line-height: 1.4; flex-wrap: wrap; gap: 5px; }
  .monster-card .card-foot { margin-top: 8px; padding-top: 7px; gap: 5px; font-size: 10px; }
  .monster-card .loot-icons { gap: 4px; }
  .monster-card .tiny-icon { width: 24px; height: 24px; }
  .monster-card .more-loot { font-size: 9px; }
  .monster-card .loot-summary .soft { display: none; }
  .monster-card .update-stamp { display: none; }
  .grid .item-card { grid-template-columns: 48px minmax(0, 1fr); gap: 8px 10px; padding: 12px; border-radius: 10px; }
  .item-card .item-image { width: 48px; height: 48px; }
  .item-card .rarity { font-size: 10px; }
  .item-card h2 { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
  .item-card .meta { font-size: 11px; line-height: 1.4; }
  .item-card .stat-preview { grid-column: 1 / -1; gap: 5px; }
  .item-card .stat-preview .stat-pill { padding: 5px 6px; font-size: 11px; }
  .item-card .stat-preview dt { font-size: 9px; }
  .item-card .stat-preview dd { font-size: 12px; }
  .item-card .item-tail { display: flex; gap: 8px; font-size: 10px; padding-top: 7px; }
  .item-card .update-stamp { display: none; }
  .journal-row { gap: 10px; padding: 14px; }
  .journal-row h2 { font-size: 16px; }
  .journal-row p, .journal-row small, .journal-row time { font-size: 11px; line-height: 1.5; }
  .detail, .small-dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .detail h2 { padding-right: 28px; }
  .detail .loot-row .loot-copy strong { font-size: 14px; }
  .detail .loot-row .loot-copy small { font-size: 11px; }
  #toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); font-size: 13px; }
}
@media (max-width: 600px) {
  .sidebar { padding-inline: 14px; }
  main { padding-inline: 14px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .heading { padding: 16px; }
  .totals { flex-direction: column; gap: 7px; flex-shrink: 0; }
  .totals > div { text-align: right; }
  .totals b { font-size: 17px; }
  .totals span { font-size: 8px; }
  .heading .eyebrow { max-width: 200px; }
  .heading h1 { font-size: 27px; }
  #stamp { display: none; }
  .journal-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); }
  .journal-row time { grid-column: 2; text-align: left; }
}
@media (max-width: 390px) {
  #installApp { display: none; }
  .brand strong { font-size: 14px; }
  .totals { display: none; }
  .sidebar nav button { font-size: 11px; }
  .sidebar nav button b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
/* ik-polish:start */
/* 2.5.4: phone header without overlap, loading skeleton, calmer cards and dialogs. */
@keyframes ik-shimmer { from { background-position: -320px 0, 0 0; } to { background-position: calc(100% + 320px) 0, 0 0; } }
@keyframes ik-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#results[aria-busy="true"]:empty::before {
  content: ''; grid-column: 1 / -1; display: block; height: 430px; border-radius: 12px;
  background: linear-gradient(100deg, transparent, #ffffff0c 45%, transparent 70%) no-repeat, repeating-linear-gradient(180deg, #1a2733 0 128px, transparent 128px 142px);
  background-size: 320px 100%, 100% 100%; animation: ik-shimmer 1.3s linear infinite;
}
.grid > .card { animation: ik-rise .22s ease-out backwards; }
.card .monster-art img { transition: transform .25s ease; }
.card:focus-visible { border-color: #e4c585; }
.sidebar nav button.selected { box-shadow: inset 0 0 0 1px #dab57640; }
.detail { box-shadow: 0 24px 70px #000a, 0 0 0 1px #dab57622; }
.detail .loot-row { transition: border-color .15s, background .15s; }
.detail .loot-row:hover { border-color: #dab57655; background: #1d2b37; }
* { scrollbar-color: #3b4c58 transparent; }

@media (max-width: 820px) {
  .sidebar { padding: 14px 14px 0; }
  .brand { gap: 9px; max-width: calc(100% - 128px); }
  .brand .sigil { font-size: 26px; text-shadow: 0 0 16px #dab57666; }
  .brand strong { font-size: 17px; letter-spacing: .12em; line-height: 1.05; }
  .brand small { font-size: 8px; letter-spacing: .32em; margin-top: 3px; }
  /* the buttons sit on the brand row, right-aligned, and never cover the logo */
  .topbar { margin: -39px 0 10px; min-height: 44px; height: auto; padding: 0; border: 0; justify-content: flex-end; pointer-events: none; }
  .topbar > div { width: auto !important; margin-left: auto; flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 8px; pointer-events: auto; }
  #reload { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 0 !important; border: 1px solid #c3a56e44; border-radius: 9px; background: #9d7b2511; color: #d9c394; }
  #reload::before { content: '↻'; font-size: 20px; line-height: 1; }
  #reload:active::before { display: inline-block; transform: rotate(180deg); transition: transform .3s; }
  .mobile-menu > summary { min-width: 62px; min-height: 44px; border-radius: 9px; background: #9d7b2511; font-size: 13px; }
  .heading { margin-top: 6px; box-shadow: 0 10px 30px #0004; }
  .heading h1 { letter-spacing: .01em; }
  .toolbar { background: linear-gradient(160deg, #1a2733, #131e29); border: 1px solid #c5a26624; }
  .search { border-radius: 10px; }
  .grid .monster-card { box-shadow: 0 6px 18px #0003; }
  .monster-card .monster-art { width: 84px; }
  .grid .monster-card { grid-template-columns: 84px minmax(0, 1fr); }
  .monster-card h2 { font-size: 17px; }
  .sidebar nav { background: #0f1c26ee; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .sidebar nav button.selected { background: linear-gradient(180deg, #3a2a1c, #261c14); color: #f0d9a8; }
  .detail { width: calc(100vw - 16px); max-width: 560px; border-radius: 14px; }
}
@media (max-width: 390px) {
  .brand { max-width: calc(100% - 118px); }
  .brand strong { font-size: 15px; }
  .mobile-menu > summary { min-width: 54px; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #results[aria-busy="true"]:empty::before, .grid > .card { animation: none; }
}
/* ik-polish:end */