:root { --blue:#1769d2; --deep:#103a73; --pink:#e44288; --paper:#f8fbff; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { font-family:"Trebuchet MS",Verdana,sans-serif; color:#fff; background:#123f70 url("../books/Sam the cat/images/background.png") center/cover no-repeat; }
button { font:inherit; }
.tool-button[hidden] { display:none!important; }
.app { height:100%; min-height:360px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:clamp(6px,1.2vh,14px); padding:clamp(8px,1.5vh,18px) clamp(10px,2vw,28px); background:linear-gradient(180deg,rgba(7,35,79,.1),rgba(5,28,64,.3)); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1200px; width:100%; margin:auto; }
.tools { display:flex; gap:12px; padding:3px 4px 7px; }
.library-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:58px; padding:0 20px; border:4px solid #fff; border-radius:21px; color:#fff; background:linear-gradient(180deg,#8deaff 0 15%,#22bce9 22% 72%,#0877b9 76%); box-shadow:0 6px 0 #075183,0 10px 15px rgba(4,31,70,.32),inset 0 3px 3px rgba(255,255,255,.65); font-size:19px; font-weight:900; text-decoration:none; text-shadow:0 2px 2px rgba(0,48,91,.35); transition:transform .18s,filter .18s,box-shadow .18s; }
.library-button:hover { transform:translateY(-5px); filter:brightness(1.08); box-shadow:0 11px 0 #075183,0 16px 20px rgba(4,31,70,.3),inset 0 3px 3px rgba(255,255,255,.65); }
.library-button:active { transform:translateY(2px); box-shadow:0 2px 0 #075183,0 5px 8px rgba(4,31,70,.25); }
.library-arrow { width:15px; height:15px; border:solid #fff; border-width:0 0 5px 5px; transform:rotate(45deg); filter:drop-shadow(0 2px 1px rgba(0,48,91,.35)); }
.loading-home-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; margin-top:12px; padding:0 22px; border:3px solid #fff; border-radius:18px; color:#fff; background:linear-gradient(180deg,#7de5ff,#18aee5 62%,#0875b8); box-shadow:0 5px 0 #075183,0 9px 14px rgba(4,31,70,.3); font-size:18px; font-weight:900; text-decoration:none; text-shadow:0 2px 2px rgba(0,48,91,.35); transition:transform .18s,filter .18s,box-shadow .18s; }
.loading-home-button:hover { transform:translateY(-5px); filter:brightness(1.09); box-shadow:0 10px 0 #075183,0 15px 20px rgba(4,31,70,.28); }
.loading-home-button:active { transform:translateY(2px); box-shadow:0 2px 0 #075183; }
.tool-button,.nav-button,.close-button,.close-icon { position:relative; isolation:isolate; color:#fff; cursor:pointer; transition:transform .16s,filter .16s,box-shadow .16s; }
.tool-button { --button-top:#36d5fa; --button-mid:#13aee4; --button-bottom:#0872bb; --button-rim:#07558d; width:64px; height:64px; min-width:64px; padding:0; border:3px solid #fff; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 36% 24%,rgba(255,255,255,.72) 0 5%,transparent 22%),linear-gradient(180deg,var(--button-top),var(--button-mid) 58%,var(--button-bottom)); box-shadow:0 0 0 3px rgba(21,188,234,.9),0 6px 0 var(--button-rim),0 9px 13px rgba(4,31,70,.42),inset 0 0 0 3px rgba(255,255,255,.22),inset 0 -7px 9px rgba(0,48,102,.2); }
.tool-button::before { content:""; position:absolute; z-index:-1; inset:6px 9px auto; height:38%; border-radius:50%; background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,0)); pointer-events:none; }
.sound-tool { --button-top:#45ddff;--button-mid:#13b7ed;--button-bottom:#087abf;--button-rim:#07598e; }
.favorite-tool { --button-top:#ffef6a;--button-mid:#ffbd20;--button-bottom:#ef7f12;--button-rim:#a84d0a; box-shadow:0 0 0 3px rgba(255,193,31,.92),0 6px 0 var(--button-rim),0 9px 13px rgba(4,31,70,.42),inset 0 0 0 3px rgba(255,255,255,.28),inset 0 -7px 9px rgba(114,48,0,.2); }
.favorite-image { display:block; width:45px; height:45px; object-fit:contain; filter:drop-shadow(0 3px 2px rgba(103,47,0,.38)); transition:transform .18s,filter .18s,opacity .18s; pointer-events:none; }
.favorite-tool[aria-pressed="false"] .favorite-image { opacity:.52; filter:grayscale(.65) drop-shadow(0 2px 1px rgba(50,50,50,.25)); transform:scale(.86); }
.favorite-tool[aria-pressed="true"] .favorite-image { opacity:1; transform:scale(1.05); }
.info-tool { --button-top:#f27dea;--button-mid:#d94ccd;--button-bottom:#a92ba9;--button-rim:#6f1c84; box-shadow:0 0 0 3px rgba(222,79,213,.9),0 6px 0 var(--button-rim),0 9px 13px rgba(4,31,70,.42),inset 0 0 0 3px rgba(255,255,255,.22),inset 0 -7px 9px rgba(77,0,88,.2); }
.fullscreen-tool { --button-top:#55dfcf;--button-mid:#17b9b7;--button-bottom:#087f9f;--button-rim:#075d78; box-shadow:0 0 0 3px rgba(35,197,190,.9),0 6px 0 var(--button-rim),0 9px 13px rgba(4,31,70,.42),inset 0 0 0 3px rgba(255,255,255,.22),inset 0 -7px 9px rgba(0,61,92,.2); }
.tool-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tool-button:hover,.nav-button:hover:not(:disabled),.close-button:hover,.close-icon:hover { filter:brightness(1.12); transform:translateY(-2px); }
.tool-button:active,.nav-button:active:not(:disabled),.close-button:active { transform:translateY(3px); box-shadow:inset 0 2px 4px rgba(0,0,0,.2),0 2px 0 #0b3e82; }
.game-icon { position:relative; display:inline-grid; place-items:center; width:34px; height:36px; color:#fff; filter:drop-shadow(0 3px 1px rgba(0,44,94,.42)); }
.sound-image { display:block; width:39px; height:39px; object-fit:contain; filter:drop-shadow(0 3px 1px rgba(0,44,94,.42)); pointer-events:none; }
.sound-tool[aria-pressed="false"] .sound-image { opacity:.72; }
.sound-tool[aria-pressed="false"]::after { content:""; position:absolute; z-index:3; width:38px; height:5px; border-radius:5px; background:#fff; transform:rotate(-45deg); box-shadow:0 2px 1px rgba(0,44,94,.35); }
.info-icon { width:35px; height:38px; font:italic 900 39px/.9 Georgia,serif; text-shadow:0 3px 1px rgba(87,12,103,.42); }
.fullscreen-icon::before { content:""; position:absolute; inset:2px; background:linear-gradient(#fff,#fff) left top/12px 4px no-repeat,linear-gradient(#fff,#fff) left top/4px 12px no-repeat,linear-gradient(#fff,#fff) right top/12px 4px no-repeat,linear-gradient(#fff,#fff) right top/4px 12px no-repeat,linear-gradient(#fff,#fff) left bottom/12px 4px no-repeat,linear-gradient(#fff,#fff) left bottom/4px 12px no-repeat,linear-gradient(#fff,#fff) right bottom/12px 4px no-repeat,linear-gradient(#fff,#fff) right bottom/4px 12px no-repeat; }

.book-stage { min-height:0; display:grid; grid-template-columns:72px minmax(0,1fr) 72px; align-items:center; justify-items:center; gap:clamp(10px,1.5vw,22px); overflow:visible; touch-action:none; }
.flip-book { width:100%; height:100%; filter:drop-shadow(0 18px 18px rgba(3,20,50,.42)); }
.flip-book.stf__parent { width:min(100%,calc((100vh - 155px) * 1.414))!important; height:100%!important; }
.flip-book.stf__parent { transition:transform 720ms cubic-bezier(.35,.05,.2,1); }
.flip-book.is-front-cover { transform:translateX(-25%); }
.flip-book.is-back-cover { transform:translateX(25%); }
.flip-book .stf__parent { margin:auto; }
.book-page { position:relative; overflow:hidden; background:linear-gradient(135deg,#fff,#edf5ff); border:0; }
.book-page::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 1px rgba(8,35,72,.25); }
.book-page img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:#f8fbff; user-select:none; -webkit-user-drag:none; }
.book-page.blank-page { background:#fff!important; }
.book-page.blank-page::before { content:none; }
.book-page.back-cover { display:grid; place-items:center; color:#fff; font-size:clamp(24px,4vw,52px); text-align:center; background:radial-gradient(circle at 38% 24%,#35b8df,#1652a7 72%); }
.book-page.back-cover::before { content:"The End"; font-weight:900; text-shadow:0 3px 0 #0b3e79; }
.book-page.cover-page.missing-page { display:grid; place-items:center; padding:12%; color:#fff; text-align:center; font-size:clamp(24px,4vw,52px); font-weight:900; background:radial-gradient(circle at 38% 24%,#35b8df,#1652a7 72%); text-shadow:0 3px 0 #0b3e79; }
/* StPageFlip calculates a moving polygon for each soft page and its shadow.
   Keep the sheet visually thin: no borders, stacked offsets, or rigid cover density. */
.stf__block { perspective:2200px!important; }

.side-nav { position:relative; z-index:20; display:grid; place-items:center; visibility:visible; flex:0 0 66px; width:66px; height:66px; padding:0; border:3px solid #fff; border-radius:50%; color:#fff; cursor:pointer; background:radial-gradient(circle at 36% 24%,rgba(255,255,255,.72) 0 5%,transparent 22%),linear-gradient(180deg,#45ddff,#13ace9 58%,#0876bf); box-shadow:0 0 0 3px rgba(21,188,234,.9),0 6px 0 #07558d,0 9px 13px rgba(4,31,70,.42),inset 0 0 0 3px rgba(255,255,255,.22),inset 0 -7px 9px rgba(0,48,102,.2); transition:transform .16s,filter .16s,box-shadow .16s; }
.side-nav::before { content:""; position:absolute; inset:6px 9px auto; height:38%; border-radius:50%; background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,0)); }
.side-nav:hover:not(:disabled) { filter:brightness(1.1); transform:translateY(-2px) scale(1.03); }
.side-nav:active:not(:disabled) { transform:translateY(5px); box-shadow:0 0 0 3px rgba(21,188,234,.9),0 1px 0 #07558d; }
.side-nav:disabled { cursor:default; filter:saturate(.25); opacity:.45; transform:none; }
.side-arrow { position:absolute; z-index:2; top:50%; left:50%; width:22px; height:22px; border:solid #fff; border-width:0 6px 6px 0; filter:drop-shadow(0 3px 1px rgba(0,44,94,.42)); }
.side-arrow-left { transform:translate(-36%,-50%) rotate(135deg); }
.side-arrow-right { transform:translate(-64%,-50%) rotate(-45deg); }
.page-status { min-height:24px; text-align:center; font-weight:900; font-size:clamp(14px,1.7vw,20px); text-shadow:0 2px 3px #092d61; }
.close-button,.close-icon { border:3px solid #fff; color:#fff; cursor:pointer; background:linear-gradient(180deg,#ff8ad0,#ed4fab 52%,#c92e88); box-shadow:0 0 0 2px #e54cac,inset 0 3px 2px rgba(255,255,255,.58),inset 0 -4px 6px rgba(108,5,76,.25),0 6px 0 #901c62,0 10px 16px rgba(3,22,55,.38); }
.close-button { min-height:56px; border-radius:28px; padding:10px 28px; font-size:20px; font-weight:900; }
.modal[hidden] { display:none; }
.modal { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:20px; background:rgba(3,19,47,.72); }
.modal-panel { position:relative; width:min(560px,94vw); padding:clamp(24px,5vw,48px); border:4px solid #fff; border-radius:30px; text-align:center; color:#153865; background:linear-gradient(145deg,#f8fcff,#dff4ff); box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 0 0 7px #66d0ed; }
.modal-panel h2 { margin:0 30px 20px; font-size:clamp(25px,4vw,40px); color:#1658ac; }
.modal-panel p { margin:10px 0; font-size:clamp(17px,2.2vw,23px); font-weight:700; }
.close-icon { position:absolute; right:14px; top:14px; width:44px; height:44px; border-radius:50%; font-size:30px; line-height:35px; }
.close-button { margin:20px auto 0; min-width:160px; background:linear-gradient(#ef68a0,#cf2670); }
.loading-screen { position:fixed; z-index:50; inset:0; display:grid; place-items:center; background:#103f7a url("../books/Sam the cat/images/background.png") center/cover no-repeat; transition:opacity .35s,visibility .35s; }
.loading-screen.done { opacity:0; visibility:hidden; }
.loading-screen.ready { background:rgba(5,32,73,.48); backdrop-filter:blur(2px); }
.loading-card { display:grid; justify-items:center; gap:22px; padding:30px; border-radius:28px; font-size:clamp(22px,4vw,38px); text-shadow:0 3px #0a3974; background:rgba(10,65,135,.72); box-shadow:0 15px 35px rgba(0,0,0,.3); }
.book-loader { width:72px; height:52px; border:6px solid #fff; border-radius:8px 8px 16px 16px; animation:bob .8s ease-in-out infinite alternate; }
.loading-screen.ready .book-loader { display:none; }
.start-book-button { min-width:230px; min-height:64px; padding:10px 28px; border:3px solid #fff; border-radius:32px; color:#fff; font-size:clamp(20px,3vw,28px); font-weight:900; cursor:pointer; background:linear-gradient(180deg,#ff8ad0,#ed4fab 52%,#c92e88); box-shadow:0 0 0 3px #e54cac,inset 0 3px 2px rgba(255,255,255,.58),inset 0 -4px 6px rgba(108,5,76,.25),0 7px 0 #901c62,0 12px 20px rgba(3,22,55,.42); text-shadow:0 2px 1px rgba(72,5,53,.55); transition:transform .16s,filter .16s; }
.start-book-button:hover { filter:brightness(1.1); transform:translateY(-2px); }
.start-book-button:active { transform:translateY(5px); box-shadow:0 0 0 3px #e54cac,0 2px 0 #901c62; }
@keyframes bob { to { transform:translateY(-9px) rotate(-2deg); } }
.rotate-message { display:none; position:fixed; inset:auto 12px 6px; margin:0; text-align:center; font-size:12px; }
@media (max-width:760px) { .tools{gap:9px}.tool-button{width:54px;height:54px;min-width:54px}.game-icon{transform:scale(.84)}.book-stage{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 58px;column-gap:82px;row-gap:5px;padding-inline:12px}.flip-book{grid-column:1/-1;grid-row:1}.side-nav{width:54px;height:54px;grid-row:2}.side-nav.previous{grid-column:1;justify-self:end}.side-nav.next{grid-column:2;justify-self:start}.side-arrow{width:18px;height:18px;border-width:0 5px 5px 0} }
@media (max-width:620px) { .library-button{width:56px;min-width:56px;height:54px;min-height:54px;padding:0;border-radius:50%}.library-button span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.library-arrow{margin-left:5px} }
@media (max-width:480px) and (orientation:portrait) { .rotate-message{display:block}.app{padding-bottom:27px} }
@media (prefers-reduced-motion:reduce) { .tool-button,.nav-button,.close-button{transition:none} }