/* ============================================================
 * Shell — framework-level styles (intro/start/rules/score/end,
 * header, popups, countdowns, language selection, animations,
 * responsive sizing).
 * Ported from shared/css/style.css (A.5 cutover).
 * Image paths now go assets/images/... ; relative from styles/.
 * ============================================================ */

/*---------------------------------*/
/* Backbone */

/* Reset (Bootstrap reboot used to provide all of this).
   - border-box: padding doesn't overflow width/max-width
   - body font-size: 1rem makes `em` units relative to the root rem (Archivo h1
     scaling depends on this — without it `4.5em` evaluates against the browser
     default 16px instead of the cascaded root font-size, blowing up text width)
   - h1 margin reset: browser default `margin: 0.67em 0` shifts heading layout */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-size: 1rem;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

:root {
    font-size: 16px;
    --logo-height: 11rem;
    --header-btn-height: 7.5rem;
    --header-height: 18rem;
    --yellow-header: #FFB500;
    --blue: #21B4E9;
    --pink: #EC6EA6;
    --circle-black: #2F3542;
    --light-blue: #80a5d1;
    --blue: #385881;
}

html {
    font-family: "Archivo";
}

@supports (height: 100svh) {
    body { height: 100svh; }
    main { height: calc(100svh - var(--header-height)); }
}
@supports not (height: 100svh) {
    body { height: 100vh; }
    main { height: calc(100vh - var(--header-height)); }
}

body {
    width: 100vw;
    background-color: white;
    margin: 0;
}

header {
    background-color: var(--yellow-header);
    height: var(--header-height);
}

main {
    width: 100%;
    position: relative;
}

section {
    height: 100%;
    width: 100%;
}

/*---------------------------------*/
/* Utility classes (replacing the subset of Bootstrap we used) */

.d-flex                 { display: flex; }
.flex-column            { flex-direction: column; }
.flex-row               { flex-direction: row; }

.gap-3                  { gap: 1rem; }
.gap-4                  { gap: 1.5rem; }
.gap-5                  { gap: 3rem; }

.justify-content-start    { justify-content: flex-start; }
.justify-content-center   { justify-content: center; }
.justify-content-between  { justify-content: space-between; }
.justify-content-end      { justify-content: flex-end; }

.align-items-start  { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end    { align-items: flex-end; }

.w-100              { width: 100%; }
.h-100              { height: 100%; }

.px-5               { padding-left: 3rem; padding-right: 3rem; }
.py-4               { padding-top: 1.5rem; padding-bottom: 1.5rem; }

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

button.btn {
    border: none;
    cursor: pointer;
}

/*---------------------------------*/
/* Shell-specific utility classes */
.h-fit {
    height: fit-content;
}

.hidden {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

.locked {
    pointer-events: none;
}

.visible {
    visibility: visible;
    position: relative;
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

.margin-right-num       { margin-right: 1rem; }
.margin-right-num-half  { margin-right: 0.5rem; }

.textUpFadeAnimationNoVisibility {
    animation: textUpFadeAnimationNoVisibility 0.4s ease-in-out forwards;
}

/* Clickable non-button elements get pointer cursor. */
#intro,
.header-btn,
.clawButton {
    cursor: pointer;
}

/* Overlays inside #game start hidden; the game lifecycle reveals them when needed. */
#clawCountdown,
#commonCountdown,
.wordMessagePanel {
    visibility: hidden;
}

/*---------------------------------*/
/* Header components */
.logo {
    height: var(--logo-height);
}

.header-logo-container,
.header-buttons-container {
    flex-shrink: 0;
}

/* Desktop: center logo using absolute positioning */
@media only screen and (min-width: 768px) {
    header {
        position: relative;
    }
    .header-logo-container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1rem;
    }
    .header-buttons-container {
        margin-left: auto;
    }
}

.header-btn {
    height: var(--header-btn-height);
    aspect-ratio: 1;
    border-radius: 10000px;
    background-color: var(--light-blue);
    border: 0.4rem solid var(--circle-black);
    font-family: "Archivo";
    font-weight: bold;
    color: white;
}

#header-instruction-text { font-size: 3.5rem; }
#header-lng-text         { font-size: 2.5rem; }

/*---------------------------------*/
/* Backgrounds */
.rachetBg {
    background: url(../assets/images/backgrounds/portrait_rachet.png) no-repeat top center;
    background-size: cover;
}

#game {
    background: url(../assets/images/backgrounds/portrait_game.png) no-repeat top center;
    background-size: cover;
}

#intro {
    display: flex;
    flex-direction: column;
}

