/* Three different uses of the page: a tall column, a slash, and a page spread. */
.manga-page-cells,.manga-action-word{display:none}
.manga-composition-options{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.manga-composition-options legend{color:var(--ink);font:700 13px var(--serif);margin-bottom:10px}
.manga-composition-options button{background:var(--ink);color:var(--paper-white);border:0;border-radius:0;min-height:44px;padding:10px 14px;font:600 13px var(--serif);clip-path:polygon(4% 0,100% 5%,96% 100%,0 95%)}
.manga-cut:not([data-layout=inset]){container-type:size;--fx-ink:#151515}
.manga-cut:not([data-layout=inset]) .manga-cut-speaker{left:7%;bottom:5%;font-size:11px;padding:5px 9px}
.manga-cut:not([data-layout=inset]) .manga-cut-tile{display:none}
.manga-cut:not([data-layout=inset]) .manga-word{transform:none;line-height:1.3}
.manga-cut:not([data-layout=inset])[data-major=true] .manga-action-word{display:block;position:absolute;z-index:8;right:8%;bottom:10%;margin:0;font:900 var(--stage-letter)/1.1 var(--serif);letter-spacing:-.13em;color:var(--ink);text-shadow:3px 2px var(--paper-white),-3px -2px var(--paper-white),3px -2px var(--paper-white),-3px 2px var(--paper-white);transform:rotate(-9deg);writing-mode:vertical-rl;white-space:nowrap}
.manga-cut:not([data-layout=inset])[data-major=true]:not([data-kind=ron]) .manga-speech{display:none}
.manga-cut:not([data-layout=inset])[data-kind=ron] .manga-speech{display:block;right:auto;left:7%;top:4%;bottom:auto;width:26%;height:40%;min-width:58px;max-width:90px}
.manga-cut:not([data-layout=inset])[data-kind=ron] .manga-lettering{inset:13% 14% 20%;writing-mode:vertical-rl}
.manga-cut:not([data-layout=inset])[data-kind=ron] .manga-word{writing-mode:vertical-rl;color:var(--ink)}
.manga-cut[data-layout=rail]{clip-path:polygon(8% 0,100% 3%,100% 100%,0 95%);background:var(--paper-white);border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.manga-cut[data-layout=rail] .manga-cut-art{display:block!important;opacity:1!important;filter:grayscale(1) contrast(1.08)!important;object-fit:cover;object-position:51% 28%!important;transform:none!important}
.manga-cut[data-layout=rail] .manga-cut-secondary,.manga-cut[data-layout=rail] .manga-gutter,.manga-cut[data-layout=rail] .manga-cut-frame{display:none}
.manga-cut[data-layout=rail] .manga-speech{top:4%;bottom:auto;left:10%;right:auto;width:47%;height:40%;max-width:95px;min-width:60px}
.manga-cut[data-layout=rail] .manga-lettering{inset:12% 12% 20%;writing-mode:vertical-rl}
.manga-cut[data-layout=rail] .manga-word{writing-mode:vertical-rl}
.manga-cut[data-layout=rail][data-major=true] .manga-action-word{right:11%;bottom:9%;font-size:var(--stage-letter)}
.manga-cut[data-layout=rail] .manga-sfx{left:9%;top:52%;font-size:28px;color:var(--ink)}
.manga-cut[data-layout=rail] .manga-focus-lines{opacity:.45}
.manga-cut[data-layout=slash]{clip-path:polygon(0 25%,100% 0,100% 77%,0 100%);background:var(--paper-white)}
.manga-cut[data-layout=slash] .manga-cut-frame{display:none}
.manga-cut[data-layout=slash]::before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--ink);clip-path:polygon(0 25%,100% 0,100% 1.5%,0 26.5%,0 98.5%,100% 75.5%,100% 77%,0 100%)}
.manga-cut[data-layout=slash] .manga-cut-art{filter:grayscale(1) contrast(1.12);opacity:1;object-position:35% 32%;transform:scale(1.15)}
.manga-cut[data-layout=slash] .manga-speech{top:13%;bottom:18%;right:8%;left:auto;width:28%;max-width:150px;min-width:68px}
.manga-cut[data-layout=slash] .manga-lettering{inset:13% 15% 20%;writing-mode:vertical-rl}
.manga-cut[data-layout=slash][data-major=true] .manga-action-word{writing-mode:horizontal-tb;right:9%;bottom:25%;font-size:var(--stage-letter);letter-spacing:-.11em;transform:rotate(-12deg)}
.manga-cut[data-layout=slash][data-kind=riichi] .manga-action-word{font-size:calc(var(--stage-letter)*.82)}
.manga-cut[data-layout=slash][data-kind=ron] .manga-speech{left:6%;top:24%;height:61%;width:19%}
.manga-cut[data-layout=slash] .manga-sfx{left:46%;top:16%;font-size:28px}
.manga-cut[data-layout=slash] .manga-cut-speaker{bottom:15%;left:9%}
.manga-cut[data-layout=spread]{clip-path:none;background:transparent;--fx-ink:#171717}
.manga-cut[data-layout=spread]>.manga-cut-art,.manga-cut[data-layout=spread]>.manga-cut-secondary,.manga-cut[data-layout=spread]>.manga-cut-frame,.manga-cut[data-layout=spread]>.manga-gutter{display:none}
.manga-cut[data-layout=spread]>.manga-tone{display:none}
.manga-cut[data-layout=spread] .manga-page-cells{display:block;position:absolute;inset:0;z-index:0}
.manga-cell{position:absolute;overflow:hidden;background:var(--ink);padding:3px}
.manga-cell img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12);background:var(--paper-white)}
.manga-cell-eye{left:0;top:0;width:66%;height:42%;clip-path:polygon(0 0,100% 0,92% 83%,0 100%)}
.manga-cell-eye img{object-position:38% 29%;transform:scale(1.5);transform-origin:36% 28%}
.manga-cell-hand{left:0;bottom:0;width:65%;height:53%;clip-path:polygon(0 13%,100% 0,89% 100%,0 100%)}
.manga-cell-hand img{object-position:35% 54%}
.manga-cell-portrait{right:0;top:0;width:42%;height:100%;clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
.manga-cell-portrait img{object-position:56% 28%}
.manga-cut[data-layout=spread]>.manga-focus-lines,.manga-cut[data-layout=spread]>.manga-dash-lines,.manga-cut[data-layout=spread]>.manga-rain-lines{clip-path:polygon(0 0,65% 0,60% 33%,0 40%);opacity:.58}
.manga-cut[data-layout=spread] .manga-speech{right:9%;top:5%;bottom:auto;width:26%;height:40%;min-width:62px;max-width:110px}
.manga-cut[data-layout=spread] .manga-lettering{inset:12% 15% 22%;writing-mode:vertical-rl}
.manga-cut[data-layout=spread][data-major=true] .manga-action-word{right:auto;left:9%;bottom:12%;writing-mode:horizontal-tb;transform:rotate(-14deg);font-size:var(--stage-letter)}
.manga-cut[data-layout=spread][data-kind=riichi] .manga-action-word{font-size:calc(var(--stage-letter)*.7)}
.manga-cut[data-layout=spread][data-kind=ron] .manga-speech{top:3%;left:7%;width:24%;height:31%}
.manga-cut[data-layout=spread] .manga-sfx{left:auto;right:8%;top:49%;color:var(--ink);writing-mode:vertical-rl;transform:rotate(8deg)}
.manga-cut[data-layout=spread] .manga-cut-speaker{bottom:3%;left:5%}
/* Return to the early vertical paper slips, with more room for the type. */
.screen .action-buttons{gap:var(--action-gap,12px);align-items:flex-end;filter:none;z-index:8;transform:translate(-50%,var(--action-shift-y,0px))}
.screen .action-buttons button{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--action-width,64px);height:var(--action-height,112px);min-width:44px;min-height:44px;padding:8px 9px;border:1px solid var(--ink);border-radius:0;box-shadow:1px 2px 0 var(--ink);clip-path:none;background:var(--paper-white)!important;color:var(--ink)!important;overflow:visible;writing-mode:horizontal-tb;isolation:isolate;transform:none;transition:translate .12s ease,box-shadow .12s ease}
.screen .action-buttons button::before,.screen .action-buttons button::after{content:none;display:none}
.screen .action-buttons button .action-label{display:block;writing-mode:vertical-rl;text-orientation:mixed;color:var(--ink);font:700 32px/1.1 var(--serif);letter-spacing:.065em;transform:none;padding:0;white-space:nowrap}
.screen .action-buttons button[data-action=ron],.screen .action-buttons button[data-action=tsumo]{background:var(--ink)!important;border:1px solid var(--ink);box-shadow:1px 2px 0 #777}
.screen .action-buttons button[data-action=ron] .action-label,.screen .action-buttons button[data-action=tsumo] .action-label{color:var(--paper-white);font-size:36px}
.screen .action-buttons button[data-action=riichi]{border:1px solid var(--ink)}
.screen .action-buttons button[data-action=riichi] .action-label{color:var(--ink);font-size:28px}
.screen .action-buttons button[data-action=pass]{width:var(--pass-width,54px);height:var(--pass-height,92px);min-width:44px;min-height:44px;padding:8px 9px;border:1px solid var(--ink);box-shadow:1px 2px 0 var(--ink)}
.screen .action-buttons button[data-action=pass] .action-label{writing-mode:vertical-rl;font:500 25px/1.1 var(--serif);letter-spacing:.1em;transform:none}
.screen .action-buttons .review-open-hands{width:120px;min-width:110px;height:44px;min-height:44px;padding:6px 10px;font:500 14px/1.2 var(--serif);writing-mode:horizontal-tb}
.screen .action-buttons button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.screen .action-buttons button:active{translate:1px 2px;box-shadow:none}
.screen .action-buttons[data-compact-slips=true] button{min-height:34px;padding:5px 6px;box-shadow:1px 1px 0 var(--ink)}
.screen .action-buttons[data-compact-slips=true] button .action-label{writing-mode:horizontal-tb;font-size:20px;letter-spacing:.04em}
/* Restore the first, unillustrated chapter page. The first gesture unlocks sound. */
.manga-chapter{z-index:10;pointer-events:auto;isolation:isolate}
.manga-chapter::before{pointer-events:none}
.chapter-title{position:relative;display:flex;align-items:center;flex-direction:column}
.manga-chapter p{margin:0}
.manga-chapter .chapter-start{position:absolute;z-index:1;left:24px;right:56px;bottom:24px;height:48px;padding:10px 8px;background:var(--paper-white);color:var(--ink);border:1px solid var(--ink);border-radius:0;font:600 15px/1.4 var(--serif);letter-spacing:.12em;cursor:pointer}
.manga-chapter .chapter-start:hover{background:var(--paper-edge)}
.manga-chapter .chapter-start:active{translate:0 1px}
.manga-chapter .chapter-start:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.manga-chapter[data-state=playing] .chapter-title{animation:chapter-title .6s ease-out both}
.manga-chapter[data-state=playing] p{animation:chapter-title .6s .2s ease-out both}
@keyframes chapter-title{from{opacity:.35}to{opacity:1}}
@media(orientation:landscape) and (max-height:500px){
 .screen .action-buttons button .action-label{writing-mode:horizontal-tb;font-size:25px;letter-spacing:.04em}.screen .action-buttons button[data-action=ron] .action-label,.screen .action-buttons button[data-action=tsumo] .action-label{font-size:28px}.screen .action-buttons button[data-action=riichi] .action-label{font-size:23px}.screen .action-buttons button[data-action=pass] .action-label{writing-mode:horizontal-tb;font-size:19px}
 .manga-cut[data-layout=rail] .manga-cut-art{object-position:50% 24%!important}.manga-cut[data-layout=rail] .manga-speech{width:30%;height:75%;top:6%}.manga-cut[data-layout=rail][data-major=true] .manga-action-word{writing-mode:horizontal-tb;font-size:calc(var(--stage-letter)*.85);right:10%;bottom:8%}
 .manga-cut[data-layout=rail][data-kind=ron] .manga-speech{top:5%;height:78%;width:25%}
 .manga-cut[data-layout=slash][data-kind=ron] .manga-word{writing-mode:horizontal-tb}
 .manga-cut:not([data-layout=inset]) .manga-cut-speaker{font-size:9px;padding:3px 6px}.manga-cut[data-layout=spread] .manga-cell-portrait img{object-position:45% 22%}.manga-cut[data-layout=spread] .manga-speech{height:75%;width:16%;right:5%}.manga-cut[data-layout=spread][data-kind=ron] .manga-speech{height:85%;width:15%;left:4%}.manga-cut[data-layout=spread][data-major=true] .manga-action-word{left:29%;bottom:5%}.manga-cut[data-layout=slash] .manga-word{writing-mode:horizontal-tb}.manga-cut[data-layout=slash] .manga-lettering{writing-mode:horizontal-tb}
 .chapter-title{translate:0 -20px}.manga-chapter .chapter-start{left:50%;right:auto;width:220px;max-width:calc(100% - 64px);bottom:30px;height:44px;transform:translateX(-50%);font-size:14px}
}
html[data-manga-motion=quiet] .manga-chapter *,html[data-manga-motion=off] .manga-chapter *{animation:none!important}
@media(prefers-reduced-motion:reduce){.manga-chapter *{animation:none!important}}

/* Sample viewing stays paused and gives every scene a direct route back. */
.manga-composition-options .sample-hint{flex-basis:100%;font:500 12px/1.8 var(--serif);margin:0 0 8px}
.manga-sample-bar{position:fixed;z-index:200;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(540px,calc(100% - 20px));display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:10px;background-color:var(--paper-white);background-image:var(--print-paper);border:1px solid var(--ink);box-sizing:border-box}
.manga-sample-bar[hidden]{display:none!important}.manga-sample-bar .sample-title{flex:1 0 100%;text-align:center;font:600 13px var(--serif);padding:2px 0 5px}
.manga-sample-bar button{flex:1;min-height:44px;border:1px solid var(--ink);background:var(--paper-white);color:var(--ink);font:600 12px var(--serif);padding:8px 5px;white-space:nowrap;border-radius:0}
.manga-sample-bar button:first-of-type{background:var(--ink);color:var(--paper-white)}
body[data-manga-sample=true] .screen .center-action{visibility:hidden}