/* Investigation-room art direction. Isolated from the four game engines. */
.hub-page {
  --hub-paper: #f2eadc; --hub-muted: #c2c7ca; --hub-gold: #edc47c;
  background: #09121b url('/assets/lab/study.webp') center top / cover fixed no-repeat;
  color: var(--hub-paper); min-height: 100svh; overflow-x: clip;
}
.hub-page::before { display: none; }
.hub-page .hub-shell { width: min(1340px, calc(100% - 11vw)); padding: 26px 0 28px; margin: 0 auto; }
.hub-page .hub-topbar { min-height: 140px; border: 0; align-items: flex-start; padding: 0 36px 22px 215px; }
.hub-page .hub-brand { display: block; color: #f5eee5; text-decoration: none; }
.hub-page .hub-brand h1 { font: 700 clamp(36px,3.5vw,54px)/1.25 'Songti SC',STSong,SimSun,serif; letter-spacing: .04em; margin: 0; text-shadow: 0 3px 3px #000; }
.hub-page .hub-brand h1::after { content: ''; display: block; width: 40px; height: 4px; margin-top: 10px; background: linear-gradient(90deg,#f3cd86,#967345); }
.hub-page .hub-brand p { font: 20px/1.5 system-ui,sans-serif; margin: 10px 0 0; letter-spacing: .06em; }
.hub-page .hub-help-button { margin-top: 28px; border: 1px solid #77756a; border-radius: 3px; background: linear-gradient(#30373a,#171e24); box-shadow: 0 0 0 6px #262b2dcc,0 0 0 8px #605744,0 5px 15px #000; padding: 11px 16px; color: #eee9df; font-size: 16px; }
.hub-page .continue-section { isolation: isolate; position: relative; display: grid; grid-template-columns: 50% 50%; min-height: 310px; padding: 38px 24px 20px; margin: 4px 12px 28px; border: 1px solid #d1b992; border-radius: 7px 5px 3px 4px; background: #d2b58b url('/assets/lab/paper.webp') center / 384px; box-shadow: 0 8px 14px #0008,inset 0 0 0 5px #63584a55; }
.hub-page .continue-section::before { content: ''; position: absolute; z-index: -2; inset: -12px -4px 8px 19px; border-radius: 6px; background: #b9986b url('/assets/lab/paper.webp') center / 384px; background-blend-mode: multiply; border: 1px solid #b4a087; transform: rotate(.5deg); }
.hub-page .continue-section::after { content: ''; position: absolute; z-index: -1; inset: 36px 13px 17px 24px; background: #192128; box-shadow: inset 0 0 40px #000a; border: 1px solid #4f5555; border-radius: 5px; }
.hub-page .continue-tab { position: absolute; left: 20px; top: -1px; padding: 8px 32px; background: #e4d8bf url('/assets/lab/paper.webp') center / 384px; color: #24282a; font: 700 24px/1.3 'Songti SC',SimSun,serif; box-shadow: 0 2px 5px #0003; z-index: 3; }
.hub-page .continue-tab::before { content: ''; position: absolute; left: 12px; top: -19px; width: 16px; height: 53px; border: 2px solid #957348; border-radius: 12px; transform: rotate(17deg); box-shadow: inset 1px 0 #f5d5a0,2px 3px 2px #0007; }
.hub-page .continue-media { min-height: 250px; height: 100%; overflow: hidden; border-radius: 3px 0 0 3px; }
.hub-page .continue-media .catalogue-media { height: 100%; min-height: 250px; width: 100%; padding: 0; aspect-ratio: auto; }
.hub-page .catalogue-media img { display:block; width:100%; height:100%; object-fit:cover; filter:none; opacity:1; }
.hub-page .continue-copy { position: relative; z-index: 2; align-self: center; padding: 20px 28% 20px 9%; background: none; min-width: 0; }
.hub-page .continue-copy h2 { font:700 clamp(27px,2.4vw,36px)/1.4 'Songti SC',SimSun,serif; letter-spacing:.05em; color:#f4eee4; margin:0 0 5px; white-space:nowrap; }
.hub-page #continueMeta { font-size:17px; letter-spacing:.04em; color:#c3c5c6; margin:0 0 22px; }
.hub-page .continue-action,.hub-page .entry-action,.hub-page .help-modal .primary-button { border:1px solid #ffe1a0; border-radius:5px; background:#efc16f url('/assets/lab/paper.webp') center / 300px; background-blend-mode:multiply; color:#201b13; box-shadow:inset 0 0 0 2px #f9dc9d66,0 3px 4px #0005; font-family:'Songti SC',SimSun,serif; font-weight:700; display:flex; align-items:center; justify-content:center; gap:15px; }
.hub-page .continue-action { width:100%; min-height:64px; font-size:25px; padding:10px; white-space:nowrap; }
.hub-page .continue-action span { margin-left:0; font-size:inherit; }
.hub-page .continue-tab { clip-path:none; }
.hub-page .continue-section::before { background-color:#d6c8b1; background-blend-mode:screen; }
.hub-page .continue-action svg,.hub-page .entry-action svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; }
.hub-page .evidence-props { position:absolute; z-index:2; right:-40px; bottom:-18px; width:230px; height:265px; object-fit:contain; transform:rotate(9deg); pointer-events:none; }
.hub-page .catalogue-heading { margin:22px 0 24px; display:flex; align-items:center; gap:24px; }
.hub-page .catalogue-heading::after { content:''; flex:1; height:1px; background:#626b6e; opacity:.7; }
.hub-page .catalogue-heading h2 { font:700 28px/1.4 'Songti SC',SimSun,serif; margin:0; position:relative; }
.hub-page .catalogue-heading h2::after { content:''; position:absolute; left:0; bottom:-7px; width:44px; height:3px; background:linear-gradient(90deg,#bab6a8 50%,#eac374 50%); }
.hub-page .game-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.hub-page .game-entry { min-width:0; }
.hub-page .game-card { display:block; min-height:0; height:100%; padding:9px; border:1px solid #626b6c; border-radius:5px; background:linear-gradient(125deg,#ffffff08,transparent 40%),#1b2329; box-shadow:inset 0 0 0 3px #ffffff05,0 5px 12px #0007; text-decoration:none; overflow:visible; transition:transform .18s,border-color .18s; }
.hub-page .game-card:hover { transform:translateY(-3px); border-color:#dbbd88; }
.hub-page .catalogue-media { padding:0; aspect-ratio:1.62; height:auto; overflow:hidden; border:1px solid #6d706c; border-radius:2px; background:#121c22; }
.hub-page .entry-copy { padding:17px 9px 5px; display:block; }
.hub-page .entry-title-row { gap:14px; align-items:center; }
.hub-page .entry-title-row h3 { font:700 25px/1.3 'Songti SC',SimSun,serif; color:#f6f0e4; letter-spacing:.04em; margin:0; }
.hub-page .entry-icon { width:32px; height:32px; color:#f6e5bf; stroke-width:2.5; flex-shrink:0; }
.hub-page .entry-icon { stroke:#f6e5bf; }
.hub-page .connect-entry .entry-icon circle,.hub-page .six-entry .entry-icon circle { fill:#f6e5bf; }
.hub-page .entry-copy > p { display:none; }
.hub-page .entry-footer { margin:0; padding:0; border:0; display:flex; flex-direction:column; align-items:stretch; gap:16px; }
.hub-page .game-meta { margin:3px 0 0 46px; color:#c1c6ca; font:15px/1.6 system-ui,sans-serif; white-space:nowrap; }
.hub-page .entry-action { width:100%; min-height:51px; font-size:20px; }
.hub-page .entry-action b { font-family:system-ui,sans-serif; font-size:24px; font-weight:400; }
.hub-page .preview-corner { display:none; }
.hub-page .hub-footer { display:flex; justify-content:center; gap:24px; margin:36px 0 12px; color:#aeb8bf; font-size:16px; letter-spacing:.08em; }
.hub-page .hub-footer span { flex:0 1 125px; background:#55616a; }
.hub-page .hub-footer p { margin:0; white-space:nowrap; }
.hub-page .help-modal { background:#e3d4b8 url('/assets/lab/paper.webp') center / 384px; color:#29251f; border:5px solid #4a4238; border-radius:6px; box-shadow:0 15px 70px #000b; }
.hub-page .help-modal h2,.hub-page .help-modal h3,.hub-page .help-modal p,.hub-page .help-modal strong { color:#29251f; }
.hub-page .help-game-list article { background:#fff3; border-color:#998468; }
.hub-page .help-invite-note { background:#b9986b22; border-color:#998468; }
.hub-page .help-modal .modal-close { color:#29251f; }
.hub-page :focus-visible { outline:3px solid #f0cb85; outline-offset:5px; }
@media (min-width:1700px) { .hub-page .hub-shell { padding-top:40px; } .hub-page .hub-topbar { min-height:170px; } }
@media (max-width:1100px) {
  .hub-page .hub-shell { width:calc(100% - 64px); }
  .hub-page .hub-topbar { padding-left:100px; }
  .hub-page .game-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hub-page .continue-copy { padding:24px 30px; }
  .hub-page .continue-copy h2 { white-space:normal; }
  .hub-page .evidence-props { width:120px; height:140px; right:-18px; bottom:-22px; opacity:.85; }
  .hub-page .continue-action { font-size:22px; min-height:56px; }
  .hub-page .continue-section { margin-left:0; margin-right:0; }
}
@media (max-width:600px) {
  .hub-page { background-position:55% top; background-size:auto 100svh; background-attachment:scroll; }
  .hub-page .hub-shell { width:calc(100% - 32px); padding-top:max(24px,env(safe-area-inset-top)); padding-bottom:max(24px,env(safe-area-inset-bottom)); }
  .hub-page .hub-topbar { padding:0 2px 25px; min-height:120px; gap:8px; align-items:flex-start; }
  .hub-page .hub-brand h1 { font-size:30px; letter-spacing:0; }
  .hub-page .hub-brand p { font-size:14px; letter-spacing:0; }
  .hub-page .hub-brand h1::after { margin-top:7px; width:32px; height:3px; }
  .hub-page .hub-help-button { margin:8px 3px 0 0; padding:8px; font-size:12px; gap:4px; box-shadow:0 0 0 3px #262b2dcc,0 0 0 4px #605744; min-height:44px; white-space:nowrap; }
  .hub-page .hub-help-button svg { width:18px; height:18px; }
  .hub-page .continue-section { grid-template-columns:1fr; padding:37px 12px 14px; min-height:0; margin:0 4px 26px; }
  .hub-page .continue-section::after { inset:36px 12px 13px; }
  .hub-page .continue-section::before { inset:-8px -3px 6px 7px; }
  .hub-page .continue-tab { font-size:19px; padding:7px 25px; left:10px; }
  .hub-page .continue-tab::before { height:39px; top:-12px; width:12px; left:6px; }
  .hub-page .continue-media,.hub-page .continue-media .catalogue-media { min-height:0; height:174px; border-radius:2px 2px 0 0; }
  .hub-page .continue-copy { padding:18px 20px 14px; }
  .hub-page .continue-copy h2 { font-size:27px; }
  .hub-page #continueMeta { font-size:14px; margin-bottom:15px; }
  .hub-page .continue-action { min-height:49px; font-size:21px; }
  .hub-page .evidence-props { width:100px; height:120px; right:-9px; bottom:57px; opacity:.45; z-index:1; }
  .hub-page .game-list { grid-template-columns:1fr; gap:18px; }
  .hub-page .game-card { display:grid; grid-template-columns:40% 1fr; padding:7px; gap:12px; }
  .hub-page .catalogue-media { aspect-ratio:auto; height:100%; min-height:140px; }
  .hub-page .entry-copy { padding:6px 4px 5px 0; align-self:center; }
  .hub-page .entry-title-row { gap:7px; }
  .hub-page .entry-title-row h3 { font-size:23px; letter-spacing:0; }
  .hub-page .entry-icon { width:24px; height:24px; }
  .hub-page .game-meta { font-size:12px; margin:5px 0 0; }
  .hub-page .entry-footer { gap:12px; }
  .hub-page .entry-action { min-height:44px; font-size:18px; gap:8px; }
  .hub-page .catalogue-heading { margin:0 0 20px; }
  .hub-page .catalogue-heading h2 { font-size:25px; }
  .hub-page .hub-footer { font-size:12px; gap:12px; margin-top:27px; }
  .hub-page .help-modal { border-radius:16px 16px 0 0; }
}
@media (prefers-reduced-motion:reduce) { .hub-page .game-card { transition:none; } }
