/* Clock Time playable demo — page-specific styles.
   Loaded after styles.css and clock-time.css, so it only adds what the demo
   needs and inherits the site's typography, colours, header and footer. */

.demo-section {
    text-align: center;
}

/* The site's standard hero ran 462px tall and, with main's 48px top padding on
   top of it, left only ~140px of the game above the fold. The hero is gone on
   this page; this just trims the remaining gap under the nav. */
.demo-main {
    padding-top: 20px;
}

/* Title and tagline now sit BELOW the game. Styled to read as a page heading
   rather than a section heading, since it is still the h1. */
.demo-intro {
    text-align: center;
}

.demo-intro h1 {
    margin-bottom: 6px;
}

.demo-tagline {
    margin: 0;
    opacity: 0.8;
}

/* Positioning context for the fullscreen button, which sits OUTSIDE the frame.
   Shrink-wraps the frame so "beside the frame" means beside the game, not
   beside the full page width. */
/* Must carry the frame's own width constraints rather than shrink-wrapping:
   .demo-frame is width:100% + max-width:480px, and inside a shrink-to-fit
   parent that is circular, so the frame collapsed to zero height. */
.demo-stage {
    position: relative;
    /* Cap the WIDTH, never the height. The frame derives its height from its
       width via aspect-ratio, so a max-height cap silently wins over the aspect
       and leaves a box too short for its width - the game then renders squashed.
       48vh is the widest the frame can be while its 3:5 height still fits in
       80vh (80 * 480/800). */
    width: min(480px, 100%, 48vh);
    margin: 0 auto;
}

/* The game is authored at a 480x800 design resolution (3:5). The frame keeps
   that aspect on every screen so the canvas is never letterboxed by the page,
   and caps the height so the whole game stays visible without scrolling on a
   laptop. */
.demo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 480 / 800;
    margin: 0 auto;
    background: #0f1b2a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(36, 59, 83, 0.25);
}

/* aspect-ratio is widely supported, but fall back to a padding-ratio box on
   anything older so the frame never collapses to zero height. */
@supports not (aspect-ratio: 1 / 1) {
    .demo-frame {
        height: 0;
        padding-bottom: 166.667%; /* 800 / 480 */
    }
}

#unity-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* Unity draws its own background; stop the browser adding a focus ring
       when the canvas takes keyboard focus. */
    outline: none;
    /* Let the game handle touch itself rather than the browser scrolling or
       double-tap-zooming while a child drags the clock hands. */
    touch-action: none;
}

.demo-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    color: #fff;
    font-family: 'Comfortaa', 'Roboto', sans-serif;
    text-align: center;
}

