/* fantasy type, self-hosted */
@font-face { font-family: "New Rocker"; font-display: swap; src: url(fonts/newrocker.woff2) format("woff2"); }
@font-face { font-family: Texturina; font-weight: 400; font-display: swap; src: url(fonts/texturina-400.woff2) format("woff2"); }
@font-face { font-family: Texturina; font-weight: 700; font-display: swap; src: url(fonts/texturina-700.woff2) format("woff2"); }

/* Bonus level: the page is the stage */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the game sits in a frame on the page, like a screen in a cabinet */
.play-main { display: flex; flex-direction: column; align-items: center; padding: clamp(14px, 2.4vw, 28px) clamp(16px, 4vw, 48px) clamp(24px, 4vw, 44px); }
.play-wrap { position: relative; width: min(1160px, 100%, calc((100dvh - 132px) * 16 / 9)); min-width: min(100%, 560px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r, 16px); background: #0b0b0e; box-shadow: 0 0 0 1px var(--line), 0 0 0 5px color-mix(in srgb, var(--bg) 70%, #000), 0 0 0 6px color-mix(in srgb, var(--acc) 45%, transparent), 0 26px 60px rgb(0 0 0 / .45); }
@media (pointer: fine) { .play-wrap { container-type: inline-size; } }
.play-stage { position: absolute; inset: 0; touch-action: none; }
.play-stage canvas { display: block; }

.play-hud { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 3; pointer-events: none; }
.play-hud > * { pointer-events: auto; }
.play-btns { display: flex; gap: 8px; }
.play-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; font-size: .92rem; color: var(--fg); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line); }
.play-chip[hidden] { display: none; }
.play-chip i { font-size: 1.15rem; }
.play-chip:hover { box-shadow: inset 0 0 0 1px var(--acc); }
.play-chip[aria-pressed="true"] i { color: var(--acc); }

