:root{--ivory:#f6f0e1;--surface:#fbf7ee;--forest:#1f4a3a;--forest-deep:#163829;--brass:#a8874a;--ink:#2a2620;--muted:#5e574b;--red:#b23a30;--line:#a18c60;--serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;--sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--ivory);font-family:var(--sans);font-size:20px;line-height:1.55;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:4px solid var(--brass);outline-offset:5px}[hidden]{display:none!important}.screen{min-height:100svh}.home-header{max-width:1440px;margin:auto;padding:30px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;gap:18px;align-items:center;text-decoration:none;color:var(--forest);font-family:var(--serif);font-weight:800;font-size:32px;letter-spacing:.06em}.brand-tile{display:grid;place-items:center;width:44px;height:58px;border:2px solid var(--forest);border-radius:5px;line-height:1;font-size:36px}.quiet-button{border:1.5px solid var(--line);border-radius:10px;min-height:58px;padding:10px 26px;background:transparent;color:var(--ink);font-weight:600}.quiet-button:hover{background:#eae3d3}.home-main{max-width:1336px;margin:28px auto 20px;padding:0 48px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px}.welcome h1{font-family:var(--serif);font-size:clamp(44px,5.4vw,76px);line-height:1.55;font-weight:800;letter-spacing:-.045em;margin:0 0 18px;white-space:nowrap}.welcome-copy{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:.03em;margin:0}.hero-tiles{width:100%;height:auto;max-height:335px;object-fit:contain;display:block;margin:12px 0 0}.home-main form{padding:10px 0}fieldset{padding:0;margin:0;border:0;min-width:0}legend{font-family:var(--serif);font-size:28px;font-weight:800;letter-spacing:.025em;margin-bottom:20px}.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.choice{position:relative;cursor:pointer;touch-action:manipulation}.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}.choice-content{display:flex;align-items:center;gap:16px;min-height:88px;border:1.5px solid var(--line);border-radius:10px;padding:14px 20px;font-family:var(--serif);font-size:30px;font-weight:700;background:rgba(255,255,255,.14)}.choice input:checked+.choice-content{border:2px solid var(--forest);padding:13.5px 19.5px;background:#edf0e7}.choice input:focus-visible+.choice-content{outline:4px solid var(--brass);outline-offset:5px}.radio-mark{width:36px;height:36px;border:2px solid #8b784e;border-radius:50%;flex-shrink:0;display:grid;place-items:center}.choice input:checked+.choice-content .radio-mark{background:var(--forest);border-color:var(--forest)}.choice input:checked+.choice-content .radio-mark:after{content:"";display:block;width:15px;height:8px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg) translate(1px,-2px)}.choice-content small{font-family:var(--sans);font-size:17px;display:block;font-weight:400;line-height:1.4;color:var(--muted)}.length-field{margin-top:34px}.length-field .choice-content{font-size:26px}.primary-button{min-height:72px;border:0;border-radius:10px;background:var(--forest);color:var(--surface);padding:16px 24px;font-size:25px;font-weight:700;letter-spacing:.02em}.primary-button:hover{background:var(--forest-deep)}.primary-button:disabled{background:#d8d7cb;color:#65665d}#start-button{display:flex;justify-content:center;align-items:center;gap:28px;width:100%;margin-top:34px;min-height:88px;font-family:var(--serif);font-size:32px}#start-button span{font-family:var(--sans)}.reassurance{font-size:18px;margin:22px 0 0;text-align:center;line-height:1.6}.reassurance br{display:none}.home-footer{max-width:1320px;border-top:1px solid var(--line);margin:26px auto 0;padding:18px 16px 22px;text-align:center;font-size:19px}.home-footer p{margin:0}.home-footer a{display:inline-block;font-size:13px;color:var(--muted);margin-top:12px;text-underline-offset:4px}
#game-screen{background:#e9e6da;padding:0 18px 20px}.game-header{max-width:1320px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:16px}.game-heading{text-align:center;display:flex;flex-direction:column}.game-heading strong{font-family:var(--serif);color:var(--forest);font-size:25px}.game-heading span{font-size:16px;color:var(--muted)}.game-header button{min-height:52px;font-size:19px;padding:8px 20px;background:var(--surface)}.game-layout{max-width:1320px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:20px;align-items:start}.table-column{min-width:0}#table-stage{width:100%;position:relative;border:8px solid #25483a;border-radius:14px;background:#154;overflow:hidden;box-shadow:0 5px 0 #18382b}#board{display:block!important;position:absolute;width:800px;height:680px!important;transform-origin:0 0}#board>.board{color:white;border-radius:4px;box-sizing:content-box}#board>.board *{box-sizing:content-box}#board>.board>.player{opacity:1;background:#0d3626;color:#fff;font-size:23px}#board .score{background:#123527;border:1px solid #7b9567}#board .score .defen div{font-size:20px;font-weight:bold}#board .score .defen div.lunban{color:#f5df8b}#board .shoupai.main .bingpai .selected,#board .shoupai.main .bingpai .senior-selected{outline:4px solid #f7d268;transform:translateY(-10px);opacity:1}#board .player-button,#board .select-mianzi{display:none!important}#board .summary,#board .hule-dialog{background:rgba(12,34,24,.75)}#board .kaiju{background:rgba(12,34,24,.8)}.hand-area{margin-top:14px;background:var(--surface);border-radius:10px;padding:10px 14px 14px}.hand-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:16px;margin-bottom:8px}.hand-label strong{color:var(--forest)}.hand-label span{font-size:14px;color:var(--muted)}#hand-tray{display:flex;gap:3px;min-height:68px;overflow-x:auto;padding:5px 3px 3px;align-items:flex-end}#hand-tray button{flex:0 0 auto;min-width:44px;min-height:64px;background:transparent;border:2px solid transparent;border-radius:5px;padding:0;line-height:0;transition:transform .12s}#hand-tray button img{display:block;width:42px;height:60px;object-fit:fill}#hand-tray button:disabled{opacity:.45}#hand-tray button[aria-pressed="true"],#hand-tray button.selected{border-color:#a47a28;transform:translateY(-4px);background:#e7cd8a;box-shadow:0 0 0 2px #e7cd8a}#action-dock{min-height:390px;background:var(--surface);border-radius:12px;padding:24px 18px;display:flex;flex-direction:column;align-items:stretch;gap:14px}#action-dock p{margin:0}#status-text{font-size:23px;font-weight:700;line-height:1.6;min-height:80px;overflow-wrap:anywhere}.turn-indicator{color:var(--forest);font-size:18px}#confirm-discard{font-size:21px;padding:16px 8px;min-height:76px}#extra-actions{display:flex;flex-direction:column;gap:10px}#extra-actions button{width:100%;min-height:60px;border:2px solid var(--forest);border-radius:8px;background:#edf0e7;color:var(--forest);font-size:22px;font-weight:700;padding:12px 8px}#extra-actions button:hover{background:#dae3d5}#extra-actions button[data-action="rong"],#extra-actions button[data-action="zimo"]{background:var(--red);border-color:var(--red);color:white}.dock-note{font-size:16px;line-height:1.8;color:var(--muted);padding:14px 0}.help-button{white-space:nowrap}#action-dock .help-button{font-size:18px;padding:10px 4px}.orientation-hint{display:none;color:var(--muted);text-align:center;font-size:16px;margin:0 0 12px}
dialog{border:1px solid #c6b999;border-radius:18px;background:var(--surface);color:var(--ink);padding:0;max-width:min(680px,calc(100vw - 32px));width:100%;max-height:calc(100svh - 40px);box-shadow:0 24px 100px #10251944}dialog::backdrop{background:rgba(10,28,20,.72)}.dialog-content{padding:32px 40px}dialog h2{font-family:var(--serif);font-size:32px;margin:0 0 20px}dialog p{font-size:19px}.dialog-actions{display:flex;flex-direction:column;gap:16px;margin-top:28px}.dialog-actions button{min-height:64px}.danger-button{border:2px solid var(--red);border-radius:10px;color:var(--red);background:transparent;font-size:23px;padding:14px 24px}.help-steps{padding-left:28px;font-size:21px}.help-steps li{padding-left:6px;margin-bottom:20px}.help-steps p{font-size:17px;margin:6px 0}.help-note{border-top:1px solid #d5cbb4;padding-top:18px;font-size:15px;line-height:1.8}.install-help{font-size:17px;margin:20px 0}.install-help summary{cursor:pointer}.install-help p{font-size:16px}#close-help{width:100%;margin-top:12px}.result-main{max-width:700px;margin:30px auto;padding:24px;text-align:center}.result-main h1{font-family:var(--serif);font-size:48px;margin:12px 0 36px}.result-main>p{color:var(--muted)}#result-list{list-style:none;padding:0}#result-list li{display:flex;align-items:center;gap:18px;padding:20px;border-bottom:1px solid #c8bea5;text-align:left}#result-list li.is-you{background:#e4ebdd;border-radius:10px}#result-list .rank{font-family:var(--serif);font-size:28px;color:var(--forest);min-width:60px}#result-list .player-name{font-weight:bold;font-size:26px}#result-list .points{margin-left:auto;font-size:25px;font-variant-numeric:tabular-nums}.result-buttons{display:grid;gap:14px;margin-top:36px}#error-banner{position:fixed;z-index:20;bottom:16px;left:16px;right:16px;background:var(--surface);border:3px solid var(--red);border-radius:12px;padding:18px;color:var(--ink)}#error-banner button{padding:12px;background:var(--forest);color:white;border:0;border-radius:6px}
@media(min-width:1440px){.home-main{margin-top:56px}.home-footer{margin-top:44px}}
@media(max-width:1100px){.home-header{padding:24px 30px}.home-main{padding:0 36px;gap:40px;margin-top:20px}.welcome h1{font-size:51px}.welcome-copy{font-size:22px}.choice-content{font-size:26px;padding:12px;gap:10px;min-height:80px}.choice input:checked+.choice-content{padding:11.5px}.length-field .choice-content{font-size:22px}.radio-mark{width:30px;height:30px}legend{font-size:25px}.home-footer{margin-left:30px;margin-right:30px}.game-layout{grid-template-columns:minmax(0,1fr) 200px;gap:14px}#action-dock{padding:20px 14px}#status-text{font-size:21px}#confirm-discard{font-size:19px}#hand-tray{gap:1px}#hand-tray button{min-width:40px}#hand-tray button img{width:38px;height:55px}.hand-label span{display:none}}
@media(max-width:900px){.home-header{padding:20px;gap:12px}.brand{font-size:23px;gap:10px}.brand-tile{width:32px;height:44px;font-size:28px}.home-header .quiet-button{padding:8px 16px;min-height:48px;font-size:17px}.home-main{display:block;padding:0 24px;margin-top:14px}.welcome{position:relative;padding:12px 0 20px}.welcome h1{font-size:clamp(34px,6vw,48px);line-height:1.5;position:relative;z-index:1;margin-bottom:10px}.welcome-copy{font-size:18px;position:relative;z-index:1}.hero-tiles{position:absolute;right:-4px;bottom:32px;width:38%;max-height:140px;opacity:.8;margin:0}.home-main form{max-width:560px;margin:auto;padding-top:18px}legend{font-size:22px;margin-bottom:14px}.choice-content{font-size:28px;padding:14px;min-height:80px}.choice input:checked+.choice-content{padding:13.5px}.length-field{margin-top:26px}.length-field .choice-content{font-size:23px}#start-button{font-size:28px;min-height:78px;margin-top:28px}.reassurance{font-size:16px}.home-footer{font-size:16px;margin:26px 24px 0;padding:16px 0}.game-header{gap:8px;padding:12px 0}.game-header button{font-size:16px;padding:10px;min-height:48px}.game-heading strong{font-size:18px}.game-heading span{font-size:13px}#game-screen{padding:0 10px 14px}.orientation-hint{display:block}.game-layout{display:flex;flex-direction:column;gap:14px}.table-column{width:100%}#table-stage{border-width:5px;border-radius:9px}#action-dock{width:100%;min-height:0;display:grid;grid-template-columns:1fr 1fr;padding:16px;gap:10px}.turn-indicator,.dock-note{display:none}#status-text{grid-column:1/-1;min-height:0;font-size:20px}#extra-actions{grid-column:1/-1;display:flex;flex-direction:row;flex-wrap:wrap}#extra-actions button{width:auto;flex:1;min-height:52px;font-size:20px}#confirm-discard,#next-hand{font-size:20px;min-height:64px}#action-dock .help-button{font-size:17px;min-height:64px}.hand-area{padding:8px;margin-top:12px}#hand-tray{gap:2px}#hand-tray button{min-width:44px}#hand-tray button img{width:42px;height:60px}.hand-label{font-size:17px}.hand-label span{display:block;font-size:12px}.dialog-content{padding:26px 22px}dialog h2{font-size:27px}.help-steps{font-size:19px}.help-steps p{font-size:16px}.result-main h1{font-size:38px}#result-list .points{font-size:21px}#result-list .player-name{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Keep the complete table and the large hand within a landscape iPad. */
#table-stage{margin-inline:auto}
#hand-tray button{min-width:44px;min-height:64px}
#hand-tray button img{width:42px;height:60px}
#hand-tray button.is-draw{margin-left:10px}
#board .shoupai.main .bingpai .selected-tile{outline:4px solid #f7d268;transform:translateY(-10px);opacity:1}
#extra-actions button.winning{background:var(--red);border-color:var(--red);color:#fff}
#extra-actions button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
@media(max-width:900px){.reassurance br{display:block}}
@media(max-width:600px){.hand-area:after{content:"手牌は左右に動かせます";display:block;text-align:right;font-size:13px;color:var(--muted);margin-top:5px}}

/* Family portraits: the original photograph is cropped only by CSS. */
.family-avatar{display:inline-flex;align-items:center;justify-content:center;color:#1f4a3a;font-family:var(--sans);font-size:22px;font-weight:700;flex:0 0 auto;width:56px;height:56px;border-radius:50%;background-image:var(--avatar-image,none);background-repeat:no-repeat;background-size:cover;background-position:center;background-color:#e7decd;box-shadow:0 0 0 2px #d1b987;vertical-align:middle}
.name-choices .choice-content{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:146px;padding:14px 10px 10px}
.name-choices .choice input:checked+.choice-content{padding:13.5px 9.5px 9.5px}
.name-choices .family-avatar{width:64px;height:64px}
.name-choices .radio-mark{position:absolute;top:10px;right:10px;width:26px;height:26px}
#board>.board>.player[data-avatar-name]{height:38px;line-height:38px;width:112px;padding:1px 10px 1px 52px;overflow:hidden}
#board>.board>.player[data-avatar-name]::before{content:attr(data-avatar-initials);display:flex;align-items:center;justify-content:center;font-size:18px;position:absolute;top:3px;left:8px;width:34px;height:34px;border-radius:50%;background-image:var(--avatar-image,none);background-repeat:no-repeat;background-size:cover;background-position:center;box-shadow:0 0 0 1px #d1b987}
#result-list .family-avatar{width:52px;height:52px}
@media(max-width:600px){.name-choices .choice-content{min-height:138px}.name-choices .family-avatar{width:60px;height:60px}#result-list li{gap:10px;padding:16px 8px}#result-list .family-avatar{width:42px;height:42px}#result-list .rank{min-width:44px;font-size:23px}#result-list .player-name{font-size:21px}#result-list .points{font-size:19px}}
/* Family recordings use the same large, calm controls as the game. */
#open-voices{margin-bottom:16px}.voice-main{max-width:1000px;margin:0 auto;padding:12px 28px 56px}.voice-main h1{font-family:var(--serif);color:var(--forest);font-size:44px;margin:8px 0 14px}.eyebrow{font-size:17px;color:var(--muted);margin:0}.voice-notice{font-size:16px;line-height:1.7;background:#eee5d1;border-left:4px solid var(--brass);padding:14px 18px}.voice-note{font-size:16px;line-height:1.8;color:var(--muted)}#voice-message{min-height:32px;color:var(--forest);font-size:18px}.voice-person-row{display:flex;align-items:center;gap:16px;margin:28px 0}.voice-person-row select{font:inherit;min-height:58px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:8px 40px 8px 16px;max-width:100%}.voice-slots{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}.voice-card{background:var(--surface);border:1px solid #c8b994;border-radius:14px;padding:22px}.voice-card h2{font-family:var(--serif);font-size:27px;margin:0 0 8px;color:var(--forest)}.voice-card-state{font-size:16px;color:var(--muted);margin:4px 0}.voice-example{font-size:18px;margin:8px 0 20px}.voice-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.voice-actions button,.voice-actions a{font-size:18px;min-height:56px;padding:12px 18px}.voice-actions a{text-decoration:none}.text-button{border:0;background:none;text-decoration:underline;color:var(--muted)}#invite-result{margin-top:20px;padding:20px;background:#e7eddf;border-radius:12px}#invite-result label{display:block;font-size:17px}#invite-url{display:block;width:100%;font:inherit;font-size:16px;padding:12px;margin:10px 0 16px;border:1px solid var(--line);border-radius:6px}#voice-login{margin-top:36px;border-top:1px solid var(--line);padding-top:28px}#voice-login a{display:inline-block;font-size:18px;text-decoration:none}.file-picker{display:block;margin:24px 0;font-size:18px}.file-picker input{display:block;max-width:100%;font:inherit;font-size:16px;padding:12px 0}#record-preview{display:block;width:100%;margin-top:22px}#record-status{min-height:58px;color:var(--forest)}.voice-caption{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:5;padding:8px 20px;background:var(--forest-deep);color:white;border-radius:30px;box-shadow:0 3px 18px #0003;pointer-events:none;font-size:18px;max-width:90vw;margin:0}#voice-person-avatar .family-avatar{width:68px;height:68px}@media(max-width:600px){.voice-main{padding:8px 20px 40px}.voice-main h1{font-size:34px}.voice-slots{grid-template-columns:1fr}.voice-person-row{gap:10px;flex-wrap:wrap}.voice-card{padding:20px}.voice-notice{font-size:15px}}
.home-audio{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.home-audio button{flex:0 0 auto;font-size:18px;min-height:52px;padding:10px 16px}
.home-audio span{font-size:16px;color:var(--muted);line-height:1.5}
@media(max-width:500px){.home-audio{align-items:flex-start}.home-audio span{font-size:14px}}
/* The existing tabletop seats carry their own photo, name and score. */
.brand-icon{display:block;width:56px;height:56px;object-fit:contain;flex:0 0 auto}
.game-subtitle{display:flex;flex-wrap:wrap;justify-content:center;column-gap:14px}
.game-header{padding-block:8px}
.game-heading strong{line-height:1.25}
.game-heading span{line-height:1.4}
@media(max-width:500px){.game-subtitle{flex-direction:column}}
#board>.board>.player.table-player{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:30px 30px;column-gap:8px;align-items:center;box-sizing:border-box;width:244px;height:64px;padding:0 6px;border:2px solid #bdad84;border-radius:8px;background:#fbf7ee;color:#163829;opacity:1;font-family:var(--sans);line-height:1;overflow:hidden;text-overflow:clip}
#board>.board>.table-player>*{box-sizing:border-box}
#board>.board>.table-player .family-avatar{grid-column:1;grid-row:1/3;width:56px;height:56px;box-shadow:0 0 0 1px #a8874a}
#board>.board>.table-player .table-player-name{grid-column:2;grid-row:1;font-size:30px;line-height:30px;font-weight:800;white-space:nowrap}
#board>.board>.table-player .table-player-points{grid-column:2;grid-row:2;font-family:Arial,var(--sans);font-size:30px;line-height:30px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
#board>.board>.table-player .table-player-seat{position:absolute;right:6px;top:7px;font-size:18px;line-height:20px;font-weight:600;white-space:nowrap}
#board>.board>.table-player.table-player-you{border-color:#dfbb57}
#board>.board>.table-player.main{transform:translate(64px,554px)}
#board>.board>.table-player.duimian{transform:translate(494px,62px)}
#board>.board>.table-player.shangjia{transform:translate(64px,166px);width:230px}
#board>.board>.table-player.xiajia{transform:translate(506px,434px);width:232px}
/* Setup remains on the home screen; the tabletop keeps all of its space. */
.difficulty-field{margin-top:24px}.difficulty-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.difficulty-choices .choice-content{justify-content:center;min-height:62px;padding:12px 8px;font-family:var(--sans);font-size:21px}.difficulty-choices .choice input:checked+.choice-content{padding:11.5px 7.5px}
.saved-game-panel{margin-top:24px;padding:16px;background:#e7eddf;border:1.5px solid var(--forest);border-radius:12px}.saved-game-panel p{font-size:17px;margin:0 0 10px}.saved-game-panel button{width:100%;min-height:66px}.save-message{font-size:16px;color:var(--muted);line-height:1.6;margin:12px 0 0}.saved-game-panel:not([hidden])~#start-button{margin-top:14px;min-height:64px;font-size:25px;background:var(--surface);color:var(--forest);border:1.5px solid var(--forest)}
.opponent-cards,.self-voice-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 32px}.opponent-card{border:1.5px solid #c8b994;background:var(--surface);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px}.opponent-person{display:flex;align-items:center;gap:14px;font-size:26px;font-weight:700}.opponent-person .family-avatar{width:64px;height:64px;flex:none}.opponent-toggle{display:flex;align-items:center;gap:12px;min-height:58px;cursor:pointer;font-size:19px;flex-wrap:wrap}.opponent-toggle input{appearance:none;-webkit-appearance:none;width:56px;height:32px;border-radius:18px;background:#8a867c;border:2px solid #716d64;position:relative;flex:none;cursor:pointer;margin:0}.opponent-toggle input:before{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}.opponent-toggle input:checked{background:var(--forest);border-color:var(--forest)}.opponent-toggle input:checked:before{transform:translateX(24px)}.opponent-toggle input:focus-visible{outline:4px solid var(--brass);outline-offset:4px}.opponent-toggle-state{font-weight:700;color:var(--forest)}.opponent-card button{font-size:18px;min-height:54px;padding:10px 14px}.voice-editor{border-top:1px solid var(--line);padding-top:24px}#opponent-message{min-height:30px;font-size:18px;color:var(--forest)}
@media(min-width:901px){.home-header{padding-block:20px}.home-main{margin-top:8px;gap:48px}.home-main legend{font-size:25px;margin-bottom:12px}.name-choices .choice-content{min-height:116px;padding:10px;gap:5px}.name-choices .choice input:checked+.choice-content{padding:9.5px}.name-choices .family-avatar{width:52px;height:52px}.length-field{margin-top:22px}.length-field .choice-content{min-height:72px;font-size:23px}.difficulty-field{margin-top:22px}#start-button{margin-top:24px;min-height:76px}.reassurance{margin-top:12px}.home-audio{margin-top:12px}}
@media(max-width:600px){.opponent-cards,.self-voice-cards{grid-template-columns:1fr}.difficulty-choices .choice-content{font-size:19px}.saved-game-panel p{font-size:16px}}

.save-warning { padding: 12px; border: 2px solid #a24719; border-radius: 10px; color: #783213; background: #fff4e7; font-size: 17px; line-height: 1.5; }
.opponent-person h3 { margin: 0; font-size: 24px; }

/* Recording preparation and processed preview. */
#record-dialog .record-flow{font-size:16px;line-height:1.7;color:var(--muted)}#record-countdown{text-align:center;font-size:clamp(56px,12vw,88px);font-weight:800;line-height:1.2;margin:16px 0;color:var(--forest);font-variant-numeric:tabular-nums}#record-dialog .record-example{font-size:clamp(23px,5vw,30px);font-weight:700;line-height:1.6;padding:18px;background:#e7eddf;border-radius:12px}#record-preview-label{font-size:20px;font-weight:700;margin:24px 0 4px}#record-preview-label+#record-preview{margin-top:8px}

/* Household setup shares the game's calm, large-touch controls. */
.household-main { max-width: 880px; margin: 0 auto; padding: 24px 24px 64px; }
.household-main h1 { font-size: clamp(28px, 4vw, 38px); margin: 8px 0 24px; }
.household-main h2 { font-size: 25px; margin: 24px 0 14px; }
.household-main form, #household-device-tools { display: grid; gap: 16px; }
.household-main label, #device-settings-dialog label { display: grid; gap: 8px; font-size: 18px; font-weight: 700; }
.household-main input:not([type=file]), .household-main select, #device-settings-dialog select { width: 100%; min-height: 52px; box-sizing: border-box; border: 1px solid #abb8ae; border-radius: 10px; background: #fffefa; color: #223d31; padding: 10px 14px; font: inherit; font-size: 20px; }
.household-main fieldset { padding: 18px; border: 1px solid #c6cfc5; border-radius: 14px; display: grid; gap: 14px; }
#household-create, #household-edit > section, .household-person { background: #fffdf5; border: 1px solid #d9dfd3; border-radius: 18px; padding: 24px; margin: 20px 0; }
.household-main [hidden] { display: none !important; }
#household-people { display: grid; gap: 12px; }
.household-person { margin: 0; display: grid; gap: 14px; min-width: 0; }
.person-heading { display: flex; gap: 18px; align-items: center; }
.person-heading img { object-fit: cover; border-radius: 50%; flex: 0 0 80px; }
.person-heading h3 { margin: 0; overflow-wrap: anywhere; }
.household-person .photo-preview { width: 160px; height: 160px; border-radius: 12px; }
.household-main .quiet-button { white-space: normal; text-align: center; }
#household-links { display: flex; gap: 12px; flex-wrap: wrap; }
#household-message { min-height: 1.5em; white-space: pre-line; }
#household-add-person { padding-top: 24px; }
#household-back-index { display: inline-block; margin-top: 24px; }
#device-settings-dialog label { margin: 18px 0; }
#device-settings-dialog .setting-check { display: flex; align-items: center; gap: 12px; }
#device-settings-dialog input[type=checkbox] { width: 28px; height: 28px; accent-color: #1f4a3a; }
#device-settings-dialog input[type=range] { width: 100%; min-height: 40px; accent-color: #1f4a3a; }
.family-avatar { background-size: cover; background-position: center; }
html[data-display=large] .home-main, html[data-display=large] .voice-main { font-size: 21px; }
html[data-display=large] .choice-content { font-size: 26px; }
html[data-display=large] #board>.board>.table-player .table-player-name { font-size: 34px; line-height: 34px; }
html[data-display=large] #board>.board>.table-player .table-player-points { font-size: 34px; line-height: 34px; }
html[data-display=large] #status-text { font-size: 26px; }
html[data-display=large] .quiet-button { font-size: 22px; }
@media (max-width: 600px) {
  .household-main { padding: 12px 16px 48px; }
  #household-create, #household-edit > section, .household-person { padding: 18px; }
  .home-footer { gap: 14px; flex-wrap: wrap; }
  .household-main .primary-button { font-size: 22px; }
}

.home-footer > .quiet-button { margin: 4px 6px; }
.pace-field { margin-top: 20px; }

html[data-display=large] #board>.board>.player.table-player { height: 72px; grid-template-rows: 34px 34px; }
#board>.board>.table-player .table-player-name { overflow: hidden; text-overflow: ellipsis; padding-right: 28px; }
html[data-display=large] #board>.board>.table-player.main { transform: translate(64px, 546px); }

/* A single preparation step at a time; the playing table keeps its full space. */
#setup-later{white-space:nowrap;flex-shrink:0}#onboarding-screen .brand{min-width:0}#onboarding-screen .brand span{overflow-wrap:anywhere}
.setup-main{max-width:880px;margin:0 auto;padding:12px 28px 64px}.setup-main h1{font:800 clamp(28px,4vw,38px)/1.45 var(--serif);margin:24px 0 12px}.setup-main h2{font-size:23px;margin:0 0 10px;overflow-wrap:anywhere}.setup-description{font-size:21px;line-height:1.8;margin:0 0 20px}.setup-progress{font-size:18px;font-weight:700;color:var(--forest);margin:10px 0}.setup-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;margin:0;padding:0}.setup-steps li{display:flex;align-items:center;gap:7px;border-bottom:4px solid #d6d5c7;padding:12px 2px;color:var(--muted);font-size:16px}.setup-steps li[aria-current=step]{color:var(--forest);border-color:var(--forest);font-weight:800}.setup-steps li>span:first-child{font-variant-numeric:tabular-nums}.setup-people{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}.setup-person,.setup-panel{border:1px solid #d9dfd3;border-radius:16px;background:#fffdf5;padding:22px;min-width:0}.setup-panel{margin:20px 0}.setup-person-heading{display:flex;align-items:center;gap:14px}.setup-person-heading img{border-radius:50%;object-fit:cover;flex-shrink:0}.setup-person-heading h2{margin:0}.setup-person-heading p{margin:2px 0}.setup-person-state{font-size:18px;line-height:1.7}.setup-note{color:var(--muted);font-size:16px;line-height:1.8}.setup-refresh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:16px}.setup-link-label{display:grid;gap:8px;font-size:17px;margin:18px 0 8px}.setup-link-label input{min-width:0;width:100%;min-height:56px;font:16px var(--sans);padding:12px;background:white;border:1px solid var(--line);border-radius:8px}.setup-link-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.setup-main .quiet-button{font-size:18px;min-height:56px;padding:12px 18px;white-space:normal}.setup-main .text-button{display:inline-block;min-height:48px;padding:12px 0;font-size:17px;text-underline-offset:4px}.setup-actions{display:grid;gap:10px;margin-top:30px}.setup-actions .primary-button{width:100%;font-size:23px;min-height:64px}.setup-instructions{padding-left:26px;font-size:20px;line-height:1.9}.setup-instructions li{padding-left:6px;margin:12px 0}.setup-main details{padding:16px 0;line-height:1.8;font-size:18px}.setup-main summary{cursor:pointer;min-height:48px}.setup-environment{background:#f4ead2;border-radius:10px;padding:16px;font-size:17px;line-height:1.8}#setup-status{white-space:pre-line;line-height:1.7;font-size:18px}#setup-title:focus{outline:none}#household-open-onboarding{margin:16px 0}.setup-first-step{font-size:18px;color:var(--forest);font-weight:700}
@media(max-width:600px){.setup-main{padding:8px 20px 40px}.setup-people{grid-template-columns:1fr}.setup-steps li{font-size:13px;display:block;padding:8px 0}.setup-steps li span{display:block}.setup-steps li>span:first-child{font-size:18px}.setup-person,.setup-panel{padding:18px}.setup-actions .primary-button{font-size:21px}.setup-description{font-size:19px}.setup-link-actions .quiet-button{flex:1}.setup-main .setup-instructions{font-size:18px}.setup-main .text-button{line-height:1.7}}

/* Family management stays outside the playing table. */
.household-management { min-width: 0; line-height: 1.75; }
/* Native input widths must not enlarge a person's implicit grid column. */
.household-person { grid-template-columns: minmax(0, 1fr); }
.household-person form, .household-person label { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.household-person input, .household-person button { min-width: 0; max-width: 100%; }
.household-management h3 { font-size: 23px; margin: 16px 0 8px; }
.household-management p { overflow-wrap: anywhere; }
.household-management-note { font-size: 16px; color: var(--muted); line-height: 1.8; }
.household-management button, .household-management input { min-height: 56px !important; font-size: 18px; }
.household-management button { white-space: normal; }
.household-device-card { border-top: 1px solid var(--line); padding: 22px 0; min-width: 0; }
.household-device-dates, .household-storage-breakdown { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 8px 12px; margin: 18px 0; font-size: 17px; }
.household-device-dates dt, .household-storage-breakdown dt { color: var(--muted); }
.household-device-dates dd, .household-storage-breakdown dd { margin: 0; overflow-wrap: anywhere; }
.household-storage-total { font-size: 25px; font-weight: 800; color: var(--forest); font-variant-numeric: tabular-nums; }
#household-storage-meter { width: 100%; height: 20px; accent-color: var(--forest); }
.household-management-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#household-edit > .household-delete-section { border-color: #ad8172; margin-top: 40px; }
.household-delete-title { font-size: 23px; font-weight: 800; }
.household-management .household-danger-button { color: #803a24; border-color: #9b604b; background: #fff7f0; }
.household-management button:disabled { opacity: .55; cursor: default; }
@media(max-width:600px) {
  .household-device-dates { grid-template-columns: 1fr; gap: 2px; }
  .household-device-dates dd { margin-bottom: 10px; }
  .household-management-actions { display: grid; }
  .household-management .quiet-button { width: 100%; padding-inline: 12px; }
  .household-storage-total { font-size: 22px; }
}

/* Contract information stays on home; the tabletop keeps its full area. */
.entitlement-panel{margin:0 0 24px;padding:16px 18px;border:1px solid #c8b994;border-radius:12px;background:#edf1e6;overflow-wrap:anywhere}
.entitlement-panel[data-state="blocked"]{background:#fff2e9;border-color:#b97854}
.entitlement-status{margin:0;font-size:21px;font-weight:700;color:var(--forest)}
.entitlement-expiry{margin:6px 0;font-size:17px;line-height:1.6}
.entitlement-message{margin:8px 0;font-size:22px;line-height:1.6;font-weight:700}
.entitlement-message:empty{display:none}
.entitlement-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:10px}
.entitlement-actions a{font-size:17px;color:var(--forest);text-underline-offset:3px}
.entitlement-actions button{font-size:17px;min-height:48px;padding:8px 14px}

/* Home-screen installation and verified device recovery share existing tokens. */
#install-guide-dialog .device-guide-content { max-width: 600px; text-align: left; }
.device-guide-content h2 { color: var(--forest); }
.device-guide-content p, .device-reconnect p { line-height: 1.7; }
.device-install-steps { padding-left: 1.6em; margin: 24px 0; font-size: 21px; line-height: 1.7; }
.device-install-steps li { padding-left: 6px; margin: 14px 0; }
.device-install-steps li::marker { color: var(--forest); font-weight: 800; }
.device-guide-note { color: var(--muted); font-size: 17px; }
.device-guide-source { display: inline-flex; align-items: center; min-height: 56px; color: var(--forest); }
.device-guide-content .primary-button, .device-reconnect .primary-button { min-height: 56px; width: 100%; white-space: normal; }
.device-reconnect { padding: 24px; margin: 24px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.device-reconnect h2 { color: var(--forest); margin-top: 0; }
.device-reconnect form { display: grid; gap: 14px; }
.device-reconnect label { font-size: 20px; font-weight: 700; }
#device-reconnect-url { box-sizing: border-box; width: 100%; min-height: 56px; font: inherit; font-size: 18px; padding: 14px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; }
.device-guide-message { min-height: 1.7em; font-size: 18px; color: var(--forest); margin: 0; }
.device-guide-content [hidden], .device-reconnect[hidden], .device-reconnect [hidden] { display: none !important; }
@media (max-width: 600px) {
  .device-reconnect { padding: 18px; }
  .device-install-steps { font-size: 19px; }
}

/* The board and hand keep their original dimensions. Only rivers/dora grow. */
#board>.board .he{width:300px}
#board>.board .he.main{transform:translate(262px,394px)}
#board>.board .he.duimian{transform:translate(538px,271px) rotate(180deg)}
#board>.board .he.shangjia{transform:translate(275px,250px) rotate(90deg)}
#board>.board .he.xiajia{transform:translate(527px,430px) rotate(270deg)}
#board>.board .he>div.lizhi{position:relative;width:240px;height:15px}
#board>.board .he>div.lizhi .chouma{position:absolute;left:66px;top:4px;width:108px;height:4px}
#board>.board .he.main>div.lizhi .chouma{top:7px}
#board>.board .he.duimian>div.lizhi .chouma{top:11px}
#board>.board .he>.dapai{position:relative;height:210px}
#board>.board .he>.dapai .pai{width:37.5px;height:52.5px;opacity:1}
#board>.board .he>.dapai>img.pai,#board>.board .he>.dapai>span.lizhi{position:absolute}
#board>.board .he>.dapai>span.lizhi{width:52.5px;height:52.5px;transform:none}
#board>.board .he>.dapai>span.lizhi>img.pai{position:absolute;left:0;top:45px;transform-origin:0 0;transform:rotate(270deg)}
#board>.board .he>.dapai>.pai.dapai{transform:translate(1.875px,.9375px)}
#board>.board .he>.dapai .break{display:none}
#board>.board>.table-player.main{transform:translate(46px,554px)}
#board>.board .score{width:250px;height:140px;transform:translate(275px,260px);background:#0b382d;border:1px solid #8daa91;border-radius:9px;box-sizing:border-box;font-family:var(--sans)}
#board>.board .score .defen{display:none}
#board>.board .score .juchang{float:none;padding:0;height:auto}
#board>.board .score .juchang .jushu{position:absolute;left:10px;top:3px;font-size:30px;line-height:32px}
#board>.board .score .juchang .jicun{position:absolute;left:0;bottom:3px;width:100%;padding:0;font-size:17px;text-align:center;color:#eee8d7;line-height:22px}
#board>.board .score .shan{float:none;padding:0;text-align:left}
#board>.board .score .shan>.remaining-tiles{position:absolute;right:10px;top:13px;font-size:18px;font-weight:600;white-space:nowrap}
#board>.board .score .dora-label{position:absolute;top:35px;left:0;width:100%;text-align:center;font-size:17px;font-weight:700;color:#eee8d7;line-height:20px}
#board>.board .score .baopai{position:absolute;left:24px;top:57px;display:flex;gap:1px}
#board>.board .score .shan .pai{width:39px;height:54.6px;border-radius:3px}
#board>.board>.table-player.table-player-turn{box-shadow:0 0 0 3px #e4c66d}
#board>.board>.table-player.table-player-turn .table-player-name::before{content:'▶';font-size:16px;vertical-align:middle;margin-right:3px}
#board>.board>.table-player.main.table-player-turn{overflow:visible}
#board>.board>.table-player.main.table-player-turn::after{content:'あなたの番';position:absolute;left:0;top:-27px;padding:1px 7px;border-radius:4px;background:#e4c66d;color:#173c2b;font-size:18px;font-weight:800;line-height:22px}
#board>.board>.table-player.main.table-player-turn .table-player-name::before{content:none}

.game-audio-controls{display:flex;align-items:center;gap:8px;justify-self:end}
.game-audio-controls .quiet-button{white-space:nowrap;min-width:102px;padding-inline:10px}
.home-audio{flex-wrap:wrap}.home-audio #home-bgm-status{flex-basis:100%}
#audio-settings-message:empty{display:none}
@media(max-width:650px){.game-audio-controls{gap:4px}.game-audio-controls .quiet-button{min-width:76px;padding-inline:5px;font-size:14px}.game-heading .game-subtitle{max-width:220px}}