:root{
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-sans: var(--font);

  /* 색 — 어두운 테마(기본) */
  --bg: #0E100F;
  --surface: #171A18;
  --surface-2: #202421;
  --line: #2C312D;
  --line-strong: #3D443E;
  --text: #F1F2EC;          /* bg 16.96:1 */
  --text-2: #B4BBB0;        /* bg 9.71:1 */
  --text-3: #8F988B;        /* bg 6.39:1, surface 5.87:1, surface-2 5.26:1 */
  --accent: #D1F58A;        /* 주 버튼·활성 칩·포커스 세 곳만 */
  --on-accent: #141A0C;     /* accent 위 14.49:1 */
  --accent-line: #D1F58A;   /* 라임 채움 요소 테두리 */
  --accent-ink: #D1F58A;    /* 글자 링크(어두운 테마) */
  --focus: #D1F58A;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
  --genre-general: #D1F58A;
  --genre-horror: #EBA48E;  /* bg 8.55:1 */
  --scrim: rgba(8,9,8,.72);
  --header-bg: rgba(14,16,15,.92);
  --badge-bg: rgba(14,16,15,.82);  /* 그림 위 배지 */
  --badge-fg: #F1F2EC;
  --over-img-bg: rgba(14,16,15,.72); /* 그림 위 저장 버튼 원 — 두 테마 공통 */
  --over-img-fg: #F1F2EC;
  --over-img-on: #D1F58A;          /* 저장됨 하트 */
  --tc-general: #172013;    /* 글자 표지 바탕(일반) — text 대비 14.89:1 */
  --tc-horror: #201614;     /* 글자 표지 바탕(공포) — text 대비 15.72:1 */
  --tc-mark: #3D443E;       /* 글자 표지 오른쪽 아래 ABYSS 마크(장식) */
  --toast-bg: #202421; --toast-fg: #F1F2EC; --toast-line: #3D443E;
  color-scheme: dark;

  /* 공통 바닥 연결 */
  --ys-line: var(--line); --ys-muted: var(--text-3); --ys-ink: var(--text);
  --ys-container: var(--shelf-max); --ys-gutter: var(--gutter);
  --ys-skip-bg: var(--accent); --ys-skip-fg: var(--on-accent);

  /* 글자 */
  --fs-h1: 28px;   --lh-h1: 1.3;
  --fs-h2: 20px;   --lh-h2: 1.4;
  --fs-feature: 24px; --lh-feature: 1.35;
  --fs-card-title: 17px; --lh-card-title: 1.45;
  --fs-body: 15px; --lh-body: 1.65;
  --fs-desc: 14px; --lh-desc: 1.6;
  --fs-meta: 13px; --lh-meta: 1.45;
  --fs-chip: 14px;
  --fs-min: 12px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --ls-tight: -0.01em; --ls-body: 0;

  /* 간격 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-20: 80px;
  --gutter: 16px;
  --shelf-max: 1040px;
  --grid-gap-x: 16px;
  --grid-gap-y: 24px;

  /* 모양 */
  --r-tile: 10px; --r-card: 16px; --r-pill: 999px; --r-field: 12px; --r-badge: 6px;
  --border: 1px solid var(--line-strong);

  /* 움직임 */
  --dur-fast: var(--ys-dur-micro); --dur: var(--ys-dur-short); --dur-slow: var(--ys-dur-flip);
  --ease: var(--ys-ease-standard);
  --ease-out: var(--ys-ease-emphasized);

  /* 크기 */
  --tap: 44px; --chip-h: 36px; --btn-h: 48px; --header-h: 56px;
  --cover-ratio: 16 / 10; --feature-ratio: 16 / 10;
}
:root[data-theme="light"]{
  --bg: #F5F5F0; --surface: #FFFFFF; --surface-2: #ECECE5;
  --line: #E1E1D9; --line-strong: #D3D4CA;
  --text: #1B1D1A; --text-2: #4C524A; --text-3: #62695F;   /* text-3: bg 5.18, surface 5.67, surface-2 4.78; tc 배경 위 text 14.12/13.69 */
  --accent: #D1F58A; --on-accent: #141A0C; --accent-line: #9CB95A; --accent-ink: #4A6A10;
  --focus: #4A6A10;
  --genre-general: #5E8418; --genre-horror: #A5432A;
  --scrim: rgba(20,22,20,.5);
  --header-bg: rgba(245,245,240,.92);
  --badge-bg: rgba(14,16,15,.82); --badge-fg: #F1F2EC;
  --tc-general: #E6EDD8; --tc-horror: #F2E4DF; --tc-mark: #C9CCBF;
  --toast-bg: #1B1D1A; --toast-fg: #F5F5F0; --toast-line: #1B1D1A;
  color-scheme: light;
}
@media (min-width:768px){ :root{ --gutter:24px; --grid-gap-x:20px; } }
@media (min-width:1024px){
  :root{ --fs-h1:40px; --lh-h1:1.25; --fs-h2:24px; --lh-h2:1.35; --fs-feature:32px; --lh-feature:1.3;
         --fs-card-title:18px; --fs-desc:15px; --lh-desc:1.65; --gutter:32px; --grid-gap-x:32px; --grid-gap-y:40px;
         --header-h:64px; --feature-ratio: 5 / 3; }
}
@media (prefers-reduced-motion: reduce){ :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; } }
html[data-motion="off"]{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; }