.intro-bg-subsection {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background: url(../assets/images/backgrounds/portrait_intro.png) no-repeat top center;
    background-size: cover;
    padding-bottom: 15rem;
    margin: 0;
    position: relative;
}

.intro-text-container {
    padding-left: 9rem;
    padding-right: 9rem;
    max-width: 100%;
}

.intro-sign {
    position: absolute;
    top: 6rem;
    left: 5rem;
    height: 20rem;
    width: auto;
    object-fit: contain;
    margin-bottom: 2rem;
}

.intro-footer-subsection {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 2rem;
    height: 15%;
}

.intro-dots {
    height: 20%;
    width: auto;
    object-fit: contain;
}

/*---------------------------------*/
/* Text and buttons */

.text-container {
    padding-top: 13rem;
    padding-left: 9rem;
    padding-right: 9rem;
    max-width: 100%;
}

h1.main-text,
h1.main-small-text,
h1.secondary-text {
    font-family: "Archivo";
    color: white;
    font-weight: bolder;
    -webkit-text-stroke: 0.03125rem var(--blue);
    text-shadow: 0 0 0.125rem white;
}
/* The language packs use 
 for deliberate line breaks (rules, score), and the wrap that is
   left is balanced so a title never ends on a one-word orphan. */
h1.main-text,
h1.main-small-text,
h1.secondary-text,
.rules-panel h1 {
    white-space: pre-line;
    text-wrap: balance;
}
h1.main-text        { font-size: 4.5em; }
h1.main-small-text  { font-size: 4.0em; }
h1.secondary-text   { font-size: 3.0rem; }

.btn {
    font-family: "Archivo";
    font-style: italic;
    font-size: 3.6em;

    height: 8rem;
    border-radius: 10rem;
    background-color: var(--yellow-header);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 30rem;
    max-width: 45rem;

    animation: pulse 2s infinite;
}

#start .btn               { margin-top: 5rem; }
#rules .btn               { margin-top: 3rem; }
#score .btn:first-of-type { margin-top: 2rem; }

#languageSelection .btn {
    background-color: var(--blue);
    margin-left: 2rem;
    margin-right: 2rem;
}
#languageSelection .btn:first-of-type { margin-top: 2rem; }
#languageSelection .btn:last-of-type  { margin-bottom: 2rem; }

.btn:hover, .btn:active {
    background-color: var(--yellow-header);
    color: white;
}

#languageSelection .btn.active {
    background-color: var(--blue);
    opacity: 0.4;
    animation: none;
    color: white;
}

.rules-panel {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5rem;
    padding: 6rem;
    max-width: 100%;
}

.rules-panel h1 {
    font-family: "Archivo";
    color: black;
    font-style: normal;
    font-weight: 600;
    font-size: 2.8rem;
}

/*---------------------------------*/
/* Countdown / message overlays (revealed by JS) */

.countdownPanel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    padding-top: 10rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.countdownPanel h1 {
    font-family: "Archivo";
    font-size: 9rem;
    color: white;
    font-style: italic;
    text-align: center;
    text-shadow: 0 0 0.625rem white;
}

.countdownPanel #gameCountdownNumber {
    font-size: 18rem;
    text-shadow: 0 0 0.625rem white;
}

.countdownPanel img {
    height: 14rem;
}

.wordMessagePanel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    padding-top: 10rem;
    padding-left: 3rem;
    padding-right: 3rem;
    visibility: hidden;
    pointer-events: none;
}

.wordMessagePanel h1 {
    font-family: "Archivo";
    font-size: 9rem;
    color: white;
    font-style: italic;
    text-align: center;
    text-shadow: 0 0 0.625rem white;
}

/*---------------------------------*/
/* Orientation popup */
#rotatePopup {
    font-family: 'Archivo';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    text-align: center;
    font-size: 24px;
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/*---------------------------------*/
/* Responsive: root font-size + max-w containers */

/* Small devices (phones, 600px and down, portrait) */
@media only screen and (max-width: 600px) and (orientation: portrait) {
    :root { font-size: 5.5px; }
}
@media only screen and (max-width: 600px) and (min-height: 700px) and (orientation: portrait) {
    :root { font-size: 6px; }
}
@media only screen and (max-width: 600px) and (min-height: 750px) and (orientation: portrait) {
    :root {
        font-size: 6px;
        --header-height: calc(18rem + 8vh);
    }
}
@media only screen and (max-width: 350px) and (min-height: 750px) and (orientation: portrait) {
    :root {
        font-size: 6px;
        --header-height: calc(18rem + 20vh);
    }
}

