/* Shared with ScribbleScape and Model Match: warm surfaces and quiet edges. */
.home-page {
  --home-card: #35291f;
  --home-raised: #2a231b;
  --home-border: #8b7150;
  --home-title: #f3d49b;
  --home-ink: #ffe9bf;
  --home-muted: #c5ad8b;
}
/* The banner band behind this line is a mid-dark dusky orange, not the bright
   parchment it reads as at a glance, so dark type loses contrast rather than
   gaining it. Full-strength cream with a layered halo instead. */
.home-page .home-subtitle {
  color: var(--home-ink); opacity: 1;
  text-shadow: 0 1px 2px #000000f2, 0 0 10px #000000cc, 0 0 22px #0000008c;
}
.home-page .home-panel {
  background: var(--home-card);
  border: 1px solid #b18a4f;
  border-radius: 12px 8px 12px 8px;
  box-shadow: inset 0 0 0 3px #211b16, 0 14px 40px #0006;
  padding: 20px;
}
.home-page .home-panel-head { padding: 0 0 16px; margin-bottom: 18px; border-color: #5b4730; }
.home-page .home-panel-title { color: var(--home-title); font-size: 26px; }
.home-page .home-filters {
  gap: 4px; padding: 4px; flex-wrap: nowrap; background: #211b16;
  border: 1px solid #5b4730; border-radius: 7px; box-shadow: inset 0 2px 4px #0004;
}
.home-page .home-filter {
  min-height: 44px; min-width: 64px; padding: 8px 14px; margin: 0;
  color: var(--home-muted); background: transparent; border: 1px solid transparent;
  border-radius: 4px; box-shadow: none; font-size: 17px;
}
.home-page .home-filter:hover { color: var(--home-ink); background: #3b3025; }
.home-page .home-filter.active {
  background: #4a3825; color: var(--home-ink); border-color: #b18a4f;
  box-shadow: inset 0 1px 0 #ffffff10, 0 2px 0 #16110d;
}
.home-page :is(.home-filter,.home-game-card):focus-visible { outline: 2px solid #e8bd70; outline-offset: 4px; }
.home-page .home-game-grid { gap: 18px; align-items: stretch; }
.home-page .home-game-card {
  max-width: none; background: var(--home-raised); border: 1px solid var(--home-border);
  border-radius: 10px 6px 10px 6px; box-shadow: 0 3px 0 #1b1510;
}
.home-page .home-game-card::after { background: none; border: 0; box-shadow: inset 0 0 0 2px #211b1680; }
.home-page .home-game-card:hover {
  border-color: #d1ab70; box-shadow: 0 3px 0 #1b1510, 0 6px 16px #0006;
}
.home-page .home-game-card:active { transform: translateY(1px); box-shadow: 0 1px 0 #1b1510; }
.home-page .home-game-title { color: var(--home-title); text-align: left; padding: 14px 14px 0; font-size: 22px; }
.home-page .home-game-desc {
  color: var(--home-muted); text-align: left; padding: 8px 14px 16px;
  display: block; overflow: visible; font-size: 17px; line-height: 1.4;
}
/* styles.css warms the blurb on hover. Only its colour needs overriding: when
   the whole block was restated here it also outranked the featured card's own
   16px, so hovering resized that copy and reflowed it. */
.home-page .home-game-card:hover .home-game-desc { color: var(--home-muted); }
.home-page .home-game-modes {
  position: absolute; top: 8px; right: 8px; z-index: 2; max-width: calc(100% - 16px);
  display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; padding: 0;
}
.home-page .home-game-mode {
  color: #e8d5af; background: #211b16e6; border: 1px solid #8b7150;
  border-radius: 4px; font: 14px/1.2 'RuneScape Small', sans-serif; padding: 3px 7px;
  text-shadow: 0 1px 2px #000c;
}
.home-page .home-game-badge { color: #e8d5af; border-color: #8b7150; background: #211b16ed; }
.home-page .home-game-badge-new { color: #cce0b2; border-color: #71875b; }
.home-page .home-featured-cta {
  background: #365f2b; border: 1px solid #80a552; border-radius: 5px;
  color: #f4ecd6; box-shadow: inset 0 1px 0 #ffffff10, 0 2px 0 #19140f;
  min-height: 44px; padding: 10px 16px; align-items: center; justify-content: center;
}
/* A button chip read as a stray control dropped on the illustration, and the
   whole card is already the link. A gold wordmark over the scrim does the same
   job in the page's own display type. */
.home-page .home-game-play {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 0; padding: 0 2px 10px;
  color: #f3d49b; font: 34px/1 'Quill 8', 'RuneScape Bold', Arial, serif; letter-spacing: .02em;
  background: none; border: 0; border-radius: 0;
  box-shadow: none; text-shadow: 0 2px 8px #000000b3, 0 1px 0 #2a1d0e;
}
/* A ruled border under quill lettering looked mechanical. This is a filled SVG
   path — thick through the middle, tapering to nothing at both ends, with a
   little wander in the centreline — masked over currentColor so it inherits the
   hover colour like the text does. */
.home-page .home-game-play::after {
  content: ''; position: absolute; left: -7px; right: -7px; bottom: 1px; height: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%208'%20preserveAspectRatio='none'%3E%3Cpath%20d='M2,4.15C22,3,38,2.3,60,3C82,3.7,100,2.6,118,3.8L118,4.2C100,3.4,82,4.9,60,5.6C38,6.3,22,4.6,2,4.65Z'%20fill='%23000'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%208'%20preserveAspectRatio='none'%3E%3Cpath%20d='M2,4.15C22,3,38,2.3,60,3C82,3.7,100,2.6,118,3.8L118,4.2C100,3.4,82,4.9,60,5.6C38,6.3,22,4.6,2,4.65Z'%20fill='%23000'/%3E%3C/svg%3E") no-repeat center;
  mask-size: 100% 100%;
  filter: drop-shadow(0 1px 3px #000000a6);
}
/* Pointer devices get a proper hover state: the artwork drops back behind a
   scrim so the Play button can own the centre of the tile. Touch keeps the
   original always-visible pill, since a permanent scrim would just leave every
   card looking dimmed. */
@media (hover: hover) {
  .home-page .home-game-img-wrap::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(#14100b99, #14100bcc);
    opacity: 0; transition: opacity 160ms ease;
  }
  .home-page .home-game-card:hover .home-game-img-wrap::after,
  .home-page .home-game-card:focus-visible .home-game-img-wrap::after { opacity: 1; }
  /* The featured card answers hover with its own CTA, so dimming its hero art
     would just darken the image with no button arriving to justify it. */
  .home-page .home-featured-img-wrap::after { content: none; }
  .home-page .home-game-play {
    top: 50%; bottom: auto; left: 50%;
    transform: translate(-50%, -50%) scale(.94);
    transition: opacity 160ms ease, transform 160ms ease, color 140ms ease;
  }
  .home-page .home-game-card:hover .home-game-play,
  .home-page .home-game-card:focus-visible .home-game-play {
    opacity: 1; transform: translate(-50%, -50%) scale(1);
  }
  .home-page .home-game-card:hover .home-game-play { color: #ffe1a3; }
  .home-page .home-game-card:active .home-game-play { transform: translate(-50%, -50%) scale(.97); }
}
.home-page .home-game-card-featured {
  min-height: 0; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}
.home-page .home-featured-img-wrap {
  min-height: 0; height: 250px; aspect-ratio: auto; border-color: #5b4730;
}
.home-page .home-featured-img-wrap .home-game-img { object-fit: cover; image-rendering: auto; }
.home-page .home-featured-copy { background: #2a231b; padding: 20px 22px; }
.home-page .home-game-card-featured .home-game-title { padding: 0; font-size: 28px; }
.home-page .home-game-card-featured .home-game-desc { padding: 0; margin-top: 8px; font-size: 16px; }
.home-page .home-featured-cta { margin-top: 16px; font-size: 17px; }
.home-page .home-game-card-featured:hover .home-featured-cta { background: #447737; border-color: #9abd70; color: #fff0cd; filter: none; }
.home-page .home-game-card-hidden { display: none !important; }
@media (hover: none) {
  .home-page .home-game-play { display: none; }
}
@media (max-width: 760px) {
  .home-page .home-game-card-featured { grid-template-columns: 1fr; }
  .home-page .home-featured-img-wrap { height: auto; aspect-ratio: 16 / 7; }
  .home-page .home-featured-copy { padding: 16px; }
}
@media (max-width: 640px) {
  .home-page .home-panel { padding: 14px; }
  .home-page .home-panel-head { gap: 10px; }
  .home-page .home-game-grid { gap: 12px; }
  .home-page .home-game-title { padding: 12px 10px 0; font-size: 20px; }
  .home-page .home-game-desc { padding: 7px 10px 12px; font-size: 16px; }
  /* Two chips ate most of a two-column card's artwork at full size. */
  .home-page .home-game-modes { top: 6px; right: 6px; gap: 4px; }
  .home-page .home-game-mode { font-size: 13px; padding: 2px 5px; }
}
@media (max-width: 380px) {
  .home-page .home-panel-head { flex-direction: column; align-items: stretch; }
  .home-page .home-filter { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .home-game-card, .home-page .home-game-play { transition: none; }
  .home-page .home-game-card:active { transform: none; }
  .home-page .home-game-img-wrap::after { transition: none; }
}