@font-face { font-family: Elms; font-weight: 400; src: url(fonts/ElmsSans_400Regular.ttf); }
@font-face { font-family: Elms; font-weight: 500; src: url(fonts/ElmsSans_500Medium.ttf); }
@font-face { font-family: Elms; font-weight: 700; src: url(fonts/ElmsSans_700Bold.ttf); }
@font-face { font-family: Elms; font-weight: 900; src: url(fonts/ElmsSans_900Black.ttf); }
:root {
--paper: #fbf8f1; --ink: #2e2822; --pencil: #4b4339; --soft: #7a7066;
--cover: #869659; --band: #f0ece6; --english: #2e2822; --gold: #c48c14; --desk: #3a2c22;
--hand: 'Bradley Hand', 'Noteworthy', 'Marker Felt', 'Segoe Print', 'Comic Sans MS', cursive;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: var(--paper); color: var(--ink); font-family: Elms, system-ui, sans-serif; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply; z-index: 50;
background: url("data:image/svg+xml;utf8,"); }
#app { height: 100dvh; position: relative; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
.note { font-family: var(--hand); color: #5a5046; font-weight: 400; }
.ico { display: block; }
.ico svg { width: 100%; height: 100%; display: block; overflow: visible; filter: url(#rough); }
.pen { fill: none; stroke: var(--pencil); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pen2 { fill: none; stroke: var(--pencil); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
svg.underline { width: 96px; height: 8px; display: block; overflow: visible; filter: url(#rough); }
/* ---------------------------------------------------------------- the shelf */
#shelf { position: absolute; inset: 0; overflow: auto; padding: max(46px, env(safe-area-inset-top)) 22px 28px; }
.shelfInner { max-width: 520px; margin: 0 auto; position: relative; }
#shelf .brand { font-weight: 900; font-size: 21px; line-height: 1; color: #5a6b2e; text-align: right; }
svg.underline { overflow: visible; }
#shelf svg.underline { width: 150px; height: 8px; margin: 3px 0 0 auto; }
#shelf h1 { font-size: 30px; line-height: 1.1; margin: 42px 0 0; font-weight: 700; }
#shelf .sub { font-size: 19px; margin: 4px 0 0; }
#shelfWrap { position: relative; margin-top: 52px; }
#shelfScroll { overflow-x: auto; overflow-y: hidden; padding: 0; scrollbar-width: none; -ms-overflow-style: none; }
#shelfScroll::-webkit-scrollbar { display: none; }
#shelfTrack { width: 100%; }
#books { display: flex; justify-content: center; align-items: flex-end; gap: 4%; padding: 0 2%; }
#more { display: none; position: absolute; right: 0; bottom: 118px; font-size: 24px; transform: rotate(-2deg); z-index: 2; }
#books .book { flex: 1 1 0; max-width: 130px; cursor: pointer; position: relative; transition: transform .2s; }
#books .book:nth-child(odd) { transform: rotate(-1.2deg); } #books .book:nth-child(even) { transform: rotate(.9deg); }
#books .book .cover { position: relative; aspect-ratio: 9 / 16; border-radius: 2px 5px 5px 2px; overflow: hidden; box-shadow: 3px 5px 10px rgba(60,40,20,.35); }
#books .book .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
#books .book .cover::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7%; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent); }
#books .book.sel { transform: translateY(-8px) rotate(0); }
#shelfLine { height: 8px; margin: 0 -2px; filter: url(#rough); background:
url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; }
#nums { display: flex; justify-content: center; gap: 4%; padding: 0 2%; margin-top: 10px; }
#nums .n { flex: 1 1 0; max-width: 130px; display: flex; justify-content: center; }
.num { position: relative; width: 64px; height: 64px; display: grid; place-items: center; font-weight: 700; font-size: 24px; color: #8a8076; cursor: pointer; }
.num .ico { position: absolute; inset: 0; opacity: 0; }
.num.sel { color: var(--ink); } .num.sel .ico { opacity: 1; }
#card1 { margin-top: 24px; background: #fff; border: 1.8px solid var(--pencil); border-radius: 6px; padding: 16px 18px; box-shadow: 3px 4px 0 rgba(0,0,0,.1); filter: url(#rough); }
#card1 .t { font-size: 24px; font-weight: 700; } #card1 .s { color: #6a6055; margin-top: 2px; }
#card1 .notch { display: none; }
#card1 .m { display: flex; justify-content: space-between; font-size: 17px; margin-top: 10px; }
#open { position: relative; display: block; width: 100%; height: 60px; margin-top: 20px; background: var(--cover); color: #fff; border-radius: 8px;
box-shadow: 3px 4px 0 rgba(0,0,0,.18); font-size: 21px; font-weight: 700; letter-spacing: .03em; }
#open svg { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); filter: url(#rough); } #open svg .pen { stroke: var(--pencil); }
#shelf .tip { text-align: center; font-size: 17px; margin: 10px 0 0; }
/* a wide screen (computer): the shelf runs edge to edge, the logo sits in the corner, and it all fits the screen's height */
@media (min-width: 900px) {
:root { --bw: clamp(110px, 17.5vh, 186px); }
#shelf { padding: 32px 44px 28px; }
.shelfInner { max-width: none; }
#shelf .brand { font-size: 40px; }
#shelf svg.underline { width: 250px; height: 10px; margin: 6px 0 0 auto; }
#shelf h1 { font-size: 42px; margin-top: 4.2vh; }
#shelf .sub { font-size: 24px; }
#shelfWrap { margin-top: 3vh; }
#shelfWrap #more { display: block; }
#books { justify-content: flex-start; gap: 34px; padding: 0 0 0 12px; }
#books .book { flex: none; width: var(--bw); max-width: none; }
#nums { justify-content: flex-start; gap: 34px; padding: 0 0 0 12px; }
#nums .n { flex: none; width: var(--bw); max-width: none; }
.num { width: 58px; height: 58px; font-size: 22px; }
#pick { width: calc(3 * var(--bw) + 68px); max-width: 100%; }
#pick.anim { transition: margin-left .28s ease; }
#card1, #open { width: 100%; }
#card1 { position: relative; }
#card1 .notch { display: block; position: absolute; top: -10px; left: var(--nx, 90px); width: 16px; height: 16px; margin-left: -8px; background: #fff;
border-left: 1.8px solid var(--pencil); border-top: 1.8px solid var(--pencil); transform: rotate(45deg); }
#card1 { margin-top: 2vh; } #card1 .m { font-size: 19px; }
#open { margin-top: 2vh; }
#shelf .tip { display: none; }
#shelfScroll { margin-right: -44px; padding: 14px 44px 0 0; }
#shelfTrack { min-width: 100%; width: max-content; }
}
/* ---------------------------------------------------------------- the reader */
#reader { position: absolute; inset: 0; background: var(--paper); }
#viewport { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
#stage { position: relative; container-type: size; overflow: hidden; }
#stage.portrait { aspect-ratio: 9 / 16; background: var(--paper); }
#stage.landscape { aspect-ratio: 16 / 9; background: var(--desk); border-radius: 6px; }
#page { position: absolute; inset: 0; touch-action: pan-y; }
.de, .en { margin: 0; }
.w { display: inline; border-radius: .15em; transition: background .12s; cursor: pointer; }
.w.now { background: rgba(0,0,0,.09); }
.hideEn .text .en, .hideEn .list .en { visibility: hidden; }
.hint { position: absolute; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .4s; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.hint.show { opacity: 1; }
.hintKeep, .hintTurn { color: #5a5046; text-shadow: none; }
.entry { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .55em; cursor: pointer; }
.entry .de, .entry .en { opacity: 0; transform: translateY(.1em) scale(.97); transition: opacity .35s, transform .35s; }
.entry.on-de .de, .entry.on-en .en { opacity: 1; transform: none; }
.entry .en { color: var(--english); font-weight: 400; }
.entry .star { width: 1.05em; height: 1.05em; align-self: center; opacity: 0; transition: opacity .3s; margin-left: .1em; }
.entry.on-en .star { opacity: 1; }
.entry .star .pen { stroke-width: 2.4; }
.entry.saved .star .pen { fill: var(--gold); fill-opacity: .8; }
.tab { position: absolute; z-index: 5; font-weight: 700; display: flex; align-items: center; gap: .4em; border: 1.6px solid var(--pencil); background: #fff7d6;
box-shadow: -2px 3px 0 rgba(0,0,0,.08); filter: url(#rough); }
.tab.words .ico { width: 1.15em; height: 1.15em; }
.tab.set { background: #e9f0d8; }
.crumb { position: absolute; z-index: 5; display: flex; align-items: center; gap: .15em; color: var(--soft); font-weight: 500; }
.crumb .ico { width: 1.3em; height: 1.3em; }
.title { position: absolute; z-index: 4; color: #7a7066; white-space: nowrap; }
.pg { position: absolute; z-index: 5; transform: translateX(-50%); color: var(--soft); font-weight: 400; }
.navPrev, .navNext { position: absolute; z-index: 5; }
.navNext { right: 0; filter: drop-shadow(-2px -2px 3px rgba(0,0,0,.22)); }
#playMark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22%; aspect-ratio: 1; opacity: 0; transition: opacity .25s; pointer-events: none; }
#stage.paused #playMark { opacity: 1; }
#pauseMark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22%; aspect-ratio: 1; opacity: 0; transition: opacity .3s; pointer-events: none; }
#stage.hover:not(.paused) #pauseMark { opacity: 1; }
#pauseMark svg path, #pauseMark svg circle { stroke: #fff; fill: none; }
#playMark svg path, #playMark svg circle { stroke: #fff; }
.pic { cursor: pointer; }
/* portrait: the mobile page (the stage is 100cqw wide, 177.8cqw tall) */
#stage.portrait .book, #stage.portrait .headL, #stage.portrait .headR { display: none; }
#stage.portrait .crumb, #stage.portrait .title { top: 4.3cqw; height: 6cqw; display: flex; align-items: center; line-height: 1; }
#stage.portrait .crumb { left: 3.6cqw; font-size: 3.7cqw; }
#stage.portrait .title { right: 4cqw; left: auto; font-family: var(--hand); font-size: 4.3cqw; }
#stage.portrait .tab { top: 8.4cqh; font-size: 3.7cqw; padding: 1.6cqw 3cqw 1.6cqw 2.4cqw; }
#stage.portrait .tab.words { right: 0; border-radius: 4px 0 0 4px; transform: rotate(-1.2deg); }
#stage.portrait .tab.set { left: 0; border-radius: 0 4px 4px 0; padding-left: 3cqw; padding-right: 2.6cqw; transform: rotate(1deg); }
#stage.portrait .pic { position: absolute; left: 0; width: 100cqw; top: 15cqh; height: 29cqh; background: #ddd; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
#stage.portrait .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
#stage.portrait .hintPic { left: 0; right: 0; bottom: 1.2cqh; text-align: center; font-size: 4.3cqw; }
#stage.portrait .text { position: absolute; left: 0; right: 0; top: 47.5cqh; padding: 0 6cqw; text-align: center; }
#stage.portrait .text .de { font-weight: 700; font-size: 6.3cqw; line-height: 1.18; }
#stage.portrait .text .en { margin: 6.3cqw -6cqw 0; padding: 1.6cqw 6cqw; background: var(--band); color: var(--english); font-weight: 400; font-size: 5cqw; line-height: 1.25; }
#stage.portrait .list { position: absolute; left: 0; right: 0; top: 72cqh; padding: 0 9cqw; font-size: 5cqw; line-height: 1.4; text-align: center; }
#stage.portrait .entry .de { font-weight: 500; }
#stage.portrait .hintKeep { left: 0; right: 0; top: 86.6cqh; text-align: center; font-size: 4.2cqw; }
#stage.portrait .navPrev { left: 4cqw; bottom: 2.6cqh; width: 9.5cqw; height: 9.5cqw; }
#stage.portrait .pgL { left: 50%; bottom: 3.6cqh; font-size: 4.4cqw; }
#stage.portrait .pgR { display: none; }
#stage.portrait .navNext { bottom: 0; width: 20cqw; height: 20cqw; }
#stage.portrait .hintTurn { right: 3cqw; bottom: 20.5cqw; font-size: 4cqw; text-align: right; }
/* landscape: the open book (the stage is 100cqw wide, 56.25cqw tall) */
#stage.landscape .book { position: absolute; left: 3cqw; right: 3cqw; top: 3.5cqh; bottom: 4cqh; display: flex; box-shadow: 0 .8cqw 3cqw rgba(0,0,0,.5); }
#stage.landscape .leaf { flex: 1; background: var(--paper); }
#stage.landscape .leaf.left { border-radius: .4cqw 0 0 .4cqw; background: linear-gradient(90deg, #fff 70%, #ece8e1 100%); }
#stage.landscape .leaf.right { border-radius: 0 .4cqw .4cqw 0; background: linear-gradient(270deg, #fff 70%, #ece8e1 100%); }
#stage.landscape .spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 3cqw; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(60,50,40,.22) 50%, transparent); }
#stage.landscape .headL, #stage.landscape .crumb, #stage.landscape .title { top: 4.6cqw; height: 2.6cqw; display: flex; align-items: center; line-height: 1; }
#stage.landscape .headL { position: absolute; left: 26.5%; transform: translateX(-50%); font-weight: 900; font-size: 1.5cqw; letter-spacing: 0; color: #5a6b2e; }
#stage.landscape .headL > svg.ul { position: absolute; left: 0; right: 0; bottom: -.1cqw; width: 100%; height: .6cqw; overflow: visible; filter: url(#rough); opacity: .42; }
#stage.landscape .headL > svg.ul .pen { stroke-width: 1.8; }
#stage.landscape .headL { opacity: 1; }
#stage.landscape .headL > span { opacity: .42; }
#stage.landscape .headR { display: none; }
#stage.landscape .crumb { left: 5.6cqw; font-size: 1.5cqw; color: var(--soft); }
#stage.landscape .crumb .ico { width: 1.7em; height: 1.7em; margin-left: -.3em; }
#stage.landscape .title { left: 73.5%; transform: translateX(-50%); justify-content: center; font-family: var(--hand); font-size: 1.7cqw; color: #7a7066; }
#stage.landscape .tab { font-size: 1.15cqw; padding: .55cqw 1cqw .55cqw .8cqw; right: 3cqw; border-radius: 4px 0 0 4px; }
#stage.landscape .tab.words { top: 9cqh; transform: rotate(-1.2deg); }
#stage.landscape .tab.set { top: 17.5cqh; transform: rotate(1deg); }
#stage.landscape .pic { position: absolute; left: 52.86cqw; width: 40.4cqw; top: 29.8cqh; height: 40.4cqh; background: #ddd; }
#stage.landscape .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
#stage.landscape .hintPic { left: 0; right: 0; top: 1cqh; text-align: center; font-size: 1.5cqw; }
#stage.landscape .text { position: absolute; left: 8.6cqw; width: 37.5cqw; top: 29.8cqh; bottom: 29.8cqh; }
#stage.landscape .text .de { font-weight: 500; font-size: 2.708cqw; line-height: 1.18; }
#stage.landscape .text .en { position: absolute; left: -1.3cqw; right: -1.3cqw; bottom: 0; padding: 1.04cqw 1.3cqw; background: var(--band); color: var(--english); font-size: 2.167cqw; line-height: 1.25; }
#stage.landscape .list { position: absolute; left: 52.86cqw; width: 40.4cqw; bottom: 29.8cqh; min-height: 10.1cqh; padding: 1.2cqw 2cqw; display: flex; flex-direction: column; justify-content: center;
font-size: 1.733cqw; line-height: 1.4; text-align: center; background: rgba(255,255,255,.92); opacity: 0; transition: opacity .35s; }
#stage.landscape .list.show { opacity: 1; }
#stage.landscape .entry .de { font-weight: 500; }
#stage.landscape .hintKeep { left: 52.86cqw; width: 40.4cqw; top: 72.4cqh; text-align: center; font-size: 1.45cqw; }
#stage.landscape .navPrev { left: 4.4cqw; bottom: 6.2cqh; width: 2.8cqw; height: 2.8cqw; }
#stage.landscape .pg { bottom: 5.4cqh; font-size: 1.15cqw; }
#stage.landscape .pgL { left: 26.5%; }
#stage.landscape .pgR { left: 73.5%; }
#stage.landscape .navNext { right: 3cqw; bottom: 4cqh; width: 6cqw; height: 6cqw; }
#stage.landscape .hintTurn { right: 9.5cqw; bottom: 10cqh; font-size: 1.3cqw; text-align: right; }
/* all words */
#card { position: absolute; inset: 0; background: var(--paper); padding: 9cqh 7cqw 4cqh; overflow: auto; text-align: center; }
#card h2 { margin: 0 0 .8em; font-weight: 500; font-size: clamp(22px, 7cqw, 44px); }
#cardList { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; text-align: left; }
#cardList li, #savedList li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 1.5em; align-items: center; column-gap: .6em; padding: 9px 0; border-bottom: 1px dashed #d8d0c2; font-size: clamp(15px, 4cqw, 22px); cursor: pointer; }
#savedList li { font-size: clamp(16px, 4.4vw, 20px); }
#cardList .d, #savedList .d { font-weight: 500; text-align: right; overflow-wrap: anywhere; hyphens: auto; }
#cardList .e, #savedList .e { text-align: left; color: var(--english); overflow-wrap: anywhere; hyphens: auto; }
#cardList .s, #savedList .s { width: 1.2em; height: 1.2em; }
#cardList .s.on .pen, #savedList .s .pen { fill: var(--gold); fill-opacity: .8; }
#keepAll { margin: 18px auto 0; padding: 12px 26px; border: 1.8px solid var(--pencil); border-radius: 8px; background: var(--cover); color: #fff; font-weight: 700; font-size: 17px; filter: url(#rough); }
#stage.landscape #card { padding: 4% 8%; }
#stage.landscape #cardList { max-width: 560px; }
#stage.landscape #cardList li { padding: 5px 0; font-size: clamp(14px, 1.9cqw, 22px); }
/* sheets (settings, my words, go to page) */
.sheetWrap { position: absolute; inset: 0; z-index: 30; background: rgba(40,30,20,.38); display: flex; }
.sheet { background: #fffdf6; border: 1.8px solid var(--pencil); box-shadow: 5px 6px 0 rgba(0,0,0,.15); padding: 20px 22px 22px; color: var(--ink); filter: url(#rough); }
.sheet.pop { position: absolute; width: min(300px, 92vw); border-radius: 8px; }
.sheetWrap.pop { background: transparent; display: block; }
.sheet.bottom { align-self: flex-end; width: 100%; max-width: 560px; margin: 0 auto; max-height: 80dvh; overflow: auto; border-bottom: 0; border-radius: 18px 18px 0 0; }
.sheetWrap:has(.bottom) { justify-content: center; }
.sheetHead { font-size: 22px; margin-bottom: 4px; }
.sheet .lbl { font-size: 18px; margin: 12px 0 4px; }
.seg { display: flex; gap: 8px; margin-bottom: 8px; }
.seg button { padding: 6px 14px; border: 1.6px solid var(--pencil); border-radius: 20px; font-size: 17px; }
.seg button.on { background: var(--cover); color: #fff; font-weight: 700; }
.tick { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-size: 19px; text-align: left; width: 100%; }
.tick small { font-size: 14px; color: var(--soft); }
.tick .ico { width: 30px; height: 30px; flex: none; }
.tick .ico .check { display: none; stroke: #2f7d3c; stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tick.on .ico .check { display: block; }
.link { display: block; margin-top: 10px; font-size: 15px; color: var(--soft); text-decoration: underline; text-decoration-style: dashed; }
#savedList { list-style: none; margin: 8px 0 0; padding: 0; }
#savedEmpty { font-size: 18px; margin: 8px 0 0; }
#jumpGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; margin-top: 10px; }
#jumpGrid button { position: relative; height: 54px; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: var(--soft); }
#jumpGrid button.cur { color: var(--ink); } #jumpGrid button .ico { position: absolute; inset: 3px; opacity: 0; } #jumpGrid button.cur .ico { opacity: 1; }
#toast { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); background: #2e2822; color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; z-index: 40; }