/* Local play enhancements. All UI colours and families come from the lock. */
.pro-brief {display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);margin-block:var(--space-3);background:var(--olive-soft);color:var(--olive-deep);border-radius:var(--radius-md);border-inline-start:4px solid var(--olive-deep)}
.pro-brief .pro-mark {flex-shrink:0;font-family:var(--font-display);font-size:1.5rem;line-height:1.5}
.pro-brief p {margin:0;line-height:1.8;font-size:1rem}
.pro-brief strong {display:block;font-size:.75rem;margin-bottom:var(--space-1)}
.pro-toolbar {display:flex;gap:var(--space-2);align-items:center;justify-content:space-between;flex-wrap:wrap}
.pro-toolbar button {background:var(--surface-raised);color:var(--ink);min-height:var(--touch-kid)}
.pro-toolbar button[aria-pressed=true] {background:var(--olive-soft);color:var(--olive-deep);border-color:var(--olive-deep)}
.pro-home-idea {background:var(--olive-soft);color:var(--olive-deep);border-radius:var(--radius-md);padding:var(--space-4);margin-block:var(--space-4);text-align:start}
.pro-home-idea h3 {font-family:var(--font-display);font-size:1.1rem;margin:0 0 var(--space-2)}
.pro-home-idea p {font-size:.9rem;line-height:1.8;margin:0}
.pro-controls-note {font-size:.8rem;color:var(--ink-muted);padding-inline:var(--space-4);margin-block:var(--space-2)}
#arcade-app .stage {width:100%;max-width:720px;margin-inline:auto}
#arcade-app .controller {gap:var(--space-4);padding:var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-md);margin:var(--space-3);align-items:center;flex-wrap:wrap}
#arcade-app .dpad.pro-horizontal {display:flex;direction:ltr;gap:var(--space-2)}
#arcade-app .dpad.pro-vertical {display:flex;flex-direction:column;gap:var(--space-2)}
#arcade-app .dpad:empty {display:none}
#arcade-app .dpad button {grid-area:auto}
#arcade-app .dpad:not(.pro-horizontal):not(.pro-vertical) {display:grid;direction:ltr;grid-template-columns:repeat(3,minmax(56px,1fr));gap:var(--space-1)}
#arcade-app .dpad:not(.pro-horizontal):not(.pro-vertical) [data-control=up] {grid-column:2;grid-row:1}
#arcade-app .dpad:not(.pro-horizontal):not(.pro-vertical) [data-control=left] {grid-column:1;grid-row:2}
#arcade-app .dpad:not(.pro-horizontal):not(.pro-vertical) [data-control=down] {grid-column:2;grid-row:2}
#arcade-app .dpad:not(.pro-horizontal):not(.pro-vertical) [data-control=right] {grid-column:3;grid-row:2}
#arcade-app .controller .dpad[hidden] {display:none}
#arcade-app .controller button {min-width:var(--touch-kid);min-height:var(--touch-kid);touch-action:none;user-select:none}
#arcade-app .action-controls {display:flex;flex:1;justify-content:flex-end;gap:var(--space-2)}
#arcade-app .action-controls button {flex:1;max-width:180px}
#arcade-app .action-controls:empty {display:none}
#arcade-app .controller:has(.action-controls:empty),#arcade-app .dpad[hidden]+.action-controls {justify-content:center}
#arcade-app [data-control].pressed {background:var(--olive-deep);color:var(--on-terracotta);transform:none}
#arcade-app .reaction-keys {direction:ltr;gap:var(--space-2);padding:var(--space-3)}
#arcade-app .reaction-keys button {min-height:var(--touch-kid);position:relative;display:flex;flex-direction:column;font-size:1rem;gap:var(--space-1)}
#arcade-app .reaction-keys button small {font-size:.75rem}
#arcade-app .reaction-keys button[data-target=coin] {background:var(--olive-soft);border-color:var(--olive-deep);color:var(--olive-deep)}
#arcade-app .reaction-keys button[data-target=rock] {background:var(--straw-soft);border-color:var(--straw-ink);color:var(--straw-ink)}
.pro-large-controls {margin:var(--space-3);border:1px solid var(--ink-muted);border-radius:var(--radius-md);background:var(--surface-raised)}
.pro-large-controls summary {min-height:var(--touch-kid);display:flex;align-items:center;cursor:pointer;padding:var(--space-3);font-weight:700;gap:var(--space-2)}
.pro-large-controls summary::before {content:'+';font-size:1.3rem}
.pro-large-controls[open] summary::before {content:'−'}
.pro-large-controls p {padding-inline:var(--space-3);font-size:.85rem;color:var(--ink-muted)}
.pro-button-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);padding:var(--space-3);direction:ltr}
.pro-button-grid button {min-height:var(--touch-kid);min-width:0;overflow-wrap:anywhere;font-size:.85rem;direction:rtl;background:var(--surface-sunken);color:var(--ink);border:1px solid var(--ink-muted);border-radius:var(--radius-md);padding:var(--space-2)}
.pro-button-grid button[aria-pressed=true],.hotspot[aria-pressed=true] {border:2px solid var(--olive-deep);background:var(--olive-soft)}
.hotspot[aria-pressed=true] {background:transparent}
.pro-meter {height:8px;background:var(--surface-sunken);border-radius:var(--radius-pill);overflow:hidden}
.pro-meter span {display:block;height:100%;background:var(--olive-deep)}
.pro-save-note {font-size:.8rem;color:var(--ink-muted);line-height:1.8}
body.pro-focus .shell>header,body.pro-focus .site-nav,body.pro-focus .shell>footer,
body.pro-focus .breadcrumbs,body.pro-focus .game-return,body.pro-focus .game-aside,
body.pro-focus .howto,body.pro-focus .game-bottom,body.pro-focus .adult-note {display:none}
body.pro-focus .shell {max-width:1150px}
body.pro-focus .play-layout {grid-template-columns:minmax(0,1fr);max-width:940px;margin-inline:auto}
body.pro-focus .game-heading {max-width:940px;margin:var(--space-3) auto;display:flex;align-items:center;justify-content:space-between}
body.pro-focus .game-heading h1 {font-size:1.25rem}
body.pro-focus .game-heading>* {min-width:0;max-width:100%}
body.pro-focus .game-heading .game-tools {flex-wrap:wrap;min-width:0;max-width:100%}
body.pro-focus .game-heading p {display:none}
body.pro-focus .stage {width:100%;max-width:720px}
body.pro-focus .arena {max-width:720px;margin-inline:auto}
body.pro-focus .pro-brief {padding:var(--space-2) var(--space-3)}
.pro-focus-exit {scroll-margin-top:var(--space-4)}
@media(max-width:600px) {
  .pro-brief {padding:var(--space-3);gap:var(--space-2)}
  .pro-brief p {font-size:.9rem}
  .pro-toolbar {width:100%}
  #arcade-app .controller {margin:var(--space-2);padding:var(--space-3);gap:var(--space-2)}
  #arcade-app .action-controls {min-width:100px}
  .pro-button-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  body.pro-focus .shell {padding-inline:var(--space-4)}
  body.pro-focus .game-heading {flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce) {
  .pro-meter span,.controller button {transition:none;animation:none}
}