/* Minimal control frame. Local to each standalone game. Luke Steuber. */
body[data-control-frame] .control-toolbar {
  position:fixed!important;left:max(8px,env(safe-area-inset-left))!important;right:max(8px,env(safe-area-inset-right))!important;
  top:auto!important;bottom:max(6px,env(safe-area-inset-bottom))!important;width:auto!important;height:auto!important;
  display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;
  grid-template-columns:none!important;grid-template-rows:none!important;padding:0!important;gap:0!important;
  margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  z-index:60;pointer-events:none;
}
body[data-control-frame] .control-actions,body[data-control-frame] .control-meta {
  display:flex!important;flex-direction:row!important;gap:0!important;align-items:center!important;pointer-events:auto;
}
body[data-control-frame] .control-icon,body[data-control-frame] .control-close {
  appearance:none;display:inline-grid;place-items:center;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  padding:12px!important;border:0!important;border-radius:0!important;box-shadow:none!important;cursor:pointer;pointer-events:auto;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent; /* the press band below replaces the browser's tinted flash */
}
body[data-control-frame] .control-icon:not([aria-pressed="true"]):not(.is-armed),body[data-control-frame] .control-close {background:transparent!important;}
body[data-control-frame] .control-icon svg,body[data-control-frame] .control-close svg {width:24px!important;height:24px!important;}
body[data-control-frame] .control-icon svg [stroke],body[data-control-frame] .control-icon svg [stroke-width],body[data-control-frame] .control-icon svg,body[data-control-frame] .control-close svg {stroke-width:1.6px!important;}
body[data-control-frame] .control-icon:focus-visible,body[data-control-frame] .control-close:focus-visible {outline:2px solid currentColor!important;outline-offset:2px!important;box-shadow:none!important;}
/* Hover only where a pointer really hovers: a touch screen keeps :hover on the last button tapped. */
@media(hover:hover) and (pointer:fine) {
  body[data-control-frame] .control-icon:hover:not(:disabled) {opacity:1;}
  body[data-control-frame] .control-icon:hover:not(:disabled):not([aria-pressed="true"]):not(.is-armed),body[data-control-frame] .control-close:hover {background:var(--band,var(--wash,rgba(127,127,127,.1)))!important;}
}
/* The same band while a finger or button is down, so a tap still answers. */
body[data-control-frame] .control-icon:active:not(:disabled):not([aria-pressed="true"]):not(.is-armed),body[data-control-frame] .control-close:active {background:var(--band,var(--wash,rgba(127,127,127,.1)))!important;}
body[data-control-frame] .control-restart {
  position:fixed!important;left:max(8px,env(safe-area-inset-left))!important;top:max(0px,env(safe-area-inset-top))!important;
  right:auto!important;bottom:auto!important;transform:none!important;z-index:60;
}
body[data-control-frame] .control-completion {
  position:fixed!important;left:var(--control-next-left,50%)!important;right:auto!important;top:auto!important;bottom:var(--control-next-bottom,max(64px,calc(env(safe-area-inset-bottom) + 64px)))!important;
  transform:translateX(-50%)!important;z-index:50;
}
body[data-control-frame] .control-completion:not(button) {width:max-content!important;max-width:calc(100vw - 32px);}
/* A standalone Next is one unmistakable shape: a solid disc in the ink colour
   with its arrow in the page colour, so it inverts with the theme. The frame
   centres it in the gap between the board and the toolbar. It fades and grows
   in, and one soft ring spreads from it if it waits unpressed. The ID-level
   :not() keeps it above every class rule for control icons. */
body[data-control-frame] button.control-completion:not(#control-frame-none) {
  width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;padding:0!important;
  display:grid!important;place-items:center!important;border:0!important;border-radius:50%!important;box-shadow:none!important;
  background:var(--ink,CanvasText)!important;color:var(--bg,Canvas)!important;opacity:1;
  /* Centred by its own half width, not a transform, so it grows in about its centre. */
  left:calc(var(--control-next-left,50%) - 32px)!important;transform:none!important;
  animation:control-next-in .2s ease-out both;
}
body[data-control-frame] button.control-completion:not(#control-frame-none) svg {width:30px!important;height:30px!important;stroke:currentColor!important;}
body[data-control-frame] button.control-completion:not(#control-frame-none) svg,body[data-control-frame] button.control-completion:not(#control-frame-none) svg [stroke],body[data-control-frame] button.control-completion:not(#control-frame-none) svg [stroke-width] {stroke-width:2.2px!important;}
body[data-control-frame] button.control-completion:not(#control-frame-none)[hidden] {display:none!important;}
/* A game's clearing behind its controls would cover the disc; the solid disc needs none. */
body[data-control-frame] button.control-completion:not(#control-frame-none)::before {content:none!important;}
body[data-control-frame] button.control-completion:not(#control-frame-none):focus-visible {outline:2px solid var(--ink,CanvasText)!important;outline-offset:3px!important;}
body[data-control-frame] button.control-completion:not(#control-frame-none)::after {
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink,CanvasText);opacity:0;pointer-events:none;
  animation:control-next-ring .9s ease-out 1.5s 1 both;
}
@keyframes control-next-in {from {opacity:0;scale:.8} to {opacity:1;scale:1}}
@keyframes control-next-ring {from {opacity:.45;scale:1} to {opacity:0;scale:1.6}}
html[data-motion="reduce"] body[data-control-frame] button.control-completion:not(#control-frame-none),html[data-motion="reduce"] body[data-control-frame] button.control-completion:not(#control-frame-none)::after {animation:none!important;}
@media(prefers-reduced-motion:reduce) {
  body[data-control-frame] button.control-completion:not(#control-frame-none),body[data-control-frame] button.control-completion:not(#control-frame-none)::after {animation:none!important;}
}
body[data-control-frame] .control-sheet button {min-width:44px;min-height:44px;}
body[data-control-frame] .control-sheet .modal-content {box-sizing:border-box;max-height:calc(100dvh - 16px);overflow:auto;}
body[data-control-frame] .control-toolbar [hidden],body[data-control-frame] .control-completion[hidden] {display:none!important;}
@media(max-height:520px) and (min-width:560px) {
  body[data-control-frame] .control-toolbar {
    left:auto!important;right:max(8px,env(safe-area-inset-right))!important;top:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:48px!important;flex-direction:column!important;
  }
  body[data-control-frame] .control-actions,body[data-control-frame] .control-meta {flex-direction:column!important;}
  body[data-control-frame] .control-completion {bottom:var(--control-next-bottom,max(12px,env(safe-area-inset-bottom)))!important;}
  body[data-control-frame="notan"] #app {padding-right:64px;}
}
@media(forced-colors:active) {
  body[data-control-frame] .control-icon:focus-visible,body[data-control-frame] .control-close:focus-visible {outline-color:Highlight!important;}
}

/* Akari keeps completion within reach beside its finished board. */
body[data-control-frame][data-completion-root="board-stage"] .control-completion {
  position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;
}

/* Access: its rows in Settings. The rest of Access, and its styles, load with
   access.js the first time a player turns it on. */
body[data-control-frame] .access-row[hidden] {display:none!important;}
body[data-control-frame] .access-action {min-height:44px;padding:8px;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer;}