/* Device composition: the second orientation sits high, with a trail of gold. */
.device-captures { isolation: isolate; aspect-ratio: 1 / 1.08; padding: 2% 3% 8%; max-width: 620px; }
.device-captures::before { content: ''; position: absolute; inset: 12% 2% 5%; z-index: -1; background: radial-gradient(ellipse at 45% 55%, #3d66542b, transparent 65%); }
.device-captures .phone-capture { position: relative; z-index: 2; width: 49%; transform: rotate(-6deg); border-color: #a29a7780; box-shadow: 8px 18px 28px #0009, inset 0 0 0 2px #151f1b; }
.device-captures .landscape-capture { z-index: 3; width: 80%; top: 39%; bottom: auto; right: -1%; transform: rotate(4deg); border-color: #a29a7780; box-shadow: 4px 15px 24px #000b, inset 0 0 0 2px #151f1b; }
.device-treasures { position: absolute; inset: 0; pointer-events: none; }
.device-treasures img { position: absolute; object-fit: contain; height: auto; filter: drop-shadow(2px 8px 7px #0008); }
.device-note { width: 34%; right: 4%; top: 8%; transform: rotate(16deg); }
.device-print { width: 19%; right: 15%; bottom: 3%; transform: rotate(-18deg); }
.device-coin { position: absolute; width: 7%; aspect-ratio: 1; border: 2px solid #e0b567; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #eed49a, #ac702f 55%, #5c371b 82%); box-shadow: inset 0 0 0 3px #73471d88, 2px 4px 0 #533014, 4px 8px 8px #0007; }
.device-coin::after { content: '✦'; display: grid; height: 100%; place-items: center; color: #815221; font-size: clamp(10px, 2vw, 23px); text-shadow: 0 1px #f2cd85; }
.coin-one { right: 4%; top: 31%; transform: rotate(24deg); }
.coin-two { right: 5%; bottom: 15%; transform: rotate(-14deg); }
.coin-three { right: 33%; bottom: 6%; width: 5%; transform: rotate(40deg); }

/* The three worlds read as a continuous journey while retaining their own materials. */
.journey-grid { gap: 28px; align-items: stretch; }
.journey-grid article { position: relative; isolation: isolate; padding: 0; border-radius: 18px; background: #17221b; border: 1px solid #8f7c484f; box-shadow: 0 12px 24px #0003; display: flex; flex-direction: column; }
.journey-grid .journey-wood { --tier: #e4bd77; --stage-shade: #263225; }
.journey-grid .journey-yeti { --tier: #add6de; --stage-shade: #233c47; background: #172b33; border-color: #85adba55; }
.journey-grid .journey-astral { --tier: #d6b2ec; --stage-shade: #34253f; background: #251b2f; border-color: #ae85c055; }
.stage-heading { display: flex; align-items: center; gap: 14px; padding: 25px 24px 12px; position: relative; z-index: 2; }
.stage-world { display: block; font-size: 10px; font-weight: 800; letter-spacing: .18em; color: var(--tier); }
.journey-grid h3 { margin: 5px 0 0; font-size: clamp(29px, 3vw, 42px); line-height: 1; }
.stage-art { position: relative; height: clamp(260px, 26vw, 365px); overflow: hidden; background: linear-gradient(0deg, var(--stage-shade), #12251d20 70%), url('./assets/story-forest.webp') center 45% / cover; }
.journey-yeti .stage-art { background-image: linear-gradient(0deg, #233c47, #a4d0df20 70%), url('./assets/story-forest.webp'); background-blend-mode: normal, luminosity; }
.journey-astral .stage-art { background-image: linear-gradient(0deg, #34253f, #39225020 70%), url('./assets/story-astral.webp'); }
.stage-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--stage-shade), transparent 35%); pointer-events: none; }
.journey-grid .stage-character { position: absolute; bottom: 0; left: 5%; width: 90%; height: 96%; object-fit: contain; object-position: center bottom; mask-image: none; filter: drop-shadow(0 8px 12px #0005); transform-origin: 50% 90%; transition: transform .6s ease; }
.journey-grid .stage-medallion { position: absolute; z-index: 2; right: 16px; bottom: 13px; width: 70px; height: 70px; object-fit: contain; mask-image: none; filter: drop-shadow(0 4px 5px #0007); }
.stage-details { position: relative; z-index: 2; padding: 20px 24px 25px; flex: 1; display: flex; flex-direction: column; background: linear-gradient(var(--stage-shade), transparent 90%); border-radius: 0 0 18px 18px; }
.stage-gate { color: var(--tier); font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.stage-gate::before { content: '↳ '; font-size: 15px; }
.journey-wood .stage-gate::before { content: '✦ '; }
.journey-grid p { margin: 13px 0 20px; color: #d1d9d0; font-size: 14px; line-height: 1.65; }
.journey-grid b { display: block; margin-top: auto; padding-top: 14px; border-top: 1px solid #ffffff16; font-size: 10px; line-height: 1.5; }
.journey-grid article:not(:last-child)::after { content: '→'; position: absolute; right: -24px; top: 42%; width: 20px; text-align: center; color: #b9ad8e; font-size: 21px; z-index: 4; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .journey-grid article:hover .stage-character { transform: translateY(-5px) rotate(-1deg); } .device-captures .landscape-capture { transition: transform .5s ease; } .device-captures:hover .landscape-capture { transform: translateY(-4px) rotate(2deg); } }
@media(max-width: 760px) { .journey-grid { grid-template-columns: 1fr; gap: 30px; max-width: 470px; margin-inline: auto; } .stage-art { height: 335px; } .journey-grid article:not(:last-child)::after { content: '↓'; top: auto; bottom: -27px; left: calc(50% - 10px); right: auto; } .device-captures { padding: 2% 3% 8%; max-width: 500px; } }
@media(min-width:761px) and (max-width:1000px) { .stage-heading { padding: 20px 16px 12px; gap: 9px; } .stage-details { padding: 17px 16px 23px; } .journey-grid { gap: 21px; } .journey-grid article:not(:last-child)::after { right: -20px; } .journey-grid h3 { font-size: 28px; } }
@media(orientation:landscape) and (max-height:520px) { .device-captures { padding: 2% 3% 8%; } }
@media(prefers-reduced-motion:reduce) { .journey-grid .stage-character, .device-captures .phone-capture, .device-captures .landscape-capture { transition: none; animation: none; } }
/* Keep treasure touching the devices, as part of one compact composition. */
.device-treasures { z-index: 4; }
.device-note { width: 29%; right: 8%; top: 29%; transform: rotate(12deg); }
.device-print { width: 17%; right: 9%; bottom: 23%; transform: rotate(-18deg); }
.coin-one { right: 5%; top: 40%; }
.coin-two { right: 22%; bottom: 22%; }
.coin-three { right: 36%; bottom: 24%; }
.journey-grid p { font-size: 16px; line-height: 1.65; }
.stage-world, .stage-gate, .journey-grid b { font-size: 11px; }
.stage-details { padding-inline: 26px; }
@media(max-width: 760px) { .journey-grid p { font-size: 15px; } .stage-heading, .stage-details { padding-inline: 20px; } }
@media(min-width:761px) and (max-width:1000px) { .stage-details { padding-inline: 24px; } }
@media(min-width:761px) and (max-width:1000px) { .journey-grid h3 { font-size: 24px; } }
.journey-grid p { font-size: 20px; }
@media(max-width:760px) { .journey-grid p { font-size: 18px; } }
/* Progress arrows belong to the grid gaps, not overflowing card content. */
.journey-grid { position: relative; }
.journey-grid article:not(:last-child)::after { content: none; }
.journey-grid::before, .journey-grid::after { content: '→'; position: absolute; top: 42%; width: 20px; text-align: center; color: #b9ad8e; font-size: 21px; z-index: 4; pointer-events: none; }
.journey-grid::before { left: calc((100% - 56px) / 3 + 4px); }
.journey-grid::after { left: calc((100% - 56px) * 2 / 3 + 32px); }
@media(min-width:761px) and (max-width:1000px) {
 .journey-grid::before { left: calc((100% - 42px) / 3 + .5px); }
 .journey-grid::after { left: calc((100% - 42px) * 2 / 3 + 21.5px); }
}
@media(max-width:760px) {
 .journey-grid::before, .journey-grid::after { content: none; }
}
@media(max-width:760px) {
 .journey-grid { grid-auto-rows: 1fr; }
 .journey-grid::before, .journey-grid::after { content: '↓'; left: calc(50% - 10px); }
 .journey-grid::before { top: calc((100% - 60px) / 3 + 2px); }
 .journey-grid::after { top: calc((100% - 60px) * 2 / 3 + 32px); }
}
/* Centre the trail introduction; the symbol hierarchy keeps its own alignment. */
.symbol-trail > .eyebrow, .symbol-trail > h2, .symbol-trail > .symbol-trail-intro { text-align: center; margin-inline: auto; }
.symbol-trail > .symbol-trail-intro { max-width: 760px; }
/* Treasure grazes the outer bezels without covering Scorch or the controls. */
.device-note { width: 24%; right: 0; top: 22%; transform: rotate(12deg); }
.device-print { width: 16%; right: 11%; bottom: 13%; transform: rotate(-18deg); }
.coin-one { right: 0; top: 36%; width: 6%; }
.coin-two { right: 26%; bottom: 12%; width: 6%; }
.coin-three { right: 32%; bottom: 18%; width: 4.5%; }
/* A single timber tab rail joins directly to the captured game frame. */
.gameplay-gallery > .section-heading { display: block; text-align: center; margin-inline: auto; }
.gameplay-gallery > .section-heading > p { max-width: 760px; margin: 24px auto 36px; text-align: center; }
.gameplay-gallery .capture-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 7px 7px 0; border: 1px solid #8c7245; border-bottom: 0; border-radius: 12px 12px 0 0; background: #33281b; }
.gameplay-gallery .capture-controls button { min-width: 0; min-height: 64px; padding: 15px 18px; border: 1px solid #9a774551; border-bottom: 0; border-radius: 7px 7px 0 0; color: #dbc7a2; font-size: 18px; line-height: 1.25; background: repeating-linear-gradient(176deg, #0000 0 5px, #110b0619 6px 7px), linear-gradient(100deg, #3e3021, #59422b 45%, #3c2d20); box-shadow: inset 0 1px #d9b47728; transform: none; }
.gameplay-gallery .capture-controls button span { font-size: 13px; color: #c9a66c; }
.gameplay-gallery .capture-controls button[aria-pressed='true'] { color: #fff3d5; border-color: #ddb877; background: repeating-linear-gradient(177deg, #0000 0 5px, #3a260c20 6px 7px), linear-gradient(105deg, #77532d, #a78049 48%, #71502c); box-shadow: inset 0 3px 7px #2c1b1866, inset 0 -4px #edc97a; }
.gameplay-gallery .capture-controls button:hover { transform: none; color: #fff4d7; }
.gameplay-gallery .capture-controls button:focus-visible { outline: 3px solid #a3edcf; outline-offset: -5px; position: relative; z-index: 2; }
.gameplay-gallery .game-capture { border-radius: 0 0 10px 10px; border-color: #8c7245; border-top: 0; background: linear-gradient(110deg, #4b3824, #251e16, #725132); }
@media(max-width:760px) {
 .gameplay-gallery .capture-controls { gap: 3px; padding: 4px 4px 0; }
 .gameplay-gallery .capture-controls button { padding: 12px 6px; font-size: 14px; min-height: 83px; }
 .gameplay-gallery .capture-controls button span { display: block; margin: 0 0 5px; font-size: 12px; }
}