/* The mini-game window (sprint 35 item 1, client/minigame.js). Ink and paper only, the sentence font, square corners, no border radius.
   Phone: the frame is 180 x 300 logical at 2x (360 x 600 px), centred, 8 px from the top; the plate sits over its top 32 px and Skip over
   its bottom 44 px, both as real text; the disclaimer strip stays visible under it. Desktop: the same frame in a one-bit window. */
#mini{--head:0px;position:fixed;inset:0 0 56px 0;z-index:31;display:flex;justify-content:center;align-items:flex-start;padding:8px 0 0;overflow:auto;
  background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
  font:700 18px/22px "Atkinson Hyperlegible",Verdana,sans-serif;color:#000}
#mini[hidden]{display:none}
#mini .t{filter:url(#bitb)}
#mini .mg-win{position:relative;width:360px;height:calc(600px + var(--head));background:#fff;border:0}
#mini .mg-title{display:none;margin:0;height:var(--head);text-align:center;font:700 20px/32px "Atkinson Hyperlegible",Verdana,sans-serif;background:repeating-linear-gradient(#000 0 2px,#fff 2px 4px)}
#mini .mg-titlebg{display:inline-block;background:#fff;padding:0 12px}
#mini .mg-frame{position:relative;width:360px;height:600px;background:#fff}
#mini .mg-canvas{display:block;width:360px;height:600px;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;background:#fff}
#mini .mg-plate{position:absolute;z-index:2;left:0;top:var(--head);width:360px;min-height:32px;margin:0;padding:4px 10px;background:#fff;border-bottom:2px solid #000;font:700 18px/22px "Atkinson Hyperlegible",Verdana,sans-serif}
#mini .mg-result{position:absolute;z-index:2;left:0;top:calc(var(--head) + 500px);width:360px;margin:0;padding:6px 10px;background:#fff;border-top:2px solid #000;border-bottom:2px solid #000;text-align:center;font:700 18px/24px "Atkinson Hyperlegible",Verdana,sans-serif}
#mini[data-game="holden"] .mg-result[data-win="0"]{top:calc(var(--head) + 58px)} /* a tip: the board hangs under the plate (two lines), so the legs, the snow and the heap in it stay in view */
#mini .mg-skip,#mini .mg-actions{position:absolute;z-index:2;left:0;top:calc(var(--head) + 556px);width:360px;height:44px;margin:0}
#mini button{min-height:44px;background:#fff;color:#000;border:2px solid #000;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #000;border-radius:0;font:700 18px/22px "Atkinson Hyperlegible",Verdana,sans-serif;cursor:pointer}
#mini button:active{background:#000;color:#fff}
#mini button:active .t,#mini .mg-mode[aria-pressed="true"] .t{color:#000;filter:url(#bitb) invert(1)}
#mini button:focus-visible{outline:3px dotted #000;outline-offset:3px}
#mini .mg-skip{width:360px}
#mini .mg-actions{display:flex;gap:8px}
#mini .mg-actions button{flex:1 1 0}
/* The practice picker: one Aseprite card per game (client/art/aseprite/mini-ui/mini-card, 72 x 88 at 2x; frame 2 is the focused
   card with the default button's thick ring), the game's head (mini-heads, 32 x 32) in its well, the name and length as real text. */
#mini .mg-cards{position:absolute;left:0;top:calc(var(--head) + 72px);width:360px;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,144px);justify-content:center;gap:14px 24px}
#mini .mg-card-row{display:grid;gap:6px;width:144px}
#mini .mg-card{display:block;position:relative;width:144px;height:176px;min-height:176px;padding:0;border:0;box-shadow:none;text-align:center;background:url("/art/aseprite/mini-ui/mini-card-sheet.png") 0 0/288px 176px no-repeat;image-rendering:pixelated}
#mini .mg-card:hover,#mini .mg-card:focus-visible{background-position:-144px 0}
#mini .mg-card:focus-visible{outline:none}
#mini .mg-card:active{background:url("/art/aseprite/mini-ui/mini-card-sheet.png") -144px 0/288px 176px no-repeat;color:#000}
#mini .mg-card:active .t{filter:url(#bitb)}
#mini .mg-head{position:absolute;left:38px;top:22px;width:64px;height:64px;background:url("/art/aseprite/mini-ui/mini-heads-sheet.png") 0 0/128px 64px no-repeat;image-rendering:pixelated}
#mini .mg-head[data-game="bear"]{background-position:-64px 0}
#mini .mg-head[data-game="holden"]{background:url("/art/aseprite/holden-game/holden-game-head.png") 0 0/64px 64px no-repeat}
#mini .mg-name{position:absolute;left:10px;right:14px;top:108px;font:700 18px/20px "Atkinson Hyperlegible",Verdana,sans-serif}
#mini .mg-sec{position:absolute;left:0;right:4px;top:150px;font-weight:400;font-size:16px;line-height:18px}
#mini .mg-toggles{display:flex;gap:6px} /* side by side: three cards are two rows of 226 px in the 484 px between the plate and the buttons */
#mini .mg-mode{flex:1 1 0;min-width:0;padding:0 2px;font-size:16px}
/* The action word (copy.js ACTION): WarioWare-big over the frame as play starts, chalk numbers' face, paper with a thick ink edge, tilted.
   It pops in three stepped sizes, holds, and goes (minigame.js ACTION_MS); reduced motion shows it still. */
