/* Base Reset & Typography */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #f4f7f6;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* Card Container */
.card-shell {
    display: inline-block;
    animation: cardEnter 700ms cubic-bezier(.2, .8, .2, 1) 120ms both;
    transform-origin: center center;
}

@keyframes cardEnter {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.card-container {
    position: relative;
    z-index: 1;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(226,228,232,0.98) 20%, rgba(255,255,255,0.95) 45%, rgba(196,200,207,0.97) 100%),
        repeating-linear-gradient(
            120deg,
            rgba(255,255,255,0.3) 0px,
            rgba(255,255,255,0.3) 2px,
            rgba(86,92,97,0.08) 2px,
            rgba(86,92,97,0.08) 4px,
            rgba(255,255,255,0.2) 4px,
            rgba(255,255,255,0.2) 7px,
            rgba(40,45,52,0.08) 7px,
            rgba(40,45,52,0.08) 9px
        );
    background-blend-mode: normal, normal;
    background-size: 180% 180%;
    max-width: 480px;
    width: 100%;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.08), 0 18px 40px rgba(25, 6, 6, 0.22), 0 4px 10px rgba(0,0,0,0.10);
    overflow: hidden;
    text-align: center;
    padding: 28px 30px;
    border: 1px solid rgba(255,255,255,0.72);
    transform-style: preserve-3d;
    transform: perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(0px);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease, background-position 400ms ease;
    will-change: transform;
    pointer-events: auto;
    backdrop-filter: blur(2px);
}

.card-container::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(
        500px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        rgba(255, 122, 94, 0.12),
        rgba(255, 255, 255, 0) 45%
    );
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
    z-index: 0;
}

.card-container:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(0,0,0,0.08), 0 24px 52px rgba(25, 6, 6, 0.24), 0 8px 18px rgba(0,0,0,0.12);
    background-position: 100% 100%;
}

.card-container:hover::before {
    opacity: 1;
}

.card-container > * {
    position: relative;
    z-index: 1;
}

/* Profile Image */
.profile-img-container {
    margin-bottom: 13px;
}

