/* ============================================================================
 * MARTIAN MANSIONS - HUD + menu styling
 * Playful sci-fi cartoon look matching the original 2012 art direction:
 * glossy blue blob buttons, chunky green digits, Mars-orange accents.
 * ==========================================================================*/

:root {
    --blue-hi:   #4fa8ff;
    --blue-lo:   #1a4fd6;
    --blue-edge: #0c2f8e;
    --green:     #52e846;
    --green-dk:  #1e8a1a;
    --orange:    #ff8a1e;
    --orange-dk: #d95f00;
    --cream:     #fff4e2;
    --ink:       #2a1200;
    --font: 'Baloo 2', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: #5c1d16;
    font-family: var(--font);
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#gameCanvas { position: fixed; inset: 0; display: block; }

/* ------------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; display: none; }
#hud.visible { display: block; }
#hud button { pointer-events: auto; }

.hud-top {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 10px 12px;
}
.hud-left, .hud-right { display: flex; flex-direction: column; gap: 8px; }
.hud-right { align-items: flex-end; }

.hud-num {
    font-weight: 800;
    color: var(--green);
    -webkit-text-stroke: 1.5px #0c3a08;
    text-shadow: 0 2px 0 rgba(0,0,0,0.45);
    font-size: 24px;
    line-height: 1;
}
.hud-num.big { font-size: 40px; }

.hud-lives {
    display: flex; align-items: center; gap: 6px;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.4));
}
.heart {
    width: 38px; height: 40px; display: inline-block;
    background: url('heart.png') center/contain no-repeat;
}
.lives-img {
    width: 58px; height: 58px;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.4));
    user-select: none; -webkit-user-drag: none;
}

/* original glossy digit sprites */
.dig { height: 1em; width: auto; margin: 0 -0.14em; vertical-align: baseline; }
#hudScore .dig { height: 46px; margin: 0 -7px; }
#hudTime  .dig { height: 24px; margin: 0 -4px; }
#hudLevel .dig { height: 40px; margin: 0 -6px; }

.hud-chip {
    display: flex; align-items: center; gap: 7px;
    background: linear-gradient(180deg, rgba(20,8,2,0.55), rgba(20,8,2,0.35));
    border: 2px solid rgba(255,220,170,0.35);
    border-radius: 14px;
    padding: 4px 12px;
}
.hud-chip.small .hud-num { font-size: 17px; }
.chip-label {
    font-size: 11px; font-weight: 800; letter-spacing: 1px;
    color: var(--cream); opacity: 0.85;
}

.hud-center { position: absolute; left: 50%; transform: translateX(-50%); top: 10px; }
.hud-score {
    font-size: 44px; font-weight: 800;
    color: var(--green);
    -webkit-text-stroke: 2px #0c3a08;
    text-shadow: 0 3px 0 rgba(0,0,0,0.5);
    line-height: 1;
}

.hud-level {
    display: flex; flex-direction: column; align-items: flex-end; line-height: 1;
}
.hud-level .chip-label { color: var(--cream); }

/* original MENU button art */
.menu-img-btn {
    width: 66px; height: 60px; border: none; cursor: pointer;
    background: url('btn_menu.png') center/contain no-repeat;
    filter: drop-shadow(0 5px 6px rgba(0,0,0,0.45));
    transition: transform 0.08s;
}
.menu-img-btn:active { transform: translateY(3px) scale(0.96); }

/* glossy blue blob button (menu / pause) */
.blob-btn {
    width: 58px; height: 58px; border: none; cursor: pointer;
    border-radius: 46% 54% 52% 48% / 52% 48% 52% 48%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,0.85) 0 14%, rgba(255,255,255,0) 32%),
        linear-gradient(180deg, var(--blue-hi), var(--blue-lo));
    box-shadow: 0 4px 0 var(--blue-edge), 0 7px 10px rgba(0,0,0,0.4);
    display: grid; place-items: center;
    transition: transform 0.08s;
}
.blob-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-edge); }
.pause-icon {
    width: 18px; height: 20px; display: inline-block;
    background:
        linear-gradient(#ffd23e, #ff9a1e) left/6px 100% no-repeat,
        linear-gradient(#ffd23e, #ff9a1e) right/6px 100% no-repeat;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

/* --------------------------------------------------------- power-up rail */
.pu-rail {
    position: absolute; left: 10px; top: 110px;
    display: flex; flex-direction: column; gap: 14px;
}
/* original power-up buttons; the count pips are baked into each image state */
.pu-btn {
    width: 68px; height: 68px; border: none; cursor: pointer;
    background: transparent center/contain no-repeat;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.45));
    transition: transform 0.08s;
}
.pu-btn:active { transform: translateY(3px) scale(0.95); }
.pu-btn.empty { filter: grayscale(0.95) opacity(0.5); }
.pu-btn.activeEffect { animation: puPulse 0.8s infinite alternate; }
@keyframes puPulse {
    from { filter: drop-shadow(0 4px 5px rgba(0,0,0,0.45)) drop-shadow(0 0 5px rgba(82,232,70,0.8)); }
    to   { filter: drop-shadow(0 4px 5px rgba(0,0,0,0.45)) drop-shadow(0 0 14px rgba(82,232,70,1)); }
}

/* ------------------------------------------------------------ next block */
.next-wrap {
    position: absolute; right: 12px; top: 128px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: linear-gradient(180deg, rgba(20,8,2,0.55), rgba(20,8,2,0.35));
    border: 2px solid rgba(255,220,170,0.35);
    border-radius: 14px; padding: 7px 9px;
}

/* --------------------------------------------------------- touch controls */
#touchControls {
    position: absolute; left: 0; right: 0; bottom: 12px;
    display: none; justify-content: center; gap: 14px;
    padding: 0 14px;
}
body.touch #touchControls { display: flex; }
.tc-btn {
    width: 96px; height: 50px; border: none; cursor: pointer;
    background: transparent center/contain no-repeat;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.45));
}
.tc-btn:active { transform: translateY(3px); }
#tcLeft   { background-image: url('assets/ctrl_left.png'); }
#tcLeft:active   { background-image: url('assets/ctrl_left_down.png'); }
#tcRight  { background-image: url('assets/ctrl_right.png'); }
#tcRight:active  { background-image: url('assets/ctrl_right_down.png'); }
#tcRotate { background-image: url('assets/ctrl_rot.png'); }
#tcRotate:active { background-image: url('assets/ctrl_rot_down.png'); }
#tcDrop   { background-image: url('assets/ctrl_drop.png'); }
#tcDrop:active   { background-image: url('assets/ctrl_drop_down.png'); }

