/* Additions for the database-driven pages; builds on the original style.css look. */
/* centred like the 2015 pages and the medal pages: text, headings, tables, cells, chips (Leafy 2026-10-16) */
.dbpage { text-align: center; }
.dbpage h1, .dbpage h2 { color: var(--link); }
.dbpage .mut { color: var(--mut); }
.dbpage .note { font-size: var(--fs-md); color: var(--mut); }
.game-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 16px; }
.game-tabs a { padding: 6px 12px; border-radius: 16px; background: var(--rule); color: var(--ink); text-decoration: none; font-weight: 500; }
.game-tabs a.on { background: var(--blue-m); color: #fff; }
table.dbt { border-collapse: collapse; width: 100%; margin: 8px 0 18px; background: var(--panel); font-size: var(--fs-base); }
table.dbt th { background: var(--blue-m); color: #fff; -webkit-text-stroke: 3px var(--outline-ink); paint-order: stroke fill; padding: 6px 8px; text-align: center; cursor: pointer; white-space: nowrap; }
table.dbt:not(.sortable) th { cursor: default; }
table.dbt th[aria-sort=ascending]::after { content: " \25B2"; font-size: .7em; }
table.dbt th[aria-sort=descending]::after { content: " \25BC"; font-size: .7em; }
table.dbt td { border-bottom: 1px solid var(--rule); padding: 5px 8px; vertical-align: top; }
table.dbt tr:hover td { background: var(--panel-2); }
table.dbt tr.sel td { background: var(--hilite); }
/* card view of data tables (site.js): each row is a card, short cells side by side, longer ones full width; the
   header row stays as the sort buttons */
#wrapper table.dbt.cv { display: block; background: none; overflow: visible; }
#wrapper table.dbt.cv thead tr { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 8px; }
#wrapper table.dbt.cv:not(.sortable) thead { display: none; }
#wrapper table.dbt.cv th { display: block; border-radius: var(--r-xl); padding: 3px 10px; font-size: var(--fs-md); font-weight: 500; }
#wrapper table.dbt.cv tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 8px; justify-items: center; }
#wrapper table.dbt.cv tbody tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); grid-auto-flow: row dense; gap: 2px 10px; align-content: start; width: 100%; max-width: var(--card-max); box-sizing: border-box; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 8px 12px; }
#wrapper table.dbt.cv td, #wrapper table.dbt.cv tbody th { display: block; grid-column: 1 / -1; min-width: 0; border: 0; padding: 2px 0; background: none; text-align: center; overflow-wrap: anywhere; }
#wrapper table.dbt.cv td.cs { grid-column: auto; }
#wrapper table.dbt.cv td.ce { display: none; }
#wrapper table.dbt.cv td.ct, #wrapper table.dbt.cv tbody th, #wrapper table.dbt.cv td.cno { order: -1; color: inherit; cursor: auto; white-space: normal; font-size: var(--fs-xl); font-weight: 500; padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid var(--rule); }
#wrapper table.dbt.cv td.cno { order: -2; grid-column: 1; color: var(--mut); }
#wrapper table.dbt.cv td.cno::before { content: "#"; }
#wrapper table.dbt.cvn td.ct { grid-column: 2 / -1; }
#wrapper table.dbt.cv td[data-l]::before { content: attr(data-l); display: block; font-size: var(--fs-xs); line-height: 1.3; color: var(--mut); }
#wrapper table.dbt.cv td img.thumb { margin: 0 6px 0 0; vertical-align: middle; }
#wrapper table.dbt.cv td.ct[data-l]::before { content: attr(data-l) " "; display: inline; font-size: inherit; color: inherit; }
#wrapper table.dbt.cv tbody tr.sel { background: var(--hilite); }
#wrapper table.dbt.cv tbody tr.rest-more { display: block; grid-column: 1 / -1; border: 0; background: none; }
.vsw { display: flex; justify-content: center; gap: 4px; margin: 6px 0; }
.vsw button { padding: 3px 12px; border: 0; border-radius: var(--r-xl); background: var(--rule); color: var(--ink); font: inherit; font-size: var(--fs-md); cursor: pointer; }
.vsw button.on { background: var(--blue-m); color: #fff; }
.tag { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--rule); font-size: var(--fs-sm); margin-right: 4px; }
.tag.inf { background: var(--hilite); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 160px)); justify-content: center; gap: 8px; margin: 8px 0; }
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 8px 12px; }
.card b { font-size: var(--fs-4xl); color: var(--link); }
input.filter { padding: 6px 10px; width: 100%; max-width: 360px; border: 1px solid var(--line); border-radius: var(--r-xs); margin: 6px 0; }
.dbfoot { text-align: center; color: #fff; padding: 16px; font-size: var(--fs-md); text-shadow: 0 1px 2px #000; }
/* map */
.mapwrap { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.map { position: relative; flex: 1 1 520px; max-width: 760px; }
.map img { width: 100%; display: block; border-radius: var(--r-xs); image-rendering: pixelated; }
.map img.r3d { image-rendering: auto; background: #1d2633; }
.fieldview img { width: 100%; max-width: 1100px; display: block; border-radius: var(--r-xs); }
.map svg { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; }
.map .mk { cursor: pointer; }
.map .mk circle, .map .mk rect, .map .mk path { stroke: #000; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.map .mk.sel circle, .map .mk.sel rect, .map .mk.sel path { stroke: #fff; stroke-width: 3; }
.map .mk text { font: bold var(--fs-xs) var(--sans); paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; }
.map .mk.exit text { fill: #003e8a; }
.panel { flex: 1 1 300px; min-width: 260px; max-height: 78vh; overflow: auto; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 10px 14px; }
.legend label { margin-right: 12px; white-space: nowrap; cursor: pointer; font-size: var(--fs-base); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; border: 1px solid #0003; }
/* map point categories without an icon (area.php $CAT) and chest types (inc/db.php $CHEST) */
.dot.c-npc { background: #17a2b8; } .dot.c-search { background: #f0a020; } .dot.c-sparkle { background: #fff176; }
.dot.c-terror { background: #c62828; } .dot.c-other { background: #888; }
.dot.ch-gold { background: #e6b800; } .dot.ch-purple, .dot.ch-regular { background: #9b4dca; } .dot.ch-random { background: #d23c3c; }
.dot.ch-event { background: #888; }
.scroll-x { overflow-x: auto; }
#wrapper div.rest-more { grid-column: 1 / -1; }
img.glogo, #wrapper img.glogo { width: auto; height: 18px; max-width: none; margin: 0 2px; border: 0; box-shadow: none; background: none; vertical-align: middle; }
#wrapper h3 img.glogo { height: 24px; }
#wrapper .ycard img.glogo { height: 26px; }
#spotlist { max-height: 420px; overflow: auto; display: block; }
details summary { cursor: pointer; font-weight: 500; margin: 6px 0; }
@media (pointer: coarse) { details summary { padding-top: 6px; padding-bottom: 6px; } }  /* ~32 px tall for a finger */
.timeline .t { color: var(--mut); font-family: monospace; margin-right: 8px; }
.timeline .act { color: var(--ink-gold); font-style: italic; }
.timeline .sys { color: var(--mut); font-size: var(--fs-md); }
.yk-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.yk-head img { width: 96px; height: 96px; object-fit: contain; }
@media (max-width: 700px) { .map { flex-basis: 100%; } .panel { flex-basis: 100%; } }
#wrapper.dbpage { width: 92%; max-width: 1400px; margin-left: auto; margin-right: auto; box-sizing: border-box; }  /* style.css gives #wrapper 20% side margins + 5% padding */
.map .mk.exit text { font-size: 9px; }
.map .mk text { font-size: var(--fs-2xs); }

img.thumb { object-fit: contain; vertical-align: middle; margin-right: 6px; image-rendering: auto; }
td img.thumb { width: 32px; height: 32px; }
#wrapper .yk-head img.hero { width: 128px; height: 128px; object-fit: contain; margin: 0; position: static; z-index: auto; background: none; border: 0; box-shadow: none; }  /* item art is 128 px; shell.css .hero is the navbar */
.yk-head { margin: 0 0 8px; align-items: flex-start; flex-wrap: nowrap; }
.yk-ht { flex: 1; min-width: 0; }
.yk-ht > p { margin: 6px 0; }
#wrapper .yk-ht .game-tabs { margin: 6px 0; }
#wrapper .iprice .xp-n img, #wrapper .eqprice .xp-n img { height: 1.35em; }
#wrapper .ycards.items .xp-n img { height: 1.3em; }
@media (max-width: 520px) { #wrapper .yk-head img.hero { width: 96px; height: 96px; } }
body.shell #wrapper.dbpage .yk-head h1 { margin: 0; text-align: left; }
.chest-key { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--blue-m); margin: 12px 0; }
.tabs button { border: 0; background: var(--panel-2); padding: 8px 14px; border-radius: 6px 6px 0 0; cursor: pointer; font: inherit; }
.tabs button.on { background: var(--blue-m); color: #fff; }
.tabs button.on .mut { color: #dde; }
.tabs button { height: auto; }  /* style.css gives every button 25px, which cut the pills off */
button.lnk { border: 0; background: none; color: var(--link); cursor: pointer; padding: 0; font: inherit; }
details.series, details.talk { border: 1px solid var(--line); border-radius: var(--r-xs); padding: 4px 10px; margin: 6px 0; background: var(--panel); }
.tag { display: inline-block; font-size: var(--fs-xs); background: var(--hilite); color: var(--ink-gold); border-radius: var(--r-sm); padding: 0 6px; }
.sm { font-size: var(--fs-sm); }
.chat .ln { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.chat .pt { width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--panel-2); object-fit: cover; object-position: top; }
.chat .pt.none { display: inline-block; }
#wrapper .chat img.pt { margin: 0; max-width: none; }  /* not style.css "#wrapper img" 10% side margins */
.chat .bub { background: var(--panel-2); border-radius: var(--r-sm); padding: 6px 10px; flex: 1; min-width: 0; }
.chat .bub p { margin: 2px 0 0; }
details.series { overflow-x: auto; } details.series table.dbt { width: 100%; }

/* breadcrumbs, area hubs, video guides */
.crumbs { font-size: var(--fs-md); margin: 0 0 10px; color: var(--mut); }
.crumbs a { color: var(--link); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { margin: 0 6px; color: var(--mut); }
.hubgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 10px 0 18px; justify-items: center; }
.hubgrid > * { width: 100%; max-width: var(--card-max-thin); box-sizing: border-box; }
.hubcard { display: block; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 8px; text-decoration: none; color: inherit; }
.hubcard:hover { border-color: var(--blue-m); }
.hubcard .mapthumb { width: 100%; height: 120px; object-fit: contain; background: #1d2633; border-radius: var(--r-xs); display: block; }
.hubcard b { display: block; margin-top: 6px; color: var(--link); }
.hubcard .mut { font-size: var(--fs-sm); }
/* game landing page (game.php) */
.gamehead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#wrapper .gamehead img { height: 96px; width: auto; max-width: none; margin: 0; }
.boxart { display: flex; flex-wrap: wrap; gap: 14px 10px; margin: 14px 0 6px; }
.boxart figure { margin: 0; text-align: center; }
#wrapper .boxart img { display: block; width: auto; height: 200px; max-width: none; margin: 0 auto; box-shadow: none; }
#wrapper .boxart.boxart-all img { width: auto; max-width: 100%; height: auto; }
.boxart figcaption { margin-top: 4px; font: 700 var(--fs-md) var(--head); color: var(--link); }
.gintro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 18px; align-items: start;
  border-image: var(--g-win); padding: 46px 22px 20px; color: var(--ink); }  /* game window, cards.css */
.gintro > div > p:first-child { margin-top: 4px; }
#wrapper .gintro .boxart { margin: 6px 0 0; }
@media (max-width: 900px) { .gintro { grid-template-columns: 1fr; } }
@media (max-width: 600px) { #wrapper .boxart img { height: 150px; } .boxart figcaption { font-size: var(--fs-sm); } }
.ylist { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px; }
.ylist a { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; padding: 2px 10px 2px 2px; font-size: var(--fs-md); text-decoration: none; }
.ylist img { width: 28px; height: 28px; }
.videos .video { position: relative; padding-top: 56.25%; margin: 8px 0 16px; max-width: 900px; }
.videos iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r-sm); }
.map .mk text.ql { font: bold var(--fs-2xs) var(--sans); fill: #6b4b00; }
.fieldwrap { position: relative; max-width: 1100px; }
.fieldwrap img { width: 100%; height: auto; max-width: none; display: block; border-radius: var(--r-xs); }
.fieldwrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fieldwrap .fq { cursor: pointer; }
.fieldwrap .fq circle, .fieldwrap .fq rect { stroke: #000; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.fieldwrap .fq text { font: bold var(--fs-sm) var(--sans); paint-order: stroke; stroke: #fff; stroke-width: 3px; fill: #6b4b00; }
#objlist td.steps { font-size: var(--fs-md); line-height: 1.6; }
/* style.css caps "#wrapper img" at 80% width; overlaid maps must fill their box exactly or markers drift sideways */
#wrapper .map img, #wrapper .fieldwrap img, #wrapper .hubcard img, #wrapper .ylist img { max-width: 100%; margin-left: 0; margin-right: 0; }

/* rail ads (inc/config.php ADS_ENABLED): wide screens only, in the content panel left and right of the page, under the breadcrumbs */
.adrail { display: none; }
@media (min-width: 1280px) {
  .adcols { display: grid; grid-template-columns: 160px minmax(0, 1fr) 160px; gap: 16px; }
  .adcol-main { min-width: 0; }
  /* the rail runs the page height and the unit sticks under the navbar, so it stays in view while the page is read */
  .adrail { display: block; width: 160px; }
  .adrail .adlabel { position: sticky; top: calc(var(--top-h) + 12px); display: block; font: var(--fs-xs) var(--sans); color: var(--mut); text-align: center; margin-bottom: 4px; }
  .adrail > div { position: sticky; top: calc(var(--top-h) + 30px); width: 160px; min-height: 600px; }
  .adrail .adsbygoogle { width: 160px; height: 600px; }
}
/* pages with the In This Area rail need more width before the ad columns fit */
@media (min-width: 1280px) and (max-width: 1599px) {
  .has-rail .adcols { display: block; }
  .has-rail .adrail { display: none; }
}
.adbanner { display: block; clear: both; margin: 24px auto; max-width: 728px; text-align: center; }
.adbanner .adlabel { display: block; font: var(--fs-xs) var(--sans); color: var(--mut); margin-bottom: 4px; }
.adbanner > div { min-height: 90px; }
.adbanner .adsbygoogle { display: block; }
/* AdSense pair (ads_banner()): two units side by side from 1000px, the second hidden on narrower screens */
.adbanner:has(.adpair), .adslot:has(.adpair) { max-width: none; }
.adpair { display: flex; justify-content: center; gap: 16px; }
.adpair > div { flex: 1 1 0; min-width: 0; max-width: 728px; min-height: 90px; }
.adpair > .second { display: none; }
@media (min-width: 1000px) { .adpair > .second { display: block; } }
@media (max-width: 767px) { .adbanner > div, .adpair > div { min-height: 100px; } .adbanner.nomobile { display: none; } }
/* in-page slots (assets/ads.js): space kept from the moment a slot is turned on, so ads filling in later never move
   the text being read or a jump link's target */
.adslot { display: block; clear: both; margin: 24px auto; max-width: 728px; text-align: center; }
.adslot .adlabel { display: block; font: var(--fs-xs) var(--sans); color: var(--mut); margin-bottom: 4px; }
.adslot > div { min-height: 250px; }
.adslot > .adpair { min-height: 90px; }
.adslot .adsbygoogle { display: block; }
.yk-head h1 .jp { font-size: 60%; margin-left: 8px; }
.prevnext { margin-top: 24px; text-align: center; }
#wrapper img.elem { width: auto; height: 24px; max-width: none; margin: 0 4px 0 0; vertical-align: -6px; }
/* Yo-kai Elements: chip lines and multiplier table side by side, centred; Food: label and food chips on one row */
.elements { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 0 28px; }
.elements .el-l { flex: 0 1 auto; }
.elements .el-l p { margin: 4px 0; }
#wrapper .elements > table { flex: 0 1 440px; width: 440px; margin: 4px 0; }
.elements > .note { flex-basis: 100%; }
.frow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin: 6px 0 10px; }
.frow .ylist { margin: 0; justify-content: center; }
.ylist.foods a { flex-direction: column; justify-content: flex-start; gap: 2px; width: 104px; padding: 6px 4px 8px; border-radius: 12px; text-align: center; line-height: 1.2; }
#wrapper .ylist.foods img { width: 56px; height: 56px; object-fit: contain; }
.echip { display: inline-block; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-xl); padding: 2px 10px 2px 4px; margin: 2px; }

/* ---- map page (area.php, docs/MAP_PAGE.md) ---- */
.titlebar .game-tabs { margin: 0 0 0 auto; }
.sibs { margin: 0 0 8px; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-items: center; margin: 0 0 10px; }
.filters .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 6px; }
.filters .pill img, .mon-tabs img { width: 20px; height: 20px; object-fit: contain; }
.filters .n, .mon-tabs .n, .rail .n { font-size: var(--fs-sm); background: var(--panel-soft); border-radius: 9px; padding: 0 6px; }
#wrapper .pill .n { background: rgba(255,255,255,.75); color: var(--ink-on); }
.rare-key { font-size: var(--fs-md); color: var(--mut); margin-left: 6px; }
.rare-badge { display: inline-block; font: 800 var(--fs-2xs)/1 var(--head); color: #fff; background: linear-gradient(#ffcf33, #f29900);
  border: 1px solid #b86e00; border-radius: var(--r-sm); padding: 2px 5px; vertical-align: 1px; text-transform: uppercase; }
.mapgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr); gap: 12px; align-items: start; }
.mapframe { position: relative; background: #1d2633; border-radius: var(--r-xl); overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--blue); }
.mapframe .view { position: relative; }
.mapframe .view[hidden] { display: none; }
#wrapper .mapframe img { display: block; width: 100%; height: auto; max-width: none; margin: 0; image-rendering: pixelated; }
#wrapper .mapframe img.r3d, #wrapper .mapframe .v-angle img, #wrapper .mapframe .v-front img { image-rendering: auto; }
.mapframe svg.pts { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk { cursor: pointer; outline: none; }
.mk.off { display: none; }
.mk circle, .mk path { stroke: #000; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mk circle.rr { fill: none; stroke: #ffc400; stroke-width: 3; stroke-dasharray: 4 2; }
.mk circle.cb { stroke: #5a1a00; }
.mk.sel circle, .mk.sel path { stroke: #fff; stroke-width: 3.5; }
.mk.sel image, .mk:focus image { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #fff); }
.mk:focus circle, .mk:focus path { stroke: #fff; stroke-width: 3; }
.mk text.lb { font: 800 var(--fs-xs) var(--head); paint-order: stroke; stroke: #fff; stroke-width: 3px; fill: #102a5c; pointer-events: none; }
.mk.c-quest text.lb, .mk.c-questobj text.lb, .mk.c-favor text.lb { display: none; fill: #6b4b00; }
.qnames .mk.c-quest text.lb, .qnames .mk.c-questobj text.lb, .qnames .mk.c-favor text.lb { display: inline; }
.mk.c-yspot text.lb { fill: #5b1f8a; }
.angle-note { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 6px 10px; border-radius: var(--r-md); background: var(--panel-a); font-size: var(--fs-md); }
.viewbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.vbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.vbtns .pill:disabled { opacity: .45; cursor: default; }
.mini-thumb { position: relative; border: 3px solid #fff; border-radius: var(--r-md); padding: 0; background: var(--hilite); cursor: pointer; box-shadow: 0 0 0 2px var(--blue); overflow: hidden; }
#wrapper .mini-thumb img { display: block; width: 120px; height: auto; max-width: none; margin: 0; image-rendering: pixelated; }
.mini-thumb span { position: absolute; left: 0; right: 0; bottom: 0; font: 800 var(--fs-xs) var(--head); background: var(--panel-a); }
/* Monitoring Table */
.monitor { display: flex; flex-direction: column; min-height: 320px; max-height: 88vh; background: var(--panel); border-radius: var(--r-xl); border: 3px solid var(--yellow);
  overflow: hidden; }
.mon-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--hilite); border-bottom: 3px solid var(--blue); }
.mtab { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: var(--r-xl); padding: 3px 8px 3px 4px; background: var(--panel-lav); cursor: pointer;
  font: 700 var(--fs-sm) var(--head); box-shadow: inset 0 0 0 1.5px #2a2238; }
.mtab.on { background: var(--yellow); }
.mon-body { flex: 1; overflow: auto; overscroll-behavior: contain; position: relative; }
table.mon { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
table.mon td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; cursor: pointer; }
table.mon td.nm { font-weight: 700; width: 45%; }
table.mon tr:hover td { background: var(--panel-2); }
table.mon tr.sel td { background: var(--hilite); }
table.mon tr.nopos td.nm::after { content: " (no map position)"; font-weight: 400; color: var(--mut); font-size: var(--fs-xs); }
table.mon tr.det td { background: var(--hilite); cursor: default; padding: 6px 10px 10px; border-bottom: 3px solid var(--yellow); }
table.mon tr.det table.dbt { font-size: var(--fs-sm); margin: 4px 0 8px; }
/* full tables: one per category, several side by side */
.cattables { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.cattable { min-width: 0; background: var(--panel); border: 2px solid var(--line); border-radius: var(--r-lg); padding: 4px 10px 6px; }
.cattable.wide { grid-column: span 2; }
body.shell #wrapper .cattable h3 { margin: 6px 0; display: flex; align-items: center; gap: 6px; }
.cattable h3 img { width: 24px; height: 24px; object-fit: contain; }
.tscroll { max-height: 420px; overflow: auto; }
.cattable table.dbt { margin: 0; }
#wrapper table.dbt td { text-align: center; vertical-align: middle; }
table.dbt.full tr[data-id] { cursor: pointer; }
img.pt-s { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--panel-2); vertical-align: middle; margin-right: 6px; }
span.pt-s.none { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: var(--panel-2); vertical-align: middle; margin-right: 6px; }
details.talk summary img.pt-s { width: 32px; height: 32px; }
.talks details.talk { margin: 4px 0; }
.chat .chap { margin: 10px 0 2px; font: 800 var(--fs-md) var(--head); color: var(--link); border-bottom: 2px dashed var(--line); }
.chat .when { display: block; font-size: var(--fs-xs); color: var(--mut); }
.enc { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 4px 10px; margin: 6px 0; background: var(--panel); }
.enc .encf { margin: 4px 0; }
.rare-note { margin: 0 0 6px; }
/* right rail */
.rail .rg { border-bottom: 2px dashed var(--line); padding: 4px 0; }
.rail .rg:last-child { border-bottom: 0; }
.rail .rg summary { font: 800 var(--fs-lg) var(--head); cursor: pointer; padding: 3px 0; }
.rail .rg ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 4px; font-size: var(--fs-base); }
.rail .rg li { display: block; width: auto; padding: 2px 0; text-align: left; font-size: var(--fs-base); font-weight: 400; color: inherit; }
.rail a { color: var(--link); text-decoration: none; }
.rail a:hover { text-decoration: underline; }
@media (max-width: 1100px) { .mapgrid { grid-template-columns: minmax(0, 1fr); } .monitor { height: 52vh !important; } .cattable.wide { grid-column: auto; } }
@media (max-width: 900px) { .cattables { grid-template-columns: minmax(0, 1fr); } }
.filters .pill, .mtab, .vbtns .pill { flex: none; white-space: nowrap; }
.mon-body { min-height: 0; }
#wrapper .cattable h3 img, #wrapper img.pt-s, #wrapper .filters img, #wrapper .mon-tabs img { margin: 0 6px 0 0; max-width: none; display: inline-block; }
#wrapper img.pt-s { vertical-align: middle; }
@media (max-width: 900px) {
  #wrapper table.dbt { display: block; overflow-x: auto; max-width: 100%; }
  .titlebar .game-tabs { margin: 4px 0 0; }
}
.mini-thumb { flex: none; width: 126px; }
#wrapper .monitor img.thumb, #wrapper .cattable img.thumb, #wrapper .rail img.thumb { margin: 0 6px 0 0; max-width: none; vertical-align: middle; box-shadow: none; }
#monbody tr[data-id]:focus-visible td { outline: 2px solid var(--blue); outline-offset: -2px; }
.mk path.route { fill: none; stroke: #c62828; stroke-width: 2.5; stroke-dasharray: 6 3; vector-effect: non-scaling-stroke; opacity: .85; }
.mk.sel path.route { stroke: #fff; stroke-width: 4; stroke-dasharray: none; }
.chat .pt.npcpic, img.pt-s.npcpic { object-fit: cover; object-position: 50% 8%; background: var(--panel-2); }
input.filter { box-sizing: border-box; }
#wrapper .same-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-sm); margin: 4px 0 8px; color: var(--mut); }
#wrapper .same-in img { height: 18px !important; width: auto !important; box-shadow: none; margin: 0; vertical-align: middle; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* search results (search.php): icon, name, kind label */
#wrapper ul.sresults { list-style: none; padding: 0; margin: 6px 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 14px; }
#wrapper ul.sresults li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 0; border-bottom: 1px solid var(--line); min-width: 0; }
#wrapper ul.sresults li > a { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 4px 0; }
#wrapper ul.sresults li > a img, #wrapper ul.sresults li > img { flex: none; width: 28px; height: 28px; object-fit: contain; margin: 0; box-shadow: none; max-width: none; }
#wrapper ul.sresults .si-none { flex: none; width: 28px; }
#wrapper ul.sresults .sn { overflow-wrap: anywhere; }
#wrapper ul.sresults .sk { flex: none; font: 700 var(--fs-xs) var(--head); background: var(--lav); color: var(--ink-on); border-radius: 9px; padding: 1px 8px; white-space: nowrap; }
#wrapper ul.sresults .sk + .mut { flex: none; font-size: var(--fs-sm); max-width: 40%; text-align: right; }
/* search hits as icon tiles (search.php); three across on a phone so the icons fill the width */
#wrapper .ycards.stiles { margin: 6px 0 18px; }
@media (max-width: 600px) {
  #wrapper .ycards.stiles { gap: 6px; }
  #wrapper .ycards.stiles > * { flex-basis: calc((100% - 12px) / 3); }
  #wrapper .stiles .ytile { padding: 6px 3px 5px; }
  #wrapper .stiles .ytile .yt-img { width: 80px; height: 80px; max-width: 100%; }
  #wrapper .stiles .yt-n { font-size: var(--fs-sm); }
}
#wrapper ul.sresults.slines { grid-template-columns: 1fr; }
#wrapper ul.sresults.slines li { align-items: flex-start; padding: 6px 0; }
#wrapper ul.sresults.slines li > img { border-radius: 50%; object-fit: cover; object-position: top; background: var(--panel-2); }
#wrapper ul.sresults.slines div { flex: 1; min-width: 0; }
#wrapper ul.sresults.slines div > a { margin-right: 8px; }
#wrapper ul.sresults.slines p { margin: 2px 0 0; }
form.sform { display: flex; align-items: center; gap: 6px; max-width: 560px; }
form.sform input { flex: 1; min-width: 0; }
section.lazy { border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 2px 14px 8px; margin: 14px 0; }
section.lazy.loading { opacity: .6; }
section.lazy a.lazy-load { font-weight: 700; }

/* phones: short card-view lists (cv2, e.g. item passwords) go two to a row */
@media (max-width: 600px) {
  #wrapper table.dbt.cv.cv2 tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #wrapper table.dbt.cv.cv2 tbody tr { padding: 6px 8px; }
  #wrapper table.dbt.cv.cv2 td.ct { font-size: var(--fs-base); }
}

/* YW4 treasure hunt (treasure-hunt.php): area minimap with numbered dig spots, and per map the photo beside a crop of the minimap */
.thmap { position: relative; max-width: 640px; background: #33404d; border: 2px solid var(--card-line, #bcd4f3); border-radius: 10px; overflow: hidden; }
.thmap.tall { max-width: 300px; }
.thmap img { display: block; width: 100%; height: auto; }
.thmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.thmap circle { fill: #b5651d; stroke: #fff; stroke-width: 3; }
.thmap a:hover circle, .thmap a:focus circle { fill: var(--blue-d); }
.thmap text { fill: #fff; font-weight: 700; font-family: var(--head); text-anchor: middle; pointer-events: none; }
.thpics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.thpics > img, .thpics svg { display: block; width: 100%; height: auto; aspect-ratio: 816 / 480; border-radius: 8px; background: #33404d; }
.thpics .ring { fill: none; stroke: #fff; stroke-width: 4; }
/* the Popularity ruling on the Yo-kai pages and Befriending, in big bold letters (Leafy 2026-10-18) */
.pop-note { margin: 12px auto; font-family: var(--head); font-size: var(--fs-6xl); font-weight: 700; line-height: 1.3; color: var(--ink-gold); }
.dbpage .bf-steps { display: inline-block; margin: 4px 0 10px; text-align: left; }
.bf-steps .bf-ic { display: inline; width: auto; height: 1.6em; max-width: none; margin: 0 6px 0 0; vertical-align: -.45em; }