:root { color-scheme: dark; --bg:#11141c; --panel:#1b202b; --line:#31394a; --text:#edf1f7; --muted:#9aa6ba; --gold:#e0b34c; --good:#4cc38a; --bad:#e74c5e; }
    * { box-sizing:border-box; }
    body { margin:0; min-height:100vh; overflow:hidden; background:var(--bg); color:var(--text); font:14px/1.4 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
    button,input,select,textarea { font:inherit; }
    button { border:1px solid var(--line); border-radius:7px; background:#262d3a; color:var(--text); cursor:pointer; padding:6px 9px; }
    button:hover { border-color:#61708c; background:#303a4b; }
    button.primary { background:#376fbe; border-color:#5089d8; }
    input { min-width:0; border:1px solid var(--line); border-radius:6px; background:#10141c; color:var(--text); padding:6px 8px; }
    textarea { width:100%; resize:vertical; border:1px solid var(--line); border-radius:7px; background:#10141c; color:var(--text); padding:7px 8px; }
    #topbar { height:52px; display:flex; align-items:center; gap:14px; padding:0 14px; border-bottom:1px solid var(--line); background:#171b25; }
    #brand { display:flex; align-items:center; gap:7px; color:var(--gold); font-weight:700; white-space:nowrap; }
    #brand img { display:block; width:28px; height:28px; flex:0 0 28px; object-fit:contain; }
    #campaign { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); flex:1; }
    #connection { color:var(--muted); white-space:nowrap; font-size:12px; }
    #connection.on { color:var(--good); }
    #player-name { width:130px; }
    #layout { display:grid; grid-template-columns:250px minmax(0,1fr) 270px; height:calc(100vh - 52px); }
    .panel { overflow:auto; background:var(--panel); border-right:1px solid var(--line); padding:10px; }
    #left-panel { min-width:0;box-sizing:border-box;scrollbar-gutter:stable;overflow-x:hidden; }
    #right-panel { border-left:1px solid var(--line); border-right:0; }
    .card.player-detail-card { min-height:calc(100% - 2px); margin:0; overflow:hidden; padding:0; background:linear-gradient(180deg,#202633,#171b24); }
    .player-detail-heading { display:flex; align-items:center; justify-content:space-between; padding:10px 11px 8px; border-bottom:1px solid var(--line); }
    .player-detail-heading > div { display:grid; gap:1px; }
    .player-detail-heading span { color:#778399; font-size:9px; font-weight:700; letter-spacing:.12em; }
    .player-detail-heading h2 { margin:0; }
    .player-detail-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:7px 9px; border-bottom:1px solid var(--line); }
    .player-detail-tabs button { padding:5px 3px; border-color:transparent; background:transparent; color:var(--muted); font-size:11px; }
    .player-detail-tabs button.active { border-color:#5b4922; background:#302a22; color:#f1cb70; }
    #detail { padding:10px; }
    #detail-empty { padding:12px; margin:0; text-align:center; }
    .player-detail-tab-panel { animation:player-panel-in .14s ease-out; }
    @keyframes player-panel-in { from { opacity:.35; transform:translateY(3px); } to { opacity:1; transform:none; } }
    .card { background:#202633; border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:10px; }
    .card[hidden],.player-detail-tab-panel[hidden],.player-condition-editor[hidden],.player-condition-custom-fields[hidden] { display:none !important; }
    .card h2 { font-size:14px; margin:0 0 8px; color:#f3f5f8; }
    .player-daily-card > summary { color:#d8c394; font-size:13px; font-weight:700; cursor:pointer; }
    .player-daily-card[open] > summary { margin-bottom:8px; }
    .player-daily-card > summary:focus-visible { outline:2px solid #d5b46a; outline-offset:3px; border-radius:4px; }
    .hint { color:var(--muted); font-size:12px; margin:6px 0 0; }
    .player-workspace-tabs { position:sticky; top:-10px; z-index:5; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; margin-bottom:10px; padding:4px; border:1px solid var(--line); border-radius:10px; background:#10141ce8; box-shadow:0 8px 18px #0004; backdrop-filter:blur(10px); }
    .player-workspace-tab { display:flex; min-width:0; min-height:43px; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:4px 1px; border-color:transparent; background:transparent; color:var(--muted); font-size:15px; }
    .player-workspace-tab span { font-size:10px; }
    .player-workspace-tab.active { border-color:#5b4922; background:#302a22; color:#f1cb70; }
    .room-ready-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; padding-top:8px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
    .room-ready-row button { flex:0 0 auto; }
    .player-audio-now { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:9px; background:linear-gradient(135deg,#e0b34c14,#10141c); }
    .player-audio-now > span:first-child { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#e0b34c18; color:var(--gold); font-size:17px; }
    .player-audio-copy { display:grid; min-width:0; gap:1px; }
    .player-audio-copy strong,.player-audio-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .player-audio-copy strong { font-size:12px; }
    .player-audio-copy span { color:var(--muted); font-size:10px; }
    .player-audio-controls { display:grid; grid-template-columns:auto minmax(60px,1fr); align-items:center; gap:7px; margin-top:7px; }
    .player-audio-controls input[type="range"] { width:100%; accent-color:var(--gold); }
    #player-audio-enable { width:100%; margin-top:7px; border-color:#977936; background:#453a22; color:#ffe3a0; }
    #player-audio-enable[hidden] { display:none; }
    .player-token-draft { display:grid; width:100%; min-width:0; gap:7px; }
    .player-token-draft > input,.player-token-draft > button,.player-token-draft .row { width:100%; max-width:100%; min-width:0; }
    .player-token-draft .row { display:grid; margin:0; gap:6px; }
    .player-token-draft .draft-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .player-token-draft .draft-appearance { grid-template-columns:minmax(0,1fr) 84px; }
    .player-token-draft input,.player-token-draft select { width:100%; max-width:100%; min-width:0; }
    .player-token-draft select { border:1px solid var(--line); border-radius:6px; background:#10141c; color:var(--text); padding:6px 7px; }
    .draft-stat { --stat-color:#9aa6ba; display:grid; grid-template-columns:34px minmax(0,1fr); min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:#10141c; }
    .draft-stat > span { display:grid; place-items:center; border-right:1px solid color-mix(in srgb,var(--stat-color) 36%,transparent); background:color-mix(in srgb,var(--stat-color) 13%,transparent); color:var(--stat-color); font-size:10px; font-weight:900; letter-spacing:.03em; }
    .draft-stat input { border:0; border-radius:0; background:transparent; box-shadow:none; }
    .draft-stat-hp { --stat-color:#70dda2; }
    .draft-stat-ac { --stat-color:#79b8ff; }
    .draft-portrait-row { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; min-width:0; gap:6px; }
    .draft-image-pick { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; min-width:0; padding:4px 7px; text-align:left; }
    .draft-image-pick > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .draft-image-preview { display:grid; place-items:center; width:26px; height:26px; overflow:hidden; border:1px dashed #66748b; border-radius:50%; background:#0e131c center/cover no-repeat; color:#8d9bb0; font-size:15px; }
    .draft-image-pick.has-image .draft-image-preview { border-style:solid; border-color:#70dda2; color:transparent; }
    .draft-image-clear { width:38px; padding:4px; color:#ef9ba5; }
    .draft-image-clear[hidden] { display:none; }
    #player-place-token { width:100%; margin-top:1px; color:#172016; background:linear-gradient(#9be0b8,#71c896); border-color:#9ce3ba; font-weight:700; }
    #center { min-width:0; min-height:0; position:relative; display:flex; flex-direction:column; }
    #board { position:relative; width:100%; flex:1; min-height:0; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; background:#0b0d12; }
    #world { position:absolute; transform-origin:0 0; background-color:#ddd6c2; box-shadow:0 0 40px #0008; }
    .map-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
    #spell-range-canvas { z-index:1; }
    #turn-path-canvas { z-index:2; }
    #doodle-canvas { z-index:3; pointer-events:none; }
    #tokens { position:absolute; inset:0; z-index:4; }
    #names-layer { position:absolute; inset:0; z-index:5; pointer-events:none; user-select:none; -webkit-user-select:none; }
    #reaction-layer { position:absolute; inset:0; z-index:7; overflow:visible; pointer-events:none; }
    .token { position:absolute; z-index:0; transform:translate(-50%,-50%); display:grid; place-items:center; cursor:default; }
    .token.mine { z-index:2; cursor:grab; }
    .token.mine .circle { box-shadow:0 0 0 1px #70e5a5, 0 3px 10px #0009, 0 0 14px #44d98c99; }
    .token.locked { cursor:not-allowed; }
    .token.locked.mine .circle { box-shadow:0 0 0 1px #c08a4a88, 0 3px 10px #0009, 0 0 12px #9a6c3888; filter:saturate(.72); }
    .token.current-turn .circle { box-shadow:0 0 0 2px #e0b34c, 0 3px 10px #0009, 0 0 20px #e0b34caa; }
    .token-condition-badges { position:absolute; right:-2px; top:-2px; bottom:auto; z-index:6; display:flex; flex-direction:row-reverse; gap:1px; max-width:90%; pointer-events:none; }
    .token-condition-badge { position:relative; display:grid; place-items:center; width:14px; min-width:14px; height:14px; padding:0; border:0; background:transparent; color:var(--condition-color,#d7dce5); font-size:9px; font-weight:700; line-height:1; text-shadow:0 1px 2px #000f; }
    .token-condition-badge.more { color:var(--muted); font-size:9px; }
    .token-condition-badge[data-condition-icon]::before { position:absolute; inset:0; display:none; content:''; background-image:url('../../asset/界面/状态图标-v1.png'); background-repeat:no-repeat; background-size:400% 400%; filter:drop-shadow(0 1px 1px #000e); image-rendering:pixelated; }
    html.condition-pixels-ready .token-condition-badge[data-condition-icon] { color:transparent; text-shadow:none; }
    html.condition-pixels-ready .token-condition-badge[data-condition-icon]::before { display:block; }
    .token-condition-badge[data-condition-icon='prone']::before { background-position:0 0; }
    .token-condition-badge[data-condition-icon='unconscious']::before { background-position:33.333% 0; }
    .token-condition-badge[data-condition-icon='incapacitated']::before { background-position:66.667% 0; }
    .token-condition-badge[data-condition-icon='blinded']::before { background-position:100% 0; }
    .token-condition-badge[data-condition-icon='deafened']::before { background-position:0 33.333%; }
    .token-condition-badge[data-condition-icon='frightened']::before { background-position:33.333% 33.333%; }
    .token-condition-badge[data-condition-icon='charmed']::before { background-position:66.667% 33.333%; }
    .token-condition-badge[data-condition-icon='poisoned']::before { background-position:100% 33.333%; }
    .token-condition-badge[data-condition-icon='grappled']::before { background-position:0 66.667%; }
    .token-condition-badge[data-condition-icon='restrained']::before { background-position:33.333% 66.667%; }
    .token-condition-badge[data-condition-icon='stunned']::before { background-position:66.667% 66.667%; }
    .token-condition-badge[data-condition-icon='petrified']::before { background-position:100% 66.667%; }
    .token-condition-badge[data-condition-icon='invisible']::before { background-position:0 100%; }
    .token-condition-badge[data-condition-icon='concentrating']::before { background-position:33.333% 100%; }
    .token-condition-badge[data-condition-icon='burning']::before { background-position:66.667% 100%; }
    .token.dragging { z-index:4; cursor:grabbing; }
    .circle { position:relative; overflow:hidden; width:76%; height:76%; border:1.25px solid var(--ring); border-radius:50%; display:grid; place-items:center; background:#fff; color:#1c2430; font-size:20px; font-weight:700; background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:0 0 0 2px #0006,0 3px 10px #0009,0 0 14px var(--glow,#5b8cff73); }
    .token .rider { position:absolute; z-index:3; overflow:visible; display:grid; place-items:center; border:1px solid var(--ring,#5b8cff); border-radius:50%; background:#fff center/cover no-repeat; color:#1c2430; font-weight:700; line-height:1; box-shadow:0 0 0 1px #0009,0 2px 7px #000a; cursor:inherit; }
    .token .rider.owned { box-shadow:0 0 0 1px #70e5a5,0 2px 9px #000a,0 0 12px #44d98c88; }
    .token.locked .rider.owned { box-shadow:0 0 0 1px #c08a4a,0 2px 9px #000a; filter:saturate(.72); }
    .token .rider.current-rider { border-color:var(--gold); box-shadow:0 0 0 1.5px var(--gold),0 2px 9px #000a,0 0 13px #e0b34c99; }
    #names-layer .token-name-label { position:absolute; transform:translate(-50%,-100%); padding:1px 6px; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(10,12,18,.48); color:#fff; opacity:.72; font-weight:500; line-height:1.3; text-align:center; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.8); }
    #names-layer .token-name-label.below { transform:translate(-50%,0); }
    #names-layer .token-name-text { display:block; }
    #names-layer .token-name-hp { position:absolute; left:50%; top:calc(100% + 1px); height:3px; overflow:hidden; transform:translateX(-50%); border:1px solid rgba(0,0,0,.62); border-radius:999px; background:rgba(15,18,24,.9); box-shadow:0 1px 2px rgba(0,0,0,.65); }
    #names-layer .token-name-hp i { display:block; height:100%; border-radius:inherit; }
    #names-layer .token-name-hp + .token-name-hp { top:calc(100% + 7px); }
    #empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:16px; }
    #map-controls { position:absolute; right:12px; bottom:12px; display:flex; gap:5px; padding:6px; border:1px solid var(--line); border-radius:9px; background:#171c27dd; }
    .player-map-mask { position:fixed; inset:0; z-index:145; display:grid; place-items:center; padding:18px; background:#05070bbd; backdrop-filter:blur(6px); }
    .player-map-mask[hidden] { display:none; }
    .player-map-browser { display:flex; width:min(1180px,96vw); height:min(760px,90vh); min-height:420px; flex-direction:column; gap:10px; overflow:hidden; padding:16px; border:1px solid #4d5667; border-radius:15px; background:#151922; box-shadow:0 28px 80px #000d; }
    .player-map-browser-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .player-map-browser-head h2 { margin:0; color:#f2f4f8; font-size:17px; }
    .player-map-browser-head p { margin:4px 0 0; color:var(--muted); font-size:11px; }
    .player-map-browser-close { width:34px; height:34px; flex:0 0 auto; padding:0; font-size:17px; }
    .player-map-summary { display:flex; justify-content:space-between; gap:12px; padding:7px 10px; overflow:hidden; border:1px solid #ffffff0d; border-radius:8px; background:#0c10176e; color:var(--muted); font-size:11px; }
    .player-map-summary span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .player-map-chapters { display:flex; gap:6px; min-height:34px; overflow-x:auto; padding:2px 1px 5px; }
    .player-map-chapter { flex:0 0 auto; max-width:220px; overflow:hidden; padding:6px 12px; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
    .player-map-chapter.active { border-color:#6f91bd; background:#31537d; color:#ecf5ff; }
    .player-map-chapter.locked { color:#687386; }
    .player-map-locations { display:flex; flex:1; align-items:stretch; gap:12px; min-width:0; min-height:0; overflow-x:auto; overflow-y:hidden; padding:3px 3px 9px; scroll-snap-type:x proximity; }
    .player-map-location { display:flex; flex:0 0 238px; min-height:0; flex-direction:column; overflow:hidden; border:1px solid #ffffff12; border-radius:12px; background:#0d1118a6; scroll-snap-align:start; }
    .player-map-location > h3 { margin:0; padding:9px 10px; overflow:hidden; border-bottom:1px solid #ffffff10; color:#e6ebf3; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
    .player-map-location.locked > h3 { color:#687386; font:700 22px/1 Georgia,serif; text-align:center; }
    .player-map-floor-list { display:grid; grid-auto-rows:max-content; align-content:start; gap:9px; min-height:100px; overflow-y:auto; padding:8px; }
    .player-map-card { position:relative; overflow:hidden; border:1px solid #384152; border-radius:10px; background:#121722; }
    .player-map-card.current { border-color:#76a9ee; box-shadow:0 0 0 2px #5b8cff2b; }
    .player-map-open { display:block; width:100%; padding:0; overflow:hidden; border:0; border-radius:0; background:transparent; text-align:left; }
    .player-map-preview { position:relative; display:grid; place-items:center; height:112px; overflow:hidden; background:#090c12 center/cover no-repeat; }
    .player-map-card.locked .player-map-preview { background:#010203; }
    .player-map-question { color:#687386; font:700 50px/1 Georgia,serif; text-shadow:0 3px 18px #000; }
    .player-map-badge { position:absolute; top:7px; padding:3px 6px; border-radius:999px; background:#17202ccc; color:#c8d4e5; font-size:9px; }
    .player-map-order { left:7px; }
    .player-map-presented { right:7px; background:#31537deb; color:#e7f2ff; }
    .player-map-copy { display:grid; gap:2px; padding:8px 9px 9px; }
    .player-map-copy strong,.player-map-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .player-map-copy strong { color:#e7edf6; font-size:11px; }
    .player-map-copy span { color:var(--muted); font-size:9px; }
    .player-map-card.locked .player-map-copy strong { color:#7f8998; }
    .player-map-card.locked .player-map-open { cursor:not-allowed; }
    .player-map-empty { display:grid; place-items:center; min-height:150px; padding:18px; color:var(--muted); text-align:center; }
    @media (max-width:620px) { .player-map-mask{padding:7px}.player-map-browser{width:98vw;height:94vh;padding:10px}.player-map-location{flex-basis:220px}.player-map-summary{display:grid;gap:3px} }
    .dice-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
    .dice-grid button { padding:6px 3px; }
    .dice-advrow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:6px; }
    .custom-roll,.row { display:flex; gap:6px; margin-top:7px; }
    .custom-roll input,.row input { flex:1; }
    .dice-visibility-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:7px; padding:3px; border:1px solid var(--line); border-radius:8px; background:#10141d; }
    .dice-visibility-switch button { border-color:transparent; background:transparent; color:var(--muted); }
    .dice-visibility-switch button.active { border-color:#5b8cff80; background:#24324a; color:#dce9ff; box-shadow:inset 0 1px rgba(255,255,255,.06); }
    .dice-visibility-switch button[data-dice-visibility="private"].active { border-color:#9b7bd580; background:#302642; color:#e6d7ff; }
    #dice-result { min-height:25px; margin-top:7px; color:var(--gold); font-weight:700; }
    #dice-log { max-height:170px; overflow:auto; margin-top:6px; }
    .roll-line { display:grid; grid-template-columns:48px 50px 1fr 28px; gap:4px; padding:3px 0; border-bottom:1px solid #303747; font-size:12px; }
    .roll-who { color:#8fbaff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .roll-total { color:var(--gold); text-align:right; font-weight:700; }
    #player-links { display:grid; gap:5px; }
    #player-links a { color:#a8c8ff; text-decoration:none; border-bottom:1px solid transparent; }
    #player-links a:hover { border-color:#a8c8ff; }
    .shared-note-view { min-height:42px; max-height:220px; overflow:auto; padding:8px; border:1px solid var(--line); border-radius:7px; background:#171c27; color:var(--text); white-space:pre-wrap; word-break:break-word; }
    #detail[hidden] { display:none; }
    .token-head { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
    .token-head-copy { min-width:0; flex:1; }
    #detail-icon { width:42px; height:42px; border:3px solid #5b8cff; border-radius:50%; display:grid; place-items:center; background:#fff; color:#19222f; background-size:cover; background-position:center; font-size:20px; }
    #detail-name { font-weight:700; flex:1; }
    #detail-type { color:var(--muted); font-size:12px; }
    #detail-mounted-chain[hidden] { display:none; }
    .mounted-detail-chain { margin:10px 0 0; padding:8px; border:1px solid #5879a469; border-radius:10px; background:linear-gradient(145deg,#1a2638,#121821); }
    .mounted-detail-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
    .mounted-detail-label { display:flex; min-width:0; align-items:center; gap:5px; color:#a9c9f5; font-size:10px; font-weight:700; letter-spacing:.06em; }
    .mounted-detail-dismount { flex:0 0 auto; min-height:25px; padding:3px 8px; border-color:#8b6554; border-radius:7px; background:#34241e; color:#ffd0b3; font-size:10px; font-weight:700; }
    .mounted-detail-dismount:hover:not(:disabled) { border-color:#cf8d6e; background:#4a2f24; }
    .player-mount-picker { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; width:100%; }
    .player-mount-picker select { width:100%; min-width:0; height:30px; padding:4px 7px; border:1px solid #53647d; border-radius:7px; background:#111925; color:#e6edf7; font-size:11px; }
    .player-mount-picker button { min-height:30px; padding:4px 10px; border-color:#6d8e67; border-radius:7px; background:#243523; color:#d9f5d2; font-size:11px; font-weight:700; white-space:nowrap; }
    .player-mount-picker button:hover:not(:disabled) { border-color:#98c48f; background:#30482d; }
    .player-mount-hint { margin:6px 0 0; color:#7f91aa; font-size:9px; line-height:1.4; }
    .mounted-detail-units { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:2px; }
    .mounted-detail-link { height:11px; color:#8fa8ca; font-size:11px; line-height:11px; text-align:center; }
    .mounted-detail-unit { min-width:0; display:grid; grid-template-columns:28px minmax(0,1fr); gap:6px; align-items:center; padding:6px; border-color:#3a4659; border-radius:8px; background:#151c27; text-align:left; }
    .mounted-detail-unit:hover { border-color:#6f91bd; background:#1c2736; }
    .mounted-detail-unit.active { border-color:#d0aa50; background:#30291d; box-shadow:0 0 0 1px #d0aa5033; }
    .mounted-detail-avatar { width:28px; height:28px; display:grid; place-items:center; border:2px solid var(--unit-ring,#5b8cff); border-radius:50%; background:#fff center/cover no-repeat; color:#19222f; font-size:13px; }
    .mounted-detail-copy { min-width:0; display:grid; }
    .mounted-detail-role { color:#7f91aa; font-size:9px; }
    .mounted-detail-name { overflow:hidden; color:#edf1f7; font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
    .mounted-detail-stats { overflow:hidden; color:#9fb0c6; font-size:9px; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
    .field { margin-top:10px; }
    .field label { display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }
    .three { display:grid; grid-template-columns:1fr auto 1fr; gap:5px; align-items:center; }
    .ac-row { display:flex; align-items:center; gap:8px; }
    .ac-row input { width:90px; }
    .hp-bar { height:8px; border-radius:5px; background:#10141c; overflow:hidden; margin-top:7px; }
    .hp-bar i { display:block; height:100%; background:var(--good); }
    .quick { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:7px; }
    .quick button { padding:5px 2px; font-size:12px; }
    .temp-hp-quick { grid-template-columns:repeat(6,minmax(0,1fr)); }
    .temp-hp-quick button { min-width:0; font-size:11px; }
    #flowbar { --flow-row-height:34px; --flow-row-gap:4px; --flow-list-height:calc(var(--flow-row-height) * 3 + var(--flow-row-gap) * 2); flex:0 0 auto; padding:6px 10px 8px; border-top:1px solid var(--line); background:linear-gradient(180deg,#1c2029,var(--panel)); }
    #flowbar:not(.collapsed) { height:auto; }
    #flowbar.collapsed { padding-top:6px; padding-bottom:6px; }
    #flowbar.collapsed .flow-body { display:none; }
    .flow-head { display:flex; align-items:center; gap:8px; min-height:26px; min-width:0; }
    #flow-toggle { border:0; padding:0; background:transparent; color:var(--gold); font-weight:700; white-space:nowrap; }
    #flow-open-initiative { padding:3px 8px; color:var(--gold); font-size:11px; white-space:nowrap; }
    .flow-mode { padding:3px 7px; border:1px solid #5b4922; border-radius:999px; color:var(--gold); font-size:11px; white-space:nowrap; }
    .flow-mode.prepare { border-color:#416e9e; background:#152337; color:#a8ceff; }
    .flow-current-summary { max-width:190px; overflow:hidden; color:#f2dfaa; font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
    .flow-weather-summary { padding:3px 7px; border:1px solid #3a465a; border-radius:999px; color:#b9c7db; background:#151a24; font-size:10px; white-space:nowrap; }
    .flow-date { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
    .flow-head .flow-date { margin-left:auto; }
    .flow-tabs { display:flex; gap:4px; padding:2px 0 5px; }
    .flow-tabs button { border-color:transparent; background:transparent; color:var(--muted); padding:3px 8px; font-size:11px; }
    .flow-tabs button.active { color:var(--gold); background:#2b2733; border-color:#5b4922; }
    .flow-body { display:flex; flex-direction:column; min-height:0; overflow:hidden; padding-top:5px; border-top:1px solid rgba(255,255,255,.06); }
    .flow-panel { height:var(--flow-list-height); min-height:0; overflow:hidden; }
    .flow-panel[hidden] { display:none; }
    .flow-init-meta { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; margin-bottom:6px; }
    .flow-init-meta b { color:var(--text); font-weight:600; }
    .flow-init-hero { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:6px 9px; border:1px solid var(--line); border-radius:9px; background:#171c27; }
    .flow-init-hero > span:first-child { color:var(--muted); font-size:10px; }
    .flow-init-hero strong { overflow:hidden; margin:2px 0; color:var(--gold); font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
    .flow-init-hero > span:last-child { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
    .flow-init-list { display:flex; height:var(--flow-list-height); flex-direction:column; align-items:stretch; min-height:0; gap:var(--flow-row-gap); overflow-x:hidden; overflow-y:auto; padding:0 4px 0 1px; overscroll-behavior:contain; scroll-behavior:smooth; scrollbar-gutter:stable; }
    .flow-chip { display:grid; grid-template-columns:18px 8px minmax(0,1fr) minmax(24px,auto) auto auto; align-items:center; gap:5px; height:var(--flow-row-height); min-height:var(--flow-row-height); flex:0 0 var(--flow-row-height); padding:4px 7px; border:1px solid var(--line); border-left:3px solid transparent; border-radius:8px; background:#202633; }
    .flow-chip.current { border-left-color:var(--gold); background:#3a3325; box-shadow:0 0 0 1px #e0b34c55; }
    .flow-chip.owned-adjustable { border-color:#416e9e; background:linear-gradient(180deg,#202d40,#1b2534); }
    .flow-chip-dot { width:8px; height:8px; border-radius:50%; }
    .flow-chip-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .flow-chip-value { color:var(--gold); font-weight:700; }
    .flow-chip-order { display:grid; place-items:center; width:18px; height:18px; border-radius:5px; background:#141923; color:#8490a4; font-size:9px; font-weight:700; }
    .flow-chip-current { padding:2px 5px; border-radius:999px; background:#e0b34c22; color:#f5d77f; font-size:9px; font-weight:700; }
    .flow-chip-actions { grid-column:5/7; display:flex; align-items:center; justify-content:flex-end; gap:3px; }
    .flow-chip-actions button { min-width:24px; height:24px; padding:1px 5px; font-size:10px; line-height:1; }
    .flow-chip-actions button:disabled { opacity:.4; cursor:not-allowed; }
    .flow-empty { color:var(--muted); font-size:12px; }
    #flow-panel-time:not([hidden]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .flow-time-card,.flow-weather-card { display:flex; align-items:center; gap:14px; min-width:0; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:#171c27; }
    .flow-time-card { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"date clock" "mode clock"; column-gap:12px; row-gap:3px; }
    .flow-time-date { grid-area:date; overflow:hidden; color:var(--muted); font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
    .flow-time-clock { grid-area:clock; align-self:center; color:var(--gold); font-size:25px; font-variant-numeric:tabular-nums; white-space:nowrap; }
    .flow-time-mode { grid-area:mode; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
    #flow-weather-icon { width:45px; font-size:31px; text-align:center; }
    .flow-weather-card > div { display:grid; min-width:0; }
    .flow-weather-card strong { color:var(--text); font-size:17px; }
    #flow-weather-meta { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
    .condition-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
    .condition-chip { padding:4px 6px; border:1px solid var(--condition-color,#a8b3c7); border-radius:7px; background:#171c27; color:var(--text); font-size:11px; }
    .condition-list.interactive { display:grid; grid-template-columns:minmax(0,1fr); }
    .condition-list.interactive .condition-chip { display:grid; grid-template-columns:minmax(0,1fr) 25px; gap:3px; padding:2px; }
    .condition-main,.condition-remove { min-width:0; border-color:transparent; background:transparent; }
    .condition-main { overflow:hidden; padding:4px 5px; color:var(--text); text-align:left; text-overflow:ellipsis; white-space:nowrap; }
    .condition-remove { padding:2px; color:#db95a0; font-size:16px; }
    .condition-main:disabled,.condition-remove:disabled,#player-condition-open:disabled { opacity:.42; cursor:not-allowed; }
    .player-condition-section { margin-top:12px; padding:9px; border:1px solid #48546a; border-radius:10px; background:#151a24; }
    .player-condition-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .player-condition-heading > div { display:grid; min-width:0; }
    .player-condition-heading strong { font-size:12px; }
    .player-condition-heading span { color:var(--muted); font-size:9px; }
    .player-condition-heading button { flex:0 0 auto; padding:4px 7px; font-size:10px; }
    .player-condition-editor { display:grid; gap:7px; margin-top:8px; padding:8px; border:1px solid #5b6a82; border-radius:9px; background:#10141c; box-shadow:0 9px 24px #0005; }
    .player-condition-editor-head { display:flex; align-items:center; justify-content:space-between; }
    .player-condition-editor-head strong { font-size:11px; }
    .player-condition-editor-head button { border:0; padding:0 4px; background:transparent; color:var(--muted); font-size:17px; }
    .player-condition-editor select,.player-condition-editor input { width:100%; border:1px solid var(--line); border-radius:6px; background:#0b0f16; color:var(--text); padding:6px 7px; }
    .player-condition-custom-fields { display:grid; grid-template-columns:64px minmax(0,1fr); gap:5px; }
    .player-condition-duration { display:grid; gap:5px; color:var(--muted); font-size:10px; }
    .player-condition-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
    .player-condition-presets button { min-width:0; padding:4px 2px; font-size:9px; }
    .player-condition-presets button.active { border-color:#6fa4ed; background:#284c7c; color:#e5f1ff; }
    .player-condition-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
    .public-note { margin-top:8px; padding:7px; border-radius:7px; background:#171c27; color:var(--muted); font-size:12px; white-space:pre-wrap; }
    #player-delete-token { width:100%; margin-top:12px; border-color:#7d3e49; background:#321b22; color:#ffabb5; font-weight:700; }
    #player-delete-token:hover:not(:disabled) { border-color:#bd5f6d; background:#47232c; }
    #player-delete-token[hidden] { display:none; }
    #token-peek { position:fixed; z-index:35; width:min(300px,calc(100vw - 24px)); padding:11px; border:1px solid #596982; border-radius:12px; background:linear-gradient(145deg,#252c3aee,#151a24f5); box-shadow:0 16px 42px #000b,0 0 0 1px #ffffff0b; backdrop-filter:blur(10px); animation:token-peek-in .14s ease-out; }
    #token-peek[hidden] { display:none; }
    .token-peek-head { display:flex; align-items:center; gap:9px; }
    .token-peek-icon { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border:2px solid var(--peek-ring,#5b8cff); border-radius:50%; background:#fff center/cover no-repeat; color:#19222f; font-size:19px; }
    .token-peek-title { min-width:0; flex:1; }
    .token-peek-title strong,.token-peek-title span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .token-peek-title span { color:var(--muted); font-size:11px; }
    .token-peek-close { align-self:flex-start; border:0; padding:1px 4px; background:transparent; color:var(--muted); }
    .token-peek-stats { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; }
    .token-peek-stat { padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:#121722bb; color:var(--muted); font-size:11px; }
    .token-peek-stat b { display:block; margin-top:1px; color:var(--text); font-size:13px; }
    .token-peek-hp { height:4px; overflow:hidden; margin-top:4px; border-radius:999px; background:#090c12; }
    .token-peek-hp i { display:block; height:100%; border-radius:inherit; }
    #token-peek .condition-list { margin-top:9px; }
    #token-peek .public-note { max-height:84px; overflow:auto; }
    @keyframes token-peek-in { from { opacity:0; transform:translateY(5px) scale(.98); } to { opacity:1; transform:none; } }
    #token-context-menu { position:fixed; z-index:46; width:118px; padding:5px; border:1px solid #64738b; border-radius:9px; background:#171d28f7; box-shadow:0 12px 30px #000b; backdrop-filter:blur(10px); }
    #token-context-menu[hidden] { display:none; }
    #token-context-menu button { width:100%; border-color:transparent; background:transparent; text-align:left; }
    #token-context-menu button:hover { border-color:#6e87aa; background:#29384d; }
    .investigation-mask { position:fixed; inset:0; z-index:126; display:grid; place-items:center; padding:22px; background:#05070bb5; backdrop-filter:blur(6px); }
    .investigation-mask[hidden] { display:none; }
    .investigation-window { width:min(680px,94vw); max-height:min(640px,90vh); overflow:auto; padding:22px; border:1px solid #64738b; border-radius:20px; background:linear-gradient(145deg,#252c3afa,#111620fd); box-shadow:0 24px 70px #000e,0 0 0 1px #ffffff0b; animation:investigation-window-in .2s ease-out; }
    @keyframes investigation-window-in { from { opacity:0; transform:translateY(10px) scale(.975); } to { opacity:1; transform:none; } }
    .investigation-layout { display:grid; grid-template-columns:270px minmax(0,1fr); align-items:center; gap:24px; }
    .investigation-portrait { position:relative; display:grid; place-items:center; width:270px; aspect-ratio:1; overflow:hidden; border:2px solid var(--investigation-ring,#5b8cff); border-radius:12px; background:#0d1119; color:#dfe7f4; font-size:64px; box-shadow:0 12px 32px #0008,inset 0 0 0 1px #ffffff18; }
    .investigation-portrait img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
    .investigation-portrait img[hidden],.investigation-portrait-fallback[hidden] { display:none; }
    .investigation-portrait-fallback { position:absolute; inset:0; display:grid; place-items:center; }
    .investigation-body { min-width:0; }
    .investigation-head { display:flex; align-items:flex-start; gap:7px; }
    .investigation-title { min-width:0; flex:1; }
    .investigation-title strong,.investigation-title span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .investigation-title strong { color:#f3f6fb; font-size:21px; }
    .investigation-title span { margin-top:3px; color:var(--muted); font-size:12px; }
    .investigation-close { border:0; padding:3px 6px; background:transparent; color:var(--muted); font-size:18px; }
    .investigation-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
    .investigation-stat { padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:#101620c9; color:var(--muted); font-size:11px; }
    .investigation-stat b { display:block; color:var(--text); font-size:14px; }
    .investigation-hp { height:4px; overflow:hidden; margin-top:4px; border-radius:999px; background:#080b10; }
    .investigation-hp i { display:block; height:100%; border-radius:inherit; }
    .investigation-status-title { display:block; margin-top:8px; color:#9da9bb; font-size:9px; font-weight:700; letter-spacing:.08em; }
    #token-investigation .condition-list { margin-top:5px; }
    #token-investigation .condition-chip { display:inline-flex; align-items:center; margin:0 4px 4px 0; }
    #token-investigation .public-note { max-height:120px; overflow:auto; }
    .player-portrait-picker { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:6px; }
    .player-portrait-picker label { min-width:0; }
    .player-portrait-picker select { width:100%; }
    .player-modal-mask { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:18px; background:#05070bbb; backdrop-filter:blur(5px); }
    .player-modal-mask[hidden] { display:none; }
    .player-initiative-manager { width:min(680px,94vw); max-height:90vh; display:flex; flex-direction:column; gap:14px; padding:18px; border:1px solid #535f72; border-radius:14px; background:#171c26; box-shadow:0 24px 70px #000d; }
    .player-initiative-manager-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .player-initiative-manager-head h2 { margin:0; color:var(--gold); font-size:20px; }
    .player-initiative-manager-head p { margin:6px 0 0; line-height:1.5; }
    #player-initiative-manager-close { flex:0 0 auto; border:0; padding:0 5px; background:transparent; color:var(--muted); font-size:24px; }
    .player-initiative-manager #flow-panel-initiative { display:flex; flex-direction:column; gap:12px; min-height:0; }
    .player-initiative-manager .flow-init-hero { flex:0 0 auto; padding:10px 12px; }
    .player-initiative-manager .flow-init-hero strong, .player-initiative-manager .flow-init-hero > span:last-child { white-space:normal; overflow:visible; }
    .player-initiative-manager .flow-init-list { height:auto; max-height:55vh; min-height:70px; gap:6px; padding:2px 5px 2px 1px; }
    .player-initiative-manager .flow-chip { height:auto; min-height:42px; flex:0 0 auto; grid-template-columns:24px 8px minmax(0,1fr) 38px auto; gap:8px; padding:8px 10px; }
    .player-initiative-manager .flow-chip-name { overflow:visible; white-space:normal; overflow-wrap:anywhere; }
    .player-initiative-manager .flow-chip-order { width:24px; height:24px; font-size:11px; }
    .player-initiative-manager .flow-chip-actions { grid-column:5; }
    .player-initiative-manager .flow-chip-current { grid-column:5; }
    .player-initiative-manager .flow-chip-actions button { width:30px; height:30px; font-size:15px; }
    .player-initiative-manager-footer { display:flex; justify-content:flex-end; }
    .player-portrait-manager { width:min(900px,94vw); max-height:90vh; overflow:hidden; padding:15px; border:1px solid #535f72; border-radius:14px; background:#171c26; box-shadow:0 24px 70px #000d; }
    .player-portrait-manager-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .player-portrait-manager-head h2 { margin:2px 0 0; }
    .player-portrait-manager-head p { margin:3px 0 0; }
    .player-portrait-manager-close { border:0; background:transparent; color:var(--muted); font-size:18px; }
    .player-portrait-manager-rail { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; align-items:stretch; gap:7px; min-height:224px; margin-top:10px; }
    .player-portrait-scroll { padding:0; color:var(--gold); font-size:24px; }
    .player-portrait-scroll:disabled { opacity:.28; cursor:default; }
    .player-portrait-strip { display:flex; min-width:0; gap:9px; padding:3px 3px 9px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scroll-snap-type:x proximity; }
    .player-portrait-empty { display:grid; place-items:center; width:100%; min-height:205px; padding:20px; border:1px dashed #465164; border-radius:11px; color:var(--muted); text-align:center; }
    .player-portrait-card { flex:0 0 152px; align-self:flex-start; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:#111620; scroll-snap-align:center; }
    .player-portrait-card.active { border-color:var(--gold); box-shadow:0 0 0 2px #e0b34c2c; }
    .player-portrait-open { display:block; width:100%; padding:0; border:0; border-radius:0; background:transparent; text-align:left; }
    .player-portrait-thumb { display:block; width:100%; height:152px; object-fit:contain; background:#090d13; }
    .player-portrait-name,.player-portrait-state { display:block; overflow:hidden; padding:7px 8px 2px; text-overflow:ellipsis; white-space:nowrap; }
    .player-portrait-name { font-size:11px; font-weight:700; }
    .player-portrait-state { min-height:20px; padding-top:0; color:var(--muted); font-size:9px; }
    .player-portrait-tools { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; padding:5px; border-top:1px solid #ffffff0c; }
    .player-portrait-tools button { min-width:0; padding:3px 1px; font-size:10px; }
    .player-portrait-tools button[data-player-portrait-action='delete'] { color:#ff9ca7; }
    .player-portrait-manager-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
    .player-portrait-manager-actions .hint { margin:0 auto 0 0; }
    @media (max-width:620px) {
      .investigation-mask { padding:10px; }
      .investigation-window { width:min(430px,96vw); max-height:94vh; padding:16px; }
      .investigation-layout { grid-template-columns:1fr; justify-items:center; gap:15px; }
      .investigation-portrait { width:min(220px,68vw); }
      .investigation-body { width:100%; }
      .player-modal-mask { padding:8px; }
      .player-portrait-manager { width:98vw; padding:10px; }
      .player-portrait-manager-rail { grid-template-columns:27px minmax(0,1fr) 27px; }
      .player-portrait-card { flex-basis:138px; }
      .player-portrait-thumb { height:138px; }
    }
    #topbar { box-shadow:0 4px 18px #0003; z-index:8; }
    #topbar-actions { display:flex; align-items:center; gap:7px; }
    #btn-player-library { border-color:#665638; background:linear-gradient(145deg,#332d23,#242a35); color:#f1d394; }
    #btn-player-library:hover { border-color:#9a7c43; background:linear-gradient(145deg,#403724,#2d3440); }
    #btn-left-panel { display:none; }
    #btn-join { display:inline-block; }
    #connection { padding:4px 8px; border:1px solid var(--line); border-radius:999px; background:#121722; }
    #connection.on { border-color:#2e7757; background:#14271f; }
    #latency { color:var(--muted); font-size:11px; white-space:nowrap; }
    #session-badge { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9fc8ff; font-size:12px; }
    #player-list { display:grid; gap:5px; }
    .player-row { display:flex; align-items:center; gap:7px; min-width:0; padding:6px 7px; border-radius:7px; background:#171c27; color:var(--muted); font-size:12px; }
    .player-row.me { border:1px solid #416e9e; color:var(--text); }
    .player-dot { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#647086; }
    .player-dot.online { background:var(--good); box-shadow:0 0 7px #4cc38a99; }
    .player-row-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .player-row-status { font-size:11px; color:var(--muted); }
    #board { isolation:isolate; }
    #measure-label { position:absolute; z-index:8; pointer-events:none; padding:4px 7px; border:1px solid #e0b34c88; border-radius:6px; background:#171c27ee; color:#ffe9a0; font-size:12px; white-space:nowrap; transform:translate(-50%,-130%); }
    #measure-label[hidden] { display:none; }
    .reaction-palette { position:absolute; left:12px; bottom:12px; z-index:12; display:grid; grid-template-columns:repeat(5,38px); gap:5px; width:max-content; padding:8px; border:1px solid #68779099; border-radius:12px; background:#12161ff2; box-shadow:0 14px 34px #0008; backdrop-filter:blur(12px); }
    .reaction-palette[hidden] { display:none; }
    .reaction-palette button { width:38px; height:36px; padding:0; border-color:transparent; background:#ffffff08; font-size:21px; }
    .reaction-palette button.active,.reaction-palette button:hover { border-color:#e0b34cb3; background:#e0b34c24; transform:translateY(-1px); }
    .reaction-palette > span { grid-column:1/-1; color:var(--muted); font-size:10px; text-align:center; }
    #board.reaction-placing,#board.spell-aiming { cursor:crosshair; }
    .map-reaction { position:absolute; transform:translate(-50%,-50%) scale(var(--reaction-scale,1)); transform-origin:50% 70%; }
    .map-reaction-bubble { display:grid; justify-items:center; min-width:58px; filter:drop-shadow(0 6px 9px #000a); animation:map-reaction-rise 2.7s cubic-bezier(.18,.72,.22,1) forwards; }
    .map-reaction-emoji { display:grid; place-items:center; width:48px; height:48px; border:2px solid #fff4c7d1; border-radius:50%; background:radial-gradient(circle at 38% 30%,#ffffff59,#1f2430eb 68%); font-size:29px; box-shadow:inset 0 0 0 2px #0004,0 0 18px #e0b34c4d; }
    .map-reaction-author { max-width:110px; margin-top:3px; padding:1px 6px; overflow:hidden; border-radius:999px; background:#0b0e15d1; color:#fff2c1; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
    @keyframes map-reaction-rise { 0%{opacity:0;transform:translateY(9px) scale(.55) rotate(-7deg)} 14%{opacity:1;transform:translateY(0) scale(1.12) rotate(3deg)} 27%{transform:translateY(-4px) scale(1)} 72%{opacity:1;transform:translateY(-25px) scale(1)} 100%{opacity:0;transform:translateY(-54px) scale(.86)} }
    #action-dock { display:flex; align-items:center; gap:6px; overflow-x:auto; padding:7px 10px; border-top:1px solid var(--line); background:#171b25; }
    #action-dock button { flex:0 0 auto; }
    #action-dock button.active { border-color:#6fa4ed; background:#284c7c; }
    #turn-action-status { max-width:min(300px,34vw); overflow:hidden; margin-left:auto; padding:4px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#121722; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
    #turn-action-status.mine { border-color:#2e7757; color:#9ce4be; background:#14271f; }
    #turn-action-status.locked { border-color:#654c2c; color:#e7c38d; background:#2a2016; }
    #turn-action-status.free,#turn-action-status.prepare { border-color:#355a86; color:#a8ceff; background:#152337; }
    #turn-path-actions { display:flex; flex:0 0 auto; gap:4px; padding:3px; border:1px solid #52647c80; border-radius:9px; background:#101722; }
    #turn-path-actions[hidden] { display:none; }
    #turn-path-actions button { padding:5px 8px; border-color:transparent; background:#243247; color:#dbeaff; font-size:11px; }
    #turn-path-actions button:hover:not(:disabled) { border-color:#7ea9df; background:#304b6b; }
    #turn-path-actions button:disabled { opacity:.38; }
    #end-turn { border-color:#6e5622; color:#ffe8a0; }
    #end-turn:disabled { opacity:.45; }
    .player-tool-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
    .player-spell-range { padding:9px; border:1px solid #5f7eb15c; border-radius:10px; background:linear-gradient(145deg,#202b3db3,#12161fa6); }
    .spell-shape-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; padding:3px; border:1px solid var(--line); border-radius:8px; background:#0a0d1373; }
    .spell-shape-switch button { min-width:0; padding:5px 2px; border-color:transparent; background:transparent; color:var(--muted); font-size:10px; }
    .spell-shape-switch button.active,.spell-shape-switch button[aria-pressed="true"] { border-color:#6fa4ed85; background:#3c67a173; color:#dcecff; }
    .spell-range-controls { display:grid; gap:6px; margin-top:7px; }
    .spell-range-controls[hidden],.spell-direction-row[hidden] { display:none; }
    .spell-range-value { display:flex; align-items:baseline; justify-content:space-between; gap:7px; }
    .spell-range-value strong { color:#cce3ff; font-size:17px; font-variant-numeric:tabular-nums; }
    .spell-range-value span { color:var(--muted); font-size:10px; }
    .spell-range-controls input[type="range"] { width:100%; accent-color:#6fa4ed; }
    .spell-range-presets { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; }
    .spell-range-presets button { min-width:0; padding:4px 1px; color:var(--muted); font-size:9px; }
    .spell-range-presets button.active { border-color:#6fa4ed9e; background:#3e68a152; color:#dcecff; }
    .spell-direction-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 6px; padding-top:6px; border-top:1px solid #ffffff11; }
    .spell-direction-row label { grid-column:1/-1; display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
    .spell-direction-row output { color:#a9d0ff; }
    .spell-direction-row button { padding:4px 6px; color:#bcd9ff; font-size:9px; }
    .join-mask { --join-background-image:none; position:fixed; inset:0; z-index:500; display:block; padding:0 22px 48px; overflow:auto; isolation:isolate; background:linear-gradient(180deg,rgba(8,10,15,.64),rgba(8,10,15,.93)),var(--join-background-image) center/cover no-repeat,#0d1018; }
    .join-mask[hidden] { display:none; }
    .join-mask::after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 72% 35%,rgba(87,139,221,.13),transparent 32%); }
    .join-shell { display:grid; grid-template-rows:auto auto 1fr; width:min(1180px,100%); min-height:100%; margin:0 auto; }
    .join-global-bar { display:flex; align-items:center; justify-content:space-between; min-height:58px; border-bottom:1px solid rgba(255,255,255,.11); }
    .join-brand { display:flex; align-items:center; gap:9px; min-width:0; }
    .join-brand-mark { display:grid; place-items:center; width:30px; height:30px; padding:2px; border:1px solid #426b9a; border-radius:8px; background:#0d1625c7; }
    .join-brand-mark img { display:block; width:100%; height:100%; object-fit:contain; }
    .join-brand strong { color:#f2f6fc; font-size:14px; }
    .join-brand > span:last-child { padding-left:9px; border-left:1px solid #ffffff1c; color:#929cab; font-size:11px; }
    .join-global-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; min-width:0; }
    .join-theme-picker { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:rgba(10,13,19,.62); backdrop-filter:blur(8px); }
    .join-theme-caption { padding:0 4px 0 3px; color:#808b9b; font-size:9px; letter-spacing:.08em; }
    .join-theme-picker button { display:grid; place-items:center; width:25px; height:23px; min-width:0; padding:0; border:1px solid transparent; border-radius:6px; background:transparent; color:#929cab; font-size:10px; font-weight:800; box-shadow:none; }
    .join-theme-picker button:hover { border-color:#5078aa; background:rgba(39,76,124,.42); color:#bfdbff; }
    .join-theme-picker button[aria-pressed="true"] { border-color:#679ce0; background:linear-gradient(180deg,rgba(81,136,207,.48),rgba(31,69,119,.58)); color:#e6f2ff; box-shadow:inset 0 1px rgba(255,255,255,.12); }
    .join-project-head { display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:84px; padding:16px 0; }
    .join-project-title { display:flex; align-items:center; min-width:0; gap:9px; }
    .join-project-icon { color:#8fbaff; font-size:20px; }
    .join-project-title h1 { display:flex; align-items:baseline; gap:7px; margin:0; color:#c9d1dc; font-size:clamp(16px,2.2vw,21px); font-weight:500; }
    .join-project-title h1 span { color:#697486; }
    .join-project-title h1 strong { color:#9fc8ff; font-weight:650; }
    .join-project-badge { padding:2px 7px; border:1px solid #495263; border-radius:999px; color:#9ba5b5; font-size:9px; }
    .join-dashboard { display:grid; grid-template-columns:minmax(0,1fr) 286px; align-items:start; gap:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.13); }
    .join-main { display:grid; min-width:0; gap:14px; }
    .join-box { display:grid; gap:12px; width:100%; padding:15px; border:1px solid #343b48; border-radius:10px; background:rgba(15,18,25,.84); box-shadow:inset 0 1px rgba(255,255,255,.035); backdrop-filter:blur(10px); }
    .join-box-head { display:grid; gap:2px; }
    .join-section-label { color:#6f9edb; font-size:9px; font-weight:800; letter-spacing:.18em; }
    .join-box h2 { margin:0; color:#f5f1e8; font-size:16px; letter-spacing:-.02em; }
    .join-server-status { flex:0 0 auto; margin-top:2px; padding:5px 8px; border:1px solid #4d5667; border-radius:999px; background:rgba(12,15,21,.5); color:#b9c1cf; font-size:10px; white-space:nowrap; }
    .join-server-status::before { content:'●'; margin-right:5px; color:#788294; }
    .join-server-status[data-state="ready"] { border-color:rgba(76,195,138,.35); color:#99dfbd; }
    .join-server-status[data-state="ready"]::before { color:#4cc38a; }
    .join-server-status[data-state="error"] { border-color:rgba(231,76,94,.35); color:#ff9aa5; }
    .join-server-status[data-state="error"]::before { color:#e74c5e; }
    .join-campaign-card { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:end; aspect-ratio:16 / 9; gap:11px; min-height:0; overflow:hidden; padding:82px 15px 14px; border:1px solid rgba(105,157,232,.38); border-radius:12px; background:radial-gradient(circle at 20% 25%,#4d6583 0,transparent 38%),linear-gradient(135deg,#26374f,#141922 70%); box-shadow:inset 0 1px rgba(255,255,255,.04),0 8px 18px rgba(0,0,0,.2); isolation:isolate; }
    .join-campaign-card::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(7,10,15,.03) 20%,rgba(8,11,17,.35) 48%,rgba(8,10,15,.96) 100%); pointer-events:none; }
    .join-campaign-cover { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
    .join-campaign-cover[hidden] { display:none; }
    .join-campaign-icon { position:relative; z-index:2; display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(159,200,255,.3); border-radius:11px; background:rgba(18,39,66,.72); color:#c1dcff; font-size:22px; backdrop-filter:blur(6px); }
    .join-campaign-copy { position:relative; z-index:2; display:grid; min-width:0; gap:2px; }
    .join-campaign-copy span { color:#a8ceff; font-size:10px; font-weight:700; letter-spacing:.1em; text-shadow:0 1px 3px #000; }
    .join-campaign-copy strong { overflow:hidden; color:#fff; font-size:16px; text-overflow:ellipsis; text-shadow:0 2px 5px #000; white-space:nowrap; }
    .join-campaign-copy small { overflow:hidden; color:#d0d8e4; font-size:10px; text-overflow:ellipsis; text-shadow:0 1px 3px #000; white-space:nowrap; }
    .join-room-panel { display:grid; overflow:hidden; min-height:215px; border:1px solid #343b48; border-radius:10px; background:rgba(13,16,22,.88); backdrop-filter:blur(10px); }
    .join-room-panel > header { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:54px; padding:10px 13px; border-bottom:1px solid #343b48; }
    .join-room-panel > header > div { display:grid; gap:1px; }
    .join-room-panel > header strong { color:#edf0f5; font-size:13px; }
    .join-room-panel > header span { color:#798496; font-size:9px; }
    #join-refresh { padding:5px 8px; border-color:#4a5363; background:#202631; color:#9fc8ff; font-size:10px; }
    .join-room-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:0; }
    .join-room-stat { display:grid; align-content:center; gap:7px; min-width:0; min-height:159px; padding:18px; border-right:1px solid #2d3440; background:transparent; text-align:center; }
    .join-room-stat:last-child { border-right:0; }
    .join-room-stat span { color:#778296; font-size:9px; letter-spacing:.08em; }
    .join-room-stat strong { overflow:hidden; color:#e6ecf6; font-size:clamp(14px,2vw,19px); text-overflow:ellipsis; white-space:nowrap; }
    .join-box form { display:grid; gap:8px; }
    .join-mode-switch{display:flex;gap:4px;padding:4px;margin:0 0 16px;background:#101721;border:1px solid #ffffff12;border-radius:11px}
    .join-mode-switch button{flex:1;border:0;border-radius:8px;padding:9px 6px;color:#9faabb;background:transparent;font-size:12px}
    .join-mode-switch button[aria-pressed=true]{color:#e9d5ad;background:#3c3428;box-shadow:inset 0 0 0 1px #c3a36b44}
    .join-mode-switch button:focus-visible{outline:2px solid #d8b780;outline-offset:2px}
    .join-fields { display:grid; grid-template-columns:1fr; gap:8px; }
    .join-field { display:grid; gap:5px; color:#aeb6c5; font-size:11px; }
    .join-box input { width:100%; padding:10px; }
    .join-submit { min-height:42px; border-color:#74a9ed!important; background:linear-gradient(#5c92d8,#376fbe)!important; color:#fff; font-weight:800; box-shadow:0 8px 22px #173b6a55; }
    .join-submit:hover { background:linear-gradient(#6da1e3,#407cc9)!important; }
    #join-error { min-height:18px; color:#ff9aa5; font-size:12px; line-height:18px; }
    #join-error[data-state="ok"] { color:#8edeb5; }
    .join-box-foot { min-height:24px; padding-top:8px; border-top:1px solid #ffffff10; }
    #join-session-hint { color:#828da0; font-size:10px; }
    .join-shell.is-busy button,.join-shell.is-busy input { pointer-events:none; opacity:.62; }
    @media (max-width:820px) { .join-mask { padding:0 16px 34px; } .join-dashboard { grid-template-columns:1fr; gap:16px; } .join-box { grid-template-columns:repeat(2,minmax(0,1fr)); } .join-box-head,.join-submit,.join-box-foot { grid-column:1/-1; } }
    @media (max-width:520px) { .join-mask { padding:0 10px 24px; } .join-global-bar { align-items:flex-start; gap:8px; padding:10px 0; } .join-global-actions { align-items:flex-end; flex-direction:column-reverse; gap:5px; } .join-theme-caption { display:none; } .join-project-head { align-items:flex-start; flex-direction:column; gap:10px; } .join-dashboard { padding-top:14px; } .join-room-grid { grid-template-columns:1fr; } .join-room-stat { min-height:78px; border-right:0; border-bottom:1px solid #2d3440; } .join-room-stat:last-child { border-bottom:0; } .join-box { grid-template-columns:1fr; } .join-box-head,.join-submit,.join-box-foot { grid-column:auto; } }
    .rest-transition { --rest-duration:2200ms; position:fixed; inset:0; z-index:350; isolation:isolate; display:grid; place-items:center; overflow:hidden; color:#fff8df; cursor:wait; pointer-events:auto; animation:rest-transition-veil var(--rest-duration) ease-in-out both; }
    .rest-transition[hidden] { display:none; }
    .rest-transition.is-short { background:radial-gradient(circle at 50% 58%,rgba(244,157,61,.34),transparent 33%),rgba(18,14,13,.78); }
    .rest-transition.is-long { background:linear-gradient(180deg,rgba(5,10,30,.94),rgba(20,26,48,.91)); }
    .rest-transition-sky { position:absolute; inset:-15%; z-index:-1; pointer-events:none; }
    .rest-transition.is-short .rest-transition-sky { background:radial-gradient(circle at 45% 58%,rgba(255,184,81,.30) 0 2%,transparent 19%),radial-gradient(circle at 57% 61%,rgba(226,84,33,.24),transparent 22%); animation:rest-short-glow var(--rest-duration) ease-in-out both; }
    .rest-transition.is-long .rest-transition-sky { background:radial-gradient(circle at 22% 24%,rgba(219,229,255,.75) 0 1.4%,transparent 1.7%),radial-gradient(circle at 73% 18%,rgba(255,255,255,.55) 0 .6%,transparent .9%),radial-gradient(circle at 62% 35%,rgba(255,255,255,.48) 0 .45%,transparent .75%),radial-gradient(circle at 35% 42%,rgba(255,255,255,.42) 0 .5%,transparent .8%),linear-gradient(180deg,#07102c 0%,#182345 56%,#d98564 100%); animation:rest-long-dawn var(--rest-duration) ease-in-out both; }
    .rest-transition-card { display:grid; justify-items:center; min-width:min(320px,calc(100vw - 48px)); padding:25px 30px 22px; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:rgba(14,18,28,.56); box-shadow:0 24px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(12px); animation:rest-transition-card var(--rest-duration) cubic-bezier(.2,.8,.2,1) both; }
    .rest-transition-icon { font-size:45px; line-height:1; filter:drop-shadow(0 7px 14px rgba(0,0,0,.38)); animation:rest-transition-icon var(--rest-duration) ease-in-out both; }
    .rest-transition-card strong { margin-top:12px; color:#fff2c6; font-size:26px; letter-spacing:.12em; }
    .rest-transition-card > span:nth-of-type(2) { margin-top:5px; color:rgba(231,235,246,.76); font-size:12px; letter-spacing:.08em; }
    .rest-transition-progress { position:relative; width:210px; height:3px; margin-top:18px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.13); }
    .rest-transition-progress i { position:absolute; inset:0 auto 0 0; width:100%; border-radius:inherit; background:linear-gradient(90deg,#db8e45,#ffe4a0); transform-origin:left; animation:rest-transition-progress var(--rest-duration) linear both; }
    .rest-transition.is-long .rest-transition-progress i { background:linear-gradient(90deg,#798fd0,#f4c895); }
    @keyframes rest-transition-veil { 0%{opacity:0} 12%,78%{opacity:1} 100%{opacity:0} }
    @keyframes rest-transition-card { 0%{opacity:0;transform:translateY(10px) scale(.96)} 16%,78%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-7px) scale(.98)} }
    @keyframes rest-transition-icon { 0%{opacity:0;transform:translateY(7px) scale(.78)} 18%{opacity:1;transform:translateY(0) scale(1)} 55%{transform:translateY(-4px) scale(1.08)} 100%{opacity:0;transform:translateY(-10px) scale(.9)} }
    @keyframes rest-transition-progress { from{transform:scaleX(0)} to{transform:scaleX(1)} }
    @keyframes rest-short-glow { 0%,100%{opacity:.25;transform:scale(.86)} 45%{opacity:1;transform:scale(1.08)} }
    @keyframes rest-long-dawn { 0%{opacity:.9;transform:translateY(0) scale(1);filter:hue-rotate(-8deg) brightness(.72)} 58%{opacity:1;transform:translateY(-2%) scale(1.02);filter:hue-rotate(0) brightness(.9)} 100%{opacity:.96;transform:translateY(-5%) scale(1.05);filter:hue-rotate(12deg) brightness(1.28)} }
    @media (prefers-reduced-motion:reduce) { .rest-transition,.rest-transition-card,.rest-transition-icon,.rest-transition-progress i,.rest-transition-sky { animation-timing-function:linear; } }
    .player-tool-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:7px; }
    .doodle-tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
    [data-doodle-tool].active { border-color:#e0b34c; background:#3a3325; color:#ffe9a0; }
    .player-doodle-options { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
    .player-doodle-colors { display:flex; gap:5px; }
    .player-doodle-color { width:24px; height:24px; flex:0 0 auto; padding:0; border:2px solid transparent; border-radius:50%; }
    .player-doodle-color.active { border-color:#fff; box-shadow:0 0 0 2px var(--gold); }
    #player-doodle-width { width:76px; min-width:76px; padding:5px 6px; border:1px solid var(--line); border-radius:6px; background:#10141c; color:var(--text); }
    .player-doodle-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:8px; }
    #player-doodle-count { float:right; color:var(--muted); font-size:11px; font-weight:400; }
    @media (max-width:900px) {
      #btn-left-panel, #btn-join { display:inline-block; }
      #topbar { height:58px; gap:7px; padding:0 9px; }
      #brand { font-size:13px; }
      #campaign { display:none; }
      #player-name { width:92px; }
      #session-badge, #latency { display:none; }
      #topbar-actions { gap:4px; }
      #topbar-actions button { padding-inline:7px; }
      #action-dock { padding-bottom:calc(7px + env(safe-area-inset-bottom)); }
      #action-dock button { padding:8px 10px; }
      #end-turn { margin-left:0; }
      #left-panel.mobile-open { display:block; position:absolute; z-index:7; left:0; top:0; width:min(300px,88vw); height:100%; background:#1b202bf7; box-shadow:12px 0 28px #0008; }
      #right-panel { top:0; height:calc(100% - 0px); }
    }
    @media (max-width:900px) { .flow-head .flow-date { max-width:42vw; } .flow-weather-summary { display:none; } #flow-panel-initiative:not([hidden]) { grid-template-columns:minmax(145px,180px) minmax(0,1fr); } #flow-panel-time:not([hidden]) { grid-template-columns:1fr 1fr; } .flow-time-card,.flow-weather-card { padding:7px 9px; } }
    #toast { position:fixed; z-index:20; left:50%; bottom:18px; transform:translateX(-50%); padding:8px 12px; border-radius:8px; background:#10141de8; border:1px solid #4c5870; opacity:0; pointer-events:none; transition:opacity .18s; }
    #toast.show { opacity:1; }
    @media (max-width:900px) { #layout { grid-template-columns:1fr; } .panel { display:none; } #right-panel { display:block; position:absolute; z-index:7; right:0; top:0; width:min(300px,88vw); height:100%; background:#1b202bf7; box-shadow:-12px 0 28px #0008; } #right-panel:has(#detail[hidden]):not(.mobile-open) { display:none; } }

/* Single-color sidebar marks and consistent compact category tabs. */
.player-workspace-tabs{gap:4px;padding:5px;border-color:#3b414e;background:linear-gradient(140deg,#1c222c,#11161f);box-shadow:none}
.player-workspace-tab{min-height:48px;font-size:19px;gap:3px;border-radius:8px}
.player-workspace-tab span{font-size:11px;letter-spacing:.5px}
.player-workspace-tab.active{background:#302c23;border-color:#786139;color:#e5c17a}
.player-workspace-tab:hover:not(.active){background:#ffffff06;color:#e0e4ec}
#left-panel .card{border-radius:12px}
#left-panel .card h2{color:#d8c394;font-size:13px;letter-spacing:.3px}
#left-panel .card button{border-radius:8px}
#left-panel button:focus-visible{outline:2px solid #d5b46a;outline-offset:2px}
.player-tool-actions{gap:8px}

#btn-player-maps,#btn-player-journal{border-color:#665638;background:linear-gradient(145deg,#332d23,#242a35);color:#f1d394}
#btn-player-maps:hover,#btn-player-journal:hover{border-color:#9a7c43;background:linear-gradient(145deg,#403724,#2d3440)}
#topbar-actions{flex-shrink:0}#topbar-actions button{white-space:nowrap}
@media(max-width:650px){#topbar{height:auto;min-height:58px;flex-wrap:wrap;padding:8px 9px;gap:7px}#topbar-actions{width:100%;overflow-x:auto;padding-bottom:2px}#topbar-actions button{flex:1;padding-inline:6px;font-size:12px}body{display:flex;flex-direction:column;height:100dvh;min-height:0}#topbar{flex:0 0 auto}#layout{flex:1;min-height:0;height:auto}}

/* Adventure desk actions share one silhouette, with subtle functional tints. */
#topbar-actions>button{--action-accent:#d9bf8b;--action-tint:#39362b;box-sizing:border-box;height:36px;padding:0 11px;border:1px solid color-mix(in srgb,var(--action-accent) 38%,#282d2e);border-radius:9px;background:linear-gradient(145deg,var(--action-tint),#222b2e);color:var(--action-accent);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;box-shadow:inset 0 1px 0 #ffffff08;transition:background .15s,border-color .15s}
#topbar-actions>button:not(#btn-left-panel){display:inline-flex;align-items:center;justify-content:center;gap:7px}
#topbar-actions>button:hover{border-color:var(--action-accent);background:linear-gradient(145deg,color-mix(in srgb,var(--action-tint) 80%,#bba57b),#2c3638)}
#topbar-actions>button:focus-visible{outline:2px solid var(--action-accent);outline-offset:3px}
#topbar-actions>#btn-player-maps{--action-accent:#b4cbb6;--action-tint:#2d3a34}
#topbar-actions>#btn-player-journal{--action-accent:#ddd0af;--action-tint:#39382e}
#topbar-actions>#btn-player-backpack{--action-accent:#dfba92;--action-tint:#3c322a}
#topbar-actions>#btn-join{--action-accent:#bfc7c5;--action-tint:#30383a}
.player-action-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){#topbar-actions>button{padding-inline:8px}}
@media(max-width:650px){#topbar-actions>button{height:36px;font-size:12px;padding-inline:7px}#topbar-actions>button:not(#btn-left-panel){gap:5px}.player-action-icon{width:16px;height:16px}}

    .draft-image-adjust { grid-column:1 / -1; color:var(--gold); }