/* Parabolic Master 99 — game page styles (standalone game shell: no /assets/css imports) */

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    overscroll-behavior: none;
    touch-action: manipulation; /* pinch-zoom allowed, double-tap zoom off */
}

body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

input {
    -webkit-user-select: text;
    user-select: text;
    font-size: 16px; /* 16 px or more stops iOS zooming into the field */
    font-family: Arial, sans-serif;
}

button {
    font-family: Arial, sans-serif;
    touch-action: manipulation;
    cursor: pointer;
}

[hidden] { display: none !important; }

/* ------------------------------------------------------------------ layout */

#app {
    display: grid;
    width: 100%;
    height: 100%;
    max-width: 1340px; /* 1000 px canvas + side panel + gaps (MAX_CANVAS_W in sketch.js) */
    margin: 0 auto;
    padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "strip" "canvas" "panel";
}

#app.layout-side {
    grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 300px);
    grid-template-rows: auto var(--row-h, 400px);
    align-content: center;
    grid-template-areas: "strip strip" "canvas panel";
    gap: 8px;
    padding-top: 8px;
}

/* ----------------------------------------------------------- status strip */

#control-strip {
    grid-area: strip;
    background-color: #333;
    border-radius: 8px;
    padding: 5px 8px;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.2;
    min-width: 0;
}

.strip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.strip-stats {
    margin-top: 4px;
    justify-content: space-between;
    gap: 6px;
    font-size: 13px;
}

.strip-spacer { flex: 1 1 auto; }

.badge {
    background: #ffd700;
    color: #222;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46vw;
}

.st-item { white-space: nowrap; }
.st-key { color: #ccc; font-weight: normal; }
.st-target b { color: #7dff9a; }
.st-time b { font-variant-numeric: tabular-nums; }
#st-shots, #st-hits, #st-first, #st-streak { font-variant-numeric: tabular-nums; }

.strip-btn {
    background-color: #FFD700;
    color: #222;
    border: none;
    border-radius: 8px;
    min-width: 44px;
    height: 40px;
    padding: 0 10px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
}
.strip-btn:hover { filter: brightness(110%); }
.strip-btn:active { transform: scale(0.95); }
.btn-label { font-size: 14px; display: none; }

#lb-btn.icon-only {
    width: 44px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    padding: 0;
    flex: 0 0 auto;
}

/* Wide layouts: everything on one line */
#app.layout-side #control-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 6px 10px;
}
#app.layout-side .strip-row { display: contents; }
#app.layout-side .strip-stats { margin-top: 0; }
#app.layout-side #st-badge { order: 1; }
#app.layout-side .st-target { order: 2; }
#app.layout-side .strip-stats .st-item { order: 3; }
#app.layout-side .strip-spacer { order: 4; }
#app.layout-side #new-btn { order: 5; }
#app.layout-side #lb-btn { order: 6; }

@media (min-width: 1100px) {
    .btn-label { display: inline; }
}

/* ------------------------------------------------------------------ canvas */

#sketch-holder {
    grid-area: canvas;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

#app.layout-side #sketch-holder { align-items: flex-start; }
#app.layout-side #panel { align-self: start; max-height: 100%; }
#app.layout-stacked #panel > * { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }

#sketch-holder canvas:focus { outline: none; }
#sketch-holder canvas:focus-visible { outline: 2px solid rgba(255, 215, 0, 0.7); outline-offset: 1px; }

#sketch-holder canvas {
    display: block;
    touch-action: none;
    border-radius: 6px;
    cursor: crosshair;
}

#congratulations {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 14px 30px;
    border-radius: 10px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    z-index: 50;
    display: none;
    cursor: pointer;
    white-space: nowrap;
}
#congratulations.show {
    display: block;
    animation: fadeInOut 1.8s ease forwards;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    15% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

/* ------------------------------------------------------------------- panel */

