/* Memosweeper, in SYNERGY's clothes. Covered tiles are the desktop's raised
   olive buttons; an opened cell is the paper Solitaire's cards are printed on,
   so the classic number colours read the way they always have. */
.minesweeperBox{ width:max-content; min-width:calc(var(--ui) * 16); max-width:100%; max-height:98%; }
.minesweeperBox .panelClose{ position:static; top:auto; right:auto; }
/* Nothing in the window but the menu bar and the game, so no padding round it, and
   room for a menu to drop below the bar. */
.minesweeperBox .panelBody{ padding:0; overflow:visible; display:flex; flex-direction:column; }
.minesweeperBox.msMaximized{ position:absolute; inset:0; width:auto; max-width:none; height:auto; max-height:none; }
.minesweeperBox.msMaximized .panelBody{ flex:1; min-height:0; }
.msApp{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }

/* THE MENU BAR: Windows 95's, in Bob's colours -- Game and Help, ticks beside the
   choices that are on, the shortcut keys at the right. */
.msMenuBar{ display:flex; gap:2px; padding:2px 4px; background:var(--panel-light); border-bottom:2px solid var(--ink); position:relative; z-index:40; flex:0 0 auto; }
.msMenuWrap{ position:relative; }
.msMenu{ background:none; border:2px solid transparent; padding:2px 10px; font-family:inherit; font-size:var(--ui); color:var(--text); cursor:pointer; }
.msMenu:hover, .msMenu[aria-expanded="true"]{ background:var(--panel); border-color:var(--ink); }
.msDrop{ position:absolute; top:100%; left:0; min-width:calc(var(--ui) * 14); background:var(--panel); border:3px solid var(--ink); box-shadow:4px 4px 0 rgba(0,0,0,.5); padding:3px; z-index:50; display:flex; flex-direction:column; }
.msDrop[hidden]{ display:none; }
.msMenuItem{ display:flex; align-items:center; gap:6px; text-align:left; background:none; border:2px solid transparent; padding:3px 8px 3px 4px; font-family:inherit; font-size:var(--ui); color:var(--text); cursor:pointer; white-space:nowrap; }
.msMenuItem:hover{ background:var(--gold); color:var(--ink); border-color:var(--ink); }
.msCheck{ width:1.1em; text-align:center; flex:0 0 auto; }
.msLabel{ flex:1 1 auto; }
.msKey{ margin-left:14px; color:var(--text-dim); font-size:calc(var(--ui) - 1px); }
.msMenuItem:hover .msKey{ color:var(--ink); }
.msSep{ height:2px; background:#4a4837; margin:3px 2px; }

/* THE STAGE: what is left of the window under the bar. The board is drawn at one
   size and scaled to it (see applyBoardScale). The scale box is the scaled
   footprint, so the window does not reserve room for the full-size board
   underneath a smaller one, and the stage centres it. */
.msStage{ position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:4px; overflow:hidden; }
.msScaleBox{ flex:0 0 auto; }
.msGameWrap{ width:max-content; transform-origin:0 0; transform:scale(var(--ms-scale, 1)); user-select:none; -webkit-user-select:none; }
/* Color, off: the board in greys, as the original's black and white. */
.msGameWrap.msMono{ filter:grayscale(1); }

.msTimeLed{ min-width:0; }

.msFrame{ display:inline-block; background:var(--panel-light); padding:6px; border-top:3px solid #7a7561; border-left:3px solid #7a7561; border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.msStatus{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 6px; margin-bottom:6px; border-top:2px solid var(--ink); border-left:2px solid var(--ink); border-right:2px solid #7a7561; border-bottom:2px solid #7a7561; }
.msLed{ font-family:'Press Start 2P',monospace; font-size:11px; line-height:1; color:var(--danger); background:var(--ink); padding:5px 4px 4px; letter-spacing:1px; min-width:0; text-align:center; text-shadow:0 0 4px rgba(194,59,59,.55); }
.msFace{ width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; background:#565243; border-top:2px solid #7a7561; border-left:2px solid #7a7561; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.msFace:active{ border-top-color:var(--ink); border-left-color:var(--ink); border-right-color:#7a7561; border-bottom-color:#7a7561; }

/* touch-action:none so a long press marks a cell instead of scrolling or
   bringing up the phone's own menu. The board never needs to scroll: it is
   scaled to fit. */
.msGrid{ display:grid; width:max-content; margin:0 auto; border-top:2px solid var(--ink); border-left:2px solid var(--ink); border-right:2px solid #7a7561; border-bottom:2px solid #7a7561; touch-action:none; -webkit-touch-callout:none; }
.msCell{ width:24px; height:24px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-weight:700; font-size:16px; line-height:1; cursor:pointer;
  background:#565243; border-top:3px solid #8a846d; border-left:3px solid #8a846d; border-right:3px solid #2c2a23; border-bottom:3px solid #2c2a23; }
.msCell svg{ width:18px; height:18px; display:block; }
.msCell.msPressed,
.msCell.msOpen{ background:#d9d2bd; border:0; border-right:1px solid #b3aa8f; border-bottom:1px solid #b3aa8f; cursor:default; }
.msCell.msQuery{ color:var(--text); }
.msCell.msHit{ background:var(--danger); }
.msCell.msWrong{ position:relative; }
.msCell.msWrong::after{ content:""; position:absolute; inset:3px; background:
  linear-gradient(45deg, transparent 44%, var(--danger) 44%, var(--danger) 56%, transparent 56%),
  linear-gradient(-45deg, transparent 44%, var(--danger) 44%, var(--danger) 56%, transparent 56%); }

/* Number colours, one to eight, chosen to read on the paper. */
.msN1{ color:#2b5fb8; } .msN2{ color:#3f7d3a; } .msN3{ color:#c23b3b; } .msN4{ color:#26306b; }
.msN5{ color:#7a2424; } .msN6{ color:#1f7a78; } .msN7{ color:#201d16; } .msN8{ color:#6b6655; }

/* The win message floats over the bottom of the board; a click puts it away. */
.msBanner{ display:none; position:absolute; left:50%; bottom:14px; transform:translateX(-50%); background:var(--gold); color:var(--ink); border:2px solid var(--ink); padding:6px 12px; font-weight:700; text-align:center; font-family:'Space Mono',monospace; box-shadow:3px 3px 0 rgba(0,0,0,.5); cursor:pointer; z-index:5; white-space:nowrap; }
.msBanner.show{ display:block; }

/* Custom Board, Best Scores and About, over the game inside the window. */
.msDialogLayer{ display:none; position:absolute; inset:0; background:rgba(8,8,6,.55); align-items:center; justify-content:center; z-index:10; padding:8px; }
.msDialogLayer.show{ display:flex; }
.msDialog{ background:var(--panel); border:3px solid var(--ink); box-shadow:5px 5px 0 rgba(0,0,0,.5); padding:0 0 10px; min-width:200px; max-width:100%; font-size:var(--ui); display:flex; flex-direction:column; gap:8px; }
.msDialogTitle{ background:var(--panel-light); border-bottom:2px solid var(--ink); padding:4px 10px; font-weight:700; color:var(--gold); }
.msDialog label{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 12px; }
.msDialog input{ width:72px; background:var(--ink); color:var(--text); border:2px solid #4a4837; padding:3px 5px; font-family:'Space Mono',monospace; font-size:calc(var(--ui) + 1px); text-align:right; }
.msDialogHint{ padding:0 12px; color:var(--text-dim); font-size:calc(var(--ui) - 2px); max-width:230px; }
.msDialogBtns{ display:flex; justify-content:center; gap:8px; padding:4px 12px 0; }
.msDialogBtns .supportbtn{ padding:6px 14px; font-size:max(8px, calc(var(--ui) * .7)); min-width:64px; }
.msScores{ margin:0 12px; border-collapse:collapse; font-family:'Space Mono',monospace; }
.msScores th, .msScores td{ padding:3px 10px; text-align:right; }
.msScores th:first-child, .msScores td:first-child{ text-align:left; }
.msScores th{ color:var(--text-dim); font-weight:400; border-bottom:2px solid #4a4837; }
.msAbout{ display:flex; gap:12px; align-items:center; padding:2px 14px; }
.msAboutFace svg{ width:48px; height:40px; }
.msAboutSmall{ color:var(--text-dim); font-size:calc(var(--ui) - 2px); }

/* Phones: the window takes the whole screen, as Solitaire's does, and the way
   out stays thumb-sized. */
@media (max-width:620px), (max-height:520px){
  #minesweeperOverlay{ position:fixed; padding:4px; }
  #minesweeperOverlay .minesweeperBox{ max-width:none; max-height:100%; width:100%; height:100%; }
  #minesweeperOverlay .supportHead{ padding:8px 10px; }
  #minesweeperOverlay .solWinControls .iconbtn{ width:44px; height:44px; font-size:18px; }
  #minesweeperOverlay .msMenu{ min-height:40px; }
  #minesweeperOverlay .msMenuItem{ min-height:40px; }
}