/* The Tablet - the word square application. The machine, its screen, its
   menus and its window chrome live in mac.css; only what is the game's is
   here. */

:root {
  /* The application speaks in the plain stack, without the system's bitmap
     face: that one stays on the machine's own chrome. No Chicago of any
     kind here, installed or served, nor Charcoal, its System 8 cousin:
     the letters stay square and plain. */
  --letters: Geneva, Tahoma, Verdana, sans-serif;
}

/* The frame fills the root, flush with the title bar and every window
   edge, and the level card lies over it: whatever the stage shows, the
   window keeps the size of the game. */
#app-tablet {
  --tile: calc(52 * var(--u));
  --rule: calc(4 * var(--u));
  --mark: calc(14 * var(--u));
  display: grid;
  font-family: var(--letters);
}

#field { grid-row: 1; grid-column: 1; }

/* ---- the engraved frame ------------------------------------------------ */

#field { background: #fff; }

/* Three rings in the manner of the Fool's Errand curtains, and each level
   wears its own trio of patterns, fixed on the board (data-deco, set by the
   script). The white immediately around the board, where the arrows live,
   is left untouched. */
.band { background-color: #fff; }

/* The outer ring runs on below the inner frame and holds the white slip
   where the instructions, or the Play button, sit. */
.band-a {
  padding: calc(13 * var(--u));
  display: grid;
  gap: calc(10 * var(--u));
}

.band-b { padding: calc(9 * var(--u)); }
.band-c { padding: calc(7 * var(--u)); }

/* The slip is wide enough for its longest line, measured on the rendered
   face (292 units for the set 1 prompt): it is what gives the window its
   width, the same for both sets, and the frame stretches to match. */
#foot {
  position: relative;
  background: #fff;
  padding: calc(9 * var(--u)) calc(8 * var(--u));
  min-width: calc(312 * var(--u));
}

#play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  appearance: none;
  font: inherit;
  font-size: calc(12 * var(--u));
  color: #000;
  background: #fff;
  border: calc(3 * var(--u)) solid #000;
  border-radius: calc(9 * var(--u));
  padding: calc(2 * var(--u)) calc(22 * var(--u));
}

#play-btn:hover { background: #000; color: #fff; }

/* The victory takes the whole slip, over the prompt: its word on the
   left, OK at hand on the right. */
#victory {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(8 * var(--u));
}

#victory[hidden] { display: none; }

/* Tight lines: the victory can say up to three things at once, whole,
   password, and the opening of set 2, in the slip's fixed height. */
#victory p {
  margin: 0;
  flex: 1;
  font-size: calc(14.5 * var(--u));
  line-height: 1.25;
  text-align: center;
}

#victory-ok {
  flex: none;
  appearance: none;
  font: inherit;
  font-size: calc(11 * var(--u));
  color: #000;
  background: #fff;
  border: calc(2.5 * var(--u)) solid #000;
  border-radius: calc(9 * var(--u));
  padding: calc(2 * var(--u)) calc(12 * var(--u));
}

#victory-ok:hover { background: #000; color: #fff; }

#field[data-deco="1"] .band-a {
  background-image: repeating-linear-gradient(45deg, #000 0 3px, #fff 3px 7px);
}
#field[data-deco="1"] .band-b {
  background-image: repeating-linear-gradient(90deg, #000 0 1px, #fff 1px 3px);
}

#field[data-deco="2"] .band-a {
  background-image:
    linear-gradient(135deg, #000 25%, transparent 25%),
    linear-gradient(225deg, #000 25%, transparent 25%),
    linear-gradient(315deg, #000 25%, transparent 25%),
    linear-gradient(45deg, #000 25%, transparent 25%);
  background-position: -5px 0, -5px 0, 0 0, 0 0;
  background-size: 10px 10px;
}
#field[data-deco="2"] .band-b {
  background-image: radial-gradient(circle, #000 0 0.8px, #fff 0.8px);
  background-size: 4px 4px;
}

#field[data-deco="3"] .band-a {
  background-image: repeating-linear-gradient(
    0deg, #000 0 2px, #fff 2px 5px, #000 5px 7px, #fff 7px 12px);
}
#field[data-deco="3"] .band-b {
  background-image: repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 4px);
}

#field[data-deco="4"] .band-a {
  background-image: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
  background-size: 12px 12px;
}
#field[data-deco="4"] .band-b {
  background-image: repeating-linear-gradient(0deg, #000 0 1px, #fff 1px 3px);
}

#field[data-deco="5"] .band-a {
  background-image: repeating-linear-gradient(90deg, #000 0 4px, #fff 4px 8px);
}
#field[data-deco="5"] .band-b {
  background-image: repeating-linear-gradient(45deg, #000 0 2px, #fff 2px 5px);
}

