/* Endless toilet story: one continuous roll, one fixed sheet frame per chapter. */
html[lang="en"] .toilet-story,
html[lang="pt"] .toilet-story,
html[lang="en"] .toilet-bolus-score,
html[lang="pt"] .toilet-bolus-score,
html[lang="en"] .toilet-bolus-modal,
html[lang="pt"] .toilet-bolus-modal{display:none!important}

/* The compact agreement directly above the roll keeps the normal house icon colour. */
.toilet-agreement-compact__icon{
    background:var(--green-tint);
    color:var(--green)
}

.toilet-story .toilet-story__head{
    opacity:0;
    transform:translateY(8px)
}
.toilet-story .toilet-story__head small{display:none!important}

.toilet-story--roll{
    --toilet-roll-width:min(100%,640px);
    --toilet-sheet-height:clamp(460px,94vw,520px);
    margin-top:38px
}

.toilet-story--roll .toilet-story__head{
    width:var(--toilet-roll-width);
    margin:0 auto 26px;
    padding:0 6px;
    transition:.28s ease
}
.toilet-story--roll.is-copy-ready .toilet-story__head{
    opacity:1;
    transform:none
}
.toilet-story--roll .toilet-story__head h2{
    margin:0 0 10px;
    max-width:590px;
    font-size:var(--font-xl);
    line-height:var(--line-tight);
    letter-spacing:-.025em
}
.toilet-story--roll .toilet-story__head p{
    max-width:590px;
    font-size:var(--font-sm);
    line-height:var(--line-copy)}

/* The generated wrapper must not interrupt the physical roll. */
.toilet-story--roll .toilet-story__generated-feed{display:contents}

.toilet-story--roll .toilet-story__chapter{
    position:relative;
    isolation:isolate;
    width:var(--toilet-roll-width);
    height:var(--toilet-sheet-height);
    min-height:0;
    margin:0 auto!important;
    padding:34px 38px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;
    border:0!important;
    border-left:1px solid rgba(98,82,61,.12)!important;
    border-right:1px solid rgba(98,82,61,.12)!important;
    border-radius:0!important;
    background:radial-gradient(circle at 9px 9px,rgba(125,105,80,.045) 0 1.2px,transparent 1.35px) 0 0/30px 30px,
        radial-gradient(circle at 24px 24px,rgba(255,255,255,.78) 0 1px,transparent 1.15px) 0 0/30px 30px,
        linear-gradient(90deg,rgba(113,92,66,.035),transparent 8%,transparent 92%,rgba(113,92,66,.035)),
        #fffdf8!important;
    box-shadow:-18px 0 30px -30px rgba(52,41,28,.5),
        18px 0 30px -30px rgba(52,41,28,.5),
        inset 0 1px 0 rgba(255,255,255,.9)!important
}
.toilet-story--roll .toilet-story__chapter[data-story-chapter="1"]{
    border-radius:var(--radius-lg) var(--radius-lg) 0 0!important;
    box-shadow:0 -10px 28px -24px rgba(52,41,28,.42),
        -18px 0 30px -30px rgba(52,41,28,.5),
        18px 0 30px -30px rgba(52,41,28,.5),
        inset 0 1px 0 rgba(255,255,255,.9)!important
}

/* Every sheet starts with a perforation, so authored and generated chapters join seamlessly. */
.toilet-story--roll .toilet-story__chapter::before{
    content:"";
    position:absolute;
    z-index:4;
    left:20px;
    right:20px;
    top:-1px;
    height:3px;
    background:repeating-linear-gradient(90deg,rgba(111,93,70,.3) 0 8px,transparent 8px 15px);
    opacity:.72;
    pointer-events:none
}
.toilet-story--roll .toilet-story__chapter[data-story-chapter="1"]::before{display:none}

