/*
 * Clockwork Rush - shell styling
 *
 * Follows the original's dark Windows Store theme: near-black ground, a
 * light page header, and flat outlined buttons that fill in when selected.
 */

:root {
    --ground: #101012;
    --ground-2: #17171a;
    --ink: #f4f4f5;
    --ink-dim: rgba(244, 244, 245, .55);
    --accent: #2e87c5;
    --line: rgba(244, 244, 245, .35);
    --head-h: 96px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    background: var(--ground);
    color: var(--ink);
    font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------- screens */

.screen {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
}

.screen.is-active { display: flex; }

.page-head {
    flex: 0 0 auto;
    height: var(--head-h);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 28px;
}

.page-title {
    margin: 0;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: .01em;
    white-space: nowrap;
}

.game-head .page-title { flex: 0 0 auto; }

.score {
    flex: 1 1 auto;
    text-align: left;
    font-size: 56px;
    font-weight: 300;
    opacity: .5;
    font-variant-numeric: tabular-nums;
    padding-left: 24px;
}

.back-btn {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    position: relative;
}

.back-btn::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 12px;
    width: 12px;
    height: 12px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.back-btn:hover { border-color: var(--ink); }

/* --------------------------------------------------------------- buttons */

.btn {
    appearance: none;
    border: 2px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 17px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}

.btn:hover { border-color: var(--ink); background: rgba(244, 244, 245, .08); }
.btn:active { background: rgba(244, 244, 245, .18); }

.btn.is-selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn[disabled] { opacity: .35; cursor: default; }

.btn-wide { width: 100%; margin-top: 10px; }

.btn-play {
    width: 100%;
    margin-top: 22px;
    font-size: 34px;
    font-weight: 300;
    padding: 14px;
}

/* ------------------------------------------------------------ main menu */

.menu-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    padding: 0 40px 32px;
    gap: 40px;
}

.menu-panel {
    flex: 0 1 560px;
    min-width: 320px;
    overflow-y: auto;
    padding-right: 8px;
}

.menu-art {
    flex: 1 1 auto;
    position: relative;
    min-width: 0;
}

.menu-art canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.difficulty {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 22px;
}

.option-row {
    display: grid;
    grid-template-columns: 130px 1fr 34px;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.option-row label {
    text-align: right;
    font-size: 19px;
    font-weight: 300;
    opacity: .85;
}

.option-row output {
    font-size: 16px;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

.toggle-group {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    grid-column: 2 / span 2;
}

input[type="range"] {
    appearance: none;
    width: 100%;
    height: 24px;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: rgba(244, 244, 245, .3);
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 24px;
    margin-top: -10px;
    background: var(--accent);
    border: none;
}

input[type="range"]::-moz-range-track {
    height: 4px;
    background: rgba(244, 244, 245, .3);
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 24px;
    border: none;
    border-radius: 0;
    background: var(--accent);
}

input[type="range"]:disabled { cursor: default; }
input[type="range"]:disabled::-webkit-slider-thumb { background: rgba(244, 244, 245, .3); }
input[type="range"]:disabled::-moz-range-thumb { background: rgba(244, 244, 245, .3); }

/* ---------------------------------------------------------------- game */

.playfield {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 0 6px 10px;
}

/* ---- board: DOM + CSS, animated by the compositor, not a render loop ---- */

.board-wrap {
    flex: 1 1 auto;
    position: relative;
    height: 100%;
    min-width: 0;
    overflow: hidden;              /* clips debris, like the original Viewbox */
    touch-action: none;
}

.board {
    --s: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--bw) * var(--s) * 1px);
    height: calc(var(--bh) * var(--s) * 1px);
    /*
     * Sized in real pixels rather than scaled with a transform. A transform
     * would rasterise the layer once and stretch the texture, which softens
     * everything inside it; this way each gear renders at its true size.
     * The original's Viewbox clip is reproduced with overflow.
     */
    overflow: hidden;
}

.board.no-anim, .board.no-anim * { transition: none !important; }

.layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.board-plate {
    position: absolute;
    inset: 0;
    background-color: rgba(105, 105, 105, .1);
    border: 1px solid rgba(128, 128, 128, .35);
    /*
     * The dot grid is one SVG in board units, stretched over the whole board.
     * border-box origin so the 1px border does not shift it off the corner
     * the gears are aligned to.
     */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: border-box;
    background-clip: border-box;
}

.bg-gear {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--w) * var(--s) * 1px);
    height: calc(var(--w) * var(--s) * 1px);
    translate: calc(var(--x) * var(--s) * 1px) calc(var(--y) * var(--s) * 1px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation-name: gear-spin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes gear-spin { to { transform: rotate(360deg); } }

.time-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: max(1px, calc(2px * var(--s)));
    background: rgb(105, 105, 105);
    opacity: .2;
    transform: translateY(calc(var(--y) * var(--s) * 1px));
    transition: transform 1s linear, opacity .15s, background-color .15s;
}

