/* Category components: surface, replaceable transparent artwork, copy, count. */
#games .category-lead {
  --category-accent:#ff8556;
  position:relative;
  display:block;
  padding:0;
  background:none;
  overflow:visible;
  isolation:isolate;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
#games #mmo .category-lead {--category-accent:#8171e3}
#games #tabletop .category-lead {--category-accent:#55bfa3}
#games #shooter .category-lead {--category-accent:#43a9bf}
#games #rhythm .category-lead {--category-accent:#ee729c}
#games #fighting .category-lead {--category-accent:#e86157}
#games #threads .category-lead {--category-accent:#ed7ca8}
#games #racing .category-lead {--category-accent:#42c9cb}
#games #management .category-lead {--category-accent:#f58a38}
#games #serious-cooking .category-lead {--category-accent:#d95744}
#games #horror .category-lead {--category-accent:#7d5ca4}
#games #threads .category-title {max-width:7.5em;font-size:clamp(20px,1.7vw,31px);line-height:1.2;overflow-wrap:normal}
#games .category-lead * {-webkit-tap-highlight-color:transparent}
#games .category-lead::before,#games .category-lead::after {content:none}
.category-surface {
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  background:#ffe51c;
  border:1px solid #ffed6d55;
  box-shadow:0 6px 18px #0002;
  transition:box-shadow .22s;
}
.category-surface::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(119deg,transparent 0 54%,#fff8 54% 55%,#17171b 55% 58%,var(--category-accent) 58% 90%,#17171b 90% 92%,#fff9 92% 93%,transparent 93%);
}
.category-surface::after {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(#15151938 1px,transparent 1.4px) 0 0/7px 7px;
  clip-path:polygon(72% 0,100% 0,100% 100%,52% 100%);
}
#games .category-art-layer {
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
}
#games .category-illustration {
  position:absolute;
  z-index:2;
  right:-1%;top:0;
  width:51%;height:120%;
  object-fit:contain;
  pointer-events:none;
  transform:none;
  transform-origin:60% 100%;
  filter:none;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),filter .24s;
}
#games .category-copy {
  position:absolute;
  z-index:3;
  inset:0 auto 0 6%;
  width:60%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:7px;
  transform-origin:left center;
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
}
#games .category-title {
  font-family:'Noto Sans TC',sans-serif;
  font-size:clamp(23px,2.2vw,42px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.06em;
  color:#fffdf2;
  background:#16161a;
  padding:3px 9px 5px;
  transform:rotate(-4deg) skew(-5deg);
  box-shadow:3px 3px 0 #fff9;
  margin:0;
  text-shadow:none;
  -webkit-text-stroke:0;
  paint-order:stroke fill;
}
#games .category-description {
  color:#18181c;
  font-size:clamp(10px,.85vw,15px);
  font-weight:600;
  line-height:1.5;
  margin:0;
}
#games .category-count {
  color:#18181c;
  font:500 clamp(9px,.7vw,12px) 'Noto Sans TC',sans-serif;
  font-style:normal;
  margin:3px 0 0;
  padding:3px 9px;
  border:1px solid #17171b99;
  border-radius:999px;
  background:#fff9;
}
#games .category-lead:focus-visible .category-surface {outline:2px solid #fff;outline-offset:3px}
/* Large artwork fills the card; its independent mask opens only on focus. */
@media(min-width:851px) and (hover:hover) and (pointer:fine) {
  #games .category-lead:hover {transform:scale(1.025);z-index:9}
  #games .category-lead:hover .category-art-layer {overflow:visible}
  #games .category-lead:hover .category-illustration {transform:translateY(-12%) rotate(-6deg) scale(1.2);filter:drop-shadow(0 12px 8px #11212d55)}
  #games .category-lead:hover .category-copy {transform:scale(1.12)}
  #games .category-lead:hover .category-surface {box-shadow:0 12px 24px #0005}
}
#games .category-lead:focus-visible,#games .category-lead.is-focused {transform:scale(1.025);z-index:9}
#games .category-lead:focus-visible .category-art-layer,#games .category-lead.is-focused .category-art-layer {overflow:visible}
#games .category-lead:focus-visible .category-illustration,#games .category-lead.is-focused .category-illustration {transform:translateY(-12%) rotate(-6deg) scale(1.2);filter:drop-shadow(0 12px 8px #11212d55)}
#games .category-lead:focus-visible .category-copy,#games .category-lead.is-focused .category-copy {transform:scale(1.12)}
@media(min-width:851px) and (max-width:1100px) {
  #games .category-copy {gap:4px}
  #games .category-description {font-size:9px}
  #games .category-title {font-size:23px}
  #games .category-count {margin-top:0;padding:2px 7px;font-size:9px}
}
@media(max-width:850px) {
  main {overflow-x:clip}
  .directory {padding-bottom:calc(60px + var(--category-tail-room,0px))}
  #games .category-lead {height:120px;min-height:120px;border-radius:0;margin-bottom:14px}
  #games .category-copy {left:6%;width:60%;gap:6px}
  #games .category-title {font-size:29px}
  #games #threads .category-title {font-size:25px;max-width:6.6em}
  #games .category-description {font-size:11px}
  #games .category-count {font-size:10px;margin-top:2px}
  #games .category-illustration {right:0;width:46%}
  #games .category-lead.is-focused,#games .category-lead:focus-visible {transform:scale(1.015)}
  #games .category-lead.is-focused .category-copy,#games .category-lead:focus-visible .category-copy {transform:scale(1.1)}
}
.category-rail {position:relative;min-width:0;flex:1}
.rail-arrow {display:none;position:absolute;z-index:10;top:50%;transform:translateY(-50%);width:38px;height:38px;padding:7px;border:1px solid transparent;border-radius:50%;background:transparent;color:#f3f5f2;cursor:pointer;box-shadow:none;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .18s ease,transform .18s ease,color .18s ease,background .18s ease,border-color .18s ease}
.rail-arrow svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #000b);pointer-events:none}
.rail-prev {left:0}.rail-next {right:0}
.rail-prev svg {transform:rotate(180deg)}
.rail-arrow[aria-disabled="true"] {color:#a0a8a1;cursor:default}
.rail-prev[aria-hidden="true"] {opacity:0}
.rail-arrow:focus-visible {outline:2px solid #c8ff3d;outline-offset:3px;background:#0002}
@media(hover:hover) and (pointer:fine) {
 .rail-arrow:not([aria-disabled="true"]):hover {transform:translateY(-50%) scale(1.08);color:#c8ff3d;border-color:#c8ff3d;background:#0002}
}
.rail-arrow:not([aria-disabled="true"]):active {transform:translateY(-50%) scale(.94)}
@media(min-width:851px) {
  #games .category-rail {--rail-bleed:clamp(14px,1.5vw,36px)}
  #games .category-rail.has-rail-controls .rail-arrow {display:flex;align-items:center;justify-content:center}
  #games .category-rail .game-row {
    grid-template-columns:none!important;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 72px)/4);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--rail-bleed);
    scrollbar-width:none;
    width:calc(100% + 2 * var(--rail-bleed));
    margin:calc(-1 * var(--rail-bleed))!important;
    padding:var(--rail-bleed)!important;
  }
  #games .category-rail .game-row::-webkit-scrollbar {display:none}
  #games .category-rail .game {scroll-snap-align:start}
}
@media(max-width:850px) {.rail-arrow {display:none}}
.game-row .art video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;border-radius:inherit;pointer-events:none;transition:opacity .2s}
.game-row .game.preview-ready .art video {opacity:1}
@media(prefers-reduced-motion:reduce) {
  #games .category-lead,#games .category-illustration,#games .category-copy,#games .category-title,.category-surface,.rail-arrow {transition:none}
}