/* Nonograms: the board, its tools and the picture gallery. Chrome comes from classics.css. */
.nono{--cell:#fbf9f4;--band:#efeadf;max-width:1240px}

/* Mode bar: modes on the left, the mode's own choice on the right. */
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:22px}
.back{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 6px 0 2px;font-size:15px;font-weight:600;text-decoration:none;color:var(--ink-2)}
.back:hover{color:var(--ink)}
.back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sizes button{min-width:40px;font-variant-numeric:tabular-nums}
.bar .sizes{margin-left:auto}
#new-endless{min-height:40px;padding:8px 12px}
#new-endless svg{display:none}

/* Play: the board is the hero; status, tools and the result sit in a rail on wide screens. */
.play{display:grid;grid-template-columns:minmax(0,1fr) 272px;grid-template-areas:"board status" "board tools" "board done" "board .";grid-template-rows:auto auto auto 1fr;column-gap:40px;align-items:start}
.status{grid-area:status;display:flex;flex-direction:column;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.status h2{font-size:30px;font-weight:800;font-stretch:90%;letter-spacing:-.03em;line-height:1}
.status p{margin-top:6px;color:var(--muted);font-size:15px}
.timer{font-size:44px;font-weight:800;font-stretch:85%;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.timer.paused{color:var(--muted)}

.board-area{grid-area:board;position:relative;display:flex;justify-content:center;min-width:0}
#board{display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:4px}
#board:focus-visible{outline:2px solid var(--red);outline-offset:6px}

.tools{grid-area:tools;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:18px 0}
.tool button{display:inline-flex;align-items:center;gap:7px;padding:6px 16px 6px 12px}
.tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.tool svg .solid{fill:currentColor;stroke:none}
.tool-btns{display:flex;gap:4px;margin-left:-8px}
.tool-btns .btn[aria-pressed=true]{background:var(--ink);color:var(--paper)}

/* Result: the picture's name, the time and what to do next. */
.done{grid-area:done;padding:20px 0 0;border-top:2px solid var(--ink)}
.done-kicker{font-size:14px;font-weight:700;color:var(--red-ink)}
.done h3{margin-top:2px;font-size:34px;font-weight:800;font-stretch:90%;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
.done-line{margin-top:8px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.done-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.done-in .done h3,.done-in .done-line,.done-in .done-actions{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.done-in .done-line{animation-delay:.08s}.done-in .done-actions{animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* Gallery: every picture, by size. Found ones show themselves; the rest stay a blank grid. */
.gallery-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.gallery-head h2{font-size:30px;font-weight:800;font-stretch:90%;letter-spacing:-.03em}
.gallery-head p{color:var(--muted);font-variant-numeric:tabular-nums}
.group{margin-top:30px}
.group-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.group-head h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.group-head span{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:20px 16px}
.tile{display:block;text-decoration:none;color:inherit}
.tile-art{position:relative;aspect-ratio:1;border-radius:10px;background:var(--cell);box-shadow:inset 0 0 0 1px var(--rule);display:grid;place-items:center;overflow:hidden;transition:box-shadow .15s,transform .15s}
.tile:hover .tile-art{box-shadow:inset 0 0 0 2px var(--ink)}
.tile-art svg{width:72%;height:72%;shape-rendering:crispEdges}
.tile-art .grid-lines{stroke:#e3ddd0;stroke-width:1;vector-effect:non-scaling-stroke}
.tile-art .grid-five{stroke:#cbc3b4;stroke-width:1;vector-effect:non-scaling-stroke}
.tile-art .grid-edge{stroke:#b9b1a2;stroke-width:1.5;vector-effect:non-scaling-stroke}
.tile-name{margin-top:8px;font-size:15px;font-weight:600;line-height:1.25}
.tile-sub{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.tile.found .tile-art{background:var(--paper)}
.tile.going .tile-sub{color:var(--red-ink)}

/* The shared toast shrinks to half the screen (left:50%) and wraps; keep it one line here. */
.cl-toast{width:max-content;max-width:calc(100vw - 32px);text-align:center}

/* Dialog extras. */
.dlg-sub{margin-top:22px;font-size:15px;font-weight:700}
.keys{display:grid;gap:8px;margin-top:10px}
.keys div{display:grid;grid-template-columns:92px 1fr;gap:12px}
.keys dt{font-weight:600}.keys dd{color:var(--ink-2)}
.size-table{width:100%;margin-top:20px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.size-table th{text-align:left;font-size:13px;font-weight:600;color:var(--muted);padding:0 8px 6px 0}
.size-table td{padding:9px 8px 9px 0;border-top:1px solid var(--rule)}
.size-table td:first-child{font-weight:700}
.size-table th:not(:first-child),.size-table td:not(:first-child){text-align:right}

@media(max-width:959px){
  .play{grid-template-columns:minmax(0,1fr);grid-template-areas:"status" "board" "tools" "done";grid-template-rows:none}
  .status{flex-direction:row;align-items:flex-end;justify-content:space-between;padding-bottom:12px;margin-bottom:14px}
  .status h2{font-size:24px}.status p{font-size:14px;margin-top:4px}
  .timer{font-size:30px}
  .tools{flex-direction:row;align-items:center;justify-content:space-between;padding:14px 0 4px}
  .tool-btns{margin-left:0}
  .done{margin-top:12px;padding-top:16px}
  .done h3{font-size:28px}
}
@media(max-width:640px){
  .bar{margin-bottom:14px;gap:8px}
  .bar .sizes{margin-left:0}
  #new-endless{width:40px;padding:0}
  #new-endless span{display:none}
  #new-endless svg{display:block}
  .modes button{padding:6px 12px}
  .sizes button{min-width:34px;padding:6px 8px}
  .tool button{padding:6px 12px 6px 10px}
  .tool button span{font-size:14px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:16px 12px}
  .tile-name{font-size:14px}
}
@media(max-width:380px){
  .tool button span{display:none}
  .tool button{padding:6px 12px}
  .sizes button{min-width:30px;padding:6px 7px}
}