/* Games: Minesweeper, Solitaire, Snake. Our own CSS in the early-2000s style; no borrowed art. */
.game-body { background: var(--face); }
.game-btn {
  padding: 2px 10px; border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5); color: var(--ink); font: var(--ui-size) var(--ui-font); cursor: pointer;
}
.game-btn:hover { box-shadow: inset 0 0 0 2px #f8b636; }

/* The three games have their own status bar, so the window's title strip goes. */
.window--game .window__status { display: none; }

/* Shared: menu bar, status bar, help dialog. Measured on the period look: 20px bar on the window face colour. */
.game-body--menu { position: relative; }
.gmenu { display: flex; flex: none; height: 20px; padding: 0 2px; background: var(--face); border-bottom: 1px solid #fff; box-shadow: 0 1px #aca899; }
.gmenu__group { position: relative; }
.gmenu__top { height: 20px; padding: 0 7px; border: 0; background: none; color: var(--ink); font: var(--ui-size) var(--ui-font); cursor: default; }
.gmenu__top:hover, .gmenu__top[aria-expanded="true"] { background: var(--select); color: var(--white); }
.gmenu__top:focus-visible, .gmenu__item:focus-visible { outline: 1px dotted currentColor; outline-offset: -3px; }
.gmenu__list { position: absolute; z-index: 20; top: 20px; left: 0; min-width: 190px; padding: 2px; background: var(--white); border: 1px solid #aca899; box-shadow: 2px 2px 3px rgb(0 0 0 / 0.35); }
.gmenu__list[hidden] { display: none; }
.gmenu__item { position: relative; display: block; width: 100%; padding: 3px 22px 3px 22px; border: 0; background: none; color: var(--ink); font: var(--ui-size) var(--ui-font); text-align: left; white-space: nowrap; cursor: default; }
.gmenu__item:hover, .gmenu__item:focus { background: var(--select); color: var(--white); }
.gmenu__item[aria-checked="true"]::before { content: ""; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: currentColor; }
.gmenu__sep { height: 0; margin: 3px 2px; border: 0; border-top: 1px solid #aca899; }
.gbar { display: flex; flex: none; gap: 2px; padding: 2px; background: var(--face); border-top: 1px solid #fff; }
.gbar > * { margin: 0; padding: 1px 6px; min-height: 16px; box-shadow: inset 1px 1px #aca899, inset -1px -1px #fff; font: var(--ui-size) var(--ui-font); }
.gbar__msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghelp { position: absolute; z-index: 30; inset: 24px 12px auto; padding: 10px 12px; background: var(--face); border: 1px solid #0831d9; box-shadow: 3px 3px 8px rgb(0 0 0 / 0.4); }
.ghelp__title { margin: 0 0 6px; font: 700 12px var(--ui-font); }
.ghelp p { margin: 0 0 6px; line-height: 1.35; }

/* Minesweeper: a grey bevelled board, red seven-segment counters, a drawn four-state face. Sizes follow the period measurements. */
.mines { --cell: 24px; display: inline-flex; flex-direction: column; gap: 6px; margin: 10px auto auto; padding: 6px;
  background: #c0c0c0; box-shadow: inset 3px 3px #fff, inset -3px -3px #808080; }
.mines__head { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 6px;
  box-shadow: inset 2px 2px #808080, inset -2px -2px #fff; }
.mines__counter { display: block; width: 41px; height: 25px; line-height: 0; box-shadow: 1px 1px #fff, -1px -1px #808080; }
.mines__counter svg { width: 41px; height: 25px; }
.mines__face { display: block; width: 26px; height: 26px; padding: 0; border: 1px solid #808080; background: #c0c0c0;
  box-shadow: inset 2px 2px #fff, inset -2px -2px #808080; cursor: pointer; }
.mines__face:active { padding: 1px 0 0 1px; box-shadow: none; }
.mines__face svg { display: block; width: 22px; height: 22px; margin: auto; }
.mines__face:focus-visible, .mines__cell:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.mines__grid { display: grid; padding: 3px; box-shadow: inset 3px 3px #808080, inset -3px -3px #fff; }
.mines__cell { display: grid; place-items: center; width: var(--cell); height: var(--cell); padding: 0; border: 0; background: #c0c0c0;
  --bev: max(2px, calc(var(--cell) / 8)); box-shadow: inset var(--bev) var(--bev) #fff, inset calc(var(--bev) * -1) calc(var(--bev) * -1) #808080; color: #000; font: 700 calc(var(--cell) * 0.75)/1 var(--ui-font); cursor: pointer; }
.mines__cell svg { width: 78%; height: 78%; }
.mines__cell.is-open, .mines__cell.is-pressed { box-shadow: inset 1px 1px #808080, inset 0 0 0 1px #9b9b9b; cursor: default; }
.mines__cell.is-boom { background: #f00; }
.mines__cell[data-n="1"] { color: #0000ff; } .mines__cell[data-n="2"] { color: #008000; }
.mines__cell[data-n="3"] { color: #ff0000; } .mines__cell[data-n="4"] { color: #000080; }
.mines__cell[data-n="5"] { color: #800000; } .mines__cell[data-n="6"] { color: #008080; }
.mines__cell[data-n="7"] { color: #000; } .mines__cell[data-n="8"] { color: #808080; }

/* Solitaire: green felt, white cards drawn in SVG, a patterned blue back, outlined empty spaces. */
.solitaire { --card-w: 71px; --card-h: 96px; --fan: 20px; --fan-down: 8px; position: relative;
  flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 10px; background: #008000; overflow: auto; }
.solitaire__top { display: flex; gap: 8px; }
.solitaire__gap { flex: 1; }
.solitaire__waste { position: relative; display: flex; min-width: var(--card-w); }
.solitaire__waste .card + .card { margin-left: calc(var(--card-w) * -0.72); }
.solitaire__columns { display: grid; grid-template-columns: repeat(7, var(--card-w)); gap: 8px; justify-content: space-between; }
.solitaire__column { display: flex; flex-direction: column; }
.solitaire__column .card + .card { margin-top: calc(var(--fan) - var(--card-h)); }
.solitaire__column .card.is-down + .card { margin-top: calc(var(--fan-down) - var(--card-h)); }
.card, .card-slot { position: relative; flex: none; width: var(--card-w); height: var(--card-h); padding: 0;
  border-radius: 3px; cursor: pointer; touch-action: none; }
.card { border: 0; background: none; filter: drop-shadow(1px 1px 0 rgb(0 0 0 / 0.35)); }
.card svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.card.is-down { border: 1px solid #333; border-radius: 3px; filter: none; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #333, 1px 1px 0 rgb(0 0 0 / 0.35);
  background: var(--back, url("../assets/cards/back-owl.webp")) center / cover no-repeat; background-clip: padding-box; }
.card.is-down::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 1px; pointer-events: none; }
.solitaire[data-back="owl"] { --back: url("../assets/cards/back-owl.webp"); }
.solitaire[data-back="castle"] { --back: url("../assets/cards/back-castle.webp"); }
.solitaire[data-back="fish"] { --back: url("../assets/cards/back-fish.webp"); }
.card.is-held { outline: 3px solid var(--focus); outline-offset: -1px; z-index: 1; }
.card.is-dragging { opacity: 0.25; }
.card:focus-visible, .card-slot:focus-visible { outline: 2px dotted #fff; outline-offset: 2px; }
.card-slot { border: 2px solid rgb(255 255 255 / 0.55); background: rgb(0 0 0 / 0.1); box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.12); }
.card-slot.is-recycle::after { content: "↻"; position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / 0.75); font-size: 30px; }
.solitaire__ghost { position: fixed; left: 0; top: 0; z-index: 50; width: var(--card-w); height: var(--card-h); pointer-events: none; will-change: transform; }
.solitaire__ghost .card { filter: drop-shadow(3px 4px 3px rgb(0 0 0 / 0.45)); }
.solitaire__cascade { position: absolute; left: 0; top: 0; pointer-events: none; }

/* Snake: dark pixels on a pale green LCD, a plain border wall, LCD score digits, a direction pad on touch screens. */
.snake { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto auto; padding: 10px; }
.snake__screen { padding: 8px; background: #c7f0d8; border: 3px solid #43523d; box-shadow: inset 2px 2px 0 rgb(67 82 61 / 0.35), 0 0 0 3px #9aa39a; }
.snake__lcd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.snake__best { display: block; line-height: 0; }
.snake__score { display: block; line-height: 0; }
.snake__board { display: block; width: 280px; height: 280px; border: 2px solid #43523d; image-rendering: pixelated; touch-action: none; }
.snake__board:focus-visible { outline: 2px dotted #43523d; outline-offset: 3px; }
.snake__message { min-height: 1.4em; margin: 0; text-align: center; }
.snake__pad { display: none; grid-template: ". up ." 44px "left down right" 44px / 44px 44px 44px; gap: 4px; }
.snake__pad button { border: 1px solid #003c74; border-radius: 6px; background: linear-gradient(180deg, #fff, #d6d0c5); font-size: 18px; }
.snake__pad-up { grid-area: up; } .snake__pad-up::after { content: "▲"; }
.snake__pad-left { grid-area: left; } .snake__pad-left::after { content: "◀"; }
.snake__pad-down { grid-area: down; } .snake__pad-down::after { content: "▼"; }
.snake__pad-right { grid-area: right; } .snake__pad-right::after { content: "▶"; }
@media (pointer: coarse) { .snake__pad { display: grid; } }

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  /* On a phone Sage's greeting can cover the bottom edge, so the status bar moves up under the menu. */
  .game-body--menu .gmenu { order: -2; }
  .game-body--menu .gbar { order: -1; border-top: 0; border-bottom: 1px solid #aca899; }
  .solitaire { --card-w: calc((100vw - 8px - 6 * 2px) / 7); --card-h: calc(var(--card-w) * 1.352); --fan: 22px; --fan-down: 7px; padding: 4px; }
  .solitaire__columns { gap: 2px; }
  .solitaire__top { gap: 2px; }
}