/* Scene composition from OptionsScene.ts / RestScene.ts and theme.css.
   Artwork remains on its original layers. Layout and copy adapt to a web page.
   This file only styles the content AFTER the accepted menu and trailer. */
.game-scene {
  --paper: #f4efe3;
  --magenta: #ff2eaa;
  --scene-cyan: #2be0ff;
  --font-display: 'Bowlby One', sans-serif;
  --font-label: Oswald, sans-serif;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  background: #05050a;
  scroll-margin-top: 0;
}
.scene-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene-background { width: 100%; height: 100%; object-fit: cover; }
.scene-character { position: absolute; max-width: none; }
.scene-shade, .scene-grid { position: absolute; inset: 0; }
.scene-content { position: relative; z-index: 2; width: 43%; margin-left: 52%; padding: 76px 0; }
.game-scene h2 { font-family: var(--font-display); font-size: clamp(32px, 3.1vw, 56px); font-style: italic; font-weight: 400; line-height: 1.14; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 3px 0 #000, 0 0 26px #2be0ff29; }
.scene-kicker { font: 700 18px/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .17em; color: var(--scene-cyan); margin-bottom: 15px; }
.scene-lead { margin-top: 18px; color: #f4efe3b8; font-size: 22px; line-height: 1.4; }
.scene-rest { min-height: max(730px, 56.25vw); display: flex; align-items: center; }
.scene-rest .scene-background { filter: saturate(.9) brightness(.76) contrast(1.08); }
/* Original Rest coordinates: x 138, y 115, w 970, h 1007, canvas 1920 × 1080. */
.rest-character { left: 7.1875%; top: 10.648%; width: 50.521%; height: 93.241%; object-fit: contain; filter: saturate(.74) brightness(.7) contrast(1.08) sepia(.06) drop-shadow(0 18px 20px #0008); }
.scene-rest .scene-grid { background: linear-gradient(#2be0ff09 1px, transparent 1px), linear-gradient(90deg, #2be0ff07 1px, transparent 1px); background-size: 82px 82px; opacity: .36; mask-image: linear-gradient(90deg, transparent 35%, #000 50%); }
.scene-rest .scene-shade { background: linear-gradient(90deg, #00000024 0%, #00000038 38%, #0000008f 56%, #000000d6 100%), linear-gradient(180deg, #00000070, transparent 22% 68%, #000000b8); }
.heist-steps { display: grid; gap: 15px; list-style: none; padding: 0; margin: 30px 0 0; counter-reset: heist; }
.heist-step {
  --accent: var(--scene-cyan);
  position: relative;
  counter-increment: heist;
  padding: 20px 28px 21px 82px;
  background: linear-gradient(100deg, #f4efe309, transparent 36%), linear-gradient(90deg, color-mix(in srgb, var(--accent), transparent 88%), #030209e6 44%, #030209b8);
  border: 1.5px solid color-mix(in srgb, var(--accent), transparent 42%);
  clip-path: polygon(22px 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  box-shadow: inset 0 0 0 1px #f4efe30a, inset 0 -1px 0 color-mix(in srgb, var(--accent), transparent 72%);
}
.heist-step:nth-child(2) { --accent: var(--magenta); }
.heist-step:nth-child(3) { --accent: #ff315f; }
.heist-step::before { content: '0' counter(heist); position: absolute; top: 23px; left: 25px; font: italic 700 27px/1 var(--font-label); color: var(--accent); }
.heist-step h3 { margin: 0 0 7px; font: italic 700 25px/1.15 var(--font-label); text-transform: uppercase; letter-spacing: .025em; }
.heist-step p { font-size: 20px; line-height: 1.35; color: #f4efe3bd; }
.scene-settings { min-height: max(730px, 56.25vw); display: flex; align-items: center; }
.scene-settings .scene-background { filter: saturate(.98) brightness(.88) contrast(1.04); }
/* Options uses a height-fitted cutout, left aligned, translated down 58px. */
.settings-character { left: -.52%; top: 5.37%; width: auto; height: 100%; filter: drop-shadow(22px 18px 28px #0000007a); }
.scene-settings .scene-shade { background: linear-gradient(90deg, #02010614 0%, #0201062e 32%, #020106a8 50%, #020106c7 74%, #0201067a), linear-gradient(180deg, #0008, transparent 20% 68%, #000000c7); }
.scene-settings .scene-grid { background: radial-gradient(ellipse 32% 48% at 63% 45%, #ff2eaa1f, transparent 72%), radial-gradient(ellipse 31% 44% at 26% 55%, #2be0ff1a, transparent 72%); mix-blend-mode: screen; }
.scene-settings .scene-kicker { color: var(--magenta); }
.story-panel { margin-top: 28px; padding: 28px 34px; background: linear-gradient(112deg, #ff2eaa29, transparent 34%, #2be0ff1a), linear-gradient(180deg, #f4efe309, transparent 22%), #05030ce0; border: 1.5px solid #f4efe329; clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%); box-shadow: inset 0 0 0 1px #2be0ff14, inset 0 -1px 0 #ff2eaa2e; }
.story-panel p { font-size: 22px; line-height: 1.5; color: #f4efe3c9; }
.story-panel p + p { margin-top: 20px; padding-top: 20px; border-top: 1px solid #f4efe31a; }
.story-panel strong { font-weight: 600; color: var(--paper); }
.scene-archive { padding: 86px 5% 64px; }
.scene-archive .scene-background { object-position: left center; }
.scene-archive .scene-shade { background: linear-gradient(90deg, #02010648, #0201068a 42%, #020106a3), linear-gradient(#05050a80, transparent 25% 70%, #05050a); }
.archive-layout { position: relative; display: grid; grid-template-columns: .75fr 1.65fr; gap: 6%; align-items: center; max-width: 1540px; margin: auto; }
.archive-copy h2 { font-size: clamp(30px, 2.9vw, 48px); }
.archive-copy .art-credit { margin: 25px 0 0; font-size: 21px; line-height: 1.45; color: #f4efe3b8; }
.archive-copy .art-credit strong { color: var(--paper); }
.scene-archive .gallery-shell { width: 100%; min-width: 0; margin: 0; }
.scene-archive .gallery-slide a { border: 1px solid #f4efe345; padding: 5px; background: #05030c; }
.scene-archive .gallery-slide figcaption { text-align: left; font: 400 19px/1.4 var(--font-label); color: #f4efe3ba; padding: 18px 0 0; }
.scene-archive .gallery-controls { justify-content: flex-end; margin-top: 16px; gap: 14px; }
.scene-archive .gallery-controls button { border-color: #2be0ff66; background: #030209cc; width: 48px; height: 44px; }
.scene-archive .gallery-controls button:hover { background: #2be0ff26; }
.scene-archive .gallery-controls span { font: 400 18px var(--font-label); color: var(--paper); }
.heist-closing { position: relative; max-width: 1540px; margin: 70px auto 0; padding-top: 38px; border-top: 1px solid #f4efe326; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.heist-closing h2 { font-size: clamp(26px, 2.4vw, 40px); }
.heist-closing p { font-size: 20px; color: #f4efe3b8; margin-top: 10px; }
.scene-cta { display: inline-flex; justify-content: center; align-items: center; gap: 25px; flex-shrink: 0; min-height: 66px; padding: 16px 32px; border: 1.5px solid #ff2eaa9c; background: linear-gradient(90deg, #ff2eaa24, #05030cde); font: italic 700 23px/1.2 var(--font-label); text-transform: uppercase; }
.scene-cta:hover { border-color: var(--magenta); background: #ff2eaa33; }
.scene-cta span { color: var(--magenta); }
.site-footer { background: #05050a; }

/* One gameplay slideshow replaces both the old feature list and art gallery. */
.gameplay-showcase { padding: 70px 5% 56px; }
.gameplay-showcase .scene-background { object-position: left center; opacity: .6; }
.gameplay-showcase .scene-shade { background: linear-gradient(90deg, #05050a90, #05050ab8), linear-gradient(#05050a66, transparent 30% 65%, #05050a); }
.gameplay-inner { position: relative; max-width: 1600px; margin: auto; min-width: 0; }
.gameplay-header { margin-bottom: 30px; }
.gameplay-header h2 { font-size: clamp(30px, 3vw, 50px); }
.gameplay-steps { display: flex; gap: 10px; margin-bottom: 34px; }
.gameplay-steps button { min-height: 48px; padding: 10px 23px; border: 1px solid #f4efe330; background: #05030ccc; font: italic 700 20px/1.2 var(--font-label); text-transform: uppercase; }
.gameplay-steps button span { color: #f4efe366; margin-right: 9px; }
.gameplay-steps button[aria-pressed="true"] { border-color: var(--scene-cyan); background: linear-gradient(100deg, #2be0ff29, #05030c); }
.gameplay-steps button[aria-pressed="true"] span { color: var(--scene-cyan); }
.gameplay-steps button:hover { border-color: var(--magenta); }
.gameplay-slide { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.7fr); gap: 5%; align-items: center; }
.gameplay-slide figcaption { padding: 0; }
.gameplay-slide h3 { margin: 0; font: italic 400 clamp(27px, 2.6vw, 44px)/1.17 var(--font-display); color: var(--paper); letter-spacing: -.025em; text-shadow: 0 3px 0 #000; }
.gameplay-slide .gameplay-description { font: 500 22px/1.45 Rajdhani, sans-serif; color: #f4efe3c4; margin-top: 22px; max-width: 420px; }
.gameplay-slide a { border: 1px solid #f4efe340; padding: 4px; background: #05030c; }
.gameplay-slide img { aspect-ratio: 16/9; object-fit: contain; }
.gameplay-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.gameplay-bottom > p { font-size: 18px; color: #f4efe380; }
.gameplay-bottom .gallery-controls { margin: 0; gap: 16px; }
.gameplay-bottom .gallery-controls button { border-color: #2be0ff70; background: #030209cc; width: 48px; height: 46px; }
.gameplay-bottom .gallery-controls button:hover { background: #2be0ff26; }
.gameplay-bottom .gallery-controls span { color: var(--paper); font: 400 18px var(--font-label); }
.site-footer .heist-closing { margin: 0 auto 55px; padding: 24px 0 38px; width: min(1440px, 94%); border-top: 0; border-bottom: 1px solid #f4efe326; text-align: left; }
.site-footer .heist-closing h2 { font-size: clamp(26px, 2.4vw, 40px); }
.site-footer .heist-closing p { font-size: 20px; }
.site-footer .footer-art-credit { font-size: 18px; margin: 0 auto 16px; color: #f4efe3a3; }
@media (max-width: 1050px) {
  .gameplay-slide { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: 4%; }
  .gameplay-slide h3 { font-size: 29px; }
  .gameplay-slide .gameplay-description { font-size: 21px; }
  .gameplay-steps button { padding-inline: 17px; }
}
@media (max-width: 800px) {
  .gameplay-showcase { padding: 48px 24px 40px; }
  .gameplay-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 28px; }
  .gameplay-steps button { padding: 12px 6px; font-size: 18px; }
  .gameplay-steps button span { display: none; }
  .gameplay-slide { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
  .gameplay-slide figcaption { flex: 1; }
  .gameplay-slide h3 { font-size: clamp(28px, 5vw, 36px); }
  .gameplay-slide .gameplay-description { max-width: 560px; margin-top: 17px; }
  .gameplay-bottom { justify-content: flex-end; }
  .gameplay-bottom > p { display: none; }
  .site-footer .heist-closing { width: 100%; margin-bottom: 35px; }
}

@media (min-width: 1921px) {
  .scene-content { max-width: 780px; }
}
@media (max-width: 1050px) {
  .scene-content { width: 47%; margin-left: 49%; }
  .heist-step { padding: 18px 22px 18px 66px; }
  .heist-step::before { left: 20px; font-size: 24px; }
  .heist-step h3 { font-size: 23px; }
  .story-panel { padding: 25px; }
  .archive-layout { grid-template-columns: 1fr; gap: 32px; }
  .archive-copy { max-width: 660px; }
  .archive-copy .art-credit { margin-top: 16px; }
  .heist-closing { margin-top: 45px; }
}
/* Portrait: show the complete composition, then the copy. Never put copy on faces. */
@media (max-width: 800px) {
  .scene-rest, .scene-settings { display: block; min-height: 0; }
  .scene-rest .scene-stage, .scene-settings .scene-stage { position: relative; height: auto; aspect-ratio: 1.24; width: 100%; }
  .scene-rest .scene-background, .scene-settings .scene-background { position: absolute; inset: 0; object-position: left center; }
  .rest-character { left: 1%; top: 6%; width: 86%; height: 105%; }
  .settings-character { left: 0; top: 5%; height: 108%; }
  .scene-rest .scene-shade, .scene-settings .scene-shade { background: linear-gradient(180deg, #05050a33, transparent 20% 67%, #05050a); }
  .scene-content { width: auto; max-width: 620px; margin: 0 auto; padding: 0 24px 54px; }
  .game-scene h2 { font-size: clamp(30px, 5.4vw, 42px); }
  .scene-lead { font-size: 21px; }
  .scene-kicker { font-size: 18px; margin-bottom: 12px; }
  .heist-steps { margin-top: 25px; }
  .heist-step { padding: 20px 25px 20px 67px; }
  .heist-step h3 { font-size: 24px; }
  .heist-step p { font-size: 20px; }
  .story-panel { margin-top: 24px; padding: 25px 27px; }
  .story-panel p { font-size: 21px; }
  .scene-archive { padding: 54px 24px 45px; }
  .scene-archive .scene-background { opacity: .65; }
  .heist-closing { align-items: flex-start; flex-direction: column; gap: 24px; }
  .scene-cta { width: 100%; font-size: 22px; }
}

/* Lighter shared atmosphere, with a continuous transition into the story. */
.gameplay-showcase,.scene-settings{background:#171b2b}
.gameplay-showcase{padding:64px max(5%,30px) 80px}
.gameplay-showcase .scene-background{opacity:1;filter:brightness(1.5) saturate(.75)}
.gameplay-showcase .scene-shade{background:linear-gradient(90deg,#171b2b66,#171b2b88),linear-gradient(180deg,#101124,transparent 22% 60%,#171b2b)}
.gameplay-header{margin-bottom:23px}
.gameplay-steps{margin-bottom:32px;gap:24px;flex-wrap:wrap}
.gameplay-steps button{border:0;border-bottom:2px solid transparent;background:transparent;padding:10px 4px;font-style:normal;color:#e0dfdf}
.gameplay-steps button[aria-pressed="true"]{background:transparent;border-color:#90d4de;color:#fff}
.gameplay-steps button:hover{border-color:#d1aacb;color:#fff}
.slideshow-shell{position:relative;padding:0 42px}
.gameplay-slide{grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);gap:5%;padding:8px 3px}
.gameplay-slide:nth-child(even){grid-template-columns:minmax(0,1.65fr) minmax(0,.85fr)}
.gameplay-slide:nth-child(even) figcaption{grid-column:2;grid-row:1}
.gameplay-slide:nth-child(even) .gameplay-image{grid-column:1;grid-row:1}
.gameplay-slide h3{font-size:clamp(27px,2.5vw,42px);text-shadow:0 2px 0 #0008}
.gameplay-slide .gameplay-description{color:#f4efe3;font-size:22px}
.gameplay-image{width:100%;border:1px solid #f4efe338;box-shadow:0 12px 30px #08091340}
.slide-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:64px;padding:0;border:0;background:transparent;color:#f4efe3;font:400 48px/1 Rajdhani,sans-serif}
.slide-arrow:hover{color:#90d4de;background:#ffffff0a}
.slide-arrow-prev{left:-10px}
.slide-arrow-next{right:-10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.scene-settings .scene-stage{mask-image:linear-gradient(180deg,transparent,#000 180px)}
.scene-settings .scene-content{padding-top:100px}
.scene-settings .scene-shade{background:linear-gradient(90deg,#171b2b0a,#171b2b1a 32%,#080b1499 56%,#080b1499),linear-gradient(180deg,transparent 68%,#05050a)}
.scene-settings .scene-kicker{color:#efacda;font-size:20px;letter-spacing:.12em}
.story-panel{background:#11152375;box-shadow:none;border-color:#f4efe322}
.story-panel p{color:#eeeae5}
.footer-contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:0 auto 28px;font-size:19px}
.footer-contact>span:first-child{color:#b5b4c4}
.contact-email{user-select:all;overflow-wrap:anywhere}
.footer-contact button{background:transparent;border:1px solid #f4efe345;padding:7px 14px;font-size:18px}
.footer-contact button:hover{border-color:#90d4de}
.contact-status{flex-basis:100%;font-size:17px;color:#a7dce3;min-height:1.5em}
@media(max-width:1050px){.gameplay-slide h3{font-size:28px}.gameplay-slide .gameplay-description{font-size:20px}.gameplay-slide{gap:4%}}
@media(max-width:800px){
 .gameplay-showcase{padding:44px 20px 50px}
 .gameplay-steps{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:12px}
 .gameplay-steps button{font-size:18px;padding:10px 0}
 .slideshow-shell{padding:0 20px}
 .slide-arrow{width:30px;height:56px;top:calc(100% - 70px);font-size:40px}
 .slide-arrow-prev{left:-15px}.slide-arrow-next{right:-15px}
 .gameplay-slide{gap:22px;padding:4px 0}
 .gameplay-slide h3{font-size:clamp(28px,5vw,36px)}
 .gameplay-slide .gameplay-description{font-size:21px}
 .scene-settings .scene-stage{mask-image:linear-gradient(180deg,transparent,#000 100px)}
 .scene-settings .scene-content{padding-top:0}
 .scene-settings .scene-shade{background:linear-gradient(180deg,transparent 65%,#171b2b)}
 .scene-settings{background:linear-gradient(#171b2b 70%,#05050a)}
 .footer-contact{flex-direction:column;gap:10px}
}

/* Solid colour behind the copy quiets the room without flattening its artwork. */
.gameplay-showcase .scene-background{filter:saturate(1.18) brightness(.92)}
.gameplay-showcase .scene-shade{background:linear-gradient(90deg,#171d35e8,#171d35cf),linear-gradient(180deg,#101124,transparent 22% 60%,#171b2b)}
.gameplay-slide{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:5%;align-items:center}
.gameplay-slide:nth-child(even){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.gameplay-slide h3{font-size:clamp(28px,2.5vw,40px);line-height:1.18;letter-spacing:-.015em;text-wrap:balance;max-width:15ch}
.gameplay-slide .gameplay-description{max-width:35ch;font-size:22px;line-height:1.5;text-wrap:pretty}
.gameplay-slide .gameplay-description + .gameplay-description{margin-top:.65em}
.gameplay-video{display:block;height:auto;aspect-ratio:1170/658;object-fit:contain;background:#080913;pointer-events:none}
.scene-settings{min-height:56.25vw}
.settings-composition{position:absolute;left:0;top:50%;width:100%;height:auto;aspect-ratio:16/9;transform:translateY(-50%)}
.settings-composition .scene-background{position:absolute;inset:0;object-fit:fill;transform:scale(1.018)}
.settings-composition .settings-character{left:-.520833%;top:5.37037%;height:100%;width:auto}
.scene-settings .scene-content{padding:70px 0;width:42%;margin-left:53%}
.story-copy{margin-top:30px}
.story-heist{color:var(--scene-cyan)}
.story-copy p{font-size:23px;line-height:1.5;color:#e2e0e5;text-wrap:pretty}
.story-copy .story-premise{font-size:26px;line-height:1.4;color:#f4efe3;font-weight:600}
.story-copy p + p{margin-top:25px}
.story-copy .story-stakes{font-size:23px;color:#efb5dc;font-weight:600}
.site-footer .contact-email{font-size:20px;color:#f4efe3;margin:0 auto 28px;user-select:all}
@media(min-width:801px){
 .story-copy .story-premise{font-size:clamp(18px,1.9vw,26px)}
 .story-memory{white-space:nowrap}
}
@media(max-width:1050px){
 .gameplay-slide h3{font-size:28px}
 .gameplay-slide .gameplay-description{font-size:21px}
 .story-copy p{font-size:21px}
 .story-copy .story-premise{font-size:clamp(18px,1.9vw,23px)}
}
@media(max-width:800px){
 .gameplay-slide figcaption{flex:0}
 .gameplay-slide{justify-content:flex-start}
 .gameplay-slide h3{max-width:18ch;font-size:29px}
 .gameplay-slide .gameplay-description{font-size:21px;margin-top:18px}
 .gameplay-steps{justify-content:flex-start;gap:28px}
 .scene-settings{min-height:0}
 .scene-settings .scene-stage{aspect-ratio:1.24}
 /* Crop one shared 16:9 scene on phones; never resize Sera independently. */
 .settings-composition{width:143.3692%;height:auto;top:0;transform:none}
 .scene-settings .scene-content{width:auto;max-width:620px;margin:auto;padding:0 24px 56px}
 .story-copy{margin-top:24px}
 .story-copy .story-premise{font-size:23px}
 .story-copy p + p{margin-top:20px}
}