/* inventory, score, boss bar */
.play-center { position: absolute; left: 50%; top: 0; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.play-slots { display: flex; gap: 7px; padding: 5px 8px; border-radius: 999px; background: rgb(11 11 14 / .78); }
.play-slots[hidden] { display: none; }
.play-slots span { width: 34px; height: 34px; border-radius: 50%; background: center / contain no-repeat; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .22); }
.play-slots span.on { box-shadow: 0 0 12px rgb(255 214 140 / .55); animation: play-pop .4s var(--ease); }
.play-score { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 15px; border-radius: 10px; color: #f2f1ee; background: rgb(11 11 14 / .82); font-size: .82rem; white-space: nowrap; }
.play-score[hidden] { display: none; }
.play-score b { font-weight: 400; font-size: 1.15rem; color: #ff8a5c; }
.play-score.pop { animation: play-pop .22s var(--ease); }
.play-bossbar { width: min(420px, 44vw); padding: 6px 10px 8px; border-radius: 10px; color: #f2f1ee; background: rgb(11 11 14 / .82); font-size: .72rem; text-align: center; }
.play-bossbar[hidden] { display: none; }
.play-bossbar u { display: block; margin-top: 5px; height: 10px; border-radius: 9px; overflow: hidden; background: rgb(255 255 255 / .16); text-decoration: none; }
.play-bossbar i { display: block; height: 100%; width: 100%; background: var(--acc); transition: width .15s; }
@keyframes play-pop { 40% { scale: 1.22; } }

.play-buffs { position: absolute; left: 14px; top: 68px; z-index: 2; display: flex; gap: 6px; pointer-events: none; }
.play-buffs span { padding: 5px 10px; border-radius: 8px; font-size: .7rem; color: #06201d; background: #2fd6c4; }

.play-msg { position: absolute; left: 50%; top: 84px; translate: -50% 0; z-index: 2; width: max-content; max-width: min(620px, calc(100% - 32px)); margin: 0; padding: 12px 20px; border-radius: 12px; text-align: center; font: 600 clamp(1rem, 2.2vw, 1.3rem)/1.1 var(--f-d); color: var(--fg); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s; pointer-events: none; }
.play-msg.on { opacity: 1; }
.play-msg.low { top: 150px; }
.play-help { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 2; margin: 0; padding: 7px 13px; border-radius: 8px; white-space: nowrap; font-size: .82rem; color: #f2f1ee; background: rgb(11 11 14 / .72); transition: opacity .5s; pointer-events: none; }
.play-help.off { opacity: 0; }
.only-touch { display: none; }
.play-load { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; z-index: 1; color: #f2f1ee; }
.play-load[hidden] { display: none; }

/* trial 4: how much light is left to draw with */
.play-ink { position: absolute; left: 14px; bottom: 18px; z-index: 2; width: min(220px, 40vw); padding: 6px 10px 8px; border-radius: 10px; color: #f2f1ee; background: rgb(11 11 14 / .8); font-size: .72rem; text-align: center; pointer-events: none; }
.play-ink[hidden] { display: none; }
.play-ink u { display: block; margin-top: 5px; height: 8px; border-radius: 9px; overflow: hidden; background: rgb(255 255 255 / .16); text-decoration: none; }
.play-ink i { display: block; height: 100%; width: 100%; background: #ffc46b; }

/* cut scenes: the world alone */
.play-wrap.cine .play-hud, .play-wrap.cine .play-help, .play-wrap.cine .play-buffs, .play-wrap.cine .play-skipcd { opacity: 0; pointer-events: none; }
.play-hud, .play-help { transition: opacity .35s; }

/* the Gatekeeper speaks */
.play-voice { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; z-index: 3; display: block; width: min(680px, calc(100% - 24px)); min-height: 124px; padding: 14px 22px 12px; border: 1px solid #b48cff; border-radius: 16px; text-align: center; color: #f4efff; cursor: pointer; background: linear-gradient(180deg, rgb(35 22 66 / .96), rgb(14 10 28 / .96)); box-shadow: 0 0 34px rgb(150 100 255 / .5), inset 0 0 22px rgb(150 100 255 / .16); }
.play-voice[hidden] { display: none; }
.play-voice::before { content: ""; position: absolute; left: 50%; top: -11px; width: 20px; height: 20px; rotate: 45deg; translate: -50% 0; background: rgb(35 22 66); border-left: 1px solid #b48cff; border-top: 1px solid #b48cff; }
.play-voice b { display: block; margin-bottom: 8px; font-weight: 400; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #c9a7ff; }
.play-voice-line { display: block; min-height: 2.2em; font: 600 clamp(1.05rem, 2.5vw, 1.4rem)/1.1 var(--f-d); text-wrap: balance; }
.play-voice small { display: block; margin-top: 8px; font-size: .64rem; color: rgb(244 239 255 / .55); }

/* a relic is won */
.play-relic { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 16px; overflow: hidden; text-align: center; color: #f7f3e8; cursor: pointer; background: radial-gradient(circle at 50% 42%, rgb(52 32 92 / .9), rgb(6 5 12 / .94) 68%); }
.play-relic[hidden] { display: none; }
.play-rays { position: absolute; left: 50%; top: 40%; width: 150vmax; height: 150vmax; translate: -50% -50%; background: repeating-conic-gradient(rgb(255 214 140 / .15) 0 9deg, transparent 9deg 22deg); -webkit-mask: radial-gradient(circle, #000 8%, transparent 58%); mask: radial-gradient(circle, #000 8%, transparent 58%); }
.play-relic img { position: relative; width: auto; height: min(40vh, 280px); object-fit: contain; filter: drop-shadow(0 0 30px rgb(255 214 140 / .7)); }
.play-relic small { position: relative; margin-top: 8px; font-size: .8rem; color: #ffc46b; }
.play-relic strong { position: relative; font: 800 clamp(1.8rem, 5.4vw, 3.4rem)/.92 var(--f-d); font-stretch: 125%; text-wrap: balance; }
.play-relic-text { position: relative; max-width: 30em; margin-top: 8px; font-size: clamp(1rem, 2.4vw, 1.3rem); line-height: 1.1; color: #e8e2d4; text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .play-rays { animation: play-spin 18s linear infinite; }
  .play-relic img { animation: play-land .55s var(--ease) both; }
  .play-relic strong, .play-relic small, .play-relic-text { animation: play-rise .45s .16s var(--ease) both; }
  @keyframes play-spin { to { rotate: 360deg; } }
  @keyframes play-land { from { scale: .2; opacity: 0; rotate: -18deg; } }
  @keyframes play-rise { from { translate: 0 16px; opacity: 0; } }
}

/* the new quest */
.play-quest { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 3; padding: 20px 16px; text-align: center; color: #f7f3e8; background: linear-gradient(90deg, transparent, rgb(7 6 12 / .86) 18%, rgb(7 6 12 / .86) 82%, transparent); pointer-events: none; }
.play-quest[hidden] { display: none; }
.play-quest small { display: block; margin-bottom: 8px; font-size: .84rem; color: #ffc46b; }
.play-quest strong { display: block; font: 800 clamp(1.9rem, 6.2vw, 4.2rem)/.92 var(--f-d); font-stretch: 125%; text-wrap: balance; }

/* the title */
.play-start { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 16px; color: #f7f3e8; background: rgb(7 6 12 / .55); }
.play-start[hidden] { display: none; }
.play-title { display: block; width: min(620px, 58cqw); height: auto; margin: 0 auto 2px; filter: drop-shadow(0 8px 26px rgb(0 0 0 / .75)); }
.play-sub { margin: 0 0 22px; font: 400 clamp(1.1rem, 2.8vw, 1.6rem)/1 var(--title); letter-spacing: .02em; color: #f4e6c4; text-shadow: 0 2px 14px rgb(0 0 0 / .85); }
.play-start .play-kicker { margin: 14px 0 0; color: #e8e2d4; }

/* big moments: laser unlocked, boss incoming */
.play-banner { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px; text-align: center; font: 800 clamp(2rem, 7vw, 4.6rem)/.92 var(--f-d); font-stretch: 125%; color: #f2f1ee; text-shadow: 0 4px 0 rgb(0 0 0 / .5); pointer-events: none; opacity: 0; scale: .9; transition: opacity .25s, scale .35s var(--ease); }
.play-banner.on { opacity: 1; scale: 1; }
.play-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; transition: opacity .3s; }
.play-flash.on { opacity: .85; }

.play-pause, .play-end { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: color-mix(in srgb, var(--bg) 66%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.play-pause[hidden], .play-end[hidden] { display: none; }
.play-panel { width: min(680px, 100%); text-align: center; }
.play-end .play-kicker:first-child { margin-bottom: 10px; color: var(--acc); }
.play-end h2 { margin: 0; font: 700 clamp(1.35rem, 3.6vw, 2.3rem)/1 var(--f-d); font-stretch: 125%; text-wrap: balance; }
.play-claim { margin: 14px 0 6px; font: 800 clamp(2.6rem, 8vw, 5rem)/.9 var(--f-d); font-stretch: 125%; }
.play-claim em { font-style: normal; color: var(--acc); }
.play-kicker { margin: 0 0 18px; color: var(--mut); font-size: .86rem; }
.play-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.play-panel details { margin-top: 22px; color: var(--mut); font-size: .95rem; }
.play-panel summary { cursor: pointer; }
.play-panel details p { margin: 10px 0 0; line-height: 1.1; text-wrap: pretty; }
.play-stats { display: flex; justify-content: center; gap: 30px; margin: 0 0 20px; }
.play-stats dt { font: 400 .72rem/1 var(--f-p); color: var(--mut); }
.play-stats dd { margin: 5px 0 0; font: 700 1.2rem/1 var(--f-d); }

.play-touch { display: none; }
.play-touch button { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; font-size: 2rem; color: #f2f1ee; background: rgb(30 30 36 / .82); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .18); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.play-touch button.down { filter: brightness(1.4); }
.play-touch .fire { display: none; margin-left: auto; background: #2fd6c4; color: #06201d; }
.play-touch.has-fire .fire { display: grid; }
.play-touch .jump { background: rgb(255 90 31 / .9); color: #1a0b04; }
.play-touch:not(.has-fire) .jump { margin-left: auto; }

@media (pointer: coarse) {
  .only-keys { display: none; }
  .only-touch { display: inline; }
  .play-touch { display: flex; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); align-items: center; }
}
/* phone upright: the stage takes the space, controls sit below it */
@media (pointer: coarse) and (orientation: portrait) {
  .play-touch { flex: none; padding-top: 18px; padding-bottom: calc(26px + env(safe-area-inset-bottom)); background: #0b0b0e; }
  .play-touch button { width: 72px; height: 72px; }
}
/* phone sideways: controls float over the stage */
@media (pointer: coarse) and (orientation: landscape) {
  .play-touch { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; padding: 0 20px 14px; }
  .play-touch button { pointer-events: auto; }
  .play-help { display: none; }
  html:has(.play-main) .nav-in { height: 48px; }
}
@media (max-width: 1000px) { .play-chip span { display: none; } .play-chip { padding: 0; } }
@media (max-width: 620px) {
  .play-center { top: 50px; }
  .play-slots span { width: 28px; height: 28px; }
  .play-voice { min-height: 136px; padding: 12px 14px 10px; }
  .play-bossbar { width: calc(100vw - 60px); }
  .play-msg { top: 112px; font-size: .95rem; }
  .play-msg.low { top: 170px; }
  .play-buffs { top: 110px; }
  .play-help { font-size: .7rem; }
}

/* v5: everything the world says is written in it, not on top of it */
.play-wrap { --ink: #3a2a14; --gold: #e2b96a; --wood: rgb(26 17 12 / .9); --title: "New Rocker", Georgia, serif; --tale: Texturina, Georgia, serif; }
.play-msg { top: 76px; max-width: min(640px, calc(100% - 32px)); padding: 15px 38px 16px; border-radius: 0; font: 700 clamp(1.02rem, 2.1vw, 1.32rem)/1.08 var(--tale); color: var(--ink); background: url(assets/scroll.webp) center / 100% 100% no-repeat; backdrop-filter: none; -webkit-backdrop-filter: none; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .5)); }
.play-help { font: 400 .95rem/1 var(--tale); letter-spacing: .01em; color: #f4e6c4; background: rgb(26 17 12 / .62); border: 1px solid rgb(226 185 106 / .3); }
.play-banner { font: 400 clamp(1.7rem, 5.4vw, 3.6rem)/1 var(--title); color: #f6dea6; text-shadow: 0 2px 0 #5a3a12, 0 0 26px rgb(226 150 60 / .75), 0 6px 22px rgb(0 0 0 / .8); }
.play-score, .play-bossbar, .play-ink { font: 400 .86rem/1 var(--title); color: #f6dea6; background: var(--wood); border: 1px solid var(--gold); border-radius: 6px; box-shadow: 0 3px 12px rgb(0 0 0 / .5); }
.play-score b { color: #ffcf7a; font-weight: 700; }
.play-bossbar { padding: 7px 12px 9px; }
.play-bossbar i { background: linear-gradient(90deg, #ff4a2a, #ffb04a); }
.play-ink i { background: linear-gradient(90deg, #ffb84d, #fff0c8); }
.play-buffs span { font: 700 .82rem/1 var(--tale); color: #2a1a08; background: #f3dca6; border: 1px solid var(--gold); }
.play-slots { background: var(--wood); box-shadow: inset 0 0 0 1px var(--gold); }
.play-slots span { box-shadow: inset 0 0 0 2px rgb(226 185 106 / .35); }
.play-voice b, .play-voice small { font-family: var(--title); font-weight: 700; }
.play-voice-line { font: 700 clamp(1.12rem, 2.5vw, 1.5rem)/1.08 var(--tale); }
.play-relic small, .play-quest small { font: 400 .92rem/1 var(--title); letter-spacing: .08em; }
.play-relic strong, .play-quest strong { font: 400 clamp(1.7rem, 5.2vw, 3.3rem)/1 var(--title); font-stretch: normal; color: #f6dea6; text-shadow: 0 0 26px rgb(226 150 60 / .6); }
.play-relic-text { font: 400 clamp(1.1rem, 2.5vw, 1.45rem)/1.08 var(--tale); }
.play-start .play-kicker { font-family: var(--tale); font-weight: 700; }

/* a door's inscription */
.play-scroll { position: absolute; left: 50%; top: 68px; translate: -50% 0; z-index: 3; display: block; width: min(560px, calc(100% - 24px)); padding: 20px 40px 18px; text-align: center; color: var(--ink); cursor: pointer; background: url(assets/scroll.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .6)); }
.play-scroll[hidden] { display: none; }
.play-scroll b { display: block; margin-bottom: 6px; font: 400 clamp(1rem, 2.3vw, 1.3rem)/1 var(--title); }
.play-scroll span { display: block; font: 400 clamp(1.08rem, 2.4vw, 1.4rem)/1.05 var(--tale); text-wrap: balance; }
.play-scroll small { display: block; margin-top: 7px; font: 700 .82rem/1 var(--tale); color: #7a4e1c; }

/* walking on: mist drifts across the stage */
.play-mist { position: absolute; top: -12%; bottom: -12%; left: 0; width: 320%; z-index: 3; visibility: hidden; pointer-events: none; background: url(assets/mist.webp) left center / 42% 100% no-repeat, url(assets/mist.webp) right center / 42% 100% no-repeat, linear-gradient(90deg, transparent 16%, #1a1040 30%, #1a1040 70%, transparent 84%); translate: -100% 0; }
.play-mist.go { visibility: visible; animation: play-drift 1.5s linear both; }
@keyframes play-drift { to { translate: 40% 0; } }

/* the certificate */
/* the end screen scales as one piece with the frame: --u is one hundredth of a 16:9 frame */
.play-end { --u: min(1cqw, 1.778cqh); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.2); overflow: hidden; background: rgb(7 6 12 / .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.play-cert { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; flex: none; width: calc(var(--u) * 72); height: calc(var(--u) * 46); padding: calc(var(--u) * 4.6) calc(var(--u) * 8) calc(var(--u) * 3.6); text-align: center; color: var(--ink); background: url(assets/parchment.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 10px 30px rgb(0 0 0 / .7)); }
.play-cert-title { margin: 0 0 calc(var(--u) * .7); font: 400 calc(var(--u) * 1.35)/1 var(--title); letter-spacing: .1em; color: #8a5a1e; }
.play-cert h2 { margin: 0; font: 400 calc(var(--u) * 3.5)/1 var(--title); font-stretch: normal; color: var(--ink); }
.play-cert-relics { display: flex; justify-content: center; gap: calc(var(--u) * 2.2); margin: calc(var(--u) * 1.3) 0; }
.play-cert-relics img { width: auto; height: calc(var(--u) * 5.4); }
.play-cert-text { margin: 0 auto; max-width: 30em; font: 400 calc(var(--u) * 2)/1.1 var(--tale); text-wrap: balance; }
.play-cert-foot { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 5); margin: calc(var(--u) * 1.2) 0 0; }
.play-cert .play-claim { margin: 0; font: 400 calc(var(--u) * 2.4)/1 var(--title); font-stretch: normal; color: var(--ink); }
.play-cert .play-claim em { color: #b4471a; }
.play-cert .play-stats { margin: 0; gap: calc(var(--u) * 2.4); }
.play-cert .play-stats dt { font: 400 calc(var(--u) * 1.15)/1 var(--title); color: #8a5a1e; }
.play-cert .play-stats dd { margin-top: calc(var(--u) * .5); font: 700 calc(var(--u) * 1.9)/1 var(--tale); color: var(--ink); }
.play-seal { width: auto; height: calc(var(--u) * 7.6); }
/* the way on lies under the document, one row on the dark, never on the parchment */
.play-end .play-actions { flex: none; flex-wrap: nowrap; align-items: center; gap: calc(var(--u) * 1); }
.play-end .play-actions .btn { min-height: 0; height: max(36px, calc(var(--u) * 3.9)); padding: 0 max(14px, calc(var(--u) * 1.8)); font-size: max(11.5px, calc(var(--u) * 1.3)); white-space: nowrap; }
.play-end .play-actions .btn-ghost { color: #f4efe6; box-shadow: inset 0 0 0 1.5px rgb(244 239 230 / .55); }

/* phones: landscape only */
.play-rotate { display: none; }
@media (pointer: coarse) and (orientation: portrait) {
  .play-rotate { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: #f6dea6; background: radial-gradient(circle at 50% 40%, #33205e, #0b0816 70%); }
  .play-rotate i { font-size: 4.6rem; color: var(--gold); }
  .play-rotate strong { font: 400 1.7rem/1 var(--title); }
  .play-rotate span { font: 400 1.25rem/1.05 var(--tale); color: #e8e2d4; }
  .play-touch { display: none; }
}
@media (prefers-reduced-motion: no-preference) and (pointer: coarse) and (orientation: portrait) {
  .play-rotate i { animation: play-tilt 2s ease-in-out infinite; }
  @keyframes play-tilt { 50% { rotate: 90deg; } }
}
@media (pointer: coarse) and (orientation: landscape) {
  html:has(.play-main) { overflow: hidden; height: 100%; }
  html:has(.play-main) body { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  html:has(.play-main) .foot { display: none; }
  html:has(.play-main) .nav { display: none; }
  .play-main { flex: 1; min-height: 0; padding: 0; align-items: stretch; background: #0b0b0e; }
  .play-wrap { flex: 1; width: auto; min-width: 0; min-height: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .play-title { width: min(420px, 50vw); }
  .play-touch { padding: 0 14px 10px; }
  .play-touch button { width: 62px; height: 62px; font-size: 1.6rem; opacity: .86; }
  .play-hud { top: 8px; left: 10px; right: 10px; }
  .play-chip { height: 38px; min-width: 38px; }
  .play-msg { top: 54px; font-size: .98rem; padding: 10px 30px; }
  .play-ink { top: 8px; bottom: auto; left: 58px; width: 150px; }
  .play-voice { bottom: 8px; width: 56%; min-height: 0; padding: 8px 14px; }
  .play-voice-line { font-size: 1.02rem; min-height: 2.1em; }
  .play-voice small { margin-top: 3px; }
  .play-voice b { margin-bottom: 4px; }
  .play-scroll { top: 50px; width: 56%; padding: 11px 26px; }
  .play-relic img { height: 42vh; }
}

/* the boss arrives as a commercial break */
.play-adbar { position: absolute; right: 0; bottom: 15%; z-index: 4; padding: 10px 18px 10px 16px; border: 1px solid rgb(255 255 255 / .28); border-right: 0; color: #fff; background: rgb(0 0 0 / .72); font: 600 clamp(.72rem, 1.5cqw, .95rem)/1.1 var(--f-b, system-ui), sans-serif; cursor: pointer; }
.play-adbar[hidden] { display: none; }

/* the skip: a ring that fills back up while it cools down */
.play-skipcd { --left: 0; position: absolute; left: 14px; bottom: 16px; z-index: 3; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: conic-gradient(rgb(0 0 0 / .68) calc(var(--left) * 360deg), #ff5ae0 0); box-shadow: 0 0 16px rgb(255 90 224 / .55); touch-action: none; }
.play-skipcd span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: #17101f; font: 400 .78rem/1 var(--title); }
.play-skipcd[hidden] { display: none; }
.play-skipcd.wait { box-shadow: none; cursor: default; }
.play-skipcd.wait span { color: rgb(255 255 255 / .45); }

/* inside the window at the end of the home page: only the game */
html.embed, html.embed body { height: 100%; margin: 0; background: #0b0b0e; overflow: hidden; }
html.embed .nav, html.embed .foot { display: none; }
html.embed .play-main { display: block; height: 100%; padding: 0; }
html.embed .play-wrap { width: 100%; height: 100%; min-width: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }