/* Video reference layout. Scoped to the public site; admin retains its own UI. */
.public-body .card-price { margin: 0 0 10px; color: #bd9ac8; font-size: 11px; }
.public-body .card-price.is-paid { color: #ffacd3; font-size: 15px; font-weight: 750; }
.public-body .detail-price { color: #ffacd3; font-size: 28px; font-weight: 750; margin-top: 22px; }
.public-body .detail-price + .download-cta { margin-top: 12px; }
.public-body .purchase-panel { padding: 25px; border: 1px solid #9d5481; border-radius: 12px; background: linear-gradient(135deg,#422045,#24102e); }
.public-body .purchase-label { display: block; font-size: 12px; color: #d1acd4; }
.public-body .purchase-price { display: block; color: #ffc1e0; font-size: 30px; margin: 6px 0 18px; }
.public-body .purchase-panel p { margin: 15px 0 0; color: #c7abcd; font-size: 13px; line-height: 1.8; }
.public-body { padding-top: 158px; }
.public-body [id] { scroll-margin-top: 124px; }
.public-body .shell { width: 100%; max-width: 1440px; padding-left: 30px; padding-right: 30px; }
.public-body .site-header { position: fixed; inset: 0 0 auto; z-index: 40; background: #170c24f5; box-shadow: 0 4px 24px #0802114d; backdrop-filter: blur(16px); }
.public-body .header-inner { min-height: 103px; max-width: 1440px; padding: 16px 30px; flex-direction: row; gap: 20px; transition: min-height .22s, padding .22s; }
.public-body .site-brand { display: flex; align-items: center; justify-content: center; gap: 15px; color: #f6eafa; }
.public-body .brand-avatar { width: 58px; height: 58px; flex: 0 0 auto; filter: drop-shadow(0 3px 12px #c865a32b); transition: width .22s, height .22s; }
.public-body .brand-avatar-end { transform: scaleX(-1); }
.public-body .site-brand-copy { display: flex; align-items: center; gap: 20px; }
.public-body .site-brand-copy strong { font-size: 29px; font-weight: 800; letter-spacing: 1px; line-height: 1.2; transition: font-size .22s; }
.public-body .site-brand-copy strong span { color: #f58dbb; margin-left: 4px; }
.public-body .site-brand-copy small { color: #cbb2d6; font-size: 16px; font-weight: 400; letter-spacing: .3px; transition: font-size .22s; }
.public-body .header-tools { position: absolute; right: 30px; display: flex; align-items: center; gap: 9px; }
.public-body .header-tools .age-label { position: static; margin: 0; font-size: 10px; padding: 2px 5px; }
.public-body .header-search-toggle, .public-body .nav-toggle { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #67405f; border-radius: 7px; background: #ffffff05; color: #e9c4dd; padding: 8px; }
.public-body .header-search-toggle:hover, .public-body .nav-toggle:hover { background: #512541; border-color: #c06896; }
.public-body .nav-toggle { display: none; }
.public-body .site-header .site-nav { min-height: 55px; padding: 0 24px 3px; gap: 31px; flex-wrap: nowrap; transition: min-height .22s; }
.public-body .site-header .site-nav a { display: inline-flex; min-height: 52px; font-size: 14px; transition: min-height .22s, color .15s; }
.public-body .site-header.is-scrolled .header-inner { min-height: 59px; padding-top: 8px; padding-bottom: 8px; }
.public-body .is-scrolled .brand-avatar { width: 37px; height: 37px; }
.public-body .is-scrolled .site-brand-copy strong { font-size: 21px; }
.public-body .is-scrolled .site-brand-copy small { font-size: 13px; }
.public-body .site-header.is-scrolled .site-nav { min-height: 42px; }
.public-body .site-header.is-scrolled .site-nav a { min-height: 39px; }
.public-body .header-search { position: absolute; top: 100%; right: max(30px, calc((100vw - 1380px) / 2)); display: flex; gap: 10px; width: min(460px, calc(100% - 32px)); padding: 16px; background: #271332; border: 1px solid #704064; border-radius: 0 0 12px 12px; box-shadow: 0 14px 35px #09020c80; }
.public-body .header-search input { min-width: 0; flex: 1; background: #150b20; font-size: 16px; }
.public-body .header-search .button { flex-shrink: 0; font-size: 12px; }
.public-body .featured { margin-top: 24px; margin-bottom: 24px; }
.public-body .featured-viewport { height: clamp(290px, 28vw, 400px); border-radius: 12px; border-color: #76507470; touch-action: pan-y pinch-zoom; }
.public-body .featured-viewport a { touch-action: pan-y pinch-zoom; }
.public-body .featured-viewport:focus-visible { outline: 2px solid #ffacd3; outline-offset: 4px; }
.public-body .slider-ready .featured-slide { position: absolute; inset: 0; width: 100%; height: 100%; }
.public-body .slider-moving .featured-slide { transition: transform 600ms cubic-bezier(.22,.61,.36,1); will-change: transform; }
.public-body .featured-image { object-position: center 35%; }
.public-body .featured-shade { background: linear-gradient(0deg, #100617f5 0%, #190e25c4 22%, #170b232b 57%, #16092005 100%); }
.public-body .featured-copy { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 32px; height: auto; width: min(950px, 100%); max-width: none; margin: 0 auto; padding: 26px 45px 59px; text-align: center; }
.public-body .featured-copy .eyebrow { grid-column: 1; margin: 0; color: #ffd1e6; font-size: 10px; letter-spacing: 1.6px; text-shadow: 0 1px 5px #000; }
.public-body .featured-copy h2 { grid-column: 1; margin: 0; font-size: clamp(21px, 2.1vw, 29px); line-height: 1.35; letter-spacing: -.3px; font-weight: 750; text-wrap: balance; text-shadow: 0 2px 9px #0a0317; }
.public-body .featured-copy h2 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.public-body .featured-copy h2 a:hover { color: #f8b7d5; }
.public-body .featured-copy h2 span { color: #f4b6d5; }
.public-body .featured-copy p:not(.eyebrow) { grid-column: 1; max-width: 630px; margin: 1px auto 0; font-size: 13px; line-height: 1.65; -webkit-line-clamp: 2; color: #e1d3e8; text-shadow: 0 1px 5px #000; }
.public-body .featured-copy .button { grid-column: 2; grid-row: 1 / 4; min-width: 126px; min-height: 44px; margin: 0; border-radius: 7px; font-size: 11px; }
.public-body .featured-viewport > button { position: absolute; top: 45%; z-index: 3; display: grid; place-items: center; width: 37px; height: 48px; padding: 0; border: 1px solid #ffffff38; border-radius: 7px; background: #160c2a80; color: #fff; font-size: 18px; backdrop-filter: blur(5px); }
.public-body .featured-viewport > button:hover { background: #a43571d9; border-color: #e88cb8; }
.public-body .slider-prev { left: 18px; }
.public-body .slider-next { right: 18px; }
.public-body .featured-controls { position: absolute; z-index: 4; bottom: 13px; left: 50%; transform: translateX(-50%); min-height: 27px; gap: 13px; }
.public-body .featured-controls > .slider-pause { height: 26px; padding: 0 9px; border-color: #ffffff30; border-radius: 5px; background: #1a0c2e8c; color: #e7d5ee; font-size: 10px; }
.public-body .slider-dot { width: 9px; height: 9px; min-width: 9px; background: #cdb3ca91; border: 1px solid #f8e4f140; }
.public-body .slider-dot[aria-current="true"] { width: 24px; background: #ef91bd; border-color: #ffbee0; }
.public-body .community-note { justify-content: flex-start; align-items: center; gap: 15px; padding-top: 13px; padding-bottom: 13px; margin-top: 0; margin-bottom: 15px; background: linear-gradient(90deg, #3e1c3b90, #23102e3b); border-top: 1px solid #66375369; border-bottom: 1px solid #66375369; font-size: 13px; }
.public-body .notice-label { flex-shrink: 0; color: #ffafd2; font-size: 10px; font-weight: 750; letter-spacing: 1.2px; border-right: 1px solid #82506e; padding-right: 15px; }
.public-body .community-note p { flex: 1; line-height: 1.7; }
.public-body .community-note > a { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; text-decoration: none; white-space: nowrap; }
.public-body .notice-viewport { min-width: 0; overflow: hidden; }
.public-body .notice-content { display: inline-block; white-space: nowrap; vertical-align: top; }
.public-body .notice-scrolling .notice-content { animation: gamehub-notice var(--notice-duration, 18s) linear infinite alternate; }
.public-body .notice-scrolling:hover .notice-content,
.public-body .notice-scrolling:focus-within .notice-content,
.public-body .notice-paused .notice-content { animation-play-state: paused; }
.public-body .notice-pause { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #82506e; border-radius: 5px; background: #28132e; color: #ffd1e7; font-size: 12px; }
@keyframes gamehub-notice { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(calc(-1 * var(--notice-distance))); } }
.public-body .library { padding-top: 18px; }
.public-body .page-heading { margin-bottom: 19px; padding-bottom: 17px; }
.public-body .page-heading h1 { max-width: none; font-size: 23px; letter-spacing: -.3px; }
.public-body .library-total { display: flex; align-items: baseline; gap: 7px; min-width: auto; padding-left: 16px; margin-top: 0; font-size: 12px; color: #bda3cb; }
.public-body .library-total strong { font-size: 23px; }
.public-body .library-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; }
.public-body .catalog-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.public-body .filter-shortcut { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.public-body .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
.public-body .game-card { border: 1px solid #63396680; background: linear-gradient(145deg, #44224e, #261335 85%); border-radius: 14px; }
.public-body .game-card .cover { aspect-ratio: 16 / 9; border-radius: 13px 13px 0 0; }
.public-body .game-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.public-body .platform-badges { position: absolute; z-index: 1; display: flex; gap: 5px; left: 10px; top: 10px; }
.public-body .platform-badge { padding: 3px 8px; border: 1px solid #ffffff42; border-radius: 4px; color: #fff; background: #2969ac; font-size: 10px; line-height: 1.4; font-weight: 750; box-shadow: 0 2px 6px #0004; }
.public-body .platform-android, .public-body .platform-apk { background: #238449; }
.public-body .cover-status { top: auto; left: auto; right: 9px; bottom: 8px; max-width: calc(100% - 18px); padding: 3px 7px; border-radius: 4px; font-size: 9px; background: #392442e8; }
.public-body .card-content { padding: 15px 14px 16px; }
.public-body .game-card h2 { font-size: 15px; line-height: 1.5; min-height: 45px; margin-bottom: 10px; }
.public-body .card-version { color: #efafdb; font-size: .92em; font-weight: 550; }
.public-body .card-meta { display: flex; flex-direction: row; justify-content: space-between; gap: 6px; font-size: 10px; color: #cbb4d4; }
.public-body .card-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.public-body .card-tags { margin-top: 12px; gap: 5px; }
.public-body .card-tags .tag { background: #25122d80; color: #d7bbdf; border-color: #81528b60; font-size: 10px; }
.public-body .catalog-page-count { margin: 18px 0 0; text-align: center; font-size: 12px; color: #b89ac5; }
.public-body .filters { display: block; padding: 0; }
.public-body .filter-drawer { width: 100%; }
.public-body .filter-drawer > summary { display: none; }
.public-body .filter-panels { display: grid; gap: 18px; }
.public-body .sidebar-box { padding: 20px; border-color: #65375b99; border-radius: 12px; background: linear-gradient(145deg, #321839, #20112e); }
.public-body .filter-title { align-items: center; border-color: #6d3b5866; }
.public-body .filter-title h2 { font-size: 13px; color: #f5dfed; letter-spacing: .5px; }
.public-body .sidebar-tags .tag.active { border-color: #ee8bb9; color: #ffd8ef; background: #522943; }
.public-body .community-card { text-align: center; background: radial-gradient(ellipse at top, #513054, #20112e 80%); }
.public-body .community-card img { display: block; margin: 0 auto 13px; }
.public-body .community-card h2 { font-size: 18px; letter-spacing: 1px; margin-bottom: 8px; }
.public-body .community-card p { font-size: 13px; line-height: 1.8; color: #cbb2d7; }
.public-body .community-card .button { font-size: 12px; border-color: #a5618b; color: #f6badb; background: #6a2c582d; }
.public-body .site-footer { display: grid; grid-template-columns: 1.2fr .7fr 1fr; align-items: start; gap: 28px; padding: 32px max(30px, calc((100vw - 1380px) / 2)); border-top: 1px solid #7b405c; }
.public-body .footer-brand { display: flex; align-items: center; gap: 13px; }
.public-body .footer-brand strong { color: #ebcfeb; font-size: 18px; letter-spacing: 1px; }
.public-body .footer-brand p { margin: 6px 0 0; font-size: 11px; }
.public-body .site-footer nav { display: grid; gap: 8px; font-size: 12px; }
.public-body .site-footer nav a:hover { color: #ffb0d1; }
.public-body .footer-note { margin: 0; font-size: 12px; line-height: 1.9; }
.public-body .footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid #64315370; font-size: 11px; }
.public-body .mascot-widget { position: fixed; bottom: 8px; left: 4px; z-index: 25; width: 132px; height: 190px; pointer-events: none; }
.public-body .mascot-toggle { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; border-radius: 50%; }
.public-body .mascot-picture { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; mask-image: radial-gradient(ellipse at 50% 51%, #000 40%, #0009 61%, transparent 73%); animation: gamehub-float 4s ease-in-out infinite; }
@keyframes gamehub-float { 50% { transform: translateY(-6px); } }
.public-body .mascot-message { position: absolute; left: 100px; bottom: 125px; width: 225px; padding: 19px 16px 16px; border: 1px solid #d477a9; border-radius: 13px 13px 13px 3px; background: #331738f5; box-shadow: 0 8px 24px #0c041980; pointer-events: auto; font-size: 12px; }
.public-body .mascot-message strong { display: block; padding-right: 5px; color: #f8c6e0; font-size: 12px; }
.public-body .mascot-message p { margin: 7px 0; color: #d4b6db; font-size: 12px; line-height: 1.6; }
.public-body .mascot-message a { display: inline-flex; align-items: center; gap: 5px; color: #ffb8d9; font-size: 11px; }
.public-body .mascot-close { position: absolute; right: 4px; top: 2px; width: 26px; height: 26px; padding: 0; border: 0; background: transparent; color: #e9b9d5; font-size: 19px; }
.public-body .back-to-top { position: fixed; z-index: 26; right: 22px; bottom: 24px; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #e79fc3; border-radius: 50%; background: #aa3979ed; color: #fff; box-shadow: 0 4px 18px #10061e70; font-size: 24px; }
.public-body .back-to-top:hover { background: #d75596; }
@media (max-width: 1100px) {
  .public-body .brand-avatar-end { display: none; }
  .public-body .site-brand-copy { gap: 13px; }
  .public-body .site-brand-copy strong { font-size: 26px; }
  .public-body .site-brand-copy small { font-size: 13px; }
  .public-body .brand-avatar { width: 50px; height: 50px; }
  .public-body .shell { padding-left: 24px; padding-right: 24px; }
  .public-body .library-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; }
  .public-body .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-body .featured-copy { padding-left: 65px; padding-right: 65px; gap: 6px 22px; }
  .public-body .sidebar-box { padding: 18px 16px; }
}
@media (max-width: 800px) {
  .public-body .brand-avatar-end { display: none; }
  .public-body .site-brand-copy { display: grid; gap: 5px; }
  .public-body .header-inner { justify-content: flex-start; padding-left: 24px; }
  .public-body .site-header .site-nav { gap: 16px; }
  .public-body .site-header .site-nav a { font-size: 12px; }
  .public-body .featured-viewport { height: 370px; }
  .public-body .featured-copy { padding: 24px 65px 56px; }
  .public-body .featured-copy h2 { font-size: 22px; }
  .public-body .featured-copy p:not(.eyebrow) { font-size: 12px; }
  .public-body .featured-copy .button { min-width: 106px; padding: 10px; font-size: 10px; }
  .public-body .library-layout { display: flex; flex-direction: column; }
  .public-body .filters { width: 100%; order: 1; }
  .public-body .filter-drawer > summary { display: flex; align-items: center; gap: 9px; padding: 15px 18px; border: 1px solid #704564; border-radius: 9px; background: #321a3c; color: #f4d4e8; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
  .public-body .filter-drawer > summary::-webkit-details-marker { display: none; }
  .public-body .filter-drawer > summary > span { margin-left: auto; }
  .public-body .filter-drawer[open] > summary { margin-bottom: 14px; }
  .public-body .filter-drawer[open] > summary > span { transform: rotate(180deg); }
  .public-body .filter-panels { grid-template-columns: 1fr 1fr; align-items: start; gap: 15px; }
  .public-body .community-note { gap: 10px; font-size: 12px; }
  .public-body .community-note > a { display: none; }
  .public-body .notice-label { padding-right: 10px; font-size: 9px; }
  .public-body .site-footer { grid-template-columns: 1fr 1fr; padding-left: 24px; padding-right: 24px; }
  .public-body .footer-note { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .public-body { padding-top: 135px; }
  .public-body [id] { scroll-margin-top: 126px; }
  .public-body .shell { padding-left: 16px; padding-right: 16px; }
  .public-body .header-inner { min-height: 90px; padding: 14px 16px; gap: 8px; border-bottom: 1px solid #8e466578; }
  .public-body .site-brand { gap: 8px; }
  .public-body .brand-avatar { width: 39px; height: 39px; }
  .public-body .site-brand-copy { gap: 4px; }
  .public-body .site-brand-copy strong { font-size: 20px; letter-spacing: .3px; }
  .public-body .site-brand-copy small { font-size: 9px; letter-spacing: 0; }
  .public-body .header-tools { right: 13px; gap: 6px; }
  .public-body .header-tools .age-label { display: none; }
  .public-body .header-search-toggle, .public-body .nav-toggle { width: 33px; height: 33px; padding: 7px; }
  .public-body.js-enhanced .nav-toggle { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; }
  .public-body .nav-toggle span { height: 1px; background: currentColor; width: 100%; }
  .public-body .site-header .site-nav { min-height: 45px; padding: 0 16px 4px; flex-wrap: nowrap; justify-content: flex-start; gap: 0 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #8d466c transparent; background-color: #21102e; }
  .public-body .site-header .site-nav a { min-height: 39px; font-size: 12px; }
  .public-body.js-enhanced .site-header .site-nav { display: flex; }
  .public-body.js-enhanced .site-header.menu-open .site-nav { display: flex; }
  .public-body:not(.js-enhanced) { padding-top: 135px; }
  .public-body .site-header.is-scrolled .header-inner { min-height: 64px; padding: 9px 16px; }
  .public-body .is-scrolled .brand-avatar { width: 34px; height: 34px; }
  .public-body .is-scrolled .site-brand-copy strong { font-size: 18px; }
  .public-body .is-scrolled .site-brand-copy small { font-size: 8px; }
  .public-body .site-header.is-scrolled .site-nav { min-height: 45px; }
  .public-body .header-search { right: 16px; padding: 12px; gap: 7px; }
  .public-body .featured { margin-top: 15px; margin-bottom: 18px; }
  .public-body .featured-viewport { height: 315px; border-radius: 11px; }
  .public-body .featured-image { object-position: center; }
  .public-body .featured-shade { background: linear-gradient(0deg, #11061bf5, #180c23b3 38%, #180c2310 85%); }
  .public-body .featured-copy { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; padding: 22px 31px 48px; }
  .public-body .featured-copy .eyebrow { font-size: 8px; letter-spacing: 1px; margin: 0; }
  .public-body .featured-copy h2 { font-size: 20px; line-height: 1.3; }
  .public-body .featured-copy p:not(.eyebrow) { margin: 0; font-size: 11px; line-height: 1.5; -webkit-line-clamp: 2; }
  .public-body .featured-copy .button { min-height: 33px; min-width: 100px; padding: 7px 11px; margin-top: 2px; font-size: 9px; }
  .public-body .featured-viewport > button { width: 27px; height: 38px; top: 37%; font-size: 13px; border-radius: 5px; }
  .public-body .slider-prev { left: 7px; }
  .public-body .slider-next { right: 7px; }
  .public-body .featured-controls { bottom: 10px; gap: 10px; min-height: 24px; }
  .public-body .featured-controls > .slider-pause { height: 23px; font-size: 9px; }
  .public-body .slider-dots { gap: 7px; }
  .public-body .slider-dot { width: 7px; height: 7px; min-width: 7px; }
  .public-body .slider-dot[aria-current="true"] { width: 19px; }
  .public-body .community-note { align-items: center; margin-bottom: 10px; padding-top: 11px; padding-bottom: 11px; }
  .public-body .community-note p { font-size: 11px; line-height: 1.6; }
  .public-body .notice-label { font-size: 8px; letter-spacing: .5px; }
  .public-body .library { padding-top: 13px; padding-bottom: 36px; }
  .public-body .page-heading { align-items: center; margin-bottom: 15px; padding-bottom: 14px; gap: 12px; }
  .public-body .page-heading h1 { font-size: 20px; }
  .public-body .library-total { font-size: 10px; gap: 4px; padding-left: 11px; }
  .public-body .library-total strong { font-size: 20px; }
  .public-body .catalog-caption { margin: 0 0 14px; }
  .public-body .catalog-tabs { gap: 4px; }
  .public-body .catalog-tabs a { padding: 5px 8px; font-size: 11px; }
  .public-body .filter-shortcut { font-size: 11px; }
  .public-body .game-grid { grid-template-columns: 1fr; gap: 19px; }
  .public-body .card-content { padding: 15px 16px 17px; }
  .public-body .game-card h2 { font-size: 16px; min-height: 0; }
  .public-body .card-meta { font-size: 11px; }
  .public-body .platform-badge { font-size: 11px; }
  .public-body .cover-status { font-size: 10px; }
  .public-body .card-tags .tag { font-size: 11px; }
  .public-body .filter-panels { grid-template-columns: 1fr; }
  .public-body .filter-item { font-size: 12px; }
  .public-body .site-footer { grid-template-columns: 1fr; gap: 22px; padding: 27px 20px 90px; }
  .public-body .footer-brand img { width: 50px; height: 50px; }
  .public-body .site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
  .public-body .footer-bottom { flex-direction: column; font-size: 10px; }
  .public-body .mascot-widget { width: 76px; height: 112px; left: 0; bottom: 3px; }
  .public-body .mascot-message { left: 53px; bottom: 85px; width: min(225px, calc(100vw - 72px)); }
  .public-body .back-to-top { right: 15px; bottom: 18px; width: 37px; height: 37px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .public-body *, .public-body *::before, .public-body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .public-body .notice-content { white-space: normal; transform: none; }
  .public-body .notice-pause { display: none; }
}

/* The reference also exposes a desktop menu and a dedicated donation page. */
.public-body .header-tools { position: static; }
.public-body .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 4px; position: absolute; left: 30px; top: 50%; transform: translateY(-50%); }
.public-body .nav-toggle span { display: block; height: 1px; width: 100%; background: currentColor; }
.public-body .header-search-toggle { position: absolute; right: 72px; top: 50%; transform: translateY(-50%); }
.public-body .header-tools .age-label { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); }
.public-body .site-header .site-nav a.nav-donate { gap: 6px; color: #ff9eca; }
.public-body .site-nav a.nav-donate > span { font-size: 21px; line-height: 1; }
.public-body .site-header .site-menu { position: absolute; top: 100%; left: max(24px, calc((100vw - 1380px) / 2)); display: grid; align-items: stretch; gap: 3px; width: 290px; height: auto; max-height: calc(100dvh - 170px); overflow-y: auto; padding: 16px; border: 1px solid #c16e9e; border-radius: 0 0 12px 12px; background: #25112ffb; box-shadow: 0 15px 35px #09020d99; }
.public-body .site-menu-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 0 11px 10px; margin-bottom: 5px; border-bottom: 1px solid #86466980; }
.public-body .site-menu-heading strong { color: #eebadb; font-size: 11px; letter-spacing: .8px; }
.public-body .menu-close { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 5px; background: #4a2441; color: #f7c1de; }
.public-body .site-header .site-menu a { display: flex; align-items: center; min-height: 40px; height: auto; padding: 9px 12px; border: 0; border-radius: 6px; font-size: 14px; color: #e0c8e6; }
.public-body .site-header .site-menu a:hover, .public-body .site-header .site-menu a.nav-active { color: #ffd1e7; background: #67305075; }
.public-body .site-header .site-menu a.nav-donate { color: #ff9eca; gap: 8px; }
.public-body .featured-viewport { border-color: #d979aa; box-shadow: 0 0 18px #b23d7324, 0 18px 45px #08020e66; }
.public-body .game-card { border-color: #9d548171; }
.public-body .game-card:hover { border-color: #e083b3; box-shadow: 0 5px 25px #b54c982b; }
.public-body .donate-page { padding-top: 25px; padding-bottom: 64px; }
.public-body .donate-heading { text-align: center; margin-bottom: 25px; }
.public-body .donate-heading .eyebrow { display: none; }
.public-body .donate-heading h1 { font-size: 29px; color: #ffacd3; letter-spacing: 2px; margin-bottom: 10px; }
.public-body .donate-heading > p:last-child { color: #c9aecf; font-size: 14px; margin: 0; }
.public-body .donate-card, .public-body .donate-thanks { width: min(100%, 640px); margin: 0 auto; padding: 30px 34px; border: 1px solid #ad5c8c; border-radius: 14px; background: linear-gradient(145deg, #34183e, #21102f); box-shadow: 0 0 25px #9e367723; text-align: center; }
.public-body .donate-heart { display: block; font-size: 39px; line-height: 1; color: #f392c3; margin: 0 auto 12px; }
.public-body .donate-card h2 { font-size: 21px; margin-bottom: 22px; color: #f9deee; }
.public-body .donate-intro { max-width: 490px; margin: 0 auto 22px; color: #d1b8d9; font-size: 13px; line-height: 1.8; }
.public-body .donate-payment { display: flex; flex-direction: column; align-items: center; }
.public-body .donate-qr-wrap { order: -1; margin: 0 0 22px; width: 100%; }
.public-body .donate-qr { display: block; width: min(288px, 100%); height: auto; border-radius: 11px; margin: 0 auto; background: #fff; box-shadow: 0 6px 24px #13051a66; }
.public-body .donate-qr-wrap figcaption { margin-top: 12px; font-size: 12px; line-height: 1.7; color: #c3a7cf; }
.public-body .donate-info { width: min(100%, 440px); margin: 0 0 24px; border: 1px solid #814666; border-radius: 9px; padding: 5px 18px; background: #1c0c28a8; text-align: left; }
.public-body .donate-info-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 15px; padding: 12px 0; border-bottom: 1px solid #77426263; font-size: 13px; }
.public-body .donate-info-row:last-child { border: 0; }
.public-body .donate-info dt { color: #bea2cb; }
.public-body .donate-info dd { margin: 0; color: #f6c1dd; font-weight: 650; overflow-wrap: anywhere; user-select: text; }
.public-body .donate-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.public-body .donate-actions .button { font-size: 12px; min-height: 42px; }
.public-body .donate-copy-status { min-height: 20px; margin: 13px 0 0; font-size: 12px; color: #f7c5e0; }
.public-body .donate-thanks { margin-top: 24px; background: linear-gradient(160deg, #422044, #24102f); }
.public-body .donate-thanks h2 { font-size: 20px; color: #f7d8ea; margin-bottom: 10px; }
.public-body .donate-thanks p { font-size: 13px; line-height: 1.9; color: #d0b3d8; }
.public-body .donate-thanks .button { font-size: 12px; }
@media (max-width: 800px) {
  .public-body .header-inner { padding-left: 75px; }
  .public-body .site-header .site-nav { gap: 14px; padding-left: 15px; padding-right: 15px; }
  .public-body .site-header .site-nav a { font-size: 11px; }
  .public-body .nav-toggle { left: 24px; }
}
@media (max-width: 600px) {
  .public-body .header-inner, .public-body .site-header.is-scrolled .header-inner { padding-left: 51px; }
  .public-body .site-brand-copy strong { font-size: 18px; }
  .public-body .brand-avatar { width: 33px; height: 33px; }
  .public-body .site-brand { gap: 6px; }
  .public-body .site-brand-copy small { font-size: 8px; }
  .public-body .nav-toggle { left: 10px; width: 30px; height: 33px; }
  .public-body .header-search-toggle { right: 12px; }
  .public-body .header-tools .age-label { display: none; }
  .public-body.js-enhanced .site-header.menu-open .site-nav { display: flex; }
  .public-body .site-header .site-menu { left: 12px; width: min(290px, calc(100% - 24px)); max-height: calc(100dvh - 155px); }
  .public-body .donate-page { padding-top: 25px; padding-bottom: 38px; }
  .public-body .donate-heading h1 { font-size: 25px; }
  .public-body .donate-heading > p:last-child { font-size: 12px; }
  .public-body .donate-card, .public-body .donate-thanks { padding: 24px 18px; }
  .public-body .donate-card h2 { font-size: 21px; }
  .public-body .donate-intro { font-size: 12px; }
  .public-body .donate-qr { width: min(260px, 100%); }
  .public-body .donate-info { padding: 3px 12px; }
  .public-body .donate-info-row { grid-template-columns: 73px minmax(0, 1fr); gap: 9px; font-size: 11px; }
  .public-body .donate-actions { flex-direction: column; gap: 9px; }
  .public-body .donate-actions .button { width: 100%; }
}