/* ------------------------------------------------------- level banner etc */
#levelBanner {
    position: fixed; left: 50%; top: 34%;
    transform: translate(-50%, -50%) scale(0);
    font-size: clamp(42px, 9vw, 90px); font-weight: 800;
    color: var(--orange);
    -webkit-text-stroke: 3px #501c00;
    text-shadow: 0 6px 0 rgba(0,0,0,0.35);
    pointer-events: none; z-index: 40;
}
#levelBanner.show { animation: bannerPop 1.6s ease forwards; }
@keyframes bannerPop {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
    18%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    28%  { transform: translate(-50%, -50%) scale(1); }
    80%  { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
    100% { transform: translate(-50%, -55%) scale(1.05); opacity: 0; }
}

#countdown {
    position: fixed; left: 50%; top: 42%;
    transform: translate(-50%, -50%);
    font-size: clamp(70px, 16vw, 150px); font-weight: 800;
    color: var(--cream);
    -webkit-text-stroke: 4px var(--orange-dk);
    text-shadow: 0 8px 0 rgba(0,0,0,0.35);
    display: none; pointer-events: none; z-index: 60;
}
#countdown.visible { display: block; }
#countdown.pop { animation: cdPop 0.7s ease; }
@keyframes cdPop {
    0% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
    35% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.9; }
}

/* ----------------------------------------------------------- full screens */
.screen {
    position: fixed; inset: 0; z-index: 50;
    display: none; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, rgba(60,16,8,0.55), rgba(20,5,2,0.82));
    backdrop-filter: blur(3px);
}
.screen.visible { display: flex; }

