/* GOAT, the daily path puzzle (/play). Everything is scoped under
   .lio-play: this directory ships site-wide. The page wraps in .iso-app
   too, which brings Lio's SVG, his colours and the chip and tool buttons
   from guide.css; what is here is the game's own. Phone first. */

.iso-app.lio-play { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; background: var(--navy); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); font-family: var(--f-body) }
.iso-app.lio-play::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; background: var(--blue); -webkit-mask: var(--iso-pattern) center top/560px; mask: var(--iso-pattern) center top/560px }
.lio-play > * { width: 100%; max-width: 440px }

.lio-play .bar { display: flex; align-items: center; gap: 10px; padding-top: max(env(safe-area-inset-top), 2px) }
.lio-play .mark, .lio-play .bar .slot { display: none } /* kept in the markup for the share picture and the result card's Lio */
.lio-play .title { flex: none; margin: 0; font: 700 1.1rem/1 var(--f-display); letter-spacing: -.01em }
.lio-play .where { flex: 1; text-align: center; white-space: nowrap }
.lio-play .where span { color: var(--on-dark-3); font-weight: 500; font-size: .9rem }
.lio-play .where .lvl { display: inline-flex; align-items: center; gap: 2px; background: none; border: 0; padding: 2px 4px; margin: 0; border-radius: 6px; color: var(--on-dark-3); font: 500 .9rem/1 var(--f-body); cursor: pointer; vertical-align: 1px }
.lio-play .standings .table { margin-top: 0 }
.lio-play .where .boss { display: none; margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: var(--orange); color: var(--navy); font: 700 .62rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .1em; vertical-align: 2px }
.lio-play[data-boss="1"] .where .boss { display: inline-block }
.lio-play .last { margin: 12px 0 0; color: var(--blue-300); font-size: .95rem; text-wrap: balance }
.lio-play .tools { display: flex; gap: 6px; flex: none }

/* Lio: his head in the bar, always (body, hands, halo and shadow hidden;
   the bar's viewBox is set by the controller), and a still copy of him,
   whole, beside the level number on the result card. */
.lio-play .slot { display: flex; justify-content: center }
.lio-play .bar .slot { flex: none }
.lio-play .bar .avatar { height: 44px; margin: 0; padding: 0 }
.lio-play .result .avatar { height: 112px; margin: 0 }
.lio-play .bar .lio :is(.halo, .spark, .lio-shadow, #handL, #handR, #orb), .lio-play .bar #lioAll > :is(.f-top, .f-left, .f-right) { display: none }
.lio-play .bar .lio { animation: none }
.lio-play .result .lio, .lio-play .result .lio * { animation: none }
.lio-play .status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap } /* screen readers only: a visible line moved the board */

