/* fonts built into the file, so it looks identical on any device, online or not */
@font-face{font-family:CBrushE;font-weight:400;font-style:normal;font-display:block;src:url(assets/fonts/CBrushE-400.woff2) format('woff2');}
@font-face{font-family:KalamE;font-weight:300;font-style:normal;font-display:block;src:url(assets/fonts/KalamE-300.woff2) format('woff2');}
@font-face{font-family:KalamE;font-weight:400;font-style:normal;font-display:block;src:url(assets/fonts/KalamE-400.woff2) format('woff2');}
@font-face{font-family:KalamE;font-weight:700;font-style:normal;font-display:block;src:url(assets/fonts/KalamE-700.woff2) format('woff2');}


:root{
  --paste:#f6efe2; --paste-soft:rgba(246,239,226,.8); --back:rgba(42,18,6,.62); --night:#27327c;
  color-scheme:light dark; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--night:#1f2866;}}
:root[data-theme="dark"]{--night:#1f2866;}
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{background:var(--night);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:KalamE,Kalam,"Comic Sans MS",cursive;color:var(--paste);}
canvas{position:fixed;inset:0;display:block;}
.panel{background:var(--back);border:2px solid var(--paste);outline:1.5px dashed rgba(246,239,226,.55);outline-offset:-7px;border-radius:18px;}
.cap{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 62px);transform:translate(-50%,8px);width:min(92vw,560px);padding:12px 20px 10px;opacity:0;transition:opacity .5s,transform .5s;pointer-events:none;display:flex;gap:12px;align-items:center;}
.cap.on{opacity:1;transform:translate(-50%,0);}
.cap .who{font-size:clamp(16px,2.2vw,18px);font-weight:700;color:#ffd98a;letter-spacing:.02em;margin-bottom:2px;}
.cap .say{font-size:clamp(17px,2.6vw,21px);line-height:1.35;}
.cap canvas{position:static;width:48px;height:48px;flex:none;border-radius:50%;border:2px solid var(--paste);background:#27327c;}
.hud{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);left:50%;transform:translateX(-50%);display:flex;flex-direction:row;gap:6px;align-items:center;justify-content:center;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .6s;z-index:4;}
.hud.on{opacity:1;}
.hud #hCh{display:none;}
.hud .coins{display:none;align-items:center;gap:6px;font-size:17px;font-weight:700;background:var(--back);border:1.5px solid var(--paste-soft);border-radius:999px;padding:2px 12px 0 8px;}
.hud .coins.on{display:flex;}
.hud .coins i{width:12px;height:12px;border-radius:50%;background:#ffd98a;box-shadow:inset 0 0 0 2px #b8862e;}
.hud{opacity:1 !important;}
.hud:not(.live) .coins{display:none !important;}
.cap .stamp{display:none !important;}
.cap .stamp.two{font-size:17px;letter-spacing:-.5px;}
.cap .stamp.off{display:none;}
.cap.thought{border-style:dashed;}
.cap.thought .say{font-style:italic;color:#e6dccb;}
.cap.thought .stamp{border-style:dashed;border-width:2px;}
.cap .more{display:none;font-size:13px;color:var(--paste-soft);margin-top:4px;animation:moreIn .3s ease both;}
@keyframes moreIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
.choice{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translate(-50%,10px);width:min(92vw,560px);padding:14px 16px 12px;text-align:center;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;z-index:5;}
.choice.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.choice p{margin:0 0 10px;font-size:18px;line-height:1.35;color:#3a1d0c;}
.choice.panel{background:var(--paste);outline:1.5px dashed rgba(58,29,12,.4);border-color:var(--paste);}
.choice #chB{display:flex;flex-direction:column;gap:8px;align-items:stretch;}
.choice .btn,.choice .btn.ghost{font-weight:400;font-size:17px;max-width:100%;white-space:normal;line-height:1.3;margin:0;text-align:left;background:#3a1d0c;color:var(--paste);border-color:#3a1d0c;border-radius:14px;padding:10px 16px 8px;}
.choice .btn::before{content:"\203A";margin-right:10px;color:#ffd98a;font-weight:700;display:inline-block;}
/* a gentle glow and pulse, so it's clear this is something to press */
.choice.on .btn{animation:chPulse 1.9s ease-in-out infinite;}
.choice.on .btn::before{animation:chNudge 1.9s ease-in-out infinite;}
.choice.on .btn:nth-child(2){animation-delay:.25s;}.choice.on .btn:nth-child(3){animation-delay:.5s;}.choice.on .btn:nth-child(4){animation-delay:.75s;}
@keyframes chPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,190,80,0),0 0 6px 1px rgba(255,190,80,.3);background:#3a1d0c;transform:scale(1);}50%{box-shadow:0 0 0 4px rgba(255,190,80,.95),0 0 22px 7px rgba(255,170,60,.65);background:#5e2f13;transform:scale(1.014);}}
@keyframes chNudge{0%,100%{transform:translateX(0);opacity:.75;}50%{transform:translateX(5px);opacity:1;}}
@media (prefers-reduced-motion:reduce){.choice.on .btn,.choice.on .btn::before{animation:none;box-shadow:0 0 12px 2px rgba(255,200,110,.5);}}
.choice .btn:hover,.choice .btn:focus-visible{background:#5a2c12;outline:2px solid #3a1d0c;outline-offset:2px;}
.closing{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 1.2s;background:rgba(10,8,28,.45);}
.closing.on{opacity:1;}
.closing #closingLines{text-align:center;padding:0 24px;}
.closing p{margin:0 0 14px;font-size:clamp(24px,4.6vw,38px);line-height:1.3;opacity:0;transform:translateY(8px);transition:opacity 1.4s,transform 1.4s;text-shadow:0 2px 14px rgba(0,0,0,.4);}
.closing p.on{opacity:1;transform:none;}
#end #eNote{display:none;font-size:14px;}
#end #eNote.on{display:block;}
#end #eT{font-weight:400;font-size:clamp(20px,3.6vw,26px);line-height:1.45;}
.hud .coins.punch{animation:punch .35s ease-out;}
@keyframes punch{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.chap{position:fixed;left:0;right:0;top:34%;text-align:center;pointer-events:none;opacity:0;transition:opacity 1.2s;text-shadow:0 2px 14px rgba(0,0,0,.35);}
@media (max-width:520px){.hud{bottom:calc(env(safe-area-inset-bottom,0px) + 140px);}.cap{bottom:calc(env(safe-area-inset-bottom,0px) + 178px);}.prompt{font-size:14px;white-space:normal;max-width:70vw;}}
.chap.on{opacity:1;}
.chap small{display:block;font-size:16px;color:var(--paste-soft);}
.chap b{display:block;font-size:clamp(30px,6vw,46px);font-weight:700;}
.prompt{position:static;padding:6px 16px 4px 12px;font-size:16px;display:none;align-items:center;gap:9px;pointer-events:none;white-space:nowrap;}
.prompt.on{display:flex;animation:objIn .5s ease-out;}
@keyframes objIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.prompt.panel{outline:none;border:2px solid #ffd98a;border-radius:999px;background:rgba(42,18,6,.78);}
.prompt::before{content:"";width:9px;height:9px;flex:none;background:#ffd98a;transform:rotate(45deg);margin-bottom:2px;}
.prompt.on{opacity:1;}
.pad{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);display:flex;gap:16px;transition:opacity .5s;}
.pad.l{left:calc(env(safe-area-inset-left,0px) + 20px);}
.pad.r{right:calc(env(safe-area-inset-right,0px) + 20px);}
.pad.off{opacity:0;pointer-events:none;}
.pad button{width:96px;height:96px;border-radius:50%;border:2px solid var(--paste);background:var(--back);color:var(--paste);display:flex;align-items:center;justify-content:center;touch-action:none;cursor:pointer;font:inherit;font-size:17px;font-weight:700;}
.pad button.jump{width:112px;height:112px;font-size:21px;}
.pad button.act{display:none;width:104px;height:104px;font:inherit;font-size:20px;font-weight:700;background:#e9a23b;color:#3a1d0c;border-color:#f6d39a;animation:actIn .35s ease-out;}
.pad button.act.on{display:flex;}
@keyframes actIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.pad button.down{background:var(--paste);color:#5a2414;}
.pad button.down svg{stroke:#5a2414;}
.pad svg{width:40px;height:40px;fill:none;stroke:var(--paste);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
/* on a phone held sideways, keep the dialogue and choices between the bigger buttons */
@media (max-height:430px) and (orientation:landscape){.cap,.choice{width:min(560px,calc(100vw - 520px));} .cap{bottom:calc(env(safe-area-inset-bottom,0px) + 50px);}}
@media (hover:hover) and (pointer:fine){.pad button{width:84px;height:84px}.pad button.jump{width:98px;height:98px}.pad button.act{width:92px;height:92px}.pad svg{width:36px;height:36px}}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;transition:opacity .8s;}
.screen.off{opacity:0;pointer-events:none;}
.screen .card{max-width:520px;width:100%;padding:26px 24px 22px;text-align:center;}
.screen h1{margin:0;font-size:clamp(32px,6.4vw,50px);line-height:1.05;font-weight:700;}
.screen h2{margin:0 0 8px;font-size:clamp(24px,4.6vw,34px);font-weight:700;line-height:1.15;}
.screen p{margin:6px 0 16px;font-size:18px;line-height:1.4;color:var(--paste-soft);}
.who-pick{display:flex;gap:16px;justify-content:center;margin:6px 0 4px;}
.who-pick button{width:96px;height:112px;border-radius:18px;border:2px solid var(--paste);background:rgba(39,50,124,.85);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;}
.who-pick canvas{position:static;width:80px;height:100px;}
.btn{font:inherit;font-size:18px;font-weight:700;color:#5a2414;background:var(--paste);border:2px solid var(--paste);border-radius:999px;padding:11px 24px 9px;min-height:44px;cursor:pointer;margin:4px;}
.btn.ghost{background:var(--back);color:var(--paste);}
.btn:focus-visible,.pad button:focus-visible,.who-pick button:focus-visible{outline:3px dashed var(--paste);outline-offset:3px;}
.glow{position:fixed;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:radial-gradient(circle,#fff6dc 0%,#ffd890 45%,rgba(255,200,120,0) 70%);transform:scale(0);opacity:0;pointer-events:none;transition:transform 1.6s ease-in,opacity .4s;}
.fade{position:fixed;inset:0;background:#0d0a1c;opacity:0;pointer-events:none;transition:opacity .45s;}
.fade.on{opacity:1;}
.menu{position:fixed;inset:0;transition:opacity .8s;z-index:3;background:#121741 url(assets/img/cover.jpg) center bottom/cover no-repeat;}
@media (max-aspect-ratio:4/5){.menu{background-position:20% bottom;}}
.menu.off{opacity:0;pointer-events:none;}
#twinkle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.menu-inner{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 9vh);transform:translateX(-50%);width:min(92vw,520px);display:flex;flex-direction:column;align-items:center;text-align:center;}
.mtitle{margin:0;font-family:CBrushE,"Caveat Brush",KalamE,Kalam,cursive;font-weight:400;color:var(--paste);line-height:.92;text-shadow:0 3px 18px rgba(10,8,30,.45);}
.mtitle span{display:block;white-space:nowrap;}
.menu-inner{transition:opacity .25s;}
.menu.panel-open .menu-inner{opacity:0;pointer-events:none;}
.mtitle .l1,.mtitle .l3{font-size:clamp(42px,7.6vw,86px);}
.mtitle .l2{font-size:clamp(24px,4vw,44px);margin:2px 0 4px;}
.brush{width:min(70%,340px);height:auto;margin:4px 0 14px;}
.mbtns{display:flex;flex-direction:column;gap:10px;width:min(78vw,300px);}
.mbtn{font:inherit;font-size:clamp(18px,2.4vw,22px);color:var(--paste);background:rgba(42,18,6,.62);border:2px solid var(--paste);outline:1.5px dashed rgba(246,239,226,.5);outline-offset:-6px;border-radius:14px;padding:10px 18px 8px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;min-height:48px;}
.mbtn svg{width:22px;height:22px;flex:none;}
.mbtn.primary{background:#e9a23b;color:#3a1d0c;border-color:#f6d39a;outline-color:rgba(58,29,12,.4);font-weight:700;}
.mbtn:hover:not(:disabled),.mbtn:focus-visible{background:rgba(90,40,14,.8);}
.mbtn.primary:hover,.mbtn.primary:focus-visible{background:#f2b453;}
.mbtn:focus-visible{outline:2px solid #ffd98a;outline-offset:2px;}
.mbtn:disabled{opacity:.55;cursor:default;}
.mbtn.small{justify-content:center;min-height:44px;min-width:150px;font-size:17px;margin:14px auto 0;background:rgba(233,162,59,.22);border-color:#e9a23b;outline-color:rgba(233,162,59,.45);color:#ffd98a;}
.mbtn.small:hover,.mbtn.small:focus-visible{background:rgba(233,162,59,.36);}
.msub{margin:16px 0 0;font-size:15px;line-height:1.35;color:var(--paste-soft);max-width:34ch;display:flex;flex-direction:column;align-items:center;gap:6px;text-shadow:0 2px 10px rgba(10,8,30,.5);}
.msub svg{width:34px;height:9px;color:var(--paste-soft);}
.mpanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:min(92vw,420px);max-height:84vh;overflow:auto;padding:18px 18px 16px;background:rgba(36,16,8,.92);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;}
.mpanel.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%);}
.mpanel h2{margin:0 0 10px;font-family:CBrushE,"Caveat Brush",KalamE,Kalam,cursive;font-weight:400;font-size:34px;text-align:center;}
.clist{display:flex;flex-direction:column;gap:6px;}
.clist .mbtn{font-size:17px;min-height:44px;padding:8px 14px 6px;}
.clist small{font-size:13px;color:var(--paste-soft);}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 4px;font-size:17px;}
.srow select{width:55%;text-align:center;text-align-last:center;font:inherit;font-size:16px;color:var(--paste);background:rgba(42,18,6,.8);border:1.5px solid var(--paste-soft);border-radius:10px;padding:6px 10px;max-width:58%;min-height:40px;}
.srow select option{color:#2b1a10;background:#f6efe2;}
.srow select option:disabled{color:#9a8a78;}
.srow input[type=range]{width:55%;accent-color:#e9a23b;}
.seg{display:flex;gap:4px;}
.seg button{font:inherit;font-size:15px;color:var(--paste);background:transparent;border:1.5px solid var(--paste-soft);border-radius:999px;padding:5px 10px 3px;cursor:pointer;min-height:36px;}
.seg button[aria-pressed="true"]{background:var(--paste);color:#3a1d0c;}
@media (max-aspect-ratio:4/5){.menu-inner{top:calc(env(safe-area-inset-top,0px) + 96px);} .mtitle .l1,.mtitle .l3{font-size:clamp(38px,11.5vw,66px);} .mbtns{width:min(80vw,300px);}}
@media (max-height:520px) and (orientation:landscape){.mtitle .l1,.mtitle .l3{font-size:clamp(34px,7vw,60px);} .mtitle .l2{font-size:22px;} .brush{margin:2px 0 8px;} .mbtns{gap:7px;} .mbtn{min-height:42px;padding:7px 16px 5px;font-size:17px;} .msub{display:none;}}
#charsUi{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);display:none;gap:10px;z-index:6;}
#charsUi .mbtn.small{margin:0;min-width:0;padding:8px 16px 6px;}
.hw-row{display:flex;gap:14px;align-items:center;margin:12px 4px;}
.hw-ic{flex:none;width:132px;display:flex;gap:6px;justify-content:center;align-items:center;}
.hw-c{width:38px;height:38px;border-radius:50%;border:2px solid var(--paste);background:var(--back);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--paste);}
.hw-c svg{width:18px;height:18px;}
.hw-j{width:48px;height:48px;font-size:13px;}
.hw-act{width:54px;height:54px;background:#e9a23b;color:#3a1d0c;border-color:#f6d39a;font-size:14px;animation:hwGlow 1.9s ease-in-out infinite;}
@keyframes hwGlow{0%,100%{box-shadow:0 0 6px 1px rgba(255,190,80,.35);}50%{box-shadow:0 0 18px 6px rgba(255,190,80,.8);}}
.hw-tap{font-size:13px;color:var(--paste-soft);border:1.5px dashed var(--paste-soft);border-radius:10px;padding:7px 10px;white-space:nowrap;}
.hw-row p{margin:0;font-size:16px;line-height:1.3;}
.hw-row p b{display:block;color:#ffd98a;font-size:19px;font-weight:400;}
.hw-row small{display:block;color:var(--paste-soft);font-size:13px;margin-top:3px;}
.hw-foot{margin:14px 4px 2px;font-size:14px;color:var(--paste-soft);text-align:center;}
#pHow{width:min(94vw,520px);}
#hwGo{margin:12px auto 0;min-width:170px;justify-content:center;}
@media (max-height:430px){#pHow{padding:8px 14px 8px;} #pHow h2{font-size:22px;margin:0 0 2px;} .hw-row{margin:3px 2px;gap:10px;} .hw-row small{display:none;} .hw-row p{font-size:13.5px;} .hw-row p b{font-size:15px;} .hw-ic{width:112px;} #hwGo{min-height:36px;margin-top:4px;padding-top:5px;padding-bottom:3px;}}
@media (max-height:620px){#pHow{padding:12px 16px 12px;} #pHow h2{font-size:28px;margin-bottom:2px;} .hw-row{margin:6px 4px;} .hw-row p{font-size:14.5px;line-height:1.25;} .hw-row p b{font-size:17px;} .hw-row small{font-size:12px;margin-top:1px;} .hw-foot{display:none;} #hwGo{margin-top:8px;min-height:42px;}}
@media (max-width:420px){.hw-ic{width:104px;} .hw-c{width:32px;height:32px;} .hw-j{width:42px;height:42px;} .hw-act{width:46px;height:46px;} .hw-row p{font-size:15px;}}
/* the Designer button is hidden from players: #design in the link, or Shift+D, shows it */
body:not(.dev) .dbtn{display:none !important;}
body:not(.dev) .sbtn{right:calc(env(safe-area-inset-right,0px) + 12px);}
body:not(.dev) .pbtn{right:calc(env(safe-area-inset-right,0px) + 64px);}
.dbtn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);width:44px;height:44px;border-radius:50%;border:2px solid var(--paste);background:var(--back);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;padding:0;}
.dbtn svg{width:20px;height:20px;fill:none;stroke:var(--paste);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.dbtn[aria-pressed="true"]{background:var(--paste);}
.dbtn[aria-pressed="true"] svg{stroke:#5a2414;}
.pbtn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 116px);width:44px;height:44px;border-radius:50%;border:2px solid var(--paste);background:var(--back);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:5;padding:0;}
.pbtn.on{display:flex;}
.pbtn svg{width:20px;height:20px;fill:none;stroke:var(--paste);stroke-width:2.2;stroke-linecap:round;}
.pbtn:focus-visible{outline:2px dashed var(--paste);outline-offset:2px;}
body > .mpanel{position:fixed;z-index:8;}
.sbtn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 64px);width:44px;height:44px;border-radius:50%;border:2px solid var(--paste);background:var(--back);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;padding:0;}
.sbtn svg{width:20px;height:20px;fill:none;stroke:var(--paste);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sbtn .x{display:none;}
.sbtn[aria-pressed="false"] .x{display:inline;}
.sbtn[aria-pressed="false"] .wave{display:none;}
.sbtn:focus-visible{outline:2px dashed var(--paste);outline-offset:2px;}
.designer{position:fixed;top:0;right:0;bottom:0;width:min(400px,94vw);background:#1b1530;color:var(--paste);border-left:2px solid var(--paste);transform:translateX(105%);transition:transform .35s;z-index:6;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;}
.designer.on{transform:none;}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 6px;font-family:KalamE,Kalam,cursive;font-size:20px;}
.dtabs{display:flex;gap:4px;padding:4px 10px 8px;border-bottom:1px solid rgba(246,239,226,.25);}
.dtabs button{flex:1;font:inherit;color:var(--paste);background:transparent;border:1.5px solid rgba(246,239,226,.4);border-radius:999px;padding:7px 4px;cursor:pointer;min-height:36px;}
.dtabs button.on{background:var(--paste);color:#1b1530;border-color:var(--paste);}
.dbody{overflow-y:auto;padding:10px 14px 24px;flex:1;}
.dbody .hint{color:rgba(246,239,226,.75);font-size:13px;line-height:1.45;margin:2px 0 12px;}
.dbody h4{margin:16px 0 6px;font-size:14px;}
.dbody .row{margin-bottom:12px;}
.dbody .row label{display:block;font-size:12px;color:rgba(246,239,226,.7);margin-bottom:3px;font-family:ui-monospace,Menlo,monospace;}
.dbody input,.dbody textarea,.dbody select{font:inherit;color:var(--paste);background:#2a2246;border:1px solid rgba(246,239,226,.35);border-radius:6px;padding:6px 8px;width:100%;}
.dbody .row .who{margin-bottom:4px;font-size:12px;}
.dbody textarea{resize:vertical;line-height:1.4;}
.dbody .orow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid rgba(246,239,226,.12);}
.dbody .orow .k{flex:1 1 120px;font-size:13px;}
.dbody .orow .k small{display:block;color:rgba(246,239,226,.6);font-size:11px;}
.dbody .orow label{display:flex;align-items:center;gap:4px;font-size:12px;}
.dbody .orow input{width:72px;padding:4px 6px;}
.dbody .frow{margin-bottom:12px;}
.dbody .frow label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;}
.dbody .frow input{padding:0;}
.dbody .add{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 12px;}
.dbody .add select{width:auto;flex:1;}
.mini{font:inherit;font-size:13px;color:#1b1530;background:var(--paste);border:1.5px solid var(--paste);border-radius:999px;padding:5px 12px;cursor:pointer;min-height:32px;}
.mini.ghost{background:transparent;color:var(--paste);}
.mini:focus-visible,.dtabs button:focus-visible,.dbtn:focus-visible{outline:2px dashed var(--paste);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.cap{transition:opacity .3s;transform:translate(-50%,0)}.glow{transition:opacity .4s}}

/* the very end: "did you like it?" card and the feedback box */
#like{z-index:8;}
#like.off{visibility:hidden;transition:opacity .8s,visibility 0s .8s;}
#like .card{max-width:460px;max-height:100%;overflow-y:auto;}
#like [hidden]{display:none !important;}
#like h2{margin:0 0 14px;}
#like p{margin:0 0 10px;font-size:19px;line-height:1.35;color:var(--paste);}
#like .btn{min-width:96px;}
#like label{display:block;margin:0 0 8px;font-size:17px;line-height:1.35;color:var(--paste);}
#like textarea{width:100%;box-sizing:border-box;font:inherit;font-size:17px;line-height:1.35;color:var(--paste);background:rgba(42,18,6,.62);border:2px solid var(--paste);border-radius:12px;padding:10px 12px;resize:vertical;min-height:84px;max-height:160px;}
#like textarea::placeholder{color:rgba(246,239,226,.55);}
#like textarea:focus-visible{outline:3px dashed var(--paste);outline-offset:3px;}
#like .fbhint{margin:6px 0 8px;font-size:14px;color:var(--paste-soft);}
#like .btn:disabled{opacity:.45;cursor:default;}

/* locked chapters */
.mbtn.locked{opacity:.5;cursor:default;}
.mbtn.locked:hover,.mbtn.locked:focus-visible{background:rgba(42,18,6,.62);}
.clist small svg{width:15px;height:15px;margin-left:6px;vertical-align:-2px;}
.chint{margin:10px 0 0;text-align:center;font-size:14px;color:var(--paste-soft);}
.chint[hidden]{display:none;}