#field[data-deco="6"] .band-a {
  background-image:
    repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 6px),
    repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 6px);
}
#field[data-deco="6"] .band-b {
  background-image: repeating-linear-gradient(90deg, #000 0 2px, #fff 2px 6px);
}

#field[data-deco="7"] .band-a {
  background-image: radial-gradient(circle, #000 0 1.6px, #fff 1.6px);
  background-size: 6px 6px;
}
#field[data-deco="7"] .band-b {
  background-image:
    linear-gradient(135deg, #000 25%, transparent 25%),
    linear-gradient(225deg, #000 25%, transparent 25%),
    linear-gradient(315deg, #000 25%, transparent 25%),
    linear-gradient(45deg, #000 25%, transparent 25%);
  background-position: -4px 0, -4px 0, 0 0, 0 0;
  background-size: 8px 8px;
}

#field[data-deco="8"] .band-a {
  background-image: repeating-linear-gradient(135deg, #000 0 4px, #fff 4px 12px);
}
#field[data-deco="8"] .band-b {
  background-image: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
  background-size: 6px 6px;
}

#field[data-deco="9"] .band-a {
  background-image: repeating-linear-gradient(
    90deg, #000 0 2px, #fff 2px 5px, #000 5px 7px, #fff 7px 12px);
}
#field[data-deco="9"] .band-b {
  background-image: radial-gradient(circle, #000 0 1px, #fff 1px);
  background-size: 5px 5px;
}

#field[data-deco="10"] .band-a {
  background-image:
    repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 5px),
    repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 5px);
}
#field[data-deco="10"] .band-b {
  background-image: repeating-linear-gradient(0deg, #000 0 2px, #fff 2px 7px);
}

/* The innermost ring of each trio. */
#field[data-deco="1"] .band-c {
  background-image: repeating-linear-gradient(0deg, #000 0 1px, #fff 1px 3px);
}
#field[data-deco="2"] .band-c {
  background-image: repeating-linear-gradient(90deg, #000 0 1px, #fff 1px 3px);
}
#field[data-deco="3"] .band-c {
  background-image: radial-gradient(circle, #000 0 0.8px, #fff 0.8px);
  background-size: 4px 4px;
}
#field[data-deco="4"] .band-c {
  background-image: repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 4px);
}
#field[data-deco="5"] .band-c {
  background-image: repeating-linear-gradient(0deg, #000 0 2px, #fff 2px 4px);
}
#field[data-deco="6"] .band-c {
  background-image: repeating-linear-gradient(45deg, #000 0 1px, #fff 1px 4px);
}
#field[data-deco="7"] .band-c {
  background-image: repeating-linear-gradient(0deg, #000 0 2px, #fff 2px 6px);
}
#field[data-deco="8"] .band-c {
  background-image: repeating-linear-gradient(90deg, #000 0 1px, #fff 1px 3px);
}
#field[data-deco="9"] .band-c {
  background-image: repeating-linear-gradient(45deg, #000 0 2px, #fff 2px 5px);
}
#field[data-deco="10"] .band-c {
  background-image: radial-gradient(circle, #000 0 0.8px, #fff 0.8px);
  background-size: 4px 4px;
}

/* The trios of set 2 (decos 11 to 20), cut differently from set 1's. */
#field[data-deco="11"] .band-a {
  background-image: repeating-linear-gradient(0deg, #000 0 4px, #fff 4px 9px);
}
#field[data-deco="11"] .band-b {
  background-image: repeating-linear-gradient(45deg, #000 0 1px, #fff 1px 3px);
}
#field[data-deco="11"] .band-c {
  background-image: radial-gradient(circle, #000 0 1px, #fff 1px);
  background-size: 5px 5px;
}

