/* Roadmap item 78: channel badge under the minimap + the channel window (src/channel-ui.js). HUD tones of
   styles/adventure-hud.css (#4e48377a, border #dbc699, text #fff3d7). Loaded after hud-reference.css. */
.channel-badge{position:relative;display:block;box-sizing:border-box;width:100%;margin:5px 0 0;padding:3px 4px;border:1px solid #dbc699;border-radius:8px;background:#2f2a1fcc;color:#fff3d7;font:700 9px/1.25 Tahoma,"Noto Sans Thai",sans-serif;text-align:center;cursor:pointer;white-space:nowrap;overflow:visible;text-overflow:ellipsis}
.channel-badge:hover,.channel-badge:focus-visible{background:#5c5238e6;border-color:#f3dfa8;outline:none}
.channel-badge[hidden]{display:none}
@media (max-width:1200px){.channel-badge{font-size:8px;padding:2px 3px}}
@media (max-width:600px){.channel-badge{font-size:7px;padding:1px 2px;margin-top:3px;border-radius:6px}}
/* Touch: at least 38x38 px to press without widening the 85 px phone panel. */
@media (pointer:coarse){.channel-badge::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,38px);height:max(100%,38px);transform:translate(-50%,-50%)}}

.channel-dialog{box-sizing:border-box;width:min(360px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid #dbc699;border-radius:14px;background:#3a3426f5;color:#fff3d7;box-shadow:0 18px 44px #0009;overflow:hidden;font-family:Tahoma,"Noto Sans Thai",sans-serif}
.channel-dialog[open]{display:flex;flex-direction:column}
.channel-dialog::backdrop{background:#0000005c}
.channel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px 9px 15px;border-bottom:1px solid #dbc69955}
.channel-head h2{margin:0;font-size:15px;line-height:1.3;font-weight:700;color:#fff3d7;overflow:hidden;text-overflow:ellipsis}
.channel-close{flex:none;width:34px;height:34px;border:1px solid #dbc69999;border-radius:50%;background:#4e4837;color:#fff3d7;font-size:20px;line-height:1;cursor:pointer}
.channel-close:hover,.channel-close:focus-visible{background:#6a6047;outline:none}
.channel-body{flex:1 1 auto;min-height:0;overflow:auto;padding:9px 14px 6px}
.channel-hint{margin:0 0 9px;font-size:12px;color:#e9dbb6}
.channel-list{display:grid;gap:8px}
.channel-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;box-sizing:border-box;width:100%;min-height:44px;padding:9px 11px;border:1px solid #dbc69988;border-radius:10px;background:#4e48377a;color:#fff3d7;font:inherit;text-align:left;cursor:pointer}
.channel-row:not(:disabled):hover,.channel-row:not(:disabled):focus-visible{background:#6a604799;border-color:#f3dfa8;outline:none}
.channel-row:disabled{cursor:default}
.channel-row[data-state=current]{border-color:#a8dd98;background:#3f5a3a99}
.channel-row[data-state=full]{opacity:.7}
.channel-name{font-size:14px;font-weight:700}
.channel-count{font-size:12px;color:#f1e3bf;font-variant-numeric:tabular-nums}
.channel-bar{grid-column:1/-1;height:6px;border-radius:3px;background:#00000059;overflow:hidden}
.channel-bar>i{display:block;height:100%;width:var(--fill,0%);background:linear-gradient(90deg,#8fd47a,#e3c45c)}
.channel-row[data-state=full] .channel-bar>i{background:#d86a4f}
.channel-state{grid-column:1/-1;font-size:12px;color:#fff0c9}
.channel-row[data-state=current] .channel-state{color:#c9f2b9}
.channel-empty{margin:4px 0;font-size:13px;color:#f1e3bf}
.channel-note{min-height:1.2em;margin:8px 0 2px;font-size:12px;color:#ffd59a}
.channel-foot{display:flex;justify-content:flex-end;padding:8px 14px 12px;border-top:1px solid #dbc69933}
.channel-refresh{min-width:88px;min-height:34px;padding:6px 14px;border:1px solid #dbc699;border-radius:9px;background:#5c5238;color:#fff3d7;font:700 13px Tahoma,"Noto Sans Thai",sans-serif;cursor:pointer}
.channel-refresh:disabled{opacity:.6;cursor:default}
@media (max-height:430px){.channel-head{padding:7px 10px 6px 12px}.channel-head h2{font-size:14px}.channel-hint{display:none}.channel-body{padding:6px 12px 4px}.channel-list{gap:6px}.channel-row{min-height:38px;padding:6px 10px;gap:2px 8px}.channel-foot{padding:5px 12px 7px}}