:root{
    --bg:#111;
    --panel:#181818;
    --ink:#eaeaea;
    --muted:#9aa3a7;
    --accent:#ff8a1f;
    --danger:#ff5a5a;
    --grid:#2e2e2e;
    --grid-strong:#424242;
    --cell-size:40px;
    --radius:14px;
    --shadow:0 12px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html,body,button,select,input{ font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

body{
    margin:0;
    color:var(--ink);
    background:var(--bg);
}

/* обёртка без ограничения ширины */
.app{ padding:20px 16px 40px; }

/* header ограничен по ширине */
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:30px;
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
}
.topbar .brand{ display:flex; align-items:center; gap:10px; }
.topbar h1{ margin:0; font-size:24px; letter-spacing:.5px; }

.top-actions{ display:flex; align-items:center; gap:8px; }
.lang-switch select{
    background:var(--panel);
    color:var(--ink);
    border:1px solid var(--grid-strong);
    border-radius:10px;
    padding:8px 10px;
}
.icon-btn{
    background:#171717;
    color:var(--ink);
    border:1px solid var(--grid);
    border-radius:10px;
    padding:8px 10px;
    cursor:pointer;
}
.icon-btn:hover{ border-color:var(--grid-strong); }

/* board HUD — ровно как просил */
.board-hud{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:300px;
    margin:30px auto;
}
.hud-left{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    background:#171717;
    border:1px solid #2f2f2f;
    border-radius:10px;
}
.timer-icon{ opacity:.85; }
.timer{
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
    font-weight:600;
    color:var(--accent);
    display:inline-block;
    min-width:5ch;
    text-align:center;
}
.hud-right .btn{
    background:rgba(255,138,31,.16);
    border:1px solid rgba(255,138,31,.35);
    color:#ffd5aa;
    padding:10px 16px;
    border-radius:12px;
}

/* board container */
.board-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

/* stage grid 2x2 */
.stage{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:
    "corner top"
    "left   grid";
    align-items:start;
    justify-items:start;
    gap:6px 12px;
}
.corner{ grid-area:corner; }

/* TOP clues */
.top-clues{
    grid-area:top;
    display:grid;
    gap:0;
    align-self:end;
}
.top-clues > .clue-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:2px;
}

/* LEFT clues */
.left-clues{
    grid-area:left;
    display:grid;
    gap:0;
    justify-items:end;
}
.left-clues > .clue-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:2px;
}

/* Clue pills */
.clue-col .n, .clue-row .n{
    font-size:12px;
    color:var(--muted);
    background:#161616;
    border:1px solid var(--grid);
    border-radius:6px;
    padding:2px 4px;
    min-width:18px;
    min-height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.clue-col .n.done, .clue-row .n.done{
    background:rgba(255,138,31,.15);
    color:#ffd5aa;
    border-color:var(--accent);
    font-weight:600;
}

/* Game grid */
.grid{
    grid-area:grid;
    display:grid;
    gap:0;
    background:linear-gradient(180deg,#1e1e1e,#151515);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow: var(--shadow), 0 0 0 1px var(--grid-strong) inset;
    touch-action:none;
}
.grid.disabled{
    pointer-events:none;
    opacity:.7;
    filter:saturate(.85);
}

/* cells */
.cell{
    width:100%;
    height:100%;
    border:1px solid var(--grid);
    background:#181818;
    cursor:pointer;
    user-select:none;
    position:relative;
    touch-action:none;
}
.cell.filled{ background:#121212; }
.cell.filled::after{
    content:'';
    position:absolute;
    inset:3px;
    border-radius:3px;
    background:rgba(255,138,31,.69);
}
.cell.mark-x::before{
    content:'×';
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#6ecbff;
    text-shadow:0 0 5px rgba(110,203,255,.35);
    font-size:18px;
    font-weight:700;
    opacity:.95;
}

/* group lines */
.cell.group-bottom{ border-bottom:2px solid var(--grid-strong); }
.cell.group-right{  border-right:2px solid var(--grid-strong); }

/* Mobile tools under board */
.segmented.mobile-tools{
    display:none;
    border:1px solid var(--grid-strong);
    border-radius:12px;
    overflow:hidden;
    background:#141414;
    margin-top:6px;
}
.seg-btn{
    padding:10px 14px;
    border:0;
    background:transparent;
    color:var(--ink);
    cursor:pointer;
    line-height:1;
}
.seg-btn + .seg-btn{ border-left:1px solid var(--grid-strong); }
.seg-btn:first-child{ border-radius:12px 0 0 12px; }
.seg-btn:last-child{ border-radius:0 12px 12px 0; }
.seg-btn[aria-pressed="true"]{ background:rgba(255,138,31,.15); box-shadow:inset 0 0 0 1px var(--accent); }

/* Settings modal */
.settings-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}
.settings-overlay[hidden]{ display:none !important; }
.settings-card{
    background:#181818;
    border:1px solid var(--grid-strong);
    border-radius:16px;
    padding:16px;
    width:min(520px, calc(100% - 28px));
    box-shadow:var(--shadow);
}
.settings-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}
.settings-head h2{ margin:0; font-size:18px; }
.settings-body{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.settings-body fieldset{
    margin:0;
    padding:10px;
    border:1px solid var(--grid);
    border-radius:12px;
}
.settings-body legend{
    padding:0 6px;
    color:var(--muted);
    font-size:12px;
}
.pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#151515;
    border:1px solid var(--grid);
    border-radius:999px;
    padding:6px 10px;
    margin-right:6px;
    margin-top:6px;
    cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pill input{
    appearance:none;
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid #666;
    background:#101010;
    display:inline-block;
    position:relative;
    outline:none;
}
.pill input:focus-visible{
    box-shadow:0 0 0 2px rgba(255,138,31,.35);
    border-color:#aaa;
}
.pill input:checked{
    border-color:var(--accent);
    background:var(--accent);
}
.pill span{
    color:var(--ink);
    font-size:14px;
}
.pill:hover{ border-color:var(--grid-strong); }
.pill input:checked + span{
    color:#ffd5aa;
}
.pill:has(input:checked){
    background:rgba(255,138,31,.12);
    box-shadow:inset 0 0 0 1px var(--accent);
    border-color:var(--accent);
}

.cell-size-input{
    display:flex;
    align-items:center;
    gap:8px;
}
.cell-size-input input{
    width:100px;
    background:#151515;
    border:1px solid var(--grid);
    color:var(--ink);
    border-radius:8px;
    padding:6px 8px;
}
.cell-size-input input:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(255,138,31,.35);
    border-color:var(--accent);
}
.cell-size-input .unit{
    color:var(--muted);
    font-size:12px;
}
.settings-body .hint{
    margin:.5em 0 0 0;
    color:var(--muted);
    font-size:12px;
}

.settings-foot{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    margin-top:12px;
}
.btn{
    background:linear-gradient(180deg,#1c1c1c,#141414);
    border:1px solid var(--grid-strong);
    color:var(--ink);
    padding:10px 16px;
    border-radius:12px;
    cursor:pointer;
}
.btn:hover{ border-color:var(--accent); }
.btn:active{ transform:translateY(1px); }
.btn-accent-soft{
    background:rgba(255,138,31,.16);
    border:1px solid rgba(255,138,31,.35);
    color:#ffd5aa;
}

/* a11y */
.sr-only{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* responsive */
@media (max-width:600px){
    :root{ --cell-size:32px; }
    .segmented.mobile-tools{ display:inline-flex; }
    .settings-body{ grid-template-columns:1fr; }
    .topbar{ margin-bottom:20px; }
}