/* Replace the old decorative corner circle with a very subtle embossed paper pattern. */
.toilet-story--roll .toilet-story__chapter::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    width:auto;
    height:auto;
    border-radius:0;
    background:radial-gradient(ellipse at center,transparent 0 5px,rgba(91,74,54,.028) 5.5px 6.5px,transparent 7px) 0 0/46px 46px;
    opacity:.72;
    pointer-events:none
}
.toilet-story--roll .toilet-story__chapter>*{position:relative;z-index:1}

/* All chapter types remain the same sheet of paper; only typography/accent changes. */
.toilet-story--roll .toilet-story__chapter--fact,
.toilet-story--roll .toilet-story__chapter--special,
.toilet-story--roll .toilet-story__chapter--rick,
.toilet-story--roll .toilet-story__chapter--slogan,
.toilet-story--roll .toilet-story__chapter--bolus{
    border-top:0!important;
    border-bottom:0!important;
    background-color:#fffdf8!important
}
.toilet-story--roll .toilet-story__chapter--fact{border-left:1px solid rgba(98,82,61,.12)!important}
.toilet-story--roll .toilet-story__chapter--special{box-shadow:-18px 0 30px -30px rgba(52,41,28,.5),18px 0 30px -30px rgba(52,41,28,.5),inset 0 1px 0 rgba(255,255,255,.9)!important}
.toilet-story--roll .toilet-story__chapter--slogan{border-style:solid!important}
.toilet-story--roll .toilet-story__chapter--rick{border:0!important;border-left:1px solid rgba(98,82,61,.12)!important;border-right:1px solid rgba(98,82,61,.12)!important}
.toilet-story--roll .toilet-story__chapter--rick::before{
    content:""!important;
    display:block!important;
    left:20px!important;
    right:20px!important;
    top:-1px!important;
    width:auto!important;
    height:3px!important;
    transform:none!important;
    border:0!important;
    border-radius:0!important;
    background:repeating-linear-gradient(90deg,rgba(111,93,70,.3) 0 8px,transparent 8px 15px)!important;
    opacity:.72!important
}
.toilet-story--roll .toilet-story__chapter--rick::after{
    content:"🧻";
    z-index:0;
    inset:auto 28px 28px auto;
    width:auto;
    height:auto;
    background:none;
    opacity:.07;
    font-size:var(--font-xl);
    transform:rotate(11deg)
}
.toilet-story--roll .toilet-story__chapter--rick h3{padding-right:0}

.toilet-story--roll .toilet-story__meta{flex:0 0 auto;margin-bottom:18px}
.toilet-story--roll .toilet-story__meta>span{
    width:34px;
    height:34px;
    font-size:var(--font-xs);
    box-shadow:0 4px 12px var(--green-tint)
}
.toilet-story--roll .toilet-story__meta small{font-size:var(--font-xs);letter-spacing:.1em}
.toilet-story--roll .toilet-story__chapter h3{
    flex:0 0 auto;
    margin-bottom:14px;
    font-size:var(--font-xl);
    line-height:var(--line-tight)}
.toilet-story--roll .toilet-story__chapter>p{
    margin:0;
    font-size:var(--font-sm);
    line-height:var(--line-copy)}
.toilet-story--roll .toilet-story__achievement{
    margin-top:auto;
    padding:14px 16px;
    border-radius:var(--radius-md)}
.toilet-story--roll .toilet-story__waste-link{margin-top:auto}

/* Fixed sheet frame: JS applies these density steps only when a chapter really needs them. */
.toilet-story--roll .toilet-story__chapter.is-tight{
    padding:30px 34px
}
.toilet-story--roll .toilet-story__chapter.is-tight .toilet-story__meta{margin-bottom:13px}
.toilet-story--roll .toilet-story__chapter.is-tight h3{margin-bottom:10px;font-size:var(--font-lg)}
.toilet-story--roll .toilet-story__chapter.is-tight>p{font-size:var(--font-sm);line-height:var(--line-copy)}
.toilet-story--roll .toilet-story__chapter.is-tight .toilet-story__achievement{margin-top:16px}
.toilet-story--roll .toilet-story__chapter.is-tight .toilet-story__waste-link{margin-top:14px}