html{ font-family:var(--font); -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); }
body{ background:var(--bg); color:var(--text); font-size:var(--fs-body); line-height:var(--lh-body); }

/* Hub-only components. Covers supply the color; the shelf stays quiet. */
a{color:inherit;text-decoration:none}button{cursor:pointer}button,select{background:transparent}button{border:0}button:disabled{cursor:default;opacity:.5}
:where(span,kbd){word-break:keep-all;overflow-wrap:anywhere}button,a,select,summary{white-space:nowrap}
.hub-wrap{width:min(var(--shelf-max),calc(100% - 2 * var(--gutter)));margin-inline:auto}
.icon{width:20px;height:20px;flex-shrink:0}.hub-mark{width:24px;height:24px;flex-shrink:0}
.hub-header{position:sticky;top:0;z-index:30;height:var(--header-h);background:var(--bg);border-bottom:1px solid transparent}
@supports(backdrop-filter:blur(8px)){.hub-header{background:var(--header-bg);backdrop-filter:blur(8px)}}
.hub-header.is-scrolled{border-bottom-color:var(--line)}.hub-header__in{height:100%;display:flex;align-items:center}
.hub-home,.hub-section,.hub-nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}.hub-home{font-size:16px;font-weight:800}.hub-section{font-size:15px;font-weight:600}.hub-header__sep{margin-inline:8px;font-size:14px;color:var(--text-3)}
.hub-nav{display:none;gap:20px;margin-left:24px}.hub-nav a{min-width:44px;font-size:14px;font-weight:500;color:var(--text-2)}.hub-nav a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.hub-header__tools{display:flex;gap:4px;margin-left:auto;align-items:center}.hub-saved,.hub-theme,.hub-lang{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;border:var(--border);border-radius:var(--r-pill);font-size:14px}
.hub-saved{padding:0 12px}.hub-saved .icon{width:18px;height:18px}.hub-saved__label{display:none}.hub-saved__count{font-size:13px;font-weight:700}.hub-lang{font-weight:700}.hub-theme{padding:0 12px}.hub-theme select{position:absolute;inset:0;width:100%;height:44px;opacity:0;cursor:pointer;appearance:none;border:0}.hub-theme>.icon:last-child{display:none}
.hub-saved:hover,.hub-theme:hover,.hub-lang:hover{border-color:var(--text-3)}.hub-theme:focus-within{outline:2px solid var(--focus);outline-offset:3px}
.hub-intro{padding-block:24px 20px}.hub-brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;line-height:24px;color:var(--text-2);margin-bottom:8px}.hub-brand .hub-mark{color:var(--accent-ink)}
.hub-intro h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;letter-spacing:var(--ls-tight)}.hub-facts{margin-top:8px;font-size:13px;font-weight:500;line-height:1.45;color:var(--text-3)}
.hub-feature{display:grid;background:var(--surface);border:var(--border);border-radius:var(--r-card);overflow:hidden}.hub-feature__cover{aspect-ratio:var(--feature-ratio)}.hub-feature__body{padding:16px;min-width:0;align-self:center}
.hub-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--text-3)}.hub-dot{display:inline-block;width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--genre-general)}.hub-dot[data-genre=horror]{background:var(--genre-horror)}
.hub-feature__badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;margin-right:2px;border-radius:var(--r-badge);background:var(--surface-2);color:var(--text);font-size:12px;font-weight:700}
.hub-feature__title{margin-top:8px;font-size:var(--fs-feature);line-height:var(--lh-feature);font-weight:800;letter-spacing:var(--ls-tight)}.hub-feature__desc{margin-top:8px;color:var(--text-2);font-size:15px;line-height:var(--lh-body)}
.hub-feature__title,.hub-card__title,.hub-card__desc,.hub-feature__desc,.hub-tcard__title{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.hub-feature__title,.hub-card__title,.hub-card__desc{-webkit-line-clamp:2}.hub-feature__desc,.hub-tcard__title{-webkit-line-clamp:3}
.hub-feature__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.hub-feature__actions>.hub-btn--primary{flex:1}
.hub-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:0 20px;border-radius:var(--r-pill);font-size:16px;font-weight:700;white-space:nowrap;transition:scale var(--dur-fast) var(--ease)}.hub-btn .icon{width:18px;height:18px}
.hub-btn--primary{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent-line)}.hub-btn--primary:hover{filter:brightness(.94)}.hub-btn--primary:focus-visible{outline:none;box-shadow:var(--focus-ring)}.hub-btn--secondary{border:var(--border);color:var(--text)}.hub-btn--secondary:hover{border-color:var(--text-3)}
.hub-feature--empty{padding:24px;gap:8px}.hub-feature--empty h2{font-size:20px}.hub-feature--empty p{color:var(--text-2)}
.hub-library{padding-top:40px;scroll-margin-top:calc(var(--header-h) + 8px)}.hub-h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;margin-bottom:16px}
.hub-toolbar{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}.hub-chips{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-right:16px}.hub-chips::-webkit-scrollbar{display:none}
.hub-chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:44px;padding:0 14px;flex-shrink:0;font-size:14px;font-weight:500;color:var(--text-2);scroll-snap-align:start}.hub-chip::before{content:"";position:absolute;inset:4px 0;z-index:-1;border:var(--border);border-radius:var(--r-pill)}.hub-chip[aria-pressed=true]{color:var(--on-accent);font-weight:700}.hub-chip[aria-pressed=true]::before{background:var(--accent);border-color:var(--accent-line)}.hub-chip:hover::before{border-color:var(--text-3)}.hub-chip__n{font-size:12px;color:var(--text-3);font-weight:500}.hub-chip[aria-pressed=true] .hub-chip__n{color:var(--on-accent);opacity:.75}.hub-chip .icon{width:16px;height:16px}
.hub-search{position:relative;min-width:0;height:44px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--surface-2)}.hub-search>.icon{position:absolute;left:14px;top:12px;width:18px;height:18px;color:var(--text-3)}.hub-search input{width:100%;height:42px;padding:0 44px 0 42px;border:0;outline:none;background:transparent;font-size:15px;min-width:0}.hub-search input::placeholder{color:var(--text-3);opacity:1}.hub-search input::-webkit-search-cancel-button{appearance:none}.hub-search:focus-within{border-color:var(--focus);box-shadow:var(--focus-ring)}.hub-kbd{display:none;position:absolute;right:12px;top:10px;font-size:12px;line-height:20px;border:1px solid var(--line-strong);border-radius:4px;padding:0 6px;color:var(--text-3)}.hub-search__clear{position:absolute;right:0;top:-1px;width:44px;height:44px;display:grid;place-items:center}.hub-search__clear .icon{width:16px;height:16px}
.hub-tools{display:flex;align-items:center;justify-content:space-between;margin-top:-8px;gap:12px}.hub-sort{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--text-2);height:44px}.hub-sort select{height:44px;min-width:44px;border:0;appearance:none;font-size:14px;font-weight:600;color:var(--text);padding:0 4px}.hub-sort .icon{width:14px;height:14px}
.hub-textbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0;font-size:14px;font-weight:500;color:var(--text-2)}.hub-textbtn:hover{color:var(--text)}.hub-textbtn .icon{width:18px;height:18px}
.hub-results{display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:12px;font-size:13px;color:var(--text-3)}.hub-results strong{font-weight:600;color:var(--text)}.hub-recent{display:flex;align-items:center;gap:6px;max-width:60%;min-height:44px;font-size:13px;font-weight:600;color:var(--text-2)}.hub-recent span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hub-recent .icon{width:14px;height:14px}.hub-recent:hover{text-decoration:underline;color:var(--text)}
.hub-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--grid-gap-y) var(--grid-gap-x);align-items:stretch}.hub-group{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:16px;font-size:17px;line-height:1.45}.hub-group:first-child{border-top:0;padding-top:0}.hub-group__note{font-size:13px;font-weight:500;color:var(--text-3)}
.hub-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:var(--border);border-radius:var(--r-card);overflow:hidden;transition:translate var(--dur) var(--ease);--ys-lift-shadow:none}.hub-card__hit{position:absolute;inset:0;z-index:1;border-radius:inherit;white-space:normal}.hub-card__hit:focus-visible{outline-offset:-3px}.hub-card:focus-within{box-shadow:var(--focus-ring)}
.hub-cover{width:100%;min-width:0;position:relative;overflow:hidden;background:var(--surface-2);container-type:inline-size}.hub-card__cover{aspect-ratio:var(--cover-ratio)}.hub-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:transform var(--ys-dur-flip) var(--ys-ease-emphasized)}.hub-cover__img.is-loaded,html:not(.js) .hub-cover img{opacity:1}.is-pixel{image-rendering:pixelated}
.hub-badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-badge);background:var(--badge-bg);color:var(--badge-fg);font-size:12px;font-weight:700}
.hub-card__save{position:absolute;right:4px;top:4px;z-index:3;display:grid;place-items:center;width:44px;height:44px;color:var(--over-img-fg);isolation:isolate}.hub-card__save::before{content:"";position:absolute;inset:6px;z-index:-1;border-radius:50%;background:var(--over-img-bg);border:1px solid rgba(255,255,255,.18)}.hub-card__save:hover::before{background:rgba(14,16,15,.9)}[data-save][aria-pressed=true] .icon{fill:var(--over-img-on);color:var(--over-img-on)}
.hub-card__body{padding:14px 16px 0;flex:1}.hub-card__title{margin-top:6px;font-size:var(--fs-card-title);line-height:var(--lh-card-title);font-weight:700;letter-spacing:var(--ls-tight)}.hub-card__desc{margin-top:6px;font-size:var(--fs-desc);line-height:var(--lh-desc);color:var(--text-2)}
.hub-card__foot{display:flex;align-items:center;gap:4px;height:60px;padding:8px 8px 8px 16px;margin-top:auto}.hub-card__tag{flex:1;min-width:0;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-card__info{position:relative;z-index:3;display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:50%;color:var(--text-2)}.hub-card__info:hover{background:var(--surface-2)}.hub-card__play{display:flex;align-items:center;gap:4px;margin-right:12px;font-size:14px;font-weight:600;white-space:nowrap}.hub-card__play .icon{width:16px;height:16px;transition:translate var(--dur) var(--ease)}
.hub-tcard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 20px 20px 24px;background:var(--tc-general);box-shadow:inset 4px 0 0 var(--genre-general)}.hub-tcard[data-genre=horror]{background:var(--tc-horror);box-shadow:inset 4px 0 0 var(--genre-horror)}.hub-tcard__title{font-size:clamp(20px,8.5cqi,44px);font-weight:800;line-height:1.1;letter-spacing:var(--ls-tight);color:var(--text)}.hub-tcard__sub{margin-top:8px;font-size:13px;font-weight:600;color:var(--text-2)}.hub-tcard .hub-mark{position:absolute;right:16px;bottom:16px;width:20px;height:20px;color:var(--tc-mark)}
.hub-empty{padding:40px 24px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}.hub-empty__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--surface-2);color:var(--text-2);margin:0 auto 16px}.hub-empty__icon .icon{width:24px;height:24px}.hub-empty h3{font-size:17px;font-weight:700}.hub-empty p{max-width:360px;margin:8px auto 0;font-size:14px;color:var(--text-2)}.hub-empty .hub-btn{margin-top:20px}.hub-noscript{margin-block:16px;color:var(--text-2);font-size:14px}
.hub-promo{position:relative;display:grid;gap:12px;margin-top:40px;padding:16px;border:var(--border);border-radius:var(--r-card);background:var(--surface)}.hub-promo__icons{display:flex;gap:8px}.hub-promo__icons img{border:1px solid var(--line);border-radius:10px}.hub-promo__icons img[width="48"]{border-radius:12px}.hub-promo__text{min-width:0}.hub-promo__label{font-size:12px;margin-bottom:4px}.hub-promo__title{font-size:17px;line-height:1.45;font-weight:700}.hub-promo__desc{margin-top:4px;font-size:14px;color:var(--text-2)}.hub-promo__cta{margin-top:4px;width:100%}
.hub-promo__menu{position:absolute;right:10px;top:10px}.hub-promo__menu summary{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;list-style:none}.hub-promo__menu summary::-webkit-details-marker{display:none}.hub-promo__menu summary:hover{background:var(--surface-2)}.hub-promo__menu summary .icon{width:18px;height:18px}.hub-promo__menu-list{position:absolute;right:0;top:48px;z-index:5;width:max-content;max-width:calc(100vw - 64px);padding:4px;border:var(--border);border-radius:12px;background:var(--surface-2)}.hub-promo__menu-list button{display:block;width:100%;min-height:44px;padding:0 14px;text-align:left;font-size:14px;white-space:nowrap}.hub-promo__menu-list button:hover{background:var(--surface)}
.hub-footer{margin-top:56px;border-top:1px solid var(--line)}.hub-footer__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-block:20px;gap:8px 16px}.hub-footer__brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--text-2)}.hub-footer__brand .hub-mark{width:18px;height:18px}.hub-footer__tools{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}.hub-footer__tools .hub-textbtn{font-size:13px}.hub-motion__dot{width:8px;height:8px;border:1px solid var(--accent-ink);border-radius:50%;background:var(--accent-ink)}.hub-motion[aria-pressed=false] .hub-motion__dot{border-color:var(--text-3);background:transparent}.hub-arrow-up{transform:rotate(-45deg)}
body.modal-open{overflow:hidden}.hub-dialog{padding:0;color:var(--text);background:var(--surface);border:var(--border)}.hub-dialog::backdrop{background:var(--scrim)}.game-dialog{margin:auto 0 0;width:100%;max-width:100%;max-height:90dvh;border-radius:20px 20px 0 0;border-bottom:0;overflow:auto}.hub-dialog[open]{animation:dialog-in var(--dur-slow) var(--ease-out)}
.hub-dialog__close{position:absolute;right:8px;top:8px;z-index:4;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--over-img-bg);color:var(--over-img-fg)}.hub-dialog__art{aspect-ratio:16/10}.hub-dialog__content{padding:20px;min-width:0}.hub-dialog__content h2{margin-top:8px;font-size:24px;line-height:1.35;font-weight:800;letter-spacing:var(--ls-tight)}.hub-dialog__alt{margin-top:8px;font-size:13px;color:var(--text-3)}.hub-dialog__desc{margin-top:16px;font-size:15px;line-height:1.7;color:var(--text-2)}.hub-dialog__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.hub-dialog__tags span{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border:var(--border);border-radius:var(--r-pill);font-size:12px;color:var(--text-2)}.hub-dialog__notice{margin-top:16px;border-left:2px solid var(--genre-horror);padding-left:10px;font-size:13px;color:var(--text-2)}
.hub-dialog__actions{position:sticky;bottom:0;display:flex;gap:8px;margin-top:20px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}.hub-dialog__actions .hub-btn{flex:1}.hub-dialog__save{width:48px;height:48px;border:var(--border);border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.hub-prefs{margin:auto;width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);border-radius:var(--r-card);padding:24px;overflow:auto}.hub-prefs h2{font-size:20px;font-weight:700;line-height:1.4}.hub-prefs [data-promo-preference-status]{margin-top:12px;font-size:14px;color:var(--text-2)}.hub-prefs__actions{display:grid;gap:8px;margin-top:20px}.hub-prefs__note{margin-top:16px;font-size:13px;color:var(--text-3)}.hub-prefs [data-promo-prefs-close]{display:flex;margin-top:12px;margin-left:auto}
.ys-toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;z-index:100;transform:translate(-50%,12px);width:max-content;max-width:calc(100% - 32px);padding:12px 16px;border:1px solid var(--toast-line);border-radius:12px;background:var(--toast-bg);color:var(--toast-fg);font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}.ys-toast.is-on{opacity:1;transform:translate(-50%,0)}
@keyframes dialog-in{from{opacity:0;transform:translateY(var(--ys-dist-md))}to{opacity:1;transform:translateY(0)}}@media(hover:hover){.hub-card:hover{border-color:var(--text-3)}.hub-card:hover .hub-cover__img{transform:scale(1.02)}.hub-card:hover .hub-card__play .icon{translate:calc(-1 * var(--ys-lift)) var(--ys-lift)}}
@media(min-width:600px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){
 .hub-nav{display:flex}.hub-saved__label{display:inline}.hub-theme select{position:static;width:auto;opacity:1;padding:0;font-size:14px}.hub-theme>.icon:last-child{display:block;width:14px;height:14px}
 .hub-feature{grid-template-columns:7fr 5fr}.hub-feature__cover{height:100%}.hub-feature__body{padding:24px}
 .hub-toolbar{grid-template-columns:minmax(0,1fr) auto}.hub-chips{grid-column:1/-1;padding-right:0}.hub-tools{margin-top:0}
 .hub-promo{grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:20px;padding:20px 24px}.hub-promo__cta{width:auto;margin:0}.hub-promo__menu{position:relative;right:auto;top:auto}
 .game-dialog{margin:auto;width:min(760px,calc(100% - 48px));max-height:calc(100dvh - 48px);border-radius:var(--r-card);border-bottom:var(--border)}.hub-dialog__layout{display:grid;grid-template-columns:5fr 7fr}.hub-dialog__art{height:100%}.hub-dialog__content{padding:32px}
}
@media(min-width:1024px){
 .hub-intro{display:grid;grid-template-columns:1fr auto;align-items:end;padding-block:40px 28px;gap:0 16px}.hub-brand{grid-column:1/-1}.hub-facts{margin:0}.hub-facts--note{grid-column:1/-1;margin-top:8px;text-align:right}.hub-intro h1{white-space:nowrap}
 .hub-feature__body{padding:32px}.hub-feature__actions>.hub-btn--primary{flex:0 1 auto}.hub-feature--empty{padding:32px}
 .hub-library{padding-top:56px;scroll-margin-top:calc(var(--header-h) + 76px)}.hub-toolbar{display:flex;align-items:center;gap:12px;position:sticky;top:var(--header-h);z-index:20;padding-block:10px;border-bottom:1px solid var(--line);background:var(--header-bg);backdrop-filter:blur(8px)}.hub-chips{flex-shrink:0}.hub-search{flex:1;width:280px}.hub-tools{flex-shrink:0}.hub-kbd{display:block}
 .hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hub-group{font-size:18px}.hub-card__body{padding:20px 20px 0}.hub-card__foot{padding-left:20px}.hub-badge{top:12px;left:12px}.hub-tcard{padding:24px 24px 24px 28px}.hub-promo{margin-top:56px}.hub-footer{margin-top:80px}.hub-dialog__content h2{font-size:28px}
}
html[data-motion=off],html[data-motion=off] *{scroll-behavior:auto}html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important}

