/* The playbook extends the selected neon arcade design language. */
#catalog-dialog {
  width: min(920px, calc(100% - 40px));
  height: min(920px, calc(100dvh - 40px));
  max-height: none;
  padding: 0;
  border: 1px solid #546a34;
  border-radius: 28px;
  background: #0b100b;
  overflow: hidden;
}
#catalog-dialog[open] { display: flex; flex-direction: column; }
.catalog-top { flex: none; padding: 25px 28px 0; background: #0b100b; }
#catalog-dialog .sheet-header { position: relative; min-height: 92px; margin: 0 0 12px; align-items: flex-start; }
#catalog-dialog .sheet-header p { font: 700 9px/1.3 Arial,sans-serif; letter-spacing: 2.2px; margin: 0 0 12px; }
#catalog-dialog .sheet-header h2 { font: 400 37px/1.1 ArcadeDisplay,'PingFang SC',sans-serif; letter-spacing: -1px; margin: 0; }
#catalog-dialog .sheet-header h2 small { font: 500 12px/1.3 'PingFang SC',sans-serif; letter-spacing: 0; vertical-align: middle; margin-left: 7px; color: #b4bbab; }
.catalog-intro { color: #b5bcae; font-size: 13px; margin: 10px 0 0; }
.catalog-mascot { position: absolute; right: 45px; top: 4px; width: 140px; height: 105px; pointer-events: none; }
.catalog-mascot img { position: absolute; object-fit: contain; width: 100%; height: 100%; }
.catalog-mascot img:first-child { width: 76%; right: -4px; transform: rotate(9deg); mix-blend-mode: lighten; }
.catalog-mascot img:last-child { width: 80%; left: 0; top: 9px; transform: rotate(-12deg); }
#catalog-dialog .catalog-back { position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; margin: 0 0 12px; border-color: #526735; background: #17200f; }
#catalog-dialog .catalog-back img { width: 22px; height: 22px; }
#catalog-dialog .search-wrap input { height: 46px; border-radius: 16px; padding-left: 43px; background: #1b2415; border-color: #465733; font-size: 14px; }
#catalog-dialog .search-wrap>img { width: 19px; height: 19px; top: 13px; left: 15px; }
.catalog-filter-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
#catalog-dialog #players { max-width: none; width: 130px; height: 40px; padding: 0 13px; border-radius: 21px; font-size: 12px; background: #141c10; border-color: #516535; }
#catalog-dialog .favorite-filter { width: auto; min-width: 128px; height: 40px; display: flex; gap: 8px; padding: 8px 14px; border-radius: 22px; font-size: 12px; color: #d5dccd; background: #141c10; border-color: #516535; }
#catalog-dialog .favorite-filter img { width: 18px; height: 18px; }
#catalog-dialog .favorite-filter[aria-pressed=true] { color: #d5ff66; border-color: #d5ff66; background: #2b3c19; }
#catalog-dialog .category-tabs { gap: 8px; padding: 12px 0 10px; margin-right: -28px; scroll-padding: 8px; padding-right: 28px; }
#catalog-dialog .category-tab { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 9px 14px; border: 1px solid #394a28; background: #182111; border-radius: 13px; font-size: 12px; color: #b0bba3; transition: transform .18s,background .18s; }
#catalog-dialog .category-tab small { margin: 0; font-size: 10px; }
#catalog-dialog .category-tab.active { background: #d5ff66; color: #132006; border-color: #d5ff66; box-shadow: inset 0 2px 2px #f0ffb7; }
#catalog-dialog .category-tab:active { transform: scale(.96); }
.catalog-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior-y: contain; padding: 0 28px 28px; scrollbar-width: thin; scrollbar-color: #44592c transparent; }
#catalog-dialog .result-line { margin: 0 0 10px; min-height: 32px; font-size: 11px; color: #aab69e; }
#catalog-dialog .result-line button { font-size: 11px; min-height: 32px; padding: 5px 0 5px 12px; color: #aab69e; }
#catalog-dialog .game-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
#catalog-dialog .catalog-card { position: relative; min-width: 0; padding: 0; border: 1px solid #a5c959; border-radius: 19px; background: #10180d; overflow: hidden; box-shadow: inset 0 0 15px #b6ed3008; }
#catalog-dialog .catalog-card .catalog-open { display: flex; flex-direction: column; align-items: stretch; width: 100%; height: 100%; min-height: 252px; text-align: left; border: 0; padding: 0; background: transparent; color: #fffde9; }
.catalog-card-art { height: 113px; flex: none; display: block; position: relative; overflow: hidden; }
#catalog-dialog .catalog-card-art>img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(1.15); pointer-events: none; filter: none; }
.catalog-card-art>img.catalog-art-cards,.catalog-card-art>img.catalog-art-hands,.catalog-card-art>img.catalog-art-party,.catalog-card-art>img.catalog-art-traditional { mix-blend-mode: lighten; }
.catalog-card-info { display: flex; flex: 1; flex-direction: column; padding: 0 13px 0; }
#catalog-dialog .catalog-card h3 { margin: 2px 0 5px; font: 400 23px/1.3 ArcadeDisplay,'PingFang SC',sans-serif; letter-spacing: -.6px; -webkit-text-stroke: .55px currentColor; }
#catalog-dialog .sheet-header h2,#tools-dialog .sheet-header h2,#tool-dialog .tool-title,#detail-dialog .detail-header h2 { -webkit-text-stroke: .35px currentColor; paint-order: stroke fill; }
#catalog-dialog .catalog-card h3 { paint-order: stroke fill; }
.game-slide[data-game=xiaojiepai] h2 { -webkit-text-stroke: .7px currentColor; paint-order: stroke fill; }
.catalog-card-info>p { color: #bcc6b2; font-size: 12px; line-height: 1.55; margin: 0 0 10px; }
#catalog-dialog .catalog-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; color: #b2bea6; margin: auto 0 0; font-size: 10px; border-top: 1px solid #35472a; padding: 9px 0; }
.catalog-meta span { display: inline-flex; align-items: center; gap: 4px; }
.catalog-meta img { width: 13px; height: 13px; filter: invert(80%); }
.catalog-card-action { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #35472a; padding: 10px 0 12px; min-height: 40px; font-size: 12px; font-weight: 700; color: #d5ff66; }
.catalog-card-action>img { width: 18px; height: 18px; filter: invert(90%); }
#catalog-dialog .catalog-card .favorite-button { position: absolute; z-index: 2; top: 3px; right: 3px; display: grid; place-items: center; width: 42px; height: 42px; min-height: 42px; min-width: 42px; border: 0; border-radius: 50%; padding: 10px; background: #0b100b88; }
#catalog-dialog .favorite-button img { width: 22px; height: 22px; filter: invert(80%); }
#catalog-dialog .favorite-button[aria-pressed=true] { background: #3a501e; }
#catalog-dialog .favorite-button[aria-pressed=true] img { filter: invert(85%) sepia(80%) saturate(440%) hue-rotate(25deg); }
#catalog-dialog .catalog-open:focus-visible { outline-offset: -4px; }
#catalog-dialog .catalog-open:hover .catalog-card-art>img { transform: scale(1.22) rotate(-3deg); }
.catalog-card-art>img { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
#catalog-dialog .load-more { border-radius: 24px; background: #1b2912; border-color: #5d7737; font-size: 12px; min-height: 44px; margin-top: 22px; }
#catalog-dialog .empty-state { border: 1px dashed #42572d; border-radius: 20px; padding: 36px 15px; margin-top: 10px; }
.catalog-empty-icon { width: 38px; height: 38px; filter: invert(72%); }
/* Shared rule and tool surfaces keep the same material, typography and controls. */
#detail-dialog,#tool-dialog,#tools-dialog { background: #0e160c; border: 1px solid #587336; border-radius: 24px; box-shadow: 0 24px 90px #000b; }
#detail-dialog .dialog-close,#tool-dialog .dialog-close,#tools-dialog .icon-button { border-color: #526735; background: #1b2912; width: 42px; height: 42px; }
#detail-dialog .detail-header { padding-right: 25px; }
#detail-dialog .detail-header h2,#tools-dialog .sheet-header h2,#tool-dialog .tool-title { font: 400 32px/1.25 ArcadeDisplay,'PingFang SC',sans-serif; margin-top: 12px; }
.detail-art { width: 100%; height: 125px; object-fit: contain; display: block; margin: -10px 0 10px; mix-blend-mode: lighten; }
#detail-dialog .detail-header p { font-size: 13px; color: #b4bea9; }
#detail-dialog .detail-meta span { background: #233418; color: #d1dfc1; border: 1px solid #3f582b; border-radius: 14px; padding: 6px 10px; font-size: 11px; }
#detail-dialog .detail-rules { list-style: none; padding: 0; counter-reset: rules; display: grid; gap: 12px; }
#detail-dialog .detail-rules li { position: relative; counter-increment: rules; padding: 14px 14px 14px 44px; border: 1px solid #344b24; border-radius: 15px; background: #17230f; margin: 0; font-size: 13px; line-height: 1.8; }
#detail-dialog .detail-rules li::before { content: counter(rules,decimal-leading-zero); position: absolute; left: 13px; top: 17px; color: #d5ff66; font: 700 11px/1.5 ui-monospace,monospace; }
#detail-dialog .detail-tip { border-radius: 15px; background: #223316; border-color: #587735; font-size: 12px; }
#detail-dialog .detail-actions .button { font-size: 12px; border-radius: 24px; min-height: 44px; }
#detail-dialog .detail-source { line-height: 1.8; }
#tools-dialog .tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#tools-dialog .tools-grid>button { position: relative; min-width: 0; min-height: 205px; padding: 18px 14px; flex-direction: column; align-items: flex-start; gap: 12px; border: 1px solid #506e31; border-radius: 20px; background: #14200e; }
#tools-dialog .tools-grid>button>img:first-child { width: 44px; height: 44px; }
#tools-dialog .tools-grid>button>img:last-child { position: absolute; width: 20px; height: 20px; right: 14px; bottom: 18px; }
#tools-dialog .tools-grid b { font: 400 clamp(17px,5vw,20px)/1.25 ArcadeDisplay,'PingFang SC',sans-serif; letter-spacing: -.35px; margin: 0 0 8px; }
#tools-dialog .tools-grid small { font-size: 11px; line-height: 1.7; display: block; padding-right: 5px; }
#tool-dialog .tool-subtitle { color: #b0bda2; font-size: 12px; }
#tool-dialog .pt-tool { --pt-bg: #0b100b; --pt-panel: #17250f; --pt-accent: #d5ff66; --pt-on-accent: #142006; --pt-ink: #fffde9; --pt-muted: #acb99e; --pt-line: #435d2b; }
#tool-dialog .pt-btn,#tool-dialog .pt-select,#tool-dialog .pt-preset { border-radius: 22px; }
#tool-dialog .pt-btn-primary { box-shadow: inset 0 2px 1px #f1ffc2,inset 0 -3px 0 #91b138; }
#tool-dialog .pt-dice-stage,#tool-dialog .pt-card-stage,#tool-dialog .pt-prompt-box { border-radius: 20px; }
#tool-dialog .pt-tab[aria-pressed=true] { border-color: #7e9e42; background: #293e17; }
#room-overlay .rm-tab[aria-selected=true] { color: #142006; background: #d5ff66; }
#room-overlay .rm-tabs,#room-overlay .rm-input,#room-overlay .rm-select { border-radius: 15px; border-color: #415c2a; }
#room-overlay .rm-game-header h1 { color: #fffde9; }
#room-overlay .rm-round { color: #d5ff66; border-color: #425b2c; background: #1b2912; border-radius: 13px; }
#room-overlay .rm-btn:not(.rm-btn-small) { border-radius: 24px; }
#room-overlay .rm-stage-caption { color: #d4dfc9; }
@media(max-width:760px) {
  #catalog-dialog { width: 100%; height: 100dvh; margin: 0; max-width: none; max-height: none; border: 0; border-radius: 0; }
  .catalog-top { padding: max(20px,env(safe-area-inset-top)) 20px 0; }
  #catalog-dialog .sheet-header { min-height: 89px; margin-bottom: 12px; }
  #catalog-dialog .sheet-header h2 { font-size: 34px; }
  .catalog-mascot { width: 118px; height: 92px; right: 32px; top: 6px; }
  #catalog-dialog .category-tabs { margin-right: -20px; padding-right: 20px; }
  .catalog-scroll { padding: 0 20px max(24px,env(safe-area-inset-bottom)); }
  #catalog-dialog .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  #catalog-dialog .catalog-card .catalog-open { min-height: 247px; }
  .catalog-card-art { height: 111px; }
  #tools-dialog .tools-grid>button { min-height: 190px; }
}
@media(min-width:1000px) {
  #catalog-dialog .game-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #catalog-dialog .catalog-card .catalog-open { min-height: 263px; }
  #catalog-dialog .catalog-card-art { height: 125px; }
}
@media(max-width:360px) {
  .catalog-top { padding-left: 15px; padding-right: 15px; }
  .catalog-scroll { padding-left: 15px; padding-right: 15px; }
  .catalog-mascot { opacity: .75; right: 28px; width: 95px; }
  #catalog-dialog .sheet-header h2 { font-size: 30px; }
  #catalog-dialog .catalog-card h3 { font-size: 19px; }
  .catalog-card-info { padding-inline: 10px; }
  #tools-dialog .tools-grid { grid-template-columns: 1fr; }
  #tools-dialog .tools-grid>button { min-height: 150px; }
}
@media(max-height:700px) and (max-width:760px) {
  .catalog-top { padding-top: max(15px,env(safe-area-inset-top)); }
  #catalog-dialog .sheet-header { min-height: 76px; margin-bottom: 8px; }
  #catalog-dialog .sheet-header h2 { font-size: 30px; }
  .catalog-intro { font-size: 12px; margin-top: 7px; }
  .catalog-mascot { height: 80px; }
  #catalog-dialog .category-tabs { padding-top: 9px; padding-bottom: 7px; }
}
@media(prefers-reduced-motion:reduce) { .catalog-card-art>img,#catalog-dialog .category-tab { transition: none; } }