/* Game surface only. page.css is the unchanged Dice Bloom template. */
.hex-stage{touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;container-type:inline-size;position:relative;padding-top:10px;--anchor-reserve:0px;--board-size:min(100cqw,max(300px,calc((100svh - 330px - var(--anchor-reserve))*1.1022)),760px);--stone-size:calc(var(--board-size)*.1343)}
.hex-board{width:var(--board-size);aspect-ratio:1.1022;position:relative;margin:auto;isolation:isolate;touch-action:none;background:radial-gradient(ellipse,#18464a33,transparent 70%);user-select:none;-webkit-user-select:none}
.hex-board::before{content:"";position:absolute;inset:2%;background:radial-gradient(ellipse,#34777a14,transparent 68%);pointer-events:none}
.hex-cell{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:13.43%;height:17.09%;padding:0;border:0;transform:translate(-50%,-50%);background:transparent;display:block;min-width:0;min-height:0;overflow:visible;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hex-cell::before,.hex-cell::after{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);pointer-events:none}
.hex-cell::before{background:#7e735046}.hex-cell::after{inset:2px;background:linear-gradient(145deg,#1d2c34,#0a1019)}
.hex-cell img,.hex-cell .hex-number{position:absolute;inset:0;min-width:0;min-height:0;z-index:1;pointer-events:none}.hex-cell .hex-number{display:grid;place-items:center}
.hex-cell img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none;filter:hue-rotate(var(--hue,0deg)) saturate(.56) brightness(.98) contrast(.9);}
.hex-number{color:#fffbed;font:750 clamp(14px,calc(var(--stone-size)*1.05/var(--digits,2)),42px)/1 ui-rounded,"Avenir Next",system-ui,sans-serif;text-shadow:0 2px 2px #001825,0 0 7px #001825;letter-spacing:-.03em}
.hex-cell.preview{filter:brightness(1.22)}.hex-cell.preview img{opacity:.72}.hex-cell.preview .hex-number{opacity:1}
.hex-cell.selected::before,.hex-cell:focus-visible::before{background:#fff2b9}.hex-cell.selected::after,.hex-cell:focus-visible::after{inset:4px}
.hex-cell.invalid::before{background:#ff7272}.hex-cell.invalid::after{inset:4px}
.hex-cell.burst img,.hex-cell.burst .hex-number{animation:hex-pop .22s ease-in forwards}.hex-cell.merged img{animation:hex-merge .22s ease-out}
.hex-dock{margin:8px auto 0;max-width:540px}
.hex-incoming{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:10px;min-height:calc(var(--stone-size)*2.021 + 28px)}
.hex-tray-space{display:grid;place-items:center;min-width:0}
.hex-tray,.hex-drag{position:relative;width:calc(var(--stone-size)*var(--tray-cols,2) + 18px);height:calc(var(--stone-size)*var(--tray-rows,1.1547) + 18px);box-sizing:border-box;}
.hex-tray{border:2px solid #c2a060;border-radius:21px;background:linear-gradient(145deg,#232938,#07090e 70%);box-shadow:inset 0 0 0 3px #08090b,inset 0 1px #fff7,0 12px 30px #0009;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;transition:width .2s,height .2s}
.hex-tray .hex-cell,.hex-drag .hex-cell{left:calc(7px + var(--px)*var(--stone-size));top:calc(7px + var(--py)*var(--stone-size));width:var(--stone-size);height:calc(var(--stone-size)*1.1547);transform:none;pointer-events:none;transition:left .2s,top .2s}
.hex-tray .hex-cell::before,.hex-tray .hex-cell::after,.hex-drag .hex-cell::before,.hex-drag .hex-cell::after{display:none}
.hex-tray .hex-number,.hex-drag .hex-number{font-size:calc(var(--stone-size)*.46)}
.hex-rotation.secondary-button{width:48px;height:48px;min-width:0;padding:0;border:0;background:transparent;border-radius:50%;font-size:29px}
.hex-tray:focus-visible{outline:3px solid #fff1b8;outline-offset:3px}
.hex-tray.drag-source{opacity:.35;cursor:grabbing}
.hex-drag{border:2px solid transparent;position:fixed;z-index:190;pointer-events:none;margin:0;filter:drop-shadow(0 12px 12px #000a);transition:none}
.hex-drag .hex-cell{transition:none}
.hex-cell.valid::before{background:#a6f3d1}.hex-cell.valid::after{inset:4px}
body.has-game-anchor .hex-stage{--anchor-reserve:calc(62px + env(safe-area-inset-bottom));padding-bottom:var(--anchor-reserve)}
@keyframes hex-pop{0%{transform:scale(1);opacity:1}55%{transform:scale(1.12);filter:brightness(1.55);opacity:1}100%{transform:scale(.45);opacity:0}}@keyframes hex-merge{0%{transform:scale(.75)}65%{transform:scale(1.07)}100%{transform:scale(1)}}
@container gf-page (min-width:600px){.hex-dock{max-width:600px}.hex-incoming{grid-template-columns:56px minmax(0,1fr) 56px}.hex-rotation.secondary-button{width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){.hex-cell.burst img,.hex-cell.burst .hex-number,.hex-cell.merged img{animation:none}}
.hex-stage[data-motion=reduced] .hex-cell.burst img,.hex-stage[data-motion=reduced] .hex-cell.burst .hex-number,.hex-stage[data-motion=reduced] .hex-cell.merged img{animation:none}

@media(prefers-reduced-motion:reduce){.hex-tray,.hex-tray .hex-cell{transition:none}}
.hex-stage[data-motion=reduced] .hex-tray,.hex-stage[data-motion=reduced] .hex-tray .hex-cell{transition:none}

.hex-rotation img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 5px 6px #0009)}
#rotate-left img{transform:scaleX(-1)}
.hex-rotation:hover:not(:disabled){filter:brightness(1.12)}
.hex-rotation:active:not(:disabled){transform:translateY(1px) scale(.96)}

.hex-cell.joker img{filter:none}
.hex-cell.joker .hex-number{display:none}

.hex-cell.crystal img{filter:hue-rotate(var(--hue)) saturate(.48) brightness(.94) contrast(.9)}
.hex-cell.crystal .hex-number{text-shadow:0 2px 2px #061827,0 0 5px #061827;-webkit-text-stroke:.35px #102b3b80}

.hex-cell.aluminium img{filter:hue-rotate(var(--hue)) saturate(.42) brightness(.91) contrast(.98)}
.hex-cell.aluminium .hex-number{text-shadow:0 2px 2px #07131f,0 0 5px #07131f;-webkit-text-stroke:.35px #102b3b80}

.hex-cell.plastic img{filter:hue-rotate(var(--hue)) saturate(1.08)}
.hex-cell.plastic .hex-number{text-shadow:0 2px 2px #06101b,0 0 5px #06101b}

.hex-tray.demo-rotating{transition:width .65s ease-in-out,height .65s ease-in-out}
.hex-tray.demo-rotating .hex-cell{transition:left .65s ease-in-out,top .65s ease-in-out}
.hex-tray.demo-source .hex-cell{visibility:hidden}
@media(prefers-reduced-motion:reduce){.hex-tray.demo-rotating,.hex-tray.demo-rotating .hex-cell{transition:none}}
.hex-stage[data-motion=reduced] .hex-tray.demo-rotating,.hex-stage[data-motion=reduced] .hex-tray.demo-rotating .hex-cell{transition:none}

/* Tablet budget includes both the board and the size-dependent incoming tray. */
@media (min-width:600px) and (pointer:coarse){
 .hex-stage{--board-size:min(100cqw,max(320px,calc((100svh - 360px - var(--anchor-reserve))/1.18)),560px)}
 body.has-game-anchor .hex-stage{padding-bottom:0}
}