:root {
    --ink: #2b2726;
    --paper: #fafafa;
    --grid: #6c5736aa;
    --pig: #d0216f;            /* deep pink */
    /* Mud shades, light to medium. Pen colour code k (pen-k) is shade k with a
       light pattern in shade k+1 (a different pattern for each code). */
    --mud-0: #efe4ce;
    --mud-1: #e3d2b2;
    --mud-2: #d7c198;
    --mud-3: #cbb083;
    --mud-4: #bd9f71;
    /* A sty: a brown no-entry sign. */
    --sty-sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%238a6a4a'/%3E%3Crect x='4' y='8.25' width='12' height='3.5' rx='0.75' fill='%23fff'/%3E%3C/svg%3E");
    --wrong: #1f6feb;
    --loose: #efe3cf;
    --wall: 4px;
}

body {
    margin: 0;
    background: #f3efe9;
    color: var(--ink);
    font-family: system-ui, sans-serif;
}

main {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px;
}

.twigs-board {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(var(--size), 1fr);
    width: 100%;
    aspect-ratio: 1;
    border: var(--wall) solid var(--ink);
    border-radius: 6px;
    overflow: hidden;
    /* The 1px gaps between cells show this colour as the thin grid lines. */
    gap: 1px;
    background: var(--grid);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* Let a finger drag across the board to mark squares instead of scrolling the page. */
    touch-action: none;
}

.twigs-board .cell {
    appearance: none;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;

    /* A square's background is built from layers: an optional mark (cross,
       pig, wrong) on top of its fill. The fill is --fill (a colour) with an
       optional pattern --fill-img; the mark rules below repeat the fill as
       their last layer, sized --fill-size. */
    --fill: var(--paper);
    --fill-img: none;
    --fill-size: auto;
    background-color: var(--fill);
    background-image: var(--fill-img);
    background-size: var(--fill-size);
}

/* Pen colours: a mud shade with a light pattern in the next shade. Each
   pattern is one tiling image (--fill-img) of size --fill-size. */
.twigs-board .cell.pen-0 {   /* sparse dots */
    --fill: var(--mud-0);
    --fill-img: radial-gradient(circle at 3px 3px, var(--mud-1) 1px, transparent 1.5px);
    --fill-size: 8px 8px;
}
.twigs-board .cell.pen-1 {   /* diagonal stripes */
    --fill: var(--mud-1);
    --fill-img: linear-gradient(45deg, var(--mud-2) 10%, transparent 10% 50%, var(--mud-2) 50% 60%, transparent 60%);
    --fill-size: 7px 7px;
}
.twigs-board .cell.pen-2 {   /* fine checks */
    --fill: var(--mud-2);
    --fill-img: conic-gradient(var(--mud-3) 25%, transparent 0 50%, var(--mud-3) 0 75%, transparent 0);
    --fill-size: 4px 4px;
}
.twigs-board .cell.pen-3 {   /* bigger dark dots */
    --fill: var(--mud-3);
/*    --fill-img: linear-gradient(var(--mud-4) 1px, transparent 1px);*/ /* Old horizontal furrows */
    --fill-img: radial-gradient(circle at 3px 3px, var(--mud-4) 1px, transparent 2.5px);
    --fill-size: 9px 9px;
}

/* Region walls: one solid bar centred on the grid line, drawn by the cell to its
   left (wall-right) or above (wall-bottom). Bars overhang by half a wall at each
   end so that corners join up. The board border draws the outer edge. */
.twigs-board .cell.wall-right::after,
.twigs-board .cell.wall-bottom::before {
    content: '';
    position: absolute;
    z-index: 1;
    background: var(--ink);
    pointer-events: none;
}
.twigs-board .cell.wall-right::after {
    top: calc(-0.5px - var(--wall) / 2);
    bottom: calc(-0.5px - var(--wall) / 2);
    right: calc(-0.5px - var(--wall) / 2);
    width: var(--wall);
}
.twigs-board .cell.wall-bottom::before {
    left: calc(-0.5px - var(--wall) / 2);
    right: calc(-0.5px - var(--wall) / 2);
    bottom: calc(-0.5px - var(--wall) / 2);
    height: var(--wall);
}

