.game-body{min-height:100dvh;background:var(--color-bg);position:relative}.game-back-link{position:fixed;top:max(12px,env(safe-area-inset-top,12px));left:max(16px,env(safe-area-inset-left,16px));font-size:12px;font-weight:600;color:var(--color-text);opacity:.4;text-decoration:none;letter-spacing:.04em;z-index:10;min-height:44px;display:flex;align-items:center}.game-back-link:hover{opacity:.8}.page-container.game-page{max-width:860px;margin:0 auto;padding:var(--space-2xl) var(--space-lg) var(--space-md);padding-left:max(var(--space-lg),env(safe-area-inset-left,var(--space-lg)));padding-right:max(var(--space-lg),env(safe-area-inset-right,var(--space-lg)));padding-bottom:max(var(--space-md),env(safe-area-inset-bottom,var(--space-md)))}.game-header{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);margin-bottom:var(--space-md)}.page-title{font-family:var(--font-heading);font-size:var(--text-display);font-weight:var(--weight-playfair);color:var(--color-text);margin:0}.score-tally{font-family:var(--font-heading);font-size:var(--text-display);font-weight:var(--weight-playfair);color:var(--color-accent)}@media(max-width:640px){.score-tally{font-size:var(--text-heading)}}.game-subtitle{font-family:var(--font-heading);font-size:var(--text-heading);font-weight:var(--weight-playfair);color:var(--color-text);margin-bottom:var(--space-md)}.game-intro{font-size:var(--text-body);color:var(--color-text);opacity:.8;line-height:var(--lh-body);margin-bottom:var(--space-xl)}.tiles-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-sm);margin-top:var(--space-sm)}@media(max-width:640px){.tiles-grid{grid-template-columns:repeat(3,1fr)}}.portrait-tile{display:flex;flex-direction:column;width:100%;aspect-ratio:3 / 4;border:1px solid rgba(245,240,232,.1);border-radius:4px;overflow:hidden;cursor:pointer;background:var(--color-surface);transition:border-color .15s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}@media(hover:hover)and (pointer:fine){.portrait-tile:hover{border:2px solid var(--color-accent)}}.portrait-tile[aria-selected=true]{border:3px solid rgba(201,168,76,.6)}.portrait-tile.correct{border:3px solid #2d6a35;background:#2d6a3526}.portrait-tile.wrong{border:3px solid #6b1a1a;background:#6b1a1a26}.portrait-img-wrap{position:relative;flex:1;min-height:0;overflow:hidden}.portrait-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}.tile-matrix{display:flex;flex-direction:column;gap:1px;padding:3px 5px 4px;background:#101010f7;flex-shrink:0}.matrix-cell{display:block;font-size:7px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reveal-name{position:absolute;bottom:0;left:0;right:0;padding:var(--space-xs) var(--space-sm);background:#1a1a1ad9;font-family:var(--font-heading);font-size:14px;font-weight:var(--weight-playfair);color:var(--color-text);text-align:center;line-height:1.2}.round-controls{display:flex;align-items:center;gap:var(--space-sm);height:44px;margin:var(--space-sm) 0 var(--space-md)}.reveal-actions{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}.btn-next{margin:0;min-width:0;min-height:44px;width:auto;padding:5px var(--space-sm);font-size:15px;flex-shrink:0;white-space:nowrap}.question-row{display:flex;align-items:baseline;gap:var(--space-md);flex-wrap:wrap;margin-bottom:var(--space-sm)}.question-row .question-prompt{margin-bottom:0}.points-earned{font-family:var(--font-heading);font-size:var(--text-heading);font-weight:var(--weight-playfair);color:var(--color-accent);white-space:nowrap;flex-shrink:0}.points-earned{min-height:1.4em;display:block}.countdown-wrap{flex:1;display:flex;align-items:center;gap:var(--space-sm);min-width:0;overflow:hidden}.countdown-track{flex:1;height:8px;background:var(--color-surface);border-radius:4px;overflow:hidden;position:relative}.countdown-bar{height:100%;width:100%;background:var(--color-accent);border-radius:4px;transform-origin:right center;transition:transform .1s linear}.countdown-bar.warning{background:#c0392b}.countdown-seconds{font-size:var(--text-label);font-weight:600;color:var(--color-text);opacity:.8;flex-shrink:0;min-width:28px;text-align:right}.question-prompt{font-family:var(--font-heading);font-size:var(--text-heading);font-weight:var(--weight-playfair);color:var(--color-text);margin-bottom:var(--space-sm)}.results-heading{font-family:var(--font-heading);font-size:var(--text-heading);font-weight:var(--weight-playfair);color:var(--color-text);margin-bottom:var(--space-lg)}.final-score-wrap{text-align:center;margin-bottom:var(--space-xl)}.final-score{font-family:var(--font-heading);font-size:var(--text-display);font-weight:var(--weight-playfair);color:var(--color-accent);line-height:var(--lh-display)}.final-score-label{font-size:var(--text-body);color:var(--color-text);opacity:.6}.section-heading{font-family:var(--font-heading);font-size:var(--text-heading);font-weight:var(--weight-playfair);color:var(--color-text);margin:var(--space-xl) 0 var(--space-md)}.stats-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);margin-bottom:var(--space-xl)}@media(max-width:640px){.stats-columns{grid-template-columns:1fr}}@media(max-width:640px){.page-title{font-size:var(--text-heading)}.question-prompt,.points-earned{font-size:24px}.btn-primary{min-width:0;width:100%;margin:var(--space-xs) 0}.btn-next{width:auto;margin:0}.tile-matrix{padding:2px 4px 3px}.reveal-name{font-size:11px}}.stats-columns h4{font-family:var(--font-heading);font-size:var(--text-label);font-weight:var(--weight-playfair);color:var(--color-accent);margin-bottom:var(--space-sm);text-transform:uppercase;letter-spacing:.04em}.stat-row{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.stat-thumb{width:48px;height:64px;border-radius:4px;object-fit:cover;object-position:top center;flex-shrink:0}.stat-name{flex:1;font-size:var(--text-body);color:var(--color-text)}.stat-rate{font-size:var(--text-label);font-weight:600;color:var(--color-accent);opacity:.85}.leaderboard{margin-bottom:var(--space-xl)}.leaderboard--lobby{margin-bottom:var(--space-lg)}.lb-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0;border:2px solid rgba(245,240,232,.15)}.lb-avatar--first{border-color:var(--color-accent);width:42px;height:42px}.lb-avatar--placeholder{background:#f5f0e81a;display:inline-block}.lb-crown{font-size:.9rem;margin-left:-6px;margin-right:2px;align-self:flex-start;margin-top:-4px}.lb-list{list-style:none;padding:0;margin:0}.lb-list li{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:1px solid rgba(245,240,232,.08);font-size:var(--text-body);color:var(--color-text)}.lb-rank{font-weight:700;color:var(--color-accent);min-width:2.5rem}.lb-name{flex:1}.lb-score{font-weight:600;color:var(--color-text);opacity:.8}.btn-primary{background:var(--color-accent);color:#1a1a1a;border:none;padding:var(--space-sm) var(--space-xl);font-size:var(--text-body);font-weight:600;border-radius:4px;cursor:pointer;min-height:44px;min-width:280px;display:block;margin:var(--space-lg) auto;font-family:var(--font-body)}.btn-primary:hover{background:#c9a84cd9}.btn-primary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@keyframes pulse{0%,to{opacity:.4}50%{opacity:.8}}.skeleton-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-md);margin-top:var(--space-lg)}@media(max-width:640px){.skeleton-grid{grid-template-columns:repeat(2,1fr)}}.skeleton-tile{aspect-ratio:1 / 1;background:var(--color-surface);border-radius:4px;animation:pulse 1.2s infinite}.error-banner{background:#6b1a1a33;border:1px solid #6b1a1a;border-radius:4px;padding:var(--space-md) var(--space-lg);color:#ffb3b3;font-size:var(--text-body);margin-top:var(--space-lg)}.empty{color:var(--color-text);opacity:.5;font-size:var(--text-body);font-style:italic}.landscape-notice{display:none;font-size:var(--text-label);color:var(--color-accent);opacity:.85;margin-bottom:var(--space-md);font-weight:600;letter-spacing:.02em}@media(orientation:portrait)and (max-width:640px){.landscape-notice{display:block}}.portrait-gate{position:fixed;inset:0;z-index:200;background:var(--color-bg);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-xl)}.portrait-gate[hidden]{display:none}.portrait-gate-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.portrait-gate-icon{font-size:64px;color:var(--color-accent);animation:rotate-hint 2s ease-in-out infinite}@keyframes rotate-hint{0%,to{transform:rotate(0)}40%{transform:rotate(90deg)}60%{transform:rotate(90deg)}}.portrait-gate-msg{font-family:var(--font-heading);font-size:var(--text-heading);font-weight:var(--weight-playfair);color:var(--color-text);max-width:260px;line-height:var(--lh-body)}@media(orientation:landscape)and (max-height:600px){.page-container.game-page{padding-top:4px;padding-bottom:4px}.game-header{margin-bottom:2px;gap:2px 8px}.page-title{font-size:15px}.score-tally{font-size:20px;font-weight:700}.game-page:has(#round-view:not([hidden])) .page-title{display:none}.question-row{margin-bottom:2px}.question-prompt,.points-earned{font-size:22px}.round-controls{height:18px;margin:2px 0 4px}.tiles-grid{gap:3px;margin-top:2px}.tile-matrix{padding:1px 3px 2px}.matrix-cell{font-size:6px;line-height:1.4}.reveal-name{font-size:9px;padding:2px 4px}.reveal-actions{align-self:flex-end}.btn-next{height:39px;min-height:0;padding:0 4px;font-size:33px;line-height:39px}.countdown-seconds{font-size:12px;min-width:22px}}