/* =====================================================================
   Potting Shed: a garden shed's whitewashed planks, a brick floor, wooden
   benches, terracotta. The cards are seed packets (a printed paper
   packet with a coloured band), the buttons painted tin labels.
   ===================================================================== */

:root {
  --plank: #e9e2d0;
  --plank-line: #cfc4a8;
  --wood: #6e4a2c;
  --wood-hi: #8a603b;
  --terra: #c9663d;
  --terra-deep: #8e3e1f;
  --leaf: #4f7d34;
  --ink: #2f2418;
  --ink-dim: #6a5a44;
  --packet: #f7efd9;
  --band: #4f7d34;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Nunito Sans", system-ui, sans-serif; color: var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 63px, var(--plank-line) 63px 65px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.025) 0 1px, transparent 1px 9px),
    var(--plank);
  overflow: hidden;
}
.nav-back-games {
  position: fixed; top: 16px; left: 18px; z-index: 50;
  font-family: inherit; font-size: 15px; font-weight: 800;
  color: var(--packet); text-decoration: none;
  background: var(--leaf); border: 2px solid #2f4f1e; border-radius: 6px;
  box-shadow: 0 2px 0 #2f4f1e;
  padding: 6px 14px;
}
.nav-back-games:hover { filter: brightness(1.1); }

