/* One shell for the study. Board compatibility rules are in a lower CSS layer. */
html { height: 100%; overflow: hidden; }
body.ramified-player.design-study {
  --bg:#F1F3EF; --surface:#FAFBF8; --text:#18212B; --muted:#55606B; --border:#CBD2CC;
  --accent:#0E6B63; --accent2:#0E6B63; --accent-ink:#fff; --tint:#D3E8E3; --shadow:none;
  --ui:1.8cqw; --small:1.45cqw; --gap:1.5cqw; --inset:3cqw; --control:5cqw;
  --player-gap:var(--gap); --player-small-gap:1cqw; --player-page-inset:var(--inset);
  --player-control-height:var(--control); --player-icon-size:var(--control); --player-frame-height:100cqh;
  margin:0; padding:0; width:100%; height:100dvh; min-height:0; overflow:hidden;
  display:grid; place-items:center; background:var(--bg); color:var(--text);
  font-family:'Source Sans 3','Noto Sans SC','Microsoft YaHei','PingFang SC',system-ui,sans-serif;
}
.design-study [hidden] { display:none !important; }
.design-study > header, .design-study > footer, .design-study .side,
.design-study .canvas-panel > .panel-title, .design-study .mosaic-underbar { display:none; }
.design-study .mosaic-layout {
  position:relative; width:min(100vw, calc(100dvh * 4 / 3)); height:auto; aspect-ratio:4/3;
  max-width:none; margin:0; padding:0; display:block; container-type:size;
  background:var(--surface); border:1px solid var(--border); overflow:hidden; --study-px:.1041667cqw;
  --player-gap:var(--gap); --player-small-gap:1cqw; --player-page-inset:var(--inset);
  --player-control-height:var(--control); --player-icon-size:var(--control); --player-frame-height:100cqh;
}
.design-study .canvas-panel { width:100%; height:100%; border:0; border-radius:0; box-shadow:none; background:var(--surface); font-size:var(--ui); line-height:1.4; }
.design-study #canvas-wrap { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:9cqh 3cqw 13cqh; overflow:hidden; }
.design-study #mosaic-canvas { display:block; flex:none; max-width:100%; max-height:100%; width:var(--canvas-display-width,100%); height:var(--canvas-display-height,auto); touch-action:none; }
.design-study :is(button,input,select,textarea,summary,a):focus-visible { outline:.3cqw solid var(--accent); outline-offset:.35cqw; }
.design-study :is(button,input,select,textarea,summary) { font:inherit; font-size:var(--ui); line-height:1.35; color:var(--text); }
.design-study :is(button,input,select,textarea) { appearance:none; border:1px solid var(--border); border-radius:.3cqw; background:var(--surface); box-shadow:none; }
.design-study :is(.btn,button,select,input:not([type=checkbox]):not([type=radio]):not([type=range])) { min-height:var(--control); padding:.8cqw 1.5cqw; letter-spacing:0; text-transform:none; white-space:normal; overflow-wrap:anywhere; }
.design-study button { cursor:pointer; transition:none; }
.design-study button:hover { background:var(--tint); transform:none; box-shadow:none; color:var(--text); }
.design-study button:disabled { opacity:.45; cursor:not-allowed; }
.design-study select { padding-inline-end:3cqw; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2355606B' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1cqw center; background-size:1.2cqw; }
.design-study :is(input[type=checkbox],input[type=radio]) { appearance:auto; accent-color:var(--accent); width:2cqw; height:2cqw; flex:none; }
.design-study input[type=range] { appearance:auto; accent-color:var(--accent); min-height:var(--control); max-width:100%; }
.design-study summary { cursor:pointer; min-height:var(--control); padding:1cqw 0; }
.design-study h1,.design-study h2 { font-family:'STIX Two Text','Noto Serif SC','Songti SC',Georgia,serif; font-weight:600; line-height:1.15; }
.design-study h2 { font-size:2.8cqw; }
.design-study p { font-size:var(--ui); line-height:1.5; }
.design-study svg { fill:none; stroke:currentColor; }
.design-study #player-menu { position:absolute; inset:0; z-index:30; background:var(--surface); overflow:hidden; display:flex; }
.design-study .player-menu-sheet { display:flex; flex-direction:column; width:100%; height:100%; min-height:0; }
.design-study .player-menu-header,.design-study .fullscreen-settings-header { display:flex; align-items:center; justify-content:space-between; flex:none; gap:var(--gap); min-height:9cqh; padding:1.5cqw var(--inset); background:var(--surface); color:var(--text); border:0; border-bottom:1px solid var(--border); }
.design-study .player-menu-header h1,.design-study .fullscreen-settings-title { font-size:2.8cqw; }
.design-study .player-page { flex:1; min-height:0; padding:var(--inset); overflow:auto; overscroll-behavior:contain; font-size:var(--ui); }
.design-study #player-home { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.5cqw; padding-bottom:7cqh; position:relative; isolation:isolate; }
.design-study[data-study-page=home] .player-menu-header { display:none; }
.design-study #player-home::before { content:''; position:absolute; width:68%; height:70%; inset:15% 16%; z-index:-1; opacity:.35; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0H60M0 0V60' fill='none' stroke='%23829188' stroke-width='.6'/%3E%3C/svg%3E"); background-size:6cqw 6cqw; }
.design-study .study-introduction { text-align:center; margin-bottom:3cqw; padding:0 2cqw; background:var(--surface); }
.design-study .study-introduction h2 { font-size:5cqw; font-weight:400; }
.design-study .study-introduction p { margin-top:1.5cqw; color:var(--muted); }
.design-study #player-home > .btn { width:27cqw; min-height:6cqw; }
.design-study #player-new { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.design-study #study-build { display:block; position:absolute; bottom:.7cqh; right:1cqw; z-index:35; margin:0; padding:0; border:0; background:none; color:var(--muted); font-size:1.1cqw; line-height:1; pointer-events:none; }
.design-study #player-games { display:flex; flex-direction:column; gap:var(--gap); padding-bottom:4cqh; overflow:hidden; }
.design-study #player-game-browser { display:grid; flex:1; min-height:0; grid-template-columns:var(--control) minmax(0,1fr) var(--control); gap:var(--gap); align-items:center; }
.design-study :is(#player-games-previous,#player-games-next) { width:var(--control); height:var(--control); padding:0; }
.design-study #player-game-list { display:grid; height:100%; min-height:0; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:var(--gap); }
.design-study #player-game-list > .btn { display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center; align-items:center; gap:1cqw; min-width:0; min-height:0; padding:1.2cqw; background:var(--surface); border:1px solid var(--border); border-radius:.3cqw; }
.design-study #player-game-list > .btn:hover { background:var(--tint); }
.design-study .player-game-picture { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; }
.design-study .player-game-name { font-weight:600; font-size:var(--ui); }
.design-study #player-continue { align-self:flex-start; }
.design-study #player-save-status { font-size:var(--small); }
.design-study #player-setup.player-board-page { padding:0; overflow:hidden; }
.design-study .player-setup-footer:has(#study-topology-gomoku:not([hidden])) > .btn { flex-shrink:0; }
.design-study #study-topology-gomoku { flex:1; min-width:0; margin:0; color:var(--muted); font-size:var(--small); line-height:1.35; text-align:center; overflow-wrap:anywhere; }
.design-study #study-topology-gomoku a { color:inherit; text-decoration:underline; }
.design-study .player-stone:has(> .study-player-piece) { background:transparent; border:0; }
.design-study .study-player-piece { display:block; width:100%; height:100%; background:transparent; }
.design-study .player-slot-row { display:grid; grid-template-columns:1fr auto; gap:var(--gap); padding:var(--gap) 0; border-bottom:1px solid var(--border); }
.design-study .player-slot-choice { display:grid; text-align:left; gap:.5cqw; }
.design-study .player-slot-actions { display:flex; gap:var(--gap); }
.design-study #fullscreen-exit { display:none; }
.design-study #study-status { position:absolute; left:var(--inset); top:calc(var(--player-icon-size) + 2cqh); z-index:8; font-size:var(--ui); max-width:70%; }
.design-study.study-finished #study-status { visibility:hidden; }
.design-study.study-finished #canvas-start-overlay { top:1cqh; }
.design-study.study-finished :is(#canvas-start-context,#canvas-start-rules,#canvas-start-begin,#canvas-start-close) { display:none; }
.design-study .canvas-start-actions { display:flex; gap:var(--gap); }
.design-study.player-menu-open #study-status,.design-study.study-settings-open #study-status { visibility:hidden; }
.design-study #study-hud { position:absolute; top:2cqh; right:3cqw; z-index:8; display:flex; gap:2cqw; font-size:var(--ui); pointer-events:none; }
.design-study #study-hud .stat-row { display:flex; flex-direction:column; align-items:flex-end; border:0; padding:0; }
.design-study #study-hud .stat-label { font:inherit; font-size:var(--small); text-transform:none; color:var(--muted); }
.design-study #study-hud .stat-value { font-family:inherit; font-size:4cqw; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.design-study #study-mute { display:none; }
.design-study #player-actions:not([open]) #player-action-controls { display:none; }
.design-study #fullscreen-settings-overlay { position:absolute; inset:0; z-index:40; padding:3cqw; background:var(--bg); }
.design-study .fullscreen-settings-dialog { width:100%; height:100%; max-height:none; display:flex; flex-direction:column; padding:0; border:1px solid var(--border); border-radius:0; background:var(--surface); color:var(--text); box-shadow:.5cqw .5cqw 0 var(--tint); }
.design-study .fullscreen-settings-close { display:flex; align-items:center; justify-content:center; width:var(--control); height:var(--control); padding:1cqw; }
.design-study .fullscreen-settings-close svg { width:2cqw; height:2cqw; }
.design-study .fullscreen-settings-tabs { display:flex; flex:none; gap:1cqw; padding:var(--gap) var(--inset) 0; border:0; }
.design-study .fullscreen-settings-tab { flex:1; min-width:0; padding:.8cqw; border:0; border-bottom:2px solid transparent; }
.design-study .fullscreen-settings-tab[aria-selected=true] { color:var(--accent); border-color:var(--accent); }
.design-study .fullscreen-settings-panel { flex:1; min-height:0; max-height:none; overflow:auto; padding:var(--inset); font-size:var(--ui); }
.design-study .fullscreen-settings-footer { display:flex; gap:var(--gap); flex:none; padding:var(--gap) var(--inset); border-top:1px solid var(--border); }
.design-study .fullscreen-settings-footer .btn { flex:1; min-width:0; }
.design-study :is(.fullscreen-setting-row,.mosaic-inline-row,.calculator-input-action) { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--gap); padding:1cqw 0; margin:0; min-height:var(--control); border:0; border-bottom:1px solid var(--border); }
.design-study :is(.input-label,.stat-label) { font:inherit; letter-spacing:0; text-transform:none; white-space:normal; color:var(--muted); }
.design-study :is(select,input,textarea) { max-width:100%; min-width:0; }
.design-study .opt-row { display:flex; align-items:center; gap:1cqw; min-height:var(--control); }
.design-study .background-slider-controls { display:flex; align-items:center; gap:1cqw; min-width:0; }
.design-study .card,.design-study .card-head { background:var(--surface); color:var(--text); border:0; box-shadow:none; }
.design-study .card-body,.design-study .collapsed .card-body { display:block; padding:0; }
.design-study .site-language-control { font:inherit; display:flex; justify-content:space-between; align-items:center; gap:var(--gap); margin:0; padding:1cqw 0; }
.design-study #study-workshop { margin-top:2cqw; border-top:1px solid var(--border); }
.design-study #study-workshop summary { color:var(--text); }
.design-study #study-workshop-content > * { margin-block:var(--gap); }
.design-study #study-options :is(#begin-game,#player-view-board),.design-study #study-options .mosaic-inline-row:has(> #game-mode-select) { display:none; }
.design-study #debug-tools:not([hidden]),.design-study .mosaic-debug-actions { display:block; }
.design-study :is(#player-display .card-body,#player-stats .card-body,.online-play-panel) { display:block; }
.design-study #player-action-controls #fullscreen-billiards-spin { position:static; width:100%; max-height:none; padding:0; box-shadow:none; background:var(--surface); color:var(--text); backdrop-filter:none; }
.design-study #player-action-controls > :is(#billiards-spin-row,#billiards-cue-speed-row,#billiards-elevation-row,#billiards-cue-profile-row,#billiards-tip-profile-row) { display:none; }
.design-study :is(#boundary-glue-wrapped-view-row,#fullscreen-wrapped-view-row) { display:none; }
.design-study #canvas-start-overlay { position:absolute; inset:7cqh var(--inset) auto; z-index:12; background:none; pointer-events:none; }
.design-study #canvas-start-overlay .canvas-start-sheet { width:100%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--gap); padding:1cqw; border:1px solid var(--border); border-radius:0; box-shadow:none; background:var(--surface); pointer-events:auto; }
.design-study #canvas-start-overlay .canvas-start-title { font-size:var(--ui); }
.design-study #canvas-start-overlay .canvas-start-description { font-size:var(--small); }
.design-study :is(#player-room,#player-lobby) { display:flex; flex-direction:column; gap:var(--gap); overflow:auto; padding:clamp(14px,2.2cqw,28px) var(--inset); }
.design-study :is(.player-room-body,.player-lobby-body,.player-room-loading-body) { display:grid; gap:clamp(12px,1.4cqw,20px); width:100%; max-width:560px; margin:auto; flex:none; min-width:0; overflow:visible; }
.design-study .mosaic-layout:has(#player-menu:not([hidden]) :is(#player-room,#player-room-loading):not([hidden])) { height:100dvh; aspect-ratio:auto; box-sizing:border-box; }
.design-study #player-room { overflow:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.design-study :is(.player-room-body,.player-room-loading-body) { flex:none; height:auto; max-height:none; overflow:visible; grid-auto-rows:max-content; padding:8px; box-sizing:border-box; }
.design-study :is(#player-room,#player-lobby) p { margin:0; overflow-wrap:anywhere; }
.design-study .player-room-header { display:grid; justify-items:center; gap:8px; min-height:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; color:var(--text); text-align:center; }
.design-study #player-room-game,.design-study .player-room-loading-game { margin:0; font-size:clamp(26px,2.8cqw,36px); }
.design-study .player-room-code-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
.design-study #player-room-code { padding:4px 14px; border:1px solid var(--border); border-radius:999px; background:var(--bg); color:var(--text); font:inherit; font-variant-numeric:tabular-nums; letter-spacing:.12em; user-select:all; }
.design-study #player-room-copy { min-height:32px; padding:4px 8px; font-size:clamp(12px,var(--small),16px); color:var(--muted); }
.design-study .player-room-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; color:var(--muted); font-size:clamp(12px,var(--small),16px); }
.design-study .player-room-meta p { font:inherit; }
.design-study .player-room-meta span { font:inherit; color:inherit; letter-spacing:normal; }
.design-study .player-room-status { margin:0; padding:8px 12px; border-radius:3px; background:var(--bg); color:var(--muted); text-align:center; font-size:clamp(13px,var(--small),17px); }
.design-study .player-room-loading { display:flex; flex:1; flex-direction:column; gap:var(--gap); min-height:0; padding:clamp(14px,2.2cqw,28px) var(--inset); overflow:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; animation:room-loading-in 150ms ease-out both; }
.design-study #player-menu:has(#player-room-loading:not([hidden])) .player-page { display:none !important; }
.design-study[data-room-connection-pending] #player-message { display:none !important; }
.design-study .player-room-placeholder { display:block; background:var(--border); opacity:.45; border-radius:3px; font:inherit; }
.design-study .player-room-loading-code { width:calc(6ch + .72em + 30px); height:calc(1.4em + 10px); border-radius:999px; font-variant-numeric:tabular-nums; }
.design-study .player-room-loading-copy { width:48px; height:32px; }
.design-study .player-room-loading-meta { margin:0; color:transparent; user-select:none; }
.design-study .player-room-loading-legend { display:block; margin-bottom:8px; color:var(--muted); font-size:clamp(13px,var(--small),17px); text-align:center; }
.design-study #player-room-loading-rows { display:grid; gap:8px; }
.design-study .player-room-loading-row { min-height:60px; box-sizing:border-box; border:2px solid var(--border); }
.design-study .player-room-loading-space { height:calc(var(--loading-actions,3) * max(44px,calc(1.35 * var(--ui) + 1.6cqw + 2px)) + (var(--loading-actions,3) - 1) * 8px + var(--loading-members-size,0px)); }
.design-study .player-room-loading-footer { flex:none; min-height:calc(max(36px,calc(1.35 * clamp(13px,var(--small),17px) + 1.6cqw + 2px)) + 9px); }
.design-study .player-room-spinner { display:inline-block; width:14px; height:14px; margin-inline-end:8px; border:2px solid var(--border); border-top-color:currentColor; border-radius:50%; vertical-align:-2px; animation:room-connecting-spin 800ms linear infinite; }
.design-study #player-room-loading-status { display:grid; }
.design-study #player-room-loading-status > span { grid-area:1 / 1; align-self:center; }
.design-study #player-room-loading-status-measure { visibility:hidden; }
.design-study[data-room-connection-pending] #player-room .player-room-actions,.design-study[data-room-connection-pending] #player-room .player-room-footer,.design-study #player-room[data-room-presentation=connecting] :is(.player-room-actions,.player-room-footer) { display:none; }
.design-study #player-room[data-room-presentation=failed] .player-room-actions > :not(#player-room-retry),.design-study #player-room[data-room-presentation=failed] :is(#player-room-proposal,#player-room-seats,#player-room-members) { display:none; }
.design-study #player-room[data-room-presentation=failed] #player-room-retry { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.design-study #player-room[data-room-presentation=failed],.design-study #player-message[data-room-connection-error] { --room-error-bg:#fff3e6; --room-error-ink:#8b4d18; }
.design-study #player-room[data-room-presentation=failed] #player-room-state,.design-study #player-message[data-room-connection-error] { background:var(--room-error-bg); color:var(--room-error-ink); }
.design-study #player-message[data-room-connection-error] { width:calc(100% - 2 * var(--inset)); max-width:560px; margin:var(--gap) auto 0; padding:8px 12px; box-sizing:border-box; border-radius:3px; text-align:center; font-size:clamp(13px,var(--small),17px); }
.design-study .player-menu-sheet:has(#player-room[data-room-presentation=failed]:not([hidden])) > #player-message { display:none; }
@keyframes room-loading-in { from { opacity:0; } to { opacity:1; } }
@keyframes room-connecting-spin { to { transform:rotate(360deg); } }
.design-study #player-room-seats { min-width:0; margin:0; padding:0; border:0; }
.design-study #player-room-seats legend { width:100%; margin-bottom:8px; padding:0; text-align:center; color:var(--muted); font-size:clamp(13px,var(--small),17px); }
.design-study #player-room-seat-options { display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:1fr; gap:8px; }
.design-study #player-room-seat-options .player-seat-card { position:relative; display:grid; grid-template-columns:28px max-content minmax(0,1fr); align-items:center; column-gap:10px; min-width:0; min-height:60px; padding:8px 12px; border:2px solid var(--border); border-radius:4px; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.design-study .player-seat-card:has(input[value=black]) { order:-2; }
.design-study .player-seat-card:has(input[value=white]) { order:-1; }
.design-study .player-seat-details { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:2px 8px; min-width:0; text-align:right; }
.design-study #player-room-seat-options input { position:absolute; width:1px; height:1px; padding:0; margin:0; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.design-study .player-seat-card:has(input:focus-visible) { outline:3px solid var(--accent); outline-offset:3px; }
.design-study #player-room-seat-options .player-seat-card:has(input:checked) { border-color:var(--accent); }
.design-study #player-room-seat-options [data-seat-state=confirmed] { border-color:var(--accent); background:var(--tint); }
.design-study #player-room-seat-options [data-seat-state=taken] { background:var(--bg); color:var(--muted); cursor:default; }
.design-study .player-seat-card:has(input:disabled) { cursor:default; }
.design-study .player-seat-card .player-stone { flex:none; width:28px; height:28px; margin:0; }
.design-study .player-seat-color { font-weight:600; }
.design-study :is(.player-seat-occupant,.player-seat-ready,.player-seat-status) { font-size:clamp(12px,var(--small),16px); line-height:1.3; max-width:100%; }
.design-study :is(.player-seat-ready,.player-seat-status) { color:var(--muted); }
.design-study .player-seat-status:empty,.design-study .player-seat-ready:empty { display:none; }
.design-study .player-seat-card:has(input:checked) .player-seat-status,.design-study [data-seat-state=confirmed] .player-seat-status { color:var(--accent); }
.design-study #player-room-members { margin:0; padding:0; list-style:none; text-align:center; color:var(--muted); font-size:clamp(12px,var(--small),16px); }
.design-study .player-room-actions { display:grid; gap:8px; margin:0; }
.design-study #player-room .player-room-actions > .btn { width:100%; min-width:0; min-height:44px; }
.design-study :is(#player-room-claim,#player-room-ready,#player-lobby-create,#player-proposal-accept) { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.design-study :is(#player-room-change,#player-room-leave) { border-color:transparent; background:transparent; color:var(--muted); text-decoration:underline; text-underline-offset:.18em; }
.design-study .player-room-footer { display:flex; justify-content:center; width:100%; max-width:560px; margin:0 auto; padding:8px 0 0; border-top:1px solid var(--border); }
.design-study #player-room-leave { min-height:36px; font-size:clamp(13px,var(--small),17px); }
.design-study #player-room-proposal { display:grid; gap:12px; padding:12px; border:1px solid var(--border); border-radius:4px; }
.design-study .player-online-heading { display:grid; gap:8px; }
.design-study .player-online-heading > label { color:var(--muted); font-size:clamp(13px,var(--small),17px); }
.design-study .player-lobby-identity { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.design-study #player-lobby { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.design-study .player-lobby-body { margin:0 auto; height:auto; max-height:none; }
.design-study .player-lobby-playing-as { color:var(--muted); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.design-study #player-lobby :is(button,input,summary):focus-visible { outline:1px solid var(--accent); outline-offset:2px; box-shadow:none; }
.design-study #player-lobby :is(#player-lobby-edit,#player-lobby-refresh) { min-height:26px; padding:0 2px; border:0; background:transparent; color:var(--muted); font:inherit; text-decoration:underline; text-underline-offset:.18em; }
.design-study #player-lobby #player-lobby-refresh { font-size:13px; }
.design-study #player-lobby-name { width:100%; min-height:36px; padding:6px 10px; font-size:16px; }
.design-study #player-lobby-rename { min-height:36px; padding:6px 10px; font-size:13px; }
.design-study #player-lobby-create { width:100%; min-height:44px; }
.design-study .player-lobby-directory-header { display:grid; gap:4px; }
.design-study .player-lobby-room-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.design-study #player-lobby h2 { margin:0; font:inherit; font-size:16px; font-weight:600; line-height:1.3; }
.design-study .player-lobby-presence { color:var(--muted); font-size:13px; }
.design-study .player-lobby-presence summary { width:fit-content; min-height:22px; padding:0; font:inherit; }
.design-study #player-lobby-players { display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 0 0; padding:0; list-style:none; font:inherit; overflow-wrap:anywhere; }
.design-study #player-lobby-rooms { display:grid; gap:10px; min-width:0; max-height:none; overflow:visible; }
.design-study #player-lobby .player-lobby-room { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 10px; min-width:0; min-height:76px; padding:10px 12px; border:1px solid var(--border); border-radius:4px; }
.design-study .player-lobby-room-title { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; }
.design-study .player-lobby-game { font-size:16px; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.design-study .player-lobby-code { padding:2px 8px; border:1px solid var(--border); border-radius:999px; background:var(--bg); color:var(--text); font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.design-study #player-lobby .player-lobby-room > .btn { grid-column:2; grid-row:1; min-height:32px; padding:4px 10px; margin:0; font-size:13px; white-space:nowrap; }
.design-study .player-lobby-room-meta { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:3px 7px; min-width:0; color:var(--muted); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.design-study .player-lobby-room-meta > span { max-width:100%; }
.design-study .player-lobby-seats { display:inline-flex; align-items:center; gap:3px; }
.design-study #player-lobby .player-lobby-seat-dot { width:12px; height:12px; margin:0; border-width:1px; }
.design-study #player-lobby .player-lobby-seat-dot.is-open { background:transparent; border-color:var(--muted); }
.design-study .player-lobby-empty { color:var(--muted); font-size:14px; }
.design-study #player-time-fields { display:grid; gap:var(--gap); }
.design-study #player-online-clock { position:absolute; top:2cqh; left:3cqw; font-size:var(--small); background:var(--surface); color:var(--text); }
.design-study #study-notice { position:absolute; top:10cqh; right:var(--inset); z-index:19; display:flex; align-items:center; flex-wrap:wrap; gap:1cqw; padding:1cqw; border:1px solid var(--border); background:var(--surface); font-size:var(--small); }
.design-study .study-turn { display:inline-block; width:1.4cqw; height:1.4cqw; border-radius:50%; background:var(--turn-ink,#18212B); border:1px solid var(--text); margin-inline-end:1cqw; vertical-align:middle; }
.design-study.player-menu-open :is(#player-toolbar,#player-actions,#canvas-start-overlay,#study-hud),.design-study.study-settings-open :is(#player-toolbar,#player-actions,#canvas-start-overlay,#study-hud) { visibility:hidden; }
@media (prefers-color-scheme:dark) {
 .design-study #player-room[data-room-presentation=failed],.design-study #player-message[data-room-connection-error] { --room-error-bg:#3a2b20; --room-error-ink:#efbe8d; }
 body.ramified-player.design-study { --bg:#12181D; --surface:#1A2229; --text:#E6EAE6; --muted:#9AA5AB; --border:#2E3A43; --accent:#54B9AC; --accent2:#54B9AC; --accent-ink:#0B1513; --tint:#1F3A38; }
}
@media (max-width:600px), (max-aspect-ratio:3/4) {
 .design-study .mosaic-layout { width:min(100vw,calc(100dvh * 9 / 16)); aspect-ratio:9/16; --study-px:.25cqw; --ui:4.5cqw; --small:3.8cqw; --gap:3cqw; --inset:4cqw; --control:12.5cqw; }
 .design-study #canvas-wrap { padding:13cqh 2cqw 19cqh; }
 .design-study h2,.design-study .player-menu-header h1,.design-study .fullscreen-settings-title { font-size:6cqw; }
 .design-study .study-introduction h2 { font-size:8cqw; }
 .design-study .study-introduction { margin-bottom:7cqw; }
 .design-study #player-home { gap:4cqw; }
 .design-study #player-home > .btn { width:65cqw; min-height:13cqw; }
 .design-study #study-build { font-size:2.6cqw; }
 .design-study #player-game-list { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:2cqw; }
 .design-study #player-game-list > .btn { grid-template-rows:minmax(0,1fr) auto; padding:2cqw; gap:1cqw; font-size:3.8cqw; }
 .design-study #player-game-browser { grid-template-columns:8cqw minmax(0,1fr) 8cqw; gap:2cqw; }
 .design-study :is(#player-games-previous,#player-games-next) { width:8cqw; min-width:8cqw; height:12.5cqw; }
 .design-study .player-slot-row { grid-template-columns:1fr; }
 .design-study :is(input[type=checkbox],input[type=radio]) { width:5cqw; height:5cqw; }
 .design-study select { padding-inline-end:7cqw; background-size:3cqw; background-position:right 2cqw center; }
 .design-study #study-hud .stat-value { font-size:9cqw; }
 .design-study #fullscreen-settings-overlay { padding:2cqw; }
 .design-study .fullscreen-settings-close svg { width:5cqw; height:5cqw; }
 .design-study .fullscreen-settings-tab { font-size:3.8cqw; }
 .design-study .fullscreen-settings-footer { flex-wrap:wrap; }
 .design-study .fullscreen-settings-footer .btn { flex:1 1 40%; }
 .design-study .study-turn { width:3.6cqw; height:3.6cqw; margin-inline-end:2cqw; }
}
@media (prefers-reduced-motion:reduce) {
 .design-study *, .design-study *::before,.design-study *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}