.comic-reading{overflow:hidden}
#gameScreen.comic-mode{height:100svh;min-height:0;overflow:hidden;background:#24170f}
#gameScreen.comic-mode>.hud{display:none}
#gameScreen.comic-mode .manga-area{width:100%;height:100svh;max-width:none;margin:0;padding:0;overflow:hidden}
#particleCanvas.comic-muted{opacity:.08}

.cr-reader{
  --paper:#f4ecd8;
  --paper-deep:#d8c9a9;
  --ink:#211b17;
  --desk:#4a2f1e;
  position:relative;
  width:100%;
  height:100svh;
  overflow:hidden;
  color:#f8f2e8;
  background:#3b2417;
  outline:none;
  user-select:none;
  touch-action:none;
  cursor:pointer;
}
.cr-reader::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.06;
  mix-blend-mode:soft-light;
  background-image:
    repeating-radial-gradient(ellipse at 28% 42%,rgba(255,255,255,.2) 0 1px,transparent 1px 5px),
    linear-gradient(90deg,rgba(255,255,255,.04),transparent 18%,rgba(0,0,0,.1) 60%,transparent);
  background-size:9px 7px,100% 100%;
  z-index:3;
}
.cr-desk-light{
  display:none;
}
.cr-loading{
  position:absolute;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:24px;
  color:#fff4df;
  background:
    radial-gradient(circle at 50% 48%,rgba(241,182,106,.18),transparent 34%),
    linear-gradient(145deg,rgba(52,32,21,.96),rgba(28,17,12,.98));
  opacity:1;
  visibility:visible;
  transition:opacity .42s ease,visibility 0s linear .42s;
}
.cr-reader.is-ready .cr-loading{opacity:0;visibility:hidden;pointer-events:none}
.cr-loading-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.cr-loading-card strong{margin-top:18px;font-size:clamp(1rem,2.2vw,1.3rem);letter-spacing:.04em}
.cr-loading-card small{margin-top:8px;color:#bda992;font-size:.68rem;letter-spacing:.06em}
.cr-loading-book{position:relative;display:flex;width:74px;height:48px;filter:drop-shadow(0 10px 18px rgba(12,6,3,.35))}
.cr-loading-book i{position:relative;display:block;width:50%;height:100%;border:1px solid rgba(255,224,180,.62);background:linear-gradient(135deg,#f4e7cc,#d9be93);transform-origin:center bottom;animation:crLoadingPage 1.15s ease-in-out infinite alternate}
.cr-loading-book i:first-child{border-radius:7px 2px 3px 8px;transform:perspective(100px) rotateY(12deg)}
.cr-loading-book i:last-child{border-radius:2px 7px 8px 3px;transform:perspective(100px) rotateY(-12deg);animation-delay:.16s}
.cr-loading-book::after{content:'';position:absolute;left:50%;top:3px;bottom:2px;width:1px;background:rgba(79,52,31,.45);box-shadow:0 0 8px rgba(70,43,24,.3)}
@keyframes crLoadingPage{to{filter:brightness(1.1);box-shadow:0 0 20px rgba(241,182,106,.2)}}
.cr-scene{position:absolute;inset:0;z-index:1;transform-origin:50% 50%;will-change:transform}
.cr-scene-bg{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transition:opacity .72s cubic-bezier(.4,0,.2,1);
}
.cr-scene-bg--overview{background-image:url('presets/reader-desk-overview-v2.webp');opacity:1}
.cr-scene-bg--reading{background-image:url('presets/reader-desk-topdown-v2.webp');opacity:0}
.cr-reader.is-reading-view .cr-scene-bg--overview{opacity:0}
.cr-reader.is-reading-view .cr-scene-bg--reading{opacity:1}

.cr-book-anchor{
  position:absolute;
  inset:0;
}
.cr-book{
  position:absolute;
  inset:0;
  filter:none;
}
.cr-book::before{
  display:none;
}
.cr-leaf{
  position:absolute;
  left:0;
  top:0;
  width:864px;
  height:1820px;
  overflow:hidden;
  background:transparent;
  border:0;
  box-shadow:none;
  transform-origin:0 0;
  will-change:transform;
  transition:none;
}
.cr-reader.is-page-transition-ready .cr-leaf{transition:transform .72s cubic-bezier(.4,0,.2,1)}
.cr-leaf--left,.cr-leaf--right{border-radius:0}
.cr-page-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
  transform:translateZ(0);
  transition:filter .45s ease,opacity .35s ease;
}
.cr-leaf::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:.08;
  mix-blend-mode:multiply;
  background:
    linear-gradient(90deg,rgba(62,40,25,.24),transparent 8%,transparent 92%,rgba(65,42,24,.13)),
    repeating-linear-gradient(0deg,rgba(70,45,28,.025) 0 1px,transparent 1px 4px);
}
.cr-leaf--unread .cr-page-image{filter:blur(18px) saturate(.55) brightness(.5);transform:scale(1.04)}
.cr-leaf--unread::before{
  content:'尚未读到';
  position:absolute;
  inset:0;
  z-index:7;
  display:grid;
  place-items:center;
  color:rgba(59,43,31,.72);
  font:700 12px/1.2 Georgia,'Noto Serif SC',serif;
  letter-spacing:.35em;
  background:rgba(231,219,193,.38);
  backdrop-filter:blur(4px);
}
.cr-leaf--active{outline:2px solid rgba(255,245,215,.42);outline-offset:-2px}
.cr-focus-mask{
  position:absolute;
  z-index:5;
  border:2px solid rgba(255,248,225,.76);
  box-shadow:0 0 0 120vmax rgba(16,10,7,.68),0 0 28px rgba(255,232,176,.32);
  pointer-events:none;
  opacity:0;
}
.cr-choice-layer{position:absolute;inset:0;z-index:12;pointer-events:none}
.cr-choice{
  position:absolute;
  width:27%;
  min-height:6.5%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  color:#18120e;
  background:#fffdf5;
  border:2px solid #17110d;
  border-radius:48% 52% 46% 54% / 54% 46% 55% 45%;
  font:800 clamp(9px,.82vw,13px)/1.35 -apple-system,'Noto Sans SC',sans-serif;
  text-align:center;
  box-shadow:2px 3px 0 rgba(31,21,15,.22);
  cursor:pointer;
  pointer-events:auto;
  opacity:0;
}
.cr-choice:hover,.cr-choice:focus-visible{background:#fff4c9;outline:none;transform:translate(-50%,-50%) scale(1.04)}
.cr-choice.is-selected{background:#fff0b0;border-color:#8c5b1d}
.cr-choice.is-muted{opacity:.25!important;pointer-events:none}
.cr-ending-layer{position:absolute;inset:0;z-index:14;pointer-events:none}
.cr-ending-stat{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#392a20;
  font:800 clamp(6px,.62vw,10px)/1 -apple-system,'Noto Sans SC',sans-serif;
  text-align:center;
}
.cr-ending-status-card{
  position:absolute;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:5%;
  padding:.25% .75%;
  color:#fff8e8;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 4px 5px rgba(28,16,9,.3));
}
.cr-ending-status-card::after{display:none}
.cr-ending-status-header{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.5em;
  padding:0 .2em;
  font-family:-apple-system,'Noto Sans SC',sans-serif;
  line-height:1;
  color:#fff7e3;
  text-shadow:0 2px 5px rgba(22,13,8,.8),0 0 1px #2a1b12;
}
.cr-ending-status-title{font-size:clamp(13px,1vw,18px);font-weight:950;letter-spacing:.1em}
.cr-ending-status-note{display:none}
.cr-ending-status-grid{
  min-height:0;
  flex:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:4% 4%;
}
.cr-ending-status-item{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.08em;
  padding:.05em .2em;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  font:850 clamp(11px,.95vw,16px)/1.05 -apple-system,'Noto Sans SC',sans-serif;
  white-space:nowrap;
  text-align:center;
  text-shadow:0 2px 5px rgba(22,13,8,.92),0 0 2px rgba(22,13,8,.9);
  animation:crEndingStatFloat 3.8s ease-in-out infinite;
}
.cr-ending-status-item:nth-child(2n){animation-delay:-1.1s}
.cr-ending-status-item:nth-child(3n){animation-delay:-2.2s}
.cr-ending-status-name{min-width:0;overflow:visible;color:#fff4dc;font-size:.82em;font-weight:800;letter-spacing:.03em}
.cr-ending-status-value{margin:0;font-size:1.55em;font-weight:950;color:#fffdf7;line-height:1}
.cr-ending-status-delta{font-size:.72em;font-weight:950}
.cr-ending-status-item.is-better .cr-ending-status-delta{color:#9ef0c6}
.cr-ending-status-item.is-worse .cr-ending-status-delta{color:#ffb3a8}
.cr-ending-status-item.is-flat .cr-ending-status-delta{color:#e6d8c3}
@keyframes crEndingStatFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cr-ending-character{
  position:absolute;
  object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(37,22,13,.28));
}
.cr-ending-character.is-rare{filter:drop-shadow(0 0 8px rgba(255,190,56,.74)) drop-shadow(0 8px 10px rgba(37,22,13,.28))}
.cr-ending-title{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2c2119;
  font:900 clamp(8px,.86vw,14px)/1.2 Georgia,'Noto Serif SC',serif;
  letter-spacing:.08em;
  text-align:center;
  color:#17120e;
  background:#fffdf7;
  border:3px solid #17120e;
  border-radius:999px;
  box-shadow:2px 3px 0 rgba(23,18,14,.2);
}
.cr-ending-title.is-rare{color:#9a6018;text-shadow:0 0 8px rgba(255,195,70,.45)}
.cr-ending-copy{
  position:absolute;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2%;
  color:#17120e;
  background:#fffdf7;
  border:3px solid #17120e;
  border-radius:2px;
  box-shadow:2px 3px 0 rgba(23,18,14,.2);
  font:700 clamp(7px,.72vw,11px)/1.55 Georgia,'Noto Serif SC',serif;
  text-align:center;
}

.cr-copy-layer{position:absolute;inset:0;z-index:10;pointer-events:none}
.cr-copy-item{
  position:absolute;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(6px) scale(.94);
  text-align:center;
  overflow-wrap:anywhere;
}
.cr-narration{
  min-height:3.4%;
  padding:1.1% 2%;
  color:#17120e;
  background:#fffdf7;
  border:3px solid #17120e;
  border-radius:1px;
  box-shadow:2px 3px 0 rgba(23,18,14,.2);
  font:700 clamp(12px,1vw,18px)/1.42 Georgia,'Noto Serif SC',serif;
  letter-spacing:.015em;
}
.cr-dialogue{
  min-height:6.3%;
  padding:2.2% 3.2%;
  color:#17120e;
  background:#fffefa;
  border:3px solid #17120e;
  border-radius:50%;
  box-shadow:2px 3px 0 rgba(23,18,14,.18);
  font:750 clamp(13px,1.05vw,19px)/1.38 -apple-system,'Noto Sans SC',sans-serif;
}
.cr-dialogue::before,.cr-dialogue::after{
  content:'';
  position:absolute;
  bottom:-8%;
  width:0;
  height:0;
  transform:rotate(7deg);
}
.cr-dialogue::before{border-style:solid;border-width:12px 5px 0;border-color:#17120e transparent transparent}
.cr-dialogue::after{bottom:-5.5%;border-style:solid;border-width:9px 3px 0;border-color:#fffefa transparent transparent}
.cr-dialogue--tail-left::before{left:22%}
.cr-dialogue--tail-left::after{left:calc(22% + 2px)}
.cr-dialogue--tail-right::before{right:22%}
.cr-dialogue--tail-right::after{right:calc(22% + 2px)}
.cr-dialogue--tail-right::before,.cr-dialogue--tail-right::after{
  transform:rotate(-7deg);
}
.cr-speaker{display:block;margin-bottom:2px;color:#79644e;font-size:.7em;font-weight:850;letter-spacing:.06em}
.cr-sfx{
  transform:translate(-50%,-50%) rotate(-5deg);
  color:#fff4cb;
  font:900 clamp(11px,1.4vw,22px)/1 Impact,'Arial Black',sans-serif;
  letter-spacing:.08em;
  -webkit-text-stroke:2px #20140c;
  text-shadow:4px 5px 0 rgba(81,45,21,.65);
}
.cr-analysis-trigger:disabled{opacity:.42;cursor:not-allowed}
.cr-analysis-drawer{
  position:absolute;z-index:80;top:0;right:0;width:min(430px,38vw);height:100%;
  padding:28px 24px;color:#eadfce;
  background:linear-gradient(155deg,rgba(31,25,20,.97),rgba(16,13,11,.98));
  border-left:1px solid rgba(237,211,168,.26);box-shadow:-24px 0 60px rgba(0,0,0,.38);
  transform:translateX(105%);transition:transform .34s ease;overflow:auto;cursor:default;
}
.cr-analysis-drawer.is-visible{transform:translateX(0)}
.cr-analysis-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid rgba(237,211,168,.18)}
.cr-analysis-head div{display:flex;flex-direction:column;gap:5px}
.cr-analysis-head small{color:#b99a70;font:700 10px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em}
.cr-analysis-head strong{font:700 19px/1.4 Georgia,'Noto Serif SC',serif}
.cr-analysis-head button{border:0;background:transparent;color:#cdbda6;font-size:18px;cursor:pointer}
.cr-analysis-body{padding-top:18px}
.cr-analysis-summary{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding:14px;background:rgba(255,255,255,.045);border:1px solid rgba(237,211,168,.14);border-radius:10px}
.cr-analysis-summary strong{font-size:14px;line-height:1.6}
.cr-analysis-summary span{color:#ae9e89;font-size:11px}
.cr-analysis-item{padding:15px 0;border-top:1px solid rgba(237,211,168,.13)}
.cr-analysis-metric{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cr-analysis-metric strong{font-size:13px}
.cr-analysis-metric span{color:#e7b968;font:700 11px/1.3 ui-monospace,SFMono-Regular,monospace}
.cr-analysis-item p{margin:8px 0;color:#bfb19f;font-size:12px;line-height:1.65}
.cr-analysis-item summary{color:#d7c1a2;font-size:11px;cursor:pointer}
.cr-analysis-item ul{margin:9px 0 0;padding:0;list-style:none}
.cr-analysis-item li{display:flex;flex-direction:column;gap:3px;padding:8px 0;border-top:1px dashed rgba(237,211,168,.13);font-size:11px;line-height:1.5}
.cr-analysis-item li strong{color:#dfc493}.cr-analysis-item li span{color:#c6b8a5}.cr-analysis-item li small{color:#8f806e}
.cr-impact{
  position:absolute;
  z-index:34;
  top:8vh;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  width:min(720px,75vw);
  pointer-events:none;
}
.cr-impact-pill{
  opacity:0;
  padding:.45rem .8rem;
  border-radius:999px;
  color:#2b2018;
  background:#f7edcf;
  border:1px solid #6e533a;
  box-shadow:0 5px 15px rgba(0,0,0,.28);
  font-size:13px;
  font-weight:800;
}
.cr-impact-pill.is-cost{background:#e9d0c4}

.cr-controls{
  position:absolute;
  z-index:50;
  top:18px;
  left:20px;
  right:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.cr-control-group{display:flex;align-items:center;gap:8px;pointer-events:auto}
.cr-control-btn{
  height:34px;
  min-width:34px;
  padding:0 10px;
  border:1px solid rgba(245,226,190,.45);
  border-radius:999px;
  color:#f7ecd7;
  background:rgba(35,24,17,.72);
  backdrop-filter:blur(8px);
  cursor:pointer;
  font:700 12px/1 -apple-system,'Noto Sans SC',sans-serif;
}
.cr-control-btn:hover{background:rgba(69,46,29,.9);border-color:rgba(255,238,202,.78)}
.cr-progress{
  padding:.45rem .72rem;
  border:1px solid rgba(245,226,190,.35);
  border-radius:999px;
  color:#eadcc4;
  background:rgba(35,24,17,.62);
  backdrop-filter:blur(8px);
  font:700 11px/1 Georgia,'Noto Serif SC',serif;
  letter-spacing:.08em;
  pointer-events:auto;
}
.cr-hint{
  position:absolute;
  z-index:45;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:.5rem .8rem;
  color:rgba(245,232,206,.88);
  background:rgba(31,21,15,.7);
  border:1px solid rgba(245,226,190,.28);
  border-radius:999px;
  font-size:11px;
  letter-spacing:.05em;
  pointer-events:none;
  backdrop-filter:blur(8px);
}
.cr-turn-sheet{
  position:absolute;
  z-index:25;
  top:15.5%;
  left:51.2%;
  width:min(23.6vw,394px);
  height:min(67.5vh,635px);
  transform-origin:left center;
  transform:rotateY(90deg);
  opacity:0;
  pointer-events:none;
  clip-path:polygon(0 0,80% 0,100% 100%,0 100%);
  transform-style:preserve-3d;
  backface-visibility:visible;
  will-change:transform,opacity;
}
.cr-turn-page-face{
  position:absolute;
  inset:0;
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  background-blend-mode:multiply,normal;
  backface-visibility:hidden;
  transform:translateZ(.5px);
}
.cr-turn-page-face--back{transform:rotateY(180deg) translateZ(.5px)}
.cr-turn-strips{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}
.cr-turn-strip{
  position:absolute;
  top:0;
  height:100%;
  transform-origin:left center;
  transform-style:preserve-3d;
  will-change:transform;
}
.cr-turn-face{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-blend-mode:multiply,normal;
  backface-visibility:hidden;
  transform:translateZ(.35px);
}
.cr-turn-face--back{
  transform:rotateY(180deg) translateZ(.35px);
}
.cr-turn-strip::after{
  content:'';
  position:absolute;
  z-index:3;
  inset:0 0 0 auto;
  width:1px;
  background:rgba(73,47,28,.16);
}
.cr-turn-shadow{
  position:absolute;
  z-index:-1;
  top:2%;
  left:-6%;
  width:34%;
  height:96%;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(18,11,7,.62),rgba(31,20,12,.28) 46%,transparent);
  filter:blur(8px);
  opacity:0;
}
.cr-turn-edge{
  position:absolute;
  z-index:5;
  top:0;
  right:-1px;
  width:4px;
  height:100%;
  border-radius:50%;
  background:linear-gradient(90deg,rgba(93,65,42,.42),rgba(255,253,238,.92));
  box-shadow:0 0 10px rgba(255,250,226,.38);
  opacity:0;
}

.cr-final-actions{
  position:absolute;
  z-index:55;
  right:22px;
  bottom:20px;
  display:none;
  gap:8px;
}
.cr-final-actions.is-visible{display:flex}

@media(max-width:900px){
  .cr-analysis-drawer{width:min(88vw,430px)}
}
@media(prefers-reduced-motion:reduce){
  .cr-scene-bg,.cr-leaf,.cr-page-image,.cr-choice{transition:none!important}
  .cr-loading-book i{animation:none!important}
  .cr-reader *{scroll-behavior:auto!important}
  .cr-ending-status-item{animation:none!important}
}