.shed { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 60px 14px 12px; gap: 10px; }
.hud {
  display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap;
  font-weight: 600; font-size: 15px; color: var(--ink-dim);
  background: var(--packet); border: 2px solid var(--ink); border-radius: 6px; padding: 5px 14px;
  box-shadow: 0 2px 0 var(--ink);
}
.hud[hidden] { display: none; }
.hud-shed { font-family: "Alfa Slab One", serif; color: var(--terra-deep); font-size: 16px; }
.hud b { font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.yard { flex: 1; width: 100%; max-width: 760px; min-height: 160px; position: relative; }
.yard canvas { position: absolute; left: 0; top: 0; display: block; touch-action: none; }
/* paused (game.js): the shed out of sight while its clock is held, so a pause is no free look */
body.paused .yard canvas { visibility: hidden; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tools button, .card .row button {
  font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; color: var(--packet);
  background: var(--wood); border: 2px solid #3e2814; border-radius: 6px; padding: 6px 12px;
  box-shadow: 0 2px 0 #3e2814;
}
.tools button:active, .card .row button:active { transform: translateY(2px); box-shadow: none; }
.keys { font-size: 13px; color: var(--ink-dim); text-align: center; }
kbd { font-family: inherit; font-size: 12px; font-weight: 800; color: var(--packet); background: var(--ink); border-radius: 4px; padding: 0 5px; margin: 0 1px; }

/* the touch pad (a touch-only screen) */
.pad { display: none; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 50px); gap: 6px; }
.pad button { font-size: 20px; color: var(--packet); background: var(--wood); border: 2px solid #3e2814; border-radius: 10px; touch-action: manipulation; }
.pad .up { grid-area: 1 / 2; } .pad .left { grid-area: 2 / 1; } .pad .undo { grid-area: 2 / 2; background: var(--terra); }
.pad .right { grid-area: 2 / 3; } .pad .down { grid-area: 3 / 2; }
@media (hover: none) { .pad { display: grid; } }

/* ---- the cards: seed packets ------------------------------------------------------- */
.panel { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 26px 16px; overflow-y: auto; background: rgba(47, 36, 24, 0.35); }
.panel[hidden] { display: none; }
.panel > .card { margin: auto; }
.card {
  width: min(450px, 100%); background: var(--packet); border: 2px solid var(--ink); border-radius: 4px;
  box-shadow: 6px 8px 0 rgba(47, 36, 24, 0.35);
  padding: 0 22px 18px; overflow: hidden;
}
.card::before { content: ""; display: block; height: 16px; margin: 0 -22px 16px; background: repeating-linear-gradient(90deg, var(--band) 0 14px, #6a9a46 14px 28px); border-bottom: 2px solid var(--ink); }
.card h1, .card h2 { font-family: "Alfa Slab One", serif; font-weight: 400; color: var(--terra-deep); }
.card h1 { font-size: 36px; }
.card h2 { font-size: 30px; }
.card .tag { font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 12.5px; color: var(--leaf); margin: 4px 0 10px; }
.card .how { font-size: 15.5px; line-height: 1.5; margin-bottom: 14px; }
.pick-shed { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin-bottom: 12px; background: #efe4c6; border: 2px dashed var(--ink-dim); border-radius: 4px; min-height: 96px; }
.pick-shed canvas { flex: none; }
.pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick-text b { font-family: "Alfa Slab One", serif; font-weight: 400; font-size: 19px; color: var(--ink); }
.pick-text small { font-size: 13px; color: var(--ink-dim); }
.playbtn, .card .row #next {
  font-family: "Alfa Slab One", serif; font-weight: 400; color: var(--packet); background: var(--terra); border-color: var(--terra-deep); box-shadow: 0 3px 0 var(--terra-deep);
}
.playbtn { width: 100%; font-size: 21px; padding: 9px 12px; cursor: pointer; border: 2px solid var(--terra-deep); border-radius: 6px; }
.playbtn:active { transform: translateY(2px); box-shadow: none; }
.tally { margin-top: 10px; text-align: center; font-size: 14px; color: var(--ink-dim); min-height: 18px; }
/* the list of sheds: wooden plant labels, a potted one with a flower in its
   corner, a locked one weathered pale; beside the rest on a wide screen */
.sheds { margin-top: 14px; }
.card .sheds-k { font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.shedgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tile {
  position: relative; height: 38px; padding: 0; cursor: pointer;
  font-family: "Alfa Slab One", serif; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--packet);
  background: var(--wood); border: 2px solid #3e2814; border-radius: 6px; box-shadow: 0 2px 0 #3e2814;
}
.tile:active { transform: translateY(2px); box-shadow: none; }
.tile.potted::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #f2c230; box-shadow: 0 0 0 1.5px #8a4a12; }
.tile.current { outline: 3px solid var(--terra); outline-offset: 1px; }
.tile.locked { color: #f4ecd8; background: #b9a888; border-color: #8c7a5c; box-shadow: 0 2px 0 #8c7a5c; cursor: not-allowed; }
.tile.nope { animation: ps-nope 0.3s ease; }
html.fx-off .tile.nope { animation: none; }
@keyframes ps-nope { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.lock-note { min-height: 18px; margin-top: 8px; text-align: center; font-size: 13px; font-weight: 600; color: var(--terra-deep); }
/* sheds of your own (from the editor): a label each, the list scrolling past a few rows */
.mine { margin-top: 6px; }
.minelist { display: flex; flex-wrap: wrap; gap: 6px; max-height: 92px; overflow-y: auto; padding: 2px; }
.tile.mine-tile { height: 36px; max-width: 100%; padding: 0 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--leaf); border-color: #2f4f1e; box-shadow: 0 2px 0 #2f4f1e; }
/* the shed editor's door: a painted tin label like the shed's own buttons */
.build {
  display: block; margin-top: 10px; text-align: center; text-decoration: none; cursor: pointer;
  font-size: 15px; font-weight: 800; color: var(--packet);
  background: var(--wood); border: 2px solid #3e2814; border-radius: 6px; padding: 6px 12px; box-shadow: 0 2px 0 #3e2814;
}
.build:active { transform: translateY(2px); box-shadow: none; }
@media (min-width: 760px) {
  .card.menu { width: min(820px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .card.menu::before { grid-column: 1 / -1; }
  .card.menu .sheds { margin-top: 6px; }
}
.card.end { text-align: center; }
.card .big { font-family: "Alfa Slab One", serif; font-size: 36px; margin: 4px 0; }
.card .stats { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0 16px; color: var(--ink-dim); }
.stats .time { font-weight: 800; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
/* the fewest moves and the fastest time, side by side where they fit */
.stats .bests { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; }
.stats .best { font-weight: 800; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 14px; background: #efe4c6; color: var(--ink); }
.stats .best.record { background: #f2c230; }
/* Again and Sheds side by side, the next shed across the row under them */
.card .row { display: grid; grid-template-columns: auto auto; gap: 10px; justify-content: center; }
.card .row #next { grid-column: 1 / -1; }

@media (max-width: 520px) {
  .shed { padding-top: 58px; gap: 8px; }
  .hud { gap: 10px; font-size: 13px; padding: 4px 10px; }
  .hud-shed { font-size: 14px; }
  .panel { padding-top: 62px; }
  .card h1 { font-size: 30px; }
  .card .how { font-size: 14.5px; line-height: 1.45; margin-bottom: 12px; }
  .pick-shed { gap: 8px; min-height: 80px; padding: 6px 8px; margin-bottom: 10px; }
  .playbtn { padding: 8px 12px; }
  .tally { margin-top: 8px; }
  .sheds { margin-top: 10px; }
  .tile { height: 36px; }
}
/* a phone: the sheds in a box that scrolls, as tall as leaves the whole
   menu on the screen (--fit, game.js), from two and a half rows up to all
   five (down to one and a half while a locked shed's line shows); room in
   it for the rings round a tile. Sheds of your own in a strip that scrolls
   sideways */
@media (max-width: 520px) {
  #menu .shedgrid { overflow-y: auto; overscroll-behavior: contain; padding: 5px; margin: 3px -5px -5px; min-height: 102px; max-height: min(214px, var(--fit, 214px)); }
  #menu .sheds.noting .shedgrid { min-height: 56px; }
  #menu .mine:not([hidden]) { display: flex; align-items: center; gap: 8px; }
  #menu .mine .sheds-k { flex: none; margin-bottom: 0; }
  #menu .minelist { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; max-height: none; padding: 5px; margin: -5px 0; }
  #menu .minelist .tile { flex: none; }
}
/* a phone short of room: the menu closer set, and the line saying why a
   shed is locked taking room only while it shows */
@media (max-width: 520px) and (max-height: 700px) {
  #menu.panel { padding: 58px 10px 8px; }
  #menu .card { padding-bottom: 8px; }
  #menu .card::before { margin-bottom: 6px; }
  #menu .card h1 { font-size: 22px; }
  #menu .card .tag { margin: 2px 0 4px; }
  #menu .card .how { font-size: 12.5px; line-height: 1.33; margin-bottom: 8px; }
  #menu .pick-shed { min-height: 0; padding: 4px 8px; margin-bottom: 8px; }
  #menu .pick-text b { font-size: 17px; }
  #menu .pick-text small { font-size: 12.5px; line-height: 1.3; }
  #menu .playbtn { padding: 5px 8px; }
  #menu .tally { margin-top: 6px; }
  #menu .tally:empty { display: none; }
  #menu .sheds { margin-top: 6px; }
  #menu .build { padding: 3px 10px; font-size: 14px; }
  #menu .lock-note { margin-top: 6px; }
  #menu .lock-note:empty { min-height: 0; margin-top: 0; }
  #menu .mine { margin-top: 5px; }
  #menu .minelist .tile { height: 32px; }
}
/* a touch phone: Pot this shed and Build a shed side by side, and the
   count of sheds potted beside the list's name */
@media (max-width: 520px) and (hover: none) {
  #menu .card.menu {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center;
    grid-template-areas: "band band" "h1 h1" "tag tag" "how how" "pick pick" "play build" "head head" "box box" "note note" "mine mine";
  }
  #menu .card.menu::before { grid-area: band; }
  #menu .intro, #menu .sheds { display: contents; }
  #menu .card h1 { grid-area: h1; }
  #menu .card .tag { grid-area: tag; }
  #menu .card .how { grid-area: how; }
  #menu .pick-shed { grid-area: pick; }
  #menu .playbtn { grid-area: play; font-size: 19px; }
  #menu .build { grid-area: build; align-self: stretch; display: flex; align-items: center; justify-content: center; margin: 0; }
  #menu #sheds-k { grid-area: head; justify-self: start; margin: 6px 0 0; }
  #menu .tally { grid-area: head; justify-self: end; min-height: 0; margin: 6px 0 0; font-size: 12.5px; }
  #menu .shedgrid { grid-area: box; }
  #menu .lock-note { grid-area: note; }
  #menu .mine { grid-area: mine; }
}
@media (max-width: 380px) and (hover: none) {
  #menu .playbtn { font-size: 18px; }
}
/* the narrowest phones: the card closer to the edges, so six tiles a row
   stay big enough to tap */
@media (max-width: 380px) {
  .panel { padding-left: 10px; padding-right: 10px; }
  .card { padding: 0 14px 16px; }
  .card::before { margin: 0 -14px 14px; }
  .shedgrid { gap: 5px; }
}

.gs-pause { background: rgba(47, 36, 24, 0.4); }