/* SINDICAT — liseuse de BD (pack SINDICAT_liseuse du 24/09/2026), intégrée au jeu.
   Deux retraits par rapport au pack : ses @font-face (Silkscreen vient de la police du jeu, chargée par index.html)
   et le style de sa page de démonstration. Tout le reste est le CSS du pack, à l'identique. */

/* HUD colours are copied from the validated reader. All selectors are scoped. */
.sc-reader{
  --sc-gold:#e0b341;--sc-muted:#9aa2b1;--sc-ink:#e8eaf0;--sc-line:#343a48;--sc-panel:#1b1e27;
  box-sizing:border-box;position:fixed;inset:0;margin:0;padding:0;border:0;
  width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  color:var(--sc-ink);background:#0b0d12;color-scheme:dark;
  font-family:Arial,sans-serif;overflow:hidden;overscroll-behavior:contain;
  z-index:2147483647;
}
.sc-reader[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.sc-reader:not([open]){display:none}
.sc-reader::backdrop{background:#0b0d12}
.sc-reader *{box-sizing:border-box}
.sc-header{min-height:64px;display:flex;align-items:center;gap:24px;
  padding:max(12px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left));
  border-bottom:1px solid #262b36;background:#12131a}
.sc-brand{font:700 18px Silkscreen,monospace;letter-spacing:2px;color:var(--sc-gold)}
.sc-title{font:10px Silkscreen,monospace;color:var(--sc-muted)}
.sc-progress{font:12px Silkscreen,monospace;color:var(--sc-gold);white-space:nowrap}
.sc-text-progress{font:10px Silkscreen,monospace;color:var(--sc-muted);white-space:nowrap}
.sc-header>[data-action=close]{margin-left:auto;flex-shrink:0}
.sc-viewport{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:radial-gradient(ellipse at center,#202331 0,#0b0d12 72%)}
.sc-reader .sc-stage{display:block;position:relative;flex:none;min-height:0;max-width:100%;max-height:100%;
  margin:0;padding:0;border:0;border-radius:0;background:#12131a;overflow:hidden;
  box-shadow:0 12px 60px #0008;cursor:pointer;touch-action:manipulation;user-select:none;
  -webkit-user-select:none;-webkit-tap-highlight-color:transparent;line-height:0}
.sc-art{position:absolute;inset:0;display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.sc-bubble{position:absolute;display:block;image-rendering:pixelated;pointer-events:none;
  opacity:0;transition:opacity 70ms linear}
.sc-bubble[hidden]{display:none}
.sc-bubble.is-visible{opacity:1;animation:sc-bubble-enter 70ms linear}
@keyframes sc-bubble-enter{from{opacity:.65}to{opacity:1}}
.sc-stage.sc-enter{animation:sc-enter 85ms ease-out}
@keyframes sc-enter{from{opacity:.7}to{opacity:1}}
.sc-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:12px max(24px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  border-top:1px solid #262b36;background:#12131a}
.sc-reader button:not(.sc-stage){appearance:none;min-height:44px;padding:0 18px;border:1px solid var(--sc-line);
  border-radius:0;background:var(--sc-panel);color:var(--sc-ink);font:12px Silkscreen,monospace;
  cursor:pointer;touch-action:manipulation}
.sc-reader button:not(.sc-stage):hover{border-color:#9a8040}
.sc-reader .sc-controls [data-action=next]{background:var(--sc-gold);border-color:var(--sc-gold);color:#12131a}
.sc-reader button:focus-visible{outline:2px solid var(--sc-gold);outline-offset:-4px}
.sc-reader button:disabled{opacity:.3;cursor:default}
.sc-hint{font-size:11px;color:var(--sc-muted);margin-left:auto}
.sc-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:640px){
  .sc-header{min-height:58px;gap:8px 12px;flex-wrap:wrap;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left))}
  .sc-brand{font-size:14px;letter-spacing:1px}.sc-title{font-size:8px}.sc-progress{font-size:10px}.sc-text-progress{font-size:8px}
  .sc-reader button:not(.sc-stage){font-size:10px;padding:0 10px}.sc-header>[data-action=close]{min-height:44px}
  .sc-controls{gap:10px;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .sc-controls>button{flex:1}.sc-hint{display:none}
}
@media(max-height:420px){.sc-header{min-height:44px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:4px}.sc-controls{padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}.sc-title,.sc-hint{display:none}}
@media(prefers-reduced-motion:reduce){.sc-bubble,.sc-bubble.is-visible{transition:none;animation:none}.sc-stage.sc-enter{animation:none}}