:root {
    --bg-sky: #5c94fc;
    --ground-brown: #8b4513;
    --ground-dark: #5a2d0c;
    --pipe-green: #2ecc71;
    --text-light: #fffbe6;
    --text-accent: #ffd34d;
    --shadow: rgba(0,0,0,.4);
}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	background-color: #F90;	
	background-image: -webkit-linear-gradient(90deg,
	rgba(255, 255, 255, .2) 25%,
	transparent 25%,
	transparent 50%,
	rgba(255, 255, 255, .2) 50%,
	rgba(255, 255, 255, .2) 75%,
	transparent 75%,
	transparent)
}

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

body {
    background: var(--bg-sky);
    font-family: 'VT323', monospace;
    color: var(--text-light);
    image-rendering: pixelated;
    overflow-x: hidden;
    line-height: 1.4;
}

/* BACKGROUND MÀN TRÊN TRỜI CỐ ĐỊNH */
.sky-stage-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    background: radial-gradient(circle at 50% 10%, rgba(255,255,255,0.25) 0 20%, rgba(92,148,252,0) 21% 100%);
}

/* đẩy nội dung chính lên trên nền */
.site-header,
.hero-wrapper,
footer,
.cloud {
    position: relative;
    z-index: 5;
}

/* lớp sương trắng mờ trôi ngang trên bầu trời */
.fog-layer {
    position:absolute;
    left:-40vw;
    width:80vw;
    height:60px;
    background:radial-gradient(circle at 30% 50%, rgba(255,255,255,0.5) 0 40%, rgba(255,255,255,0) 41%);
    filter: blur(8px);
    opacity:0.4;
    animation: fogMove linear infinite;
}
.fog-layer.f1 {
    top:20vh;
    animation-duration: 30s;
}
.fog-layer.f2 {
    top:40vh;
    animation-duration: 45s;
    animation-delay:5s;
    opacity:0.25;
    filter: blur(12px);
}
@keyframes fogMove {
    0%   { transform: translateX(0); }
    100% { transform: translateX(120vw); }
}

/* Floating clouds from before */
.cloud {
    position: absolute;
    top: 5vh;
    width: 120px;
    height: 60px;
    background: #fff;
    border-radius: 40px;
    filter: drop-shadow(4px 4px 0 rgba(0,0,0,.2));
    animation: floatCloud linear infinite;
}
.cloud:before,
.cloud:after {
    content:'';
    position:absolute;
    background:#fff;
    border-radius:40px;
}
.cloud:before {
    width:60px;
    height:60px;
    top:-30px;
    left:15px;
}
.cloud:after {
    width:80px;
    height:80px;
    top:-40px;
    right:10px;
}
.cloud.c1 { left:-150px; animation-duration: 28s; animation-delay: 0s; }
.cloud.c2 { top:12vh; left:-200px; transform: scale(.8); animation-duration: 35s; animation-delay: 5s; }
.cloud.c3 { top:20vh; left:-250px; transform: scale(1.2); animation-duration: 40s; animation-delay: 10s; }

@keyframes floatCloud {
    0% { transform: translateX(0) scale(var(--scale,1)); }
    100% { transform: translateX(calc(100vw + 400px)) scale(var(--scale,1)); }
}

/* các bục gạch/bục trên trời */
.platform {
    position:absolute;
    min-width:120px;
    height:24px;
    background: repeating-linear-gradient(
        to right,
        #c86f1a 0 16px,
        #a65712 16px 32px
    );
    border:4px solid #000;
    box-shadow:4px 4px 0 #0008;
    border-radius:4px;
}
.platform.p1 {
    top:28vh;
    left:12vw;
    animation: floatPlat1 1s steps(2) infinite;
}
.platform.p2 {
    top:42vh;
    left:45vw;
    min-width:100px;
    animation: floatPlat2 1.2s steps(2) infinite;
}
.platform.p3 {
    top:22vh;
    right:12vw;
    min-width:140px;
    animation: floatPlat3 1.4s steps(2) infinite;
}
@keyframes floatPlat1 {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-3px); }
}
@keyframes floatPlat2 {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-2px); }
}
@keyframes floatPlat3 {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-4px); }
}