.time-bar.is-grabbing { opacity: 1; }
.time-bar.is-alert { background: rgb(255, 0, 0); opacity: 1; }

.ghost-clock {
    position: absolute;
    right: calc(20px * var(--s));
    top: calc(-100px * var(--s));
    font-size: calc(200px * var(--s));
    line-height: 1;
    color: rgb(105, 105, 105);
    opacity: .3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/*
 * A gear is one element backed by one SVG image, so the browser re-rasterises
 * it at whatever size the gear actually is - crisp at any board scale, the way
 * the XAML Paths were.
 *
 * A quarter turn is just a new --a, and the compositor tweens the transform.
 */
.gear {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(64px * var(--s));
    height: calc(64px * var(--s));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translate3d(calc(var(--x) * var(--s) * 1px),
                           calc(var(--y) * var(--s) * 1px), 0)
               rotate(var(--a, 0deg));
}

.gear.static { transition: transform 150ms linear; }
.gear.falling { transition: transform 80ms linear; }
.gear.debris { transition: none; z-index: 2; }

.score-pop {
    position: absolute;
    left: 0;
    top: 0;
    font-size: calc(25px * var(--s));
    line-height: 1;
    color: rgb(255, 255, 0);
    opacity: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .gear.static, .gear.falling, .time-bar { transition-duration: 1ms; }
    .bg-gear { animation: none; }
}

.rotate-btn {
    flex: 0 0 auto;
    width: 88px;
    border: none;
    background: transparent;
    color: var(--ink);
    opacity: .5;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: opacity .1s;
}

.rotate-btn svg { width: 78px; height: 78px; display: block; }

.rotate-btn.is-flash { animation: rotate-flash .35s linear 1; }

@keyframes rotate-flash {
    0%   { opacity: 1; }
    100% { opacity: .5; }
}

.rotate-key {
    font-size: 13px;
    letter-spacing: .18em;
    opacity: .65;
}

.icon-btn {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    opacity: .5;
    transition: opacity .15s;
}

.icon-btn:hover { opacity: 1; }
.icon-btn svg { width: 100%; height: 100%; display: block; }
.icon-btn.is-on { opacity: 1; }

/* -------------------------------------------------------------- overlay */

.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 10, .78);
    z-index: 5;
}

.overlay[hidden] { display: none; }

.overlay-card {
    width: min(420px, 86vw);
    padding: 34px 34px 30px;
    background: var(--ground-2);
    border: 2px solid var(--line);
    text-align: center;
}

.overlay-card h2 {
    margin: 0 0 14px;
    font-size: 40px;
    font-weight: 300;
}

.end-score {
    margin: 0 0 4px;
    font-size: 20px;
    opacity: .7;
}

.end-score strong {
    display: block;
    font-size: 52px;
    font-weight: 300;
    opacity: 1;
    font-variant-numeric: tabular-nums;
}

.end-time {
    margin: 0 0 18px;
    font-size: 15px;
    opacity: .5;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- help */

.help-menu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.help-menu[hidden] { display: none; }

.help-menu .btn-wide { width: 280px; font-size: 21px; padding: 16px; }

.help-topic {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 0 24px 24px;
    gap: 10px;
}

.help-topic[hidden] { display: none; }

.help-topic h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 300;
}

