:root{--cell:min(11.5vw, 54px);--u:calc(var(--cell) / 80);--tray-cell:calc(var(--cell) * .62);--plot:#382824;--gb-bg:#241a1a}#app{justify-content:center;align-items:center;gap:calc(var(--u) * 18);background:var(--gb-bg);height:100dvh;font-family:var(--font-freckle), system-ui, sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;flex-direction:column;display:flex}#app .title{color:var(--plot);white-space:nowrap;align-items:flex-end;line-height:.82;display:flex}#app .title .word{font-size:calc(var(--u) * 58)}#app .title .troll{font-size:calc(var(--u) * 96);line-height:.78}#app .scoreline{color:#6e584d;font-size:calc(var(--u) * 22);letter-spacing:.04em;gap:calc(var(--u) * 28);display:flex}#app .scoreline .val{color:#a88d7f}#board{grid-template-columns:repeat(8, var(--cell));grid-template-rows:repeat(8, var(--cell));border-radius:calc(var(--u) * 16);touch-action:none;display:grid;position:relative}#app .cell{width:var(--cell);height:var(--cell);position:relative}#app .tile{pointer-events:none;position:absolute;inset:0}#app .tile .plot{border-radius:calc(var(--ts,var(--u)) * 8);background:var(--plot);width:95%;height:95%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#app .tile .shadow{background:radial-gradient(circle,#1e110b 0%,#1e110b00 80%);border-radius:50%;width:80%;height:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#app .tile .emoji{color:#fff;white-space:nowrap;line-height:normal;position:absolute}#app .tile.dirt .dot{background:var(--plot);border-radius:50%;width:20%;height:20%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#app .tile.seed .emoji{font-size:calc(var(--ts,var(--u)) * 40);left:calc(50% - var(--ts,var(--u)) * 20);top:calc(var(--ts,var(--u)) * -15)}#app .tile.sprout .emoji{font-size:calc(var(--ts,var(--u)) * 64);left:calc(var(--ts,var(--u)) * 5);top:calc(var(--ts,var(--u)) * -19)}#app .tile.sapling .emoji{font-size:calc(var(--ts,var(--u)) * 72);left:calc(var(--ts,var(--u)) * 14);top:calc(var(--ts,var(--u)) * -20)}#app .tile.flower .emoji{font-size:calc(var(--ts,var(--u)) * 88);left:calc(var(--ts,var(--u)) * -6);top:calc(var(--ts,var(--u)) * -39)}#app .tile.withered .emoji{font-size:calc(var(--ts,var(--u)) * 64);left:calc(var(--ts,var(--u)) * 8);top:calc(var(--ts,var(--u)) * -8)}#app .tile.turtle .emoji{font-size:calc(var(--ts,var(--u)) * 80);left:calc(50% - var(--ts,var(--u)) * 44);top:calc(var(--ts,var(--u)) * -34)}#app .tile.placed{animation:.22s ease-out gb-pop}@keyframes gb-pop{0%{transform:scale(.6)}70%{transform:scale(1.08)}to{transform:scale(1)}}#app .cell .hint{border-radius:calc(var(--u) * 8);z-index:50;position:absolute;inset:4%}#app .cell.hint-ok .hint{background:#7ac46e47}#app .cell.hint-bad .hint{background:#c45a4e47}#tray{justify-content:center;align-items:center;gap:calc(var(--u) * 24);min-height:calc(var(--tray-cell) * 3.2);width:calc(var(--cell) * 8);display:flex}#app .tray-piece{touch-action:none;cursor:grab;transition:opacity .15s;display:grid;position:relative}#app .tray-piece.used{visibility:hidden}#app .tray-piece.dragging{opacity:.25}#app .tray-piece .tcell{width:var(--tray-cell);height:var(--tray-cell);position:relative}#ghost{z-index:100;pointer-events:none;display:none;position:fixed;top:0;left:0}#ghost .gcell{width:var(--cell);height:var(--cell);position:absolute}#app .float-pts{z-index:90;color:#ffe9a8;font-size:calc(var(--u) * 40);text-shadow:0 calc(var(--u) * 3) 0 #0006;pointer-events:none;animation:.9s ease-out forwards gb-rise;position:absolute}@keyframes gb-rise{0%{opacity:0;transform:translate(-50%)scale(.6)}20%{opacity:1;transform:translate(-50%, calc(var(--u) * -14)) scale(1.1)}to{opacity:0;transform:translate(-50%, calc(var(--u) * -70)) scale(1)}}#gameover{justify-content:center;align-items:center;gap:calc(var(--u) * 24);z-index:60;flex-direction:column;display:none;position:absolute;inset:0}#gameover.show{display:flex}#gameover .msg{color:#fff;font-size:calc(var(--u) * 46);text-shadow:0 calc(var(--u) * 4) 0 #00000059}#gameover .final{color:#a88d7f;font-size:calc(var(--u) * 24)}#gameover button{font-family:inherit;font-size:calc(var(--u) * 26);color:#fff;background:var(--plot);border-radius:calc(var(--u) * 12);padding:calc(var(--u) * 12) calc(var(--u) * 32);cursor:pointer;border:none}#gameover button:active{transform:scale(.95)}#board.over .cell .tile{display:none}
