/* ===== Blazor boot + error UI (keep) ===== */
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
code { color: #c02d76; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow; bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box;
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.loading-progress {
    position: absolute; display: block; width: 8rem; height: 8rem;
    inset: 20vh 0 auto 0; margin: 0 auto;
}
.loading-progress circle {
    fill: none; stroke: #e0e0e0; stroke-width: 0.6rem;
    transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: #3b6df6;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ===== Crossword (design ported from crossword-prototype.html?variant=B) ===== */
.cw { --acc:#3b6df6; --acc-soft:#dfe8ff; --cell:42px; background:#f6f7fb; min-height:100vh; color:#101626; }

/* file upload row — the very top */
.cw .uploadbar { display:flex; align-items:center; gap:14px; padding:12px 22px; background:#111418; color:#fff; }
.cw .uploadlbl { display:inline-flex; align-items:center; gap:9px; cursor:pointer;
    background:#22262d; border:1px solid #343a44; border-radius:10px; padding:9px 14px; font-weight:700; font-size:13px; }
.cw .uploadlbl:hover { background:#2b3038; }
.cw .uploadlbl .uploadicon { color:#7cc4ff; font-size:14px; }
.cw .uploadlbl input[type=file] { display:none; }
.cw .uploadlbl.set { background:#15351f; border-color:#2f6b40; }
.cw .uploadlbl.set .uploadicon { color:#5fd07e; }
.cw .updiv { font-size:12px; color:#8a93a6; font-weight:700; letter-spacing:.04em; }
.cw .filename { font-size:13px; color:#aeb6c4; font-weight:600; }
.cw .loaderr { font-size:13px; color:#ff8a8a; font-weight:700; }

/* top bar */
.cw .top { display:flex; align-items:center; gap:12px; padding:12px 22px; background:#fff; border-bottom:1px solid #e7eaf1;
    position:sticky; top:0; z-index:5; }
.cw .top .title { font-weight:800; font-size:16px; letter-spacing:-.01em; }
.cw .top .title small { display:block; font-weight:600; color:#8a93a6; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.cw .spacer { flex:1; }
.cw .ring { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:#46506a; margin-right:6px; }
.cw .btn { all:unset; cursor:pointer; padding:8px 14px; border-radius:10px; font-weight:700; font-size:13px;
    background:var(--acc-soft); color:var(--acc); }
.cw .btn:hover { filter:brightness(.97); }
.cw .btn.ghost { background:#eef1f7; color:#5a647c; }
.cw .btn.on { background:var(--acc); color:#fff; }

/* active clue banner */
.cw .clueBanner { background:linear-gradient(180deg,#fff,#fbfcff); border-bottom:1px solid #e7eaf1; padding:16px 22px; }
.cw .clueBanner .dir { font:800 11px/1 system-ui; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); }
.cw .clueBanner .txt { font:700 22px/1.25 system-ui; margin-top:6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw .clueBanner .meta { color:#8a93a6; font-weight:700; }

/* body layout */
.cw .body { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start;
    max-width:1180px; margin:0 auto; padding:26px 22px; }
.cw .gridcard { background:#fff; border:1px solid #e7eaf1; border-radius:18px; padding:22px; display:flex; justify-content:center;
    box-shadow:0 24px 48px -30px rgba(35,55,120,.4); }
.cw .gridfocus { outline:none; }

.cw table.grid { border-collapse:collapse; }
.cw .grid td { width:var(--cell); height:var(--cell); padding:0; position:relative;
    border:1px solid #c9d0de; background:#fff; }
.cw .grid td.barR { border-right:3px solid #2a3550; }
.cw .grid td.barB { border-bottom:3px solid #2a3550; }
.cw .grid .num { position:absolute; top:1px; left:2px; z-index:2; pointer-events:none;
    font-weight:700; font-size:calc(var(--cell) * 0.26); line-height:1; color:#9aa3b6; }
.cw .grid .cell-inp { width:100%; height:100%; border:0; margin:0; padding:0; background:transparent;
    text-align:center; text-transform:uppercase; color:#101626; caret-color:transparent;
    font-weight:700; font-size:max(16px, calc(var(--cell) * 0.5)); line-height:1; }
.cw .grid .cell-inp:focus { outline:0; }
.cw .grid td.word { background:var(--acc-soft); }
.cw .grid td.cur { background:var(--acc); }
.cw .grid td.cur .cell-inp, .cw .grid td.cur .num { color:#fff; }
.cw .grid td.good .cell-inp { color:#16a34a; }
.cw .grid td.bad .cell-inp { color:#dc2626; }
.cw .grid td.cur.good .cell-inp, .cw .grid td.cur.bad .cell-inp { color:#fff; }

/* side */
.cw .side { position:sticky; top:78px; }
.cw .tabs { display:flex; gap:6px; margin-bottom:10px; }
.cw .tabs .t { flex:1; text-align:center; padding:9px; border-radius:10px; font-weight:700; font-size:12px; cursor:pointer;
    background:#eef1f7; color:#5a647c; }
.cw .tabs .t.on { background:var(--acc); color:#fff; }
.cw .list { background:#fff; border:1px solid #e7eaf1; border-radius:14px; max-height:62vh; overflow:auto; }
.cw .list .rowitem { display:flex; gap:10px; align-items:baseline; padding:11px 14px; border-bottom:1px solid #f1f3f8; cursor:pointer; }
.cw .list .rowitem:hover { background:#f7f9ff; }
.cw .list .rowitem.on { background:var(--acc-soft); }
.cw .list .rowitem .n { font-weight:800; color:var(--acc); min-width:22px; }
.cw .list .rowitem .c { font-size:14px; color:#2b3347; }
.cw .list .rowitem .k { margin-left:auto; font-size:12px; color:#aab2c4; font-weight:700; }
.cw .list .rowitem.done .c { color:#9aa3b6; text-decoration:line-through; }
.cw .navbtns { display:flex; gap:10px; margin-top:14px; }
.cw .navbtns button { all:unset; cursor:pointer; flex:1; text-align:center; padding:12px; border-radius:12px;
    background:#fff; border:1px solid #e7eaf1; font-weight:800; color:#2b3347; }
.cw .navbtns button:hover { background:#f7f9ff; }

/* empty state */
.cw .empty { display:flex; justify-content:center; padding:80px 22px; }
.cw .empty-card { background:#fff; border:1px solid #e7eaf1; border-radius:18px; padding:40px 56px; text-align:center;
    box-shadow:0 24px 48px -30px rgba(35,55,120,.4); }
.cw .empty-title { font-weight:800; font-size:20px; }
.cw .empty-sub { color:#8a93a6; font-weight:600; margin-top:8px; }

/* ===== Phone layout: single column, grid sized to fit the viewport width ===== */
/* Both puzzle formats are 12 columns wide, so the grid fits 12 cells across. */
@media (max-width: 760px) {
    .cw { --cell: min(46px, calc((100vw - 30px) / 12)); }
    .cw .body { grid-template-columns:1fr; gap:14px; padding:10px; }
    .cw .gridcard { padding:6px; border-radius:12px; overflow-x:auto; }
    .cw .side { position:static; }
    .cw .list { max-height:50vh; }
    .cw .top { flex-wrap:wrap; gap:8px; padding:10px; }
    .cw .top .title { font-size:15px; }
    .cw .uploadbar { flex-wrap:wrap; gap:8px; padding:10px; }
    .cw .clueBanner { padding:12px 14px; }
    .cw .clueBanner .txt { font-size:17px; }
}