.gf-stage{display:grid;justify-items:center;gap:12px;padding:10px 0 18px;direction:ltr;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.gf-board-frame{width:100%;padding:9px;border:1px solid #bba065;border-radius:16px;background:linear-gradient(135deg,#5a4727,#c4a36a 5%,#302b20 9%,#0c171c 15%,#19262a 85%,#b09762);box-shadow:inset 0 0 0 3px #081318,0 12px 28px #0008}.gf-board{position:relative;width:100%;aspect-ratio:3/4;border:1px solid #81714f;border-radius:5px;background:radial-gradient(ellipse at 50% 20%,#20373a,#0a171e);overflow:hidden;touch-action:none}.gf-squares{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(8,1fr)}.gf-square{min-width:0;min-height:0;padding:0;margin:0;border:1px solid #ac97622a;border-radius:0;background:linear-gradient(140deg,#22373644,#08141c55);touch-action:none}.gf-square:focus-visible{outline-offset:-4px}.gf-pieces{position:absolute;inset:0;pointer-events:none}.gf-piece{position:relative;margin:0;padding:0;min-width:0;min-height:0;background:none;border:0;box-shadow:none;color:#fff;touch-action:none;-webkit-tap-highlight-color:transparent}.gf-board-piece{position:absolute;left:calc(var(--col)*100%/6);top:calc(var(--row)*100%/8);width:calc(var(--w)*100%/6);height:calc(var(--h)*100%/8);pointer-events:none}.gf-tile{position:absolute;left:calc(var(--c)*100%/var(--w));top:calc(var(--r)*100%/var(--h));width:calc(100%/var(--w));height:calc(100%/var(--h));background-image:url('assets/tiles.webp');background-size:400% 400%;background-position:var(--tone-x) var(--tone-y);background-repeat:no-repeat;pointer-events:auto;filter:drop-shadow(0 2px 2px #0007)}.gf-piece.is-selected{z-index:2}.gf-piece.is-selected .gf-tile{filter:drop-shadow(0 0 2px #fff) brightness(1.15)}.gf-board-piece:focus-visible{outline:2px solid #fff1b8;outline-offset:0}.gf-tray{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;width:100%;min-height:51px;padding:8px;border:1px solid #7e683c;border-radius:14px;background:linear-gradient(125deg,#142429,#080f17);touch-action:none}.gf-tray-piece{min-height:48px;border:1px solid #77633d66;border-radius:7px}.gf-tray-piece .gf-tile{width:calc(var(--tray-cell,11px));height:calc(var(--tray-cell,11px));left:calc(50% - var(--w)*var(--tray-cell,11px)/2 + var(--c)*var(--tray-cell,11px));top:calc(50% - var(--h)*var(--tray-cell,11px)/2 + var(--r)*var(--tray-cell,11px));pointer-events:none}.gf-tray-piece.is-selected{border-color:#fff1b8;background:#fff1b811}.gf-actions{display:grid;grid-template-columns:48px 48px minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%}.gf-actions>button{min-width:0;min-height:48px;padding:6px 4px;margin:0;font-size:14px;touch-action:manipulation}.gf-actions #rotate-piece,.gf-actions #return-piece{font-size:25px}.gf-actions>button:disabled{opacity:.4;cursor:default}.gf-preview,.gf-hint-target{position:absolute;left:calc(var(--col)*100%/6);top:calc(var(--row)*100%/8);width:calc(var(--w)*100%/6);height:calc(var(--h)*100%/8);pointer-events:none;z-index:4}.gf-ghost-cell{position:absolute;left:calc(var(--c)*100%/var(--w));top:calc(var(--r)*100%/var(--h));width:calc(100%/var(--w));height:calc(100%/var(--h));border:3px solid #c1edca;background:#b5e9c344;border-radius:7px}.gf-preview[data-invalid=true] .gf-ghost-cell,.gf-hint-target[data-invalid=true] .gf-ghost-cell{border-color:#ffb2bb;background:#fc8c9c44}.gf-hint-target .gf-ghost-cell{border:3px dashed #fff1aa;background:#f6df8244}.gf-hint-target .gf-ghost-cell:first-child::after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;color:#fff6cf;text-shadow:0 1px 3px #000;font-size:24px}.gf-stage[data-demo=true] .gf-actions>button:disabled{opacity:.4}@container gf-page (min-width:600px){.gf-actions{width:min(92%,760px)}.gf-board-frame{padding:13px;border-radius:20px}.gf-tray{gap:10px;padding:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.gf-tray-piece{min-height:70px;--tray-cell:16px}.gf-actions{grid-template-columns:64px 64px minmax(0,1fr) minmax(0,1fr);gap:12px}.gf-actions>button{min-height:60px;font-size:18px}.gf-stage{gap:16px}}

.gf-play-area{display:grid;gap:12px;width:100%}@container gf-page (min-width:600px){.gf-play-area{width:min(92%,760px);grid-template-columns:minmax(0,1fr) 140px;gap:16px;align-items:start}.gf-board-frame,.gf-tray{width:100%}.gf-tray{padding:9px}.gf-tray-piece{min-height:70px;--tray-cell:12px}}

/* Tight gemstone faces within unchanged logical grid cells. */
.gf-tile{background-image:none;overflow:hidden}.gf-tile::before{content:"";position:absolute;inset:-10%;background:transparent url('assets/tiles.webp') var(--tone-x) var(--tone-y)/400% 400% no-repeat;pointer-events:none}.gf-stage{gap:8px;padding-top:6px;padding-bottom:12px}.gf-play-area{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:6px;align-items:start}.gf-board-frame{width:100%;padding:6px}.gf-tray{position:static;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:2px;padding:4px;border-radius:10px;width:100%;min-width:0}.gf-tray-piece{min-height:44px;--tray-cell:10px;border-color:transparent}.gf-tray-piece.is-selected{border-color:#fff1b8}@container gf-page (min-width:600px){.gf-play-area{width:min(92%,760px);grid-template-columns:minmax(0,1fr) 100px;gap:10px}.gf-board-frame{width:100%;padding:9px}.gf-tray{grid-template-columns:minmax(0,1fr);gap:3px;padding:5px}.gf-tray-piece{min-height:56px;--tray-cell:13px}.gf-stage{gap:12px}}

/* Completed pieces remain fully bright when their interaction is disabled. */
.gf-piece:disabled{opacity:1;cursor:default}