/* PipCryp Web Reader V3 - Magazine Physics */
.pipcryp-reader {
  --pcr-yellow: #f3cf3a;
  --pcr-red: #9f241c;
  --pcr-paper: #ead9ad;
  --pcr-panel: #211a17;
  --pcr-panel-2: #15110f;
  --pcr-muted: #c4b89f;
  width: 100%;
  color: var(--pcr-paper);
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

.pipcryp-reader * { box-sizing: border-box; }

.pipcryp-reader__shell {
  width: min(100%, 460px);
  margin: 0 auto;
  padding-inline: 10px;
}

.pipcryp-reader__toolbar {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.pipcryp-reader__button,
.pipcryp-reader__sound {
  appearance: none;
  border: 1px solid rgba(234, 217, 173, 0.25);
  min-height: 46px;
  border-radius: 8px;
  background: var(--pcr-panel);
  color: var(--pcr-yellow);
  font-weight: 900;
  cursor: pointer;
  transition: transform 130ms ease, background 130ms ease, opacity 130ms ease;
}

.pipcryp-reader__button {
  min-width: 48px;
  font-size: 24px;
  line-height: 1;
}

.pipcryp-reader__sound {
  min-width: 104px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 12px;
  letter-spacing: .03em;
}

.pipcryp-reader__button:hover:not(:disabled),
.pipcryp-reader__sound:hover { background: #30231e; }
.pipcryp-reader__button:active:not(:disabled),
.pipcryp-reader__sound:active { transform: scale(.97); }
.pipcryp-reader__button:focus-visible,
.pipcryp-reader__sound:focus-visible { outline: 3px solid var(--pcr-yellow); outline-offset: 2px; }
.pipcryp-reader__button:disabled { opacity: .28; cursor: default; }

.pipcryp-reader__status {
  min-width: 0;
  text-align: center;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(234, 217, 173, 0.18);
  background: var(--pcr-panel-2);
}

.pipcryp-reader__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pcr-paper);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pipcryp-reader__counter {
  display: block;
  margin-top: 2px;
  color: var(--pcr-muted);
  font-size: 12px;
  font-weight: 700;
}

.pipcryp-reader__stage {
  position: relative;
  width: min(100%, 350px);
  margin: 0 auto;
  aspect-ratio: 1025 / 1666;
  cursor: grab;
  outline: none;
  touch-action: none;
  isolation: isolate;
  overflow: visible;
}

.pipcryp-reader__stage:active { cursor: grabbing; }
.pipcryp-reader__stage:focus-visible {
  outline: 3px solid var(--pcr-yellow);
  outline-offset: 4px;
  border-radius: 4px;
}

.pipcryp-reader__paper-bed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #b9a77d;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.48));
  z-index: 0;
}

.pipcryp-reader__under,
.pipcryp-reader__static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  border-radius: 3px;
}

.pipcryp-reader__under { z-index: 0; }
.pipcryp-reader__under-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 28px rgba(0,0,0,.12);
}

.pipcryp-reader__static {
  z-index: 2;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.24));
  transition: opacity 90ms linear;
}
.pipcryp-reader__static.is-hidden { opacity: 0; visibility: hidden; }

.pipcryp-reader__curl-canvas,
.pipcryp-reader__tear-canvas {
  position: absolute;
  z-index: 5;
  display: block;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.pipcryp-reader__tear-canvas { z-index: 6; }
.pipcryp-reader__curl-canvas.is-visible,
.pipcryp-reader__tear-canvas.is-visible { opacity: 1; visibility: visible; }

.pipcryp-reader__grab-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 130ms ease;
}
.pipcryp-reader__grab-zone--left {
  left: 0;
  background: linear-gradient(90deg, rgba(243,207,58,.16), transparent);
}
.pipcryp-reader__grab-zone--right {
  right: 0;
  background: linear-gradient(270deg, rgba(243,207,58,.16), transparent);
}

@media (hover:hover) and (pointer:fine) {
  .pipcryp-reader__stage:hover .pipcryp-reader__grab-zone { opacity: .22; }
}

.pipcryp-reader__actions {
  position: relative;
  z-index: 12;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
}

.pipcryp-reader__progress {
  height: 5px;
  margin: 0 auto;
  width: min(100%, 350px);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(234,217,173,.15);
}

.pipcryp-reader__progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--pcr-red);
  transition: width 220ms ease;
}

.pipcryp-reader__hint,
.pipcryp-reader__fallback {
  width: min(100%, 350px);
  margin: 9px auto 0;
  text-align: center;
  color: var(--pcr-muted);
  font-size: 12px;
  line-height: 1.5;
}
.pipcryp-reader__hint strong { color: var(--pcr-paper); }
.pipcryp-reader__fallback { color: #e7b0a3; }

@media (max-width: 520px) {
  .pipcryp-reader__shell { padding-inline: 6px; }
  .pipcryp-reader__toolbar { grid-template-columns: 48px minmax(0,1fr) 48px; gap: 7px; }
  .pipcryp-reader__title { font-size: 12px; }
  .pipcryp-reader__counter { font-size: 11px; }
  .pipcryp-reader__hint { padding-inline: 8px; }
}


@media (max-width: 520px) {
  .pipcryp-reader__stage { width: min(72vw, 290px); }
  .pipcryp-reader__progress,
  .pipcryp-reader__hint,
  .pipcryp-reader__fallback { width: min(72vw, 290px); }
}

@media (prefers-reduced-motion: reduce) {
  .pipcryp-reader__button,
  .pipcryp-reader__sound,
  .pipcryp-reader__progress-bar,
  .pipcryp-reader__static { transition: none; }
}