.profile-img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ecf0f1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.profile-img { cursor: pointer; transition: filter .18s ease, transform .35s ease, opacity .35s ease; }
.profile-img.shattered { filter: saturate(.2) contrast(1.25); opacity: .28; transform: scale(.98); }
.profile-img.broken { opacity: 0; }
.profile-img-container.shatter-active .profile-img, .profile-img-container.shatter-complete .profile-img { opacity: 0 !important; }
.profile-shatter { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; border-radius: 50%; }
.shatter-active .profile-shatter, .shatter-complete .profile-shatter { display: block; }
.shard { position: absolute; inset: 0; display: block; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background-image: url('profile.jpeg'); background-repeat: no-repeat; background-size: 130px 130px; filter: saturate(.7) contrast(1.18) brightness(1.08) drop-shadow(0 0 2px rgba(255,255,255,.42)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.shard-a { clip-path: polygon(0 0, 53% 0, 43% 48%, 0 38%); background-position: 0 0; }
.shard-b { clip-path: polygon(53% 0, 100% 0, 100% 42%, 58% 51%, 43% 48%); background-position: 0 0; }
.shard-c { clip-path: polygon(0 38%, 43% 48%, 50% 100%, 0 100%); background-position: 0 0; }
.shard-d { clip-path: polygon(43% 48%, 58% 51%, 100% 42%, 100% 100%, 50% 100%); background-position: 0 0; }
.shard-e { clip-path: polygon(43% 48%, 58% 51%, 53% 0, 43% 0); background-position: 0 0; }
.shard-f { clip-path: polygon(43% 48%, 58% 51%, 100% 42%, 100% 100%, 50% 100%); background-position: 0 0; opacity: .18; }
.shatter-active .shard-a { animation: shardA .8s ease-out both; }
.shatter-active .shard-b { animation: shardB .8s ease-out both; }
.shatter-active .shard-c { animation: shardC .8s ease-out both; }
.shatter-active .shard-d { animation: shardD .8s ease-out both; }
.shatter-active .shard-e { animation: shardE .8s ease-out both; }
.shatter-active .shard-f { animation: shardF .8s ease-out both; }
.shatter-complete .shard { animation: shardBurst .65s cubic-bezier(.15,.75,.25,1) both; }
.shatter-complete .shard-b { animation-delay: 35ms; }
.shatter-complete .shard-c { animation-delay: 70ms; }
.shatter-complete .shard-d { animation-delay: 105ms; }
.shatter-complete .shard-e { animation-delay: 140ms; }
.shatter-complete .shard-f { animation-delay: 175ms; }
@keyframes shardA { to { transform: translate(-5px,-4px) rotate(-3deg); } }
@keyframes shardB { to { transform: translate(5px,-3px) rotate(4deg); } }
@keyframes shardC { to { transform: translate(-4px,5px) rotate(-4deg); } }
@keyframes shardD { to { transform: translate(5px,5px) rotate(3deg); } }
@keyframes shardE { to { transform: translate(0,-7px) rotate(2deg); } }
@keyframes shardF { to { transform: translate(7px,8px) rotate(5deg); } }
@keyframes shardBurst { 0% { opacity: .92; } 55% { opacity: .5; transform: scale(1.18) translate(0, 0) rotate(2deg); filter: saturate(.45) brightness(1.35); } 100% { opacity: 0; transform: scale(1.42) translate(4px, 5px) rotate(7deg); filter: blur(3px) saturate(.2) brightness(1.5); } }
@keyframes profileBorderShimmer { 0%, 58%, 100% { transform: rotate(-18deg); opacity: .12; } 82% { transform: rotate(342deg); opacity: .95; } }

.profile-img-container { position: relative; width: fit-content; margin-left: auto; margin-right: auto; }
.profile-img-container::after { content: ""; position: absolute; inset: 1px; z-index: 2; border-radius: 50%; background: conic-gradient(from -35deg, transparent 0 62%, rgba(208, 255, 187, .95) 70%, rgba(255, 255, 255, 1) 74%, transparent 82%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); opacity: .2; filter: drop-shadow(0 0 3px rgba(183, 255, 156, .8)); pointer-events: none; animation: profileBorderShimmer 10s ease-in-out infinite; }
.bird-trigger { position: absolute; right: -24px; bottom: 2px; z-index: 3; width: 58px; height: 58px; padding: 7px; border: 1px solid #28343a; border-radius: 50%; background: linear-gradient(145deg, #f5f7f7, #6d7b80 48%, #222b30); box-shadow: inset 0 2px 2px rgba(255,255,255,.8), 0 4px 9px rgba(0,0,0,.35); cursor: pointer; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; transition: transform .2s ease, box-shadow .2s ease; }
.bird-trigger img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.35) brightness(1.35) drop-shadow(0 1px 1px rgba(255,255,255,.8)); }
.bird-trigger::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; pointer-events: none; background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,.72) 48%, transparent 66%); background-size: 240% 100%; opacity: 0; animation: triggerShimmer 5.5s .3s ease-in-out infinite; }
.bird-trigger:hover, .bird-trigger:focus-visible { transform: translateY(-4px) rotate(-6deg); box-shadow: inset 0 2px 2px rgba(255,255,255,.9), 0 8px 14px rgba(0,0,0,.4); outline: none; }
.bird-trigger:active { background: linear-gradient(145deg, #f5f7f7, #6d7b80 48%, #222b30); outline: none; }

.game-modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; width: 100%; height: 100%; padding: 12px; overflow: hidden; background: rgba(8, 12, 14, .72); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.game-modal.open { opacity: 1; pointer-events: auto; }
.game-modal, .game-modal button, #game-canvas { -webkit-tap-highlight-color: transparent; }
.game-modal { user-select: none; -webkit-user-select: none; }
body.game-open .background-glow, body.game-open .lava-blob { animation-play-state: paused; }
body.game-open .game-modal { backdrop-filter: none; }
.game-panel { position: relative; display: grid; grid-template-columns: minmax(0, 420px); justify-self: center; align-self: center; width: min(480px, calc(100% - 16px)); max-width: 100%; max-height: calc(100dvh - 24px); margin: 0; padding: 12px; border: none; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(226,228,232,.98) 20%, rgba(255,255,255,.95) 45%, rgba(196,200,207,.97) 100%), repeating-linear-gradient(120deg, rgba(255,255,255,.22) 0 1px, rgba(86,92,97,.06) 1px 3px, rgba(255,255,255,.16) 3px 6px, rgba(40,45,52,.06) 6px 8px); background-blend-mode: normal, normal; background-size: 180% 180%; box-shadow: inset 0 -1px 0 rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.5); transform: translateY(18px) scale(.94) rotateX(2deg); transition: transform .45s cubic-bezier(.2,.8,.2,1), background-position 1.2s ease; overflow-y: auto; }
.game-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(360px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255,255,255,.34), transparent 48%); opacity: .8; transition: opacity .3s ease; }
.game-panel > * { position: relative; z-index: 1; }
.game-modal.open .game-panel { transform: translateY(0) scale(1) rotateX(0); background-position: 100% 100%; }
.game-modal.impact .game-panel { animation: gameImpact .72s cubic-bezier(.2,.85,.3,1) both; }
.bird-trigger.launch-source { opacity: 0; }
.launch-bird { position: fixed !important; z-index: 30 !important; margin: 0 !important; right: auto !important; bottom: auto !important; transform: translate3d(0, 0, 0) scale(1); pointer-events: none; }
.launch-bird { will-change: transform, opacity; }
.game-close { position: absolute; top: 12px; right: 14px; z-index: 2; border: 0; background: transparent; color: #29363b; font-size: 2rem; line-height: .8; cursor: pointer; }
.game-stage { position: relative; width: min(420px, 100%, calc((100dvh - 48px) * .6774)); overflow: hidden; border: none; border-radius: 7px; background: #59656d; box-shadow: inset 0 0 20px rgba(0,0,0,.35); animation: stageSettle .8s .1s both; }
.game-stage::before, .game-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.game-stage::before { z-index: 2; background: repeating-linear-gradient(120deg, rgba(255,255,255,.14) 0 1px, transparent 1px 4px, rgba(30,40,44,.08) 4px 5px, transparent 5px 9px); mix-blend-mode: soft-light; opacity: .62; }
.game-stage::after { z-index: 3; background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.18) 42%, transparent 58%); background-size: 220% 100%; mix-blend-mode: screen; opacity: .5; }
.game-modal.open .game-stage:not(.game-playing)::before { animation: filmShift 11s linear infinite; }
.game-modal.open .game-stage:not(.game-playing)::after { animation: filmShine 8s ease-in-out infinite; }
.game-stage.game-playing::before, .game-stage.game-playing::after { opacity: .22; mix-blend-mode: normal; }
#game-canvas { display: block; width: 100%; height: auto; aspect-ratio: 420 / 620; touch-action: none; cursor: pointer; }
.leaderboard { display: none; min-width: 0; align-self: center; padding: 15px; border: 1px solid rgba(61,75,80,.16); border-radius: 8px; background: rgba(255,255,255,.92); color: #29363b; box-shadow: 0 8px 18px rgba(31,39,42,.18); }
.leaderboard.is-visible { position: absolute; inset: 46px 12px 12px; z-index: 5; display: flex; flex-direction: column; justify-content: center; animation: leaderboardReveal .35s cubic-bezier(.2,.8,.2,1) both; }
.leaderboard-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.leaderboard-heading h2 { margin: 0; font-size: 1.05rem; letter-spacing: .5px; }
.leaderboard-refresh { width: 30px; height: 30px; border: 1px solid #aab4b7; border-radius: 50%; background: rgba(255,255,255,.7); color: #29363b; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.leaderboard-list { display: grid; gap: 4px; min-height: 34px; padding: 0; list-style: none; }
.leaderboard-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 7px 4px; border-bottom: 1px solid rgba(61,75,80,.12); font-size: .8rem; }
.leaderboard-list li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-list strong { font-size: .9rem; }
.leaderboard-empty { display: block !important; color: #66747a; text-align: center; }
.score-form { margin-top: 16px; text-align: left; }
.score-form label { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.score-form-row { display: flex; gap: 6px; }
.score-form input { min-width: 0; width: 100%; padding: 8px 9px; border: 1px solid #aab4b7; border-radius: 5px; background: rgba(255,255,255,.78); color: #29363b; }
.score-form button { padding: 8px 10px; border: 0; border-radius: 5px; background: #29363b; color: #fff; cursor: pointer; }
.score-form button:disabled, .snake-score-form button:disabled, .breakout-score-form button:disabled { opacity: .55; cursor: not-allowed; }
.leaderboard-status { min-height: 1.2em; margin-top: 6px; color: #66747a; font-size: .72rem; line-height: 1.3; }
.game-hud { position: absolute; inset: 13px 16px auto; z-index: 4; display: flex; justify-content: space-between; color: #e7eeee; font-size: .68rem; font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 2px #152024; pointer-events: none; }
.game-hud strong { margin-left: 5px; font-size: 1rem; }
.game-message { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; gap: 6px; color: #f4f7f7; text-align: center; text-shadow: 0 2px 3px #162024; pointer-events: none; }
.game-panel.leaderboard-open .game-message { z-index: 6; }
.game-message strong { font-size: 1.15rem; letter-spacing: 2px; }.game-message span { font-size: .78rem; }.game-message.hidden { display: none; }
body.game-open { overflow: hidden; touch-action: none; }
body.game-open .card-shell { animation: none; }
body.game-open .card-container { transform: none !important; transition: none; }
.snake-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden; background: #020403; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.snake-modal.open { opacity: 1; pointer-events: auto; }
.snake-modal::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, rgba(43, 76, 45, .12), transparent 32%), #020403; }
.nokia-phone { position: relative; z-index: 1; width: min(300px, calc(100vw - 34px)); padding: 28px 24px 24px; border: 4px solid #59615b; border-radius: 34px 34px 46px 46px; background: linear-gradient(135deg, #9ca39c, #535b55 34%, #737a73 68%, #3e453f); box-shadow: inset 3px 3px 0 rgba(255,255,255,.26), inset -4px -6px 0 rgba(0,0,0,.28), 0 28px 80px rgba(0,0,0,.8); transform: translateY(110vh) rotate(3deg); transition: transform .8s cubic-bezier(.2,.85,.3,1); }
.snake-modal.open .nokia-phone { transform: translateY(0) rotate(0); }
.snake-close { position: absolute; top: 9px; right: 13px; z-index: 2; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #303731; color: #c8cec7; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.nokia-speaker { width: 54px; height: 6px; margin: -12px auto 17px; border-radius: 4px; background: repeating-linear-gradient(90deg, #303731 0 4px, transparent 4px 7px); opacity: .9; }
.nokia-screen-shell { padding: 9px; border: 3px solid #273028; border-radius: 9px; background: #1c241d; box-shadow: inset 0 2px 5px rgba(0,0,0,.8); }
.nokia-screen { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border: 2px solid #53684f; background: #b7c98f; color: #263b26; font-family: "Courier New", monospace; box-shadow: inset 0 0 18px rgba(23,43,26,.24); }
.nokia-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(35,59,38,.06) 0 1px, transparent 1px 4px); }
.snake-connecting { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 8px; text-align: center; animation: connectBlink 1s steps(2, end) infinite; }
.snake-connecting strong { font-size: clamp(.58rem, 2.5vw, .82rem); letter-spacing: .5px; white-space: nowrap; }
.snake-connecting span { font-size: clamp(.46rem, 1.8vw, .6rem); }
.snake-connecting.hidden { display: none; }
.snake-game { position: absolute; inset: 0; display: none; flex-direction: column; padding: 4px; }
.snake-game.visible { display: flex; }
.snake-screen-header { display: flex; justify-content: space-between; padding-bottom: 2px; font-size: .58rem; font-weight: 700; }
#snake-canvas { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; flex: 0 0 auto; image-rendering: pixelated; }
.snake-screen-message { min-height: 12px; padding-top: 1px; text-align: center; font-size: .5rem; font-weight: 700; white-space: nowrap; }
.nokia-brand { margin: 13px 0 11px; color: #252c27; font-family: Georgia, serif; font-size: 1.15rem; font-weight: 700; letter-spacing: 3px; text-align: center; text-shadow: 1px 1px rgba(255,255,255,.25); }
.nokia-keypad { display: grid; justify-items: center; gap: 12px; }
.snake-start { padding: 6px 14px; border: 2px solid #313a32; border-radius: 5px; background: #59615a; color: #d4d9d1; font: 700 .6rem "Courier New", monospace; cursor: pointer; box-shadow: inset 1px 1px rgba(255,255,255,.25), 0 3px 0 #2b302c; }
.snake-start:active, .snake-dpad button:active { transform: translateY(2px); box-shadow: none; }
.snake-dpad { display: grid; grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(2, 32px); gap: 4px; }
.snake-dpad button { border: 2px solid #313a32; border-radius: 7px; background: #59615a; color: #d4d9d1; font-size: .75rem; cursor: pointer; box-shadow: inset 1px 1px rgba(255,255,255,.25), 0 3px 0 #2b302c; }
.snake-dpad button[data-direction="up"] { grid-column: 2; grid-row: 1; }
.snake-dpad button[data-direction="left"] { grid-column: 1; grid-row: 2; }
.snake-dpad button[data-direction="down"] { grid-column: 2; grid-row: 2; }
.snake-dpad button[data-direction="right"] { grid-column: 3; grid-row: 2; }
.snake-t9-pad { position: absolute; top: calc(62% + 10px); left: 24%; z-index: 3; display: block; width: 52%; height: 108px; }
.snake-t9-pad button { position: absolute; width: calc((100% - 4px) / 3); height: 48px; min-height: 0; padding: 0; border: 0; border-radius: 7px; background: transparent; color: transparent; font: 700 .68rem "Courier New", monospace; cursor: pointer; text-shadow: none; box-shadow: none; opacity: .01; }
.snake-t9-pad button[data-key="2"] { top: -16px; left: calc(33.333% + 1px); }
.snake-t9-pad button[data-key="4"] { top: 15px; left: 0; }
.snake-t9-pad button[data-key="6"] { top: 15px; right: 0; }
.snake-t9-pad button[data-key="8"] { top: 60px; left: calc(33.333% + 1px); }
.snake-t9-pad button:active, .snake-t9-pad button:focus-visible { background: rgba(222,235,210,.24); outline: 2px solid rgba(255,255,255,.55); outline-offset: 1px; opacity: .35; }
.snake-t9-hint { position: absolute; top: calc(50% + min(315px, calc(50dvh - 36px)) + 10px); left: 50%; z-index: 4; width: min(90vw, 380px); transform: translateX(-50%); color: #e2f1c9; font: 700 .7rem "Courier New", monospace; letter-spacing: .8px; text-align: center; text-shadow: 0 0 5px #8bff91; animation: t9Glisten 1.4s ease-in-out infinite; white-space: nowrap; }
.snake-t9-hint.hidden { display: none; }
.nokia-keypad { top: 0; right: 0; bottom: 0; pointer-events: none; }
.nokia-keypad > * { pointer-events: auto; }
.snake-start { position: absolute; top: 48%; left: 50%; width: 58px; height: 27px; padding: 0; transform: translateX(-50%); border: 0; background: transparent; color: transparent; box-shadow: none; opacity: .01; }
.snake-start:active { transform: translateX(-50%) translateY(2px); }
@keyframes t9Glisten { 0%, 100% { opacity: .55; text-shadow: 0 0 3px #8bff91; } 50% { opacity: 1; text-shadow: 0 0 9px #d9ffb0, 0 0 15px rgba(139,255,145,.8); } }
body.snake-open { overflow: hidden; touch-action: none; }
body.snake-open .background-glow, body.snake-open .lava-blob { animation-play-state: paused; }
@keyframes connectBlink { 50% { opacity: .45; } }
@keyframes connectLetterFlash { 0%, 54%, 100% { background-position: 100% 0; } 82% { background-position: 0% 0; } }
.nokia-phone { width: min(420px, calc(100vw - 24px), calc((100dvh - 72px) * .6667)); height: min(630px, calc(100dvh - 72px), calc((100vw - 24px) * 1.5)); justify-self: center; align-self: center; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.nokia-phone-image { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: auto; clip-path: polygon(25% 0, 75% 0, 90% 5%, 95% 12%, 95% 88%, 90% 95%, 75% 100%, 25% 100%, 10% 95%, 5% 88%, 5% 12%, 10% 5%); }
.snake-help-hint { position: absolute; top: calc(50% + min(315px, calc(50dvh - 36px)) + 32px); left: 50%; z-index: 4; display: none; transform: translateX(-50%); color: #a9e58a; font: 700 .72rem "Courier New", monospace; letter-spacing: .8px; text-align: center; text-shadow: 0 0 5px rgba(139,255,145,.9), 0 0 12px rgba(139,255,145,.5); white-space: nowrap; }
.snake-help-hint.visible { display: block; animation: movementHintFlash 1.8s steps(2, end) infinite; }
@keyframes movementHintFlash { 50% { opacity: .28; } }
.breakout-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; overflow: auto; padding: 20px; background: #08101b; opacity: 0; pointer-events: none; transition: opacity .3s ease; overscroll-behavior: contain; }
.breakout-modal.open { opacity: 1; pointer-events: auto; }
.breakout-panel { position: relative; width: min(430px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px 22px 22px; border: 3px solid #53677f; border-radius: 8px; background: #172337; color: #d9e7f5; box-shadow: 0 18px 60px rgba(0,0,0,.65), inset 0 0 0 2px rgba(255,255,255,.06); outline: none; overflow: auto; overscroll-behavior: contain; }
.breakout-panel h2 { margin: 0 0 12px; color: #f6d36b; font: 700 1.1rem "Courier New", monospace; letter-spacing: 3px; text-align: center; }
.breakout-close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: #b8cce0; font-size: 1.7rem; cursor: pointer; }
.breakout-screen { position: relative; overflow: hidden; border: 3px solid #0a111c; background: #101b2b; box-shadow: inset 0 0 18px rgba(0,0,0,.65); }
#breakout-canvas { display: block; width: 100%; height: auto; max-height: calc(100dvh - 180px); aspect-ratio: 3 / 4; cursor: crosshair; touch-action: none; }
.breakout-message { position: absolute; inset: 0; display: grid; place-content: center; color: #fff6cf; font: 700 .85rem "Courier New", monospace; letter-spacing: 1px; text-shadow: 0 0 8px rgba(246,211,107,.7); pointer-events: none; }
.breakout-message.hidden { display: none; }
.breakout-hud { display: flex; justify-content: space-between; margin-top: 10px; color: #9bb4cd; font: .7rem "Courier New", monospace; letter-spacing: 1px; }
.breakout-hud strong { color: #f6d36b; }
.breakout-leaderboard { display: none; position: absolute; inset: 68px 22px 22px; z-index: 4; padding: 16px; border: 2px solid #53677f; border-radius: 5px; background: rgba(11,20,33,.97); }
.breakout-leaderboard.visible { display: block; }
.breakout-leaderboard-heading { display: flex; align-items: center; justify-content: space-between; }
.breakout-leaderboard h3 { margin: 0 0 10px; border: 0; color: #f6d36b; font: 700 .9rem "Courier New", monospace; text-align: left; }
.breakout-leaderboard-heading button { border: 0; background: transparent; color: #c9d8e7; font-size: 1.4rem; cursor: pointer; }
.breakout-leaderboard ol { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font: .7rem "Courier New", monospace; }
.breakout-leaderboard li { display: grid; grid-template-columns: 24px 1fr auto; gap: 5px; padding: 4px 0; border-bottom: 1px solid rgba(155,180,205,.16); }
.breakout-score-form { margin-top: 12px; font: .65rem "Courier New", monospace; }
.breakout-score-form label { display: block; margin-bottom: 5px; color: #9bb4cd; }
.breakout-score-form div { display: flex; gap: 5px; }
.breakout-score-form input { min-width: 0; width: 100%; padding: 6px; border: 1px solid #53677f; border-radius: 3px; background: #d9e7f5; color: #172337; font: .7rem "Courier New", monospace; }
.breakout-score-form button { padding: 6px 9px; border: 1px solid #f6d36b; border-radius: 3px; background: #3c536e; color: #f6d36b; font: 700 .65rem "Courier New", monospace; cursor: pointer; }
.breakout-score-form p { min-height: 1em; margin: 5px 0 0; color: #9bb4cd; }
body.breakout-open { overflow: hidden; touch-action: none; }
body.breakout-open .background-glow, body.breakout-open .lava-blob { animation-play-state: paused; }
@media screen and (max-width: 600px) {
    .breakout-modal { padding: 10px; }
    .breakout-panel { width: min(430px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); padding: 22px 14px 16px; }
    #breakout-canvas { max-height: calc(100dvh - 165px); }
    .breakout-panel h2 { margin-bottom: 8px; font-size: .95rem; }
    .breakout-leaderboard { inset: 58px 14px 16px; overflow: auto; }
}
.nokia-speaker, .nokia-brand { display: none; }
.nokia-screen-shell { position: absolute; top: 24%; left: 31.5%; z-index: 1; width: 37%; height: 19%; padding: 4px; border: 0; border-radius: 8px; background: #1c241d; }
.nokia-screen { width: 100%; height: 100%; aspect-ratio: auto; border: 1px solid #53684f; }
.nokia-keypad { position: absolute; bottom: 0; left: 0; z-index: 2; width: 100%; gap: 5px; }
.snake-start { padding: 4px 12px; font-size: .56rem; }
.snake-dpad { grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(2, 25px); gap: 3px; }
.snake-dpad button { font-size: .62rem; }
.snake-leaderboard { display: none; position: absolute; top: 50%; left: 50%; z-index: 8; width: min(290px, calc(100vw - 32px)); padding: 15px; transform: translate(-50%, -50%); border: 1px solid rgba(173, 202, 146, .45); border-radius: 8px; background: rgba(10, 18, 11, .96); color: #c5dbad; font-family: "Courier New", monospace; box-shadow: 0 12px 40px rgba(0,0,0,.65); }
.snake-leaderboard.visible { display: block; animation: leaderboardReveal .35s cubic-bezier(.2,.8,.2,1) both; }
.snake-leaderboard-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.snake-leaderboard-heading h2 { margin: 0; color: #d7e9c2; font: 700 1rem "Courier New", monospace; }
.snake-leaderboard-close { width: 25px; height: 25px; border: 1px solid #78936c; border-radius: 50%; background: transparent; color: #d7e9c2; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.snake-leaderboard-heading span { color: #7f9f70; font-size: .6rem; }
.snake-leaderboard-list { display: grid; gap: 3px; min-height: 24px; padding: 0; list-style: none; }
.snake-leaderboard-list li { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; gap: 5px; padding: 5px 0; border-bottom: 1px solid rgba(173,202,146,.16); font-size: .72rem; }
.snake-leaderboard-list li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snake-leaderboard-list strong { color: #e2f2ce; }
.snake-leaderboard-empty { display: block !important; color: #8da17d; text-align: center; }
.snake-score-form { margin-top: 13px; }
.snake-score-form label { display: block; margin-bottom: 5px; color: #9bb88a; font-size: .62rem; }
.snake-score-form > div { display: flex; gap: 4px; }
.snake-score-form input { min-width: 0; width: 100%; padding: 6px; border: 1px solid #66815b; border-radius: 3px; background: #d1dfbd; color: #1f351f; font: .7rem "Courier New", monospace; }
.snake-score-form button { padding: 6px 8px; border: 1px solid #66815b; border-radius: 3px; background: #526b4d; color: #e3f0d4; font: 700 .65rem "Courier New", monospace; cursor: pointer; }
.snake-score-form p { min-height: 1.2em; margin: 5px 0 0; color: #9bb88a; font-size: .62rem; }
@media screen and (max-width: 700px) {
    .snake-leaderboard { top: auto; bottom: 10px; left: 50%; width: min(320px, calc(100vw - 34px)); transform: translateX(-50%); }
}
@media screen and (max-width: 1100px) {
    .snake-modal.open .nokia-phone { transform: translateY(0) rotate(0); }
    .nokia-keypad { bottom: 0; }
    .snake-leaderboard { top: 50%; right: auto; bottom: auto; left: 50%; width: min(310px, calc(100vw - 32px)); transform: translate(-50%, -50%); }
    .snake-leaderboard.visible { animation: snakeLeaderboardReveal .35s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes snakeLeaderboardReveal { from { opacity: 0; transform: translate(-50%, -50%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.snake-leaderboard.visible { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); animation: none; }
.card-container.game-handoff { transform: perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(0) !important; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
@keyframes stageSettle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes leaderboardReveal { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes filmShift { from { background-position: 0 0; } to { background-position: 42px 42px; } }
@keyframes filmShine { 0%, 25% { background-position: 160% 0; } 65%, 100% { background-position: -40% 0; } }
@keyframes triggerShimmer { 0% { background-position: 160% 0; opacity: 0; } 5% { opacity: .7; } 18% { background-position: -40% 0; opacity: 0; } 100% { background-position: -40% 0; opacity: 0; } }
@keyframes gameImpact { 0% { transform: translateY(18px) scale(.7) rotateX(7deg); opacity: 0; } 48% { transform: translateY(-7px) scale(1.035) rotateX(-2deg); opacity: 1; } 72% { transform: translateY(2px) scale(.985) rotateX(1deg); } 100% { transform: translateY(0) scale(1) rotateX(0); opacity: 1; } }

@media screen and (max-height: 620px) {
    .game-modal { padding: 8px; overflow: hidden; }
    .game-panel { width: min(700px, calc(100% - 16px)); max-height: calc(100dvh - 16px); padding: 8px; }
}

@media screen and (max-width: 680px) {
    .game-panel { grid-template-columns: 1fr; gap: 10px; }
    .game-stage { width: min(420px, 100%, calc((100dvh - 190px) * .6774)); margin: 0 auto; }
    .leaderboard.is-visible { inset: 42px 8px 8px; }
}

/* Header Section */
.header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2C3E50;
    margin-bottom: 5px;
}

.header h2 {
    font-size: 1rem;
    font-weight: 400;
    color: #7f8c8d;
    margin-bottom: 5px;
    text-align: center;

}

.university {
    font-size: 0.85rem;
    color: #4a5964;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Content Sections */
.content {
    text-align: left;
}

.about, .contact {
    margin-bottom: 15px;
}

h3 {
    font-size: 1.1rem;
    color: #2C3E50;
    margin-bottom: 10px;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 5px;
    text-align: center;

}

.connect-trigger { cursor: pointer; user-select: none; color: transparent; background: linear-gradient(105deg, #2C3E50 0%, #2C3E50 38%, #b7e993 48%, #2C3E50 58%, #2C3E50 100%); background-size: 260% 100%; background-position: 100% 0; background-clip: text; -webkit-background-clip: text; animation: connectLetterFlash 7s ease-in-out infinite; }
.connect-trigger:focus-visible { outline: 2px solid #ffb27d; outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

a.inline-resource-link:link, a.inline-resource-link:visited, a.inline-resource-link:active { color: #555 !important; -webkit-text-fill-color: #555 !important; text-decoration: underline dotted rgba(85, 85, 85, .55); text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
a.inline-resource-link:hover, a.inline-resource-link:focus-visible { color: #2C3E50 !important; -webkit-text-fill-color: #2C3E50 !important; text-decoration-color: currentColor; }

/* Social Links */
.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #ecf0f1;
    color: #2C3E50;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #2C3E50;
    color: #ffffff;
    transform: translateY(-3px);
}

/* Footer / Resume Button */
.footer {
    margin-top: 18px;
}

.btn {
    display: inline-block;
    padding: 12px 25px;
    background-color: #2C3E50;
    color: #ffffff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #1a252f;
}

/* Integrated animated profile-card theme (original styles above are preserved) */
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background-color: #2b0a0a;
}

body {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow: hidden;
    overscroll-behavior: none;
    font: normal 14px/1.618em "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    pointer-events: auto;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 144, 92, 0.42), transparent 25%),
        radial-gradient(circle at 80% 30%, rgba(255, 92, 92, 0.26), transparent 30%),
        radial-gradient(circle at 50% 110%, rgba(255, 104, 32, 0.2), transparent 34%),
        linear-gradient(135deg, #2b0a0a 0%, #4b0909 22%, #7a1414 48%, #3b0d0d 100%);
    background-repeat: no-repeat;
    background-size: cover;
    isolation: isolate;
    background-color: #2b0a0a;
}

.background-glow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 58% 55%, rgba(255, 180, 110, 0.7), rgba(255, 90, 30, 0.16) 20%, transparent 26%),
        radial-gradient(circle at 72% 68%, rgba(255, 165, 90, 0.8), rgba(255, 90, 40, 0.22) 18%, transparent 24%),
        radial-gradient(circle at 85% 72%, rgba(255, 125, 70, 0.72), rgba(255, 70, 45, 0.2) 20%, transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(120, 22, 22, 0.14) 25%, rgba(52, 8, 8, 0.5) 60%, rgba(10, 2, 2, 0.7) 100%);
    background-size: 135% 135%;
    filter: blur(20px) saturate(1.4) brightness(1.08);
    opacity: 0.86;
    animation: backgroundDrift 21s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate, bubbleDrift 28s ease-in-out infinite alternate;
}

.goo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.lava-blobs {
    position: absolute;
    inset: 0;
    filter: url(#lava-goo);
    mix-blend-mode: screen;
}

.lava-blob {
    position: absolute;
    left: var(--lava-x, 50%);
    top: var(--lava-y, 50%);
    width: var(--lava-w, 30vw);
    height: var(--lava-h, 30vh);
    border-radius: 50%;
    background: radial-gradient(circle at 45% 40%, rgba(255, 226, 170, .95) 0%, rgba(255, 150, 80, .85) 32%, rgba(255, 80, 40, .55) 62%, transparent 78%);
    animation: var(--lava-anim, lavaFloatA) var(--lava-duration, 24s) ease-in-out infinite;
    animation-delay: var(--lava-delay, 0s);
    will-change: transform;
}

.lava-blob:nth-child(1) { --lava-x: 10%; --lava-y: 66%; --lava-w: 34vw; --lava-h: 32vh; --lava-duration: 24s; --lava-delay: 0s; --lava-anim: lavaFloatA; }
.lava-blob:nth-child(2) {
    --lava-x: 70%; --lava-y: 60%; --lava-w: 28vw; --lava-h: 36vh; --lava-duration: 29s; --lava-delay: -9s; --lava-anim: lavaFloatB;
    background: radial-gradient(circle at 50% 45%, rgba(255, 210, 150, .9) 0%, rgba(255, 120, 60, .8) 34%, rgba(230, 50, 40, .5) 64%, transparent 78%);
}
.lava-blob:nth-child(3) { --lava-x: 40%; --lava-y: 82%; --lava-w: 22vw; --lava-h: 24vh; --lava-duration: 19s; --lava-delay: -13s; --lava-anim: lavaFloatA; }
.lava-blob:nth-child(4) {
    --lava-x: 86%; --lava-y: 20%; --lava-w: 22vw; --lava-h: 24vh; --lava-duration: 26s; --lava-delay: -4s; --lava-anim: lavaFloatB;
    background: radial-gradient(circle at 48% 42%, rgba(255, 235, 190, .92) 0%, rgba(255, 140, 75, .82) 30%, rgba(200, 45, 35, .48) 66%, transparent 78%);
}
.lava-blob:nth-child(5) {
    --lava-x: 6%; --lava-y: 22%; --lava-w: 26vw; --lava-h: 28vh; --lava-duration: 22s; --lava-delay: -17s; --lava-anim: lavaFloatA;
    background: radial-gradient(circle at 46% 40%, rgba(255, 247, 208, .9) 0%, rgba(255, 103, 60, .78) 34%, rgba(120, 22, 22, .4) 70%, transparent 82%);
}
.lava-blob:nth-child(6) {
    --lava-x: 92%; --lava-y: 78%; --lava-w: 24vw; --lava-h: 26vh; --lava-duration: 27s; --lava-delay: -6s; --lava-anim: lavaFloatB;
    background: radial-gradient(circle at 48% 48%, rgba(255, 180, 116, .82) 0%, rgba(237, 57, 42, .5) 38%, transparent 78%);
}

@media (prefers-reduced-motion: reduce) {
    .lava-blob { animation: none; }
}

.card-shell {
    position: relative;
    z-index: 1;
    touch-action: pan-y;
}

@keyframes backgroundDrift {
    0% {
        transform: scale(1.18) translate3d(-3%, 8px, 0) rotate(-2deg);
        opacity: 0.74;
    }
    33% {
        transform: scale(1.24) translate3d(2%, -2px, 0) rotate(1deg);
        opacity: 0.94;
    }
    66% {
        transform: scale(1.2) translate3d(4%, 10px, 0) rotate(-1deg);
        opacity: 0.98;
    }
    100% {
        transform: scale(1.26) translate3d(-1%, 14px, 0) rotate(1.8deg);
        opacity: 0.9;
    }
}

@keyframes bubbleDrift {
    0% { background-position: 0% 0%; }
    50% { background-position: 7% 4%; }
    100% { background-position: -4% 8%; }
}

@keyframes lavaFloatA {
    0%   { transform: translate(-50%, -50%) translate3d(0, 12vh, 0) scale(.7) rotate(-6deg); border-radius: 58% 42% 64% 36% / 44% 56% 45% 55%; }
    25%  { transform: translate(-50%, -50%) translate3d(5vw, -6vh, 0) scale(1.15) rotate(2deg); border-radius: 38% 62% 55% 45% / 65% 35% 58% 42%; }
    50%  { transform: translate(-50%, -50%) translate3d(2vw, -18vh, 0) scale(.85) rotate(6deg); border-radius: 66% 34% 40% 60% / 40% 60% 48% 52%; }
    75%  { transform: translate(-50%, -50%) translate3d(-6vw, -6vh, 0) scale(1.25) rotate(-3deg); border-radius: 45% 55% 60% 40% / 55% 45% 38% 62%; }
    100% { transform: translate(-50%, -50%) translate3d(0, 12vh, 0) scale(.7) rotate(-6deg); border-radius: 58% 42% 64% 36% / 44% 56% 45% 55%; }
}

@keyframes lavaFloatB {
    0%   { transform: translate(-50%, -50%) translate3d(0, -10vh, 0) scale(1.2) rotate(4deg); border-radius: 42% 58% 38% 62% / 57% 43% 61% 39%; }
    30%  { transform: translate(-50%, -50%) translate3d(-6vw, 8vh, 0) scale(.75) rotate(-5deg); border-radius: 63% 37% 55% 45% / 36% 64% 50% 50%; }
    60%  { transform: translate(-50%, -50%) translate3d(4vw, 16vh, 0) scale(1.1) rotate(3deg); border-radius: 48% 52% 62% 38% / 58% 42% 44% 56%; }
    80%  { transform: translate(-50%, -50%) translate3d(6vw, -4vh, 0) scale(.8) rotate(-4deg); border-radius: 55% 45% 40% 60% / 46% 54% 62% 38%; }
    100% { transform: translate(-50%, -50%) translate3d(0, -10vh, 0) scale(1.2) rotate(4deg); border-radius: 42% 58% 38% 62% / 57% 43% 61% 39%; }
}

h1, h2 { font-weight: 500; margin: 0 0 5px; }
h1 { font-size: 24px; }
h2 { font-size: 16px; }

@media screen and (max-width: 768px) {
    html {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
        background-color: #2d0909;
        background:
            radial-gradient(circle at 18% 22%, rgba(255, 155, 92, 0.38), transparent 24%),
            radial-gradient(circle at 80% 26%, rgba(255, 116, 76, 0.26), transparent 28%),
            radial-gradient(circle at 58% 68%, rgba(255, 174, 112, 0.24), transparent 32%),
            linear-gradient(160deg, #2d0909 0%, #5a0d0d 26%, #7f1717 54%, #360c0c 100%);
        padding: 0;
    }

    .background-glow {
        inset: -10% -8%;
        width: 116%;
        height: 116%;
        opacity: 1;
        filter: blur(22px) saturate(1.5) brightness(1.15);
    }

    .card-shell {
        width: min(100%, 360px);
        margin: 20px 0;
    }

    .card-container {
        touch-action: none;
        max-width: 360px;
        padding: 20px 18px;
        border-radius: 16px;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(226,230,232,0.98) 18%, rgba(255,255,255,0.82) 34%, rgba(183,189,194,0.96) 58%, rgba(247,249,250,0.9) 100%),
            repeating-linear-gradient(
                120deg,
                rgba(255,255,255,0.3) 0px,
                rgba(255,255,255,0.3) 2px,
                rgba(86,92,97,0.08) 2px,
                rgba(86,92,97,0.08) 4px,
                rgba(255,255,255,0.2) 4px,
                rgba(255,255,255,0.2) 7px,
                rgba(40,45,52,0.08) 7px,
                rgba(40,45,52,0.08) 9px
            ),
            radial-gradient(circle at 18% 18%, rgba(255,255,255,0.74), transparent 18%),
            radial-gradient(circle at 80% 18%, rgba(255,255,255,0.3), transparent 20%);
        background-blend-mode: screen, normal, soft-light, normal;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.06), 0 18px 38px rgba(25, 6, 6, 0.22), 0 8px 18px rgba(0,0,0,0.1);
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px) scale(0.96);
    }

    .card-container::before {
        background: radial-gradient(
            600px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
            rgba(255, 118, 79, 0.16),
            rgba(255, 255, 255, 0) 42%
        );
    }
}

@media screen and (max-width: 480px) {
    body {
        padding: 14px;
    }

    .card-shell {
        width: min(100%, 340px);
    }

    .card-container {
        max-width: 340px;
        padding: 17px 18px;
        border-radius: 16px;
        background:
            linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(226,230,232,0.98) 18%, rgba(255,255,255,0.82) 34%, rgba(183,189,194,0.96) 58%, rgba(247,249,250,0.9) 100%),
            repeating-linear-gradient(
                120deg,
                rgba(255,255,255,0.3) 0px,
                rgba(255,255,255,0.3) 2px,
                rgba(86,92,97,0.08) 2px,
                rgba(86,92,97,0.08) 4px,
                rgba(255,255,255,0.2) 4px,
                rgba(255,255,255,0.2) 7px,
                rgba(40,45,52,0.08) 7px,
                rgba(40,45,52,0.08) 9px
            ),
            radial-gradient(circle at 18% 18%, rgba(255,255,255,0.74), transparent 18%),
            radial-gradient(circle at 80% 18%, rgba(255,255,255,0.3), transparent 20%);
        background-blend-mode: screen, normal, soft-light, normal;
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px) scale(0.96);
    }

    .profile-img {
        width: 104px;
        height: 104px;
    }

    .bird-trigger { right: -14px; bottom: 0; width: 48px; height: 48px; }

    .header h1 {
        font-size: 1.6rem;
    }

    .header h2 {
        font-size: 0.85rem;
    }

    .university {
        font-size: 0.72rem;
        color: #364b5a;
        font-weight: 800;
        letter-spacing: 0.9px;
        text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    }

}

@media screen and (min-height: 480px) {
    .profile-card header { width: auto; height: auto; padding: 30px 20px; display: block; float: none; border-right: none; }
    .profile-card .profile-bio { width: auto; height: auto; padding: 15px 20px 30px; display: block; float: none; }
    .profile-social-links { width: 100%; display: block; float: none; }
    @keyframes materia { 0% { background: #E0E0E0; } 65% { border-radius: 10px; transform: translate(-50%, -50%) scale(1.04); } 100% { width: 280px; height: 440px; background: #FFF; border-radius: 4px; transform: translate(-50%, -50%) scale(1); } }
}