/* Beasties: Dens (Reviere). The board as in DensView.swift: a dark well, one tile per cell, tiles of a den joined by
 * bridges, a lit colour once the den has its monster, crosses in the sticker ink, monsters lying in their tile with
 * a blanket edge and two little hands. Every size is relative to the cell, so one board works from a 40 px tile to
 * the level page. inc/beasties-dens.php draws it, assets/js/beasties-dens.js animates it. */

.den { --well: #1a1533; --ink: #0e0b1a; --hot: #ff4d6d; position: relative; width: 100%; box-sizing: border-box; container-type: inline-size; }
.den-grid { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.den-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.dc { --tile: color-mix(in srgb, var(--fc) 64%, var(--well)); position: relative; aspect-ratio: 1; min-width: 0; }
.dc.is-home { --tile: color-mix(in srgb, var(--fc) 88%, var(--well)); }
.dc.f0 { --fc: #3fc1a5; } .dc.f1 { --fc: #ff7ab6; } .dc.f2 { --fc: #ff8a3d; } .dc.f3 { --fc: #4db8ff; } .dc.f4 { --fc: #7ed957; }
.dc.f5 { --fc: #8e5cff; } .dc.f6 { --fc: #e84855; } .dc.f7 { --fc: #ffc83d; } .dc.f8 { --fc: #c7a6ff; } .dc.f9 { --fc: #2fb7c9; }
/* the tile, and the bridges to the right and down inside a den */
.dt { position: absolute; z-index: 1; inset: 10%; border-radius: 15%; background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background-color .35s; }
.dc.is-br::before, .dc.is-bd::after { content: ""; position: absolute; z-index: 0; background: var(--tile); transition: background-color .35s; }
.dc.is-br::before { left: 88%; width: 24%; top: 25%; height: 50%; }
.dc.is-bd::after { top: 88%; height: 24%; left: 25%; width: 50%; }
/* the cross: two round strokes in the sticker ink */
.dt::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%) scale(0); opacity: 0;
	background: rgba(14, 11, 26, .85);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 3l14 14M17 3L3 17' stroke='%23000' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 3l14 14M17 3L3 17' stroke='%23000' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), opacity .15s;
}
.dc.is-x .dt::after { transform: translate(-50%, -50%); opacity: 1; }
.dc.is-gx:not(.is-x) .dt::after { transform: translate(-50%, -50%); opacity: 1; background: rgba(255, 255, 255, .75); }
.den.is-party .dc.is-x .dt::after { opacity: 0; transform: translate(-50%, -50%) scale(.4); transition-duration: .4s; }

/* a monster in its tile */
.dm { position: absolute; z-index: 2; inset: 10%; border-radius: 15%; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 68%, var(--well)), color-mix(in srgb, var(--fc) 85%, var(--well))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); animation: den-in .32s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 50% 100%; }
.dm-h { position: absolute; left: 6%; width: 88%; top: -15%; height: auto; max-width: none; }
.dm-b { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; border-radius: 14% 14% 0 0 / 45% 45% 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 70%, #fff), color-mix(in srgb, var(--fc) 88%, #fff)); box-shadow: 0 -1.5px 0 rgba(14, 11, 26, .4); }
.dm-b::before { content: ""; position: absolute; left: 10%; right: 10%; top: 18%; height: max(1.5px, 13%); border-radius: 999px; background: rgba(255, 255, 255, .45); }
.dm-hd { position: absolute; left: 20%; top: 71%; width: 20%; height: 14%; border-radius: 45% 45% 40% 40%; background: var(--fc); box-shadow: inset 0 0 0 max(1px, .3cqw) var(--ink); }
.dm-hd::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 45%; border-left: max(1px, .25cqw) solid var(--ink); border-right: max(1px, .25cqw) solid var(--ink); }
.dm-hd.is-r { left: 60%; }
.dm.is-hop { animation: den-hop .42s cubic-bezier(.3, .7, .4, 1); }
.dm.is-ghost { opacity: .62; filter: saturate(.7); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); animation: den-in .3s ease-out, den-ghost 1.4s ease-in-out .3s infinite; }
@keyframes den-in { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes den-hop { 0% { transform: none; } 35% { transform: translateY(-18%); } 60% { transform: translateY(3%) scale(1.04, .95); } 100% { transform: none; } }
@keyframes den-ghost { 0%, 100% { opacity: .62; } 50% { opacity: .4; } }
.dc.is-pop .dt::after { animation: den-x .26s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes den-x { 0% { transform: translate(-50%, -50%) scale(.2); } 100% { transform: translate(-50%, -50%) scale(1); } }

/* highlights (scenes and the solution player) */
.dh { position: absolute; z-index: 3; inset: 5%; border-radius: 19%; pointer-events: none; opacity: 0; transition: opacity .25s, background-color .25s, box-shadow .25s; }
.dc.is-den .dh, .dc.is-src .dh { opacity: 1; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 max(2px, .55cqw) rgba(255, 255, 255, .85); }
.dc.is-line .dh { opacity: 1; background: rgba(255, 212, 0, .2); box-shadow: inset 0 0 0 max(2px, .5cqw) rgba(255, 212, 0, .6); }
.dc.is-key .dh { opacity: 1; box-shadow: inset 0 0 0 max(3px, .8cqw) #ffd400, 0 0 14px rgba(255, 212, 0, .55); animation: den-key 1.3s ease-in-out infinite; }
.dc.is-bad .dh, .dc.is-fail .dh { opacity: 1; background: rgba(255, 77, 109, .3); box-shadow: inset 0 0 0 max(2px, .6cqw) var(--hot); }
.dc.is-fail .dh { animation: den-fail .45s ease-in-out 3; }
.dc.is-flash .dh { animation: den-flash .85s ease-out; }
@keyframes den-key { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }
@keyframes den-fail { 0%, 100% { transform: none; } 30% { transform: translateX(-6%); } 65% { transform: translateX(6%); } }
@keyframes den-flash { 0% { opacity: 1; background: rgba(255, 77, 109, .45); box-shadow: inset 0 0 0 3px var(--hot); transform: translateX(10%); } 15% { transform: translateX(-10%); } 30% { transform: translateX(6%); } 45% { transform: none; opacity: 1; background: rgba(255, 77, 109, .45); box-shadow: inset 0 0 0 3px var(--hot); } 100% { opacity: 0; } }
.den-touch { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .28); box-shadow: 0 0 0 2px rgba(255, 255, 255, .75); pointer-events: none; }
.den:not(.is-live) * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .den *, .bst-den-why { animation: none !important; transition: none !important; } }

/* the app's panel around the board: a chunky frame, the dark well inside (also in light mode) */
.den-panel { padding: 10px; border-radius: 18px; background: linear-gradient(180deg, #2f294f, #241e45); box-shadow: inset 0 0 0 3px #0e0b1a, 0 7px 0 #0e0b1a; }
.den-panel .den { padding: 4px; border-radius: 12px; background: #1a1533; box-shadow: inset 0 0 0 2.5px #0e0b1a; }
.den-panel.is-small { padding: 6px; border-radius: 13px; box-shadow: inset 0 0 0 2px #0e0b1a, 0 4px 0 #0e0b1a; }
.den-panel.is-small .den { padding: 3px; border-radius: 9px; box-shadow: inset 0 0 0 2px #0e0b1a; }

/* ---------- the game screen ---------- */
.gx.is-dens .gx-title .gx-stars { justify-content: center; gap: 3px; margin-top: 4px; }
.gx.is-dens .gx-title .st { width: 17px; height: 17px; }
.gx.is-dens .gx-title .st-fall { top: 0; }
.bst-phone .gx-stage.is-dens { margin-top: auto; padding-top: calc(var(--pw) * .7); }
.gx-stage.is-dens .den-panel { position: relative; z-index: 1; }
.bst-phone .gx.is-dens .gx-bottom { margin-bottom: auto; }
.bst-phone .gx.is-dens .gx-tools { margin-top: 20px; }
.gx.is-dens .gx-tool > svg { width: 22px; height: 22px; padding: 6px 13px; transition: background-color .2s, color .2s; }
.gx.is-dens .gx-tool.is-off { opacity: .4; }
.gx.is-dens .gx-tool.is-active .gx-tool-label { color: #ede7ff; }

/* ---------- on the site ---------- */
.bst-board-card.is-dens { max-width: 430px; padding: 16px 16px 22px; }
.bst-tier.is-dens .bst-tier-board { margin-bottom: 4px; }
.bst-mini.is-dens { background: #1a1533; background-image: none; }
.bst-fan-card.is-dens { display: flex; align-items: center; padding: 7px; background: #241e45; border-color: #0e0b1a; }
.bst-fan-card.is-dens .den { padding: 3px; border-radius: 12px; background: #1a1533; }
.bst-game-well { width: 100%; }
.bst-game.is-dens .bst-game-monster { display: none; }
.bst-how-den { position: relative; width: 60%; }
.bst-how-den .den { padding: 3px; border-radius: 10px; background: #1a1533; box-shadow: inset 0 0 0 2px #0e0b1a, 0 14px 30px -14px rgba(0, 0, 0, .6); }
.bst-how-pic .bst-scene:has(.bst-how-den) { grid-template-columns: minmax(0, 1fr); height: 100%; }
.bst-how-pic .bst-scene-visual:has(> .bst-how-den) { width: 100%; height: 100%; display: grid; place-items: center; }
.bst-how-den.is-reveal .den { animation: bst-unblur 5s ease-in-out infinite; }
@media (max-width: 860px) { .bst-how-den { width: auto; height: 86%; aspect-ratio: 1; } }
@media (prefers-reduced-motion: reduce) { .bst-how-den .den { animation: none !important; } }

/* one level: the player and the solution */
.bst-level.is-dens .bst-boards { align-items: start; }
.bst-player.is-dens .den-panel { max-width: 520px; }
.bst-player.is-dens .bst-player-bar { margin-top: 20px; }
.bst-den-why { min-height: 4.8em; margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); line-height: 1.5; }
.bst-den-why.is-new { animation: bst-in .35s ease-out; }
.bst-spoiler .den-panel { transition: filter .35s ease; }
.bst-spoiler:not(.is-open) .den-panel { filter: blur(9px) saturate(.6); user-select: none; }
.bst-board.is-solution .bst-spoiler { border-radius: 18px; }
.bst-move-list.is-dens ol { columns: 1; }
.bst-move-list.is-dens li { padding: 6px 8px; line-height: 1.5; }
.bst-den-pre { color: var(--muted); }
@media (max-width: 560px) {
	.den-panel { padding: 7px; border-radius: 15px; }
	.den-panel .den { padding: 3px; }
}