#field[data-deco="12"] .band-a {
  background-image: repeating-linear-gradient(
    90deg, #000 0 3px, #fff 3px 6px, #000 6px 7px, #fff 7px 12px);
}
#field[data-deco="12"] .band-b {
  background-image:
    linear-gradient(135deg, #000 25%, transparent 25%),
    linear-gradient(225deg, #000 25%, transparent 25%),
    linear-gradient(315deg, #000 25%, transparent 25%),
    linear-gradient(45deg, #000 25%, transparent 25%);
  background-position: -3px 0, -3px 0, 0 0, 0 0;
  background-size: 6px 6px;
}
#field[data-deco="12"] .band-c {
  background-image: repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 3px);
}

#field[data-deco="13"] .band-a {
  background-image:
    repeating-linear-gradient(45deg, #000 0 2px, transparent 2px 9px),
    repeating-linear-gradient(135deg, #000 0 2px, #fff 2px 9px);
}
#field[data-deco="13"] .band-b {
  background-image: repeating-linear-gradient(0deg, #000 0 1px, #fff 1px 4px);
}
#field[data-deco="13"] .band-c {
  background-image: repeating-linear-gradient(90deg, #000 0 2px, #fff 2px 5px);
}

#field[data-deco="14"] .band-a {
  background-image: radial-gradient(circle, #000 0 2px, #fff 2px);
  background-size: 7px 7px;
}
#field[data-deco="14"] .band-b {
  background-image: repeating-linear-gradient(135deg, #000 0 3px, #fff 3px 6px);
}
#field[data-deco="14"] .band-c {
  background-image: repeating-linear-gradient(0deg, #000 0 1px, #fff 1px 3px);
}

#field[data-deco="15"] .band-a {
  background-image:
    linear-gradient(135deg, #000 25%, transparent 25%),
    linear-gradient(225deg, #000 25%, transparent 25%),
    linear-gradient(315deg, #000 25%, transparent 25%),
    linear-gradient(45deg, #000 25%, transparent 25%);
  background-position: -7px 0, -7px 0, 0 0, 0 0;
  background-size: 14px 14px;
}
#field[data-deco="15"] .band-b {
  background-image: repeating-linear-gradient(90deg, #000 0 1px, #fff 1px 4px);
}
#field[data-deco="15"] .band-c {
  background-image: repeating-linear-gradient(45deg, #000 0 2px, #fff 2px 6px);
}

#field[data-deco="16"] .band-a {
  background-image: repeating-linear-gradient(45deg, #000 0 5px, #fff 5px 11px);
}
#field[data-deco="16"] .band-b {
  background-image: radial-gradient(circle, #000 0 0.9px, #fff 0.9px);
  background-size: 3px 3px;
}
#field[data-deco="16"] .band-c {
  background-image: repeating-linear-gradient(0deg, #000 0 2px, #fff 2px 7px);
}

#field[data-deco="17"] .band-a {
  background-image: repeating-linear-gradient(
    0deg, #000 0 1px, #fff 1px 4px, #000 4px 7px, #fff 7px 9px);
}
#field[data-deco="17"] .band-b {
  background-image: repeating-linear-gradient(90deg, #000 0 3px, #fff 3px 8px);
}
#field[data-deco="17"] .band-c {
  background-image: repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 5px);
}

#field[data-deco="18"] .band-a {
  background-image: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
  background-size: 16px 16px;
}
#field[data-deco="18"] .band-b {
  background-image:
    repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 8px),
    repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 8px);
}
#field[data-deco="18"] .band-c {
  background-image: repeating-linear-gradient(90deg, #000 0 1px, #fff 1px 4px);
}

#field[data-deco="19"] .band-a {
  background-image: repeating-linear-gradient(
    135deg, #000 0 2px, #fff 2px 6px, #000 6px 8px, #fff 8px 14px);
}
#field[data-deco="19"] .band-b {
  background-image:
    linear-gradient(135deg, #000 25%, transparent 25%),
    linear-gradient(225deg, #000 25%, transparent 25%),
    linear-gradient(315deg, #000 25%, transparent 25%),
    linear-gradient(45deg, #000 25%, transparent 25%);
  background-position: -4px 0, -4px 0, 0 0, 0 0;
  background-size: 8px 8px;
}
#field[data-deco="19"] .band-c {
  background-image: radial-gradient(circle, #000 0 1.3px, #fff 1.3px);
  background-size: 6px 6px;
}

#field[data-deco="20"] .band-a {
  background-image: repeating-linear-gradient(90deg, #000 0 6px, #fff 6px 13px);
}
#field[data-deco="20"] .band-b {
  background-image: repeating-linear-gradient(0deg, #000 0 1px, #fff 1px 3px);
}
#field[data-deco="20"] .band-c {
  background-image:
    repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 5px),
    repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 5px);
}

#panel { background: #fff; padding: calc(12 * var(--u)); }

/* ---- the square -------------------------------------------------------- */

/* The markers stand before the word they read, so their gutters are on the
   left and on the top. The empty third track answers them, and the black
   square keeps the middle of its white panel. */
/* The middle track holds to its content and the whole cross is centered:
   an auto track would drink the free width whenever the slip below is
   wider than the square, and the black grid would stretch with it. */
#board {
  display: grid;
  grid-template-columns: var(--mark) min-content var(--mark);
  grid-template-rows: var(--mark) min-content var(--mark);
  justify-content: center;
  align-content: center;
}

#grid {
  grid-area: 2 / 2;
  display: grid;
  grid-template-columns: repeat(3, var(--tile));
  grid-template-rows: repeat(3, var(--tile));
  gap: var(--rule);
  background: #000;
  border: var(--rule) solid #000;
}

/* The 4x4 squares of set 2: the tile shrinks so that four of them cover
   exactly what three large ones do, and the window keeps its size. */
#board[data-size="4"] { --tile: calc(38 * var(--u)); }
#board[data-size="4"] #grid {
  grid-template-columns: repeat(4, var(--tile));
  grid-template-rows: repeat(4, var(--tile));
}

.cell {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: #fff;
  /* The tile letters were riding the browser's default button font, which
     happened to be this: written down so every browser draws the same
     square, plain letter. */
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--tile) * 0.62);
  font-weight: 700;
  line-height: 1;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The middle letter is pinned: a fine dot screen says so. */
.cell.fixed {
  background-image: radial-gradient(circle, #000 0 0.7px, #fff 0.7px);
  background-size: 4px 4px;
}

.cell.picked { background: #000; color: #fff; background-image: none; }

/* One cell of the title turned to reverse video by the launch animation:
   the white ring it casts eats the black rules around it, so its borders
   invert with it. */
.cell.neg {
  background: #000;
  color: #fff;
  background-image: none;
  box-shadow: 0 0 0 var(--rule) #fff;
}

@media (hover: hover) {
  .cell:not(.fixed):hover {
    background-image: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
    background-size: 4px 4px;
  }
  .cell.picked:hover { background: #000; background-image: none; }
}

/* The launch board spells the title, it is not played: its cells answer
   neither hover nor click. */
#app-tablet[data-stage="splash"] .cell { pointer-events: none; }

#board.solved .cell {
  background: #000;
  color: #fff;
  background-image: none;
  box-shadow: 0 0 0 var(--rule) #fff;
}

/* ---- markers ----------------------------------------------------------- */

/* One marker per row or column, however many the board has: the tracks
   flow on their own, one per marker, sharing the space evenly. */
.marks { display: grid; }
.marks-row {
  grid-area: 2 / 1;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  padding: var(--rule) 0;
  gap: var(--rule);
}
.marks-col {
  grid-area: 1 / 2;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 0 var(--rule);
  gap: var(--rule);
}

/* Off is opacity, not visibility: a child set visibility:visible would
   shine through the ghosted board on the level card. */
.marks i {
  align-self: center;
  justify-self: center;
  width: 0;
  height: 0;
  opacity: 0;
}
.marks i.on { opacity: 1; }

.marks-row i {
  border-top: calc(5 * var(--u)) solid transparent;
  border-bottom: calc(5 * var(--u)) solid transparent;
  border-left: calc(8 * var(--u)) solid #000;
}
.marks-col i {
  border-left: calc(5 * var(--u)) solid transparent;
  border-right: calc(5 * var(--u)) solid transparent;
  border-top: calc(8 * var(--u)) solid #000;
}

#prompt {
  margin: 0;
  font-size: calc(14.5 * var(--u));
  line-height: 1.45;
  text-align: center;
}

/* ---- the level card ---------------------------------------------------- */

/* Two framed groups, one per set, each holding its ten levels five to a
   row, centered over the room the game keeps. Only what has been reached
   is clickable. */
#levels {
  grid-row: 1;
  grid-column: 1;
  place-self: center;
  display: grid;
  gap: calc(20 * var(--u));
}

#levels[hidden] { display: none; }

/* The frame of a set, its name let into the top edge like a legend. */
.level-set {
  position: relative;
  border: calc(2 * var(--u)) solid #000;
  border-radius: calc(14 * var(--u));
  padding: calc(16 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
}

.set-name {
  position: absolute;
  top: calc(-9 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 0 calc(8 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: calc(2 * var(--u));
  white-space: nowrap;
}

.set-grid {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: calc(12 * var(--u)) calc(10 * var(--u));
}

.level-btn {
  position: relative;
  appearance: none;
  font: inherit;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  color: #000;
  background: #fff;
  border: calc(2 * var(--u)) solid #000;
  border-radius: calc(8 * var(--u));
  padding: calc(3 * var(--u)) calc(11 * var(--u));
}

.level-btn:not(:disabled):hover { background: #000; color: #fff; }

/* A white checker laid over a locked button eats half its pixels, border
   included: the dimmed control of the old Mac, drawn through a pattern. */
.level-btn.locked::after {
  content: '';
  position: absolute;
  inset: calc(-2 * var(--u));
  border-radius: calc(8 * var(--u));
  background-image: repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%);
  background-size: 2px 2px;
}

/* The password is written in capitals, as it is printed at victory; the
   dialog input of the system sheet carries no case of its own. */
#pw-input { text-transform: uppercase; }