/* Beasties: Ice Slide (IceGame.swift: IceBoard, IceHollows, IceNest, IceMonster, labFrame). .isl is one pond:
 * the static frame, hollows, nests and rocks are one SVG (100 units a cell, 24 around, 12 more for the shadow), the
 * monsters are tiles over it, positioned by --c / --r in % of .isl-grid; trails and FX live in that grid too.
 * --cell = one cell in cqw of .isl. Dark like the app in both themes. Class prefix: isl. */
.isl { --cell: calc(10000cqw / var(--pw)); position: relative; container-type: inline-size; width: 100%; box-sizing: border-box; user-select: none; -webkit-user-select: none; }
.isl-tilt { position: absolute; inset: 0; transform: perspective(120cqw) rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 5deg)); transition: transform .3s cubic-bezier(.3, 1.7, .5, 1); }
.isl-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.isl-grid { position: absolute; }
.isl-trails { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.isl-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

/* the nest: dashed in the monster's colour; taken, it glows yellow (IceNest) */
.isl-nest .isl-nf, .isl-nest .isl-nb { transition: fill-opacity .3s, stroke .3s, stroke-width .3s; }
.isl-nest.is-full .isl-nf { fill-opacity: .5; }
.isl-nest.is-full .isl-nb { stroke: #ffd400; stroke-width: 7; stroke-dasharray: none; }

/* a monster: the app's LabMonsterTile (80 % of a cell; the exported picture has 12 % air around the tile, so it is
 * 99.2 % of a cell), its face by mood like IceMonster: wow while sliding, happy at home, idle otherwise */
.isl-m { position: absolute; z-index: 2; left: calc(var(--c) * 100% / var(--w)); top: calc(var(--r) * 100% / var(--h)); width: calc(100% / var(--w)); height: calc(100% / var(--h)); display: grid; place-items: center; transition-property: left, top; transition-timing-function: cubic-bezier(.42, 0, 1, 1); transition-duration: .3s; }
.isl-t { position: relative; display: block; width: 99.2%; aspect-ratio: 1; transition: transform .25s; }
.isl-t img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.isl-t img.is-idle, .isl-m.is-home .isl-t img.is-happy, .isl-m.is-moving .isl-t img.is-wow { opacity: 1; }
.isl-m.is-home .isl-t img.is-idle, .isl-m.is-moving .isl-t img.is-idle { opacity: 0; }
.isl-m.is-moving .isl-t { transform: rotate(var(--rot, 0deg)); }
.isl-m.is-bump .isl-t { animation: isl-bump .43s ease-out; }
.isl-m.is-plop .isl-t { animation: isl-plop .6s ease-out; }
@keyframes isl-bump { 0% { transform: none; } 18% { transform: scale(1.18, .84); } 55% { transform: scale(.95, 1.05); } 100% { transform: none; } }
@keyframes isl-plop { 0% { transform: none; } 23% { transform: translateY(-44%); } 50% { transform: translateY(8%) scale(1.06, .92); } 75% { transform: translateY(-3%); } 100% { transform: none; } }

/* trails in the family colour, fading out after the slide */
.isl-trail { stroke-width: 36; stroke-linecap: round; stroke-opacity: .45; stroke-dasharray: 100 200; transition-property: stroke-dashoffset; transition-timing-function: cubic-bezier(.42, 0, 1, 1); }
.isl-trail.is-gone { stroke-opacity: 0; transition: stroke-opacity .35s ease-out; }
/* a tilt that moves nothing: a short shake */
.isl.is-nope .isl-tilt { animation: isl-nope .3s ease-out; }
@keyframes isl-nope { 0%, 100% { translate: 0; } 25% { translate: -1.2cqw 0; } 60% { translate: 1cqw 0; } }

/* FX: bits, ring, banner; the guide's lines, rings and finger */
.isl-bit { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.isl-ring { position: absolute; aspect-ratio: 1; border-radius: 50%; border: calc(var(--cell) * .07) solid #ffd400; box-sizing: border-box; animation: isl-ring .6s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes isl-ring { from { transform: translate(-50%, -50%) scale(.25); opacity: .95; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.isl-banner { position: absolute; z-index: 6; left: 50%; top: 48%; transform: translate(-50%, -50%) rotate(-4deg); padding: 2cqw 5cqw; border-radius: 4cqw; background: #ffd400; color: #0e0b1a; font-family: var(--display); font-size: 9cqw; font-weight: 800; line-height: 1; white-space: nowrap; text-transform: uppercase; box-shadow: inset 0 0 0 .9cqw #0e0b1a, 0 1.6cqw 0 #0e0b1a; animation: isl-banner .5s cubic-bezier(.3, 1.6, .5, 1) both; pointer-events: none; }
@keyframes isl-banner { from { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); } }
.isl-guide { stroke-width: 9; stroke-dasharray: 2 20; stroke-linecap: round; animation: isl-dash .9s linear infinite; }
@keyframes isl-dash { to { stroke-dashoffset: -22; } }
.isl-mark { position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; border-radius: 24%; box-shadow: 0 0 0 calc(var(--cell) * .06) #ffd400, 0 0 calc(var(--cell) * .3) rgba(255, 212, 0, .7); animation: isl-hl .8s ease-in-out infinite alternate; }
@keyframes isl-hl { from { opacity: .5; } to { opacity: 1; } }
.isl-finger { position: absolute; width: calc(var(--cell) * .5); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 calc(var(--cell) * .05) rgba(255, 255, 255, .45); }

.isl:not(.is-live) .isl-m { transition: none; }
@media (prefers-reduced-motion: reduce) { .isl *, .gx.is-ice * { transition: none !important; animation: none !important; } }

/* ---------- the game screen and the card ---------- */
.gx.is-ice { --pw: 19%; }
.gx-head.is-ice { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; margin-top: 2px; }
.gx.is-ice .gx-icons, .gx.is-ice .gx-pill { margin-top: 14px; }
.gx.is-ice .gx-icons { display: inline-flex; gap: 10px; color: #ede7ff; }
.gx.is-ice .gx-icons svg { width: 22px; height: 22px; }
.gx.is-ice .gx-pill { white-space: nowrap; }
.gx.is-ice .gx-title { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.gx.is-ice .gx-title small { font-size: .7rem; font-weight: 600; color: #8f86b8; }
.gx.is-ice .gx-title b { font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.gx.is-ice .gx-stars { justify-content: center; gap: 3px; margin-top: 2px; }
.gx.is-ice .st { width: 17px; height: 17px; }
.isl-moves { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .66rem; font-weight: 600; color: #8f86b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.isl-moves i { font-style: normal; }
.isl-next { display: inline-flex; align-items: center; gap: 2px; transition: color .25s; }
.isl-next .st-next { width: 9px; height: 9px; color: currentColor; }
.isl-next.is-hot { color: #ff4d6d; }
.isl-moves.is-out i, .isl-moves.is-out .isl-next { display: none; }
.bst-phone .gx-stage.is-ice { margin-top: auto; }
.bst-phone .gx.is-ice .gx-bottom { margin-bottom: auto; }
.gx-tools.is-2 { grid-template-columns: repeat(2, 1fr); max-width: 200px; margin-left: auto; margin-right: auto; }
.gx.is-ice .gx-tool.is-off { opacity: .35; }
.gx-stage.is-ice .isl { z-index: 1; }
.bst-board-card.is-ice { max-width: 400px; padding: 14px 14px 18px; background: linear-gradient(180deg, #2a1c63, #17112f); border-color: #0e0b1a; }
.isl-ui { --pw: 19%; position: relative; }
.isl-ui .gx-stage .gx-peek, .gx.is-ice .gx-peek { --px: .5; }
.isl-ui .gx-toast.is-lost span, .gx.is-ice .gx-toast span { display: inline-block; }

/* ---------- on the site: tiles, tiers, fan, card picture, how ---------- */
.bst-mini.is-ice { background: transparent; background-image: none; border-radius: 4px; }
.bst-mini.is-ice canvas { height: 100%; }
.bst-tier.is-ice .bst-tier-board { margin-bottom: 10px; }
.bst-fan-card.is-ice { display: flex; align-items: flex-end; justify-content: center; padding: 6px; background: #1a1533; border-color: #0e0b1a; }
.isl-fan { flex: none; min-width: 0; }
.bst-home-pic.isl-home { position: relative; display: block; width: 62%; max-width: 150px; aspect-ratio: 1; margin: 0 auto; }
.bst-home-pic.isl-home svg { display: block; width: 100%; height: 100%; transform: rotate(3deg); overflow: visible; }
.bst-tile-pic > .bst-home-pic.isl-home { width: 58%; }
.bst-how-pic .bst-scene:has(.bst-how-isl) { grid-template-columns: minmax(0, 1fr); width: 100%; height: 100%; }
.bst-how-pic .bst-scene-visual:has(> .bst-how-isl) { height: 100%; display: grid; place-items: center; }
.bst-how-isl { height: 90%; aspect-ratio: 548 / 660; }
.bst-how-isl .isl { width: 100%; }

/* ---------- one level ---------- */
.isl-facts { list-style: none; margin: 0 0 clamp(22px, 3vw, 32px); padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.isl-facts li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: .92rem; }
.isl-facts strong { font-family: var(--display); font-size: 1.5rem; color: var(--text); display: inline-flex; gap: 2px; }
.isl-facts .st { width: 18px; height: 18px; color: #ffd400; }
.isl-play-stage { border-radius: 22px; outline: none; touch-action: none; }
.isl-play-stage:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.isl-play-stage .isl, .isl-sol .isl { cursor: grab; }
.bst-level.is-ice .isl-ui { padding: 10px 10px 4px; border-radius: 22px; background: linear-gradient(180deg, #2a1c63, #17112f); box-shadow: inset 0 0 0 3px #0e0b1a, 0 8px 0 #0e0b1a; }
.isl-bar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "count pad" "tools pad"; align-items: center; gap: 8px 16px; margin-top: 22px; }
.isl-count { grid-area: count; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.isl-count-stars { display: inline-flex; gap: 3px; }
.isl-count-stars .st { width: 22px; height: 22px; color: #ffd400; transition: color .3s; }
.isl-count-stars .st.is-lost { color: var(--line-strong, #8f86b8); opacity: .45; }
.isl-count .isl-moves { font-size: .9rem; color: var(--text-2); }
.isl-tools { grid-area: tools; display: flex; gap: 8px; }
.isl-tool { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.isl-tool svg { width: 18px; height: 18px; }
.isl-tool:disabled { opacity: .4; cursor: default; }
.isl-pad { grid-area: pad; display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 6px; }
.isl-dir { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; transition: transform .12s, background-color .15s; }
.isl-dir:hover { background: var(--surface-2); }
.isl-dir:active { transform: scale(.92); }
.isl-dir:focus-visible, .isl-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.isl-dir .isl-arr { width: 22px; height: 22px; }
.isl-dir.is-d0 { grid-column: 2; grid-row: 1; }
.isl-dir.is-d3 { grid-column: 1; grid-row: 2; }
.isl-dir.is-d2 { grid-column: 2; grid-row: 2; }
.isl-dir.is-d1 { grid-column: 3; grid-row: 2; }
.isl-say { margin: 14px 0 0; color: var(--text-2); font-size: .95rem; min-height: 3em; }
.bst-spoiler.is-ice { overflow: visible; }
.isl-sol { transition: filter .35s ease; }
.bst-spoiler.is-ice:not(.is-open) .isl-sol { filter: blur(9px) saturate(.6); pointer-events: none; }
.isl-strip { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.isl-strip li { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px 4px 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s, border-color .2s; }
.isl-strip .isl-arr { width: 16px; height: 16px; }
.isl-strip li.is-done { color: var(--muted); opacity: .6; }
.isl-strip li.is-now { opacity: 1; background: var(--zap); color: var(--zap-ink); border-color: transparent; }
.isl-step-n { min-width: 1.2em; text-align: right; }
@media (max-width: 520px) {
	.isl-bar { grid-template-columns: 1fr; grid-template-areas: "count" "pad" "tools"; justify-items: center; }
	.isl-count { align-items: center; }
}