/* Printed-comic edition: real inked illustrations, generous lettering, paper and ink. */
:root{--desk:#101e32;--paper:#f6edd8;--white:#fff9e9;--ink:#18202a;--red:#ed4938;--yellow:#ffcf3d;--mist:#b5c4d7}
body{background-color:var(--desk);background-image:radial-gradient(#ffffff0b 1px,transparent 1px);background-size:7px 7px;padding:0 32px 48px}
#app{max-width:1200px}
.masthead{display:flex;align-items:center;gap:24px;padding:26px 0 23px;border-bottom:1px solid #ffffff2b;margin-bottom:44px}
.brand{display:flex;align-items:center;gap:12px;color:var(--white);text-decoration:none;font-family:var(--f-logo);font-size:27px;line-height:1}
.brand-heart{display:grid;place-items:center;width:38px;height:38px;background:var(--red);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--yellow);color:var(--white);font-size:23px;transform:rotate(-7deg)}
.edition-label{margin-inline-start:auto;font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--mist)}
.masthead-star{color:var(--yellow);font-size:24px}
.cover{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px 64px;align-items:center}
#coverBook{padding:0 10px 12px;transform:rotate(calc(var(--dir) * -1.5deg));transition:transform .3s}
#coverBook:hover{transform:rotate(0)}
.book{border:3px solid #111b25;box-shadow:8px 8px 0 #f6edd8,11px 11px 0 #152235,18px 20px 0 #0005;overflow:hidden}
.cover-art{aspect-ratio:2/3}
.cover-image{display:block;width:100%;height:100%;object-fit:cover}
.cover-art::after{background:none}
.trade{position:absolute;inset:12px 12px auto;z-index:2;border:0;gap:10px;align-items:flex-start;direction:ltr}
.cornerbox{width:42px;padding:7px 4px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:var(--white);margin-top:4px}
.cornerbox .no{font-size:9px}.cornerbox b{font-size:30px}.cornerbox .pr{font-size:8px;max-width:42px}
.logo-wrap{background:none;padding:0 5px 15px;text-align:center;direction:inherit}
.logo-wrap .pre{font-size:clamp(10px,1.2vw,14px);color:var(--white);text-shadow:1px 1px 0 var(--ink),-1px -1px 0 var(--ink)}
.logo{font-size:clamp(46px,6.5vw,84px);line-height:1.05;white-space:nowrap;margin-top:8px;text-shadow:3px 3px 0 var(--red),5px 5px 0 var(--ink);-webkit-text-stroke:3px var(--ink);transform:skew(-6deg) rotate(-3deg)}
#app[lang=en] .logo{font-size:clamp(40px,6vw,78px);letter-spacing:.015em}
.blurb{top:auto;bottom:18px;inset-inline-start:16px;max-width:53%;background:var(--yellow);padding:10px 12px;font-size:clamp(11px,1.35vw,16px);transform:rotate(-3deg);box-shadow:3px 3px 0 var(--ink)}
.seal{bottom:18px;inset-inline-end:14px;transform:rotate(3deg);font-size:8px;max-width:26%}.seal b{font-size:12px}
.book-footer{display:flex;justify-content:space-between;gap:10px;padding:9px 15px;border-top:3px solid var(--ink);background:var(--red);color:var(--white);font-family:var(--f-let);font-weight:700;font-size:12px}
.side{gap:20px}.eyebrow{display:inline-block;background:var(--yellow);color:var(--ink);padding:5px 10px;margin-bottom:15px;font-size:10px;font-weight:700;letter-spacing:.11em;transform:rotate(calc(var(--dir) * -2deg));box-shadow:3px 3px 0 var(--red)}
.side h2{font-size:clamp(36px,4.6vw,60px);line-height:1.12;color:var(--white);text-shadow:none;margin-bottom:14px;max-width:12ch}
#app[lang=en] .side h2{font-size:clamp(40px,5vw,68px);letter-spacing:.02em;max-width:15ch}
.side p{font-size:14px;line-height:1.7;color:#c2cbd7;max-width:48ch}
.settings{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 #0005;padding:21px;gap:17px;display:grid;grid-template-columns:1.2fr 1fr}
.settings .field:first-child,.settings .field:last-child{grid-column:1/-1}
.field>label,.field>.lbl{font-size:11px;letter-spacing:.025em;color:#364456}
.field input{font-size:17px;padding:8px 11px;border:2px solid var(--ink);height:42px;background:#fffdf6}
.seg{gap:5px}.seg button{font-size:13px;padding:7px 12px;background:transparent;color:var(--ink);border:1px solid #b7b0a0;line-height:1.4}
.seg button:hover{background:#ffdc70}.seg button[aria-pressed=true]{background:var(--ink);color:var(--white);border-color:var(--ink);box-shadow:2px 2px 0 var(--red)}
.seg.cond{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.seg.cond button{padding:8px;min-width:0}.seg.cond button b{font-size:14px}.seg.cond button small{font-size:10px;line-height:1.4}
.actions{gap:14px}.start{font-size:25px;padding:12px 22px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--red)}.start.alt{font-family:var(--f-ui);font-weight:600;font-size:12px;background:none;border:0;color:var(--white);box-shadow:none;padding:12px 0;text-decoration:underline;text-underline-offset:5px}
.side p.small{font-size:10px;color:#96a7bc;margin-top:-8px}
.chapters{grid-column:1/-1;padding-top:25px;border-top:1px solid #ffffff2b;margin-top:12px}
.chapter-heading{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-bottom:22px}.chapter-heading h2{font-family:var(--f-logo);font-weight:400;font-size:27px;margin:0}.chapter-heading>span{font-size:11px;color:var(--mist)}
.toc{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.toc button{border:2px solid var(--ink);box-shadow:4px 4px 0 #0007}.toc .th{aspect-ratio:1.5;border-bottom:2px solid var(--ink)}.toc .th img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%;transition:transform .3s}.toc button:hover img{transform:scale(1.04)}
.toc .tx{padding:13px 14px 17px;gap:6px}.toc .no{font-size:10px}.toc .nm{font-size:25px}.toc .ds{font-size:11px;line-height:1.6}
.reader{max-width:980px;margin:auto}.reader .bar{padding:12px 0;background:var(--desk)}.chip{border:1px solid #ffffff30;font-size:12px}.where b{font-size:23px}.where span{font-size:10px}
.page{border:2px solid var(--ink);padding:22px;background:var(--paper);box-shadow:8px 8px 0 #0005}.banner{margin-bottom:22px}.grid{gap:15px;align-items:stretch}.panel{border:2px solid var(--ink);background:var(--white);overflow:hidden}.frame{border:0;aspect-ratio:1!important;container-type:inline-size}.frame::after{background:none}.mirror .frame svg.art{transform:none}.frame .art{filter:none}
.panel.s6{display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch}.panel.s6>.frame{border-inline-end:2px solid var(--ink)}.panel-copy{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px;min-width:0;container-type:inline-size}.panel-copy:empty{display:none}
.panel-copy .cap,.panel-copy .bub{position:relative!important;inset:auto!important;max-width:100%!important;box-sizing:border-box;font-size:14px!important;line-height:1.45!important}.panel-copy .cap{border:0;border-inline-start:4px solid var(--ink);padding:8px 10px;background:var(--yellow)}.panel-copy .bub{border:2px solid var(--ink);border-radius:35% / 20%;padding:12px 15px;margin-bottom:10px;background:#fffdf5}.panel-copy .bub::after{background:#fffdf5}.panel-copy .after{display:none}.done .panel-copy .after{display:block;opacity:1}
.s2 .panel-copy{padding:10px}.s2 .panel-copy .bub,.s2 .panel-copy .cap{font-size:12px!important}.panel .hud{grid-column:1/-1;border:0;border-top:2px solid var(--ink)}.sfx{font-size:calc(clamp(22px,8cqw,54px)*var(--z,1))!important}.ttl{max-width:90%;top:3%;right:5%}.ttl b{font-size:clamp(24px,11cqw,60px)}.ttl small{font-size:13px}
.art-hit{cursor:pointer;stroke:transparent;stroke-width:3}g[data-tap]:hover .art-hit,g[data-tap]:focus .art-hit{stroke:var(--yellow);fill:#ffcf3d33}g[data-tap].hinted .art-hit,g[data-tap].found .art-hit{stroke:var(--yellow);fill:#ffcf3d44}.frame svg.art [data-tap]:focus{outline:none}
.pager{padding:8px 0}.dot{min-height:14px;width:19px}.nav{font-size:21px}.keys{padding-bottom:16px}
:focus-visible{outline:3px solid #ef9b10;outline-offset:4px}
@media(max-width:900px){body{padding-inline:22px}.cover{gap:30px}.side h2{font-size:38px}.settings{padding:15px}.toc{gap:12px}.toc .nm{font-size:21px}.start{font-size:21px;padding:10px 15px}.edition-label{font-size:9px}}
@media(max-width:700px){body{padding-inline:16px}.masthead{padding-block:20px;margin-bottom:30px;gap:15px}.brand{font-size:23px}.edition-label{font-size:8px;letter-spacing:0;max-width:135px;line-height:1.6}.masthead-star{display:none}.cover{grid-template-columns:1fr;gap:32px}#coverBook{width:min(85%,400px);margin:auto;padding:0 0 10px}.logo{font-size:clamp(40px,12vw,76px)}#app[lang=en] .logo{font-size:clamp(38px,11vw,74px)}.logo-wrap .pre{font-size:10px}.side{gap:18px}.side h2{font-size:42px;max-width:none}.side p{font-size:13px}.settings{padding:19px}.chapter-heading{display:block}.chapter-heading h2{font-size:26px;margin-bottom:6px}.toc{grid-template-columns:1fr 1fr;gap:14px}.toc .tx{padding:12px}.toc .nm{font-size:23px}.page{padding:11px}.bar{gap:7px}.where{order:3;flex-basis:100%;padding-top:6px}.chip{font-size:10px;padding:6px 8px}.grid{gap:15px}.panel.s6{display:flex}.panel.s6>.frame{border-inline-end:0}.frame{border-bottom:2px solid var(--ink)!important}.panel-copy{padding:15px}.panel-copy .bub,.panel-copy .cap{font-size:14px!important}.nav{min-width:70px;font-size:18px;padding:8px}.dots{gap:5px}.dot{width:12px}.blurb{font-size:12px}.book-footer{font-size:10px}.cornerbox{width:35px}.cornerbox .pr{font-size:7px}.cornerbox b{font-size:23px}}
@media print{
 body{padding:0!important}.masthead{display:none!important}.book{box-shadow:none!important}.pcover .book{height:auto;max-height:275mm;width:178mm;margin:auto}.pcover .cover-art{aspect-ratio:2/3;flex:none}.pcover .logo{font-size:76px}.pcover .blurb{font-size:16px}.psheet .page{padding:3mm}.psheet .grid{gap:2.5mm}.panel{border-width:1.5px}.frame{border-width:1px}.panel.s6{display:grid;grid-template-columns:1.15fr 1fr}.panel-copy{padding:2.5mm;gap:2mm}.panel-copy .cap,.panel-copy .bub{font-size:10px!important;line-height:1.25!important;padding:5px 8px}.panel-copy .bub{margin-bottom:5px}.panel-copy .after{display:block!important;opacity:1;visibility:visible}.banner{margin-bottom:3mm}.stitle h2{font-size:34px}.stitle p{font-size:11px}.roundel{width:45px;height:45px}.sfx{font-size:32px!important}.book-footer{font-size:12px}.psheet .frame svg.art{transform:none!important}
}

/* Tails are drawn toward the actual speaker after text and responsive layout settle. */
.panel-copy .bub{border-radius:18px;padding:13px 16px;margin:12px 0;overflow:visible}
.panel-copy .bub::before,.panel-copy .bub::after{display:none!important}
.bubble-tail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:block}
.panel-copy{gap:18px;padding:22px}
@media print{.panel-copy{padding:3mm;gap:3mm}.panel-copy .bub{margin:3mm 0;border-radius:12px}}

/* Place simultaneous replies side by side, in the same physical order as the speakers. */
.panel:not(.s6) .panel-copy{flex-direction:row;flex-wrap:wrap;direction:ltr;align-content:flex-start;align-items:flex-start;gap:18px}
.panel:not(.s6) .panel-copy .bub{flex:1 1 0;min-width:0;order:var(--speaker-order)}
.panel:not(.s6) .panel-copy .cap{flex-basis:100%;order:100;direction:rtl}
#app[lang=en] .panel:not(.s6) .panel-copy .cap{direction:ltr}
@media screen and (max-width:700px){
 .panel.s6 .panel-copy{flex-direction:row;flex-wrap:wrap;direction:ltr;align-items:flex-start;gap:18px}
 .panel.s6 .panel-copy .bub{flex:1 1 0;min-width:0;order:var(--speaker-order)}
 .panel.s6 .panel-copy .cap{flex-basis:100%;order:100;direction:rtl}
 #app[lang=en] .panel.s6 .panel-copy .cap{direction:ltr}
}