#friend-room-view{padding:24px;max-width:1440px;margin:0 auto;color:var(--ink,#183d34);--fr-roster:38%}
#friend-room-view [hidden]{display:none!important}
.fr-header{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:20px}
.fr-header h1{font-size:26px;margin:5px 0}.fr-header small,.fr-header #fr-state{color:var(--ink3,#61736b)}
.fr-layout{display:grid;grid-template-columns:minmax(350px,1.4fr) minmax(300px,.8fr);gap:22px;align-items:start}
.fr-main,.fr-side>section{background:var(--paper,#fffdf7);border:1px solid var(--paper3,#ccd6c9);border-radius:14px;padding:16px}
.fr-side{display:grid;gap:14px;min-width:0}.fr-side h2{font-size:16px;margin:0 0 12px}
.fr-board-wrap{width:var(--fr-board-scale,100%);max-width:780px;margin:12px auto;overflow:hidden;border-radius:8px;box-shadow:0 4px 18px #152d201a}
#fr-board{display:block;width:100%;aspect-ratio:1;touch-action:manipulation}
.fr-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
#friend-room-view button,.fr-file{border:1px solid var(--paper3,#bccabc);background:var(--paper2,#eff3e7);color:var(--ink,#163e34);border-radius:7px;padding:8px 12px;cursor:pointer;font-size:13px;line-height:1.4}
#friend-room-view button:hover{border-color:var(--ink2,#316552)}#friend-room-view button:disabled{opacity:.48;cursor:not-allowed}
#friend-room-view button[data-fr="settings"],#friend-room-view button[data-fr="share"],#fr-compose button{background:#1a493c;color:#fff;border-color:#1a493c}
#friend-room-view button[data-fr="close"],#friend-room-view button[data-fr="resign"]{color:#b3534e}
#friend-room-view input,#friend-room-view select{background:var(--paper,#fffdf7);color:var(--ink,#183d34);border:1px solid var(--paper3,#c5d0bf);padding:7px;border-radius:6px;max-width:100%;font-size:13px}
.fr-tools label{display:flex;gap:6px;align-items:center}#fr-komi{width:68px}
.fr-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fr-settings label{display:flex;justify-content:space-between;gap:8px;align-items:center}.fr-settings label:has(select){flex-direction:column;align-items:stretch}
#fr-notice{color:var(--ink2,#36694d);min-height:22px;font-size:14px;overflow-wrap:anywhere}#fr-caption{font-size:14px;background:var(--paper2,#eef2e5);padding:10px;border-radius:6px}
#fr-kifus{max-height:260px;overflow:auto}.fr-kifu{padding:10px 0;border-bottom:1px solid var(--paper3,#d6decd)}.fr-kifu strong,.fr-kifu small{display:block;overflow-wrap:anywhere}.fr-kifu small,.fr-empty{color:var(--ink3,#687869);font-size:12px}
.fr-application{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:5px 0}.fr-application span{flex:1}
.fr-file input{display:none}.fr-social{height:560px;display:grid;grid-template-rows:var(--fr-roster) 12px minmax(75px,1fr) auto auto;gap:8px}
.fr-roster,.fr-chat{overflow:auto;min-height:0}.fr-person{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--paper3,#dae0d3)}.fr-person>span:nth-child(2){flex:1}.fr-person b,.fr-person small{display:block}.fr-person small{font-size:12px;color:var(--ink3,#64766b)}#friend-room-view .fr-avatar{width:40px;height:40px;padding:0;border-radius:50%;background:#24503f;color:#fff;font-size:12px}
.fr-divider{cursor:row-resize;touch-action:none;border-block:1px solid var(--paper3,#cbd5c4);background:var(--paper2,#edf2e5);border-radius:3px}.fr-divider:focus{outline:2px solid #438f76}
.fr-chat p{font-size:13px;padding:5px 0;margin:0;overflow-wrap:anywhere}.fr-chat b{display:block;color:var(--ink2,#427159)}.fr-chat span{color:var(--ink,#183d34)}
#fr-compose{display:flex;gap:8px}#fr-text{flex:1;min-width:0}.fr-audio{font-size:12px;margin:0}#fr-audios{display:none}
#fr-step{width:100%;padding:0}.fr-picker .modal>div{display:grid;gap:8px;max-height:60vh;overflow:auto}.fr-picker button{text-align:left}.fr-closed{padding:80px 20px;text-align:center}
@media(max-width:800px){#friend-room-view{padding:10px}.fr-layout{grid-template-columns:1fr;gap:12px}.fr-header h1{font-size:22px}.fr-header{align-items:flex-start}.fr-main,.fr-side>section{padding:12px}.fr-header>.fr-tools{justify-content:flex-end}.fr-social{height:460px}.fr-board-wrap{margin:8px auto}.fr-settings{gap:10px}.fr-header>.fr-tools button{font-size:12px;padding:6px 8px}}


/* Checkbox controls must not inherit full-width text-field dimensions. */
#friend-game-modal .friend-room-switches{display:flex;flex-direction:column;justify-content:center;gap:6px}
#friend-game-modal .friend-room-toggle{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:32px;margin:0;letter-spacing:0;cursor:pointer}
#friend-room-view .fr-settings label:has(input[type="checkbox"]){justify-content:flex-start;gap:8px;min-height:32px;cursor:pointer}
#friend-game-modal .friend-room-toggle input[type="checkbox"],
#friend-room-view .fr-settings input[type="checkbox"]{
 appearance:auto;-webkit-appearance:checkbox;box-sizing:border-box;
 width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;
 max-width:16px!important;max-height:16px!important;flex:0 0 16px;
 padding:0!important;margin:0!important;accent-color:#286052;
 vertical-align:middle;cursor:pointer
}
#friend-game-modal #friend-room-voice:disabled,
#friend-room-view #fr-voice:disabled{opacity:.65;cursor:not-allowed}
.fr-disabled-note{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--ink3,#687869);letter-spacing:0}
.fr-players{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0}
.fr-player{display:flex;align-items:center;gap:12px;min-height:58px;padding:9px 12px;background:var(--paper2,#eef2e5);border:1px solid var(--paper3,#ccd6c9);border-radius:10px;min-width:0}
.fr-player b,.fr-player small{display:block;overflow-wrap:anywhere}.fr-player small,.fr-seat-empty{font-size:12px;color:var(--ink3,#64766b)}
#friend-room-view .fr-avatar{flex:0 0 40px;overflow:visible;display:flex;align-items:center;justify-content:center}
.fr-avatar>.avatar-img,.fr-avatar>.avatar-text{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center}
.fr-avatar .member-avatar{width:100%;height:100%}
#friend-room-view button[aria-pressed="true"]{background:var(--paper3,#dce8d9);border-color:var(--ink2,#447562);font-weight:600}
.fr-mode-tabs button{flex:1;white-space:nowrap}
#fr-rules{margin:12px 0 18px;border:1px solid var(--paper3,#c5d0bf);border-radius:9px;padding:12px;min-width:0}
#fr-rules legend{font-size:14px;padding:0 6px}#fr-rules .fr-settings label{flex-direction:column;align-items:stretch;font-size:13px}
#fr-rules input,#fr-rules select{width:100%;box-sizing:border-box;min-width:0}#fr-rules button{margin-top:12px}
#fr-rules-hint,#fr-study-hint,.fr-setup-hint{display:block;color:var(--ink3,#64766b);font-size:12px;line-height:1.6;flex-basis:100%}
#fr-rules-hint{margin-top:8px}.fr-board-scale{display:flex;align-items:center;gap:6px;margin-left:auto}.fr-board-scale output{font-size:12px;min-width:34px;text-align:center}
.fr-move-confirm{justify-content:flex-end;border:1px solid var(--paper3,#c5d0bf);border-radius:8px;padding:7px 10px;background:var(--paper2,#eef2e5)}
.fr-move-confirm span{margin-right:auto;font-size:13px}#friend-room-view [data-fr="confirm-move"]{background:#1a493c;color:#fff;border-color:#1a493c}
#fr-study-count{font-size:12px;color:var(--ink3,#64766b)}#fr-study .fr-tools{gap:6px}
@media(max-width:600px){.fr-players{gap:8px}.fr-player{padding:8px;gap:8px}.fr-player b{font-size:13px}.fr-board-toolbar{gap:6px}.fr-board-toolbar button{padding:8px 10px}.fr-board-scale{margin-left:0}.fr-mode-tabs{gap:6px}.fr-mode-tabs button{padding:8px}.fr-move-confirm button{padding:7px 12px}.fr-settings{grid-template-columns:repeat(2,minmax(0,1fr))}}