/* The stage is the iOS scene: 414 units tall, W wide (set by game.js from the window's shape), scaled to fit.
   Positions copy GameScene.swift, which measures y upwards from the bottom, so they use `bottom`. A label's
   --y is its baseline, like an SKLabelNode's position. */

@font-face {
    /* Stands in for iOS's DIN Condensed Bold */
    font-family: "SN Condensed";
    src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
    font-display: block;
}

:root {
    --red: rgb(200 0 0);
    --dark-red: rgb(70 0 0);
    --yellow: rgb(255 255 0);
}

* { box-sizing: border-box; }

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

body {
    font-family: "SN Condensed", "Arial Narrow", sans-serif;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

#sn {
    position: fixed;
    inset: 0;
    overflow: hidden;
    /* The page edge matches the game's background, so letterboxing doesn't show */
    background: rgb(var(--bg, 230 0 0));
    /* game.js fits the stage inside this, clear of notches and home indicators */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--W, 736) * 1px);
    height: 414px;
    transform: translate(-50%, -50%) scale(var(--s, 1));
    overflow: hidden;
}

#world {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

button {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

img { display: block; }

.lbl {
    position: absolute;
    line-height: 1;
    white-space: nowrap;
    bottom: calc(var(--y) * 1px - 0.1em);
}

/* Slides: each element moves in from (or out to) its own off-screen spot, like the SKAction.move calls */
.slide {
    transition: transform var(--dur, 0.4s) linear, visibility 0s;
}

.slide.away {
    transform: var(--away);
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--dur, 0.4s) linear, visibility 0s var(--dur, 0.4s);
}

.coin-after {
    display: flex;
    align-items: baseline;
}

.coin-after img {
    width: var(--icon, 15px);
    height: var(--icon, 15px);
    margin-left: var(--icon-gap, 7px);
    transform: translateY(var(--icon-drop, -4px));
}

.btn {
    position: absolute;
    background: var(--red);
    border: 2px solid #fff;
    line-height: 1;
    /* Centres the capitals (the font's line box sits low on them) */
    padding: 0 0 0.08em;
}

.icon-btn {
    position: absolute;
    background: var(--red);
    border: 2px solid #fff;
}

.icon-btn img {
    width: 100%;
    height: 100%;
}

/* ---------- Main menu ---------- */

#title {
    --y: 237;
    --away: translateY(-380px);
    left: 50%;
    translate: -50% 0;
    font-size: 70px;
    z-index: 1;
}

#instructions {
    --y: 167;
    --away: translateY(780px);
    left: 50%;
    translate: -50% 0;
    font-size: 20px;
    z-index: 1;
    animation: blink 3.14s ease-in-out infinite;
}

@keyframes blink {
    0%, 50%, 100% { color: #fff; }
    25% { color: rgb(59 59 59); }
}

#hs-label {
    --y: 357;
    --away: translateY(-150px);
    right: 60px;
    font-size: 30px;
    z-index: 1;
}

#hs-value {
    --y: 307;
    --away: translateY(-150px);
    right: 60px;
    font-size: 50px;
    z-index: 1;
}

#coin-total {
    --y: 354;
    --away: translateY(-150px);
    left: 60px;
    font-size: 30px;
    /* Above the shade, so the store shows how many coins there are to spend */
    z-index: 16;
}

#coin-total.under { z-index: 1; }

#store-btn {
    --away: translateY(-150px);
    left: 30px;
    bottom: 298px;
    width: 90px;
    height: 41px;
    font-size: 30px;
    z-index: 1;
}

#sfx-btn, #music-btn {
    --away: translateY(300px);
    left: 30px;
    width: 40px;
    height: 40px;
    z-index: 1;
}

#sfx-btn { bottom: 30px; }
#music-btn { bottom: 80px; }

#stats-btn {
    --away: translateY(300px);
    left: 30px;
    bottom: 130px;
    width: 90px;
    height: 90px;
    z-index: 1;
}

#progress {
    --away: translateY(-72px);
    --dur: 0.3s;
    position: absolute;
    left: 50%;
    translate: -50% 0;
    /* Half the width, as on iOS, but narrower on narrow worlds so the coin total and highscore fit beside it */
    width: min(50%, 100% - 340px);
    bottom: 392px;
    height: 20px;
    z-index: 1;
}