/* Tablets, ipads */
@media only screen and (min-width: 600px) and (orientation: portrait) {
    :root { font-size: 9px; }
}
@media only screen and (min-width: 800px) and (orientation: portrait) {
    :root { font-size: 10px; }
}
@media only screen and (min-width: 900px) and (orientation: portrait) {
    :root { font-size: 12px; }
}
@media only screen and (min-width: 1000px) and (orientation: portrait) {
    :root { font-size: 13px; }
}
@media only screen and (min-width: 1050px) {
    :root { font-size: 16px; }
}

/* Large vertical monitors (4K and the like; above 1440px, avoid iPad Pro at 1024).
   No centred container: the page fills the screen and behaves exactly like the 1080px-wide
   layout, only scaled. Everything is in rem, so scaling the root is all it takes — 16px at
   1080px wide, 32px at 2160px (4K). */
@media only screen and (min-width: 1440px) and (orientation: portrait) {
    :root { font-size: calc(100vw * 16 / 1080); }
}

/* Landscape default */
@media only screen and (orientation: landscape) {
    :root { font-size: 16px; }

    .rachetBg {
        background: url(../assets/images/backgrounds/landscape_rachet.png) no-repeat center center;
        background-size: cover;
    }

    #game {
        background: url(../assets/images/backgrounds/landscape_game.png) no-repeat center center;
        background-size: cover;
    }

    #intro {
        flex-direction: row;
    }

    .intro-bg-subsection {
        background: url(../assets/images/backgrounds/landscape_intro.png) no-repeat center center;
        background-size: cover;
        justify-content: flex-end;
        padding-bottom: 15rem;
    }

    .intro-footer-subsection {
        padding: 2rem;
        height: 100%;
        width: 25%;
    }

    .intro-dots {
        width: 70%;
        height: auto;
    }

    .intro-text-container {
        padding-top: 0;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
    }

    .intro-dots {
        height: 12rem;
    }

    .max-w { max-width: 500px; margin: 0 auto; }
}

@media only screen and (max-height: 500px) and (orientation: landscape) {
    :root { font-size: 3.5px; }
    .max-w { max-width: 500px; margin: 0 auto; }
}

@media only screen and (min-height: 500px) and (orientation: landscape) {
    :root { font-size: 5px; }
    .max-w { max-width: 700px; margin: 0 auto; }
    .text-container { padding-top: 9rem; }
}

@media only screen and (min-height: 600px) and (orientation: landscape) {
    :root { font-size: 7px; }
    .max-w { max-width: 700px; margin: 0 auto; }
    .text-container { padding-top: 9rem; }
}

@media only screen and (min-height: 800px) and (orientation: landscape) {
    :root { font-size: 7px; }
    .max-w { max-width: 700px; margin: 0 auto; }
    .text-container { padding-top: 9rem; }
}

@media only screen and (min-height: 900px) and (orientation: landscape) {
    :root { font-size: 7px; }
    .max-w { max-width: 700px; margin: 0 auto; }
    .text-container { padding-top: 9rem; }
}

@media only screen and (min-height: 1000px) and (orientation: landscape) {
    :root { font-size: 10px; }
    .max-w { max-width: 700px; margin: 0 auto; }
    .text-container { padding-top: 9rem; }
}

@media only screen and (min-height: 1200px) and (orientation: landscape) {
    :root { font-size: 10px; }
    .max-w { max-width: 700px; margin: 0 auto; }
    .text-container { padding-top: 9rem; }
}

@media only screen and (min-height: 1300px) and (orientation: landscape) {
    :root { font-size: 12px; }
    body { background-color: white; }
    main { max-width: 1600px; margin: 0 auto; }
    header > div { max-width: 1400px; }
    .max-w { max-width: 900px; margin: 0 auto; }
    .text-container { padding-top: 9rem; }
}

/*---------------------------------*/
/* Animations */
@keyframes pulse {
    0%   { transform: scale(1); opacity: 1; }
    30%  { transform: scale(1.1); }
    60%  { transform: scale(1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes textUpFadeAnimationNoVisibility {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-50px); opacity: 0; }
}