/* Short Shoremen comics (Big Kids 9-12). System fonts only. */
.agetag{display:inline-block;background:#ff7a6b;color:#0f1640;font-weight:900;border-radius:999px;padding:6px 14px;font-size:1rem}
h2.sec.comics{background:#ffb86b}
.comic-cards .card .ico{background:#fff}
.comic-cards .card .ico img{width:100%;height:100%;object-fit:cover}
.comic-cards .card p{margin:0;font-size:1rem;opacity:.85}
.hero-sheet{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:20px;align-items:start;background:var(--cream);color:var(--ink);border-radius:var(--radius);padding:18px;box-shadow:0 8px 0 rgba(0,0,0,.22);margin-top:10px}
.hero-sheet img{width:100%;height:auto;border-radius:16px;border:4px solid #0f1640}
.hero-sheet h3{margin:.1em 0 .3em;font-size:1.8rem}
.hero-sheet dl{margin:0}.hero-sheet dt{font-weight:900;margin-top:.6em;color:#1f3fa8}.hero-sheet dd{margin:.1em 0 0}
.hero-sheet .catch{display:inline-block;background:#ffd54a;border:3px solid #0f1640;border-radius:14px;padding:6px 14px;font-weight:900;font-size:1.25rem;transform:rotate(-2deg);margin-top:4px}
/* reader */
.comic-head{text-align:center;margin:6px 0 12px}
.comic-head h1{margin:6px 0 2px;font-size:clamp(1.8rem,6vw,2.8rem);line-height:1.05}
.comic-head p{margin:0;opacity:.9}
.stage{max-width:820px;margin:0 auto}
.panel{margin:0 0 22px;background:#fff;color:#0f1640;border:5px solid #0f1640;border-radius:18px;overflow:hidden;box-shadow:0 8px 0 rgba(0,0,0,.3)}
.panel .cap{background:#ffd54a;border-bottom:4px solid #0f1640;padding:10px 14px;font-weight:800;font-size:1.08rem;line-height:1.3}
.panel .art{position:relative;background:#0c1240}
.panel .art img{display:block;width:100%;height:auto;aspect-ratio:4/3}
.panel .sfx{position:absolute;right:4%;top:6%;font-weight:900;font-size:clamp(1.6rem,7vw,3rem);color:#ffd54a;-webkit-text-stroke:2px #0f1640;text-shadow:4px 4px 0 #ff7a6b;transform:rotate(-8deg);letter-spacing:1px;pointer-events:none}
.panel .num{position:absolute;left:8px;top:8px;background:#0f1640;color:#fff;font-weight:900;border-radius:999px;padding:2px 10px;font-size:.9rem}
.talk{padding:10px 12px 14px;display:flex;flex-direction:column;gap:10px}
.say{margin:0;position:relative;background:#fff;border:3px solid #0f1640;border-radius:20px;padding:8px 14px;font-size:1.12rem;line-height:1.3;max-width:92%}
.say b{display:block;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;color:#1f3fa8}
.say::before{content:"";position:absolute;top:-12px;left:22px;border:10px solid transparent;border-bottom-color:#0f1640;border-top:0}
.say.r{align-self:flex-end}.say.r::before{left:auto;right:22px}
.say.shout{font-weight:900;background:#fff4c2}
.say.radio{border-style:dashed}
.say.robot{font-family:ui-monospace,Menlo,Consolas,monospace;background:#e6f7ff}
.endcard{background:var(--cream);color:var(--ink);text-align:center;padding:20px}
.endcard h2{margin:.2em 0;color:#0f1640}
.tip{background:#c9f2d3;border:3px dashed #0f1640;border-radius:16px;padding:12px 14px;font-weight:800;font-size:1.12rem;margin:10px 0 14px}
.more{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.more .btn{min-height:54px;font-size:1.05rem;padding:0 18px}
.note{font-size:.95rem;opacity:.75;margin:8px 0 0}
.ctlbar{display:none}
/* reader mode (JS on): one panel at a time */
.reader .panel{display:none;margin-bottom:12px}
.reader .panel.on{display:block;animation:pin .25s ease}
@keyframes pin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.reader .ctlbar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;bottom:10px;z-index:5;background:rgba(15,22,64,.85);padding:10px;border-radius:999px;max-width:820px;margin:0 auto}
.ctlbar .btn{min-height:60px;font-size:1.2rem;padding:0 20px}
.ctlbar .btn[disabled]{opacity:.4}
.ctlbar .count{font-weight:900;font-size:1.1rem;white-space:nowrap}
.modebtn{background:transparent;color:var(--cream);border:2px solid rgba(255,250,240,.5);border-radius:999px;font:inherit;font-weight:800;padding:8px 16px;cursor:pointer;min-height:44px;margin-top:8px}
@media (max-width:760px){.hero-sheet{grid-template-columns:1fr}.reader .ctlbar{padding:6px;bottom:6px}.ctlbar .btn{min-height:52px;padding:0 14px;font-size:1.05rem}.panel .cap{font-size:1rem;padding:8px 12px}.talk{gap:8px;padding:8px 10px 12px}.reader .stage{padding-bottom:4px}.say{font-size:1.05rem}}