.room-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.access-badge { font-size:11px; letter-spacing:.04em; padding:3px 8px; border:1px solid #78bda35c; border-radius:5px; color:#b1dac8; white-space:nowrap; }
.access-badge.locked { color:#efcc86; border-color:#d6b36366; background:#d6b3630c; }
.room-stake { display:block; margin-top:7px; color:#eed29c; font-size:13px; font-variant-numeric:tabular-nums; }
.room-row .small { flex-shrink:0; min-width:78px; }
.room-name { min-width:0; }
.room-name b { overflow-wrap:anywhere; }
.directory-note { font-size:12px; color:#a2c0b5; margin:0 0 15px; line-height:1.7; }
.directory-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.stake-picker,.access-picker { padding:0; border:0; margin:22px 0; min-width:0; }
.stake-picker legend,.access-picker legend { font-size:14px; color:#ecd09b; margin-bottom:12px; }
.stake-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.stake-grid label { position:relative; cursor:pointer; }
.stake-grid input { position:absolute; opacity:0; width:1px; height:1px; }
.stake-grid label>span { display:flex; flex-direction:column; text-align:center; justify-content:center; gap:5px; min-height:66px; border:1px solid #64877977; border-radius:9px; color:#e3e9df; font-size:20px; font-variant-numeric:tabular-nums; background:#102c26; }
.stake-grid small { font-size:10px; color:#9eb8ad; }
.stake-grid input:checked+span { background:#d6b36320; border-color:#edc77d; color:#ffda95; box-shadow:inset 0 0 0 1px #edc77d; }
.stake-grid input:focus-visible+span { outline:2px solid #f5ebce; outline-offset:3px; }
.access-picker { display:flex; flex-direction:column; gap:12px; }
.access-picker label { cursor:pointer; }
.access-picker small { display:block; margin:3px 0 0 25px; color:#9eb8ad; font-size:12px; }
.access-picker input,.trial-refill input { width:auto; accent-color:#e5bc70; margin:0 7px 0 0; }
dialog { max-height:90vh; overflow:auto; }
.room-cost { display:flex; flex-direction:column; gap:9px; padding:16px; margin:16px 0; background:#0d2822; border:1px solid #638b7759; border-radius:10px; font-size:13px; line-height:1.6; }
.room-cost b { color:#f2ce8e; font-size:18px; }
.room-cost small { color:#a5beb3; }
.trial-refill { display:block; padding:12px 0 20px; font-size:13px; color:#edce97; line-height:1.7; }
.trial-refill small { display:block; color:#a5beb3; margin-left:23px; }
.trial-refill[hidden],.dialog-label[hidden] { display:none; }
#create-room-form>.primary,#join-room-dialog>.primary { width:100%; margin-top:8px; }
.room-badge { white-space:normal; }
@media(max-width:560px) { .stake-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .room-title {gap:6px;} .room-row {gap:10px;} .room-row .room-icon {display:none;} .room-row .small {padding:8px;} }