*{box-sizing:border-box}body{color:#fff;background:#103e32;margin:0;font:20px/1.45 Arial,sans-serif}#app{max-width:1800px;margin:auto;padding:16px}header,nav{flex-wrap:wrap;align-items:center;gap:12px;display:flex}h1{margin:0 auto 0 0;font-size:36px}h1 small{font-size:20px;font-weight:400;display:block}label{flex-direction:column;font-weight:700;display:flex}button,select{font:inherit;color:#142b23;cursor:pointer;background:#fffdf3;border:3px solid #fff;border-radius:8px;min-height:52px;padding:10px 16px;font-weight:700}button:disabled{color:#45564e;cursor:default;background:#c4ccc8;border-color:#c4ccc8}button:focus-visible,select:focus-visible,main:focus-visible{outline-offset:4px;outline:5px solid #ffdc00}#instruction{color:#172820;background:#fff7cf;border-radius:8px;min-height:65px;margin:16px 0;padding:12px 16px;font-size:25px;font-weight:700}#hint{background:#ffdc00;border-color:#ffdc00}#count{margin-left:auto;font-weight:700}.legend{margin:12px 0;font-size:19px}#viewport{background:#092e23;border:3px solid #94b0a2;border-radius:10px;max-height:72vh;padding:12px;overflow:auto}#board{margin:auto;position:relative}.tile{box-shadow:3px 5px 0 #678473,var(--stack-shadow,0 0 transparent);color:#10251b;background:#fffdf3;border:3px solid #173327;border-radius:7px;flex-direction:column;justify-content:space-between;align-items:center;min-height:0;padding:4px;display:flex;position:absolute}.tile svg{filter:contrast(1.6)saturate(1.4);width:90%;height:52%}.tile strong{font-size:clamp(27px,3vw,38px);line-height:1}.tile span{font-size:11px;font-weight:900;line-height:1.2}.tile.blocked{background:var(--blocked-background);color:#fff;box-shadow:3px 5px 0 #354b40,var(--stack-shadow,0 0 transparent);cursor:not-allowed;border-color:#aab6bf}.tile.blocked svg{opacity:1;filter:contrast(1.6)saturate(1.4)}.tile.selected{background:#ffdc00;border:5px solid #171717}.tile.hinted{background:#e4edff;border:5px solid #002fb6}.tile.selected span,.tile.hinted span{font-size:12px}.tile:focus-visible{outline-offset:-5px;outline:5px solid #ff7900}dialog{color:#152c22;background:#fffdf3;border:4px solid #143d2f;border-radius:12px;max-width:650px;max-height:90vh;padding:25px;font-size:23px;overflow:auto}dialog::backdrop{background:#000b}dialog button{background:#ffdc00;border-color:#143d2f}dialog h2{margin-top:0}@media (width<=600px){#app{padding:10px}h1{width:100%;font-size:30px}header{gap:10px}button,select{padding:8px 12px;font-size:18px}#instruction{font-size:22px}#count{width:100%;margin:0}.legend{font-size:18px}#viewport{max-height:65vh}}.tile{grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;gap:1px;display:grid}.tile svg{width:100%;height:100%;min-height:0}.tile strong{font-size:27px}#board[data-tile-set=traditional] .tile.free{background:#fff5db}#board[data-tile-set=traditional] .tile svg,#board[data-tile-set=numbers] .tile svg{filter:none}#board[data-tile-set=traditional] .tile.selected{background:#ffdc00}#board[data-tile-set=traditional] .tile.hinted{background:#e4edff}#app.full-view{z-index:100;background:#103e32;grid-template-rows:64px auto minmax(0,1fr);gap:8px;width:100%;max-width:none;height:100dvh;margin:0;padding:10px;display:grid;position:fixed;inset:0}.full-view header,.full-view .legend{display:none}.full-view #instruction{min-height:0;margin:0;padding:6px 12px;font-size:22px;line-height:1.2;overflow:auto}.full-view nav{gap:8px}.full-view #count{width:auto;margin-left:auto}.full-view #viewport{width:100%;height:100%;min-height:0;max-height:none;padding:0;position:relative;overflow:hidden}.full-view #board{transform-origin:50%;margin:0;position:absolute;top:50%;left:50%}@media (width<=600px){.full-view nav button{min-height:46px;padding:6px 9px;font-size:16px}.full-view #count{font-size:16px}.full-view #instruction{font-size:18px}}@media (hover:hover){#board[data-tile-set] .tile.free:hover{color:#10251b;outline-offset:1px;box-shadow:inset 0 0 0 3px #171717,0 0 0 9px #171717,5px 10px 0 #0009,var(--stack-shadow,0 0 transparent);background:#ffc400;border-color:#171717;outline:5px solid #fff}}#board[data-tile-set] .tile.free:focus-visible{color:#10251b;outline-offset:1px;box-shadow:inset 0 0 0 3px #171717,0 0 0 9px #171717,5px 10px 0 #0009,var(--stack-shadow,0 0 transparent);background:#ffc400;border-color:#171717;outline:5px solid #fff}#fullscreen{color:#fff;background:#075ac7;border-color:#fff;font-weight:800}#fullscreen:hover{background:#03479f}#board[data-tile-set] .tile.blocked svg{opacity:1;filter:none}.tile.blocked span{color:#fff;background:#243447;border-radius:2px;padding:1px 3px}#board[data-tile-set=numbers] .tile.blocked svg text{fill:#fff}header{align-items:flex-end}header select,header>button{height:58px}#board[data-tile-set=letters] .tile{grid-template-rows:minmax(0,1fr)}#board[data-tile-set=letters] .tile svg{filter:none}#board[data-tile-set=letters] .tile.blocked svg text{fill:#fff}#board[data-tile-set=shapes] .tile{grid-template-rows:minmax(0,1fr)}#board[data-tile-set=shapes] .tile svg{filter:none}#board[data-tile-set=colourful] .tile{grid-template-rows:minmax(0,1fr)}#board[data-tile-set=colourful] .tile svg{filter:none}#board:is([data-tile-set=redgreen],[data-tile-set=blueyellow]) .tile{grid-template-rows:minmax(0,1fr)}#board:is([data-tile-set=redgreen],[data-tile-set=blueyellow]) .tile svg{filter:none}header select,header label{max-width:100%}#app.full-view{grid-template-rows:64px 55px minmax(0,1fr)}.full-view header{scrollbar-width:thin;flex-wrap:nowrap;align-items:flex-end;gap:10px;min-width:0;height:64px;display:flex;overflow:auto hidden}.full-view header h1{display:none}.full-view header label{white-space:nowrap;flex:none;font-size:14px;line-height:18px}.full-view header select,.full-view header>button{height:44px;min-height:44px;padding:4px 10px;font-size:18px}.full-view header>button{white-space:nowrap;flex-shrink:0}.full-view header #layout{width:245px}.full-view header #tile-set{width:265px}.full-view header #size{width:150px}.full-view header #auto-matches{width:180px}.full-view nav{scrollbar-width:thin;flex-wrap:nowrap;min-width:0;height:55px;overflow:auto hidden}.full-view nav>button,.full-view #count{white-space:nowrap;flex-shrink:0}.full-view nav>button{height:46px;min-height:46px}.full-view #instruction{flex:1 0 240px;max-height:46px;padding:3px 8px;font-size:18px;line-height:1.15;overflow:auto}.full-view #count{margin-left:0}#board[data-tile-set=tournament] .tile{grid-template-rows:minmax(0,1fr);gap:0;padding:0}#board[data-tile-set=tournament] .tile.free{background:#fff0d2}#board[data-tile-set=tournament] .tile svg{filter:none;width:100%;height:100%;overflow:hidden}#board[data-tile-set=tournament] .tile.blocked svg{filter:invert()hue-rotate(180deg)}#board[data-tile-set=tournament] .tile.selected{background:#ffdc00}#board[data-tile-set=tournament] .tile.hinted{background:#e4edff}@media (hover:hover){#board[data-tile-set=tournament] .tile.free:hover{background:#ffc400}}#board[data-tile-set=tournament] .tile.free:focus-visible{background:#ffc400}#board[data-tile-set=tournament] .tile.blocked svg.light-art{filter:none}body,#app.full-view{background:var(--page,#103e32);color:var(--page-ink,#fff)}#viewport{background:var(--board,#092e23)}#hint,dialog button,#instruction{background:var(--accent,#ffdc00);color:var(--accent-ink,#172820);border-color:var(--accent,#ffdc00)}nav>button{height:58px;min-height:58px}#instruction{align-content:center;height:58px;min-height:58px;padding:6px 12px;line-height:1.1;overflow:auto}.full-view #instruction{align-content:center;height:46px;min-height:46px;max-height:46px;padding:6px 8px;line-height:1.1}.settings-fields{gap:16px;margin-bottom:24px;display:grid}.settings-fields select{width:100%;min-width:0}.colour-fields{flex-wrap:wrap;gap:16px;display:flex}.colour-fields label{flex:1;min-width:120px;font-size:18px}input[type=color]{cursor:pointer;background:#fff;border:2px solid #143d2f;border-radius:6px;width:100%;height:48px;padding:3px}input[type=range]{accent-color:#143d2f;cursor:pointer;width:100%;min-height:44px}input:focus-visible{outline-offset:3px;outline:4px solid #075ac7}.settings-note{margin:0;font-size:18px}#settings-dialog{width:min(650px,100% - 24px)}#board{--ready-face:#fffdf3;--subtle-face:#ccc8b9}#board[data-tile-set=traditional]{--ready-face:#fff5db;--subtle-face:#ccc2a6}#board[data-tile-set=tournament]{--ready-face:#fff0d2;--subtle-face:#ccbea0}#board:is([data-blocked-colour=low],[data-blocked-colour=off]) .tile.blocked{background:var(--ready-face);color:#10251b;box-shadow:3px 5px 0 #678473,var(--stack-shadow,0 0 transparent);border-color:#173327}#board[data-blocked-colour=low] .tile.blocked{background:var(--subtle-face)}#board:is([data-blocked-colour=low],[data-blocked-colour=off]) .tile.blocked span{color:#10251b;background:0 0}#board:is([data-blocked-colour=low],[data-blocked-colour=off]) .tile.blocked svg{filter:none}#board:is([data-blocked-colour=low],[data-blocked-colour=off]):is([data-tile-set=numbers],[data-tile-set=letters]) .tile.blocked svg text{fill:#10251b}#board[data-tile-shadows=on]{--stack-shadow:5px 8px 5px 2px #0009,9px 13px 10px 1px #0005}#board[data-tile-set=colourletters] .tile{grid-template-rows:minmax(0,1fr)}#board[data-tile-set=colourletters] .tile svg{filter:none}#board[data-tile-set=solid] .tile{box-shadow:inset 0 0 0 2px #111,3px 5px 0 #354b40,var(--stack-shadow,0 0 transparent);border-color:#fff;padding:0;background:var(--solid-colour)!important}#board[data-tile-set=solid] .tile.selected{outline-offset:-8px;border-color:#111;outline:4px solid #fff}#board[data-tile-set=solid] .tile.hinted{outline-offset:-8px;border-color:#fff;outline:4px dashed #111}#board[data-tile-set=solid] .tile.free:focus-visible{outline-offset:1px;box-shadow:inset 0 0 0 3px #111,0 0 0 9px #111,var(--stack-shadow,0 0 transparent);outline:5px solid #fff}@media (hover:hover){#board[data-tile-set=solid] .tile.free:hover{outline-offset:1px;box-shadow:inset 0 0 0 3px #111,0 0 0 9px #111,var(--stack-shadow,0 0 transparent);outline:5px solid #fff}}