/* Minigames — Nonogram, Sudoku, Kreuzworträtsel. Single-player, no lobby,
   nothing saved server-side. Shares the main site's dark design tokens
   (imported from /games.css, linked before this file on every page) and
   just adds the layout/pieces specific to these three games. */

.mg-header{height:62px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 max(18px,calc((100% - 1100px)/2));position:sticky;top:0;background:#0d1110f2;backdrop-filter:blur(6px);z-index:5}
.mg-header .brand{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;letter-spacing:.08em;font-weight:800;white-space:nowrap}
.mg-header .brand b{color:var(--green)}
.mg-header nav{display:flex;align-items:center;gap:14px;font-size:13px}
.mg-header nav a{color:var(--muted);text-decoration:none}
.mg-header nav a:hover{color:var(--text)}
.mg-header nav a.current{color:var(--green-text)}

.mg-wrap{max-width:1100px;margin:auto;padding:30px 18px 60px}
.mg-hero{padding:8px 0 30px;max-width:760px}
.mg-hero h1{font-size:clamp(30px,6vw,52px);line-height:1.05;margin:.15em 0}
.mg-hero p{color:var(--muted);font-size:16px}

.mg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){.mg-grid{grid-template-columns:1fr}}
.mg-card{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:22px;text-decoration:none;color:inherit;min-height:150px;transition:.15s;display:block}
.mg-card:hover{border-color:#42614b;transform:translateY(-2px)}
.mg-card>span{color:var(--green);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.mg-card h2{font-size:23px;margin:16px 0 8px}
.mg-card p{color:var(--muted);margin:0;font-size:14px}

.mg-footlink{text-align:center;color:var(--muted);padding:6px 12px 26px;font-size:13px}
.mg-footlink a{color:#b7c3bc;text-decoration:none}
.mg-footlink a:hover{text-decoration:underline}

/* shared game-page shell */
.mg-shell{width:min(880px,calc(100% - 24px));margin:20px auto 60px}
.mg-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.mg-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.mg-toolbar .spacer{flex:1 1 auto}
.mg-toolbar select{width:auto;min-height:44px}
.mg-difficulty{display:inline-flex;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden}
.mg-difficulty button{border:0;border-radius:0;min-height:42px;padding:9px 14px;font-size:13px;font-weight:700}
.mg-difficulty button+button{border-left:1px solid var(--line-strong)}
.mg-difficulty button.active{background:var(--green-soft);color:var(--green-text)}
.mg-stats{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted)}
.mg-stats b{color:var(--text)}
.mg-msg{text-align:center;font-weight:800;padding:10px;border-radius:9px;margin-bottom:10px}
.mg-msg.win{background:var(--green-soft);color:var(--green-text)}
.mg-msg.lose{background:var(--red-soft);color:#f1c7cc}

/* ---- nonogram ---- */
.non-mode{margin-bottom:0}
.non-lives{font-size:15px;letter-spacing:2px}
.non-wrap{overflow:auto;max-width:100%;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.non-table{border-collapse:collapse;margin:auto;user-select:none}
/* --non-size/--non-font/--non-clue-font are set inline per puzzle (see
   computeCellSize() in nonogram.js) so the whole grid fits the actual
   viewport width instead of relying on a couple of fixed breakpoints —
   the fallback values here only matter before the first render. */
.non-table td{border:1px solid #2a332e;padding:0;text-align:center;vertical-align:middle;font-size:var(--non-font,11px);color:var(--muted);background:#12160f}
.non-table .non-clue{background:transparent;border:0;cursor:default;font-weight:700;color:#c4ccc7;padding:1px 4px;line-height:1.15;white-space:pre;font-size:var(--non-clue-font,10px)}
.non-table .non-clue.row-clue{text-align:right;height:var(--non-size,26px)}
.non-table .non-clue.col-clue{text-align:center;vertical-align:bottom;width:var(--non-size,26px);height:var(--non-size,26px)}
/* A row/column whose current X-marks + filled cells no longer leave any
   arrangement that satisfies its clue (e.g. an X placed where a block must
   actually go) — a live warning, not a block; the cells stay editable. */
.non-table .non-clue.non-clue-error{color:#ff8f8f;text-shadow:0 0 6px rgba(255,90,90,.45)}
.non-table td.non-cell{width:var(--non-size,26px);height:var(--non-size,26px);cursor:pointer;background:#181f1b;touch-action:none}
.non-table td.non-cell:hover{background:#1e2822}
.non-table td.non-filled{background:var(--green);box-shadow:inset 0 0 0 1px #1d6b48}
.non-table td.non-marked{background:#181f1b;color:#8e5a5a}
.non-table td.non-cell.non-wrong{background:#8e3f49!important;box-shadow:inset 0 0 0 1px #c26a75}
.non-table td.non-cell.non-locked{cursor:default}
.non-table td.non-cell.non-locked:hover{background:#181f1b}
.non-table td.non-cell.non-locked.non-filled{opacity:.82}
.non-table td.non-cell.non-locked:hover.non-filled{background:var(--green)}
.non-table td.non-cell.blk5{border-right-color:#4c5b52}
.non-table tr.blk5 td{border-bottom-color:#4c5b52}

/* ---- sudoku ---- */
.sud-modes{display:flex;gap:8px;margin-bottom:10px}
.sud-board{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);width:min(94vw,480px);aspect-ratio:1;margin:auto;border:2px solid var(--line-strong);border-radius:8px;overflow:hidden}
.sud-cell{display:flex;align-items:center;justify-content:center;border:1px solid #232b27;background:#12160f;font-size:clamp(14px,3.4vw,22px);font-weight:700;cursor:pointer;position:relative;color:var(--text)}
.sud-cell:nth-child(3n){border-right:2px solid var(--line-strong)}
.sud-cell:nth-child(9n+1){border-left:2px solid var(--line-strong)}
.sud-cell.row-b{border-bottom:2px solid var(--line-strong)}
.sud-cell.given{color:#dfe7e2;background:#181f1b;font-weight:800}
.sud-cell.selected{background:var(--green-soft)}
.sud-cell.peer{background:#1a231e}
.sud-cell.same-val{color:var(--green-text)}
.sud-cell.error{color:#f1a4ac}
.sud-cell .cage-sum{position:absolute;top:1px;left:2px;font-size:9px;font-weight:800;color:var(--yellow)}
.sud-cell.cage-edge-top{box-shadow:inset 0 2px 0 0 rgba(201,168,78,.55)}
.sud-cell.cage-edge-bottom{box-shadow:inset 0 -2px 0 0 rgba(201,168,78,.55)}
.sud-cell.cage-edge-left{box-shadow:inset 2px 0 0 0 rgba(201,168,78,.55)}
.sud-cell.cage-edge-right{box-shadow:inset -2px 0 0 0 rgba(201,168,78,.55)}
.sud-notes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none}
.sud-notes span{display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--muted);font-weight:600}
.sud-numpad{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;width:min(94vw,480px);margin:14px auto 0}
.sud-numpad button{min-height:44px;font-weight:800;font-size:16px}
.sud-actions{display:flex;flex-wrap:wrap;gap:8px;width:min(94vw,480px);margin:10px auto 0;justify-content:center}
.sud-actions button.on{background:var(--green-soft);border-color:#3f8d63;color:var(--green-text)}

/* ---- crossword ---- */
.cw-tabs{display:flex;gap:8px;margin-bottom:12px}
.cw-tabs button{flex:1 1 auto}
.cw-tabs button.active{background:var(--green-soft);border-color:#3f8d63;color:var(--green-text)}
.cw-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,320px);gap:16px;align-items:start}
@media (max-width:760px){.cw-layout{grid-template-columns:1fr}}
.cw-board-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
.cw-board{border-collapse:collapse;margin:auto}
.cw-board td{width:26px;height:26px;border:1px solid #2a332e;background:#12160f;position:relative;padding:0}
.cw-board td.blocked{background:#0a0d0b;border-color:#0a0d0b}
.cw-board td.active input{background:#1e2822}
.cw-board td.focus input{background:var(--green-soft)}
.cw-board td.wrong input{color:#f1a4ac}
.cw-board input{width:100%;height:100%;min-height:0;border:0;background:transparent;color:var(--text);text-align:center;text-transform:uppercase;font-weight:800;font-size:14px;padding:0;border-radius:0}
.cw-board input:focus{outline:2px solid var(--green);outline-offset:-2px}
.cw-num{position:absolute;top:0;left:1px;font-size:8px;color:var(--muted);pointer-events:none}
@media (max-width:640px){.cw-board td{width:22px;height:22px}.cw-board input{font-size:12px}}
@media (max-width:420px){.cw-board td{width:18px;height:18px}.cw-board input{font-size:11px}.cw-num{font-size:7px}}
.cw-clues{display:grid;gap:14px;max-height:70vh;overflow:auto}
.cw-clue-group h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-text);margin:0 0 6px}
.cw-clue-list{display:grid;gap:4px;font-size:13.5px}
.cw-clue-item{display:flex;gap:6px;padding:4px 6px;border-radius:6px;cursor:pointer}
.cw-clue-item:hover{background:var(--panel-2)}
.cw-clue-item.active{background:var(--green-soft);color:var(--green-text)}
.cw-clue-item.done{color:var(--muted);text-decoration:line-through}
.cw-clue-num{font-weight:800;flex:0 0 auto}

/* ---- rätselhilfe ---- */
.rh-pattern{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.rh-pattern input{width:38px;min-width:0;text-align:center;text-transform:uppercase;padding:0;font-weight:800}
.rh-len-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.rh-results{display:grid;gap:6px;margin-top:12px;max-height:50vh;overflow:auto}
.rh-result{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px}
.rh-result b{letter-spacing:.05em}
.rh-result span{color:var(--muted);font-size:13px;text-align:right}