/* Loose squares: trampled ground, with broken fences on every side. */
.twigs-board .cell.loose { --fill: var(--loose); }
.twigs-board .cell.loose-right::after,
.twigs-board .cell.loose-bottom::before {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.twigs-board .cell.loose-right::after {
    top: 0;
    bottom: 0;
    right: calc(-0.5px - var(--wall) / 4);
    width: calc(var(--wall)/2);
    background: repeating-linear-gradient(to bottom, var(--ink) 0 5px, transparent 5px 10px);
}
.twigs-board .cell.loose-bottom::before {
    left: 0;
    right: 0;
    bottom: calc(-0.5px - var(--wall) / 4);
    height: calc(var(--wall)/2);
    background: repeating-linear-gradient(to right, var(--ink) 0 5px, transparent 5px 10px);
}

/* "No pig here": a small cross, drawn as a background image so the square
   keeps its own colour (e.g. a loose square's). Its colour's alpha is a
   registered custom property so it can be animated: a new cross fades in
   over the double-tap time (set from JS as --cross-fade). Browsers without
   @property just show it after the fade time. */
@property --cross-alpha {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}
.twigs-board .cell.is-empty {
    --cross-ink: rgb(98 78 60 / var(--cross-alpha));
    background-image:
        linear-gradient(45deg, transparent calc(50% - 1.5px), var(--cross-ink) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
        linear-gradient(-45deg, transparent calc(50% - 1.5px), var(--cross-ink) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
        var(--fill-img);
    background-size: 36% 36%, 36% 36%, var(--fill-size);
    background-position: center, center, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
}
.twigs-board .cell.is-empty.fade-in {
    animation: twigs-cross-in var(--cross-fade, 250ms) ease-out;
}
@keyframes twigs-cross-in {
    from { --cross-alpha: 0; }
    to { --cross-alpha: 1; }
}
/* A pig: a deep pink circle, 80% of the square's width. */
.twigs-board .cell.is-pig {
    background-image:
        radial-gradient(circle closest-side, var(--pig) calc(100% - 1px), transparent 100%),
        var(--fill-img);
    background-size: 80% 80%, var(--fill-size);
    background-position: center, 0 0;
    background-repeat: no-repeat, repeat;
}

.twigs-board .cell.sty {
    cursor: default;
    background-image: var(--sty-sign), var(--fill-img);
    background-size: 70% 70%, var(--fill-size);
    background-position: center, 0 0;
    background-repeat: no-repeat, repeat;
}

.twigs-board .cell:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: -3px;
}

/* Marked wrong by the Check button: a thick inner ring and a cross. */
.twigs-board .cell.is-wrong {
    --wrong-x:
        linear-gradient(45deg, transparent 46%, var(--wrong) 46% 54%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, var(--wrong) 46% 54%, transparent 54%);
    box-shadow: inset 0 0 0 3px var(--wrong);
    background-image: var(--wrong-x), var(--fill-img);
    background-size: 100% 100%, 100% 100%, var(--fill-size);
    background-position: 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
}
/* A wrong pig keeps its circle under the blue cross. */
.twigs-board .cell.is-wrong.is-pig {
    background-image:
        var(--wrong-x),
        radial-gradient(circle closest-side, var(--pig) calc(100% - 1px), transparent 100%),
        var(--fill-img);
    background-size: 100% 100%, 100% 100%, 80% 80%, var(--fill-size);
    background-position: 0 0, 0 0, center, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

.twigs-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.twigs-check {
    font: inherit;
    font-weight: 600;
    padding: 8px 20px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}
.twigs-check:disabled { opacity: 0.6; cursor: default; }

/* Above the board: the timer on the left, Pause and Clear on the right. */
.twigs-bar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 6px;
}
.twigs-timer {
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.twigs-timer.is-stopped { color: #8c8480; }
.twigs-timer.is-hidden { display: none; }
.twigs-clock { display: flex; align-items: baseline; gap: 10px; }
.twigs-bar .twigs-timer-toggle {
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.8rem;
    color: #8c8480;
    text-decoration: underline;
}
.twigs-timer.is-solved { color: #2f7d32; }
.twigs-bar-buttons { display: flex; gap: 8px; }
.twigs-bar button,
.twigs-paused button {
    font: inherit;
    font-size: 1rem;
    font-weight: 400;
    padding: 6px 14px;
    border: 2px solid #b9b2ae;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}
.twigs-bar button:disabled { opacity: 0.5; cursor: default; }

/* Choosing a pen for a broken-fence square: the possible pens glow (a
   pulsing warm tint), everything else dims. Inset box-shadows are used rather
   than filters, which would hide half of each fence line. */
.twigs-board.choosing .cell {
    box-shadow: inset 0 0 0 100px rgb(60 40 20 / 0.28);
}
.twigs-board.choosing .cell.pen-glow {
    animation: twigs-glow 0.9s ease-in-out infinite alternate;
}
.twigs-board.choosing .cell.pen-glow.pen-hover {
    animation: none;
    box-shadow: inset 0 0 0 100px rgb(255 236 160 / 0.7);
}
.twigs-board.choosing .cell.choose-target {
    box-shadow: inset 0 0 0 3px var(--pig);
}
@keyframes twigs-glow {
    from { box-shadow: inset 0 0 0 100px rgb(255 214 90 / 0.18); }
    to   { box-shadow: inset 0 0 0 100px rgb(255 214 90 / 0.5); }
}
.twigs-assign {
    position: absolute;
    z-index: 3;
    width: 250px;
    max-width: calc(100% - 8px);
    box-sizing: border-box;
    padding: 10px 12px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
    font-size: 0.95rem;
    line-height: 1.35;
}
.twigs-assign[hidden] { display: none; }
.twigs-assign p { margin: 0 0 8px; }
.twigs-assign button {
    font: inherit;
    padding: 4px 12px;
    border: 2px solid #b9b2ae;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

/* While paused, this box covers the whole board. */
.twigs-board-wrap { position: relative; }
.twigs-paused {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 6px;
    background: #e9e1d4;
}
.twigs-paused[hidden] { display: none; }
.twigs-paused p { margin: 0; font-size: 1.3rem; font-weight: 600; }
.twigs-paused .twigs-continue {
    font-weight: 600;
    font-size: 1.1rem;
    padding: 10px 28px;
    border-color: var(--ink);
}

/* The new-puzzle form. */
.twigs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    margin-bottom: 8px;
}
.twigs-toolbar .twigs-new { margin-bottom: 0; }

.rules, .help { line-height: 1.4; }
.help { color: #6b6461; font-size: 0.9em; }

.twigs-new {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    margin-bottom: 8px;
}
.twigs-new label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85em;
    color: #6b6461;
}
.twigs-new select,
.twigs-new button {
    font: inherit;
    font-size: 1rem;
    padding: 6px 10px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
}
.twigs-new button {
    font-weight: 600;
    cursor: pointer;
}

.notice {
    padding: 10px 12px;
    border-radius: 6px;
    background: #fde8e6;
}

h2 { margin: 16px 0 4px; font-size: 1.2em; }
.share { color: #6b6461; font-size: 0.9em; overflow-wrap: anywhere; }