/* gamelicense.info - 90s Pixel-Art Game Licensing */

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

:root{
    --black:#0F0F1A;
    --gray:#2A2A3E;
    --slot:#4A4A5E;
    --white:#E8E8EC;
    --green:#33FF66;
    --gold:#D4A017;
    --red:#E8318A;
    --blue:#3D7AFF;
    --yellow:#F2C94C;
    --gameover:#FF3344;
    --teal:#00CCAA;
    --lavender:#8B7EC8;
}

body{
    background:var(--black);
    color:var(--white);
    font-family:'Press Start 2P',monospace;
    font-size:12px;
    line-height:2.0;
    overflow-x:hidden;
    -webkit-font-smoothing:none;
    -moz-osx-font-smoothing:unset;
}

/* Scanline overlay */
body::after{
    content:'';
    position:fixed;inset:0;
    z-index:9999;pointer-events:none;
    background:repeating-linear-gradient(
        0deg,
        transparent,transparent 2px,
        rgba(0,0,0,0.06) 2px,rgba(0,0,0,0.06) 4px
    );
}

/* Stage base */
.stage{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:2rem;
    padding-bottom:64px;
}

/* Boot screen */
.stage-boot{
    background:var(--black);
    z-index:10;
}

.crt-line{
    position:absolute;
    left:0;right:0;
    top:50%;
    height:2px;
    background:#fff;
    transform:scaleY(0);
    transform-origin:center;
    z-index:11;
}

.crt-line.active{
    animation:crtOn 0.3s ease-out forwards;
}

@keyframes crtOn{
    from{transform:scaleY(1) scaleX(0.01)}
    to{transform:scaleY(300) scaleX(1);opacity:0}
}

.boot-title{
    font-family:'Silkscreen',monospace;
    font-size:48px;
    color:var(--gold);
    letter-spacing:0.05em;
    text-transform:uppercase;
    text-align:center;
    min-height:1.2em;
    -webkit-font-smoothing:none;
}

.press-start{
    font-family:'Press Start 2P',monospace;
    font-size:16px;
    color:var(--white);
    margin-top:2rem;
    animation:blink 0.8s step-end infinite;
    opacity:0;
    transition:opacity 0.3s;
}

.press-start.visible{opacity:1}

@keyframes blink{
    0%,100%{opacity:1}
    50%{opacity:0}
}

/* World Map */
.stage-map{
    background:var(--gray);
    overflow:hidden;
}

.map-grid{
    position:absolute;inset:0;
    background:
        repeating-linear-gradient(90deg,rgba(255,255,255,0.03) 0 1px,transparent 1px 32px),
        repeating-linear-gradient(0deg,rgba(255,255,255,0.03) 0 1px,transparent 1px 32px);
}

.map-path-svg{
    width:90%;
    max-width:900px;
    height:auto;
    position:relative;
    z-index:1;
}

.map-line{
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    transition:stroke-dashoffset 0.8s linear;
}

.map-node{
    transition:stroke 0.3s,opacity 0.3s;
}

.map-node.lit{
    stroke:#D4A017 !important;
    opacity:1 !important;
}

.map-heading{
    font-family:'Silkscreen',monospace;
    font-size:32px;
    color:var(--gold);
    letter-spacing:0.05em;
    margin-top:1.5rem;
    position:relative;
    z-index:1;
    -webkit-font-smoothing:none;
}

/* Panel chrome */
.stage-panel{
    background:var(--black);
}

.panel-chrome{
    width:min(90%,640px);
    border:3px solid;
    border-color:var(--white) var(--slot) var(--slot) var(--white);
    background:var(--gray);
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.5s,transform 0.5s;
}

.panel-chrome.shown{
    opacity:1;
    transform:translateY(0);
}

.panel-titlebar{
    background:var(--black);
    padding:6px 12px;
    font-family:'Silkscreen',monospace;
    font-size:16px;
    color:var(--gold);
    letter-spacing:0.05em;
    display:flex;
    align-items:center;
    gap:8px;
    border-bottom:2px solid var(--slot);
    -webkit-font-smoothing:none;
}

.panel-dot{
    width:10px;height:10px;
    border:2px solid var(--slot);
    display:inline-block;
}

.panel-dot:first-child{border-color:var(--red)}
.panel-dot:nth-child(2){border-color:var(--yellow)}
.panel-dot:nth-child(3){border-color:var(--green)}

.panel-body{
    padding:clamp(1rem,3vw,2rem);
}

.panel-text{
    font-family:'Press Start 2P',monospace;
    font-size:12px;
    line-height:2.2;
    color:var(--white);
    margin-top:1.5rem;
    -webkit-font-smoothing:none;
}

/* Cartridges */
.cartridge-row{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    justify-content:center;
    margin-bottom:1rem;
}

.cartridge{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
}

.cartridge-svg{
    width:96px;height:72px;
    image-rendering:pixelated;
}

.cart-label{
    font-family:'VT323',monospace;
    font-size:16px;
    color:var(--white);
}

/* Shield */
.shield-container{
    display:flex;justify-content:center;
    margin-bottom:1rem;
}

.shield-svg{
    width:120px;height:144px;
}

.shield-path,.shield-inner{
    stroke-dasharray:400;
    stroke-dashoffset:400;
    transition:stroke-dashoffset 1.5s ease;
}

