/* Compact descriptions share the same two-line structure for every open table. */
.game-tab:not(.online-tab)>[role=tab]{max-width:280px}
.game-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-label{flex:1;min-width:0}
.game-tab:not(.online-tab) .game-detail,.game-picker-row[data-kind=laboratory] .game-detail{display:flex;align-items:center;gap:10px}
.game-kind{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-progress{flex:none;margin-left:auto;font-variant-numeric:tabular-nums}
.tab-player-color{width:.72em;height:.8em;border:0;border-radius:0;background:#879397;clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);position:relative;vertical-align:-.04em}
.tab-player-color:is(.white,.black){background:#879397}
.tab-player-color:after{content:'';position:absolute;inset:1px;clip-path:inherit;background:#f4f1df}
.tab-player-color.black:after{background:#07090b}
#mobile-add-tab{display:none}
body[data-screen=mobile] #add-tab{display:none}
body[data-screen=mobile] #mobile-add-tab{display:block}
body[data-screen=mobile] .game-picker-select{display:flex;align-items:center;gap:8px;min-height:50px}
body[data-screen=mobile] .game-picker-select:before{flex:none;margin-right:0}
.game-picker-row[data-kind=laboratory] .game-picker-select:before{content:'';width:12px;height:14px;background:var(--muted);clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%,50% 0,50% 10%,14% 30%,14% 70%,50% 90%,86% 70%,86% 30%,50% 10%)}
body[data-screen=mobile] .game-picker-row .game-detail{font-size:10px;line-height:1.4}

/* The icon row is the only mobile panel navigation, with no redundant Board tab. */
body[data-screen=mobile] .board-tools>.panel-controls{display:contents}
body[data-screen=mobile] .board-tools .drawer-tab>span{display:flex}
body[data-screen=mobile] .board-tools .drawer-tab>small{display:none}
body[data-screen=mobile] .board-section>.board-toolbar{padding:0 6px;top:4px}
body[data-screen=mobile] #strategy-panel .visual-metrics>button{height:auto;min-height:92px}
body[data-screen=mobile] #strategy-panel .qualification-pair>span{min-height:14px}

/* An always-available hexagonal joystick floats just above the reserves. */
body[data-screen] .board-section>.camera-launcher{display:block;position:absolute;left:auto;right:10px;bottom:10px;width:52px;height:52px;margin:0;z-index:120}
body[data-screen] .camera-launcher .camera-pad{position:static;display:flex;inset:auto;width:52px;height:52px;max-width:none;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none}
body[data-screen] .camera-launcher :is(.camera-toggle,.camera-close,.camera-mobile-help,.camera-north){display:none}
body[data-screen] .camera-pad #camera-joystick{width:52px;height:52px;min-height:52px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);box-shadow:none}
body[data-screen] #camera-joystick svg{filter:drop-shadow(0 2px 3px #0003)}
body[data-screen] #camera-joystick .camera-shell{fill:color-mix(in srgb,var(--panel) 76%,transparent);stroke:color-mix(in srgb,var(--ink) 65%,transparent);stroke-width:1.2}
body[data-screen] #camera-joystick .camera-nub{opacity:.9}
body[data-screen] #camera-joystick.steering .camera-shell,body[data-screen] #camera-joystick:focus-visible .camera-shell{stroke:var(--accent);fill:color-mix(in srgb,var(--panel) 88%,transparent)}
body[data-screen] #camera-joystick.steering{color:var(--accent);box-shadow:none}

/* A single transport row above a separated, readable move-history row. */
body[data-screen=mobile]>.playground>.board-footer{position:relative;inset:auto;align-self:stretch;display:grid;grid-template-columns:34px minmax(0,1fr) 32px;grid-template-rows:34px 34px;width:auto;height:auto;min-height:0;max-height:none;margin:0 5px 5px;padding:4px;gap:4px;z-index:115;border-radius:12px}
body[data-screen=mobile] .board-footer .history-buttons{grid-column:2/4;grid-row:1;display:flex;gap:2px;justify-content:space-between;min-width:0}
body[data-screen=mobile] .board-footer .history-buttons button{width:30px;min-width:26px;height:34px;min-height:34px;padding:4px;border-color:transparent;border-radius:7px}
body[data-screen=mobile] .board-footer .history-buttons #pause{width:36px;min-width:32px;border-color:var(--line);background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--ink)}
body[data-screen=mobile] .board-footer .history-buttons svg{width:21px;height:21px}
body[data-screen=mobile] .board-footer #replay-recent{grid-column:1;grid-row:1;width:34px;min-width:34px;height:34px;min-height:34px;padding:5px;border-radius:7px}
body[data-screen=mobile] .board-footer .move-context{grid-column:1/3;grid-row:2;min-width:0;height:34px;flex:1;padding:0 2px}
body[data-screen=mobile] .board-footer .move-history-context{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:100%;height:100%;min-width:0}
body[data-screen=mobile] .board-footer #turn-number{flex:none;font-size:11px;line-height:1.2;padding:0;color:var(--muted)}
body[data-screen=mobile] .board-footer #last-move{min-width:0;max-width:none;flex:1;min-height:28px;padding:2px 4px;font-size:12px;line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-screen=mobile] .board-footer>#change-panel{grid-column:3;grid-row:2;margin:0}
body[data-screen=mobile] .board-footer #change-panel>summary{width:32px;min-width:32px;height:32px;min-height:32px;padding:5px}
body[data-screen=mobile] .board-footer #pass{position:absolute;bottom:calc(100% + 6px);right:0;min-height:36px;padding:6px 12px;background:var(--panel);border:1px solid var(--accent);border-radius:8px;font-size:12px}
body[data-screen=mobile] .board-footer .focus-settings{display:none}
body[data-screen=mobile].online-game>.playground>.board-footer{display:flex;flex-wrap:nowrap!important;gap:5px;align-items:center}
body[data-screen=mobile].online-game .board-footer .history-buttons{display:none}
body[data-screen=mobile].online-game .board-footer .move-context{height:auto;border:0;padding:0}
body[data-screen=mobile].online-game .board-footer .move-history-context{flex-wrap:wrap;gap:1px 4px}
body[data-screen=mobile] .board-footer .online-match-status{flex-basis:100%;font-size:11px;line-height:1.3;padding:0 4px}
body[data-screen=mobile] .footer-clocks{gap:1px;flex-direction:column}
body[data-screen=mobile] .footer-clock{font-size:11px;line-height:16px;min-width:6ch;padding:0 2px}


/* The move label and turn share a real row, with no separator crossing the text. */
body[data-screen=mobile] .board-footer #last-move{border:0;border-left:1px solid var(--line);border-radius:0;padding-left:8px}
body[data-screen=mobile]:not([data-landscape=true])>.playground>.board-footer{width:100%;margin-left:0;margin-right:0;margin-bottom:0}
body[data-screen=mobile]:not([data-landscape=true]) .board-footer .history-buttons button{width:36px;min-width:30px}
body[data-screen=mobile].online-game .board-footer #last-move{border-left:0;padding-left:4px}