#progress .bar {
    position: absolute;
    inset: -1px;
    border: 2px solid #fff;
}

#progress .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #fff;
}

#progress .lbl {
    --y: -30;
    font-size: 20px;
}

#level-label { left: 0; }
#level-progress { left: 50%; translate: -50% 0; }
#level-reward { right: 0; --icon: 12px; --icon-gap: 4px; --icon-drop: -1px; }

#credit {
    --away: translateY(40px);
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 13px;
    line-height: 1;
    opacity: 0.75;
    z-index: 1;
}

#credit a { color: inherit; }

/* ---------- In-game HUD ---------- */

#score {
    --y: 359;
    --away: translateX(200px);
    right: 60px;
    font-size: 50px;
    z-index: 1;
}

#coin-icon {
    --away: translateX(200px);
    position: absolute;
    right: 61.5px;
    bottom: 330.5px;
    width: 15px;
    height: 15px;
    z-index: 1;
}

#coins {
    --y: 326.5;
    --away: translateX(200px);
    right: 80px;
    font-size: 30px;
    z-index: 1;
}

#coins.rush { color: var(--yellow); }

/* The chain of Perfects and whether a dash is ready */
#flow {
    --y: 300;
    --away: translateX(200px);
    right: 60px;
    font-size: 20px;
    letter-spacing: 0.05em;
    z-index: 1;
}

#flow.hot { color: var(--yellow); }

#dash-pip {
    --y: 278;
    --away: translateX(200px);
    right: 60px;
    font-size: 15px;
    letter-spacing: 0.08em;
    opacity: 0.3;
    z-index: 1;
}

#dash-pip.ready { opacity: 0.9; }

/* A region's or set piece's name as it comes in, and first-time tips */
#banner, #hint {
    left: 50%;
    translate: -50% 0;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    text-shadow: 0 2px 0 rgb(0 0 0 / 0.25);
}

#banner {
    --y: 290;
    font-size: 40px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#banner.small { font-size: 26px; --y: 300; }

#banner.on { animation: banner 2.4s ease-out; }

@keyframes banner {
    0% { opacity: 0; transform: translateY(8px); letter-spacing: 0.3em; }
    15% { opacity: 1; transform: none; letter-spacing: 0.12em; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

#hint {
    --y: 96;
    font-size: 24px;
    padding: 6px 14px 4px;
    background: rgb(0 0 0 / 0.35);
    border-radius: 4px;
    transition: opacity 0.25s;
}

#hint.on { opacity: 1; }

#pause-btn {
    --away: translateX(-150px);
    left: 55px;
    bottom: 359px;
    width: 30px;
    height: 30px;
    background: none;
    border: 0;
    z-index: 1;
}

/* Moves down while the coin total shows above it after buying a boost */
#pause-btn.lowered:not(.away) { transform: translateY(40px); }

.boost {
    --away: translateY(-140px);
    --dur: 0.2s;
    position: absolute;
    left: calc(156px + var(--i) * 108px);
    bottom: 301px;
    width: 88px;
    height: 88px;
    background: rgb(200 0 0 / 0.6);
    border: 2px solid #fff;
    z-index: 1;
}

.boost[data-boost="skip"] { --i: 0; }
.boost[data-boost="rush"] { --i: 1; }
.boost[data-boost="small"] { --i: 2; }
.boost[data-boost="shield"] { --i: 3; }

.boost.flash { animation: boost-flash 1.4s linear 2; }

@keyframes boost-flash {
    50% { border-color: var(--yellow); }
}

.boost .name {
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    font-size: 18px;
    line-height: 1;
    text-align: center;
}

.boost > img {
    position: absolute;
    left: 26px;
    top: 26px;
    width: 32px;
    height: 32px;
}

.boost .price {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    bottom: 3px;
    font-size: 20px;
    line-height: 1;
    --icon: 10px;
    --icon-gap: 4px;
    --icon-drop: -2px;
}

#shade {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--shade, 0);
    pointer-events: none;
    z-index: 11;
}

#pause-title {
    --y: 294;
    --away: translateY(-414px);
    --dur: 0.2s;
    left: 50%;
    translate: -50% 0;
    font-size: 50px;
    z-index: 15;
}

