/* Experimental Blood on the Clocktower translation (botc.js): red paint over names and portraits. */
:root{--botc-paint:#ff3d3d;--botc-halo:rgba(0,0,0,.72);--botc-hand:"Segoe Print","Bradley Hand","Noteworthy","Comic Neue","Comic Sans MS",cursive}
:root[data-theme=dossier]{--botc-paint:#c4111b;--botc-halo:rgba(255,250,240,.85)}
:root[data-theme=floodlight]{--botc-paint:#ff2a2a;--botc-halo:#000}

/* The bar button sits before Lobby; the Menu setting can hide it. At rest it is faintly red. */
#app > header .botc-toggle{color:color-mix(in srgb,var(--botc-paint) 50%,var(--muted))}
#app > header .botc-toggle:hover,#app > header .botc-toggle:focus-visible{color:var(--botc-paint)}
#app > header .botc-toggle[aria-pressed=true]{color:var(--botc-paint);border-color:var(--botc-paint);box-shadow:inset 0 0 0 1px var(--botc-paint)}
@media (max-width:760px){
  #app.ingame header:has(#btnBotc:not([hidden])){grid-template-columns:32px minmax(0,1fr) auto auto auto auto auto auto}
  #app.ingame #btnBotc{grid-column:6;grid-row:1}
  #app.ingame header:has(#btnBotc:not([hidden])) #btnLobby{grid-column:7}
  #app.ingame header:has(#btnBotc:not([hidden])) #btnMenu{grid-column:8}
}
/* Short landscape phones keep game.css's one-row header with the timer beside the title. */
@media (max-width:760px) and (min-height:601px){
  #app.ingame header:has(#btnBotc:not([hidden])) .phase-track{grid-column:1/8}
  #app.ingame header:has(#btnBotc:not([hidden])):not(:has(#timer.on)) .phase-track{grid-column:1/-1}
  #app.ingame header:has(#btnBotc:not([hidden])) #timer{grid-column:8}
}

/* Names: the original stays readable underneath a brush stroke; the BOTC name is painted on top. */
.botc-word{position:relative;display:inline-grid;text-indent:0;color:color-mix(in srgb,currentColor 28%,transparent)}
/* Both names share one grid cell, so the word is as wide as the longer and never covers its neighbours. */
.botc-word>.botc-was,.botc-word:not(.botc-none)::after{grid-area:1/1;justify-self:center}
.botc-word:not(.botc-none)::before{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:.32em;border-radius:40% 60% 55% 45%/60% 40% 60% 40%;
  background:var(--botc-paint);opacity:.45;transform:rotate(calc(var(--botc-tilt,0deg) * -.6));pointer-events:none}
.botc-word:not(.botc-none)::after{content:attr(data-botc);position:relative;z-index:3;white-space:nowrap;pointer-events:none;
  transform:translateY(-.06em) rotate(var(--botc-tilt,-2deg));font:700 1.02em/1 var(--botc-hand);letter-spacing:0;text-transform:none;font-style:normal;
  color:var(--botc-paint);text-shadow:0 0 2px var(--botc-halo),0 0 5px var(--botc-halo),.5px .5px 0 var(--botc-paint)}
/* No equivalent: nothing to paint, so the name is underlined by hand instead. */
.botc-word.botc-none{display:inline;color:inherit;text-decoration:underline wavy var(--botc-paint) 2px;text-underline-offset:.22em;text-decoration-skip-ink:none}

/* Portraits: each carries a pin laid directly over it, in its place in the page (botc.js), so
   anything over the portrait lies over its symbols too. Symbols overhang it a little, no further. */
.botc-pin{position:absolute;display:block;margin:0;padding:0;border:0;pointer-events:none;overflow:clip;user-select:none}
.botc-pin[hidden]{display:none}
.botc-mark{position:absolute;display:grid;place-items:center;pointer-events:none;transform:rotate(var(--botc-tilt,0deg))}
/* The role-details stage cross-fades expressions; its symbols glide to each new pose's head. */
.role-info-figure .botc-mark{transition:left .45s ease,top .45s ease,width .45s ease,height .45s ease}
/* Faded figures in a layered portrait (a facade over its shadow) carry faded symbols. */
.botc-mark{opacity:var(--botc-alpha,1)}
/* Symbols are die-cut stickers slapped over the head: a white border, a lift off the page and
   never more than 80% opaque, so the portrait always shows through. The icon is laid over the
   whole mark: a percentage height would not resolve in its grid cell, and a tall icon would grow
   from its width far past the portrait. */
.botc-sticker{opacity:calc(.8 * var(--botc-alpha,1))}
.botc-sticker img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  --e:var(--botc-edge,#fff);--l:var(--botc-line,1px);--d:calc(var(--l) * .7);
  filter:drop-shadow(var(--l) 0 0 var(--e)) drop-shadow(calc(var(--l) * -1) 0 0 var(--e)) drop-shadow(0 var(--l) 0 var(--e)) drop-shadow(0 calc(var(--l) * -1) 0 var(--e))
    drop-shadow(var(--d) var(--d) 0 var(--e)) drop-shadow(calc(var(--d) * -1) calc(var(--d) * -1) 0 var(--e))
    drop-shadow(1px 2px 1.5px rgba(0,0,0,.5))}
/* An unconfirmed shadow is washed out like its figure. */
.botc-sticker.botc-faint img{filter:saturate(.35) drop-shadow(var(--l) 0 0 var(--e)) drop-shadow(calc(var(--l) * -1) 0 0 var(--e)) drop-shadow(0 var(--l) 0 var(--e))
    drop-shadow(0 calc(var(--l) * -1) 0 var(--e)) drop-shadow(var(--d) var(--d) 0 var(--e)) drop-shadow(calc(var(--d) * -1) calc(var(--d) * -1) 0 var(--e))
    drop-shadow(1px 2px 1.5px rgba(0,0,0,.35))}
.botc-circle svg{width:130%;height:130%;overflow:visible;fill:none;stroke:var(--botc-paint);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 1.5px var(--botc-halo))}
.botc-circle svg path+path{stroke-width:2.5;opacity:.75}
.botc-label{font:700 calc(var(--botc-size,60px) * .2)/1 var(--botc-hand);color:var(--botc-paint);white-space:nowrap;
  text-shadow:0 0 2px var(--botc-halo),0 0 6px var(--botc-halo)}
.botc-label::after{content:"Storyteller"}

/* A faint red wash over the game while the translation shows. It arrives with the press and
   stays under any modal, which dims it with the rest of the page. */
.botc-tint{position:fixed;inset:0;z-index:2147482000;pointer-events:none;opacity:0;transition:opacity .6s ease-out;will-change:opacity;
  background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(150,0,18,.2) 100%),rgba(170,0,22,.06)}
:root[data-theme=dossier] .botc-tint{background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(190,0,20,.14) 100%),rgba(200,0,24,.04)}
html.botc-on .botc-tint{opacity:1;transition-duration:.35s;transition-timing-function:ease-out}

