*{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}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{height:60vh}}#viewport{background:var(--board,#092e23);border:3px solid #94b0a2;border-radius:10px;height:72vh;position:relative;overflow:hidden}#stage{width:100%;height:100%;display:block;position:absolute;inset:0}#board{position:absolute;inset:0}.tile{color:#0000;cursor:pointer;appearance:none;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:0;min-height:0;margin:0;padding:0;font-size:1px;line-height:0;position:absolute;top:0;left:0}.tile:focus,.tile:focus-visible{outline:none}.tile.blocked{cursor:not-allowed}#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}@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}.full-view #viewport{height:100%}}#fullscreen{color:#fff;background:#075ac7;border-color:#fff;font-weight:800}#fullscreen:hover{background:#03479f}header{align-items:flex-end}header select,header>button{height:58px}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 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}body,#app.full-view{background:var(--page,#103e32);color:var(--page-ink,#fff)}#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)}