.panel-chrome.shown .shield-path,
.panel-chrome.shown .shield-inner{
    stroke-dashoffset:0;
}

/* Checklist */
.checklist{
    margin-top:1rem;
}

.check-item{
    font-family:'VT323',monospace;
    font-size:20px;
    color:var(--slot);
    padding:4px 0;
    transition:color 0.3s;
}

.check-item.checked{
    color:var(--green);
}

.check-mark{
    margin-right:8px;
}

/* Region grid */
.region-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    margin-bottom:1rem;
}

.region-block{
    border:2px solid var(--r-color,var(--slot));
    padding:0.75rem;
    text-align:center;
    opacity:0;
    transform:scale(0.8);
    transition:opacity 0.4s,transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.region-block.shown{
    opacity:1;
    transform:scale(1);
}

.region-code{
    display:block;
    font-family:'Silkscreen',monospace;
    font-size:32px;
    color:var(--r-color,var(--gold));
    -webkit-font-smoothing:none;
}

.region-name{
    font-family:'VT323',monospace;
    font-size:16px;
    color:var(--white);
}

/* Pixel scroll */
.scroll-container{
    display:flex;justify-content:center;
    margin-bottom:1rem;
}

.pixel-scroll{
    width:280px;
    border:2px solid var(--gold);
    background:var(--black);
}

.scroll-top,.scroll-bottom{
    height:12px;
    background:var(--gold);
}

.scroll-body{
    padding:0.75rem 1rem;
    max-height:0;
    overflow:hidden;
    transition:max-height 1.2s ease;
}

.panel-chrome.shown .scroll-body{
    max-height:300px;
}

.scroll-line{
    font-family:'VT323',monospace;
    font-size:16px;
    color:var(--green);
    padding:2px 0;
}

/* Badge slots */
.badge-slot{
    margin-top:1.5rem;
    opacity:0;
    transform:scale(0);
}

.badge-slot.earned{
    animation:badgeBounce 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

@keyframes badgeBounce{
    0%{opacity:0;transform:scale(0)}
    70%{opacity:1;transform:scale(1.2)}
    100%{opacity:1;transform:scale(1)}
}

.badge-svg{
    width:48px;height:48px;
    image-rendering:pixelated;
}

/* Sparkle on badge */
.badge-slot.earned::before,
.badge-slot.earned::after{
    content:'';
    position:absolute;
    width:4px;height:4px;
    background:var(--yellow);
    animation:sparkle 0.3s ease-out forwards;
}

.badge-slot.earned::before{
    top:-8px;left:50%;
}

.badge-slot.earned::after{
    bottom:-8px;left:50%;
    animation-delay:0.1s;
}

@keyframes sparkle{
    from{opacity:1;transform:translateY(0)}
    to{opacity:0;transform:translateY(-12px)}
}

/* HUD Bar */
.hud-bar{
    position:fixed;
    bottom:0;left:0;right:0;
    height:48px;
    background:var(--black);
    border-top:1px solid var(--gold);
    display:flex;
    align-items:center;
    padding:0 1rem;
    gap:1rem;
    z-index:100;
}

.hud-progress{
    display:flex;
    gap:2px;
}

.hud-segment{
    width:8px;height:20px;
    background:var(--slot);
    transition:background 0.1s;
}

.hud-segment.filled{
    background:var(--green);
    animation:segPulse 0.1s ease;
}

@keyframes segPulse{
    0%{transform:scaleY(1)}
    50%{transform:scaleY(1.1)}
    100%{transform:scaleY(1)}
}

.hud-segment.complete{
    background:var(--yellow);
}

.hud-stage{
    font-family:'VT323',monospace;
    font-size:20px;
    color:var(--gold);
    flex:1;
    text-align:center;
}

.hud-sprite{
    width:16px;height:16px;
    background:var(--blue);
    border:2px solid var(--black);
    position:relative;
}

.hud-sprite::before{
    content:'';
    position:absolute;
    top:-6px;left:2px;
    width:12px;height:6px;
    background:var(--white);
}

.hud-sprite::after{
    content:'';
    position:absolute;
    top:-2px;left:5px;
    width:6px;height:2px;
    background:var(--gold);
}

/* Dither pattern helper */
.dither{
    background:repeating-linear-gradient(
        45deg,
        var(--black) 0 2px,
        var(--gray) 2px 4px
    );
}

/* Responsive */
@media(max-width:768px){
    .boot-title{font-size:32px}
    .map-heading{font-size:24px}
    .cartridge-row{gap:0.5rem}
    .cartridge-svg{width:64px;height:48px}
    .region-grid{grid-template-columns:repeat(2,1fr)}
    .panel-text{font-size:10px;line-height:2.4}
}

@media(prefers-reduced-motion:reduce){
    .press-start{animation:none;opacity:1}
    .crt-line{display:none}
    .panel-chrome{opacity:1;transform:none;transition:none}
    .region-block{opacity:1;transform:none;transition:none}
    .badge-slot.earned{animation:none;opacity:1;transform:scale(1)}
    .hud-segment{transition:none}
    .shield-path,.shield-inner{transition:none;stroke-dashoffset:0}
    .scroll-body{max-height:300px;transition:none}
}