/* Přenést pozici: fotka desky a editor pozice. */
#hubPage:has(.position-page) { max-width:1120px; }
.camera-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; max-width:440px; margin:14px 0 18px; padding:3px; background:var(--ui-fill,#1d2419); border:1px solid var(--line); border-radius:10px; }
.camera-modes .ui-button { min-height:44px; padding:4px 6px; border:0; border-radius:7px; background:transparent; color:var(--ui-soft-text,var(--muted)); font:inherit; font-size:14px; cursor:pointer; box-shadow:none; }
.camera-modes .ui-button[aria-current="page"],.camera-modes .ui-button[aria-current="page"]:hover:enabled { background:var(--accent); color:var(--ui-onaccent,#172016); font-weight:700; }
.position-intro { margin:0 0 18px; max-width:640px; }
.position-sources { display:flex; flex-wrap:wrap; gap:10px; max-width:560px; margin:0 0 14px; }
.position-sources .btn { flex:1 1 200px; min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.position-page h2 { font-size:17px; margin:24px 0 10px; }
.position-page .hint { margin:8px 0; line-height:1.5; }
.position-guide { margin:0 0 12px; color:var(--muted); font-size:15px; line-height:1.55; }
.position-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.position-actions .btn { flex:1 1 auto; min-height:44px; }
.position-primary .btn { min-height:50px; font-size:16px; }
.position-preview { display:flex; justify-content:center; background:#080f16; border-radius:12px; overflow:hidden; }
.position-preview video { display:block; max-width:100%; max-height:min(62svh,600px); }
.position-photo { background:#080f16; border-radius:12px; overflow:hidden; user-select:none; -webkit-user-select:none; }
.position-photo svg { display:block; width:100%; height:auto; max-height:min(72svh,680px); margin:auto; }
.position-photo-marking svg { touch-action:none; cursor:crosshair; }
.position-photo .camera-handle text { font-size:inherit; stroke:#15221d; stroke-width:3px; vector-effect:non-scaling-stroke; }
.position-photo .camera-handle-dot { vector-effect:non-scaling-stroke; }
.position-grid { fill:none; stroke:#79dfaf; stroke-width:1.25px; stroke-opacity:.6; vector-effect:non-scaling-stroke; }
.position-mark { fill:#ffd24a55; stroke:#ffd24a; stroke-width:2.5px; vector-effect:non-scaling-stroke; }
.position-mark[hidden] { display:none; }
.position-status { display:grid; gap:4px; margin:10px 0; padding:10px 12px; border-radius:8px; line-height:1.5; font-size:14px; background:#193a32; color:#d8fbea; }
.position-status:empty,.position-status[hidden] { display:none; }
.position-status-bad { background:#482c2a; color:#ffe3df; }
.position-status-todo { background:#3a2f16; color:#f3d9a0; }
.position-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.position-layout.position-no-photo { grid-template-columns:minmax(0,560px); }
.position-photo-panel { position:sticky; top:12px; min-width:0; }
.position-editor { min-width:0; }
.position-board-wrap { position:relative; }
#hubPage[data-position-step="board"] .camera-modes,#hubPage[data-position-step="corners"] .camera-modes,#hubPage[data-position-step="capture"] .camera-modes { display:none; }
.position-corners-side .position-status:first-child { margin-top:10px; }
.position-board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); width:100%; aspect-ratio:1; }
.position-board .square { min-width:0; min-height:0; padding:0; border:0; border-radius:0; font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.position-board .square:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.position-board .square.position-bad { box-shadow:inset 0 0 0 3px #e0635a,inset 0 0 0 100px #e0635a33; }
.position-board .square.position-selected { box-shadow:inset 0 0 0 3px #ffd24a,inset 0 0 0 100px #ffd24a33; }
.position-menu { position:absolute; z-index:30; width:min(100%,348px); padding:8px; background:var(--surface,#172431); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 34px #000a; scroll-margin:calc(var(--top-h,56px) + 8px) 8px calc(var(--bar-h,64px) + 8px); }
.position-menu[hidden] { display:none; }
.position-menu-head { display:flex; gap:10px; align-items:stretch; margin:0 0 8px; }
.position-menu-title { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font-size:14px; }
.position-menu-title strong { font-size:16px; }
.position-menu-title span { color:var(--muted); }
.position-loupe { flex:none; width:92px; height:92px; border-radius:8px; overflow:hidden; background:#080f16; }
.position-loupe svg { display:block; width:100%; height:100%; aspect-ratio:auto !important; }
.position-loupe-square { fill:none; stroke:#ffd24a; stroke-width:2px; vector-effect:non-scaling-stroke; }
.position-remove { flex:1 1 40%; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:4px 10px; border:0; border-radius:8px; background:#c62f27; color:#fff !important; font:inherit; font-weight:700; cursor:pointer; }
.position-remove[hidden],.position-recolor[hidden] { display:none; }
.position-recolor { flex:1 1 40%; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:44px; padding:4px 6px; font-size:14px; white-space:nowrap; }
.position-recolor span { font-size:16px; line-height:1; }
.position-remove span { color:#fff; font-size:17px; line-height:1; }
.position-remove:hover { background:#dd3b32; }
.position-pieces { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
.position-pieces button { display:grid; place-items:center; min-width:0; min-height:46px; aspect-ratio:1; padding:2px; border:1px solid #0003; border-radius:8px; background:var(--light); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.position-pieces button[aria-current="true"] { box-shadow:inset 0 0 0 3px #ffd24a; }
.position-pieces button:focus-visible,.position-remove:focus-visible { outline:3px solid var(--accent); outline-offset:1px; }
.position-pieces .piece-svg { width:92%; height:92%; }
.position-turn { display:flex; align-items:center; gap:12px; margin:12px 0 0; font-weight:700; }
.position-turn-buttons { flex:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-width:340px; }
.position-turn-buttons .btn { min-height:46px; }
.position-turn-buttons .btn[aria-pressed="true"],.position-turn-buttons .btn[aria-pressed="true"]:hover:enabled { background:var(--accent); border-color:var(--accent); color:var(--ui-onaccent,#172016); }
.position-turn-note:empty { display:none; }
#positionPlayHint:empty { display:none; }
.position-castling { margin:10px 0; }
.position-castling summary { padding:12px 0; cursor:pointer; font-weight:600; }
.position-castling > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; }
.position-castling label { display:flex; align-items:center; gap:8px; min-height:44px; }
.position-castling input { width:20px; height:20px; accent-color:var(--accent); }
.position-castling input:disabled + span { opacity:.5; }
.setup-position { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:8px 0 2px; }
.setup-position .btn { min-height:44px; }
.setup-position p { flex:1 1 220px; margin:0; }
@media(max-width:640px) {
  .position-layout,.position-layout.position-no-photo { grid-template-columns:minmax(0,1fr); gap:10px; }
  .position-photo-panel { position:static; }
  /* What the board leaves of the screen, so photo and board fit together. */
  .position-photo:not(.position-photo-marking) svg { max-height:clamp(140px,calc(100svh - 100vw - 200px),28svh); }
  #hubPage[data-position-step="board"] .head-konik,#hubPage[data-position-step="corners"] .head-konik,#hubPage[data-position-step="capture"] .head-konik,
  #hubPage[data-position-step="board"] .eyebrow,#hubPage[data-position-step="corners"] .eyebrow,#hubPage[data-position-step="capture"] .eyebrow { display:none; }
  #hubPage[data-position-step="corners"] .hub-heading h1,#hubPage[data-position-step="capture"] .hub-heading h1 { margin:0; font-size:21px; }
  /* Photo and board share one screen: the heading stays for screen readers only. */
  #hubPage[data-position-step="board"] .hub-heading { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); }
  #hubPage[data-position-step="board"] .hub-heading,#hubPage[data-position-step="corners"] .hub-heading,#hubPage[data-position-step="capture"] .hub-heading { margin:0 0 8px; }
}
@media(min-width:901px) {
  .position-board-wrap { max-width:max(360px,calc(100svh - 330px)); }
}
/* Phone on its side: the heading gives way, the picture takes the height, the buttons sit beside it. */
@media (orientation:landscape) and (max-height:500px) {
  #hubPage[data-position-step="capture"] .hub-heading,#hubPage[data-position-step="capture"] .position-guide,
  #hubPage[data-position-step="corners"] .hub-heading,#hubPage[data-position-step="board"] .hub-heading { display:none; }
  .position-preview video { max-height:calc(100svh - var(--top-h,48px) - var(--bar-h,56px) - 74px); }
  .position-corners { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:10px; align-items:start; }
  .position-corners-side .position-status:first-child { margin-top:0; }
  .position-layout,.position-layout.position-no-photo { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  #hubPage:has(.position-page) { max-width:none; }
  .position-board-wrap { max-width:min(100%,calc(100svh - var(--top-h,48px) - var(--bar-h,56px) - 16px)); }
  .position-photo:not(.position-photo-marking) svg { max-height:calc(100svh - var(--top-h,48px) - var(--bar-h,56px) - 70px); }
  .position-photo-marking svg { max-height:calc(100svh - var(--top-h,48px) - var(--bar-h,56px) - 16px); }
}