/* MARIO ĐỨNG TRÊN BỤC */
.mario-sprite {
    position:absolute;
    bottom:24px;
    left:20px;
    width:40px;
    height:48px;
    animation: marioIdle .5s steps(2) infinite;
    image-rendering: pixelated;
}
@keyframes marioIdle {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-2px); }
}
.mario-hat {
    position:absolute;
    left:4px;
    top:0;
    width:32px;
    height:12px;
    background:#c00000;
    border:3px solid #000;
    border-radius:2px;
    box-shadow:2px 2px 0 #0008;
}
.mario-hat:after{
    content:'M';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:.7rem;
    color:#fff;
    text-shadow:1px 1px 0 #000;
}
.mario-body {
    position:absolute;
    left:6px;
    top:14px;
    width:28px;
    height:22px;
    background:#ff0000;
    border:3px solid #000;
    border-radius:2px;
    box-shadow:2px 2px 0 #0008;
}
.mario-face {
    position:absolute;
    left:10px;
    top:10px;
    width:20px;
    height:20px;
    background:#ffdcb1;
    border:3px solid #000;
    border-radius:2px;
    box-shadow:2px 2px 0 #0008;
}

/* QUÁI ĐI BỘ (goomba style) */
.enemy.goomba {
    position:absolute;
    bottom:24px;
    left:20px;
    width:36px;
    height:28px;
    background:#8b4513;
    border:3px solid #000;
    border-radius:4px 4px 0 0;
    box-shadow:2px 2px 0 #0008;
    animation: goombaWalk 0.5s steps(2) infinite;
}
@keyframes goombaWalk {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-2px); }
}
.enemy.goomba .enemy-eye {
    position:absolute;
    top:6px;
    width:6px;
    height:8px;
    background:#fff;
    border:2px solid #000;
    box-shadow:1px 1px 0 #0008;
}
.enemy.goomba .enemy-eye.left {
    left:8px;
}
.enemy.goomba .enemy-eye.right {
    right:8px;
}

/* QUÁI BAY (koopa có cánh) */
.enemy.koopa-fly {
    position:absolute;
    bottom:24px;
    left:30px;
    width:32px;
    height:32px;
    animation: flyLoop 2s linear infinite;
}
@keyframes flyLoop {
    0%   { transform: translateY(0) translateX(0); }
    25%  { transform: translateY(-6px) translateX(10px); }
    50%  { transform: translateY(0) translateX(20px); }
    75%  { transform: translateY(-6px) translateX(10px); }
    100% { transform: translateY(0) translateX(0); }
}
.enemy.koopa-fly .shell {
    position:absolute;
    left:4px;
    top:8px;
    width:24px;
    height:20px;
    background:#2ecc71;
    border:3px solid #000;
    border-radius:4px;
    box-shadow:2px 2px 0 #0008;
}
.enemy.koopa-fly .wing {
    position:absolute;
    top:0;
    width:14px;
    height:14px;
    background:#fff;
    border:3px solid #000;
    border-radius:2px;
    box-shadow:1px 1px 0 #0008;
    animation: flap .4s steps(2) infinite;
}
.enemy.koopa-fly .wing-left {
    right:22px;
    transform-origin: bottom right;
}
.enemy.koopa-fly .wing-right {
    left:22px;
    transform-origin: bottom left;
}
@keyframes flap {
    0%,100% { transform: rotate(0deg); }
    50%     { transform: rotate(15deg); }
}

/* block ? treo nền */
.block {
    position:absolute;
    width:48px;
    height:48px;
    background:#c86f1a;
    border:4px solid #000;
    box-shadow:4px 4px 0 #0008;
    animation:blockFloat .6s steps(2) infinite;
}
.block-floating {
    top:30vh;
    left:50%;
    transform:translateX(-50%);
}
@keyframes blockFloat {
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-4px); }
}
.block-inner {
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 40%, #ffdd7d 0 30%, rgba(0,0,0,0) 31%),
        repeating-linear-gradient(
            45deg,
            #e08a2a 0 4px,
            #c86f1a 4px 8px
        );
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.2rem;
    text-shadow:2px 2px 0 #000;
}
.block-inner span {
    animation:blink 1s steps(2) infinite;
}
@keyframes blink {
    0%,50% {opacity:1;}
    51%,100% {opacity:0;}
}

