/* games/nonogram.html: what only the Nonogram page needs (the page: board-game.css, the board: ../nonogram-board.css). */
.hero{background:linear-gradient(135deg,rgba(240,165,0,.18),var(--card) 60%)}
.hero .sub{color:var(--accent)}
#v-home h2{margin-top:22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#v-home > .muted{margin:-6px 0 12px;font-size:13px}
.levels .choice{position:relative}
.choice .state{font-style:normal;font-size:12px;font-weight:700;color:var(--green);margin-top:4px}
.choice .state:empty{display:none}
.streak{font-size:13px;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:1px 10px}
#v-home .choices + .choices{margin-top:12px}

.ng-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.ng-head h2{margin:0}
.ng-time{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--muted)}
.ng-time.done{color:var(--green)}
.ng-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tool[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#04130a}
.ng-tip{flex:1 1 200px}
/* The board fits the page; a big one on a phone is wider than its frame. With a mouse the frame
   scrolls sideways; on a touch screen two fingers zoom and move the board (js/games/nonogram.js:
   setZoom), and no finger on the board scrolls the page. */
.ng-scroll{position:relative;overflow-x:auto;padding-bottom:4px}
#board{width:max-content;min-width:min(100%,640px);max-width:640px;margin:0 auto;transform-origin:0 0;touch-action:none}
@media (pointer:coarse){.ng-scroll{overflow:hidden;padding-bottom:0}}
.ng-scroll.zoomed{outline:2px solid var(--accent);outline-offset:-2px}

.side-list{list-style:none;display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:14px;font-variant-numeric:tabular-nums}
.side-list li{display:grid;grid-template-columns:2.2em 1fr auto;gap:6px;color:var(--muted)}
.side-list li.you{color:var(--text);font-weight:700}
.side-list b{color:var(--text)}
#side-body p{color:var(--muted);font-size:13px;margin-top:8px}
.side-list .title{font-size:15px;font-weight:900;color:var(--purple)}