#panel {
    grid-area: panel;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    background: #161616;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#aim-readout {
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    gap: 10px;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}
.aim-sym { color: #ffcc54; font-weight: bold; }
.aim-pair b { font-size: 26px; }
.aim-unit { color: #ccc; font-size: 16px; }

.hint {
    margin: 0;
    color: #bbb;
    font-size: 13px;
    text-align: center;
    line-height: 1.3;
}

.fire-button {
    width: 100%;
    min-height: 54px;
    background-color: #FF4444;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    flex: 0 0 auto;
}
.fire-button:hover { filter: brightness(110%); }
.fire-button:active { transform: scale(0.98); }
.fire-button:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
    filter: none;
}

.pad { display: flex; flex-direction: column; gap: 6px; }
.pad-row {
    display: grid;
    grid-template-columns: 30px repeat(4, minmax(44px, 1fr));
    gap: 6px;
    align-items: center;
}
.pad-sym { color: #ffcc54; font-weight: bold; font-size: 18px; text-align: center; }
.pad-btn {
    min-height: 44px;
    background: #2c2c2c;
    color: #fff;
    border: 1px solid #555;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    -webkit-user-select: none;
    user-select: none;
}
.pad-btn:active, .pad-btn.held { background: #ffd700; color: #222; }

.cheat-box { display: flex; flex-direction: column; gap: 6px; }
.calc-button {
    min-height: 44px;
    background: #2a2a2a;
    color: #ffd700;
    border: 2px solid #ffd700;
    border-radius: 10px;
    font-size: 17px;
    font-weight: bold;
}
.calc-button:hover { background: #333; }
.calc-pin {
    margin: 0;
    background: rgba(255, 215, 0, 0.12);
    border-left: 3px solid #ffd700;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 14px;
    color: #ffe680;
}

.live {
    background: #101010;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0;
    flex: 0 0 auto;
}
.live-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #ffd700;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 10px;
    min-height: 40px;
    text-align: left;
}
.live-summary {
    flex: 1 1 auto;
    color: #ddd;
    font-weight: normal;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.live-caret { transition: transform 0.2s; }
.live.collapsed .live-caret { transform: rotate(-90deg); }
.live.collapsed #live-body { display: none; }
.live:not(.collapsed) .live-summary { display: none; }
.live:not(.collapsed) #live-title { flex: 1 1 auto; }
#live-body { padding: 0 10px 8px; }
.live-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.live-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 4px 4px;
    border-radius: 4px;
    align-items: baseline;
}
.live-list li .lv-rank { color: #ffd700; font-weight: bold; }
.live-list li .lv-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.live-list li .lv-score { font-weight: bold; font-variant-numeric: tabular-nums; }
.live-list li .lv-time { color: #aaa; font-size: 12px; font-weight: normal; margin-left: 4px; }
.live-list li.me { background: rgba(255, 215, 0, 0.18); outline: 1px solid rgba(255, 215, 0, 0.6); }
.live-me { margin: 6px 0 0; font-size: 14px; color: #ffe680; font-weight: bold; }
.live-status { margin: 6px 0 0; font-size: 12px; color: #999; }

.keys-hint {
    margin: 0;
    font-size: 12px;
    color: #888;
    text-align: center;
}
@media (hover: none) and (pointer: coarse) {
    .keys-hint { display: none; }
}

/* ------------------------------------------------------------------ modals */

.pm-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
}

.pm-card {
    background: #111;
    color: #fff;
    border: 2px solid #ffd700;
    border-radius: 12px;
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.pm-card h2 {
    margin: 0 0 4px;
    color: #ffd700;
    font-size: 22px;
    text-align: center;
}

.ng-event {
    margin: 0 0 6px;
    text-align: center;
    color: #ffe680;
    font-weight: bold;
    font-size: 14px;
}
.ng-intro { margin: 0 0 8px; font-size: 14px; color: #ddd; text-align: center; }
.ng-warning {
    margin: 0 0 8px;
    padding: 6px 8px;
    font-size: 13px;
    background: rgba(255, 68, 68, 0.15);
    border-left: 3px solid #ff4444;
    border-radius: 4px;
}
.ng-label { display: block; font-weight: bold; font-size: 14px; margin-bottom: 4px; }

.nick-row { display: flex; gap: 6px; }
.nick-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 8px;
    border: 2px solid #555;
    background: #fff;
    color: #111;
}
.nick-row input:focus { outline: none; border-color: #ffd700; }
.dice-btn {
    flex: 0 0 auto;
    width: 46px;
    min-height: 44px;
    border-radius: 8px;
    border: 2px solid #555;
    background: #2a2a2a;
    font-size: 22px;
}

.ng-msg { margin: 4px 0 0; min-height: 1em; font-size: 13px; color: #ff9d9d; }
.ng-msg:empty { min-height: 0; }

.ng-field {
    border: none;
    margin: 10px 0 0;
    padding: 0;
    min-width: 0;
}
.ng-field legend {
    font-weight: bold;
    font-size: 14px;
    padding: 0;
    margin-bottom: 4px;
}
.locked-note {
    font-weight: normal;
    font-size: 12px;
    color: #222;
    background: #bbb;
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 6px;
}
.ng-help { margin: 4px 0 0; font-size: 12px; color: #aaa; }
.ng-nick-note { margin-top: 2px; }

.seg { display: flex; gap: 6px; }
.seg label { flex: 1 1 0; position: relative; }
.seg input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.seg span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 6px 6px;
    border-radius: 8px;
    border: 2px solid #555;
    background: #222;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
}
.seg input:checked + span { background: #ffd700; border-color: #ffd700; color: #222; }
.seg input:focus-visible + span { outline: 3px solid #fff; outline-offset: 1px; }
.seg input:disabled + span { cursor: not-allowed; opacity: 0.4; }
.seg input:disabled:checked + span { opacity: 0.75; }
.ng-field.locked legend { color: #999; }

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 14px;
    min-height: 44px;
    cursor: pointer;
}
.check-row input { width: 22px; height: 22px; accent-color: #ffd700; flex: 0 0 auto; }

.ng-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.start-btn {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
    color: #222;
    font-weight: bold;
    font-size: 19px;
}
.start-btn:hover { filter: brightness(105%); }
.ghost-btn {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    border: 2px solid #777;
    background: transparent;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}
.ng-actions .leaderboard-button { width: 100%; min-width: 0; }

/* Start stays reachable even when the card scrolls */
.ng-sticky {
    position: sticky;
    bottom: -16px;
    background: #111;
    padding: 8px 0 12px;
    margin-bottom: -12px;
    z-index: 2;
}

/* Calculator */
.calc-card { max-width: 460px; }
.calc-card:focus { outline: none; }
.eq {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 24px;
    margin: 6px 0 6px;
    font-style: italic;
}
.frac { display: inline-flex; flex-direction: column; align-items: center; }
.frac-num { padding: 0 6px 2px; border-bottom: 2px solid #fff; }
.frac-den { padding-top: 2px; }
.symbols {
    list-style: none;
    margin: 0 0 8px;
    padding: 6px 10px;
    background: #1c1c1c;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #ddd;
}
.symbols b { color: #ffcc54; display: inline-block; min-width: 22px; }

.calc-grid { display: flex; flex-direction: column; gap: 8px; }
.calc-field { display: flex; align-items: center; gap: 8px; }
.calc-sym { width: 26px; font-weight: bold; color: #ffcc54; font-size: 18px; text-align: center; }
.calc-field input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 8px;
    border: 2px solid #555;
    background: #fff;
    color: #111;
}
.calc-field input:focus { outline: none; border-color: #ffd700; }
.calc-unit { width: 36px; color: #ccc; font-size: 15px; }

.calc-result {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #1d2a1d;
    border: 1px solid #3a6b3a;
    min-height: 60px;
}
.calc-result[data-status="invalid"] { background: #1c1c1c; border-color: #444; }
.calc-result[data-status="flat"],
.calc-result[data-status="vertical"],
.calc-result[data-status="too-fast"],
.calc-result[data-status="too-slow"],
.calc-result[data-status="out-of-reach"] { background: #2d1d1d; border-color: #7a3a3a; }
.calc-headline { margin: 0; font-weight: bold; font-size: 16px; color: #fff; }
.calc-working { margin: 4px 0 0; font-size: 14px; color: #cfe8cf; font-variant-numeric: tabular-nums; }
.calc-note { margin: 4px 0 0; font-size: 13px; color: #ffe680; }
.calc-working:empty, .calc-note:empty { display: none; }

/* Game over */
.go-stats {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 16px;
    margin: 10px auto;
    width: max-content;
    max-width: 100%;
    font-size: 16px;
}
.go-stats dt { color: #bbb; }
.go-stats dd { margin: 0; font-weight: bold; text-align: right; font-variant-numeric: tabular-nums; }
.go-rank { text-align: center; font-weight: bold; color: #ffe680; margin: 8px 0 0; min-height: 1.2em; }

/* Shared leaderboard modal sits above the game-over card */
#leaderboard-modal { z-index: 900; }
#leaderboard-modal .modal-content { z-index: 901; }

/* ---------------------------------------------------- narrow phone tweaks */

@media (max-width: 390px) {
    #control-strip { font-size: 13px; padding: 4px 6px; }
    .strip-stats { font-size: 12px; gap: 4px; }
    .badge { font-size: 11px; padding: 2px 7px; }
    #aim-readout { font-size: 19px; }
    .aim-pair b { font-size: 23px; }
}

/* Landscape phones: tighten everything vertically */
@media (max-height: 500px) {
    .pm-card { max-width: 760px; }
    .live-list li .lv-time { display: none; }
    .ng-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
    .ng-intro { display: none; }
    .ng-field { margin-top: 6px; }
    .check-row { margin-top: 6px; }
    .calc-card { max-width: 780px; }
    .calc-cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0 18px; align-items: start; }
    .eq { font-size: 21px; margin-top: 2px; }
    .calc-result { margin-top: 8px; min-height: 0; }
    #app.layout-side { padding-top: 4px; gap: 6px; }
    #app.layout-side #control-strip { padding: 3px 8px; font-size: 13px; }
    .strip-btn, #lb-btn.icon-only { height: 34px; line-height: 34px; }
    #panel { padding: 8px; gap: 6px; }
    .fire-button { min-height: 46px; font-size: 20px; }
    #aim-readout { font-size: 18px; }
    .aim-pair b { font-size: 21px; }
    .pm-card { padding: 10px 14px 12px; }
    .pm-card h2 { font-size: 19px; }
}

/* Small landscape phones (640-720 px wide): keep the side-layout strip on one line */
@media (max-height: 500px) and (max-width: 720px) {
    #app.layout-side #control-strip { column-gap: 8px; padding: 3px 6px; }
    #app.layout-side .strip-stats { font-size: 12px; }
    #app.layout-side .st-key { font-size: 11px; }
    #app.layout-side .badge { padding: 2px 7px; font-size: 11px; }
    #app.layout-side .strip-btn, #app.layout-side #lb-btn.icon-only { min-width: 40px; width: 40px; padding: 0; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    #congratulations.show { animation: none; }
    .live-caret { transition: none; }
    .fire-button:active, .strip-btn:active { transform: none; }
    /* the shared leaderboard modal (Games/shared/leaderboard.css) fades and slides in */
    #leaderboard-modal, #leaderboard-modal .modal-content { animation: none; }
    #leaderboard-modal .leaderboard-entry, #leaderboard-modal .modal-content button,
    .leaderboard-button { transition: none; }
    #leaderboard-modal .leaderboard-entry:hover, #leaderboard-modal .modal-content button:hover,
    .leaderboard-button:hover { transform: none; }
}