/* The page frame is 3/2 to match OPENAI_IMAGE_SIZE=1536x1024 exactly, so a
   generated illustration is shown whole rather than cropped. Change one and you
   must change the other (server/config.js → config.media.size). The cinematic
   override below stays 16/9 on purpose: there the crop IS the look. */
.xr-game{--xr-paper:#eee5cf;--xr-ink:#181714;--xr-fade:#766e5d;--xr-gold:#d8bd78;--xr-red:#9d2b25;--xr-night:#0b1016;--xr-panel:#111923;max-width:1180px;margin:0 auto}.xr-head{display:grid;grid-template-columns:1fr 250px;gap:24px;align-items:end;margin-bottom:18px;padding:18px 20px;border:1px solid rgba(216,189,120,.22);background:linear-gradient(180deg,rgba(15,23,32,.96),rgba(10,15,21,.96));box-shadow:0 20px 55px rgba(0,0,0,.28)}.xr-head h1{font-family:var(--han);font-size:clamp(30px,5vw,50px);margin:0 0 4px;letter-spacing:.04em}.xr-ref{font-family:var(--mono);font-size:11px;color:#9da6b4;margin:0}.xr-role{background:linear-gradient(145deg,#1a222c,#0d131a);color:#f4ead3;border:1px solid rgba(216,189,120,.45);padding:13px 15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 12px 32px rgba(0,0,0,.24)}.xr-role span,.xr-role small{display:block}.xr-role span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#aeb6c2}.xr-role strong{display:block;font-family:var(--han);font-size:28px;margin:1px 0 7px;color:#fff2d0}.xr-role small{line-height:1.45;color:#b7bdc8}.xr-book{perspective:1600px;display:grid;place-items:center;margin:12px auto 8px;background:radial-gradient(circle at 50% 40%,rgba(66,86,105,.28),transparent 58%);border:1px solid rgba(255,255,255,.06);padding:14px}.xr-page{width:min(980px,100%);background:var(--xr-paper);color:var(--xr-ink);border:1px solid #28251f;padding:12px 12px 16px;box-shadow:0 28px 70px rgba(0,0,0,.5);transform-origin:center center;transition:transform .5s ease,filter .5s ease,background .35s ease,border-color .35s ease}.xr-page-no{text-align:right;font-family:var(--mono);font-size:9px;color:#6a6254;margin:0 3px 6px}.xr-ink,.xr-generated{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#f4eddc;border:1px solid #1b1a17}.xr-generated{box-shadow:inset 0 0 45px rgba(0,0,0,.18)}.xr-paper{fill:#f4eddc;stroke:none}.xr-line{fill:none;stroke:#171613;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.xr-wash{fill:none;stroke:#292720;stroke-width:4;opacity:.42}.xr-wash.light{stroke-width:2;opacity:.25}.xr-brush{fill:none;stroke:#171613;stroke-width:10;stroke-linecap:round;opacity:.7}.xr-caption{border-top:1px solid #88806e;margin-top:10px;padding:11px 10px 0;font-family:var(--han);font-size:18px;line-height:1.8}.xr-caption p{margin:0}.xr-caption .xr-choice{font-size:12px;color:#716550;border-left:3px solid var(--xr-red);padding-left:8px;margin-bottom:5px}.xr-movie .xr-page{background:#070b0f;color:#f1f4f7;border-color:#283442;padding:0;overflow:hidden;position:relative}.xr-movie .xr-page-no{position:absolute;z-index:3;top:12px;right:14px;color:#d7dde6;background:rgba(4,7,10,.55);padding:4px 8px;border-radius:999px;backdrop-filter:blur(6px)}.xr-movie .xr-generated,.xr-movie .xr-ink{border:0;aspect-ratio:16/9;filter:contrast(1.06) saturate(.92);animation:xr-camera 7s ease-in-out infinite}.xr-movie .xr-caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:58px 28px 24px;border:0;background:linear-gradient(transparent,rgba(0,0,0,.84));color:#fff;font-size:20px;text-shadow:0 2px 8px rgba(0,0,0,.8)}.xr-movie .xr-caption .xr-choice{color:#f4ddb0;border-left-color:var(--xr-gold)}@keyframes xr-camera{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}.xr-pager{display:flex;justify-content:center;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 22px}.xr-pager button{border:1px solid #465261;background:#111923;padding:8px 12px;font-family:var(--han);font-size:12px;color:#e7ebef;transition:.15s ease}.xr-pager button:hover:not(:disabled),.xr-pager button.on{border-color:var(--xr-gold);background:#1b2631;color:#fff2d0;box-shadow:0 0 0 1px rgba(216,189,120,.12) inset}.xr-pager button:disabled{opacity:.3;cursor:default}.xr-pager span{font-family:var(--mono);font-size:10px;color:var(--text-dim);padding:0 4px}.xr-wordgame{background:linear-gradient(180deg,#121a24,#0c1219);border:1px solid #303b48;padding:20px;margin-top:18px;box-shadow:0 18px 45px rgba(0,0,0,.24)}.xr-turn{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.xr-turn span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--xr-gold);display:block}.xr-turn strong{font-family:var(--han);font-size:22px;display:block;margin-top:3px}.xr-words{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:16px 0}.xr-words button{border:1px solid #566273;border-radius:4px;padding:10px 8px;font-family:var(--han);font-size:15px;background:linear-gradient(180deg,#161f29,#101720);transition:.15s ease}.xr-words button:hover{border-color:var(--xr-gold);transform:translateY(-1px)}.xr-words button.chosen{background:linear-gradient(180deg,#c8aa66,#9d7b3f);color:#15130f;border-color:#ebd28f;font-weight:600}.xr-compose{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(260px,1fr) auto;gap:8px}.xr-compose>div,.xr-compose input{min-height:46px;border:1px solid #465261;background:#090e14;color:#edf1f5;padding:11px 12px}.xr-compose>div{font-family:var(--han);color:#d8bd78}.xr-compose input{font:inherit}.xr-compose>button{background:linear-gradient(180deg,#b33a32,#84221e);color:#fff;padding:0 22px;font-family:var(--han);font-weight:600;border:1px solid #c1544c;box-shadow:0 6px 18px rgba(117,25,20,.24)}.xr-compose>button:disabled{opacity:.5}.xr-status{font-family:var(--mono);font-size:10px;color:#b7bdca;margin:9px 0 0}.xr-status.error{color:#e18a80}.xr-finish{display:flex;justify-content:center;gap:12px;align-items:baseline;background:linear-gradient(180deg,#141d26,#0e151d);border:1px solid rgba(216,189,120,.28);color:#f1e8d4;padding:16px;margin-top:20px}.xr-finish strong{font-family:var(--han);font-size:25px;color:#f1d698}.xr-finish span{font-size:13px}.xr-foot{display:flex;justify-content:space-between;gap:15px;margin-top:22px;font-family:var(--mono);font-size:9px;color:var(--text-dim)}.xr-foot button{text-decoration:underline;color:var(--text-dim)}@media(max-width:900px){.xr-words{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.xr-head{grid-template-columns:1fr}.xr-role{max-width:340px}.xr-compose{grid-template-columns:1fr}.xr-book{margin-top:8px;padding:7px}.xr-page{padding:8px}.xr-movie .xr-page{padding:0}.xr-caption{font-size:15px}.xr-movie .xr-caption{font-size:16px;padding:45px 16px 16px}.xr-words{grid-template-columns:repeat(2,minmax(0,1fr))}.xr-foot{flex-direction:column}}.xr-exit{grid-column:1/-1;justify-self:start;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#aeb6c2;border:1px solid #465261;background:#111923;padding:7px 11px;transition:.15s ease}.xr-exit:hover{border-color:var(--xr-gold);color:#fff2d0}@media(max-width:700px){.xr-exit{justify-self:stretch;text-align:center}}

.xr-image-placeholder{display:grid;place-items:center;width:100%;aspect-ratio:3/2;padding:24px;text-align:center;background:radial-gradient(ellipse at top,#263746,#090e14);color:#f4ddb0;font-family:var(--han);font-size:16px}.xr-movie .xr-image-placeholder{aspect-ratio:16/9}.xr-movie .xr-page:has(.xr-image-placeholder) .xr-caption{position:relative;padding:16px 24px;background:#090e14}

.xr-image-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;max-width:520px;margin:auto;padding:28px 18px;text-align:center;color:#f4ddb0}
.xr-image-wait strong{display:block;font-family:var(--han);font-size:clamp(20px,3vw,28px);line-height:1.4}
.xr-image-wait p{font-size:14px;line-height:1.7;color:#b8c4ce;margin:12px 0 0}
.xr-image-spinner{width:40px;height:40px;border:2px solid #465261;border-top-color:var(--xr-gold);border-radius:50%;animation:xr-image-spin 1.2s linear infinite}
.xr-image-elapsed{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:#b8c4ce}
.xr-movie .xr-page:has(.xr-image-wait) .xr-caption{position:relative;padding:16px 24px;background:#090e14}
@keyframes xr-image-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.xr-image-spinner{animation:none}}

.xr-generated.xr-preview{animation:none;opacity:.85}.xr-generated{transition:opacity .6s ease}

/* Story prose stays in document flow at every viewport and text size. */
.xr-movie .xr-caption,.xr-movie .xr-page:has(.xr-image-placeholder) .xr-caption,.xr-movie .xr-page:has(.xr-image-wait) .xr-caption{position:relative;padding:18px 24px;background:#090e14;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:none}
.xr-caption{white-space:pre-wrap;overflow-wrap:anywhere}
.xr-integrity{max-width:1420px;margin:16px auto;padding:14px 18px;border:1px solid #647084;border-inline-start:4px solid #647084}
.xr-integrity.flagged,.xr-integrity.refused{border-color:#e18a80;color:#ffd7cf}
.xr-integrity p{margin:6px 0 0}
.xr-game .waiting,.xr-game .convergence{max-width:1420px;margin:18px auto}
@media(prefers-reduced-motion:reduce){.xr-movie .xr-generated{animation:none}}