/* Styles for Create: Art Studio, Coloring Book, scenes, and the story pages (Story Studio, Book Builder, Book Reader). */
.cr-scene { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: inherit; background: #9fdcff; container-type: inline-size; }
.cr-item { position: absolute; line-height: 0; pointer-events: none; }
.cr-item svg, .cr-item img { width: 100%; height: auto; display: block; }
.cr-scene.edit .cr-item { pointer-events: auto; cursor: grab; touch-action: none; border-radius: 10px; }
.cr-scene.edit .cr-item.sel, .cr-scene.edit .cr-item:focus-visible { outline: 3px dashed #ffcb3d; outline-offset: 3px; }
.cr-scene.mini { border-radius: 8px; }
.cr-studio { display: grid; grid-template-columns: minmax(180px, 250px) 1fr; gap: calc(14px * var(--k)); align-items: start; }
.cr-side { display: grid; gap: 12px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--kr); padding: 12px; }
.cr-tools { flex-wrap: wrap; }
.cr-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-colors .kswatch { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.cr-pick { position: relative; background: conic-gradient(#ef4a63, #ffcb3d, #2ec46d, #2f8fff, #b56bff, #ef4a63); cursor: pointer; font-size: 15px; overflow: hidden; }
.cr-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.cr-stage { padding: 0; overflow: hidden; background: #fff; }
.cr-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; background: #fff; }
.cr-canvas:focus-visible { outline: 4px solid var(--gold); outline-offset: -4px; }
.cr-colpage { display: block; width: 100%; height: auto; } .cr-colpage [data-r] { cursor: pointer; } .cr-colpage [data-r]:focus-visible { outline: none; stroke: #ff8a3d; stroke-width: 5; }
.cr-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.cr-gallery.big { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.cr-card { display: grid; gap: 6px; text-align: center; align-content: start; }
.cr-thumb { display: grid; gap: 6px; text-align: center; text-decoration: none; color: var(--text); background: var(--panel2); border: 2px solid var(--line); border-radius: 16px; padding: 8px; cursor: pointer; font: inherit; min-width: 0; }
.cr-thumb:hover { border-color: var(--c, var(--accent)); }
.cr-thumb img, .cr-thumb svg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #fff; display: block; }
.cr-thumb .e { font-size: 44px; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.cr-thumb b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.cr-stickers.who { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.cr-st { background: var(--panel2); border: 2px solid var(--line); border-radius: 14px; padding: 6px; cursor: pointer; aspect-ratio: 1; display: grid; place-items: center; color: var(--text); font: inherit; min-width: 0; }
.cr-stickers.who .cr-st { aspect-ratio: auto; } .cr-st small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cr-st:hover, .cr-st.on { border-color: var(--gold); } .cr-st svg, .cr-st img { width: 100%; height: auto; max-height: 90px; object-fit: contain; }
@media (max-width: 760px) { .cr-studio { grid-template-columns: 1fr; } .cr-side { order: 2; } }

/* ---- books */
.bk-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: calc(14px * var(--k)); }
/* a book on the shelf is a card of its own: the cover, what kind of book it is, and one line about it — never loose words on the page's background */
.bk-card { display: grid; gap: 8px; text-align: center; text-decoration: none; color: var(--text); align-content: start; padding: 10px 10px 12px; border-radius: var(--kr, 22px); background: var(--panel); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-stories) 30%, var(--line)), 0 4px 0 color-mix(in srgb, var(--c-stories) 24%, var(--line)); text-shadow: none; }
.bk-card > small { line-height: 1.35; }
.bk-cover { --bc: #2f8fff; display: block; background: var(--bc); border-radius: 8px 18px 18px 8px; padding: 10px 10px 10px 18px; box-shadow: inset 8px 0 0 rgba(0,0,0,.22), 0 6px 0 rgba(0,0,0,.3); text-decoration: none; color: #fff; }
.bk-cover .bk-art { border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.15); }
.bk-cover.plain .bk-art { aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 54px; }
.bk-title { padding: 8px 4px 2px; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.45); } .bk-title b { display: block; font-size: calc(16px * var(--k)); line-height: 1.2; } .bk-title small { opacity: .9; }
.bk-card:hover .bk-cover { transform: translateY(-3px); } .bk-cover { transition: transform .15s; }
.bk-reader { max-width: 900px; margin: 0 auto; }
.bk-page { background: #fffdf6; color: #23263a; border-radius: 20px; padding: calc(16px * var(--k)); box-shadow: 0 8px 0 rgba(0,0,0,.25); display: grid; gap: 12px; }
.bk-page.center { text-align: center; } .bk-page.center .muted { color: #5b6c8f; } .bk-page h2 { color: #23263a; }
.bk-front { max-width: 420px; margin: 0 auto; } .bk-front .bk-title b { font-size: calc(22px * var(--k)); }
.bk-pic { border-radius: 14px; overflow: hidden; max-width: min(100%, calc((calc(100 * var(--vh)) - 360px) * 1.333)); min-width: min(100%, 260px); margin: 0 auto; width: 100%; }
.bk-text { margin: 0; font-size: calc(19px * var(--k)); line-height: 1.55; text-align: center; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; } .bk-text.l { font-size: calc(24px * var(--k)); }
.bk-w { cursor: pointer; border-radius: 6px; } .bk-w:hover { background: #ffe9a8; }
.bk-page.turn { animation: bk-turn .35s ease; } .bk-page.turnb { animation: bk-turnb .35s ease; }
@keyframes bk-turn { from { opacity: 0; transform: translateX(40px) rotate(1deg); } } @keyframes bk-turnb { from { opacity: 0; transform: translateX(-40px) rotate(-1deg); } }
.bk-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; } .bk-count { font-weight: 700; }
.bk-opts { margin-top: 10px; gap: 10px; }
.bk-top { gap: 10px; margin-bottom: 10px; } .bk-name { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.bk-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 10px 14px; }
.bk-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 6px; }
.bk-th { flex: none; width: 104px; background: var(--panel2); border: 3px solid var(--line); border-radius: 12px; padding: 4px; cursor: pointer; color: var(--text); font: inherit; display: grid; gap: 2px; }
.bk-th.on { border-color: var(--gold); } .bk-th small { font-size: 11px; font-weight: 700; } .bk-th.add span { aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 30px; border: 2px dashed var(--line2); border-radius: 8px; }
.bk-ta { width: 100%; resize: vertical; font-size: calc(17px * var(--k)); line-height: 1.5; }
.bk-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bk-bgs button { aspect-ratio: 4 / 3; border: 3px solid var(--line); border-radius: 12px; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 4px; color: #fff; font: inherit; overflow: hidden; background-color: var(--panel2); }
.bk-bgs button:hover { border-color: var(--gold); } .bk-bgs small { background: rgba(0,0,0,.55); border-radius: 6px; padding: 1px 6px; font-size: 11px; max-width: 94%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-dice .krow b { font-size: calc(16px * var(--k)); }
@media (max-width: 600px) { .bk-bar .kbtn span { display: none; } .bk-shelf { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.cr-stage { max-width: max(280px, calc((calc(100 * var(--vh)) - 250px) * 1.333)); margin: 0 auto; width: 100%; }
.bk-turns { display: grid; gap: 8px; margin: 10px 0; } .bk-turns p { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--panel2); line-height: 1.5; } .bk-turns p.me { border-left: 5px solid var(--c-stories, #b56bff); } .bk-turns p.buddy { border-left: 5px solid var(--gold); }