/* header */
header.site-header {
    position: relative;
    padding: 1.5rem 1rem 0;
    text-align: center;
    color: var(--text-light);
    text-shadow: 2px 2px 0 #000, 4px 4px 0 #000;
}
header .name {
    font-size: clamp(1rem,1vw + .6rem,1.3rem);
    letter-spacing: -1px;
    color: var(--text-accent);
    display: inline-block;
}
header .role {
    font-size: .9rem;
    line-height: 1.4;
    margin-top:.5rem;
    display: block;
    color:#ffffff;
}

/* --- main wrapper --- */
.hero-wrapper {
    position: relative;
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding: 2rem 1rem 10rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:2rem;
    z-index:5;
}

/* pixel-dialog card */
.intro-card {
    position: relative;
    background: #1c1c1c;
    border:4px solid #ffffff;
    box-shadow:
        0 0 0 8px #000,
        0 8px 0 8px #000000aa,
        0 12px 0 8px #00000055;
    max-width: 680px;
    width:100%;
    padding:1.5rem;
    text-align:center;
    border-radius:4px;
    z-index:5;
    animation: popIn .4s steps(2) both;
}
@keyframes popIn {
    0% { transform: scale(.5) translateY(40px); opacity:0; }
    100% { transform: scale(1) translateY(0); opacity:1; }
}

.hello-line {
    font-size:1rem;
    color:#00ff87;
    text-shadow:2px 2px 0 #000;
    margin-bottom:1rem;
}

.big-title {
    font-size: 1.2rem;
    color: var(--text-accent);
    line-height:1.5;
    text-shadow:2px 2px 0 #000,4px 4px 0 #000;
}
.title-maincolor {
    color:#fff;
}
.title-green {
    color:#00ff87;
}

.typewriter {
    font-size:1rem;
    color:#fff;
    line-height:1.6;
    margin-top:1rem;
    min-height:6em;
    white-space:pre-line;
    word-break: break-word;
}
.cursor {
    display:inline-block;
    width:0.8rem;
    background:#fff;
    margin-left:4px;
    animation: blink 0.8s steps(2) infinite;
}

.skill-row {
    margin-top:1rem;
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    justify-content:center;
    font-size:1rem;
}
.skill-chip {
    background:#ff4757;
    color:#fff;
    padding:.5rem .6rem;
    border-radius:4px;
    box-shadow:0 3px 0 #000;
    text-shadow:1px 1px 0 #000;
    border:2px solid #000;
}

/* CTA button */
.cta-start {
    margin-top:1.5rem;
    font-size:1rem;
    display:inline-block;
    background:#ffd34d;
    color:#000;
    padding:.6rem 1rem;
    border-radius:4px;
    border:3px solid #000;
    box-shadow:0 4px 0 #000;
    cursor:pointer;
    animation:bounce 1s infinite steps(2);
}
@keyframes bounce {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-3px); }
}

/* PROJECTS CARD */
.projects-card {
    position: relative;
    background: #1c1c1c;
    border:4px solid #ffffff;
    box-shadow:
        0 0 0 8px #000,
        0 8px 0 8px #000000aa,
        0 12px 0 8px #00000055;
    width:100%;
    max-width:1000px;
    padding:1.5rem;
    border-radius:4px;
    color:#fff;
    text-shadow:2px 2px 0 #000;
}

.projects-header {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:1rem;
    gap:1rem;
}
.world-label {
    font-size:1rem;
    color:#ffd34d;
    text-shadow:2px 2px 0 #000,4px 4px 0 #000;
}
.projects-title {
    font-size:1.2rem;
    color:#00ff87;
}

.projects-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
}
@media(min-width:700px){
    .projects-grid {
        grid-template-columns:1fr 1fr;
    }
}
@media(min-width:1100px){
    .projects-grid {
        grid-template-columns:1fr 1fr 1fr;
    }
}