.toilet-story--roll .toilet-story__chapter.is-very-tight{
    padding:26px 30px
}
.toilet-story--roll .toilet-story__chapter.is-very-tight .toilet-story__meta{margin-bottom:10px}
.toilet-story--roll .toilet-story__chapter.is-very-tight h3{margin-bottom:8px;font-size:var(--font-lg);line-height:var(--line-tight)}
.toilet-story--roll .toilet-story__chapter.is-very-tight>p{font-size:var(--font-xs);line-height:var(--line-normal)}
.toilet-story--roll .toilet-story__chapter.is-very-tight .toilet-story__achievement{padding:11px 13px}
.toilet-story--roll .toilet-story__chapter.is-very-tight .toilet-story__waste-link{padding-top:10px}

.toilet-story--roll .toilet-story__chapter.is-ultra-tight{
    padding:22px 27px
}
.toilet-story--roll .toilet-story__chapter.is-ultra-tight h3{font-size:var(--font-lg)}
.toilet-story--roll .toilet-story__chapter.is-ultra-tight>p{font-size:var(--font-xs);line-height:var(--line-normal)}
.toilet-story--roll .toilet-story__chapter.is-ultra-tight .toilet-story__meta>span{width:30px;height:30px}
.toilet-story--roll .toilet-story__chapter.is-ultra-tight .toilet-story__achievement{font-size:var(--font-xs)}

/* The loader is the visible loose end of the endless roll. */
.toilet-story--roll .toilet-story__sentinel{
    position:relative;
    width:var(--toilet-roll-width);
    min-height:132px;
    margin:0 auto 42px;
    border-left:1px solid rgba(98,82,61,.12);
    border-right:1px solid rgba(98,82,61,.12);
    background:radial-gradient(circle at 9px 9px,rgba(125,105,80,.04) 0 1.2px,transparent 1.35px) 0 0/30px 30px,
        #fffdf8;
    box-shadow:var(--shadow-elevated)}
.toilet-story--roll .toilet-story__sentinel::before{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    top:-1px;
    height:3px;
    background:repeating-linear-gradient(90deg,rgba(111,93,70,.3) 0 8px,transparent 8px 15px);
    opacity:.72
}
.toilet-story--roll .toilet-story__sentinel::after{
    content:"";
    position:absolute;
    left:7%;
    right:7%;
    bottom:-18px;
    height:35px;
    border-radius:var(--radius-round);
    background:linear-gradient(180deg,#fffefb 0,#e8e0d4 52%,#cfc3b4 100%);
    box-shadow:0 12px 24px rgba(64,50,34,.18),inset 0 2px 2px rgba(255,255,255,.8);
    transform:perspective(160px) rotateX(58deg)
}
.toilet-story--roll .toilet-story__sentinel strong{position:relative;z-index:2}
.toilet-story--roll .toilet-story__sentinel-dot{position:relative;z-index:2}

@media(max-width:520px){
    .toilet-story--roll{
        --toilet-roll-width:100%;
        --toilet-sheet-height:480px
    }
    .toilet-story--roll .toilet-story__head{padding:0 2px;margin-bottom:22px}
    .toilet-story--roll .toilet-story__chapter{padding:28px 26px}
    .toilet-story--roll .toilet-story__chapter.is-tight{padding:25px 23px}
    .toilet-story--roll .toilet-story__chapter.is-very-tight{padding:22px 21px}
    .toilet-story--roll .toilet-story__chapter.is-ultra-tight{padding:19px}
}

@media(max-width:370px){
    .toilet-story--roll{--toilet-sheet-height:490px}
    .toilet-story--roll .toilet-story__chapter h3{font-size:var(--font-lg)}
}

@media(prefers-reduced-motion:reduce){
    .toilet-story--roll .toilet-story__head{transition:none}
}

/* Dutch-only interactive toilet game, built into an existing sheet of paper. */
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--game>p{font-size:var(--font-sm);line-height:var(--line-copy)}
html[lang="nl"] .toilet-tictactoe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);width:min(100%,174px);margin:var(--space-2) auto var(--space-2)}
html[lang="nl"] .toilet-tictactoe__cell{display:grid;place-items:center;aspect-ratio:1/1;min-width:0;min-height:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-soft);color:var(--green);font-family:var(--font-ui-family);font-size:var(--font-lg);font-weight:700;cursor:pointer}
html[lang="nl"] .toilet-tictactoe__cell:disabled{cursor:default;opacity:1}
html[lang="nl"] .toilet-tictactoe__cell:focus-visible,html[lang="nl"] .toilet-tictactoe__replay:focus-visible{outline:2px solid var(--green);outline-offset:2px}
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--game .toilet-tictactoe__status{text-align:center;font-size:var(--font-sm);line-height:var(--line-normal)}
html[lang="nl"] .toilet-tictactoe__replay{margin:var(--space-2) auto 0;padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--green);color:#fff;border:0;font:inherit;font-size:var(--font-xs);cursor:pointer}
html[lang="nl"] .toilet-tictactoe__replay[hidden]{display:none}
@media(max-width:420px){
    html[lang="nl"] .toilet-tictactoe{width:min(100%,160px);gap:var(--space-1);margin-block:var(--space-2)}
    html[lang="nl"] .toilet-story--roll .toilet-story__chapter--game h3{font-size:var(--font-lg)}
}

