/* David Beiler OS games: Chadsweeper, DB Snake, Brick Beiler, 2048 David
   Edition, and the Games folder that opens them. Builds on the Win98 chrome
   in index.html (.window, .title-bar, .btn, .status-bar). */

.game-win .win-content { padding: 6px; text-align: center; }
.game-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; margin-bottom: 6px; }
.game-row strong { font-weight: bold; }
.game-hint { font-size: 10px; color: #555; margin: 6px 0 0; }
.sunken {
  border: 2px solid;
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
}
.game-canvas { display: block; margin: 0 auto; background: #000; touch-action: none; max-width: 100%; }
.game-win .menu-bar-item.on { background: var(--win-blue); color: #fff; }

/* d-pad for phones (Snake) */
.dpad { display: none; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 40px); gap: 4px; justify-content: center; margin-top: 8px; }
.dpad .btn { margin: 0; padding: 0; font-size: 16px; }
.dpad .up { grid-column: 2; grid-row: 1; }
.dpad .left { grid-column: 1; grid-row: 2; }
.dpad .down { grid-column: 2; grid-row: 2; }
.dpad .right { grid-column: 3; grid-row: 2; }
@media (hover: none) { .dpad { display: grid; } }

/* ---- Games folder (an Explorer window) ---- */
.folder-view { background: #fff; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; padding: 10px; min-height: 150px; }
.folder-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 1px solid transparent; background: none; font: inherit; font-size: 11px; cursor: pointer; color: #000; }
.folder-item:hover, .folder-item:focus { border: 1px dotted var(--win-blue); background: #e6e6f5; outline: none; }
.folder-item .fi-icon { font-size: 30px; line-height: 1; }

/* ---- Chadsweeper ---- */
.ms-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; margin-bottom: 6px; background: var(--win-gray); }
.ms-lcd { background: #000; color: #ff2a1a; font: bold 20px/1 "Courier New", monospace; padding: 2px 4px; min-width: 46px; text-align: right; letter-spacing: 1px; }
.btn.ms-face { width: 32px; height: 32px; font-size: 18px; padding: 0; margin: 0; line-height: 1; }
.ms-grid { display: inline-grid; background: var(--win-dark); gap: 0; touch-action: manipulation; }
.ms-cell {
  width: var(--cell, 24px);
  height: var(--cell, 24px);
  padding: 0;
  margin: 0;
  font: bold calc(var(--cell, 24px) * .6)/1 "MS Sans Serif", Tahoma, Arial, sans-serif;
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ms-cell.open { border: 1px solid #9a9a9a; background: #d4d4d4; cursor: default; }
.ms-cell.boom { background: #ff3b30; }
.ms-cell.n1 { color: #0000ff; } .ms-cell.n2 { color: #008000; } .ms-cell.n3 { color: #ff0000; }
.ms-cell.n4 { color: #000080; } .ms-cell.n5 { color: #800000; } .ms-cell.n6 { color: #008080; }
.ms-cell.n7 { color: #000; } .ms-cell.n8 { color: #808080; }
.ms-flagmode { font-size: 11px; }
.ms-flagmode[aria-pressed='true'] { border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark); background: #ffffcc; }

/* ---- 2048 David Edition ---- */
.g48-board { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 6px; padding: 6px; background: #808080; width: min(300px, 100%); margin: 0 auto; aspect-ratio: 1; touch-action: none; }
.g48-cell { min-width: 0; min-height: 0; background: #a8a8a8; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: bold; color: #000; overflow: hidden; }
.g48-cell .v { font-size: clamp(14px, 5.5vw, 22px); line-height: 1; }
.g48-cell .r { font-size: 8px; font-weight: normal; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.g48-cell.t { border: 2px solid; border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light); }
.g48-cell.pop { animation: g48pop .16s ease-out; }
.g48-cell.new { animation: g48new .18s ease-out; }
@keyframes g48pop { 0% { transform: scale(1); } 50% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes g48new { 0% { transform: scale(.3); opacity: .2; } 100% { transform: scale(1); opacity: 1; } }
.t2 { background: #e8e8e8; } .t4 { background: #d8d8ff; } .t8 { background: #b0b0ff; } .t16 { background: #8080ff; color: #fff; }
.t32 { background: #4040e0; color: #fff; } .t64 { background: #000080; color: #fff; } .t128 { background: #008080; color: #fff; }
.t256 { background: #00a000; color: #fff; } .t512 { background: #c0a000; color: #fff; } .t1024 { background: #e06000; color: #fff; }
.t2048 { background: #c00000; color: #fff; } .tbig { background: #000; color: #ffd700; }
.g48-over { position: absolute; inset: 0; background: rgba(192, 192, 192, .88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: bold; font-size: 14px; }