.ys-studio a{min-width:44px}

/* The theater reserves its entire shelf in server HTML. */
/* These controls already exist in HTML; reserve them before deferred JS runs. */
html.js:not(.hub-ready) .hub-toolbar[hidden]{display:grid!important}
html.js:not(.hub-ready) .hub-saved[hidden],html.js:not(.hub-ready) .hub-theme[hidden],html.js:not(.hub-ready) .hub-feature .hub-btn[hidden],html.js:not(.hub-ready) .hub-textbtn[data-enhance][hidden]{display:inline-flex!important}
html.js:not(.hub-ready) .hub-card__save[hidden],html.js:not(.hub-ready) .hub-card__info[hidden]{display:grid!important}
@media(min-width:1024px){html.js:not(.hub-ready) .hub-toolbar[hidden]{display:flex!important}}
.hub-feature[data-theater]{grid-template-areas:"cover" "reel" "body";grid-template-columns:minmax(0,1fr)}
.hub-feature__cover{grid-area:cover;--ys-shine-color:rgba(209,245,138,.35)}
:root[data-theme="light"] .hub-feature__cover{--ys-shine-color:rgba(74,106,16,.35)}
.hub-feature__body{grid-area:body}
.hub-reel{grid-area:reel;display:flex;align-items:center;gap:8px;min-width:0;height:94px;padding:12px 16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.hub-reel::-webkit-scrollbar{display:none}
.hub-reel__item{position:relative;flex:0 0 112px;width:112px;height:70px;padding:0;border:1px solid var(--line);border-radius:var(--r-badge);overflow:hidden;scroll-snap-align:start;isolation:isolate}
.hub-reel__item img{width:100%;height:100%;object-fit:cover}
.hub-reel__item::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.hub-reel__item[aria-pressed="true"]::after{box-shadow:inset 0 0 0 2px var(--accent-line)}
.hub-reel__item .hub-dot{position:absolute;bottom:6px;right:6px}
.hub-reel__item:focus-visible{outline:2px solid var(--focus);outline-offset:-4px;box-shadow:var(--focus-ring)}
html:not(.js) .hub-reel{display:none}
.hub-theater__video,.hub-card__video,.hub-grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hub-theater__video,.hub-card__video{object-fit:cover;opacity:0;transition:opacity var(--ys-demo-fade) var(--ys-ease-standard)}
/* Keep the eager poster IMG as the largest content candidate when video fades in. */
.hub-theater__video{inset:.5px;width:calc(100% - 1px);height:calc(100% - 1px)}
.hub-card__video{transition-duration:var(--ys-dur-short)}
.hub-theater__video[data-playing="true"],.hub-card__video[data-playing="true"]{opacity:1}
.hub-grain{image-rendering:pixelated;opacity:.06;mix-blend-mode:overlay}
.hub-theater__toggle{position:absolute;left:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--over-img-bg);color:var(--over-img-fg)}
.hub-theater__toggle svg{width:20px;height:20px}
.hub-preview-play,.hub-theater__toggle[aria-pressed="true"] .hub-preview-pause{display:none}
.hub-theater__toggle[aria-pressed="true"] .hub-preview-play{display:block}
.ys-web a{min-width:44px}
@media(min-width:601px){
 .hub-feature[data-theater]{grid-template-areas:"cover body" "reel reel";grid-template-columns:7fr 5fr}
 .hub-feature[data-theater] .hub-feature__cover{height:100%}
 .hub-reel{height:81px;padding:12px 24px 24px}
 .hub-reel__item{flex-basis:72px;width:72px;height:45px}
}
@media(min-width:1024px){
 .hub-reel{height:91px;padding:12px 32px 24px}
 .hub-reel__item{flex-basis:88px;width:88px;height:55px}
}
html[data-motion="off"] .hub-theater__video,html[data-motion="off"] .hub-card__video,html[data-motion="off"] .hub-grain,
html[data-ys-motion="auto"] .hub-theater__video,html[data-ys-motion="off"] .hub-theater__video{display:none}
html[data-hub-manual="true"] .hub-theater__video{display:block}
html:not([data-ys-motion="on"]) .hub-card.ys-lift:hover{translate:none}
@media(prefers-reduced-motion:reduce){
 .hub-theater__video,.hub-card__video,.hub-grain{display:none;transition:none}
 html[data-hub-manual="true"] .hub-theater__video{display:block}
}
@media print{
 .hub-theater__video,.hub-card__video,.hub-grain,.hub-theater__toggle{display:none!important}
 .hub-reel{overflow:visible;flex-wrap:wrap;height:auto}
}