/* Exception: interactive games and uploaded comics may extend the toilet sheet vertically. */
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--game,
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--quiz,
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--comic{
    height:auto;min-height:var(--toilet-sheet-height);overflow:visible;
}
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--game>p,
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--quiz>p,
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--comic>p{
    font-size:var(--font-sm);line-height:var(--line-copy);
}
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--comic img{
    display:block;max-width:100%;width:auto;height:auto;max-height:540px;
    object-fit:contain;align-self:center;margin:var(--space-3) auto;
    border-radius:var(--radius-sm);
}
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--comic>p{text-align:center}
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--quote>p{
    margin:auto 0;text-align:center;font-family:var(--font-heading-family);
    font-size:var(--font-lg);line-height:var(--line-copy);
}
html[lang="nl"] .toilet-quiz__answers{
    display:grid;grid-template-columns:1fr;gap:var(--space-2);
    width:100%;margin:var(--space-4) 0;
}
html[lang="nl"] .toilet-quiz__option{
    display:block;width:100%;min-height:var(--control-md);padding:var(--space-3);
    border:1px solid var(--line);border-radius:var(--radius-md);
    text-align:left;background:rgba(49,73,61,.06);color:var(--text);
    font:inherit;font-size:var(--font-sm);line-height:var(--line-normal);
    cursor:pointer;white-space:normal;
}
html[lang="nl"] .toilet-quiz__option.is-correct{background:var(--green-tint);border-color:var(--green);color:var(--green)}
html[lang="nl"] .toilet-quiz__option.is-wrong{background:rgba(183,112,75,.13);border-color:var(--terracotta)}
html[lang="nl"] .toilet-quiz__option:disabled{cursor:default;opacity:1}
html[lang="nl"] .toilet-quiz__option:focus-visible{outline:2px solid var(--green);outline-offset:2px}
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--quiz .toilet-quiz__status{
    font-size:var(--font-sm);line-height:var(--line-normal);
}
@media(max-width:420px){
    html[lang="nl"] .toilet-story--roll .toilet-story__chapter--comic img{max-height:450px}
    html[lang="nl"] .toilet-quiz__answers{gap:var(--space-2);margin-block:var(--space-3)}
}