/* The board: an SVG the controller fills with cubes; a tap on a lit cube is a hop. */
/* The hub, once all 30 are done: the list of levels alone, no board, no clock, no demonstration under it. */
.lio-play.hub .board, .lio-play.hub .controls, .lio-play.hub .how { display: none }
.lio-play .board { display: block; width: 100%; height: auto; margin-top: 6px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; overflow: visible }
.lio-play .tile { fill: rgba(255,255,255,.03); stroke: rgba(142,184,223,.3); stroke-width: 1; pointer-events: none }
.lio-play .cube { cursor: pointer }
.lio-play .cube polygon { stroke: var(--blue); stroke-width: 1.5; stroke-linejoin: round; transition: fill .15s }
.lio-play .cube .top { fill: var(--navy-600) }
.lio-play .cube .left { fill: var(--navy-700) }
.lio-play .cube .right { fill: #1c2a5c }
/* Landed on: blue with a dark edge, so the grid stays readable where the
   blue tops meet (Xavier: "'visited' and border colors are too similar").
   Within a hop: the outline beats, softly,
   and only after a pause (the controller's `hinting`), so a slow player
   gets the hint and a fast one never sees it. The route itself only shows
   once the level is done. */
.lio-play .cube.on .top { fill: var(--blue); stroke: var(--navy-900) }
.lio-play .cube.on .left, .lio-play .cube.on .right { stroke: var(--blue-300) }
.lio-play.hinting .cube.can .top { stroke: #fff; stroke-width: 2.5; stroke-opacity: .55; animation: lio10-beat 1.6s ease-in-out infinite }
.lio-play .cube.no { transform-box: fill-box; transform-origin: center; animation: lio10-shake .3s }
.lio-play .trail { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; pointer-events: none; transition: opacity .3s }
.lio-play.done .trail { opacity: .85 }
.lio-play .piece { pointer-events: none; transition: transform .18s var(--ease) }
.lio-play .goat { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; user-select: none; filter: drop-shadow(0 1.5px 2.5px rgba(0,0,0,.55)) }
.lio-play .guide { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; pointer-events: none }
/* The teaching boards: the one cube in reach glows steadily (a beat reads as "hit it quick"), and no clock. */
.lio-play.teach .cube.can .top { stroke: #fff; stroke-width: 3; stroke-opacity: .95 }
.lio-play.teach .controls { visibility: hidden }

.lio-play .controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px }
/* How a hop goes, from above: shown under the board after a pause without a hop. */
.lio-play .how { margin: 14px auto 0; max-width: 240px; text-align: center }
.lio-play .how svg { display: block; width: 124px; height: 124px; margin: 0 auto }
.lio-play .how rect { fill: var(--navy-700); stroke: rgba(142,184,223,.35); stroke-width: .04 }
.lio-play .how rect.aim { fill: var(--navy-600); stroke: #fff; stroke-opacity: .55 }
.lio-play .how rect.me { fill: #b7d2ec }
.lio-play .how .l { fill: none; stroke: #fff; stroke-width: .12; stroke-dasharray: .25 .18; stroke-linecap: round; stroke-linejoin: round }
.lio-play .how .dot { fill: var(--orange); transition: cx .35s var(--ease), cy .35s var(--ease) }
.lio-play .how figcaption { margin-top: 8px; font-size: .9rem; color: var(--blue-300); text-wrap: balance }
.lio-play.teach .how svg { width: 96px; height: 96px }
.lio-play .clock, .lio-play .count { font: 600 1rem/1 var(--f-body); color: var(--blue-300); font-variant-numeric: tabular-nums }
.lio-play .count { color: var(--on-dark-3) }

.lio-play .card { margin-top: 12px; background: var(--navy-700); border: 1.5px solid var(--navy-600); border-radius: 18px; padding: 16px 18px; text-align: center }
.lio-play .card + .status { margin-top: 18px }
.lio-play .result .head { display: flex; align-items: center; justify-content: center; gap: 16px }
.lio-play .result .headline { margin: 0; text-align: left }
.lio-play .result .headline small { display: block; font: 600 .72rem/1 var(--f-body); color: var(--on-dark-3); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 6px }
.lio-play .result .headline strong { display: block; font: 700 2.5rem/1 var(--f-display); letter-spacing: -.02em; color: #fff }
.lio-play .actions { flex-wrap: wrap }
/* The result's buttons keep their place but stay out of sight until the
   table has built, so a tap never lands on a button that has just moved. */
.lio-play .actions.pending { visibility: hidden }
.lio-play .sharebox { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--navy-600); text-align: center }
.lio-play .sharebox img { display: block; width: min(100%, 300px); margin: 0 auto; border-radius: 12px; border: 1px solid var(--navy-600) }
.lio-play .sharebox .hint { margin: 10px 0 0 }
.lio-play .actions { display: flex; justify-content: center; gap: 8px; margin-top: 12px }
.lio-play .next { margin: 12px 0 0; color: var(--on-dark-3); font-size: .85rem; font-variant-numeric: tabular-nums }

/* The name, once. */
.lio-play .who { display: flex; gap: 6px; margin-top: 12px; padding: 5px; background: var(--navy-900); border: 1.5px solid var(--navy-600); border-radius: 999px }
.lio-play .who:focus-within { border-color: var(--blue) }
.lio-play .who input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; padding: 8px 12px; font-size: 1rem }
.lio-play .who input::placeholder { color: var(--on-dark-3) }
.lio-play .who input:focus-visible { box-shadow: none }

/* The level's table, the way an arcade shows it: rank, name, counts, your row lit. */
.lio-play .table { margin-top: 14px }
.lio-play .table h3 { margin: 0 0 6px; font: 600 .72rem/1 var(--f-body); color: var(--on-dark-3); text-transform: uppercase; letter-spacing: .12em }
.lio-play .table table { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums }
.lio-play .table th:nth-child(1) { width: 3.2ch } .lio-play .table th:nth-child(2) { width: auto } .lio-play .table th:nth-child(n+3) { width: 16% }
.lio-play .table th { font: 600 .68rem/1 var(--f-body); color: var(--on-dark-3); text-transform: uppercase; letter-spacing: .1em; text-align: right; padding: 0 4px 6px }
.lio-play .table td { padding: 7px 4px; text-align: right; border-top: 1px solid var(--navy-600); font: 600 1rem/1.2 var(--f-display); color: var(--blue-300) }
.lio-play .table td.rank { text-align: left; color: var(--on-dark-3); font-family: var(--f-body); font-weight: 600; font-size: .9rem }
.lio-play .table td.player { text-align: left; color: #fff; text-transform: uppercase; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lio-play .table tr.mine td { color: var(--orange); animation: lio10-glow 1.4s steps(2, jump-none) infinite }
/* The table builds: each row in turn (--i from the controller), yours last with a pop. */
.lio-play .table table.build tbody tr { animation: lio10-row .32s both; animation-delay: calc(var(--i) * 120ms) }
.lio-play .table table.build tbody tr.mine { animation: lio10-pop .5s both; animation-delay: calc(var(--i) * 120ms) }
.lio-play .table table.build tbody tr.mine td { animation-delay: calc(var(--i) * 120ms + .5s) }
.lio-play .hint.counting::after { content: "…"; display: inline-block; width: 1.2em; text-align: left; animation: lio10-dots 1s steps(4, jump-none) infinite }
.lio-play .tool[aria-pressed="false"] .waves { display: none }
.lio-play .tool[aria-pressed="true"] .slash { display: none }
.lio-play .confetti { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; pointer-events: none; z-index: 60 } /* the 440px cap on the game's children must not squeeze it */
.lio-play .table tr.gap td { text-align: center; color: var(--on-dark-3); padding: 2px 0; font-size: .8rem }
.lio-play .hint { margin: 10px 0 0; color: var(--on-dark-3); font-size: .9rem }
.lio-play .ask { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--navy-600) }
.lio-play .ask p { margin: 0 0 8px; color: var(--blue-300); font-size: .95rem }
.lio-play .ask .who { margin-top: 0 }
.lio-play .panel h2 { margin: 0; font: 700 1.1rem/1.2 var(--f-display) }
/* Your levels: a table, one row each with your place and run; a tap plays it. */
.lio-play .levels { margin-top: 10px; text-align: left }
.lio-play .levels table { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums }
.lio-play .levels th { font: 600 .68rem/1 var(--f-body); color: var(--on-dark-3); text-transform: uppercase; letter-spacing: .1em; text-align: right; padding: 0 4px 6px }
.lio-play .levels th:nth-child(1) { width: 5.2rem; text-align: left } .lio-play .levels th:nth-child(2) { width: 3.6rem; text-align: left } .lio-play .levels th:nth-child(n+3) { width: 15% }
.lio-play .levels td { padding: 9px 4px; border-top: 1px solid var(--navy-600); text-align: right; color: var(--blue-300); font: 600 .95rem/1.2 var(--f-display) }
.lio-play .levels tr.row { cursor: pointer; border-radius: 8px }
.lio-play .levels tr.row:hover td, .lio-play .levels tr.row:focus-visible td { background: var(--navy-600) }
.lio-play .levels tr[aria-current="true"] td.num { color: var(--blue) }
.lio-play .levels td.num { text-align: left; color: #fff; font-size: 1rem; white-space: nowrap }
.lio-play .levels td.num .boss { display: inline-block; margin-left: 5px; padding: 2px 5px; border-radius: 999px; background: var(--orange); color: var(--navy); font: 700 .55rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .08em; vertical-align: 2px }
.lio-play .levels td.place { text-align: left; color: var(--orange); white-space: nowrap }
.lio-play .levels td.muted { text-align: left; color: var(--on-dark-3); font: 500 .85rem/1.2 var(--f-body) }
.lio-play .levels tr.locked td { opacity: .45 }
.lio-play .levels tr.weekly td.num { color: var(--orange) }
.lio-play .levels tr.weekly td.num small { display: block; margin-top: 2px; font: 500 .7rem/1 var(--f-body); color: var(--on-dark-3); text-transform: none; letter-spacing: 0 }
.lio-play .levels tr.weekly.past td.num { color: var(--blue-300) }
.lio-play .levels .hint { padding: 8px 4px }

.lio-play .keep { margin: 14px 0 0 }
.lio-play .known { margin: 10px 0 0; text-align: center; font-size: .85rem; color: var(--on-dark-3) }
.lio-play .known strong { color: var(--on-dark) }
.lio-play .known .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-300); cursor: pointer; text-decoration: underline; text-underline-offset: 2px }
.lio-play .foot { margin: auto 0 0; padding-top: 16px; text-align: center; color: var(--on-dark-3); font-size: .8rem }
.lio-play .who.save { margin: 10px auto 0; max-width: 360px }
.lio-play .foot.saved { margin: 8px 0 0; padding-top: 0 }
.lio-play .foot a, .lio-play .foot .linkish { color: var(--blue-300) }
.lio-play .foot .linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px }

@keyframes lio10-glow { 50% { color: #fff } }
@keyframes lio10-row { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes lio10-pop { 0% { opacity: 0; transform: scale(.94) } 60% { opacity: 1; transform: scale(1.04) } 100% { transform: none } }
@keyframes lio10-dots { 0% { content: "" } 33% { content: "." } 66% { content: ".." } 100% { content: "…" } }
@media (prefers-reduced-motion: reduce) { .lio-play .table tr.mine td { animation: none } }
@keyframes lio10-shake { 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }
@keyframes lio10-beat { 0%, 55%, 100% { stroke-opacity: .45; stroke-width: 1.5 } 12%, 34% { stroke-opacity: 1; stroke-width: 3 } 23% { stroke-opacity: .65; stroke-width: 2 } }
@media (prefers-reduced-motion: reduce) { .lio-play.hinting .cube.can .top { animation: none; stroke-opacity: 1; stroke-width: 3 } }

@media (min-width: 700px) {
  .lio-play .bar .avatar { height: 52px }
}