/* 0.16: common portrait/landscape rhythm, based on work/profile-0.16.0 references. */
:root{--ui-pine:#153d32;--ui-gold:#cfb778;--ui-paper:#f4ead1;--ui-ink:#283b2e}
html{scrollbar-color:var(--ui-gold) #173c33;scrollbar-width:thin;scroll-padding-block:5rem}
*{scrollbar-width:thin;scrollbar-color:#ad935d #244a3b}
::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:#244a3b}::-webkit-scrollbar-thumb{background:#ad935d;border-radius:9px}
.screen:not(.table){width:min(100% - 24px,1040px);margin-inline:auto}.screen input,.screen select,.screen textarea{max-width:100%;min-height:44px}.screen textarea{width:100%;font:inherit;padding:12px;border-radius:8px;resize:vertical}.screen button,.modal header button,.card-inspector header button{min-height:44px}
.screen h1,.screen h2,.modal h2{font-family:Georgia,'Yu Mincho','Noto Serif CJK JP',serif;text-wrap:balance}.screen .online-tabs{position:sticky;top:0;z-index:4;background:#153d32f5;padding:7px;border-block:1px solid #b89c5c66;display:flex;gap:6px;overflow-x:auto}.online-tabs button{flex:1 0 auto}.online-tabs button[aria-pressed=true],.profile-page button[aria-pressed=true]{background:var(--ui-gold);color:#21392c;border-color:#dccc9b}
.modal{scroll-padding-block-start:5rem}.modal>header{position:sticky;top:-1px;z-index:3;background:inherit;padding-block:8px;border-bottom:1px solid #b99f6755}.modal>header h2{margin-block:4px}.modal header button{flex-shrink:0}.modal :focus-visible,.profile-page :focus-visible{outline:3px solid #d8b963;outline-offset:3px}
.player-detail .capture-scroll,.single-table .table-capture-row .capture-scroll,.capture-yaku,.capture-scroll,.rule-example{touch-action:pan-x pan-y pinch-zoom;scrollbar-width:thin;overscroll-behavior-y:auto}.player-detail .capture-rows{min-width:0}.player-detail .capture-scroll{padding-bottom:8px}
.scroll-meter-layer{position:fixed;inset:0;pointer-events:none;z-index:2147483646}.scroll-meter{position:fixed;display:block;background:#112d32a6;border-radius:8px;box-shadow:0 0 0 1px #eedbad66;overflow:hidden;opacity:.9}.scroll-meter.y{width:3px}.scroll-meter.x{height:3px}.scroll-meter b{display:block;background:#e3c87c;border-radius:8px;position:absolute;left:0;top:0}.scroll-meter.y b{width:100%}.scroll-meter.x b{height:100%}
.inspector-layer,.inspector-layer:popover-open{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border:0;background:#071c1880;display:flex;align-items:center;justify-content:center;z-index:2147483645;color:var(--ui-paper)}
.inspector-layer::backdrop{background:transparent}.inspector-layer .card-inspector{position:relative;inset:auto;transform:none;width:min(720px,100%);max-height:100%;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--ui-gold);border-radius:16px;box-shadow:0 16px 70px #0009;background:linear-gradient(145deg,#214d3e,#112e28);color:var(--ui-paper);overflow:hidden}.inspector-layer .card-inspector[data-theme=paper]{background:#f5ecd6;color:var(--ui-ink)}
.card-inspector>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid #ba9f6555;background:inherit;flex-shrink:0}.card-inspector>header strong{font-size:1.08rem;text-align:center}.card-inspector header button{padding:7px 10px;font-size:.85rem}.card-inspector .inspector-scroll{overflow-y:auto;overscroll-behavior:contain;padding:18px;min-height:0;scroll-padding-top:12px}.inspector-scroll .inspect-card-heading{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:20px}.inspect-card-heading>.card{width:90px;min-width:90px;pointer-events:none}.inspect-card-heading h3{font-size:1.4rem;margin:0}.inspector-scroll .related-yaku h3{color:inherit}.inspector-scroll .related-yaku article,.inspector-scroll .rule-catalogue article{background:var(--ui-paper);color:var(--ui-ink);border-radius:10px;padding:12px}.inspector-scroll .rule-example{max-width:100%;padding-bottom:8px}.inspector-footnote{text-align:center;font-size:.8rem;opacity:.75}.card-inspector[data-theme=green] .help{color:#d5cfb6}.card-inspector[data-theme=green] .related-yaku article .help{color:#5c6453}
.public-effect{width:min(760px,calc(calc(100 * var(--ui-vw,1vw)) - 24px));max-height:calc(calc(100 * var(--ui-vh,1dvh)) - 24px);overflow-y:auto;scroll-padding-top:15px;padding:20px;box-sizing:border-box}.public-effect h2{margin:6px 0;font-size:clamp(24px,calc(5 * var(--ui-vw,1vw)),42px);outline:none}.public-effect .effect-meta,.public-effect .effect-player,.public-effect .effect-detail{margin:6px 0}.public-effect .effect-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:8px;max-width:620px;margin:14px auto}.public-effect .effect-evidence{width:auto;min-width:0;display:flex;align-items:center;flex-direction:column;font-size:10px;line-height:1.3}.public-effect .effect-evidence .card{width:clamp(44px,calc(9 * var(--ui-vw,1vw)),70px);max-width:100%;height:auto;aspect-ratio:2/3}.public-effect .effect-dismiss{min-height:44px;margin:8px 0 0}.public-effect .effect-evidence>span:last-child{max-width:100%;overflow-wrap:anywhere}
.profile-page{border:1px solid #bda66680;border-radius:16px;background:linear-gradient(145deg,#204a3a,#102d27);color:var(--ui-paper);overflow:hidden}.profile-cover{height:180px;position:relative;background:radial-gradient(circle at 77% 30%,#d6c27a 0 27px,transparent 28px),linear-gradient(160deg,#536249,#153c32 55%,#102820);overflow:hidden;border-bottom:1px solid var(--ui-gold)}.profile-page[data-cover=maple] .profile-cover{background:radial-gradient(ellipse at 10% 10%,#a34d35,transparent 65%),linear-gradient(150deg,#355543,#102d27)}.profile-page[data-cover=wisteria] .profile-cover{background:radial-gradient(ellipse at 80% 0%,#776386,transparent 65%),#214638}.profile-page[data-cover=moon] .profile-cover{background:radial-gradient(circle at 76% 32%,#d5c994 0 36px,transparent 37px),linear-gradient(140deg,#2d414b,#11252c)}.profile-cover>img{width:100%;height:100%;object-fit:cover}.profile-cover>.eyebrow{position:absolute;top:14px;left:18px;color:#fff9e2;text-shadow:0 2px 8px #000}
.profile-identity{text-align:center;padding:0 20px 20px;position:relative}.profile-avatar{width:96px;height:96px;border:3px solid var(--ui-gold);border-radius:50%;overflow:hidden;background:#1c4133;margin:-48px auto 12px;box-shadow:0 4px 20px #0006;display:grid;place-items:center}.profile-avatar>img{width:100%;height:100%;object-fit:cover}.profile-avatar .card{width:66px;transform:scale(1.5);pointer-events:none}.profile-identity h2{font-size:1.65rem;margin:6px 0}.profile-identity small{opacity:.8}.profile-bio{white-space:pre-wrap;overflow-wrap:anywhere}.profile-edit-link{display:inline-block;padding:12px 28px;border:1px solid var(--ui-gold);border-radius:8px;color:#f5dea1;text-underline-offset:4px;min-height:44px;box-sizing:border-box}
.profile-summary{display:grid;grid-template-columns:repeat(3,1fr);margin:0 18px 22px;padding:18px 8px;border:1px solid var(--ui-gold);border-radius:10px;background:var(--ui-paper);color:var(--ui-ink)}.profile-summary>div{display:flex;flex-direction:column;align-items:center;gap:5px;border-right:1px solid #b99f6750}.profile-summary>div:last-child{border:0}.profile-summary b{font-size:1.8rem;font-family:Georgia,serif}.profile-summary span{font-size:.8rem}.profile-statistics,.profile-editor{padding:0 20px 22px}.profile-statistics h3{margin:8px 0;color:#e2cb91}.profile-page .help{color:#d2cbb3}.profile-scope,.profile-rules{display:flex;gap:6px;flex-wrap:wrap}.profile-scope button,.profile-rules button{flex:1;min-width:max-content;font-size:.85rem}.profile-role{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;background:var(--ui-paper);color:var(--ui-ink);padding:14px;border:1px solid var(--ui-gold);border-radius:10px}.profile-role>b{font-size:1.3rem}.profile-role-cards{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap}.profile-role-cards .card{width:38px;pointer-events:none}.profile-empty{padding:20px;text-align:center;border:1px dashed #b7a57280;border-radius:10px}.profile-editor{border-top:1px solid #b7a57260;padding-top:14px}.profile-editor summary{padding:12px;cursor:pointer;min-height:44px}.profile-editor label{display:flex;flex-direction:column;gap:8px}.profile-editor input[type=checkbox],.profile-editor input[type=radio]{min-height:20px;width:20px}.profile-avatar-options{display:flex;gap:12px;flex-wrap:wrap}.profile-avatar-options label{align-items:center}.profile-avatar-options .card{width:48px;pointer-events:none}.profile-page textarea{background:#f5ecd6;color:#24392b}
@container app-viewport (min-width:760px){.screen.setup #new-game{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}.setup #new-game>.seat-setup,.setup #new-game>details,.setup #new-game>.primary{grid-column:1/-1}.online-screen>.row.between{padding:8px 0}.profile-page{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.4fr)}.profile-cover{grid-column:1/-1;height:210px}.profile-identity{grid-column:1;grid-row:2}.profile-summary{grid-column:1;align-self:start;margin-top:0}.profile-statistics{grid-column:2;grid-row:2/span 2;padding-top:20px;border-left:1px solid #b7a57240}.profile-editor{grid-column:1/-1}}
@container app-viewport (orientation:landscape) and (max-height:560px){.inspector-layer .card-inspector{width:min(900px,100%)}.inspector-scroll .inspect-card-heading{float:left;display:flex;flex-direction:column;width:24%;margin:0 20px 12px 0;gap:8px}.inspector-scroll .related-yaku{overflow:hidden}.public-effect{padding:12px 20px}.public-effect h2{font-size:26px}.public-effect .effect-cards{grid-template-columns:repeat(auto-fit,minmax(42px,1fr));max-width:720px;gap:6px;margin:8px auto}.public-effect .effect-evidence .card{width:44px}.public-effect .effect-player,.public-effect .effect-detail,.public-effect .effect-meta{font-size:12px;margin:2px}.profile-cover{height:120px}}
@container app-viewport (max-width:420px){.card-inspector>header{padding:8px}.card-inspector>header strong{font-size:.95rem}.inspector-scroll .inspect-card-heading{gap:14px}.card-inspector .inspector-scroll{padding:14px}.profile-statistics,.profile-editor{padding-inline:14px}.profile-cover{height:150px}.profile-summary{margin-inline:14px}.public-effect{padding:14px}.public-effect .effect-cards{gap:6px}}
@media(prefers-reduced-motion:no-preference){.inspector-layer .card-inspector{animation:ui-enter .16s ease-out}.profile-page{animation:ui-enter .2s ease-out}@keyframes ui-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}}

.screen.setup,.screen.online-screen{max-width:1040px}.online-screen[data-area=profile]{gap:12px}.online-screen[data-area=profile]>h1{font-size:1.6rem;margin:4px 0}.single-table .capture-yaku,.single-table .public-hand-cards,.single-table .table-capture-row .capture-scroll,.rule-tabs,.hand-cards,.intro-cards{scrollbar-width:thin;touch-action:pan-x pan-y pinch-zoom}
@container app-viewport (min-width:760px){.profile-cover{height:170px}.screen.online-screen[data-area=room]>#online-create{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}.screen.online-screen[data-area=room]>#online-create>h2,.screen.online-screen[data-area=room]>#online-create>.primary,.screen.online-screen[data-area=room]>#online-create>fieldset{grid-column:1/-1}}

.inspector-layer .card-inspector[data-detail=compact]{width:min(420px,100%)}.card-inspector[data-detail=compact] .inspect-card-heading{float:none;flex-direction:row;width:auto;margin:0;gap:16px}.public-effect .effect-evidence .card{min-width:0}.public-effect .effect-evidence{gap:4px}.public-effect[data-card-count] h2{font-size:clamp(24px,calc(5 * var(--ui-vw,1vw)),42px)}.public-effect.many-cards .effect-cards{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}.public-effect.many-cards .effect-evidence .card{width:44px}.public-effect.many-cards h2{font-size:28px}
@container app-viewport (orientation:landscape) and (max-height:560px){.public-effect[data-card-count] h2{font-size:26px}}
.scroll-meter-layer{overflow:hidden}.scroll-meter{position:absolute}
.public-effect.many-cards .effect-evidence>span:last-child{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.koi-ending{padding:12px 16px;border:1px solid #a28c4c;border-radius:12px;background:#103a30;color:#f1dfac;text-align:left;line-height:1.5}.koi-ending ul{margin:6px 0 0;padding-left:20px}.koi-ending li{overflow-wrap:anywhere}.public-effect .koi-ending{max-width:560px;margin:10px auto}.own-score small,.opponent-heading strong small{white-space:normal}
@container app-viewport (orientation:landscape) and (max-height:560px){.public-effect .koi-ending{padding:8px 12px;font-size:13px;margin:5px auto}}

/* Always reachable from every settings category, sharing the sticky close row. */
.modal.settings-dialog>header{top:0;flex-wrap:wrap;gap:6px;z-index:6}
.settings-header-actions{display:flex;gap:6px;margin-left:auto;align-items:center}
.settings-header-actions button{font-size:12px;white-space:nowrap;padding:6px 9px}
@media(max-width:480px){.modal.settings-dialog>header h2{font-size:19px}.settings-header-actions{gap:4px}.settings-header-actions button{padding:5px 7px;font-size:11px}}

/* Settlement cash and the debt-adjusted equation must be readable together. */
.club-settlement{display:block;min-width:0}
.club-settlement-net{display:block;margin-top:5px;max-width:100%;font:12px/1.55 sans-serif;white-space:normal;color:#f1dfb0}
.club-settlement-net strong{font:inherit;font-weight:700;color:#fff1ce}