/* Every WC sheet uses the exact same type sizes, including Lucas and the games. */
html[lang="nl"] .toilet-story--roll .toilet-story__chapter.is-extended{
    height:auto!important;min-height:var(--toilet-sheet-height);overflow:visible;
}
html[lang="nl"] .toilet-story--roll .toilet-story__chapter h3{
    font-size:var(--font-xl);line-height:var(--line-tight);
}
html[lang="nl"] .toilet-story--roll .toilet-story__chapter>p,
html[lang="nl"] .toilet-story--roll .toilet-tictactoe__status,
html[lang="nl"] .toilet-story--roll .toilet-quiz__status,
html[lang="nl"] .toilet-story--roll .toilet-tictactoe__replay{
    font-size:var(--font-sm);line-height:var(--line-copy);
}
/* A readable, horizontally pannable strip in a full-screen lightbox. */
.toilet-comic-open{padding:0;border:0;background:transparent;display:block;width:100%;cursor:zoom-in}
.toilet-comic-open:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.toilet-comic-viewer[hidden]{display:none!important}
.toilet-comic-viewer{
    position:fixed;inset:0;z-index:400;
    display:flex;flex-direction:column;justify-content:center;
    background:rgba(10,19,15,.95);color:#fff;
    padding:calc(env(safe-area-inset-top) + var(--space-3))
            var(--space-2)
            calc(env(safe-area-inset-bottom) + var(--space-3));
}
.toilet-comic-viewer__tools{
    display:flex;justify-content:space-between;align-items:center;
    gap:var(--space-2);padding:0 var(--space-3) var(--space-3);
}
.toilet-comic-viewer__hint{font-size:var(--font-sm);color:#e4eae4}
.toilet-comic-viewer__close,.toilet-comic-viewer__move{
    border:1px solid rgba(255,255,255,.23);background:rgba(255,255,255,.14);
    color:#fff;border-radius:var(--radius-round);font:inherit;
    min-width:var(--control-md);height:var(--control-md);cursor:pointer;
}
.toilet-comic-viewer__scroller{
    overflow-x:auto;overflow-y:auto;overscroll-behavior:contain;
    max-height:calc(100dvh - 145px);width:100%;
    -webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;
    border-radius:var(--radius-sm);background:#fff;
}
.toilet-comic-viewer__image{
    display:block;width:max(100%,820px);max-width:none!important;
    height:auto;max-height:none!important;object-fit:contain;
}
.toilet-comic-viewer__footer{display:flex;justify-content:center;gap:var(--space-3);padding-top:var(--space-3)}
body.is-comic-viewer-open{overflow:hidden}

/* The Lucas achievement is body text, not miniature secondary copy. */
html[lang="nl"] .toilet-story--roll .toilet-story__achievement strong,
html[lang="nl"] .toilet-story--roll .toilet-story__achievement span{
    font-size:var(--font-sm);line-height:var(--line-copy);
}

/* A saying is intentionally more prominent than ordinary WC-sheet body copy. */
html[lang="nl"] .toilet-story--roll .toilet-story__chapter--quote>p{
    font-size:var(--font-xl);line-height:var(--line-copy);font-weight:500;
}
/* Consistent icon geometry for both horizontal strip navigation buttons. */
.toilet-comic-viewer__move{display:grid;place-items:center;flex:0 0 var(--control-md);
    width:var(--control-md);padding:0;font-size:var(--font-xl);
    font-family:var(--font-ui-family);line-height:var(--line-tight);font-weight:600}
.toilet-comic-viewer__close{
    position:absolute;z-index:2;top:max(var(--space-3),calc(env(safe-area-inset-top) + var(--space-2)));
    right:max(var(--space-3),calc(env(safe-area-inset-right) + var(--space-2)));
    width:var(--control-md);display:grid;place-items:center;padding:0;
    font-size:var(--font-lg);line-height:var(--line-tight)}
.toilet-comic-viewer__tools{padding-right:calc(var(--control-md) + var(--space-4))}


/* Two-finger pinch enlarges the *scrollable content*, not the whole browser.
   Keep natural one-finger horizontal panning on the comic strip. */
.toilet-comic-viewer__scroller{touch-action:pan-x pan-y;overscroll-behavior:contain}
.toilet-comic-viewer__image{transform-origin:top left;user-select:none;-webkit-user-select:none}