/* Community showcase — image-led composition based on the approved reference. */
body .final-screen {
  position:relative;
  min-height:calc(100vh - 72px);
  min-height:calc(100lvh - 72px);
  isolation:isolate;
  background:
    radial-gradient(circle at 72% 38%,rgba(44,66,82,.16),transparent 36%),
    linear-gradient(135deg,#091117 0%,#0c141a 48%,#091014 100%);
}
body .community-background {
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
body .community-background::after {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,12,17,.88),rgba(5,12,17,.68) 48%,rgba(5,12,17,.78)),linear-gradient(0deg,rgba(4,10,14,.62),transparent 42%,rgba(4,10,14,.28));
  content:'';
}
body .community-background img {
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  filter:brightness(.72) saturate(.82);
}
body .final-screen > .world,
body .final-screen > footer { position:relative;z-index:1; }
body .community-showcase {
  display:grid;
  width:min(1400px,100%);
  min-width:0;
  min-height:0;
  grid-template-columns:clamp(270px,25vw,360px) minmax(0,1fr);
  grid-template-areas:
    '. feature'
    'heading feature'
    'tabs feature'
    'copy feature'
    '. feature';
  grid-template-rows:1fr auto auto auto 1fr;
  column-gap:clamp(30px,3.5vw,54px);
  margin-inline:auto;
}
body .world .community-heading {
  grid-area:heading;
  max-width:none;
  margin:0;
  text-align:left;
}
body .world .community-heading h2 {
  margin:0 0 clamp(8px,1.4lvh,14px);
  color:#eee8dd;
  font:400 clamp(30px,2.2vw,32px)/1.02 var(--display,Georgia,serif);
  letter-spacing:-.025em;
  text-wrap:balance;
  white-space:normal;
}
body .world .community-heading p {
  max-width:38ch;
  margin:0;
  color:#999c9d;
  font:400 clamp(11px,1vw,13px)/1.6 Arial,sans-serif;
  text-wrap:pretty;
}
body .community-tabs {
  grid-area:tabs;
  display:flex;
  align-items:center;
  align-self:start;
  gap:6px;
  margin:clamp(16px,2.6lvh,26px) 0 clamp(14px,2.4lvh,24px);
  padding:0;
  overflow:visible;
  border:0;
}
body .community-tabs > span { display:none; }
body .community-tabs button {
  position:relative;
  min-width:0;
  padding:8px 10px 9px;
  background:rgba(7,13,17,.42);
  color:#999b9a;
  border:1px solid rgba(190,154,97,.16);
  font:400 clamp(10px,.9vw,12px)/1 Arial,sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
body .community-tabs button[aria-selected='true'] {
  background:linear-gradient(180deg,rgba(129,84,43,.34),rgba(70,44,27,.28));
  color:#edc982;
  border-color:rgba(216,174,104,.58);
  box-shadow:inset 0 0 0 1px rgba(255,222,157,.05);
}
body .community-tabs button:focus-visible { outline:1px solid #d8ae68;outline-offset:4px; }
body .community-feature-copy {
  grid-area:copy;
  align-self:start;
  min-width:0;
  padding-top:2px;
}
body .community-feature-copy h3 {
  margin:0 0 5px;
  color:#eee8dd;
  font:400 clamp(22px,2vw,29px)/1.12 var(--display,Georgia,serif);
  text-wrap:balance;
}
body .community-feature-credit {
  margin:0 0 clamp(13px,2lvh,20px)!important;
  color:#c49a5d!important;
  font:400 clamp(10px,.9vw,12px)/1.4 Arial,sans-serif!important;
}
body .community-feature-copy > p:not(.community-feature-credit) {
  max-width:37ch;
  margin:0;
  color:#a7a8a5;
  font:400 clamp(11px,1vw,13px)/1.65 Arial,sans-serif;
  text-wrap:pretty;
}
body .community-work-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(14px,2.4lvh,24px);
  padding:5px 0 7px;
  background:transparent;
  color:#d8d1c5;
  border:0;
  border-bottom:1px solid rgba(208,168,97,.55);
  font:400 clamp(11px,1vw,13px)/1 Arial,sans-serif;
  cursor:pointer;
}
body .community-work-link span { color:#d8ae68;font-size:18px;line-height:.7; }
body .community-work-link:focus-visible { outline:1px solid #d8ae68;outline-offset:4px; }
body .community-feature {
  position:relative;
  grid-area:feature;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#070b0f;
  border:2px solid rgba(215,170,94,.82);
  isolation:isolate;
}
body .community-feature-media {
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  background:#0a0f12;
}
body .community-feature::after {
  position:absolute;
  z-index:2;
  inset:0;
  background:linear-gradient(180deg,rgba(3,8,11,.02) 55%,rgba(3,8,11,.25));
  content:'';
  pointer-events:none;
}
body .community-feature-media > img,
body .community-feature-media > iframe {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  border:0;
}
body .community-feature.image-card,
body .community-feature.video-card { cursor:pointer; }
body .community-feature.video-card { display:block; padding:0; }
body .community-feature.video-card iframe { pointer-events:none; }
body .community-feature .video-play {
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  display:grid;
  width:58px;
  height:58px;
  place-items:center;
  padding-left:4px;
  background:rgba(8,13,17,.72);
  color:#e2bb76;
  border:1px solid rgba(224,185,116,.72);
  transform:translate(-50%,-50%);
}
body .community-feature-empty {
  position:absolute;
  top:50%;
  left:50%;
  color:rgba(210,174,108,.3);
  font:400 clamp(54px,7vw,100px)/1 Georgia,serif;
  transform:translate(-50%,-50%);
}
body .community-audio-feature .community-feature-media > img { filter:brightness(.72) saturate(.82); }
body .community-audio-feature .community-feature-media > .eos-audio-player {
  position:absolute;
  z-index:4;
  right:clamp(18px,3vw,40px);
  bottom:clamp(18px,3vw,36px);
  left:clamp(18px,3vw,40px);
  display:grid;
  grid-template-columns:38px 42px minmax(60px,1fr) 42px 38px;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  background:rgba(8,13,16,.9);
  border:1px solid rgba(210,169,111,.55);
}
body .community-audio-feature .eos-audio-player audio { display:none; }
body .community-audio-feature .eos-audio-player button {
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  padding:0;
  background:#6d4b32;
  color:#f6dfb9;
  border:1px solid #b98b58;
  border-radius:50%;
}
body .community-audio-feature .audio-current,
body .community-audio-feature .audio-duration { color:#d5cbbb;font:11px/1 Arial,sans-serif;text-align:center; }
body .community-audio-feature .audio-progress { width:100%;accent-color:#d2a766; }
body .community-audio-feature .audio-mute svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8; }
body .final-screen footer::before {
  position:absolute;
  z-index:2;
  top:0;
  right:0;
  left:0;
  height:1px;
  background:linear-gradient(90deg,rgba(198,160,100,.25),rgba(198,160,100,.62) 28%,#d4af70 50%,rgba(198,160,100,.62) 72%,rgba(198,160,100,.25));
  content:'';
  box-shadow:0 -1px 5px rgba(177,132,70,.18);
  pointer-events:none;
}
body .final-screen footer {
  height:72px!important;
  min-height:72px!important;
  padding-block:14px!important;
}
body .community-rail-shell {
  display:grid;
  width:min(1400px,100%);
  min-width:0;
  grid-template-columns:36px minmax(0,1fr) 36px;
  gap:clamp(8px,1.2vw,16px);
  align-items:center;
  margin-inline:auto;
}
body .world .community-rail {
  display:flex;
  width:100%;
  min-width:0;
  height:100%;
  min-height:0;
  align-items:stretch;
  gap:clamp(8px,1vw,13px);
  margin:0;
  padding:2px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
body .world .community-rail::-webkit-scrollbar { display:none; }
body .community-thumb {
  position:relative;
  width:clamp(145px,15vw,220px);
  height:100%;
  min-width:clamp(145px,15vw,220px);
  flex:0 0 clamp(145px,15vw,220px);
  padding:3px;
  overflow:hidden;
  background:#0a1014;
  color:#9c8059;
  border:1px solid rgba(171,156,132,.34);
  scroll-snap-align:center;
  cursor:pointer;
  transition:border-color 180ms ease-out,filter 180ms ease-out;
}
body .community-thumb::after {
  position:absolute;
  inset:3px;
  border:1px solid transparent;
  content:'';
  pointer-events:none;
}
body .community-thumb img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.74) saturate(.74);
  transition:filter 180ms ease-out;
}
body .community-thumb > span {
  display:grid;
  width:100%;
  height:100%;
  place-items:center;
  background:linear-gradient(145deg,#172026,#0b1115);
  font:32px/1 Georgia,serif;
}
body .community-thumb.is-active { border-color:#c99e5b; }
body .community-thumb.is-active::after { border-color:rgba(226,184,112,.42); }
body .community-thumb.is-active img { filter:brightness(.96) saturate(.9); }
body .community-thumb:focus-visible { outline:2px solid #ddb46f;outline-offset:2px; }
body .community-rail-arrow {
  display:grid;
  width:36px;
  height:54px;
  place-items:center;
  padding:0 0 3px;
  background:transparent;
  color:#d3a865;
  border:0;
  font:300 38px/1 Georgia,serif;
  cursor:pointer;
  transition:color 180ms ease-out,opacity 180ms ease-out;
}
body .community-rail-arrow:disabled { color:#5f5548;opacity:.42;cursor:default; }
body .community-rail-arrow:focus-visible { outline:1px solid #d3a865; }
body .world .gallery-empty {
  display:grid;
  width:100%;
  min-height:100%;
  place-items:center;
  margin:0;
  color:#89867f;
  border:1px solid rgba(185,139,98,.22);
  font:italic 14px/1.4 Georgia,serif;
}
body .community-all-button {
  position:relative;
  isolation:isolate;
  justify-self:center!important;
  width:min(292px,100%);
  height:60px;
  margin:0!important;
  padding:0 26px!important;
  background:linear-gradient(180deg,rgba(91,58,40,.18),rgba(39,25,19,.2)),url('/assets/ui/game-button-texture.webp') center/cover!important;
  color:#d9bb88!important;
  border:0!important;
  box-shadow:none!important;
  font:400 12px/1 Arial,sans-serif;
  letter-spacing:.015em;
  -webkit-mask:url('/assets/ui/game-button-shape.svg') center/100% 100% no-repeat;
  mask:url('/assets/ui/game-button-shape.svg') center/100% 100% no-repeat;
}
body .community-all-button::before,
body .community-all-button::after {
  position:absolute;
  z-index:2;
  inset:0;
  content:'';
  pointer-events:none;
  -webkit-mask:url('/assets/ui/game-button-frame.svg') center/100% 100% no-repeat;
  mask:url('/assets/ui/game-button-frame.svg') center/100% 100% no-repeat;
}
body .community-all-button::before {
  background:linear-gradient(180deg,#f6dda4,#bf8440 55%,#f0c67c);
  filter:drop-shadow(0 0 4px rgba(235,166,48,.5));
}
body .community-all-button::after {
  background:linear-gradient(105deg,transparent 8%,rgba(255,219,122,.18) 30%,#fff8c9 49%,#ffc955 58%,transparent 88%);
  background-position:-70% 0;
  background-repeat:no-repeat;
  background-size:38% 100%;
  filter:drop-shadow(0 0 5px rgba(255,207,91,.7));
  animation:gameButtonFrameShimmer 3.4s linear infinite;
}
body .community-all-button span { margin-left:9px;color:#e2bd78;font-size:17px;line-height:.7; }
body .community-all-button:focus-visible { outline:2px solid #e0b874;outline-offset:4px; }

@media (min-width:768px) {
  body .final-screen {
    height:calc(100vh - 72px);
    height:calc(100lvh - 72px);
    min-height:calc(100vh - 72px);
    min-height:calc(100lvh - 72px);
    max-height:calc(100vh - 72px);
    max-height:calc(100lvh - 72px);
  }
  body .final-screen > .world {
    display:grid!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    grid-template-rows:minmax(330px,min(53lvh,510px)) clamp(76px,12lvh,100px) 60px!important;
    gap:clamp(10px,1.6lvh,16px)!important;
    align-content:center!important;
    padding:clamp(16px,2.5lvh,26px) 7vw clamp(14px,2.2lvh,22px)!important;
  }
}

@media (hover:hover) and (pointer:fine) {
  body .community-tabs button:hover { background:rgba(111,72,39,.24);color:#e0bd7d;border-color:rgba(198,158,95,.4); }
  body .community-work-link:hover { color:#f0e5d3;border-color:#e0b46c; }
  body .community-thumb:hover { border-color:#a98250; }
  body .community-thumb:hover img { filter:brightness(.92) saturate(.86); }
  body .community-rail-arrow:not(:disabled):hover { color:#f0c980; }
  body .community-all-button:hover { color:#f0d7aa!important;filter:brightness(1.08);transform:none!important; }
}

@media (max-width:767px) {
  body .final-screen > .world {
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:92px 16px 30px!important;
  }
  body .community-showcase {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:'heading' 'tabs' 'feature' 'copy';
    grid-template-rows:auto auto auto auto;
    align-content:start;
    gap:0;
  }
  body .world .community-heading { text-align:center; }
  body .world .community-heading h2 { margin-bottom:10px;font-size:clamp(31px,9.5vw,39px);text-wrap:balance;white-space:normal; }
  body .world .community-heading p { max-width:46ch;margin-inline:auto;font-size:11px;line-height:1.55; }
  body .community-tabs {
    width:100%;
    max-width:100%;
    flex-wrap:nowrap!important;
    justify-content:flex-start;
    gap:10px;
    margin:20px 0 16px;
    padding:0 1px 3px;
    overflow-x:auto!important;
    scrollbar-width:none;
  }
  body .community-tabs::-webkit-scrollbar { display:none; }
  body .community-tabs button { flex:0 0 auto!important;padding:8px 9px 9px;font-size:10px; }
  body .community-feature { width:100%;height:auto;aspect-ratio:16/10; }
  body .community-feature-copy { padding-top:17px; }
  body .community-feature-copy h3 { margin-bottom:5px;font-size:25px; }
  body .community-feature-credit { margin-bottom:11px!important;font-size:10px!important; }
  body .community-feature-copy > p:not(.community-feature-credit) { font-size:11px;line-height:1.55; }
  body .community-work-link { margin-top:14px;font-size:11px; }
  body .community-audio-feature .community-feature-media > .eos-audio-player {
    right:10px;
    bottom:10px;
    left:10px;
    grid-template-columns:34px minmax(48px,1fr) 34px;
    gap:5px;
    padding:8px;
  }
  body .community-audio-feature .audio-current,
  body .community-audio-feature .audio-duration { display:none; }
  body .community-rail-shell {
    grid-template-columns:30px minmax(0,1fr) 30px;
    gap:5px;
    margin-top:24px;
  }
  body .world .community-rail { height:76px;gap:8px; }
  body .community-thumb {
    width:128px;
    min-width:128px;
    height:72px;
    flex-basis:128px;
  }
  body .community-rail-arrow { width:30px;height:48px;font-size:31px; }
  body .community-all-button { display:flex;width:min(286px,calc(100% - 48px));height:60px;margin:18px auto 0!important;font-size:11px; }
  body .final-screen footer { height:72px!important;min-height:72px!important;padding:14px 22px!important; }
}

@media (max-width:360px) {
  body .final-screen > .world { padding-inline:12px!important; }
  body .world .community-heading h2 { font-size:30px; }
  body .community-tabs { gap:8px; }
  body .community-tabs button { font-size:9px; }
  body .community-rail-shell { grid-template-columns:26px minmax(0,1fr) 26px;gap:3px; }
  body .community-rail-arrow { width:26px; }
  body .community-thumb { width:116px;min-width:116px;flex-basis:116px; }
}

@media (prefers-reduced-motion:reduce) {
  body .community-tabs button::after,
  body .community-thumb,
  body .community-thumb img,
  body .community-rail-arrow { transition:none; }
  body .world .community-rail { scroll-behavior:auto; }
  body .community-all-button::after { animation:none; }
}