/* Beasties: Hive Stacks (inc/beasties-hexa.php, assets/js/beasties-hexa.js).
 * The hive as in HexaView.swift: pointy hexes, cell #241C48 with a faint rim (white 7 %), cell = s·√3·0.94 × 2s·0.94;
 * a tile (HexaTileArt) is s·√3·0.88 wide and squashed to 0.82 of a regular hex: a face from the colour mixed 22 % with
 * white down to the colour, a rim mixed 25 % with black and a dark edge 0.07 of its width below (35 % black; mixes in
 * OKLab like Color.mix). Stacks rise 0.1·s per tile, six tiles at most, the count of the top colour on the top tile.
 * .hxw is the container: --s = one hex radius = 100cqw / (√3·(2R+1)), set from --bw (board width in s). */

.hxw { container-type: inline-size; position: relative; width: 100%; user-select: none; -webkit-user-select: none; }
.hx { --s: calc(100cqw / var(--bw)); position: relative; width: 100%; height: calc(var(--bh) * var(--s)); }
.hx-cells, .hx-tiles, .hx-nums { position: absolute; inset: 0; }
.hx-nums { z-index: 3000; pointer-events: none; }
.hx-tiles { pointer-events: none; }

/* family colours: --c, face top --cl (22 % white), rim --cs (25 % black), edge --cd (35 % black) */
.hc0 { --c: #3fc1a5; --cl: #75cfb8; --cs: #28826f; --cd: #1f6b5a; }
.hc1 { --c: #ff7ab6; --cl: #ff99c6; --cs: #ae517b; --cd: #8f4164; }
.hc2 { --c: #ff8a3d; --cl: #ffa66f; --cs: #ae5c26; --cd: #8f4b1e; }
.hc3 { --c: #4db8ff; --cl: #7bc8ff; --cs: #327cae; --cd: #27668f; }
.hc4 { --c: #7ed957; --cl: #9ce281; --cs: #549338; --cd: #44792d; }
.hc5 { --c: #8e5cff; --cl: #a385ff; --cs: #5f3cae; --cd: #4d308f; }
.hc6 { --c: #e84855; --cl: #f37779; --cs: #9e2e37; --cd: #82242c; }
.hc7 { --c: #ffc83d; --cl: #ffd576; --cs: #ae8726; --cd: #8f6f1e; }
.hc8 { --c: #c7a6ff; --cl: #d3baff; --cs: #8770ae; --cd: #6e5b8f; }
.hc9 { --c: #2fb7c9; --cl: #6dc7d5; --cs: #1d7b88; --cd: #16656f; }

/* a cell */
.hxc {
	position: absolute; left: calc((var(--x) - .8141) * var(--s)); top: calc((var(--y) - .94) * var(--s));
	width: calc(1.6282 * var(--s)); height: calc(1.88 * var(--s)); padding: 0; margin: 0; border: 0;
	background: rgba(255, 255, 255, .07); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	transition: background-color .2s;
}
.hxc::before { content: ""; position: absolute; inset: 0; background: #241c48; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transform: scale(.95); transition: background-color .2s; }
.hxc.is-mark { background: #ffd400; animation: hx-key 1.2s ease-in-out infinite; }
.hxc.is-mark::before { background: #3c3050; transform: scale(.88); }
.hxc.is-ghost { background: #4db8ff; }
.hxc.is-ghost::before { background: #26406a; transform: scale(.9); }
button.hxc { cursor: pointer; }
button.hxc:disabled { cursor: default; }
button.hxc:not(:disabled):hover::before { background: #6a5520; }
button.hxc:focus-visible { background: #ffd400; outline: none; }
.hx-touch { position: absolute; z-index: 3001; left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s)); width: calc(1.3 * var(--s)); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
	background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); animation: hx-touch .45s ease-out forwards; }

/* a tile: the element is the union of the face and its edge below (dark), ::before = rim, ::after = face */
.hxt {
	position: absolute; left: calc((var(--x) - .7621) * var(--s)); top: calc((var(--y) - var(--l, 0) * .1 - .7216) * var(--s));
	width: calc(1.5242 * var(--s)); height: calc(1.5499 * var(--s)); background: var(--cd);
	clip-path: polygon(50% 0, 100% 23.28%, 100% 76.72%, 50% 100%, 0 76.72%, 0 23.28%);
	transition: left .32s cubic-bezier(.3, 1.25, .5, 1), top .32s cubic-bezier(.3, 1.25, .5, 1), opacity .25s, transform .3s ease-in;
}
.hxt::before, .hxt > b { position: absolute; left: 0; right: 0; top: 0; height: 93.12%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hxt::before { content: ""; background: var(--cs); }
.hxt > b { background: linear-gradient(var(--cl), var(--c)); transform: scale(.952, .94); }
.hxt.is-hid { opacity: 0; }
.hxt.is-eat { opacity: 0; transform: scale(.3) translateY(-30%); transition: opacity .25s ease-in, transform .28s ease-in; }
.hxn {
	position: absolute; left: calc(var(--x) * var(--s)); top: calc((var(--y) - var(--l, 0) * .1) * var(--s)); transform: translate(-50%, -52%);
	color: #fff; font: 900 calc(.52 * var(--s))/1 ui-rounded, "SF Pro Rounded", Nunito, system-ui, sans-serif; font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 1.5px rgba(0, 0, 0, .55); transition: top .32s cubic-bezier(.3, 1.25, .5, 1);
}
.hxw:not(.is-live) .hxt, .hxw:not(.is-live) .hxn { transition: none; }

/* the solution map: every cell lists the stacks dropped on it */
.hx.is-map .hx-nums { z-index: 1; }
.hxm {
	position: absolute; left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s)); transform: translate(-50%, -50%);
	display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: calc(.05 * var(--s));
	width: calc(1.5 * var(--s)); color: #fff; font: 800 calc(.3 * var(--s))/1 ui-rounded, "SF Pro Rounded", Nunito, system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.hxm b { display: inline-grid; place-items: center; min-width: calc(.42 * var(--s)); padding: calc(.05 * var(--s)) calc(.04 * var(--s)); border-radius: 999px; background: #ffd400; color: #0e0b1a; }

/* the goal bar (progress): capsule in the well colour, filled in Theme.zap, "done / goal" */
.hx-goal { display: flex; align-items: center; gap: 2.6cqw; padding: 0 6cqw; margin-bottom: 2cqw; }
.hx-bar { position: relative; flex: 1; height: max(8px, 3cqw); border-radius: 999px; background: #1a1533; overflow: hidden; }
.hx-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: max(3cqw, var(--p, 0%)); border-radius: inherit; background: #ffd400; transition: width .45s cubic-bezier(.3, 1.3, .5, 1); }
.hx-goal b { color: #ede7ff; font: 800 max(11px, 3.6cqw)/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Gnatz peeks over the top row (the board keeps 0.9 s of room above it for tall stacks) */
.hx-stage { --pw: 21%; position: relative; padding-top: max(0px, calc(var(--pw) * .764 - .45 * 100cqw / var(--bw, 8.66))); }
.hx-stage .hx { z-index: 1; }
.hx-stage .gx-peek { --px: .5; z-index: 2; }
.hx-stage .gx-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hxw .fx-ring { border: 3px solid #ffd400; }
.hx-combo {
	position: absolute; z-index: 4; padding: .3em .7em; border-radius: 10px; background: #ffd400; color: #0e0b1a;
	font: 900 max(12px, 4cqw)/1 var(--display, system-ui); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
	box-shadow: 0 3px 0 #0e0b1a; pointer-events: none;
}
.hxw.is-party .hx-cells { filter: drop-shadow(0 0 14px rgba(255, 212, 0, .45)); transition: filter .4s; }
.hxw.is-lost .hx-cells .hxc::before { background: #3a1f3a; }

/* the tray: three offers in a well (HexaOffer: s' = min(0.85 s, 34 pt), tiles s'·√3·0.9, count on top if > 1) */
.hx-tray {
	--os: min(calc(.85 * 100cqw / var(--bw, 8.66)), 8.7cqw);
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 30.8cqw; margin-top: 2.6cqw;
	border-radius: 4.6cqw; background: rgba(26, 21, 51, .6);
}
.hx-off { position: relative; display: block; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; }
button.hx-off { cursor: pointer; border-radius: 4.6cqw; }
button.hx-off:focus-visible { outline: 2px solid #ffd400; outline-offset: -4px; }
.hx-ost { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translateY(calc(var(--n, 1) * .05 * var(--os))); }
.hx-ost .hxt { --x: 0; --y: 0; --s: var(--os); left: calc(-.7794 * var(--os)); top: calc((-.7379 - var(--l) * .1) * var(--os)); width: calc(1.5588 * var(--os)); height: calc(1.5850 * var(--os)); transition: none; }
.hx-ost .hxn { --s: var(--os); left: 0; top: calc(-1 * var(--l) * .1 * var(--os)); font-size: calc(.53 * var(--os)); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); z-index: 20; transition: none; }
.hx-ring { position: absolute; left: 50%; top: 50%; width: calc(1.992 * var(--os)); height: auto; transform: translate(-50%, calc(-50% + .35 * var(--os))); opacity: 0; overflow: visible; transition: opacity .15s; }
.hx-ring polygon { fill: none; stroke: #ffd400; stroke-width: 6; stroke-linejoin: round; }
.hx-off.is-sel .hx-ring { opacity: 1; }
.hx-off.is-sel .hx-ost { animation: hx-bounce .35s cubic-bezier(.3, 1.6, .5, 1); }
.hx-off.is-new .hx-ost { animation: hx-in .38s cubic-bezier(.3, 1.6, .5, 1) both; }
.hx-off.is-new:nth-child(2) .hx-ost { animation-delay: .06s; }
.hx-off.is-new:nth-child(3) .hx-ost { animation-delay: .12s; }

@keyframes hx-key { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 6px rgba(255, 212, 0, .8)); } }
@keyframes hx-touch { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; } }
@keyframes hx-bounce { 0% { scale: 1; } 40% { scale: 1.1; } 100% { scale: 1; } }
@keyframes hx-in { 0% { scale: .2; opacity: 0; } 100% { scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hxw *, .hxw *::before, .hxw *::after { animation: none !important; transition: none !important; } }

/* ---------- on the game screen ---------- */
.gx.is-hexa .gx-head { margin-top: 2px; margin-bottom: 10px; }
.gx.is-hexa .gx-title .gx-stars.is-ghost { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); opacity: 0; pointer-events: none; }
.gx.is-hexa .gx-title { position: relative; }
.gx.is-hexa .hxw { margin-top: 4px; }
.gx-tools.is-one { grid-template-columns: 1fr; margin-top: 12px; }
.gx.is-hexa .hx-ti { position: relative; display: block; }
.gx.is-hexa .hx-ti > svg { display: block; width: 22px; height: 22px; padding: 6px 13px; border-radius: 999px; transition: background-color .2s, color .2s; }
.gx.is-hexa .gx-tool.is-active .hx-ti > svg { background: #ffd400; color: #120f24; }
.gx.is-hexa .gx-tool.is-off { opacity: .45; }
.gx.is-hexa .gx-tool.is-press .hx-ti { animation: bst-press .3s ease-out; }
.gx.is-hexa .gx-bottom { margin-top: 2px; }

/* ---------- guide ---------- */
.bst-board-card.is-hexa { padding: 14px 14px 16px; max-width: 380px; background: linear-gradient(180deg, #2f294f, #241e45); border-color: #0e0b1a; }
.bst-board-card.is-hexa.is-r1 { max-width: 300px; }
.bst-tier.is-hexa .bst-tier-board { max-width: 210px; margin: 0 auto 6px; padding: 8px; border-radius: 16px; background: #241e45; }
.hxw.is-static .hx-tray { margin-top: 1cqw; }

/* ---------- overview ---------- */
.bst-mini.is-hexa { background: #1a1533; }
.bst-fan-card.is-hexa { display: grid; place-items: center; padding: 10px; background: #241e45; }
.hx-fan { width: 82%; }
.bst-how-hx { width: 50%; }
.hxw.is-how .hxc.is-mark { animation: hx-key 1.6s ease-in-out infinite; }
.hxw.is-how .hx-off.is-sel .hx-ring { animation: hx-blink 1.6s ease-in-out infinite; }
@keyframes hx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.bst-how-board.is-hexa { width: 50%; display: grid; place-items: center; }
.bst-how-board.is-hexa .hx { animation: bst-unblur 5s ease-in-out infinite; }
.bst-how-board.is-hexa .hx { container-type: inline-size; }
/* the game card: the app's MiniHexa, drawn (until an exported home-hexa.webp exists) */
.hx-home { position: relative; display: inline-block; transform: rotate(-3deg); }
.hx-home-svg { display: block; width: 156px; height: auto; }
.hx-home-gnatz { position: absolute; right: -18px; bottom: -9px; width: 40px; height: auto; transform: scaleX(-1) rotate(6deg); }
.bst-game.is-hexa .bst-game-monster { display: none; }
.bst-tile-pic .hx-home { zoom: .8; }

/* ---------- one level ---------- */
.bst-level.is-hexa .bst-boards { align-items: start; }
.bst-hx-stage { padding: 12px 12px 14px; border-radius: 22px; background: linear-gradient(180deg, #2f294f, #241e45); box-shadow: inset 0 0 0 3px #0e0b1a, 0 8px 0 #0e0b1a, 0 30px 60px -30px rgba(0, 0, 0, .7); }
.bst-hx-stage .hxw { max-width: 440px; margin: 0 auto; }
.bst-level.is-hexa .bst-player-bar { margin-top: 16px; }
.bst-level.is-hexa .hx-say { min-height: 3em; }
.bst-level.is-hexa .hxw.is-party ~ .hx-say, .bst-level.is-hexa.is-done .hx-say { color: var(--zap); font-weight: 700; }
.bst-level.is-hexa.is-dead .hx-say { color: #ff8da1; font-weight: 700; }
.bst-level.is-hexa:not(.is-self) .hx-off { cursor: pointer; }
.hx-modes { display: flex; gap: 4px; width: fit-content; margin: 0 auto 12px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.hx-modes button { padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.hx-modes button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent, #fff); }
.hx-modes button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hx-bar2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 320px; margin: 16px auto 0; }
.hx-bar2[hidden], .bst-level.is-hexa [data-pane][hidden] { display: none; }
.hx-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: transform .15s, border-color .15s; }
.hx-tool svg { width: 22px; height: 22px; }
.hx-tool:hover { border-color: var(--accent); transform: translateY(-2px); }
.hx-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bst-spoiler.is-hexa { display: grid; place-items: center; padding: 16px 14px 20px; border-radius: 22px; background: radial-gradient(80% 80% at 50% 30%, #3a2f74, #1a1533); box-shadow: inset 0 0 0 3px #0e0b1a; }
.hx-sol { width: 100%; max-width: 420px; transition: filter .35s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.bst-spoiler.is-hexa:not(.is-open) .hx-sol { filter: blur(16px) saturate(.5); transform: scale(.94); }
.bst-spoiler.is-hexa .bst-cover { border-radius: 22px; }
.hx-sol-note { color: var(--text-2); font-size: .85rem; }
.bst-level.is-hexa .bst-move-list ol { columns: 2 20em; }
.bst-level.is-hexa .bst-move-list li { break-inside: avoid; }
.hx-sw { display: inline-flex; flex-direction: column-reverse; vertical-align: middle; width: 10px; margin-right: 8px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(14, 11, 26, .5); }
.hx-sw i { display: block; height: 4px; background: var(--c); }
@media (max-width: 760px) { .bst-level.is-hexa .bst-boards { max-width: 560px; } }
@media (max-width: 420px) { .bst-hx-stage, .bst-spoiler.is-hexa { padding: 8px 6px 10px; border-radius: 16px; } .hx-tool { font-size: .72rem; } }