.demo-loading-bar {
    width: min(220px, 70%);
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.demo-loading-bar > div {
    width: 0;
    height: 100%;
    border-radius: 4px;
    background: #ffd93f;
    transition: width 0.2s ease-out;
}

.demo-loading p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

/* Sits in the gutter to the right of the frame, top-aligned with it. left:100%
   anchors it to the frame's right edge rather than the viewport, so it tracks
   the frame as it resizes. */
.demo-fullscreen {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 12px;
    z-index: 2;
    width: 44px;   /* 44px is the minimum comfortable touch target */
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: rgba(36, 59, 83, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    transition: background 0.15s ease-out, transform 0.15s ease-out;
}

.demo-fullscreen svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Outward arrows normally, inward arrows while fullscreen. */
.demo-fullscreen .icon-exit,
.demo-fullscreen.is-fullscreen .icon-enter {
    display: none;
}

.demo-fullscreen.is-fullscreen .icon-exit {
    display: block;
}

.demo-fullscreen:hover,
.demo-fullscreen:focus-visible {
    background: rgba(36, 59, 83, 0.85);
    transform: scale(1.06);
}

.demo-fullscreen[hidden] {
    display: none;   /* [hidden] alone loses to display:flex above */
}

/* No gutter once the frame fills the width, so the button moves above the
   frame and right-aligns. It must not move INTO the canvas: the game draws its
   settings gear in that exact corner. The stage gets top padding to make room
   so the button never overlaps the game. */
@media (max-width: 620px) {
    .demo-stage {
        padding-top: 52px;
    }

    .demo-fullscreen {
        top: 0;
        left: auto;
        right: 0;
        margin-left: 0;
    }
}

/* Fullscreen: hold the game's authored 3:5 portrait aspect and pillarbox with
   black at the sides. Without this the canvas fills the screen, and since the
   camera is FIXED_WIDTH (480 units wide, height derived from the aspect) a
   landscape monitor produces a very short viewport that squashes the layout.
   Height-driven sizing with width:auto is what keeps the proportion; the frame
   also has aspect-ratio set, so the two agree.
   :fullscreen and :-webkit-full-screen cannot be combined in one selector list -
   a browser that fails to parse either one drops the whole rule. */
.demo-stage:fullscreen,
.demo-stage:-webkit-full-screen {
    width: 100%;
    max-width: none;
    height: 100%;
    padding-top: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sized by WIDTH derived from the viewport height, never height + max-width.
   height:100% with max-width:100% silently clamps the width on a screen
   narrower than 0.6 x its height - a phone - and the aspect breaks (measured
   0.462 instead of 0.600). Same trap as the windowed frame had. 60vh is the
   widest a 3:5 box can be while its height still fits the viewport. */
.demo-stage:fullscreen .demo-frame,
.demo-stage:-webkit-full-screen .demo-frame {
    width: min(100%, 60vh);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 480 / 800;
    border-radius: 0;
    box-shadow: none;
}

/* Back inside the viewport, since there is no gutter in fullscreen. Sits clear
   of the game's own settings gear because the pillarbox gives it room. */
.demo-stage:fullscreen .demo-fullscreen,
.demo-stage:-webkit-full-screen .demo-fullscreen {
    top: 12px;
    right: 12px;
    left: auto;
    margin-left: 0;
}

/* iPhone fallback. iOS Safari exposes the Fullscreen API for <video> only, so
   there is no real fullscreen to request for a canvas - .is-expanded is a
   position:fixed stand-in that fills the viewport minus the browser chrome.
   Same rules as the :fullscreen block above, so both modes look identical. */
.demo-stage.is-expanded {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: auto;
    max-width: none;
    height: auto;
    padding-top: 0;
    margin: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Keeps the game clear of the notch and the home indicator. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* dvh, not vh: on iOS the browser chrome shrinks and grows as you scroll, and
   vh keeps reporting the tallest value, so the game would overflow the visible
   area. dvh tracks the space actually on screen. */
.demo-stage.is-expanded .demo-frame {
    width: min(100%, 60dvh);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 480 / 800;
    border-radius: 0;
    box-shadow: none;
}

@supports not (height: 100dvh) {
    .demo-stage.is-expanded .demo-frame {
        width: min(100%, 60vh);
    }
}

.demo-stage.is-expanded .demo-fullscreen {
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    left: auto;
    margin-left: 0;
}

/* While expanded the page behind must not scroll - on iOS a drag on the canvas
   otherwise pans the whole document instead of moving the clock hands. */
body.demo-expanded {
    overflow: hidden;
}

.demo-note {
    margin-top: 1rem;
    font-size: 0.95rem;
    opacity: 0.8;
}

.demo-fallback {
    padding: 2rem 1.5rem;
    color: #fff;
}

/* On a phone the frame should use the viewport rather than a fixed cap, so the
   game is as large as it can be without pushing the page around. */
@media (max-width: 560px) {
    /* 42vh = 70 * 480/800, the width whose 3:5 height fits in 70vh. */
    .demo-stage {
        width: min(480px, 100%, 42vh);
    }

    .demo-frame {
        border-radius: 8px;
    }
}