.scdev-bg{--bg-ink:#30343b;--bg-muted:#717b80;--bg-accent:#24776c;--bg-line:#dce3e0;width:100%;max-width:none;margin:0;padding:6px 12px;box-sizing:border-box;background:#fff!important;color:var(--bg-ink)!important;font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif!important;container-type:inline-size}
.scdev-bg *{box-sizing:border-box}.scdev-bg .bg-shell{display:grid;grid-template-columns:minmax(170px,200px) minmax(0,1fr) minmax(150px,180px);gap:16px;align-items:start;min-width:0}
.scdev-bg :is(button,select){font:13px/1.4 system-ui,sans-serif!important;color:#30343b!important;background:#fff!important;border:1px solid #dce3e0!important;border-radius:6px;padding:6px 12px!important;min-height:36px;cursor:pointer;box-shadow:none!important;touch-action:manipulation}
.scdev-bg button:hover:not(:disabled){border-color:#24776c!important;background:#f2f8f5!important}.scdev-bg button:disabled{opacity:.38;cursor:default}.scdev-bg button:focus-visible,.scdev-bg select:focus-visible,.scdev-bg summary:focus-visible{outline:3px solid #d89339;outline-offset:2px}
.scdev-bg button.bg-primary{background:#24776c!important;color:#fff!important;border-color:#24776c!important}.scdev-bg .bg-rail,.scdev-bg .bg-info{max-height:var(--bg-height,80dvh);overflow:auto;scrollbar-width:thin;min-width:0;overscroll-behavior:contain}
.scdev-bg .bg-eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:800;color:#24776c!important;margin-bottom:8px}.scdev-bg h1{font:800 clamp(21px,2.7cqw,34px)/1.12 system-ui,sans-serif!important;letter-spacing:-1.3px;margin:0 0 6px!important;color:#30343b!important}.scdev-bg h1 span{color:#bd744a!important}
.scdev-bg .bg-subtitle{font-size:12px;margin:0 0 18px!important}.scdev-bg .bg-mode-label{display:grid;gap:4px;font-size:11px;color:#717b80!important;margin-bottom:8px}.scdev-bg select{width:100%;min-width:0;padding:6px!important;font-size:11px!important}.scdev-bg [data-action=new]{width:100%;margin-bottom:14px}
.scdev-bg .bg-player{border:1px solid #dce3e0;border-radius:8px;padding:6px 12px;margin-bottom:8px;background:#fff}.scdev-bg .bg-active-player{border-color:#24776c;box-shadow:inset 3px 0 #24776c}.scdev-bg .bg-player>div{display:flex;align-items:center;gap:6px}.scdev-bg .bg-player>div>span{margin-left:auto;font-size:10px;color:#717b80!important}.scdev-bg .bg-player i{width:14px;height:14px;border:1px solid #b7ac91;border-radius:50%;background:#fff3d3;display:inline-block}.scdev-bg .bg-black i{background:#354b52;border-color:#20353d}
.scdev-bg dl{display:flex;justify-content:space-between;margin:8px 0 0!important;gap:6px}.scdev-bg dl div{display:grid;gap:1px}.scdev-bg dt{font-size:9px;font-weight:500;color:#717b80!important;text-transform:uppercase;letter-spacing:.6px}.scdev-bg dd{margin:0!important;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.scdev-bg .bg-turn{font-weight:750;font-size:13px;margin-top:14px}.scdev-bg .bg-dice{display:flex;gap:4px;min-height:48px;align-items:center}.scdev-bg button.bg-die{font:38px/1 system-ui,sans-serif!important;padding:0 3px!important;min-height:42px;min-width:38px;border:0!important;background:transparent!important}.scdev-bg button.bg-preferred{outline:2px solid #24776c}.scdev-bg .bg-status{font-size:12px;min-height:54px;margin:6px 0 10px!important}.scdev-bg .bg-actions{display:flex;flex-wrap:wrap;gap:6px}.scdev-bg .bg-actions button{font-size:12px!important;padding:6px 10px!important}
.scdev-bg .bg-help{font-size:12px;border-top:1px solid #dce3e0;margin-top:16px;padding-top:6px}.scdev-bg summary{cursor:pointer;font-weight:700}.scdev-bg .bg-help p{margin:8px 0!important;font-size:12px!important}
.scdev-bg .bg-play{width:100%;max-width:calc((var(--bg-height,80dvh) - 65px)*1.48);justify-self:center;min-width:0}
.scdev-bg .bg-board{position:relative;width:100%;aspect-ratio:1.48;background:#f2e7d3;border:10px solid #425e59;border-radius:10px;box-shadow:0 8px 24px #213f3214;overflow:hidden;container-type:inline-size}
.scdev-bg .bg-points{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) .62fr repeat(6,minmax(0,1fr));grid-template-rows:1fr 1fr;row-gap:12%;padding:0 4px}
.scdev-bg button.bg-point{position:relative;min-width:0;min-height:0;border:0!important;border-radius:0;padding:0!important;background:transparent!important;overflow:visible;display:block}
.scdev-bg .bg-point::before{content:"";position:absolute;inset:16px 2px 0;clip-path:polygon(0 0,100% 0,50% 100%);background:#b86d4b}.scdev-bg .bg-point.bg-sand::before{background:#8ba99d}.scdev-bg .bg-bottom::before{inset:0 2px 16px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.scdev-bg .bg-point-number{position:absolute;left:0;right:0;top:1px;text-align:center;font:9px/1.3 ui-monospace,monospace!important;color:#6b705f!important}.scdev-bg .bg-bottom .bg-point-number{top:auto;bottom:1px}
.scdev-bg .bg-stack{position:absolute;top:18px;bottom:0;left:5%;width:90%}.scdev-bg .bg-bottom .bg-stack{top:0;bottom:18px}
.scdev-bg .bg-checker{display:flex;align-items:center;justify-content:center;position:absolute;top:calc(var(--n,0)*17%);width:100%;aspect-ratio:1;border-radius:50%;border:2px solid #d1bc91;background:radial-gradient(circle at 35% 28%,#fffbed,#ead8b2);box-shadow:inset 0 0 0 3px #fff8,0 2px 3px #0003;color:#3b403c!important;font:bold clamp(9px,2.5cqw,16px)/1 system-ui!important;pointer-events:none}
.scdev-bg .bg-checker-black{border-color:#243f45;background:radial-gradient(circle at 35% 28%,#536e77,#263f47);box-shadow:inset 0 0 0 3px #fff1,0 2px 3px #0003;color:#fff!important}.scdev-bg .bg-bottom .bg-checker{top:auto;bottom:calc(var(--n,0)*17%)}
.scdev-bg .bg-source .bg-stack .bg-checker:last-child{outline:2px solid #24776c;outline-offset:1px}.scdev-bg .bg-selected .bg-stack .bg-checker:last-child{outline:3px solid #efba51;outline-offset:2px}.scdev-bg .bg-destination::after{content:"";position:absolute;left:25%;width:50%;aspect-ratio:1;border:3px solid #24776c;border-radius:50%;top:36%;background:#e7fff094;box-shadow:0 0 0 3px #fff7}.scdev-bg .bg-bottom.bg-destination::after{top:auto;bottom:36%}
.scdev-bg .bg-bar{position:absolute;left:47.55%;width:4.9%;height:100%;background:#425e59;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6px 0;gap:6px}.scdev-bg .bg-bar>span{font:8px/1 monospace;color:#e2ebe4!important;letter-spacing:1px;writing-mode:vertical-rl}.scdev-bg .bg-bar button{width:100%;min-width:0;min-height:28px;aspect-ratio:1;padding:0!important;border:0!important;background:transparent!important;position:relative}.scdev-bg .bg-bar .bg-checker{position:relative;top:0;font-size:12px!important;border-width:1px}.scdev-bg .bg-empty-bar{font-size:9px;color:#c3d3c9!important}.scdev-bg .bg-bar .bg-source{outline:2px solid #e9bc69}.scdev-bg .bg-bar .bg-selected{outline:3px solid #f6db9c}
.scdev-bg .bg-board-note{position:absolute;top:47%;left:8%;right:8%;text-align:center;font:clamp(7px,1.5cqw,10px)/1 ui-monospace,monospace;color:#4d695e!important;pointer-events:none;letter-spacing:1px;background:#f2e7d3;padding:6px 0}
.scdev-bg .bg-trays{display:flex;justify-content:space-between;gap:8px;margin-top:8px}.scdev-bg .bg-trays button{width:50%;display:flex;justify-content:space-between;align-items:center;font-size:11px!important}.scdev-bg .bg-trays .bg-destination{outline:3px solid #24776c;background:#e5f4ed!important}.scdev-bg .bg-caption{display:flex;justify-content:space-between;flex-wrap:wrap;font-size:9px;color:#717b80!important;margin-top:6px;gap:3px}
.scdev-bg .bg-info h2{font:750 21px/1.2 system-ui!important;margin:0 0 8px!important;color:#30343b!important}.scdev-bg .bg-info h3{font:700 11px/1.4 system-ui!important;text-transform:uppercase;letter-spacing:1px;margin:20px 0 8px!important;color:#717b80!important}.scdev-bg .bg-info p{font-size:12px!important;margin:0 0 14px!important}.scdev-bg .bg-legend{display:flex;align-items:center;gap:8px;font-size:11px;margin:6px 0}.scdev-bg .bg-dot,.scdev-bg .bg-ring{width:12px;height:12px;display:block;border-radius:50%;background:#efba51}.scdev-bg .bg-ring{background:transparent;border:2px solid #24776c}.scdev-bg .bg-options{display:grid;gap:5px;font-size:12px;color:#717b80!important}.scdev-bg .bg-options button{display:flex;justify-content:space-between;align-items:center;font-size:12px!important}.scdev-bg .bg-options small{font-size:10px}.scdev-bg .bg-log{padding-left:16px!important;margin:0!important;font-size:11px;color:#717b80!important}.scdev-bg .bg-log li{margin-bottom:6px}.scdev-bg .bg-tip{border:1px solid #e5ddc7;background:#fffbf2;border-radius:6px;padding:6px 12px;font-size:11px;color:#776340!important;margin-top:18px}
.scdev-bg .bg-confirm{border:1px solid #dce3e0;border-radius:10px;padding:6px 12px;max-width:340px;background:#fff;color:#30343b}.scdev-bg .bg-confirm::backdrop{background:#12292388}.scdev-bg .bg-confirm h2{font:700 22px/1.2 system-ui!important;color:#30343b!important}
.scdev-bg.bg-narrow .bg-shell{grid-template-columns:160px minmax(0,1fr);gap:12px}.scdev-bg.bg-narrow .bg-info{display:none}.scdev-bg.bg-phone .bg-shell{display:flex;flex-direction:column}.scdev-bg.bg-phone .bg-play{order:0;max-width:100%}.scdev-bg.bg-phone .bg-rail{order:1;max-height:none;overflow:visible;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.scdev-bg.bg-phone .bg-rail>*{margin:0!important}.scdev-bg.bg-phone .bg-eyebrow,.scdev-bg.bg-phone .bg-subtitle{display:none}.scdev-bg.bg-phone .bg-rail h1{font-size:23px!important}.scdev-bg.bg-phone .bg-rail .bg-status,.scdev-bg.bg-phone .bg-rail .bg-actions,.scdev-bg.bg-phone .bg-help{grid-column:1/-1}.scdev-bg.bg-phone .bg-player{padding:6px}.scdev-bg.bg-phone .bg-board{border-width:6px}.scdev-bg.bg-phone .bg-checker{border-width:1px;box-shadow:inset 0 0 0 1px #fff5,0 1px 2px #0003}
/* Theme isolation without changing the surrounding page. */
:is(body,#scdev-single-container) .scdev-bg :is(h1,h2,h3,p,label,dt,dd,summary,li){color:#30343b!important;text-shadow:none!important;font-family:system-ui,sans-serif!important}
.scdev-bg .bg-room{border:1px solid #dce3e0;border-radius:6px;padding:6px;margin-bottom:12px;font-size:11px}.scdev-bg .bg-room[hidden]{display:none}.scdev-bg .bg-room label{display:grid;gap:4px}.scdev-bg .bg-room input{min-width:0;width:100%;padding:6px;border:1px solid #dce3e0;border-radius:4px;background:white;color:#30343b;font:11px/1.4 system-ui}.scdev-bg .bg-room button{margin-top:6px}.scdev-bg .bg-room p{font-size:11px!important;margin:6px 0 0!important}
:is(body,#scdev-single-container) .scdev-bg .bg-rail :is(span,strong,small),:is(body,#scdev-single-container) .scdev-bg .bg-info :is(span,strong,small){color:#30343b!important}
.scdev-bg .bg-rail h1{font-size:26px!important;overflow-wrap:anywhere}.scdev-bg .bg-dice{flex-wrap:wrap}.scdev-bg .bg-player{margin-bottom:6px}.scdev-bg .bg-subtitle{margin-bottom:12px!important}.scdev-bg .bg-turn{margin-top:8px}
:is(body,#scdev-single-container) .scdev-bg :is(.bg-turn,.bg-legend,.bg-caption,.bg-room){color:#30343b!important}
/* Give the board the content width and viewport height left after a compact control rail. */
.scdev-bg .bg-shell{grid-template-columns:minmax(135px,clamp(160px,20cqw,220px)) minmax(0,1fr);column-gap:16px}
.scdev-bg .bg-rail{max-height:var(--bg-height,80dvh);overflow:auto;min-width:0}
.scdev-bg .bg-info{max-height:none;overflow:visible;padding-top:14px;border-top:1px solid #dce3e0}
.scdev-bg .bg-play{width:100%;max-width:min(var(--bg-board-width,100%),calc((var(--bg-height,80dvh) - 65px)*1.48));min-width:0}
.scdev-bg.bg-phone .bg-shell{display:flex;flex-direction:column;gap:10px}
.scdev-bg.bg-phone .bg-play{order:0;max-width:min(100%,calc((var(--bg-height,80dvh) - 65px)*1.48))}
.scdev-bg.bg-phone .bg-rail{order:1;width:100%;max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:8px}
.scdev-bg.bg-phone .bg-info{display:block;grid-column:1/-1;padding-top:8px}
.scdev-bg.bg-phone .bg-player{margin:0}
.scdev-bg.bg-phone .bg-turn,.scdev-bg.bg-phone .bg-dice,.scdev-bg.bg-phone .bg-status,.scdev-bg.bg-phone .bg-actions,.scdev-bg.bg-phone .bg-help,.scdev-bg.bg-phone .bg-info{grid-column:1/-1}
.scdev-bg.bg-narrow:not(.bg-phone) .bg-shell{grid-template-columns:minmax(135px,clamp(160px,20cqw,220px)) minmax(0,1fr);column-gap:16px}
.scdev-bg.bg-narrow:not(.bg-phone) .bg-info{display:block}
/* Keep the controls and board in view; move move-help into its own rail when width allows. */
.scdev-bg .bg-shell{grid-template-columns:minmax(190px,clamp(200px,20cqw,240px)) minmax(0,1fr) minmax(200px,clamp(200px,20cqw,260px));gap:24px;align-items:center}
.scdev-bg .bg-rail,.scdev-bg .bg-info{max-height:none;overflow:visible}
.scdev-bg .bg-play{max-width:min(var(--bg-board-width,100%),calc((var(--bg-height,80dvh) - 65px)*1.48))}
.scdev-bg .bg-info{display:block;padding-top:0;border-top:0}
.scdev-bg.bg-narrow .bg-shell{grid-template-columns:160px minmax(0,1fr);gap:12px;align-items:start}
.scdev-bg.bg-narrow .bg-info{display:none}
.scdev-bg.bg-narrow .bg-eyebrow,.scdev-bg.bg-narrow .bg-subtitle{display:none}
.scdev-bg.bg-narrow .bg-rail h1{font-size:21px!important;margin-bottom:5px!important}
.scdev-bg.bg-narrow .bg-mode-label{gap:2px;font-size:10px;margin-bottom:4px}
.scdev-bg.bg-narrow [data-action=new]{margin-bottom:6px}
.scdev-bg.bg-narrow .bg-player{padding:4px 6px;margin-bottom:4px}
.scdev-bg.bg-narrow .bg-player dl{margin-top:3px!important;gap:3px}
.scdev-bg.bg-narrow .bg-player dt{font-size:8px}
.scdev-bg.bg-narrow .bg-player dd{font-size:12px}
.scdev-bg.bg-narrow .bg-turn{font-size:12px;margin-top:5px}
.scdev-bg.bg-narrow .bg-dice{min-height:34px}
.scdev-bg.bg-narrow button.bg-die{font-size:30px!important;min-height:32px;min-width:32px}
.scdev-bg.bg-narrow .bg-status{font-size:11px;min-height:0;margin:2px 0 4px!important}
.scdev-bg.bg-narrow .bg-actions{gap:4px}
.scdev-bg.bg-narrow .bg-actions button{min-height:30px;padding:4px 8px!important}
.scdev-bg.bg-narrow .bg-help{margin-top:6px;padding-top:4px}
.scdev-bg.bg-phone .bg-shell{display:flex;flex-direction:column;gap:8px}
.scdev-bg.bg-phone .bg-play{order:0;max-width:min(100%,calc((var(--bg-height,80dvh) - 65px)*1.48))}
.scdev-bg.bg-phone .bg-rail{order:1;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-items:start}
.scdev-bg.bg-phone .bg-rail>*{margin-top:0!important;margin-bottom:0!important}
.scdev-bg.bg-phone .bg-rail h1{font-size:18px!important}
.scdev-bg.bg-phone .bg-rail .bg-mode-label,.scdev-bg.bg-phone .bg-rail .bg-actions,.scdev-bg.bg-phone .bg-rail .bg-status,.scdev-bg.bg-phone .bg-rail .bg-help{grid-column:1/-1}
.scdev-bg.bg-phone .bg-player{padding:4px}
.scdev-bg.bg-phone .bg-player dl{margin-top:2px!important}
.scdev-bg.bg-phone .bg-status{line-height:1.25}
.scdev-bg.bg-phone .bg-help{display:none}
.scdev-bg.bg-phone .bg-play{order:1}
.scdev-bg.bg-phone .bg-rail{order:0}
.scdev-bg.bg-narrow:not(.bg-phone) .bg-info{display:none}
.scdev-bg.bg-narrow .bg-help{display:none}