/* ====================================================================
   PaperSudoku — flat grayscale stylesheet for slow e-ink screens.
   One rule per line; solid fills only (no shadows, no gradients,
   no border-radius) so partial repaints stay cheap.
   Cell states: sel 909090, same c6c6c6, err d9d9d9 strikethrough.
   ==================================================================== */

* { margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body { background:#ffffff; color:#111111; font-family:Verdana, Geneva, sans-serif; -webkit-text-size-adjust:100%; }

.screen { max-width:560px; margin:0 auto; padding:8px 4px; }
.screen.hidden { display:none; }

/* ---------- start screen ---------- */
.masthead { border-top:4px solid #000000; border-bottom:1px solid #000000; padding:14px 0 10px 0; margin-top:8px; text-align:center; }
.logo { font-size:28px; font-weight:bold; letter-spacing:3px; line-height:1; }
.logo em { font-style:normal; display:inline-block; background:#000000; color:#ffffff; padding:0 5px; }
.tag { font-size:9px; letter-spacing:4px; margin-top:7px; }
.deco { margin-top:12px; display:table; width:100%; border-spacing:3px 0; table-layout:fixed; }
.deco span { display:table-cell; border:1px solid #000000; padding:4px 0; }
.mini-grid { margin:0 auto; border-collapse:collapse; background:#ffffff; }
.mini-grid td { width:13px; height:13px; text-align:center; font-size:9px; border:1px solid #9a9a9a; color:#4a4a4a; }
.mini-grid td:first-child { border-left:1px solid #3f3f3f; }
.mini-grid tr:first-child td { border-top:1px solid #3f3f3f; }

/* ---------- panel + difficulty ---------- */
.panel { border:1px solid #000000; margin-top:14px; padding:10px 8px; }
.panel-label { font-size:9px; letter-spacing:3px; font-family:'Courier New', monospace; margin-bottom:6px; }
.lvl-row { display:table; width:100%; border:1px solid #000000; margin-bottom:5px; padding:7px 8px; cursor:pointer; min-height:44px; }
.lvl-row b { display:table-cell; width:28px; font-size:19px; vertical-align:middle; }
.lvl-row .nm { display:table-cell; vertical-align:middle; font-size:15px; font-weight:bold; }
.lvl-row .er { display:table-cell; vertical-align:middle; text-align:right; font-size:10px; color:#4a4a4a; font-family:'Courier New', monospace; }
.lvl-row.on { background:#000000; color:#ffffff; }
.lvl-row.on .er { color:#b5b5b5; }

/* buttons: fill-first */
.btn { display:block; width:100%; background:#000000; color:#ffffff; border:2px solid #000000; font-family:Verdana, Geneva, sans-serif; font-size:14px; font-weight:bold; letter-spacing:2px; padding:11px 4px; min-height:46px; cursor:pointer; margin-top:8px; white-space:nowrap; overflow:hidden; -webkit-appearance:none; }
.btn.go { border-width:2px; }
.btn.alt { background:#ffffff; color:#111111; border-style:dashed; border-width:1px; font-weight:normal; }
.btn.on { background:#000000; color:#ffffff; }
.btn:disabled { background:#ffffff; color:#9a9a9a; border-color:#9a9a9a; }

.stat-line { margin-top:12px; font-size:11px; text-align:center; color:#3f3f3f; font-family:'Courier New', monospace; }
.start-foot { margin:14px 0 6px 0; text-align:center; font-size:9px; letter-spacing:2px; color:#4a4a4a; }
.foot { display:table; width:100%; table-layout:fixed; font-size:9px; letter-spacing:3px; font-family:'Courier New', monospace; margin-top:5px; }
.back { display:table-cell; text-align:left; }
.foot .src { display:table-cell; text-align:center; vertical-align:middle; }
.foot .src svg { vertical-align:middle; }
.made { display:table-cell; text-align:right; }
.foot a { color:#111111; font-weight:bold; text-decoration:none; border-bottom:1px solid #000000; }

/* ---------- play screen ---------- */
.play-top { display:table; width:100%; margin-top:4px; padding:5px 2px; border-bottom:1px solid #000000; }
.play-top span { display:table-cell; vertical-align:middle; }
.brand2 { font-size:13px; font-weight:bold; letter-spacing:2px; white-space:nowrap; }
.brand2 em { font-style:normal; background:#000000; color:#ffffff; padding:0 3px; }
.lvl-name { text-align:center; font-size:11px; letter-spacing:3px; font-family:'Courier New', monospace; }
.clock { text-align:right; font-size:14px; font-family:'Courier New', monospace; white-space:nowrap; }

/* ---- board (full width, thick 3x3 separators) ---- */
#board-wrap { display:table; margin:8px auto 0 auto; position:relative; }
#board { margin:0 auto; border-collapse:collapse; border:5px double #000000; background:#ffffff; }
#board td { border:1px solid #909090; text-align:center; vertical-align:middle; font-family:Verdana, Geneva, sans-serif; background:#ffffff; padding:0; }
#board td.b-r { border-right-width:2px; border-right-color:#000000; }
#board td.b-b { border-bottom-width:2px; border-bottom-color:#000000; }

#board td .d { display:block; line-height:1; font-weight:normal; }
#board td.given .d { font-weight:bold; }
#board td.user .d { font-size:0.85em; }
#board td.user.hintc .d { font-size:0.85em; }
#board td.sel { background:#909090; color:#111111; }
#board td.same .d { font-weight:bold; text-decoration:underline; }
#board td.sel.same .d { text-decoration:none; }
#board td.err .d { color:#111111; background:#ffffff; font-weight:bold; text-decoration:line-through; }
#board td.err { background:#d9d9d9; }
#board td.hintc .d { font-style:italic; text-decoration:underline; }
#board td.same { background:#c6c6c6; }
#board td.sel.same { background:#909090; }

/* ---- controls + pad ---- */
#pad-wrap, .btn-row { overflow:hidden; }
.btn-row { margin-top:8px; }
.btn-row .btn { float:left; width:24.4%; margin-left:0.8%; font-size:12px; letter-spacing:1px; padding:10px 1px; min-height:46px; white-space:nowrap; overflow:hidden; }
.btn-row .btn:first-child { margin-left:0; }

#pad { margin-top:8px; overflow:hidden; }
.pad-btn { float:left; width:10.6%; margin-left:0.55%; border:1px solid #000000; background:#ffffff; color:#111111; font-family:Verdana, Geneva, sans-serif; font-size:23px; font-weight:bold; padding:10px 0; min-height:52px; line-height:1.1; cursor:pointer; white-space:nowrap; -webkit-appearance:none; }
.pad-btn:first-child { margin-left:0; }
.pad-btn.done { border-style:dashed; color:#9a9a9a; }
.pad-btn.active { background:#000000; color:#ffffff; border-color:#000000; }
.pad-btn.active.done { color:#ffffff; }
.pad-btn.dim { color:#b5b5b5; border-color:#b5b5b5; }
.pad-btn.dim.done { color:#c6c6c6; }
.pad-btn.active.dim { color:#ffffff; border-color:#000000; background:#858585; }
.pad-btn:active { background:#d9d9d9; }

/* result popup: centred inside the board, four cells wide */
.board-pop { display:none; position:absolute; left:50%; top:50%; width:44%; margin-left:-22%; margin-top:-88px; background:#ffffff; border:2px solid #000000; padding:12px 8px 10px 8px; text-align:center; z-index:6; }
.board-pop.show { display:block; }
.pop-title { font-size:17px; font-weight:bold; letter-spacing:2px; border-bottom:1px solid #000000; padding-bottom:6px; margin-bottom:6px; }
.pop-body { font-size:11px; font-family:'Courier New', monospace; line-height:1.5; margin-bottom:9px; }
.pop-btns { }
.mbtn { display:inline-block; background:#ffffff; color:#111111; border:1px solid #000000; font-family:Verdana, Geneva, sans-serif; font-size:10px; font-weight:bold; letter-spacing:1px; padding:6px 10px; cursor:pointer; }
.mbtn + .mbtn { margin-left:4px; }

/* ---------- overlays ---------- */
.overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:#ffffff; display:table; width:100%; height:100%; z-index:10; }
.overlay.hidden { display:none; }
.overlay .box { display:table-cell; vertical-align:middle; text-align:center; padding:20px; }
.overlay .box-inner { max-width:360px; margin:0 auto; border:1px solid #000000; padding:18px 16px; }
.box-title { font-size:11px; letter-spacing:4px; font-family:'Courier New', monospace; margin-bottom:4px; }
.box-body { font-size:13px; margin:8px 0; line-height:1.6; }