/* Comic Book Maker. */

@font-face{font-family:'Patrick Hand';src:url('../fonts/PatrickHand-Regular.woff2') format('woff2');font-display:swap}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- step tabs ---------- */
.ctabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:14px 16px 0}
.ctabs button{border:2px solid var(--line);background:var(--card);color:var(--ink-soft);font-family:'Bree Serif',serif;font-size:15px;padding:8px 18px;border-radius:24px;cursor:pointer}
.ctabs button:hover{border-color:var(--gold);color:var(--ink)}
.ctabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}

.studio.comic{max-width:1280px}
.studio.comic > *{min-width:0}   /* lets the page strip scroll instead of widening the column */
@media(min-width:900px){.studio.comic{grid-template-columns:minmax(0,1fr) 380px}}

/* ---------- the page ---------- */
.pagewrap{width:100%;max-width:620px;aspect-ratio:1000/1414;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:3px 4px 0 #E7DDC6;border:2px solid var(--line);background:#fff}
.pagewrap[hidden],.charwrap[hidden],.strip[hidden]{display:none}
.pagewrap svg{display:block;width:100%;height:100%}
.pagewrap.drawing{cursor:crosshair}
.charwrap{width:100%;max-width:420px;aspect-ratio:100/170;background:#fff;border:2px solid var(--line);border-radius:12px;padding:20px}
.charwrap svg{width:100%;height:100%}

/* ---------- page strip ---------- */
.strip{display:flex;gap:8px;overflow-x:auto;width:100%;padding:4px 2px 8px;scrollbar-width:thin}
.thumb{flex:none;width:74px;border:2px solid var(--line);border-radius:6px;background:#fff;padding:0;cursor:pointer;position:relative}
.thumb svg{display:block;width:100%;height:auto;pointer-events:none}
.thumb.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--gold)}
.thumb span{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:11px;font-weight:800;color:var(--ink-soft);background:rgba(255,255,255,.85)}
.thumb.add{display:grid;place-items:center;font-size:26px;color:var(--ink-soft);aspect-ratio:1000/1414}

/* ---------- side panel ---------- */
.side h2{font-family:'Bree Serif',serif;font-size:18px;font-weight:400;margin-bottom:6px}
.side h3{font-family:'Bree Serif',serif;font-size:15px;font-weight:400;margin:12px 0 6px;color:var(--ink-soft)}
.side hr{border:none;border-top:2px dashed var(--line);margin:16px 0}
.side section[hidden]{display:none}
.help,.fine,.status,.note{font-size:13px;font-weight:700;color:var(--ink-soft)}
.fine{color:var(--muted);font-size:12px;margin-top:8px}
.status{color:var(--gold-deep);min-height:1em;margin-top:6px}
.status.bad{color:var(--pop)}
.note{background:#FBF0DA;border:1px solid #EFD9AC;border-radius:12px;padding:9px 12px;margin-bottom:8px}
.field{width:100%;border:2px solid var(--line);border-radius:12px;padding:9px 12px;font-size:15px;font-weight:700;color:var(--ink);resize:vertical;margin:6px 0 10px;outline:none;font-family:inherit;background:#fff}
.field:focus{border-color:var(--gold)}
textarea.hand{font-family:'Patrick Hand','Comic Sans MS',cursive;font-size:19px;font-weight:400}

.helper{background:#F3F0FF;border:2px solid #DCD3FA;border-radius:14px;padding:10px 12px;margin:8px 0 10px}
.helper .field{margin:6px 0 8px;font-size:14px}
.helper .chip{background:#8A55C9;border-color:#8A55C9;color:#fff}
.helper .chip:hover{background:#6E3FAE;border-color:#6E3FAE;color:#fff}
.helper .chip:disabled{opacity:.6;cursor:wait}
.helper .status{margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.chip{border:2px solid var(--line);background:#fff;color:var(--ink-soft);font-weight:800;font-size:12.5px;padding:5px 11px;border-radius:16px;cursor:pointer}
.chip:hover{border-color:var(--gold);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.add{border-style:dashed}
.chip.danger{color:var(--pop);border-color:#F3B7AE}

.swatches{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.sw.on{box-shadow:0 0 0 3px var(--ink)}
.sw.white{background-image:linear-gradient(45deg,#fff 45%,#D8452F 45% 55%,#fff 55%)}

.savegrid{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.savegrid .btn{font-size:15px;padding:10px 18px}
label.btn{display:inline-block}
.btn.danger{color:var(--pop);border-color:#F3B7AE}
.btn:disabled{opacity:.5;cursor:wait}

/* ---------- printing: the whole book, one page per sheet ---------- */
#printbook{display:none}
@media print{
  body > *:not(#printbook){display:none !important}
  #printbook{display:block}
  @page{size:A4 portrait;margin:0}
  .ppage{width:210mm;height:297mm;page-break-after:always;break-after:page}
  .ppage:last-child{page-break-after:auto;break-after:auto}
  .ppage svg{width:100%;height:100%}
}

/* ---------- Read my book ---------- */
.readbtn{border:3px solid var(--ink);background:var(--gold);color:var(--ink);font-family:'Bree Serif',serif;font-size:15px;padding:7px 18px;border-radius:24px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.readbtn:hover{background:var(--gold-deep);color:#fff}
.reader{position:fixed;inset:0;z-index:100;background:#2B2540;display:flex;flex-direction:column;color:#fff}
.reader[hidden]{display:none}
.reader-top{display:flex;align-items:center;gap:10px;padding:10px 16px}
.reader-top strong{flex:1;font-family:'Bree Serif',serif;font-weight:400;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbtn{border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;font-weight:800;font-size:14px;padding:8px 14px;border-radius:22px;cursor:pointer}
.rbtn:hover{background:rgba(255,255,255,.25)}
.reader-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 10px;perspective:1600px}
.reader-page{height:100%;max-height:calc(100vh - 120px);aspect-ratio:1000/1414;max-width:calc(100vw - 120px);background:#fff;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.45);transform-origin:left center}
.reader-page svg{display:block;width:100%;height:100%}
.reader-page.turn-next{animation:turnNext .45s ease-out}
.reader-page.turn-prev{animation:turnPrev .45s ease-out}
@keyframes turnNext{from{transform:rotateY(-70deg);opacity:.3}to{transform:none;opacity:1}}
@keyframes turnPrev{from{transform:rotateY(70deg);opacity:.3;transform-origin:right center}to{transform:none;opacity:1}}
.rarrow{flex:none;width:52px;height:52px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:34px;line-height:1;cursor:pointer}
.rarrow:hover{background:rgba(255,255,255,.3)}
.rarrow:disabled{opacity:.2;cursor:default}
.reader-foot{text-align:center;padding:8px;font-weight:800;opacity:.8}
@media(max-width:640px){.rarrow{position:absolute;bottom:14px;width:46px;height:46px}#rprev{left:14px}#rnext{right:14px}.reader-page{max-width:calc(100vw - 20px)}}

/* ---------- roll a story ---------- */
.dicebox{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.dicebox .chip{align-self:flex-start;background:#FFE7B8;border-color:#EFD9AC;color:var(--ink)}
.dice{display:flex;flex-wrap:wrap;gap:5px}
.dice span{font-size:12.5px;font-weight:800;background:#fff;border:2px dashed var(--line);border-radius:10px;padding:3px 8px;color:var(--muted)}
.dice span.landed{border-style:solid;border-color:var(--gold);color:var(--ink);animation:land .3s ease-out}
@keyframes land{from{transform:scale(1.25)}to{transform:none}}

/* ---------- your drawings ---------- */
.thumbchip{padding:2px 4px;background:repeating-conic-gradient(#F0EBDD 0% 25%,#fff 0% 50%) 50%/10px 10px}
.thumbchip img{display:block;height:34px;width:auto;max-width:70px}

/* ---------- the buddy ---------- */
.buddy{position:fixed;left:14px;bottom:14px;z-index:40;display:flex;align-items:flex-end;gap:8px;max-width:min(360px,calc(100vw - 28px))}
.buddy-face{flex:none;width:64px;height:64px;border-radius:50%;border:none;background:none;cursor:pointer;padding:0;animation:bob 3s ease-in-out infinite}
.buddy-face svg{width:100%;height:100%;filter:drop-shadow(0 3px 0 rgba(29,36,51,.25))}
@keyframes bob{50%{transform:translateY(-4px)}}
.buddy-talk{display:none;background:#fff;border:3px solid var(--ink);border-radius:18px 18px 18px 4px;padding:10px 12px;box-shadow:0 4px 0 var(--ink);font-weight:700;font-size:14px;color:var(--ink)}
.buddy.talking .buddy-talk{display:block;animation:pop .2s ease-out}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.buddy-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.buddy-acts .chip{font-size:12px;padding:4px 10px}
@media print{.buddy,.reader{display:none !important}}

/* ---------- the bar above the page ---------- */
.editbar{display:flex;align-items:center;gap:6px;width:100%;max-width:620px}
.editbar .chip:disabled{opacity:.4;cursor:default}
.savedtag{margin-left:auto;font-size:12px;font-weight:800;color:var(--good)}
.savedtag.bad{color:var(--pop)}

/* ---------- pictures to choose from ---------- */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin-bottom:8px}
.picks.tall{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
.picks.places{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.picks.layouts{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
.pick{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--line);background:#fff;border-radius:12px;padding:4px 3px 3px;cursor:pointer;min-width:0}
.pick:hover{border-color:var(--gold)}
.pick.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--gold) inset;background:#FFF8E8}
.pick .pic{display:block;width:100%;aspect-ratio:1/1}
.picks.tall .pic{aspect-ratio:3/4}
.picks.places .pic{aspect-ratio:16/10}
.picks.layouts .pic{aspect-ratio:60/84}
.pick .pic svg{display:block;width:100%;height:100%}
.pick .lbl{font-size:10.5px;font-weight:800;color:var(--ink-soft);line-height:1.15;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.chip.big{font-size:14px;padding:9px 16px;background:#E8F4FF;border-color:#BBD9F5;color:var(--ink)}

/* ---------- the cast as faces ---------- */
#castlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin-bottom:10px}
.castpick{display:flex;flex-direction:column;align-items:center;border:2px solid var(--line);background:#fff;border-radius:12px;padding:4px;cursor:pointer}
.castpick svg{width:100%;aspect-ratio:1/1}
.castpick span{font-size:11px;font-weight:800;color:var(--ink-soft);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.castpick.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--gold) inset}
.castpick.add{border-style:dashed;justify-content:center}
.castpick.add b{font-size:28px;line-height:1.3;color:var(--ink-soft)}

/* ---------- sections that fold ---------- */
.sec{border-top:2px dashed var(--line);padding:2px 0}
.sec:first-child{border-top:none}
.sec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-family:'Bree Serif',serif;font-size:16px;padding:9px 2px;color:var(--ink)}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::after{content:'+';margin-left:auto;font-family:'Nunito',sans-serif;font-weight:800;font-size:18px;color:var(--muted)}
.sec[open]>summary::after{content:'\2212'}
.sec-body{padding-bottom:10px}
.selhead{display:flex;align-items:center;gap:8px}
.selhead svg,.selhead .mini svg{width:40px;height:40px}
.row2{display:flex;gap:6px;align-items:center}
.row2 .field{flex:1;margin:4px 0}

/* ---------- typing straight into a bubble ---------- */
.bubbleedit{position:absolute;z-index:60;font-family:'Patrick Hand','Comic Sans MS',cursive;font-size:18px;line-height:1.25;padding:8px 10px;border:3px solid var(--gold);border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.18);resize:none;outline:none;text-align:center}

/* ---------- dragging pages ---------- */
.thumb{touch-action:pan-x}
.thumb.dragging{opacity:.45}
.thumb.dropbefore{box-shadow:-5px 0 0 var(--gold)}
.thumb.dropafter{box-shadow:5px 0 0 var(--gold)}
.chapmark{position:absolute;top:2px;left:2px;font-style:normal;font-size:9.5px;font-weight:800;background:var(--ink);color:#fff;border-radius:6px;padding:0 4px}

/* ---------- computers: the page stays in view while the options scroll ---------- */
.sheethandle{display:none}
@media(min-width:900px){
  .studio.comic{align-items:start}
  .studio.comic .stage{position:sticky;top:10px}
  .studio.comic .pagewrap{max-width:min(620px, calc((100vh - 200px) * 1000 / 1414))}
  .studio.comic .side{position:sticky;top:10px;max-height:calc(100vh - 20px);overflow-y:auto;overscroll-behavior:contain}
}

/* ---------- phones and tablets: the options slide up from the bottom ---------- */
@media(max-width:899px){
  .studio.comic{padding-bottom:50vh}
  .studio.comic .side{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:46vh;overflow-y:auto;overscroll-behavior:contain;
    border-radius:20px 20px 0 0;border:2px solid var(--line);border-bottom:none;box-shadow:0 -8px 24px rgba(29,36,51,.15);padding-top:0;transition:transform .25s ease}
  .studio.comic .side.tucked{transform:translateY(calc(100% - 46px))}
  .studio.comic.tucked{padding-bottom:60px}
  .sheethandle{display:flex;flex-direction:column;align-items:center;gap:3px;position:sticky;top:0;z-index:2;width:calc(100% + 32px);margin:0 -16px 6px;padding:8px 0 6px;border:none;background:#fff;font-weight:800;font-size:12px;color:var(--muted);cursor:pointer;border-bottom:2px solid var(--line)}
  .sheethandle span{width:44px;height:5px;border-radius:3px;background:var(--line)}
  .buddy{bottom:auto;top:8px;left:auto;right:8px;flex-direction:row-reverse}
  .buddy-face{width:48px;height:48px}
  .buddy-talk{border-radius:18px 4px 18px 18px}
}