#bottom{
    clear: both;
    font-size: 50px;
    text-align: center;
     font-family: "Baloo 2", system-ui, sans-serif;
}
#compa_delta {
    margin-left: 10px;
    
}


#credit {
    font-size:15px;
    margin-top: 30px;
}

.empty_ice{
    opacity: .3;
    font-weight: 250;
}

.help{
    color: green;
}
.hidden{
    display: none;
}
.lost{
    color: red;
}

#tooltips {
    font-size: 15px;
  background: #d94a4a;
  color: #fff;

  padding: 8px 10px;
  border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
  

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

  line-height: 1.3;

  border-left: 25px solid #3fd16f; /* accent bar */
}

#tooltip-text.new{
    font-weight:bold;
    text-decoration: underline;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
#top{
    text-align:center;
    font-size: 50px;
     font-family: "Baloo 2", system-ui, sans-serif;
}

dialog {
    padding: 20px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.modal__window {
  position: relative;
  background-color: white;
  padding: 4em 2em;
}


/* =========================
   DEFEAT SCREEN CONTAINER
   ========================= */

#defeat {
    position: fixed;
    inset: 0;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* start invisible with transparent overlay */
    background: linear-gradient(
        180deg,
        rgba(232,217,181,0) 0%,
        rgba(243,200,106,0) 45%,
        rgba(229,154,87,0) 100%
    );

    transition: opacity .8s ease, background 1.2s ease;

    font-family: "Baloo 2", system-ui, sans-serif;
    text-align: center;
    padding: 120px 40px 120px;
    box-sizing: border-box;
}

#defeat.fade-screen {
    background: linear-gradient(
        180deg,
        #e8d9b5 0%,
        #f3c86a 45%,
        #e59a57 100%
    );
    opacity: 1;
    pointer-events: auto;
}

#defeat > div {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
}

#defeat.show-text {
    opacity: 1;           /* make the text layer visible */
    pointer-events: auto; /* allow the click that triggers phase 2 */
}

/* Phase 1: text appears */
#defeat.show-text > div {
    opacity: 1;
    transform: translateY(0);
}

/* Phase 1 specifics */
#defeat.show-text > div:first-child {
    opacity: 0.75;
}

#defeat.show-text button {
    display: none;
}

/* Phase 2: overlay + button */
#defeat.fade-screen > div:first-child {
    opacity: 1;
}

#defeat.fade-screen button {
    display: inline-block;
}
/* =========================
   TITLE (CHINGA LA MIGRA)
   ========================= */

#defeat > div:first-child {
    font-size: clamp(70px, 10vw, 140px);
    font-weight: 900;

    color: #d71920;

    /* bold black outline */

    /* arcade drop shadow */


    margin-bottom: 70px;

    /* prevents outline from being clipped */
    padding: 20px 10px;
}


/* =========================
   RESTART BUTTON
   ========================= */

#restart {
    font-family: "Baloo 2", system-ui, sans-serif;
    font-size: clamp(36px, 4vw, 60px);
    letter-spacing: 4px;
    text-transform: uppercase;

    padding: 22px 80px;

    color: #e9f3f1;
    background: #2f9a8f;

    border: none;
    border-radius: 26px;

    cursor: pointer;

    /* chunky arcade depth */
    box-shadow:
        0 10px 0 #1f6e66,
        0 18px 28px rgba(0,0,0,0.35);

    transition: transform 0.12s ease,
                box-shadow 0.12s ease,
                background 0.15s ease;
}


/* button press effect */
#restart:hover {
    background: #34a99d;
}

#restart:active {
    transform: translateY(8px);
    box-shadow:
        0 3px 0 #1f6e66,
        0 8px 14px rgba(0,0,0,0.3);
}

/* =========================
   VICTORY SCREEN CONTAINER
   ========================= */



#victory {
    position: fixed;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* darker grounded green — no glow */
    background: linear-gradient(
        180deg,
        #a9caa4 0%,
        #5fa66a 45%,
        #2e6b45 100%
    );

    font-family: "Baloo 2", system-ui, sans-serif;
    text-align: center;

    padding: 120px 40px;
    box-sizing: border-box;
}


/* =========================
   TITLE
   ========================= */

#victory > div:first-child {
    font-size: clamp(70px, 10vw, 140px);
    font-weight: 900;

    color: #f1f1f1;

    /* same physical weight as defeat title */
    text-shadow:
        0 6px 0 #1f4d32,
        0 14px 26px rgba(0,0,0,0.35);

    margin-bottom: 70px;
    padding: 20px 10px;
}

/* =========================
   NEXT BUTTON
   ========================= */

#next {
    font-family: "Baloo 2", system-ui, sans-serif;
    font-size: clamp(36px, 4vw, 60px);
    letter-spacing: 4px;
    text-transform: uppercase;

    padding: 22px 80px;

    color: #ffffff;

    /* Mexican flag red */
    background: #ce2b37;

    border: none;
    border-radius: 26px;

    cursor: pointer;

    box-shadow:
        0 10px 0 #9e1f29,
        0 18px 28px rgba(0,0,0,0.35);

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.15s ease;
}

#next:hover {
    background: #e03340;
}

#next:active {
    transform: translateY(8px);
    box-shadow:
        0 3px 0 #9e1f29,
        0 8px 14px rgba(0,0,0,0.3);
}

.screen {
  position: fixed;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  opacity: 0;
  pointer-events: none;

  transition: opacity 1.5s ease;
}

.screen.visible {
  opacity: 1;
  pointer-events: auto;
}
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}


#game {
     flex: 1;                 /* fills remaining screen */
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* vertical centering */

    text-align: center;
}


#game-column {
    width: fit-content;
    margin-inline: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}


#confirm_caption {
    font-family: "Baloo 2", system-ui, sans-serif;

    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.3;

    margin-top: 10px;
    margin-bottom: 10px;

    color: #2f3c46;

    opacity: 0.85;

    text-align: center;
    padding: 8px 16px;
    border-radius: 12px;

    background: rgba(0,0,0,0.05);
}

#confirm {
    font-family: "Baloo 2", system-ui, sans-serif;
    font-size: clamp(18px, 2vw, 26px);
    letter-spacing: 1px;

    padding: 10px 28px;

    color: #ffffff;
    background: #3a86ff; /* readable, friendly action color */

    border: none;
    border-radius: 14px;

    cursor: pointer;

    /* lighter depth than restart/next */
    box-shadow:
        0 6px 0 #2a63bb,
        0 10px 18px rgba(0,0,0,.25);

    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease,
        background 0.15s ease;

    text-transform: uppercase;
}

#confirm:hover {
    background: #4c96ff;
}

#confirm:active {
    transform: translateY(5px);
    box-shadow:
        0 2px 0 #2a63bb,
        0 5px 10px rgba(0,0,0,.25);
}

#confirm:disabled {
    background: #9aa5ad;
    cursor: default;

    box-shadow:
        0 4px 0 #6f7a81,
        0 6px 10px rgba(0,0,0,.15);

    transform: none;
    opacity: 0.7;
}

#win_menu button {
    margin-top: 4px;
}

.delta-pop {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--fade-time, 1200ms) ease-out,
        transform var(--fade-time, 1200ms) ease-out;
}

.delta-pop.fade-out {
    opacity: 0;
    transform: translateY(-12px); /* subtle upward drift */
}