/* play-demo.css: styles for play-demo.js (see the header there for the markup and the three-line install).
   Page-colour variables are not used, so it works in any page; the game's own dark brown (#1d120e) is the stage colour.
   Reduced motion: the page's global rule (animation:none; transition:none under prefers-reduced-motion) already covers these
   elements; the loading animations below are also only defined when motion is allowed. */

/* ---- the control on the reel (bottom right of the frame; the music bar is under the frame, the game's status display at the top) ---- */
.pd-start{position:absolute;z-index:6;right:12px;bottom:12px;max-width:calc(100% - 24px);min-height:56px;padding:0 22px 0 18px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;border:3px solid #0b0b0c;border-radius:999px;cursor:pointer;
  background:#f5c400;color:#0b0b0c;font:inherit;font-weight:800;font-size:1.05rem;line-height:1.1;letter-spacing:-.01em;text-align:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.55),0 10px 30px rgba(0,0,0,.4)}
.pd-start svg{flex:none;width:22px;height:22px}
.pd-start[hidden]{display:none}
.pd-lbls{display:block;min-width:0}
.pd-lbls>span{display:block}
@media (min-width:800px){.pd-start{right:16px;bottom:16px;min-height:60px;font-size:1.15rem}}

/* hover only where there is a mouse (a touch screen would keep the tapped thing lit) */
@media (hover:hover){
  .pd-start:hover{background:#ffd633}
  .pd-btn:hover{background:#fff;color:#0b0b0c}
  .pd-close:hover{background:#f5c400}
}

/* ---- the stage: inside the frame on a computer, a full-screen layer on a phone ---- */
.pd-stage{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;background:#1d120e;color:#fff;border-radius:inherit;overflow:hidden;outline:0}
.pd-layer{position:fixed;inset:0;z-index:1000;border-radius:0;overscroll-behavior:none;touch-action:none}
html.pd-lock{overflow:hidden;overscroll-behavior:none;scroll-behavior:auto}

/* the bar holds Close (and Full screen); it sits beside the game, never over it, so the game's own controls stay clear */
.pd-bar{flex:none;display:flex;align-items:center;gap:8px;min-height:52px;padding:4px 8px 4px 14px;background:#0b0b0c}
.pd-layer .pd-bar{padding:calc(4px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) 4px calc(14px + env(safe-area-inset-left,0px))}
.pd-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:.95rem;letter-spacing:.03em;text-transform:uppercase;color:#d8d8dc}
.pd-btn{flex:none;min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid #fff;background:transparent;color:#fff;font:inherit;font-weight:800;font-size:1rem;line-height:1}
.pd-close{background:#fff;color:#0b0b0c;min-width:88px}
.pd-btn[hidden]{display:none}
.pd-stage :focus-visible{outline:4px solid #f5c400;outline-offset:2px}

.pd-view{position:relative;flex:1;min-height:0}
.pd-frame{position:absolute;display:block;border:0;background:#1d120e;inset:0;width:100%;height:100%}
/* the game does not get the phone's safe areas inside an iframe, so the layer leaves them clear (the top one is in the bar) */
.pd-layer .pd-frame{inset:0 auto auto env(safe-area-inset-left,0px);width:calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));height:calc(100% - env(safe-area-inset-bottom,0px))}

/* a phone turned on its side: the bar becomes a column on the left, so the game keeps its height */
@media (orientation:landscape) and (max-height:500px){
  .pd-layer{flex-direction:row}
  .pd-layer .pd-bar{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;width:calc(112px + env(safe-area-inset-left,0px));min-height:0;
    padding:calc(8px + env(safe-area-inset-top,0px)) 8px 8px calc(8px + env(safe-area-inset-left,0px))}
  .pd-layer .pd-title{display:none}
  .pd-layer .pd-close{order:-1;min-width:0}
}

/* ---- loading ---- */
.pd-loading{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;background:#1d120e;color:#fff;opacity:1}
.pd-loading.pd-done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility 0s .35s}
.pd-lh{font-size:clamp(2rem,9vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.pd-lt{font-size:1rem;font-weight:700;color:#d8d8dc;max-width:28ch}
.pd-track{position:relative;display:block;width:min(240px,70%);height:8px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.pd-track i{position:absolute;inset:0;border-radius:inherit;background:#f5c400;transform-origin:0 50%;transform:scaleX(.04)}
@media (prefers-reduced-motion:no-preference){
  .pd-track i{transition:transform .3s ease-out}
  .pd-track.pd-indet i{animation:pd-slide 1.4s ease-in-out infinite;transform:none;inset:0 65% 0 0}
}
@keyframes pd-slide{from{transform:translateX(-100%)}to{transform:translateX(300%)}}

/* ---- the "did not load" note: in the frame, over the video, which keeps playing ---- */
.pd-msg{position:absolute;z-index:6;left:12px;right:12px;bottom:84px;margin:0;padding:12px 16px;border:2px solid #fff;border-radius:16px;background:rgba(0,0,0,.86);color:#fff;font-weight:700;font-size:1rem;line-height:1.3}
@media (min-width:800px){.pd-msg{left:16px;right:auto;bottom:92px;max-width:min(460px,calc(100% - 32px))}}