/* Winesweeper: the look of a 1990s Windows game window. Grey face, white and grey bevels, navy title bar. */
:root { --face: #c0c0c0; --hi: #ffffff; --lo: #808080; --dk: #000000; --desk: #008080; --cell: min(36px, calc((100vw - 76px) / 9)); --z: 1; }
/* Laptops and bigger: the whole window grows evenly, as far as the screen height allows. Phones are untouched. */
@media (min-width: 900px) and (min-height: 760px) { :root { --z: 1.3; } }
@media (min-width: 1100px) and (min-height: 1000px) { :root { --z: 1.5; } }
html { zoom: var(--z); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--desk); }
body { background: var(--desk); font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-size: 15px; color: #000;
       min-height: calc(100vh / var(--z)); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px;
       -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a { color: #000080; }
button { font: inherit; color: inherit; }

.raised { border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); }
.raised6 { border: 3px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); }
.sunk { border: 3px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }

.window { background: var(--face); border: 2px solid; border-color: var(--face) var(--dk) var(--dk) var(--face);
          box-shadow: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo); padding: 4px; max-width: 100%; }
.title { height: 26px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; display: flex; align-items: center;
         gap: 6px; padding: 0 3px 0 6px; font-weight: bold; font-size: 15px; }
.title .ico { display: flex; }
.title .name { flex: 1; white-space: nowrap; }
.tb { width: 20px; height: 18px; background: var(--face); border: 1.5px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi);
      color: #000; font-size: 14px; line-height: 14px; text-align: center; font-weight: bold; cursor: pointer; }
.menu { display: flex; gap: 16px; padding: 5px 6px 6px; }
.menu a { color: #000; text-decoration: none; }
.menu u { text-decoration: underline; text-underline-offset: 2px; }

.game { padding: 7px; }
.panel { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; margin-bottom: 7px; }
.face { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--face); cursor: pointer; }
.face:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); }

.boardwrap { position: relative; width: fit-content; }
.under { position: absolute; inset: 0; container-type: size; z-index: 0; }  /* own layer: nothing in the deal can rise above the board */
.board { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(9, var(--cell)); touch-action: manipulation; }
.c { width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center; background: var(--face);
     border: 3px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); cursor: pointer; }
.c.open { border: 0; border-right: 1px solid var(--lo); border-bottom: 1px solid var(--lo); cursor: default; background: rgba(255, 255, 255, 0.6); }
.c.mine { background: var(--face); }
.c.press { border: 0; border-right: 1px solid var(--lo); border-bottom: 1px solid var(--lo); }
.c.hit { background: #ff0000; }
.board.won .c { background: transparent; border-color: transparent; }
.board.won .c > * { visibility: hidden; }

.status { display: flex; margin-top: 4px; }
.status div { flex: 1; padding: 3px 6px; border: 1.5px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); font-size: 13px; line-height: 1.35; }

#win { width: min-content; }  /* the window hugs the board; the status line wraps */
.dialog { width: min(420px, 100%); }
.dialog .body { padding: 12px 10px 10px; line-height: 1.45; }
.dialog .body p + p { margin-top: 8px; }
.dialog .share { display: flex; flex-direction: column; gap: 8px; }
.dialog .share .btn { justify-content: center; text-decoration: none; }
.dialog .share p:empty { display: none; }
.actions { display: flex; gap: 10px; }
.where { max-width: min(420px, calc(100vw - 32px)); margin: 0; text-align: center; color: #fff; font-size: 15px; line-height: 1.4; }
.where[hidden] { display: none; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--face); color: #000; font-size: 16px;
       text-decoration: none; cursor: pointer; border: 2px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi);
       box-shadow: inset -2px -2px 0 var(--lo), inset 2px 2px 0 #dfdfdf; }
.btn:active { border-color: var(--dk) var(--hi) var(--hi) var(--dk); box-shadow: inset 2px 2px 0 var(--lo); }
.btn[hidden] { display: none; }
.tip { gap: 8px; }

/* The day's deal: a yellow shelf ticket. Container units, so it fills the board or the deal page alike. */
.card { width: 100%; height: 100%; background: #ffff9c; position: relative; overflow: hidden; padding: 6cqw 6cqw;
        display: flex; flex-direction: column; color: #000; }
.cshop { font-weight: bold; font-size: 7cqw; color: #000080; }
.cwine { font-weight: bold; font-size: 8.4cqw; line-height: 1.12; margin-top: 2cqw; max-width: 78%; }
.cprice { font-weight: bold; font-size: 24cqw; line-height: 1; color: #d00000; margin-top: auto; letter-spacing: -0.5cqw; }
.cwas { font-size: 6.6cqw; margin-top: 2cqw; }
.crate { font-size: 6.6cqw; font-weight: bold; margin-top: 1cqw; }
.cbottle { position: absolute; right: 3cqw; bottom: 4cqw; width: 30cqw; }
.cbottle svg { width: 100%; height: auto; }

/* Option: a picture. Wine red ground, a big bottle, the price on a burst. */
.card.pic { background: #8a1c2b; padding: 0; color: #fff; }
.pbottle { position: absolute; left: 8cqw; top: 6cqw; width: 30cqw; }
.pbottle svg, .sbottle svg { width: 100%; height: auto; }
.pstar { position: absolute; right: 4cqw; top: 10cqw; width: 56cqw; }
.pstar svg { width: 100%; height: auto; display: block; }
.pname { position: absolute; left: 44cqw; right: 4cqw; top: 64cqw; bottom: 13cqw; font-weight: bold; font-size: 6.4cqw; line-height: 1.12;
         overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.pfoot { position: absolute; left: 0; right: 0; bottom: 0; background: #000; color: #ffff00; font-size: 5cqw; font-weight: bold; padding: 2.5cqw 4cqw; }

/* Option: a supermarket shelf edge label. White ticket, red offer band. */
.card.shelf { background: #fff; padding: 0; }
.sband { background: #d00000; color: #fff; font-weight: bold; font-size: 8cqw; padding: 3cqw 5cqw; }
.sbody { padding: 4cqw 5cqw; max-width: 72%; }
.swine { font-weight: bold; font-size: 7.6cqw; line-height: 1.12; }
.sprice { font-weight: bold; font-size: 22cqw; line-height: 1; margin-top: 5cqw; letter-spacing: -0.5cqw; }
.swas { font-size: 6.6cqw; margin-top: 2cqw; }
.srate { font-size: 6.6cqw; font-weight: bold; margin-top: 1cqw; }
.sbottle { position: absolute; right: 5cqw; bottom: 5cqw; width: 24cqw; }

/* Option: the photo as hero. A plain studio backdrop, the bottle filling the height, quiet text beside it. */
.card.hero { padding: 0; background: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hbottle { position: absolute; left: 5cqw; top: 5cqw; bottom: 5cqw; width: 40cqw; }
.hbottle::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1.5cqw; height: 4cqw; border-radius: 50%;
                  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.28), transparent); z-index: -1; }
.hbottle svg { width: 100%; height: 100%; }
.hbottle img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; }
.htext { position: absolute; left: 49cqw; right: 4cqw; top: 6cqw; bottom: 6cqw; color: #222; display: flex; flex-direction: column; }
.hscore { font-size: 18cqw; font-weight: 800; line-height: 0.85; color: #7a1020; letter-spacing: -0.04em; }
.hstar { width: 26cqw; height: auto; display: block; margin-top: 1.5cqw; }
.hcount { font-size: 4.4cqw; line-height: 1.25; color: #444; margin-top: 1.5cqw; }
.hrare { font-size: 4.2cqw; line-height: 1.3; font-weight: 600; color: #111; margin: 3cqw 0 0; }
.hline { font-size: 3.8cqw; line-height: 1.3; color: #555; margin-top: 1.5cqw; }
.hname { margin-top: auto; padding-top: 3cqw; font-weight: 600; font-size: 4.8cqw; line-height: 1.15; -webkit-line-clamp: 2; letter-spacing: -0.01em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.hprice { font-weight: 700; font-size: 9cqw; line-height: 1; margin-top: 1.5cqw; color: #111; letter-spacing: -0.03em; }
.hprice span { white-space: nowrap; font-size: 4cqw; font-weight: 400; color: #555; letter-spacing: 0; }
.hprice { display: flex; align-items: center; flex-wrap: wrap; column-gap: 2.5cqw; }
.hprice .hshop { display: inline-flex; flex: 1; min-width: 0; letter-spacing: 0; }
.hshop img { height: 9cqw; width: 100%; max-width: 22cqw; object-fit: contain; object-position: left center; }
.hshop b { font-size: 5cqw; color: #111; }
.hsmall { font-size: 4.6cqw; line-height: 1.35; margin-top: 2.5cqw; color: #555; }

.pbottle img, .sbottle img, .cbottle img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; }
.pbottle.photo { top: 5cqw; bottom: 12cqw; width: 34cqw; left: 5cqw; filter: drop-shadow(0 0 2.5cqw rgba(255, 255, 220, 0.55)); }
.sbottle.photo { top: 22cqw; height: auto; width: 26cqw; }
.cbottle.photo { top: 34cqw; width: 22cqw; }
.card .cprice { position: relative; z-index: 1; }

.dealpage { width: min(420px, 100%); }
.dealbox { aspect-ratio: 1; container-type: size; margin: 4px; }

/* Past deals: one page a day that stays up (tools/archive.py). */
.title h1.name { font-size: inherit; font-weight: inherit; }
.past { list-style: none; margin-top: 10px; }
.past li + li { border-top: 1px solid var(--lo); }
.past a { display: block; padding: 10px 2px; color: #000; text-decoration: none; }

/* Laptops: "How to play" opens beside the board instead of below it. The window stays where it is. */
.stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; }
.boardrow { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; }
.side { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
/* Laptops: How to play pops up beside the board. Once a game ends (.done): Take me to the wine and the shelf line
   go top right, the Friday email bottom right, level with the board's bottom, and the result window with Share under
   the board (Si, 29 Oct). Before that, Solve and Take me to the wine sit under the board. Phones keep one column. */
@media (min-width: 1000px) {
  .stage #how, .stage.done .side, .stage.done #mail { position: absolute;
                 width: max(260px, min(340px, calc((100vw / var(--z) - 100%) / 2 - 40px))); }
  .stage #how, .stage.done .side { top: 0; left: calc(100% + 24px); }
  .stage.done #mail { bottom: 0; left: calc(100% + 24px); }
  .stage.done .side { align-items: stretch; }
  .stage.done .side #how { position: static; width: auto; }
  .stage.done .side .actions { justify-content: flex-start; gap: 12px; }
  .stage.done .side #go { flex: 1; justify-content: center; } /* button and arrow fill the column, edges level with the email box */
  .stage.done .side .where { text-align: left; }
}

/* Footer on every page, the Friday email signup and the next board line. */
.foot { margin-top: auto; padding-top: 24px; max-width: min(420px, calc(100vw - 32px)); text-align: center; color: #fff; font-size: 13px; line-height: 1.4; }
.foot a { color: #fff; }
.mailform { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mailform .age { flex-basis: 100%; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.mailform .age input { width: 18px; height: 18px; }
.mailform input[type=email] { flex: 1; min-width: 0; min-height: 44px; padding: 0 8px; font: inherit; font-size: 16px; background: #fff; }
.mailform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.mailform[hidden] { display: none; }
.dialog .small { font-size: 13px; color: #333; }
.dialog .small:empty { display: none; }
.page { width: min(560px, 100%); }
.page h2 { font-size: 15px; margin-top: 14px; }
.page .body p { margin-top: 6px; }

/* Past deals: one big board, a square a day (tools/archive.py). */
.wall { width: min(560px, 100%); }
.wallbox { padding: 8px; margin: 4px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--face); gap: 1px; }
.wk { text-align: center; font-size: 12px; color: #333; padding: 2px 0 4px; }
.mon { grid-column: 1 / -1; font-weight: 700; padding: 10px 2px 4px; }
.day { position: relative; aspect-ratio: 1; background: #fff; box-shadow: 0 0 0 1px var(--lo); display: flex; flex-direction: column; align-items: center; overflow: hidden; color: #000; text-decoration: none; }
.day .dn { align-self: stretch; font-size: 11px; line-height: 14px; padding: 0 3px; color: #555; }
.day img { flex: 1; min-height: 0; width: 86%; object-fit: contain; padding-bottom: 3px; }
.day .drawn { flex: 1; min-height: 0; display: flex; align-items: center; }
.day .drawn svg { height: 80%; width: auto; }
.day.covered { background: var(--face); border: 3px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); box-shadow: none; }
.day.covered .dn { color: #333; padding: 0 1px; line-height: 12px; }
.day.today svg { margin: auto; }
.day.none { background: #e4e4e4; }
a.day:hover { outline: 2px solid #000080; outline-offset: -2px; z-index: 1; }

/* After a game: Share and the next board time under the board. The Friday email has its own window. */
#result { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#result[hidden] { display: none; }
#next[hidden] { display: none; }
.left { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.left .dialog { width: min(420px, 100%); }
.btn .gobottle { display: inline-flex; margin-left: 6px; }
/* Laptops, once the game ends: a red arrow to the right of Take me to the wine (Si, 29 Oct). */
.goarrow { display: none; }
@media (min-width: 1000px) { .stage.done .goarrow { display: flex; align-items: center; } }
/* Phones: Share comes before the Friday email. */
@media (max-width: 999px) { .boardrow { display: contents; } .stage > .left { order: 1; } .boardrow > #mail { order: 2; } }