/* What every input does, under "Paused" */
#controls {
    --away: translateY(414px);
    --dur: 0.2s;
    position: absolute;
    left: 50%;
    translate: -50% 0;
    bottom: 70px;
    margin: 0;
    display: grid;
    grid-template-columns: auto auto;
    gap: 7px 16px;
    padding: 12px 18px 10px;
    background: rgb(0 0 0 / 0.4);
    border-radius: 6px;
    font-size: 21px;
    line-height: 1;
    white-space: nowrap;
    z-index: 15;
}
#controls dt { text-align: right; color: var(--yellow); }
#controls dd { margin: 0; }

/* ---------- Panels over the shade ---------- */

.panel {
    --away: translateY(-414px);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.panel > * { pointer-events: auto; }

#gameover { z-index: 15; }

#go-title, #go-score, #go-coins {
    left: 50%;
    translate: -50% 0;
}

#go-title { --y: 310.5; font-size: 50px; }
#go-score { --y: 240.5; font-size: 50px; }
#go-coins { --y: 180.5; font-size: 30px; }

#go-signin {
    --y: 70;
    left: 50%;
    translate: -50% 0;
    font-size: 20px;
    color: #fff;
}
#go-signin[hidden] { display: none; }

#restart-btn {
    left: 50%;
    translate: -50% 0;
    bottom: 101px;
    width: 190px;
    height: 41px;
    font-size: 30px;
}

.close {
    position: absolute;
    right: 34px;
    top: 22px;
    width: 44px;
    height: 44px;
    font-size: 28px;
    line-height: 44px;
    font-family: system-ui, sans-serif;
}

#store, #stats { z-index: 16; }

/* DIN-style condensed letters crowd at small sizes: open the stats panel up a little */
#stats { letter-spacing: 0.04em; }

#store-title {
    --y: 364;
    left: 50%;
    translate: -50% 0;
    font-size: 30px;
}

.tile {
    position: absolute;
    left: calc(50% + var(--c) * 108px - 44px);
    bottom: calc(var(--r) * 1px);
    width: 88px;
    height: 88px;
    background: var(--red);
    border: 2px solid #000;
}

.tile.owned { border-color: #fff; }
.tile.selected { border-color: var(--yellow); }
.tile.denied { animation: denied 0.2s steps(1) 3; }

@keyframes denied {
    0% { border-color: rgb(255 0 0); }
    50% { border-color: #000; }
}

.tile > img {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 36px;
    height: 54.9px;
    translate: -50% -50%;
}

.tile .price {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    bottom: 3px;
    font-size: 20px;
    line-height: 1;
    --icon: 10px;
    --icon-gap: 4px;
    --icon-drop: -2px;
}

.tile .price:empty { display: none; }

.tab {
    position: absolute;
    top: 15px;
    height: 36px;
    padding: 0.12em 10px 0;
    font-size: 21px;
    line-height: 1;
    background: var(--red);
    border: 2px solid #fff;
}

.tab.active { background: var(--dark-red); }

#tab-stats { left: calc(50% - 238px); }
#tab-board { right: calc(50% - 284px); }

/* Where the name box was: log in, or who's logged in */
#account {
    position: absolute;
    left: calc(50% - 238px);
    top: 78px;
    width: 522px;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    line-height: 1;
}
#account[hidden], #account [hidden] { display: none; }
#account-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#account-signin, #account-signout {
    margin-left: auto;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 14px 0.08em;
    color: #fff;
    text-decoration: none;
    border: 2px solid #fff;
    background: var(--red);
}
#account-signin:hover, #account-signout:hover { background: var(--dark-red); }

#rows {
    position: absolute;
    left: calc(50% - 238px);
    width: 522px;
    top: 124px;
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    height: 23px;
    font-size: 20px;
    line-height: 23px;
    white-space: nowrap;
}

.row .val { --icon: 12px; --icon-gap: 4px; --icon-drop: -2px; }
.row.me { margin-top: 4px; color: var(--yellow); }

/* ---------- Loading and portrait phones ---------- */

#loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 30px;
    background: rgb(230 0 0);
    z-index: 30;
}

#loading.done { display: none; }

#rotate-hint {
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(env(safe-area-inset-top) + 24px);
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
}

@media (orientation: portrait) and (pointer: coarse) {
    #rotate-hint { display: block; }
}