.menu-card {
    position: relative;
    width: min(400px, 92vw);
    max-height: 92vh; overflow-y: auto; overflow-x: hidden;
    background: linear-gradient(180deg, #ffedd2, #ffd9a8);
    border: 4px solid var(--orange-dk);
    border-radius: 26px;
    box-shadow: 0 10px 0 rgba(120,40,0,0.55), 0 22px 40px rgba(0,0,0,0.5),
                inset 0 2px 0 rgba(255,255,255,0.8);
    padding: 28px 26px;
    text-align: center;
    color: var(--ink);
    animation: cardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.menu-card.wide { width: min(460px, 94vw); text-align: left; }
@keyframes cardIn {
    from { transform: translateY(30px) scale(0.9); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* defensive: no image inside the card may ever exceed the card width,
   even if a stale cached stylesheet misses the rules below */
.menu-card img { max-width: 100%; height: auto; }

.logo-img {
    display: block;
    width: 100%; max-width: 330px;
    margin: 4px auto 8px;
    transform: rotate(-2deg);
    filter: drop-shadow(0 4px 4px rgba(107,38,0,0.35));
    user-select: none; -webkit-user-drag: none;
}

.menu-martian {
    display: block;
    width: 152px;
    margin: -4px auto 0;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.4));
    animation: martianBob 3.2s ease-in-out infinite;
    pointer-events: none;
    user-select: none; -webkit-user-drag: none;
}
@keyframes martianBob {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50%      { transform: translateY(-12px) rotate(-3deg); }
}

.tagline { font-weight: 600; opacity: 0.75; margin-bottom: 4px; }
.welcome { font-weight: 800; color: var(--green-dk); min-height: 1.2em; margin-bottom: 2px; }

.best-score {
    font-weight: 800; font-size: 18px;
    margin: 8px 0 18px;
    color: #7a3c00;
}
.best-score span { color: var(--green-dk); font-size: 22px; }

.big-btn {
    display: block; width: 100%;
    border: none; cursor: pointer;
    font-family: var(--font); font-size: 24px; font-weight: 800;
    color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.35);
    padding: 13px 0; margin-bottom: 12px;
    border-radius: 40px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55) 0 10%, rgba(255,255,255,0) 34%),
        linear-gradient(180deg, var(--blue-hi), var(--blue-lo));
    box-shadow: 0 5px 0 var(--blue-edge), 0 9px 14px rgba(0,0,0,0.3);
    transition: transform 0.08s;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--blue-edge); }

.ghost-btn {
    display: block; width: 100%;
    border: 3px solid var(--orange-dk); cursor: pointer;
    font-family: var(--font); font-size: 18px; font-weight: 800;
    color: var(--orange-dk);
    background: rgba(255,255,255,0.45);
    padding: 9px 0; margin-bottom: 10px;
    border-radius: 40px;
    transition: transform 0.08s, background 0.15s;
}
.ghost-btn:active { transform: translateY(2px); }
.sound-btn.muted { opacity: 0.5; text-decoration: line-through; }

.panel-title {
    font-size: 30px; font-weight: 800;
    color: var(--orange);
    -webkit-text-stroke: 1.8px #6b2600;
    margin-bottom: 14px;
    text-align: center;
}
.sub { font-weight: 600; margin-bottom: 18px; }

.close-x {
    position: absolute; right: 12px; top: 12px;
    width: 38px; height: 38px; border: none; cursor: pointer;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #ff9d9d, #d40c0c);
    color: #fff; font-size: 16px; font-weight: 800;
    box-shadow: 0 3px 0 #7a0505;
}
.close-x:active { transform: translateY(2px); box-shadow: 0 1px 0 #7a0505; }

.howto-list {
    list-style: none; margin-bottom: 18px;
}
.howto-list li {
    font-weight: 600; font-size: 15px;
    padding: 6px 10px; margin-bottom: 5px;
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
    border-left: 5px solid var(--orange);
}
.howto-list b { color: var(--blue-lo); }

.stats-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; margin-bottom: 20px;
}
.stat {
    background: rgba(255,255,255,0.55);
    border-radius: 14px; padding: 10px;
    display: flex; flex-direction: column;
}
.stat-label { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: 0.6; }
.stat-val { font-size: 26px; font-weight: 800; color: var(--green-dk); line-height: 1.1; }

/* --------------------------------------------------------------- mobile */
@media (max-width: 640px) {
    .hud-score { font-size: 34px; }
    .hud-num.big { font-size: 30px; }
    #hudScore .dig { height: 36px; margin: 0 -6px; }
    #hudLevel .dig { height: 32px; margin: 0 -5px; }
    .lives-img { width: 48px; height: 48px; }
    .pu-rail { top: 96px; gap: 10px; }
    .pu-btn { width: 56px; height: 56px; }
    .next-wrap { top: 112px; }
    #nextPreview { width: 64px; height: 52px; }
    .tc-btn { width: 80px; height: 42px; }
}