.game-preview { padding: clamp(18px, 4vw, 38px); }
.preview-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.preview-heading h2 { font: 700 clamp(28px,4vw,38px)/1.15 'Nunito', sans-serif; margin: 0 0 8px; }
.preview-heading p, .preview-caption { font: 14px/1.6 'Inter',sans-serif; }
.preview-tag { background: #FFF6CC; border: 1px solid #0F172A; border-radius: 20px; padding: 6px 12px; white-space: nowrap; font: 12px 'Inter',sans-serif; }
.preview-stage { border-radius: 24px; overflow: hidden; border: 2px solid #0F172A; background: #FFFDF5; }
.preview-stage img { width: 100%; height: auto; aspect-ratio: 16/9; display: block; }
.preview-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 0; }
.preview-controls button, .preview-tabs button { cursor: pointer; border: 2px solid #0F172A; padding: 11px 18px; border-radius: 12px; font: 600 14px 'Inter',sans-serif; min-height: 46px; color: #0F172A; background: #FFFDF5; }
.preview-controls button { background: #2DD4BF; }
.preview-controls span { font: 13px 'Inter',sans-serif; }
.preview-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.preview-tabs button[aria-pressed="true"] { background: #FFF6CC; box-shadow: 3px 3px 0 #0F172A; }
.preview-caption { color: #0F172A; margin: 0; }
.preview-guide { display: flex; align-items: center; gap: 10px; }
.avatar-peek { width: 75px; height: 88px; object-fit: contain; animation: companion-hello 4.8s ease-in-out infinite; }
@media(prefers-reduced-motion: reduce) { .avatar-peek { animation: none; } }
.game-preview { scroll-margin-top: 150px; }
.game-catalog { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; background: transparent; }
.game-detail { padding: 26px; background: #FFF6CC; color: #0F172A; scroll-margin-top: 150px; display: flex; flex-direction: column; gap: 16px; }
.game-detail:nth-child(3n+2) { background: color-mix(in srgb,#8ABBE6 25%,#FFFDF5); }
.game-detail:nth-child(3n) { background: color-mix(in srgb,#FFAD84 22%,#FFFDF5); }
.game-icon { display: grid; place-items: center; width: 54px; height: 54px; border: 2px solid #0F172A; border-radius: 12px 16px 10px 14px; background: #FFFDF5; font-size: 27px; }
.game-detail p,.game-detail li { font: 14px/1.7 'Inter',sans-serif; }
.game-detail h3 { font-size: 28px; line-height: 1.2; }
.game-dimension { padding: 8px 10px; border-radius: 8px; background: rgb(255 253 245 / .7); font-weight: 700 !important; }
.game-basis { padding-top: 14px; border-top: 1px dashed #0F172A; }
.game-basis h4 { font: 700 22px 'Nunito',sans-serif; margin-bottom: 8px; }
.game-basis > strong { font: 700 14px/1.6 'Inter',sans-serif; }
.game-basis p { margin-top: 8px; }
.game-detail ul { padding-top: 12px; border-top: 1px solid rgb(15 23 42 / .15); }
.watch-game { margin-top: auto; min-height: 44px; padding: 10px; border: 2px solid #0F172A; border-radius: 12px; background: #2DD4BF; color: #0F172A; font: 700 13px 'Inter',sans-serif; cursor: pointer; transition: transform 150ms ease-out; }
.watch-game:hover { transform: translateY(-2px); }
.foundation-note { font: 13px/1.7 'Inter',sans-serif; padding: 20px 24px; background: #FFF6CC; border-left: 4px solid #0F172A; }
@media(max-width: 1000px) { .game-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 640px) { .game-catalog { grid-template-columns: 1fr; } .game-preview,.game-detail { scroll-margin-top: 20px; } }
@media(max-width: 600px) { .preview-heading { flex-direction: column; gap: 8px; } .preview-tabs button { flex: 1; } }