/* The clocktower rises out of the ground in the portrait-focus sky, in front of the sun or moon.
   It rests sunk; botc.js animates the rise and the sink so a short hover can turn either around. */
.botc-tower{position:absolute;z-index:-1;bottom:-2px;left:clamp(130px,48%,calc(100% - 380px));width:clamp(96px,9vw,120px);height:calc(100% + 2px);
  pointer-events:none;transform:translateY(112%)}
.botc-tower svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 8px rgba(255,40,30,.4)) drop-shadow(0 0 1px rgba(255,90,70,.6))}
html.botc-on .botc-tower svg{animation:botc-rumble .08s linear 22 alternate}
.botc-clockface{filter:drop-shadow(0 0 4px #ff3a26)}
.botc-minute{transform-box:view-box;transform-origin:50px 104px;animation:botc-clock 12s steps(60) infinite}
.botc-dust{position:absolute;left:-150%;right:-150%;bottom:-6px;height:34%;border-radius:50%;opacity:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(120,40,35,.75),rgba(80,20,20,.35) 45%,transparent 72%);filter:blur(3px)}
html.botc-on .botc-dust{animation:botc-dust 2.8s ease-out}
/* The sun and moon sit behind the tower while it stands. */
html.botc-on #app #portrait-focus[data-time]:after{z-index:-2}
@keyframes botc-rumble{from{translate:-1px 0}to{translate:1px 0}}
@keyframes botc-clock{to{rotate:360deg}}
@keyframes botc-dust{0%{opacity:0;transform:scaleX(.6)}15%{opacity:1}100%{opacity:0;transform:scaleX(1.15) translateY(-6px)}}
@media (max-width:760px){.botc-tower{left:auto;right:10%;width:92px}}
@media (prefers-reduced-motion:reduce){
  .botc-tower,html.botc-on .botc-tower{transform:none;opacity:0;transition:opacity .4s}
  html.botc-on .botc-tower{opacity:1}
  html.botc-on .botc-tower svg,html.botc-on .botc-dust,.botc-minute{animation:none}
}

/* A translated name over a portrait is edged in white to read against the art. */
.botc-word.botc-on-portrait::after{-webkit-text-stroke:1px #fff;paint-order:stroke fill;text-shadow:0 1px 2px rgba(0,0,0,.7)}