:root{--paper:#e9e2d2;--paper-white:#efe8d8;--paper-edge:#e0d7c6;--ink:#202020;--ink-light:#737373;--serif:'Manga Serif','Hiragino Mincho ProN','Yu Mincho',serif;--sans:'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif}
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
html,body,#app{background:var(--paper);color:var(--ink);font-family:var(--serif);color-scheme:light}
.screen{isolation:isolate;background:radial-gradient(ellipse at 38% 22%,var(--paper-white) 0%,var(--paper) 64%,var(--paper-edge) 100%);filter:none}
/* Static printed tone fades inward from the page edges, leaving the central
   reading area open. Opposite corners carry quiet, widely spaced hatch lines. */
.manga-page-frame{position:absolute;inset:58px 8px 3px;border:1px solid #31313132;pointer-events:none;z-index:0;background:radial-gradient(circle,#20202038 .65px,transparent .95px) 1px 1px/3px 3px;mask-image:radial-gradient(ellipse 95% 50% at -10% 0%,#000 0%,#0009 45%,transparent 78%),radial-gradient(ellipse 100% 60% at 115% 100%,#000 0%,#0009 38%,transparent 76%)}
.screen::before{content:'';display:block;position:absolute;inset:64px 16px 66px;border:0;border-radius:0;transform:none;width:auto;height:auto;background:repeating-linear-gradient(133deg,#20202022 0 .65px,transparent 1px 14px);mask-image:radial-gradient(ellipse 75% 40% at 105% 3%,#000 0%,#000a 35%,transparent 78%),radial-gradient(ellipse 60% 34% at -8% 94%,#000 0%,#0009 35%,transparent 78%);opacity:.58;pointer-events:none;z-index:0}
.manga-masthead{position:absolute;z-index:5;left:14px;right:10px;top:5px;height:46px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink)}
.manga-masthead-title{display:flex;align-items:center;gap:12px;min-width:0}
.manga-masthead-title strong{font:700 23px/1 var(--serif);letter-spacing:.13em;white-space:nowrap}
.manga-masthead-title span{font:500 9px/1.5 var(--serif);letter-spacing:.08em}
.manga-menu-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;min-width:44px;padding:8px;border:0;background:none;color:var(--ink);border-radius:0}
.manga-menu-button span{display:block;width:18px;height:1.5px;background:currentColor}.manga-menu-button span:last-child{width:13px;align-self:flex-end;margin-right:5px}
.manga-menu-button:hover{background:#22222208}.manga-menu-button:active{background:#22222214}
.seat-info{font-family:var(--serif);color:var(--ink);clip-path:none;text-shadow:none}
.seat-info .seat-wind{font-family:var(--serif);font-weight:700;background:var(--paper-white);border:1px solid var(--ink);border-radius:0;color:var(--ink);box-shadow:1px 1px 0 #20202044}
.seat-info .seat-score{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:14px;letter-spacing:-.035em}
.active-seat .seat-wind{background:var(--ink);color:var(--paper-white);outline:1px solid var(--ink);outline-offset:2px}
.screen .game-top{font-family:var(--serif);font-size:12px;font-weight:700;color:var(--ink);letter-spacing:.04em}
.screen>.remaining-count{font-family:var(--serif);font-size:34px;font-weight:700;line-height:1;padding-top:10px;background:var(--ink);border:1px solid #121212;border-radius:1px;color:var(--paper-white);box-shadow:3px 3px 0 #53535344}
.remaining-count::before{content:'残り';position:absolute;top:var(--remaining-label-top,6px);left:0;width:100%;font:500 9px/1 var(--serif);letter-spacing:.15em;text-align:center;color:var(--paper)}
.screen .dock{z-index:4}
.dock::before{content:'';position:absolute;left:0;right:0;top:-5px;bottom:-6px;border-top:1px solid #21212166;background:linear-gradient(transparent,#2828280e);pointer-events:none;z-index:-1}
.dock .hand-tile img{border:1px solid #3a3a3a80;border-radius:2px;box-shadow:0 3px 0 #979797,1px 4px 1px #25252542;filter:none}
.dock .own-meld .meld-piece img{border:1px solid #3a3a3a66;border-radius:1px;box-shadow:none}
.dock .hand-tile[aria-pressed=true]{z-index:2}
.dock .hand-tile[aria-pressed=true]::before{content:'';position:absolute;top:-6px;left:20%;width:60%;height:3px;border-top:1.5px solid var(--ink);transform:rotate(-8deg);pointer-events:none}
.screen .action-buttons{gap:7px;flex-wrap:nowrap;align-items:flex-end;z-index:5}
.screen .action-buttons button{position:relative;display:inline-flex;align-items:center;justify-content:center;writing-mode:vertical-rl;min-width:45px;min-height:44px;width:45px;height:54px;padding:6px 8px;border:1.5px solid var(--ink);border-radius:1px;box-shadow:2px 3px 0 var(--ink);background:var(--paper-white)!important;color:var(--ink)!important;font:700 18px/1 var(--serif);letter-spacing:.08em;transition:translate .12s ease,box-shadow .12s ease;clip-path:none;transform:none}
.screen .action-buttons button[data-action=ron],.screen .action-buttons button[data-action=tsumo]{background:var(--ink)!important;color:var(--paper-white)!important;box-shadow:3px 3px 0 #737373;border:1.5px solid var(--ink);font-size:22px}
.screen .action-buttons button[data-action=riichi]{color:var(--ink)!important;border:2px solid var(--ink)}
.screen .action-buttons button{writing-mode:horizontal-tb;height:66px}
.action-label{display:block;writing-mode:vertical-rl;white-space:nowrap;line-height:1;letter-spacing:.04em}
.screen .action-buttons button[data-action=riichi] .action-label{font-size:16px}
.screen .action-buttons button[data-action=pass] .action-label{writing-mode:horizontal-tb}
.screen .action-buttons button[data-action=pass],.screen .action-buttons .review-open-hands{writing-mode:horizontal-tb;font:500 11px/1.2 var(--sans);height:34px;min-height:34px;width:auto;min-width:44px;padding:6px 9px;letter-spacing:0;box-shadow:1px 2px 0 #545454}
.screen .action-buttons button:hover{translate:0 -2px}.screen .action-buttons button:active{translate:2px 2px;box-shadow:0 0 0 transparent;background:var(--paper-edge)!important}
.screen .action-buttons button[data-action=ron]:active,.screen .action-buttons button[data-action=tsumo]:active{background:#414141!important}
.screen>.center-action{border:1px solid var(--ink);border-radius:0;font:600 11px/16px var(--serif);background:var(--paper-white);color:var(--ink);box-shadow:2px 2px 0 #2c2c2c4d;z-index:5}
.screen>.hand-progress{font-family:var(--sans);font-size:10px;color:var(--ink)}.wait-count{font-family:var(--sans);font-size:10px}.furiten-label{color:var(--ink)}
.riichi-stick{background:var(--paper-white);border-color:#616161;box-shadow:0 1px 0 #22222255}.riichi-stick::after{background:var(--ink)}
.seat-announcement{background:var(--paper-white);color:var(--ink);border:1.5px solid var(--ink);border-radius:1px;box-shadow:3px 3px 0 #2020204d;padding:6px 10px;gap:3px;font-family:var(--serif)}
.seat-announcement small{font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.06em}
.seat-announcement strong{font-family:var(--serif);font-size:28px;font-weight:700;line-height:1.1}
.seat-announcement[data-kind=riichi]{border-left:3px solid var(--ink)}
.seat-announcement[data-kind=ron],.seat-announcement[data-kind=tsumo]{background:var(--ink);color:var(--paper-white);border-color:var(--ink)}
.draw-waits{background:var(--paper-white);border:1px solid var(--ink);border-radius:0;box-shadow:2px 2px 0 #21212140;font-family:var(--sans)}
.draw-waits>strong{font-family:var(--serif);font-weight:700}
.manga-cut{position:absolute;z-index:6;isolation:isolate;overflow:hidden;pointer-events:none;background:var(--paper-white);border:0;box-shadow:none;clip-path:var(--comic-shape);contain:layout paint}
.manga-cut-art{position:absolute;width:100%;height:100%;object-fit:cover;object-position:43% 30%;filter:grayscale(1) contrast(1.12);opacity:1;transform:scale(1.045)}
.manga-cut-frame{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;fill:none;stroke:var(--ink);stroke-width:3px;stroke-linejoin:round}
.manga-cut::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(166deg,transparent 0 35px,#24242426 36px,transparent 37px 75px);mix-blend-mode:multiply;opacity:.3;z-index:0}
.manga-cut-speaker{position:absolute;z-index:2;bottom:17%;left:7%;padding:3px 6px;background:var(--ink);color:var(--paper-white);font:600 9px/1 var(--sans);letter-spacing:.12em;transform:rotate(-5deg)}
.manga-speech{position:absolute;z-index:1;right:6%;top:7%;bottom:9%;width:32%;max-width:116px;min-width:62px;background:none;border:0;box-shadow:none;writing-mode:vertical-rl}
.manga-balloon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:var(--paper-white);stroke:var(--ink);stroke-width:1.4px;stroke-linejoin:round}
.manga-lettering{position:absolute;inset:12% 17% 20%;display:flex;align-items:center;justify-content:center;gap:5px;writing-mode:vertical-rl}
.manga-word{display:block;font:700 19px/1.15 var(--serif);letter-spacing:.04em;white-space:nowrap}.manga-aside{font:500 10px/1.5 var(--serif);letter-spacing:.08em;max-height:100%;overflow:hidden}
.manga-cut[data-major=true] .manga-cut-art{object-position:35% 44%}
.manga-cut[data-major=true] .manga-speech{top:9%;bottom:8%;right:6%;width:40%;max-width:142px}
.manga-cut[data-major=true] .manga-lettering{inset:8% 15% 18%}
.manga-cut[data-major=true] .manga-word{font-size:36px;font-weight:700;letter-spacing:.02em;transform:rotate(-7deg)}
.manga-cut[data-major=true] .manga-aside{display:none}
.manga-cut[data-kind=ron] .manga-lettering,.manga-cut[data-kind=tsumo] .manga-lettering{inset:15% 18% 17%}
.manga-cut[data-kind=ron] .manga-word,.manga-cut[data-kind=tsumo] .manga-word{font-size:45px;transform:rotate(-12deg)}
.manga-cut[data-kind=riichi] .manga-word{font-size:33px}
.manga-cut-tile{position:absolute;z-index:2;left:8%;bottom:31%;width:35px;height:47px;transform:rotate(-17deg);border:1px solid var(--ink);background:var(--paper-white);box-shadow:2px 3px 0 #e1e1e1,3px 4px 0 var(--ink)}
.manga-cut-tile img{width:100%;height:100%;object-fit:fill}.manga-cut[data-kind=ron] .manga-cut-tile::after{content:'';position:absolute;inset:0;background:#acacac66}
.manga-cut[data-kind=think] .manga-cut-art{object-position:30% 56%}.manga-cut[data-kind=think] .manga-word{font-size:17px}
.manga-cut[data-kind=draw] .manga-cut-art{transform:scale(1.6);transform-origin:36% 32%;object-position:43% 29%}
.manga-cut[data-kind=drawn] .manga-cut-art{opacity:.08;object-position:40% 60%}
.manga-cut[data-kind=drawn] .manga-speech{inset:16%;width:auto;max-width:none;writing-mode:horizontal-tb}
.manga-cut[data-kind=drawn] .manga-balloon{display:none}
.manga-cut[data-kind=drawn] .manga-lettering{inset:0;writing-mode:horizontal-tb;flex-direction:column}
.manga-cut[data-kind=drawn] .manga-word{font-size:48px;transform:rotate(-6deg)}.manga-cut[data-kind=drawn] .manga-aside{display:block;font-size:11px}
.manga-chapter{position:absolute;z-index:9;top:60px;left:28px;right:28px;bottom:86px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--paper-white);border:1px solid var(--ink);box-shadow:5px 5px 0 #24242422;pointer-events:none;overflow:hidden}
.manga-chapter::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(117deg,transparent 0 80px,#12121214 81px,transparent 82px 130px);opacity:.5}
.manga-chapter small{font:500 12px/1.5 var(--serif);letter-spacing:.3em;margin-bottom:20px}.manga-chapter strong{font:700 56px/1.3 var(--serif);writing-mode:vertical-rl;letter-spacing:.15em}.manga-chapter span{font:500 12px/1.5 var(--serif);margin-top:20px}.manga-chapter p{position:absolute;bottom:24px;right:18px;font:500 11px/1.5 var(--serif);writing-mode:vertical-rl;letter-spacing:.2em}
dialog{font-family:var(--serif);border:2px solid var(--ink);border-radius:0;background:var(--paper-white);color:var(--ink);box-shadow:7px 7px 0 #1414145c;padding:22px 20px;overscroll-behavior:contain}
dialog::backdrop{background:#222222cc;backdrop-filter:none}
dialog h2{font:700 35px/1.2 var(--serif);letter-spacing:.12em;margin:0 0 20px;padding-bottom:15px;border-bottom:2px solid var(--ink)}
dialog button{font-family:var(--serif);border:1px solid var(--ink);border-radius:0;min-height:44px;background:var(--paper-white);color:var(--ink);box-shadow:2px 2px 0 #45454566}
dialog button:active{translate:1px 1px;box-shadow:none}.dialog-actions{margin-top:20px;padding-top:4px;gap:10px}.dialog-actions button{flex:1;font-size:13px}
#next-round{background:var(--ink);color:var(--paper-white);font-weight:700}
.result-kicker{font:500 10px/1.6 var(--sans);letter-spacing:.1em;color:#676767;margin:-6px 0 16px}
.result-tiles{padding:15px 8px;background:repeating-linear-gradient(135deg,#25252508 0 1px,transparent 1px 5px);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-bottom:12px;gap:1px}
.result-tiles .tile-image{box-shadow:1px 2px 0 #66666666}
.result-yaku{list-style:none;padding:0;margin:12px 0;font-family:var(--sans);font-size:12px;line-height:1.9}.result-yaku li{border-bottom:1px dotted #8a8a8a66;padding:2px 0}
.win-points{font:700 30px/1.5 var(--serif);letter-spacing:-.035em;border-bottom:2px solid var(--ink);padding-bottom:8px;margin:10px 0}
.result-scores>div{padding:10px 0;border-bottom:1px solid #9c9c9c;gap:8px;grid-template-columns:1.2fr 1fr 1fr;font-size:13px;align-items:center}
.result-scores>div>span:first-child{font-size:12px}.result-scores strong{font-family:var(--serif);font-size:17px}.result-scores .negative{color:var(--ink)}.result-scores .positive{color:var(--ink)}
.draw-result-waits{font-family:var(--sans);font-size:10px;gap:8px}.draw-result-waits>span:first-child{min-width:52px}
#result-dialog[data-final=true]{background:var(--ink);color:var(--paper-white);border-color:var(--paper-white)}
#result-dialog[data-final=true] h2{border-color:var(--paper-white)}#result-dialog[data-final=true] .result-kicker{color:#cecece}#result-dialog[data-final=true] .result-scores>div{background:var(--paper-white);color:var(--ink);padding:12px 9px;margin-top:7px;border:0}#result-dialog[data-final=true] #next-round{background:var(--paper-white);color:var(--ink)}
#choice-dialog h2{font-size:24px}#choice-options button{background:var(--paper-white);min-height:58px;border-left:4px solid var(--ink);font-weight:700}
#manga-menu{max-width:360px;padding:28px 24px}.menu-close{position:absolute;right:8px;top:5px;width:44px;height:44px;padding:0;border:0;box-shadow:none;font:400 25px/1 var(--sans);background:none}
.menu-eyebrow{font:500 10px/1.4 var(--sans);letter-spacing:.35em;margin:0 0 14px}#manga-menu h2{font-size:28px;letter-spacing:0;margin-bottom:16px}
.manga-menu-settings{display:flex;flex-direction:column}.menu-option{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;box-shadow:none;border:0;border-bottom:1px solid #a1a1a1;background:none;padding:10px 0;font-size:13px}.menu-option strong{font-size:11px;font-family:var(--sans);border:1px solid var(--ink);padding:5px 8px;min-width:46px;text-align:center}
.manga-controls{font:400 11px/1.9 var(--sans);color:#646464;margin:22px 0}.manga-menu-resume{width:100%;background:var(--ink);color:var(--paper-white);font-weight:700;letter-spacing:.15em;min-height:48px}
button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#loading,#play-error{font-family:var(--serif);border:1px solid var(--ink);background:var(--paper-white);color:var(--ink);box-shadow:4px 4px 0 #22222233}
@media(max-width:350px){.manga-masthead{left:10px}.manga-masthead-title{gap:9px}.manga-masthead-title strong{font-size:21px}.manga-masthead-title span{font-size:8px;letter-spacing:0}.manga-cut[data-major=true] .manga-aside{display:none}.screen .action-buttons{gap:5px}.screen .action-buttons button{min-width:42px;width:42px}.manga-word{font-size:17px}}
@media(orientation:landscape) and (max-height:500px){.manga-masthead{height:31px;top:2px;left:18px;right:16px}.manga-masthead-title strong{font-size:18px}.manga-masthead-title span{font-size:9px}.manga-menu-button{height:30px;width:44px}.manga-page-frame{top:40px}.screen .action-buttons button{height:38px;min-height:34px;width:auto;min-width:48px;writing-mode:horizontal-tb;font-size:16px;padding:6px 10px;letter-spacing:0}.screen .action-buttons button[data-action=pass],.screen .action-buttons .review-open-hands{height:32px;min-height:32px;font-size:10px}.manga-chapter{top:42px;bottom:86px;left:22%;right:22%}.manga-chapter strong{writing-mode:horizontal-tb;font-size:38px}.manga-chapter small{margin-bottom:10px}.manga-chapter span{margin-top:10px}.manga-chapter p{writing-mode:horizontal-tb;bottom:8px}.manga-cut[data-major=true] .manga-word{font-size:28px}.manga-cut[data-major=true] .manga-aside{font-size:9px}.manga-cut-tile{width:28px;height:38px}.seat-announcement strong{font-size:24px}.seat-announcement{padding:5px 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html[data-manga-motion=quiet] .manga-cut,html[data-manga-motion=quiet] .hand-tile,html[data-manga-motion=quiet] .action-buttons button{animation:none!important;transition:none!important}
@media(orientation:landscape) and (max-height:500px){.action-label{writing-mode:horizontal-tb}.screen .action-buttons button[data-action=riichi] .action-label{font-size:16px}}

/* Ink volumes: face artwork, physical sides and accents have separate layers. */
html[data-tile-color=ink] .manga-tile-face{filter:url(#manga-face-ink)}
.dock .hand-tile img,.dock .own-meld .meld-piece img{border:1px solid #252525;border-radius:1px;box-shadow:none}
.manga-tile-side{display:block;position:absolute;inset:100% 0 auto;height:4px;background:repeating-linear-gradient(132deg,#585858 0 .65px,transparent .8px 3px),#d6d6d6;border:1px solid #252525;border-top:0;pointer-events:none;box-sizing:border-box}
.tile-image .manga-tile-side{height:2px}
.tile-image img{border:1px solid #333333;border-radius:1px;box-sizing:border-box}
.seat-announcement{border-radius:48% 43% 46% 42%;padding:9px 14px 11px;box-shadow:none;border:1.5px solid var(--ink);background:var(--paper-white)}
.seat-announcement[data-kind=riichi]{border-left:1.5px solid var(--ink);color:var(--ink)}
.seat-announcement::after{content:'';position:absolute;width:8px;height:8px;bottom:0;left:24%;background:inherit;border-left:1px solid var(--ink);transform:skew(-27deg) rotate(-14deg);clip-path:polygon(0 0,100% 0,0 100%)}
@media(orientation:landscape) and (max-height:500px){.manga-cut .manga-speech{top:12%;bottom:12%;right:6%}.manga-cut[data-major=true] .manga-lettering{inset:12% 14% 20%}.manga-cut-speaker{font-size:8px;padding:2px 4px}.manga-cut-tile{width:25px;height:34px;bottom:27%}.seat-announcement{padding:7px 12px 9px}.manga-aside{display:none}}

.manga-cut[data-compact=true] .manga-lettering,.manga-cut[data-compact=true] .manga-word{writing-mode:horizontal-tb}

.manga-red-seal{display:none;position:absolute;top:1px;left:1px;z-index:2;background:var(--ink);color:var(--paper-white);font:700 max(6px,calc(var(--tile-px,28px)*.2))/1.1 var(--sans);padding:.5px;pointer-events:none}
html[data-tile-color=ink] .manga-red-seal{display:block}
.dock .sideways .manga-red-seal{left:auto;right:1px;transform:rotate(90deg)}
/* Three original male casts, auditioned without leaving the table. */
#manga-menu{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.manga-voice-options{border:0;margin:24px 0 0;padding:0;min-width:0}.manga-voice-options legend{color:var(--ink);font-size:14px;font-weight:700}.voice-hint{font:400 10px/1.7 var(--sans);color:#646464;margin:5px 0 12px}
.voice-choices{display:grid;grid-template-columns:1fr;gap:5px}.voice-choice{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:66px;padding:7px 3px;border:1px solid var(--ink);box-shadow:none;border-radius:0;background:var(--paper-white);color:var(--ink);font-size:11px;letter-spacing:0}.voice-choice small{font:500 10px/1 var(--sans)}.voice-choice[aria-pressed=true]{background:var(--ink);color:var(--paper-white)}
.voice-samples{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.voice-preview{min-height:36px;min-width:44px;padding:5px 9px;border:1px solid #a6a6a6;border-radius:0;box-shadow:none;background:none;font-size:12px}.voice-preview:first-child{font-weight:700}.voice-preview:active{background:var(--ink);color:var(--paper-white)}

/* Actual dora, directly beneath the wall counter, using the shared ink tiles. */
.current-dora{position:absolute;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:4px;color:var(--ink);pointer-events:none}
.current-dora-label{flex:none;width:10px;writing-mode:vertical-rl;font:600 10px/1 var(--serif);letter-spacing:.08em}
.current-dora-tiles{display:grid;grid-template-columns:repeat(var(--current-dora-columns,1),var(--current-dora-size,22px));gap:2px}
.current-dora-tile{display:block;width:var(--current-dora-size,22px);height:calc(var(--current-dora-size,22px)*var(--current-dora-ratio,1.445));line-height:0}
.current-dora-tile .manga-tile-sprite{display:block;width:100%;height:100%;border:0;box-shadow:none;filter:none}
.current-dora-tile.dora-added{animation:dora-uncover .65s ease-out}
@keyframes dora-uncover{from{opacity:.3;transform:translateY(-4px)}to{opacity:1;transform:none}}
html[data-manga-motion=quiet] .dora-added,html[data-manga-motion=off] .dora-added{animation:none}