.help-figure {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.help-figure img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.help-figure img[hidden] { display: none; }

.help-caption {
    margin: 0;
    max-width: 760px;
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    opacity: .75;
    min-height: 4.5em;
}

.help-caption p { margin: 0 0 .5em; }
.help-caption p:last-child { margin-bottom: 0; }
.help-count[hidden], .help-nav .btn[hidden] { display: none; }

.help-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.help-count { font-size: 14px; opacity: .5; font-variant-numeric: tabular-nums; }

.help-topic .btn-wide { width: 280px; }

/* keyboard diagram on the Controls page */

.help-controls-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

.help-controls-diagram[hidden] { display: none; }

.key-cluster { text-align: center; }

.key-cluster h3 {
    margin: 0 0 12px;
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .55;
    font-weight: 400;
}

.key-rows { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.key-row { display: flex; gap: 8px; }

.key {
    width: 56px;
    height: 56px;
    border: 3px solid var(--ink);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.key.is-off { opacity: .35; }
.key.is-blank { border-color: transparent; }

/* ======================================================================
   Mobile / touch
   ====================================================================== */

html, body {
    height: 100dvh;
    overscroll-behavior: none;
}

body { touch-action: manipulation; }        /* no double-tap zoom */

.page-head {
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
}

.playfield {
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* ---- nudge buttons: shown only on touch, for fine one-cell placement --- */

.touch-bar {
    display: none;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 0 12px max(10px, env(safe-area-inset-bottom));
}

.touch-btn {
    width: 76px;
    height: 52px;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: rgba(244, 244, 245, .06);
    color: var(--ink);
    opacity: .75;
    padding: 0;
    cursor: pointer;
}

.touch-btn svg { width: 34px; height: 34px; display: block; margin: 0 auto; }
.touch-btn:active { background: rgba(244, 244, 245, .22); opacity: 1; }

/* ---- orientation gate ------------------------------------------------- */

.orient-gate {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ground);
    text-align: center;
    padding: 24px;
}

.orient-gate[hidden] { display: none; }
.orient-inner { max-width: 340px; }
.orient-icon { width: 96px; height: 96px; color: var(--ink); opacity: .7; }
.orient-gate h2 { margin: 12px 0 8px; font-size: 26px; font-weight: 300; }
.orient-gate p { margin: 0 0 20px; font-size: 15px; line-height: 1.5; opacity: .65; }

/* ----------------------------------------------------------------------
   Touch devices. JS sets .touch on <body> from a (pointer: coarse) query,
   so these are plain class rules - which also makes them testable in a
   desktop browser.
   ---------------------------------------------------------------------- */

/* Rotate buttons live in the bottom bar on touch, not beside the board. */
body.touch .rotate-btn {
    width: 76px;
    height: 52px;
    opacity: .8;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: rgba(244, 244, 245, .06);
    gap: 0;
}
body.touch .rotate-btn svg { width: 38px; height: 38px; }
body.touch .rotate-btn:active { background: rgba(244, 244, 245, .22); opacity: 1; }
body.touch .touch-bar { align-items: center; }
body.touch .rotate-key { display: none; }    /* no keyboard to refer to */
body.touch .btn { padding: 13px 18px; }
body.touch .icon-btn { width: 44px; height: 44px; }
body.touch.touch-play .touch-bar { display: flex; }

/* ---- short viewports (phone in landscape): reclaim vertical space ----- */

@media (max-height: 560px) {
    :root { --head-h: 46px; }

    .page-head { gap: 10px; padding-top: 0; }
    .page-title { font-size: 19px; }
    .score { font-size: 26px; padding-left: 12px; }
    .back-btn { width: 34px; height: 34px; }
    .back-btn::before { left: 11px; top: 9px; width: 10px; height: 10px; }
    .icon-btn { width: 34px; height: 34px; }

    .playfield { padding-bottom: max(4px, env(safe-area-inset-bottom)); }

    /* the board needs the width more than the buttons need their own column */
    .rotate-btn { width: 60px; }
    .rotate-btn svg { width: 56px; height: 56px; }
    body.touch .rotate-btn { width: 64px; height: 40px; }
    body.touch .rotate-btn svg { width: 30px; height: 30px; }

    .touch-bar { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
    .touch-btn { height: 40px; width: 64px; }
    .touch-btn svg { width: 26px; height: 26px; }

    .overlay-card { padding: 20px 24px; }
    .overlay-card h2 { font-size: 26px; }
    .end-score strong { font-size: 34px; }
}

/* ---- narrow viewports: menu stacks ------------------------------------ */

@media (max-width: 780px) {
    .menu-body { padding: 0 16px 16px; gap: 0; }
    .menu-panel { flex: 1 1 auto; min-width: 0; }
    .menu-art { display: none; }

    .option-row { grid-template-columns: 96px 1fr 28px; gap: 10px; }
    .option-row label { font-size: 15px; }
    .difficulty { gap: 6px; margin-bottom: 16px; }
    .difficulty .btn { padding: 11px 4px; font-size: 14px; }
    .toggle-group { gap: 6px; }
    .toggle-group .btn { padding: 11px 4px; font-size: 14px; }

    .page-head { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
    .page-title { font-size: 26px; }
    .btn-play { font-size: 24px; margin-top: 16px; }

    .help-menu .btn-wide, .help-topic .btn-wide { width: min(280px, 90vw); }
    .help-topic { padding: 0 12px 12px; }
    .help-caption { font-size: 14px; min-height: 0; }
}

/* Landscape phone: the menu has almost no height, so let it scroll. */
@media (max-height: 480px) {
    .menu-body { padding-bottom: 8px; }
    .menu-panel { padding-bottom: 12px; }
    .btn-play { margin-top: 12px; padding: 10px; font-size: 22px; }
    .btn-wide { margin-top: 6px; }
}

/* Narrow screens: the game header must not push the pause button off-screen.
   The title is redundant there - the menu already names the game. */
@media (max-width: 620px) {
    .page-head {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        gap: 12px;
    }
    .game-head .page-title { display: none; }
    .game-head .score { padding-left: 0; }
}

.score { min-width: 0; overflow: hidden; text-overflow: clip; }