:root{
 --ink:#193128; --cream:#fff8e8; --paper:#fffdf4; --green:#1f6b46; --gold:#f4b942;
 --shadow:0 18px 60px rgba(14,32,23,.23); --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
 --app-height:100svh; --app-width:100vw; --reader-top-h:58px; --reader-nav-h:70px;
 font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:#e9f2df;color:var(--ink)}
body{overflow-x:hidden} button,a{font:inherit} ruby rt{font-size:.5em;font-weight:600;letter-spacing:0}
.landing{min-height:100svh;padding:clamp(18px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,.6fr);gap:24px;align-items:stretch;background:
 radial-gradient(circle at 15% 20%,#fff8b6 0 9%,transparent 10%),
 radial-gradient(circle at 85% 8%,#c7efd2 0 11%,transparent 12%),
 linear-gradient(135deg,#edf7df,#d9efde 55%,#fff4ca);
}
.landing-card,.landing-info{border:3px solid rgba(76,104,58,.18);border-radius:28px;background:rgba(255,253,238,.9);box-shadow:var(--shadow);position:relative;overflow:hidden}
.landing-card{padding:clamp(24px,4.5vw,64px);display:flex;flex-direction:column;align-items:center;text-align:center;isolation:isolate}
.landing-card:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 20px,rgba(52,111,65,.035) 20px 21px);z-index:-2}
.landing-card:after{content:"";position:absolute;left:-8%;right:-8%;bottom:-24%;height:54%;background:linear-gradient(#85c56a,#4d944c);border-radius:50% 50% 0 0;z-index:-1}
.logo-kicker{display:inline-block;padding:8px 16px;border-radius:999px;background:#eef8df;border:2px solid #7cab61;font-weight:800;color:#35663b}
h1{font-size:clamp(38px,7vw,84px);line-height:1.02;margin:22px 0 12px;color:#214831;text-shadow:0 3px 0 #fff}
h1 span{display:block;color:#df6d22;font-size:.84em;margin-top:8px}.lead{font-size:clamp(16px,2.2vw,24px);font-weight:800;max-width:760px}
.cover-crowd{width:min(100%,900px);height:clamp(190px,30vw,330px);position:relative;margin:8px 0 4px}
.cover-crowd img{position:absolute;width:clamp(78px,11vw,150px);filter:drop-shadow(0 8px 5px rgba(0,0,0,.18));transition:.25s transform;user-select:none;pointer-events:none}
.cover-crowd img:nth-child(1){left:2%;bottom:0;transform:rotate(-8deg)} .cover-crowd img:nth-child(2){left:17%;bottom:12%;transform:rotate(5deg)}
.cover-crowd img:nth-child(3){left:32%;bottom:0;transform:rotate(-3deg)} .cover-crowd img:nth-child(4){left:46%;bottom:18%;transform:rotate(7deg)}
.cover-crowd img:nth-child(5){right:30%;bottom:0;transform:rotate(-6deg)} .cover-crowd img:nth-child(6){right:15%;bottom:12%;transform:rotate(4deg)}
.cover-crowd img:nth-child(7){right:1%;bottom:0;transform:rotate(8deg)}
.open-book{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:white;background:linear-gradient(#2d8a5a,#17643e);border:3px solid #154c32;box-shadow:0 6px 0 #103d28,0 12px 28px rgba(0,0,0,.2);border-radius:18px;padding:15px 28px;font-size:clamp(20px,3vw,30px);font-weight:900;position:relative;z-index:2}
.open-book:active{transform:translateY(4px);box-shadow:0 2px 0 #103d28}.swipe-note{position:relative;z-index:2;background:rgba(255,255,255,.82);padding:8px 14px;border-radius:12px;margin-bottom:0}
.landing-info{padding:28px;align-self:center}.landing-info h2{font-size:28px;color:#366a43}.landing-info p{line-height:1.9;font-weight:650}.text-button{border:0;background:#edf7df;color:#215339;border-radius:12px;padding:12px 15px;font-weight:900;cursor:pointer}
.reader{position:fixed;inset:0 0 auto 0;height:var(--app-height);background:radial-gradient(circle at 50% 12%,#526453,#25372f 55%,#14201b);z-index:100;overflow:hidden;touch-action:pan-y;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}
.reader-topbar{height:var(--reader-top-h);display:flex;align-items:center;gap:12px;padding:8px 12px;color:white}.reader-title{flex:1;text-align:center;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.round-button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.3);color:white;font-weight:900;cursor:pointer}.source-btn{font-size:18px}
.stage{height:calc(var(--app-height) - var(--reader-top-h) - var(--reader-nav-h) - var(--safe-top) - var(--safe-bottom));display:grid;place-items:center;perspective:2200px;padding:0 8px;position:relative}
.book-page{width:min(94vw,1080px);height:min(100%,760px);background:var(--paper);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.45);overflow:hidden;position:relative;transform-origin:left center;backface-visibility:hidden}
.book-page.ghost{position:absolute;visibility:hidden}.book-page.flip-next{animation:flipNext .55s cubic-bezier(.3,.1,.2,1)}.book-page.flip-prev{animation:flipPrev .55s cubic-bezier(.3,.1,.2,1)}
@keyframes flipNext{0%{transform:rotateY(0);filter:brightness(1)}48%{transform:rotateY(-88deg);filter:brightness(.7)}49%{opacity:.4}50%{transform:rotateY(88deg);opacity:.4}100%{transform:rotateY(0);opacity:1;filter:brightness(1)}}
@keyframes flipPrev{0%{transform:rotateY(0);filter:brightness(1)}48%{transform:rotateY(88deg);filter:brightness(.7)}49%{opacity:.4}50%{transform:rotateY(-88deg);opacity:.4}100%{transform:rotateY(0);opacity:1;filter:brightness(1)}}
.page-grid{display:grid;grid-template-columns:38% 62%;height:100%;position:relative}
.visual{position:relative;min-height:0;background:#123;overflow:hidden}.visual .hero{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.96) contrast(1.02)}.visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,17,12,.7));pointer-events:none}
.monster-badge{position:absolute;left:16px;top:16px;z-index:2;color:white;background:rgba(18,34,27,.75);backdrop-filter:blur(8px);padding:8px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.25);max-width:80%}.monster-badge small{display:block;opacity:.85}.monster-badge strong{font-size:clamp(18px,2vw,28px)}
.card-thumb{position:absolute;left:16px;bottom:16px;width:clamp(100px,13vw,145px);z-index:3;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.38);cursor:zoom-in;transform:rotate(-2deg)}
.chibi{position:absolute;right:-4%;bottom:-3%;width:clamp(145px,21vw,260px);max-height:44%;object-fit:contain;z-index:4;filter:drop-shadow(0 10px 8px rgba(0,0,0,.35));pointer-events:none}
.content{padding:clamp(18px,2.5vw,32px);overflow:auto;background:
 radial-gradient(circle at 96% 4%,rgba(244,185,66,.13),transparent 23%),
 linear-gradient(#fffdf5,#fff9e8);scrollbar-width:thin}
.page-header{display:flex;align-items:flex-start;gap:12px;border-bottom:2px dashed #c9b988;padding-bottom:10px;margin-bottom:12px}.issue-icon{font-size:36px;line-height:1}.page-header h2{margin:0;font-size:clamp(22px,2.5vw,34px);line-height:1.15}.official{font-size:14px;color:#6e5f40;margin-top:5px;font-weight:800}.tag{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;background:#e9f4dd;color:#3f6941;font-size:12px;font-weight:900}
.lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lesson{border:2px solid #eadfb9;border-radius:14px;padding:12px 13px;background:rgba(255,255,255,.78);box-shadow:0 3px 0 rgba(118,91,38,.08)}.lesson h3{margin:0 0 6px;font-size:16px;color:#21573c}.lesson p{margin:0;line-height:1.72;font-size:clamp(13px,1.15vw,16px);font-weight:600}.lesson.action{background:#eef8e4;border-color:#bdd8a6}
.fact-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.fact{font-size:12px;font-weight:900;background:#fff2c8;border:1px solid #e3c66e;padding:5px 9px;border-radius:999px}.source-line{margin-top:10px;font-size:11px;color:#6a6558;display:flex;align-items:center;justify-content:space-between;gap:8px}.source-line a{color:#26644b;font-weight:800}.page-no{position:absolute;right:14px;bottom:8px;font-weight:900;color:rgba(72,77,65,.35);font-size:12px}
.reader-nav{height:var(--reader-nav-h);display:grid;grid-template-columns:100px minmax(120px,400px) 100px;justify-content:center;align-items:center;gap:15px;padding:8px 14px;color:white}.nav-button{border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.28);color:white;border-radius:12px;padding:10px;font-weight:900;cursor:pointer}.nav-button:disabled{opacity:.28}.progress-wrap{text-align:center;font-weight:800;font-size:13px}.progress{height:5px;background:rgba(255,255,255,.2);border-radius:99px;margin-top:5px;overflow:hidden}.progress i{display:block;height:100%;background:#f9d86e;width:5%;border-radius:99px;transition:.3s width}.swipe-hint{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);background:rgba(0,0,0,.66);color:white;padding:8px 13px;border-radius:999px;font-size:13px;pointer-events:none;animation:hint 3.5s forwards;z-index:200}@keyframes hint{0%,65%{opacity:1}100%{opacity:0;visibility:hidden}}
.modal{position:fixed;inset:0;z-index:500}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(4px)}.modal-card{position:relative;z-index:2;background:#fffdf4;border-radius:20px;box-shadow:var(--shadow);width:min(92vw,760px);max-height:84svh;overflow:auto;margin:8svh auto;padding:28px}.modal-card h2{margin-top:0}.modal-close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#eee4cd;font-weight:900;cursor:pointer}.source-list{display:grid;gap:10px}.source-item{padding:12px;border-radius:12px;background:#f1f7e8}.source-item b{display:block;margin-bottom:4px}.source-item a{color:#17633f;word-break:break-all}.source-note{font-size:13px;line-height:1.65;color:#635c4d}
.lightbox-img{max-width:100%;max-height:70svh;display:block;margin:auto;border-radius:12px}
@media(max-width:760px){
 .landing{display:block;padding:14px}.landing-info{margin-top:14px}.landing-card{padding:22px 14px}h1{font-size:42px}.cover-crowd{height:210px}.cover-crowd img{width:105px}.cover-crowd img:nth-child(n+6){display:none}
 .reader-topbar{height:52px}.stage{height:calc(100svh - 120px - var(--safe-top) - var(--safe-bottom));padding:0}.book-page{width:100vw;height:100%;border-radius:0}
 .page-grid{grid-template-columns:1fr;grid-template-rows:38% 62%}.visual .hero{object-position:center 32%}.monster-badge{left:10px;top:10px;padding:6px 9px}.monster-badge strong{font-size:18px}.card-thumb{width:82px;left:10px;bottom:8px}.chibi{width:155px;right:-12px;bottom:-12px;max-height:58%}
 .content{padding:13px 14px 28px}.page-header{margin-bottom:8px;padding-bottom:7px}.issue-icon{font-size:28px}.page-header h2{font-size:20px}.official{font-size:11px}.lesson-grid{grid-template-columns:1fr;gap:7px}.lesson{padding:9px 10px}.lesson h3{font-size:14px;margin-bottom:3px}.lesson p{font-size:13px;line-height:1.58}.fact-row{margin-top:8px}.fact{font-size:10px}.source-line{font-size:9px}.reader-nav{height:68px;grid-template-columns:84px 1fr 84px;gap:8px;padding:7px}.nav-button{font-size:13px}.swipe-hint{bottom:72px}.modal-card{margin:4svh auto;max-height:92svh;padding:22px 16px}
}
@media(max-width:430px) and (max-height:760px){.page-grid{grid-template-rows:34% 66%}.lesson p{font-size:12px}.lesson{padding:7px 9px}.page-header h2{font-size:18px}.content{padding-top:9px}}
@media(prefers-reduced-motion:reduce){.book-page.flip-next,.book-page.flip-prev{animation:none}.swipe-hint{animation:none;display:none}}

/* ===== 2026-08 mobile fit + scrollbar-free zoom reader ===== */
html.reader-active, body.reader-active{height:100%;overflow:hidden;overscroll-behavior:none}
.reader{overflow:hidden;overscroll-behavior:none;touch-action:none}
.reader-topbar{position:relative;z-index:20}
.stage{overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.zoom-layer{
  width:min(94vw,1080px);height:min(100%,760px);position:relative;
  transform:translate3d(var(--pan-x,0px),var(--pan-y,0px),0) scale(var(--zoom,1));
  transform-origin:center center;will-change:transform;
}
.zoom-layer .book-page{width:100%;height:100%}
.zoom-layer.is-zoomed{cursor:grab}.zoom-layer.is-dragging{cursor:grabbing}
.content{overflow:hidden!important;scrollbar-width:none;-ms-overflow-style:none}
.content::-webkit-scrollbar,.modal-card::-webkit-scrollbar{display:none;width:0;height:0}
.zoom-controls{display:flex;align-items:center;gap:3px;padding:3px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.2);border-radius:999px}
.zoom-button,.zoom-value{height:34px;border:0;color:#fff;background:transparent;font-weight:900;cursor:pointer}
.zoom-button{width:34px;border-radius:50%;font-size:21px;line-height:1}.zoom-value{min-width:54px;padding:0 6px;font-size:12px;border-radius:999px}
.zoom-button:hover,.zoom-value:hover{background:rgba(255,255,255,.12)}.zoom-button:disabled{opacity:.35;cursor:default}
.reader.zoomed .swipe-hint{display:none}

@media(max-width:760px){
  .reader-topbar{height:50px;padding:6px 7px;gap:6px}
  .round-button{width:38px;height:38px;flex:0 0 auto}
  .reader-title{font-size:12px;min-width:0}
  .zoom-controls{flex:0 0 auto}
  .zoom-button{width:30px;height:30px;font-size:19px}.zoom-value{height:30px;min-width:48px;font-size:11px}
  .stage{height:calc(100svh - 112px - var(--safe-top) - var(--safe-bottom));padding:0 4px}
  .zoom-layer{width:100%;height:100%}
  .book-page{width:100%;height:100%;border-radius:0}
  /* A whole monster page fits in one phone screen: no vertical page scrolling. */
  .page-grid{grid-template-columns:1fr;grid-template-rows:29% 71%}
  .visual .hero{object-position:center 30%}
  .monster-badge{left:8px;top:7px;padding:5px 8px;border-radius:10px}.monster-badge small{font-size:8px}.monster-badge strong{font-size:16px}
  .card-thumb{width:70px;left:8px;bottom:7px;border-radius:7px}.chibi{width:126px;right:-8px;bottom:-11px;max-height:62%}
  .content{padding:8px 10px 15px}
  .page-header{gap:7px;margin-bottom:6px;padding-bottom:5px}.issue-icon{font-size:23px}.page-header h2{font-size:17px;line-height:1.1}.official{font-size:9px;margin-top:2px}.tag{font-size:9px;padding:2px 6px;margin-top:3px}
  .lesson-grid{grid-template-columns:1fr 1fr;gap:5px}
  .lesson{padding:6px 7px;border-radius:9px;border-width:1px;box-shadow:none}.lesson h3{font-size:11px;line-height:1.25;margin:0 0 2px}.lesson p{font-size:10.5px;line-height:1.42;font-weight:650}
  .fact-row{gap:3px;margin-top:5px;max-height:24px;overflow:hidden}.fact{font-size:8px;padding:3px 5px;border-radius:8px}
  .source-line{margin-top:4px;font-size:8px;line-height:1.15;white-space:nowrap;overflow:hidden}.source-line span{overflow:hidden;text-overflow:ellipsis}.source-line a{flex:0 0 auto}
  .page-no{right:7px;bottom:3px;font-size:9px}
  .reader-nav{height:62px;grid-template-columns:76px minmax(80px,1fr) 76px;gap:6px;padding:5px 7px}.nav-button{font-size:12px;padding:8px 5px}.progress-wrap{font-size:11px}.swipe-hint{bottom:65px;font-size:11px;padding:6px 9px;white-space:nowrap}
}
@media(max-width:390px){
  .reader-title{display:none}
  .reader-topbar{justify-content:space-between}
  .page-grid{grid-template-rows:27% 73%}
  .content{padding:6px 8px 12px}.page-header{margin-bottom:4px;padding-bottom:4px}.page-header h2{font-size:15px}.issue-icon{font-size:20px}
  .lesson-grid{gap:4px}.lesson{padding:5px 6px}.lesson h3{font-size:10px}.lesson p{font-size:9.6px;line-height:1.38}
  .fact-row{margin-top:4px}.fact{font-size:7.5px}.source-line{font-size:7.5px}
}
@media(max-width:350px), (max-height:620px){
  .page-grid{grid-template-rows:24% 76%}.monster-badge strong{font-size:14px}.card-thumb{width:58px}.chibi{width:105px}
  .content{padding:5px 7px 10px}.page-header h2{font-size:14px}.page-header{gap:5px}.official,.tag{font-size:8px}
  .lesson{padding:4px 5px}.lesson h3{font-size:9.5px}.lesson p{font-size:8.9px;line-height:1.34}.fact{font-size:7px;padding:2px 4px}.source-line{font-size:7px}
}
@media(orientation:landscape) and (max-height:520px){
  .reader-title{display:none}.stage{height:calc(100svh - 102px - var(--safe-top) - var(--safe-bottom))}.reader-nav{height:52px}
  .page-grid{grid-template-columns:34% 66%;grid-template-rows:1fr}.content{padding:6px 8px 10px}.lesson-grid{grid-template-columns:1fr 1fr}.visual .hero{object-position:center}
  .lesson p{font-size:9.2px;line-height:1.32}.lesson h3{font-size:9.5px}.page-header h2{font-size:14px}.fact-row{margin-top:3px}.source-line{margin-top:3px}
}

/* Final fit tuning: keep every learning page inside the visible sheet. */
@media (min-width:761px) and (max-width:900px){
  .content{padding:16px 18px}
  .lesson{padding:10px 11px}
  .lesson p{font-size:12.2px;line-height:1.55}
  .lesson h3{font-size:15px}
  .page-header{margin-bottom:9px;padding-bottom:8px}
  .fact-row{margin-top:8px}.source-line{margin-top:7px}
}
@media(max-width:390px){
  .lesson p{font-size:9.15px;line-height:1.34}
  .lesson{padding:4px 5px}
  .lesson h3{font-size:9.8px}
  .content{padding:5px 7px 10px}
  .page-header{margin-bottom:3px;padding-bottom:3px}
  .fact-row{margin-top:3px}.source-line{margin-top:3px}
}
@media(max-width:350px), (max-height:620px){
  .lesson p{font-size:8.15px;line-height:1.25}
  .lesson{padding:3px 4px}
  .lesson h3{font-size:8.8px;line-height:1.18;margin-bottom:1px}
  .content{padding:4px 6px 8px}
  .page-header{margin-bottom:2px;padding-bottom:2px}
  .page-header h2{font-size:13px}.issue-icon{font-size:18px}
  .fact-row{margin-top:2px;max-height:19px}.fact{font-size:6.7px;padding:2px 3px}
  .source-line{margin-top:2px;font-size:6.8px}
}


/* ===== 2026-08-31 viewport-height aware page fitting ===== */
.content{position:relative}
.content-fit{
  --content-fit:1;
  transform:scale(var(--content-fit));
  transform-origin:top left;
  width:100%;
  will-change:transform;
}
/* The page number stays anchored to the sheet even when learning text is auto-fitted. */
.content>.page-no{z-index:3;pointer-events:none}

@media(max-width:760px){
  :root{--reader-top-h:50px;--reader-nav-h:62px}
  .stage{height:calc(var(--app-height) - var(--reader-top-h) - var(--reader-nav-h) - var(--safe-top) - var(--safe-bottom))}
}
/* Short screens get more room for learning text before the measured auto-fit runs. */
@media(max-width:760px) and (max-height:760px){
  .page-grid{grid-template-rows:23% 77%}
}
@media(max-width:760px) and (max-height:640px){
  :root{--reader-top-h:46px;--reader-nav-h:54px}
  .reader-topbar{padding:4px 6px}.round-button{width:34px;height:34px}.zoom-button{width:27px;height:27px}.zoom-value{height:27px}
  .page-grid{grid-template-rows:20% 80%}
  .reader-nav{padding:3px 6px}.nav-button{padding:6px 4px}.swipe-hint{bottom:57px}
}
@media(max-width:760px) and (max-height:540px){
  :root{--reader-top-h:42px;--reader-nav-h:48px}
  .reader-topbar{padding:3px 5px}.round-button{width:32px;height:32px}.zoom-controls{padding:1px}.zoom-button{width:25px;height:25px;font-size:17px}.zoom-value{height:25px;min-width:44px;font-size:10px}
  .reader-title{display:none}.page-grid{grid-template-rows:17% 83%}
  .monster-badge{top:4px;left:5px;padding:3px 5px}.monster-badge small{font-size:7px}.monster-badge strong{font-size:12px}
  .card-thumb{width:48px;left:5px;bottom:4px}.chibi{width:88px;bottom:-8px}
  .reader-nav{grid-template-columns:68px minmax(60px,1fr) 68px}.nav-button{font-size:11px;padding:5px 3px}.progress-wrap{font-size:10px}
  .swipe-hint{display:none}
}
/* Landscape phones are height-constrained, so keep illustration and text side-by-side. */
@media(orientation:landscape) and (max-height:620px){
  :root{--reader-top-h:42px;--reader-nav-h:48px}
  .stage{height:calc(var(--app-height) - var(--reader-top-h) - var(--reader-nav-h) - var(--safe-top) - var(--safe-bottom))}
  .reader-topbar{padding:3px 6px}.reader-title{display:none}.round-button{width:32px;height:32px}
  .zoom-button{width:25px;height:25px}.zoom-value{height:25px}
  .reader-nav{height:var(--reader-nav-h);padding:3px 6px}
  .page-grid{grid-template-columns:31% 69%;grid-template-rows:1fr}
  .content{padding:5px 7px 8px}.page-header{margin-bottom:3px;padding-bottom:3px}
  .fact-row{margin-top:2px}.source-line{margin-top:2px}
}

/* ===== 2026-08-31 natural left-opening page turn + robust landscape height fit ===== */
.book-page{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.book-page:not(.ghost){z-index:2}
.book-page.ghost{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  visibility:hidden;
  pointer-events:none;
  z-index:1;
}
.book-page.ghost.turn-next-under,
.book-page.ghost.turn-prev-in{visibility:visible}
.book-page.turn-next-out{
  z-index:4;
  transform-origin:left center;
  animation:bookTurnNext .64s cubic-bezier(.22,.72,.18,1) both;
  will-change:transform,filter,box-shadow;
}
.book-page.turn-current-under{z-index:1}
.book-page.ghost.turn-next-under{z-index:2;transform:none}
.book-page.ghost.turn-prev-in{
  z-index:4;
  transform-origin:left center;
  animation:bookTurnPrev .64s cubic-bezier(.22,.72,.18,1) both;
  will-change:transform,filter,box-shadow;
}
@keyframes bookTurnNext{
  0%{transform:translateZ(0) rotateY(0deg);filter:brightness(1);box-shadow:0 24px 80px rgba(0,0,0,.45)}
  35%{transform:translateZ(18px) rotateY(-58deg);filter:brightness(.96);box-shadow:20px 22px 44px rgba(0,0,0,.34)}
  50%{transform:translateZ(28px) rotateY(-90deg);filter:brightness(.78);box-shadow:26px 18px 34px rgba(0,0,0,.28)}
  68%{transform:translateZ(18px) rotateY(-122deg);filter:brightness(.73);box-shadow:18px 15px 28px rgba(0,0,0,.2)}
  100%{transform:translateZ(0) rotateY(-180deg);filter:brightness(.68);box-shadow:none}
}
@keyframes bookTurnPrev{
  0%{transform:translateZ(0) rotateY(-180deg);filter:brightness(.68);box-shadow:none}
  32%{transform:translateZ(18px) rotateY(-122deg);filter:brightness(.73);box-shadow:18px 15px 28px rgba(0,0,0,.2)}
  50%{transform:translateZ(28px) rotateY(-90deg);filter:brightness(.78);box-shadow:26px 18px 34px rgba(0,0,0,.28)}
  65%{transform:translateZ(18px) rotateY(-58deg);filter:brightness(.96);box-shadow:20px 22px 44px rgba(0,0,0,.34)}
  100%{transform:translateZ(0) rotateY(0deg);filter:brightness(1);box-shadow:0 24px 80px rgba(0,0,0,.45)}
}

/* visualViewport-based classes: these work even when mobile browser chrome changes the real height. */
html.viewport-landscape-short{
  --reader-top-h:40px;
  --reader-nav-h:44px;
}
html.viewport-landscape-short .reader-topbar{
  height:var(--reader-top-h);
  padding:3px 6px;
  gap:5px;
}
html.viewport-landscape-short .reader-title{display:none}
html.viewport-landscape-short .round-button{width:31px;height:31px;font-size:14px}
html.viewport-landscape-short .zoom-controls{padding:1px}
html.viewport-landscape-short .zoom-button{width:25px;height:25px;font-size:17px}
html.viewport-landscape-short .zoom-value{height:25px;min-width:43px;font-size:10px}
html.viewport-landscape-short .stage{
  height:calc(var(--app-height) - var(--reader-top-h) - var(--reader-nav-h) - var(--safe-top) - var(--safe-bottom));
  min-height:0;
  padding:0 3px;
}
html.viewport-landscape-short .zoom-layer{width:100%;height:100%;max-height:none}
html.viewport-landscape-short .book-page{width:100%;height:100%;border-radius:0}
html.viewport-landscape-short .page-grid{grid-template-columns:29% 71%;grid-template-rows:1fr}
html.viewport-landscape-short .visual .hero{object-position:center center}
html.viewport-landscape-short .monster-badge{left:5px;top:4px;padding:3px 5px}
html.viewport-landscape-short .monster-badge small{font-size:7px}
html.viewport-landscape-short .monster-badge strong{font-size:12px}
html.viewport-landscape-short .card-thumb{width:min(54px,8vw);left:5px;bottom:4px}
html.viewport-landscape-short .chibi{width:min(92px,14vw);right:-4px;bottom:-8px;max-height:52%}
html.viewport-landscape-short .content{padding:4px 6px 7px;min-height:0}
html.viewport-landscape-short .page-header{gap:5px;margin-bottom:2px;padding-bottom:2px}
html.viewport-landscape-short .issue-icon{font-size:17px}
html.viewport-landscape-short .page-header h2{font-size:12.5px;line-height:1.08}
html.viewport-landscape-short .official,html.viewport-landscape-short .tag{font-size:7px}
html.viewport-landscape-short .tag{padding:1px 4px;margin-top:1px}
html.viewport-landscape-short .lesson-grid{grid-template-columns:1fr 1fr;gap:3px}
html.viewport-landscape-short .lesson{padding:3px 4px;border-radius:7px;border-width:1px}
html.viewport-landscape-short .lesson h3{font-size:8.3px;line-height:1.16;margin-bottom:1px}
html.viewport-landscape-short .lesson p{font-size:7.7px;line-height:1.23}
html.viewport-landscape-short .fact-row{margin-top:2px;gap:2px;max-height:18px;overflow:hidden}
html.viewport-landscape-short .fact{font-size:6.4px;padding:1px 3px}
html.viewport-landscape-short .source-line{margin-top:2px;font-size:6.5px;line-height:1.05}
html.viewport-landscape-short .page-no{font-size:7px;right:5px;bottom:2px}
html.viewport-landscape-short .reader-nav{
  height:var(--reader-nav-h);
  grid-template-columns:70px minmax(64px,1fr) 70px;
  gap:5px;
  padding:3px 6px;
}
html.viewport-landscape-short .nav-button{font-size:10px;padding:4px 3px}
html.viewport-landscape-short .progress-wrap{font-size:9px}
html.viewport-landscape-short .progress{height:3px;margin-top:2px}
html.viewport-landscape-short .swipe-hint{display:none}

html.viewport-landscape-very-short{
  --reader-top-h:36px;
  --reader-nav-h:40px;
}
html.viewport-landscape-very-short .round-button{width:28px;height:28px}
html.viewport-landscape-very-short .zoom-button{width:23px;height:23px;font-size:16px}
html.viewport-landscape-very-short .zoom-value{height:23px;min-width:40px;font-size:9px}
html.viewport-landscape-very-short .page-grid{grid-template-columns:25% 75%}
html.viewport-landscape-very-short .content{padding:3px 5px 6px}
html.viewport-landscape-very-short .monster-badge strong{font-size:10px}
html.viewport-landscape-very-short .card-thumb{width:min(46px,7vw)}
html.viewport-landscape-very-short .chibi{width:min(76px,12vw)}
html.viewport-landscape-very-short .reader-nav{grid-template-columns:62px minmax(52px,1fr) 62px;padding:2px 5px}
html.viewport-landscape-very-short .nav-button{font-size:9px;padding:3px 2px}

@media(prefers-reduced-motion:reduce){
  .book-page.turn-next-out,.book-page.ghost.turn-prev-in{animation:none!important}
}

/* Never hide learning rows just to make a short phone fit; JS scales the full content instead. */
.reader .fact-row{max-height:none!important;overflow:visible!important}
.reader .source-line{white-space:normal!important;overflow:visible!important}
.reader .source-line span{overflow:visible!important;text-overflow:clip!important}

/* Keep the front face readable only on its front side. The sheet background itself
   remains visible after 90deg, giving the turning page a plain-paper backside. */
.book-page{backface-visibility:visible;-webkit-backface-visibility:visible}
.book-page .page-grid{backface-visibility:hidden;-webkit-backface-visibility:hidden}

html.direct-book body{background:#14201b}
html.direct-book #landing,html.direct-book #japan-page-back{display:none!important}