#mini .mg-action{position:absolute;z-index:1;left:0;top:168px;width:360px;margin:0;text-align:center;pointer-events:none;
  font:72px/72px "Jersey 10",monospace;color:#fff;transform:rotate(-6deg);
  text-shadow:4px 0 #000,-4px 0 #000,0 4px #000,0 -4px #000,4px 4px #000,-4px 4px #000,4px -4px #000,-4px -4px #000,8px 8px #000}
#mini .mg-action[hidden]{display:none}
#mini[data-action="pop"] .mg-action{animation:mg-pop .3s steps(1,end) 1}
@keyframes mg-pop{0%{transform:rotate(-6deg) scale(1.6)}33%{transform:rotate(-6deg) scale(1.25)}66%{transform:rotate(-6deg) scale(1.08)}100%{transform:rotate(-6deg) scale(1)}}
/* The hold-and-slide hint (mini-hand, 16 x 16 at 2x): press, slide left, slide right, once, while the plate is read. */
#mini .mg-hand{display:none;position:absolute;z-index:1;left:164px;top:452px;width:32px;height:32px;pointer-events:none;background:url("/art/aseprite/mini-ui/mini-hand-sheet.png") 0 0/96px 32px no-repeat;image-rendering:pixelated}
#mini[data-hint="1"] .mg-hand{display:block;animation:mg-hand 1s steps(1,end) 1 both}
@keyframes mg-hand{0%{background-position:0 0;transform:none}20%{background-position:-32px 0;transform:translateX(-40px)}55%{background-position:-64px 0;transform:translateX(40px)}90%{background-position:0 0;transform:none}}
/* The result bell (mini-bell, 16 x 16 at 2x) before the line of a ride to the bell: it rings in 2 stepped frames, then hangs still. */
#mini .mg-result[data-win="1"]::before{content:"";display:inline-block;width:32px;height:32px;margin:-6px 8px -8px 0;vertical-align:middle;background:url("/art/aseprite/mini-ui/mini-bell-sheet.png") 0 0/64px 32px no-repeat;image-rendering:pixelated;animation:mg-bell .267s steps(1,end) 4}
@keyframes mg-bell{0%{background-position:-32px 0}50%{background-position:0 0}}
#mini .mg-mode[aria-pressed="true"]{background:#000;color:#fff;box-shadow:inset 0 0 0 2px #000,inset 0 0 0 3px #fff}
#mini .mg-picker-plate{margin:0}
/* Desktop: the window chrome is the Aseprite 9-slice (mini-ui/mini-window, 24 x 32: a 16-row striped title band, 8 px sides
   whose innermost column is the 1 px ink line). The sides and foot are laid outside the border box (outset 14 px), so only the
   ink line shows, 2 px at 2x; the title band is the 32 px top border, with the title's paper label set over it as real text. */
@media (min-width:700px){
  #mini{bottom:44px;align-items:center;padding:8px 0} /* clear of the disclaimer strip (one line on the door, 44 px on /minigames) */
  #mini .mg-title{display:block;position:absolute;left:0;right:0;top:-32px;height:32px;background:none}
  #mini .mg-win{box-sizing:content-box;width:360px;height:600px;border-style:solid;border-width:32px 2px 2px;border-image:url("/art/aseprite/mini-ui/mini-window.png") 16 8 8 / 32px 16px 16px / 0 14px 14px stretch;image-rendering:pixelated;box-shadow:4px 4px 0 #fff}
}
@media (prefers-reduced-motion:reduce){#mini *{animation:none!important;transition:none!important}}