.project-item {
    display:flex;
    flex-direction:column;
    gap:.75rem;
    background:#2a2a2a;
    border:4px solid #000;
    box-shadow:0 6px 0 #000;
    border-radius:4px;
    padding:1rem;
    position:relative;
}
.pixel-card {
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#5c94fc;
    border:4px solid #000;
    box-shadow:4px 4px 0 #0008;
    border-radius:4px;
    image-rendering: pixelated;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    padding:.5rem;
    overflow:hidden;
    font-size:0.9rem;
    color:#fff;
    text-shadow:2px 2px 0 #000;
}
.project1 {
    background: linear-gradient(#5c94fc 0 50%, #8b4513 50% 100%);
}
.project2 {
    background: repeating-linear-gradient(
        -45deg,
        #2ecc71 0 10px,
        #25a95a 10px 20px
    );
}
.project3 {
    background: repeating-linear-gradient(
        -45deg,
        #ff4757 0 10px,
        #c82333 10px 20px
    );
}

.project-badge {
    background:#000;
    border:3px solid #fff;
    border-radius:4px;
    padding:.4rem .5rem;
    box-shadow:2px 2px 0 #0008;
    font-size:.9rem;
    line-height:1.2;
}

.project-info {
    font-size:1rem;
    color:#fff;
    line-height:1.5;
}
.project-name {
    font-size:1.1rem;
    color:#ffd34d;
    text-shadow:2px 2px 0 #000;
    margin-bottom:.4rem;
}
.project-desc {
    font-size:1rem;
    color:#fff;
    text-shadow:1px 1px 0 #000;
    margin-bottom:.5rem;
}
.project-tags {
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
}
.project-tags span {
    font-size:.9rem;
    background:#000;
    border:2px solid #fff;
    border-radius:4px;
    padding:.3rem .4rem;
    line-height:1.2;
    text-shadow:none;
    box-shadow:2px 2px 0 #0008;
}

/* === PHẦN CHÂN TRANG (SCENE DƯỚI) === */
.scene {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:200px;
    pointer-events:none;
    z-index:5;
}

.ground {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:80px;
    background:
        repeating-linear-gradient(
            to right,
            var(--ground-brown) 0 16px,
            var(--ground-dark) 16px 32px
        );
    border-top:4px solid #000;
    box-shadow:0 -4px 0 rgba(0,0,0,.4) inset;
}

.player {
    position:absolute;
    bottom:80px;
    left:10vw;
    width:48px;
    height:48px;
    background:#ff0000;
    border:4px solid #000;
    box-shadow:4px 4px 0 #0008;
    border-radius:2px;
    animation:walk 0.4s steps(2) infinite;
}
@keyframes walk {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-2px); }
}
.player-face {
    position:absolute;
    left:8px;
    top:8px;
    width:28px;
    height:28px;
    background:#ffdcb1;
    border:3px solid #000;
    box-shadow:2px 2px 0 #0008;
}
.player-hat {
    position:absolute;
    left:4px;
    top:0;
    width:36px;
    height:14px;
    background:#c00000;
    border:3px solid #000;
    box-shadow:2px 2px 0 #0008;
}
.player-hat:after{
    content:'S';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:.8rem;
    color:#fff;
    text-shadow:1px 1px 0 #000;
}

.pipe {
    position:absolute;
    bottom:80px;
    right:10vw;
    width:80px;
    height:80px;
    background:var(--pipe-green);
    border:4px solid #000;
    box-shadow:4px 4px 0 #0008;
}
.pipe:before {
    content:'';
    position:absolute;
    left:-8px;
    right:-8px;
    top:-24px;
    height:32px;
    background:var(--pipe-green);
    border:4px solid #000;
    box-shadow:4px 4px 0 #0008;
}
.pipe-label {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:-48px;
    background:#000;
    color:#00ff87;
    padding:.4rem .5rem;
    font-size:1rem;
    border:3px solid #00ff87;
    white-space:nowrap;
    text-shadow:none;
}

/* footer */
footer {
    text-align:center;
    font-size:1rem;
    color:#fff;
    text-shadow:2px 2px 0 #000;
    padding:1rem 0 2rem;
    line-height:1.5;
    max-width:90%;
    margin:0 auto;
    position:relative;
    z-index:10;
}

footer a {
    color:#ffd34d;
    text-decoration:none;
}

.contact-lines{
    margin-top:.5rem;
}

.disclaimer{
    margin-top:1rem;
    font-size:.9rem;
    color:#ffd34d;
}

/* responsive tweaks */
@media (min-width:768px){
    header .name { font-size:1.5rem; }
    header .role { font-size:1rem; }

    .big-title { font-size:1.5rem; }
    .typewriter { font-size:1rem; }
    .skill-row { font-size:1rem; }
    .cta-start { font-size:1rem; }
    .pipe-label { font-size:1rem; }
}


