/* Original Rohan artwork stays outside the desktop game column. */
.rohan-background{display:none;pointer-events:none}
html[data-game=characters] body{background:#c9c6cb;background-image:none}
html[data-game=characters][data-theme=dark] body{background:#19181c}
html[data-game=characters] :is(.arrow-background,.menacing-background){display:none}
html[data-game=characters] .rohan-background{display:block;position:fixed;inset:82px 0 0;z-index:-1;overflow:hidden}
.rohan-background::before,.rohan-background::after{content:'';position:absolute;top:0;bottom:0;width:max(0px,calc((100vw - 1060px)/2));background-repeat:no-repeat;background-size:auto 100%}
.rohan-background::before{left:0;background-image:url('/backgrounds/rohan-left.webp');background-position:70% center}
.rohan-background::after{right:0;background-image:url('/backgrounds/rohan-right.webp');background-position:50% center}
html[data-game=characters] .game{box-shadow:none}
@media(min-width:701px) and (max-width:1120px){.rohan-background::before,.rohan-background::after{width:15%;opacity:.2}}
/* Mobile uses a short artwork strip, leaving the guessing controls unobstructed. */
@media(max-width:700px){
 html[data-game=characters] .rohan-background{position:relative;inset:auto;height:140px;margin:0 0 16px;z-index:0;border:1px solid var(--line)}
 .rohan-background::before,.rohan-background::after{width:50%;background-size:100% auto}
 .rohan-background::before{background-position:center 31%}
 .rohan-background::after{background-position:center 24%}
}

/* Approved paper textures are crops of the original supplied artwork. */
html[data-game=characters] body{isolation:isolate;background:linear-gradient(105deg,#514274 0%,#694375 45%,#8b386d 100%);background-image:linear-gradient(105deg,#514274 0%,#694375 45%,#8b386d 100%)}
html[data-game=characters][data-theme=dark] body{background:linear-gradient(105deg,#514274 0%,#694375 45%,#8b386d 100%)}
html[data-game=characters] body::before,html[data-game=characters] body::after{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background-repeat:repeat}
html[data-game=characters] body::before{background-image:url('/backgrounds/rohan-blended-paper.webp');background-size:100% 360px}
html[data-game=characters] body::after{display:none}
html[data-game=characters] :is(.intro h1,.series-label,.mode-note,.quick-stats>summary,#save-status,#retry-load,.game-load-status){color:#fffaf3}
html[data-game=characters] .game{background:linear-gradient(105deg,rgba(20,12,35,.77),rgba(38,12,32,.77)),url('/backgrounds/rohan-blended-paper.webp') repeat-y;background-size:auto,100% auto;border-color:#796284}
html[data-game=characters]:not([data-theme=dark]) .game{background:linear-gradient(105deg,rgba(255,249,255,.88),rgba(255,244,251,.88)),url('/backgrounds/rohan-blended-paper.webp') repeat-y;background-size:auto,100% auto;border-color:#796284}
html[data-game=characters] .game .first-help{background:rgba(17,8,27,.18)}
html[data-game=characters]:not([data-theme=dark]) .game .first-help{background:rgba(255,255,255,.22)}
@media(min-width:701px){
 .rohan-background::before,.rohan-background::after{width:max(0px,calc((100vw - 1060px)/2 + 50px))}
 .rohan-background::before{mask-image:linear-gradient(to right,#000 75%,transparent 100%)}
 .rohan-background::after{mask-image:linear-gradient(to left,#000 75%,transparent 100%)}
}
@media(max-width:700px){
 html[data-game=characters] .rohan-background{border:0}
 .rohan-background::before{mask-image:linear-gradient(to right,#000 85%,transparent)}
 .rohan-background::after{mask-image:linear-gradient(to left,#000 85%,transparent)}
}

@media(max-width:700px){html[data-game=characters] .rohan-background{display:none}}

/* Text outside the pale game panel sits on the original purple/magenta artwork. */
html[data-game=characters] :is(.intro-description,.arrival-status,.current-mode,.community-links a,footer,footer p,footer a,footer .quiet,footer summary){color:#fffaf3}
html[data-game=characters] .community-links .tool-button{border-color:#e6cce8;background:#32223d}
html[data-game=characters] footer{border-color:#d9bedd}
html[data-game=characters]:not([data-theme=dark]) .game{--muted:#514450;--line:#a597a6}