/* ===== FOOTER UI GAME STYLE ===== */
footer {
    position:relative;
    z-index:10;
    color:#fff;
    text-shadow:2px 2px 0 #000;
    padding:2rem 1rem 3rem;
    max-width:1200px;
    margin:0 auto;
    line-height:1.5;
    font-size:1rem;
}

.footer-inner{
    display:flex;
    flex-wrap:wrap;
    gap:2rem;
    background:#1c1c1c;
    border:4px solid #ffffff;
    box-shadow:
        0 0 0 8px #000,
        0 8px 0 8px #000000aa,
        0 12px 0 8px #00000055;
    border-radius:4px;
    padding:1.5rem;
}

.footer-left{
    flex:1 1 260px;
    min-width:240px;
}

.footer-title{
    color:#ffd34d;
    font-size:1.2rem;
    text-shadow:2px 2px 0 #000,4px 4px 0 #000;
    animation: footerFlash 1.2s steps(2) infinite;
}
@keyframes footerFlash {
    0%,100% { color:#ffd34d; }
    50% { color:#fff; }
}

.footer-line{
    margin-top:.75rem;
    color:#00ff87;
    font-size:1rem;
    text-shadow:2px 2px 0 #000;
}

.contact-lines{
    margin-top:.5rem;
}

.disclaimer{
    margin-top:1rem;
    font-size:.9rem;
    color:#ffd34d;
}

.footer-right{
    flex:0 0 260px;
    min-width:240px;
    display:flex;
    flex-direction:column;
    gap:1rem;
    justify-content:space-between;
}

/* EXP card */
.stat-card{
    background:#2a2a2a;
    border:4px solid #000;
    box-shadow:0 6px 0 #000;
    border-radius:4px;
    padding:.75rem 1rem;
    text-align:left;
    color:#fff;
}
.stat-label{
    font-size:1rem;
    color:#00ff87;
    text-shadow:2px 2px 0 #000;
    margin-bottom:.5rem;
}
.stat-bar{
    position:relative;
    background:#000;
    border:3px solid #fff;
    border-radius:4px;
    box-shadow:2px 2px 0 #0008;
    height:16px;
    overflow:hidden;
}
.stat-bar-fill{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:80%; /* chỉnh % EXP ở đây */
    background:repeating-linear-gradient(
        -45deg,
        #2ecc71 0 8px,
        #25a95a 8px 16px
    );
    animation: barShimmer 1s linear infinite;
    border-right:3px solid #000;
}
@keyframes barShimmer{
    0%{ background-position:0 0; }
    100%{ background-position:16px 0; }
}

.stat-desc{
    margin-top:.5rem;
    font-size:.9rem;
    color:#fff;
    text-shadow:1px 1px 0 #000;
}

/* back to top button */
.back-top-btn{
    font-size:1rem;
    background:#ffd34d;
    color:#000;
    padding:.6rem 1rem;
    border-radius:4px;
    border:3px solid #000;
    box-shadow:0 4px 0 #000;
    cursor:pointer;
    text-shadow:none;
    width:100%;
    text-align:center;
    animation:bounce 1s infinite steps(2);
}

/* tiny icons row */
.footer-icons{
    display:flex;
    align-items:flex-end;
    gap:1rem;
    margin-top:.5rem;
}

/* Coin icon */
.icon-coin{
    width:32px;
    height:32px;
    background:#ffd34d;
    border:4px solid #000;
    border-radius:50%;
    box-shadow:4px 4px 0 #0008;
    animation: coinBounce .6s steps(2) infinite;
    position:relative;
}
.icon-coin:after{
    content:'$';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:#000;
    font-size:1rem;
    text-shadow:none;
}

/* Mushroom icon */
.icon-mush{
    width:36px;
    height:32px;
    position:relative;
    animation: mushIdle .7s steps(2) infinite;
}
.icon-mush:before{
    content:'';
    position:absolute;
    left:4px;
    right:4px;
    top:0;
    height:18px;
    background:#ff4757;
    border:4px solid #000;
    border-radius:12px 12px 4px 4px;
    box-shadow:2px 2px 0 #0008;
}
.icon-mush:after{
    content:'';
    position:absolute;
    left:10px;
    right:10px;
    bottom:0;
    height:14px;
    background:#ffdcb1;
    border:4px solid #000;
    border-radius:4px;
    box-shadow:2px 2px 0 #0008;
}
@keyframes coinBounce{
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-3px); }
}
@keyframes mushIdle{
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-2px); }
}