:root{
    --bg: #030305; /* page background */
    --panel: #0f1720; /* panel background */
    --text: #e6eef6; /* main text */
    --muted: #9aa6b2; /* muted text */
    --accent: #afedf9; /* cyan accent */
    --accent-2: #f472b6; /* pink accent */
        --sitebar-divider: 3px solid rgba(255, 0, 242, 0.3);
        --sitebar-divider-shadow: rgba(0,0,0,0.45);
    --gap: 10px;
    --max-width: 1100px;
}

/* Google fonts used by the sidebar player (kept at top for reliable loading) */
/* fonts already imported at top */

*{box-sizing:border-box}
/* Make all corners sharp (no rounded borders) as requested */
*, *::before, *::after { border-radius: 0 !important; }
html,body{height:100%}
body{
    margin:0;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive; /* retro monospace feel */
    background: var(--bg);
    color:var(--text);
    /* Make body a column flex container so footer sits without adding unexpected height */
    display:flex;
    flex-direction:column;
    min-height:100vh;
    overflow-y:auto;
}

/* layout: sitebar on the left */
.site-shell{display:flex;flex-direction:column;flex:1;width:100%;align-items:stretch}
.site-header{padding:4px 0;background:transparent;border:0}
.site-header .header-inner{max-width:var(--max-width);margin:0 auto;display:block;padding:0 12px}

/* sitebar: left vertical bar with centered banner and vertical nav */
.sitebar{width:260px;flex:0 0 260px;padding:16px;background:linear-gradient(180deg,#000000,#000000);display:flex;flex-direction:column;align-items:center;gap:12px;margin:0;align-self:stretch}
.banner-wrap{width:220px;display:flex;justify-content:center; padding-top: 32px; padding-bottom: 32px}
.banner-img{width:220px;height:auto;object-fit:cover;border:0;filter:brightness(0.95)}
.sitebar-nav{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}
.sitebar-nav a{display:block;width:90%;text-align:center;padding:6px;background:linear-gradient(180deg, rgb(164 110 169), rgb(54 80 95));border:0;color:var(--text);text-decoration:none;font-weight:bold}

/* badges row in the sidebar */
.sitebar-badges{display:flex;gap:6px;align-items:center;justify-content:center;padding:6px;width:100%}
.sitebar-badges img{max-width:48%;height:auto;display:block;border:0px solid #000}

.page-body{display:flex;flex:1 0 auto;min-height:0;width:100%;align-items:stretch}
.main-content{flex:1;padding:12px;min-width:0;padding-bottom:0px;display:flex;flex-direction:column;min-height:0}
/* when footer is placed inside .main-content, push it to the bottom */
.main-content > .site-footer{margin-top:auto}
/* iframe wrappers for sitebar/footer when using iframe-based partials */
.sitebar-iframe{width:15%;flex:0 0 15%;border:0;overflow:hidden;display:block;align-self:stretch;height:auto;min-height:0;border-right:var(--sitebar-divider);box-shadow:inset -8px 0 12px var(--sitebar-divider-shadow);}
.footer-iframe{width:100%;border:0;display:block;height:auto}

.sitebar-segment{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding: 10px 0px 10px 0px;
    background: linear-gradient(180deg, #1f202c, #221238);
    border: 2px solid rgba(35, 35, 35);
}

/* top zone (fake navbar area) */
.top-zone{background:linear-gradient(180deg,rgba(106, 43, 86, 1),rgba(58, 33, 100, 1));padding:20px 12px;margin-bottom:14px;text-align:center}
.big-welcome{font-size:2.25rem;margin:0;font-family:'Comic Sans MS', 'Comic Sans', cursive;color:var(--accent);text-shadow:2px 2px 0 rgba(0,0,0,0.35)}

/* small, reusable blurb under the page title (hero area)
   Now: separate panel that spans the full width of the main content area */
.hero-blurb{
    width:100%;
    max-width:none;
    margin:0px 0 12px;
    color:var(--text);
    /* richer gradient tuned to the site's palette */
    background: linear-gradient(180deg, rgb(70 35 66 / 92%) 0%, rgba(24, 16, 42, 0.78) 50%, rgb(47 36 86 / 68%) 100%);
    padding:18px 20px;
    box-shadow:0 10px 26px rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
    backdrop-filter: blur(6px) saturate(1.05);
    font-size:1rem;
    line-height:1.5;
    text-align:center;
    display:block;
    box-sizing:border-box;
}
.hero-blurb .muted{
    /* higher contrast for accessibility and legibility against the gradient */
    margin: 4px;
    color: var(--text);
    font-size:1rem;
    font-weight:500;
    -webkit-font-smoothing:antialiased;
}
@media (max-width:700px){ .hero-blurb{margin:10px 0 0;padding:10px 12px;font-size:0.95rem} }


/* Prevent dragging / selection of the pet image across browsers */
.pet-image,
.pet-image img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* When we show a fake cursor overlay, hide the native cursor on the image */
.pet-image.hide-cursor{ cursor: none !important; }

/* Fake cursor element that follows the mouse when hovering the pet image */
.fake-cursor{
    position:fixed;
    width:128px;
    height:128px;
    pointer-events:none;
    background-image: url('media/pet.png');
    background-repeat:no-repeat;
    background-size:contain;
    transform: translate(-50%, -50%);
    transition: transform 100ms ease-in-out, opacity 1ms;
    z-index: 9999;
    opacity: 0;
}
.fake-cursor.visible{ opacity: 1; }
.fake-cursor.rotated{ transform: translate(-50%, -50%) rotate(24deg); }

/* Badges marquee: horizontal looping scroller sized for 88x31 badges */
.badges-marquee{overflow:hidden;width:100%;margin:4px auto;background:transparent;padding:6px 0}
.badges-scroller{display:flex;align-items:center;white-space:nowrap;will-change:transform}
.badges-track{display:flex;align-items:center}
.badge-item{display:inline-block;margin-right:8px;flex:0 0 auto}
.badge-item img{width:88px;height:31px;display:block;object-fit:contain;box-sizing:border-box;border:0;flex-shrink:0}

/* looping animation: use pixel-based translate driven by --track-width to avoid percentage rounding/snapping */
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--track-width, 50%)))}}

/* pause on hover / focus for accessibility */
.badges-marquee:hover .badges-scroller,
.badges-marquee:focus-within .badges-scroller{animation-play-state:paused}

/* the inner wrapper will hold the animation; JS creates .badges-inner */
.badges-inner{will-change:transform}

/* reduce side padding so scroller uses more width inside the box */
.badges-marquee{padding-left:2px;padding-right:2px}

/* On very small screens make the badges smaller */
@media (max-width:420px){
    .badge-item img{width:66px;height:24px}
}

/* Hover zoom for guestbook or other images */
.hover-zoom{transition:transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms;transform-origin:center center;display:block}
.hover-zoom:hover,.hover-zoom:focus{transform:scale(1.15);z-index:30;position:relative;}

/* Boxes grid: auto-placement in both axes. Add new .box elements freely. */
.boxes-grid{
	display:grid;
	/* columns auto-fill, rows size to content */
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-auto-rows: auto;
	grid-auto-flow: dense;
	gap:12px;
}
.box{background:linear-gradient(45deg, #211621, #082727);padding:10px;
    overflow:hidden;position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:left;border:1px solid rgba(255,255,255,0.03);}
.box h2{margin:0 0 6px 0;font-size:1.05rem;color:var(--accent)}

.box-no-padding{padding:0}

.box img{max-width:100%;height:auto;display:block}

.box-widget .widget{display:block}
.box-widget .widget iframe{width:auto;height:auto;border:3px solid rgba(255,255,255,0.04)}


.widget iframe{width:100%;height:100%;border:0;display:block}

.site-footer{background:black;width:100%;box-sizing:border-box;flex-shrink:0}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.footer-nav a{color:var(--muted);text-decoration:underline;margin-left:10px}

@media (max-width:700px){
	.page-body{flex-direction:column;padding:0 6px}
	.sitebar{width:100%;order:2}
    /* remove sidebar divider when stacked on small screens */
    .sitebar-iframe{border-right:0;box-shadow:none}
}

code{background:#000;color:#0f0;padding:2px 6px;border:2px solid #0f0}

h2{
    color: var(--accent);
    margin: 0 0 6px 0;
    font-size:1.2rem;
}

.light-text {
    color: #ffffff;
}
/* hero-blurb internal 3-column layout: left small, center large, right small */
.hero-blurb .hb-inner{display:grid;grid-template-columns:120px 1fr 120px;gap:12px;align-items:center}
.hero-blurb .hb-left,.hero-blurb .hb-center,.hero-blurb .hb-right{min-height:40px}
.hero-blurb .hb-left,.hero-blurb .hb-right{display:flex;align-items:center;justify-content:center}
.hero-blurb .hb-center{padding:6px 4px;text-align:center}
@media (max-width:700px){
    .hero-blurb .hb-inner{grid-template-columns:1fr;grid-auto-rows:auto}
        .hero-blurb .hb-center{text-align:center}
}

/* Games gallery and inline viewer (POC) */
.games-shell{display:block;margin-top:6px}
.games-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.game-card{background:linear-gradient(45deg,#211621,#082727);padding:10px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .18s,box-shadow .18s;border:1px solid rgba(255,255,255,0.04)}
.game-card:focus,.game-card:hover{transform:translateY(-6px);box-shadow:0 10px 22px rgba(0,0,0,0.55);outline:none}
.thumb-wrap{width:100%;overflow:hidden;border-radius:6px;border:1px solid rgba(255,255,255,0.05);background:#000;display:block}
/* prefer native aspect-ratio when available */
.thumb-wrap{aspect-ratio:3/4}
.game-thumb{display:block;width:100%;height:100%;object-fit:cover}
.game-title{margin:0;font-size:1rem;color:var(--accent)}
.game-desc{margin:0;color:var(--muted);font-size:0.9rem;text-align:center}
.game-viewer{display:none;background:linear-gradient(180deg,#0e1015,#081016);padding:8px;border-radius:6px}
.game-viewer[aria-hidden="false"]{display:block}
.game-viewer.viewer-fixed{position:fixed;z-index:3000;top:var(--viewer-top,72px);left:var(--viewer-left,calc(15% + 20px));right:var(--viewer-right,20px);bottom:var(--viewer-bottom,96px);background:linear-gradient(180deg,#0e1015,#081016);padding:12px;border-radius:8px;box-shadow:none}
.game-viewer.viewer-fixed .viewer-inner{height:100%;display:flex;flex-direction:column}
.game-viewer.viewer-fixed .viewer-framewrap{height:100%;flex:1}
.viewer-controls{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.viewer-back{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:6px 10px;border-radius:5px;cursor:pointer}
.viewer-framewrap{width:100%;/* prefer viewport-relative but leave room for header/footer */
    height: min(80vh, calc(100vh - 140px));
    max-height: calc(100vh - 100px);
    background:#000;display:flex;align-items:center;justify-content:center}
.viewer-framewrap iframe{width:100%;height:100%;border:0;border-radius:4px;background:#000}
.viewer-note{color:var(--muted);margin-top:8px}

@media (max-width:700px){
    .viewer-framewrap{height: min(60vh, calc(100vh - 120px));}
    /* make thumbnails a bit shorter on small screens */
    .thumb-wrap{aspect-ratio:3/4;}
}

/* ===== Extracted page-specific and sidebar styles (moved from inline <style> blocks) ===== */
/* Sidebar iframe styles */
html,body.sidebar-iframe-blank{height:100%;margin:0;background:transparent}
aside.sitebar{height:100%;box-sizing:border-box}
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Music player styles (compact Winamp-like) */
.music-player{width:100%;background:linear-gradient(180deg,#1f202c,#221238);padding:8px; border:2px solid rgba(35,35,35,0.9);box-shadow:none;font-family:'Orbitron', monospace;font-weight:100;letter-spacing:0.7px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:uppercase}
.mp-display{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mp-track-title{font-family:'Orbitron', monospace;color:#9fffe6;font-size:0.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:500;letter-spacing:0.6px}
.mp-track-title .mp-title-text{display:inline-block;padding-right:12px}
.mp-track-title.marquee-active .mp-title-text{animation: mp-marquee var(--marquee-duration,8s) ease-in-out infinite;will-change:transform}
@keyframes mp-marquee{0% { transform: translateX(var(--marquee-offset, 12px)); }20% { transform: translateX(var(--marquee-offset, 12px)); }60% { transform: translateX(calc(-1 * var(--marquee-distance, 40px))); }100% { transform: translateX(var(--marquee-offset, 12px)); }}
#mpProgress{appearance:none;-webkit-appearance:none;height:8px;border-radius:4px;flex:1;--progress-fill:0%;background:linear-gradient(90deg,var(--accent,#afedf9) var(--progress-fill), #01363a var(--progress-fill));}
#mpProgress::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:transparent}
#mpProgress::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent,#afedf9);box-shadow:0 0 8px rgba(175,237,249,0.4);margin-top:-3px;border:2px solid rgba(0,0,0,0.25);cursor:pointer}
#mpProgress::-moz-range-track{height:8px;border-radius:4px}
#mpProgress::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent,#afedf9);border:none}
.mp-controls button{background:transparent;border:0;color:var(--muted,#9aa6b2);font-size:1rem;padding:6px;cursor:pointer}
.mp-controls button:hover{color:var(--accent,#afedf9)}
.mp-progress-wrap{display:flex;align-items:center;gap:8px;margin-top:8px}
.mp-time{font-size:11px;color:var(--muted,#9aa6b2);white-space:nowrap}
.mp-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:6px}
.mp-brand{font-family:'VT323', monospace;color:var(--muted,#9aa6b2);font-size:0.62rem;padding-left:4px;line-height:1}
.mp-volume{display:flex;align-items:center;gap:6px;font-size:0.78rem}
#mpVol{width:72px;appearance:none;-webkit-appearance:none;background:transparent;height:6px}
#mpVol:focus{outline:none}
#mpVol::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(90deg,#01363a 0%, #04606a 100%)}
#mpVol::-moz-range-track{height:6px;border-radius:4px;background:linear-gradient(90deg,#01363a 0%, #04606a 100%)}
#mpVol::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent,#afedf9);box-shadow:0 0 10px rgba(175,237,249,0.45);margin-top:-4px;border:2px solid rgba(0,0,0,0.25)}
#mpVol::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent,#afedf9);box-shadow:0 0 10px rgba(175,237,249,0.45);border:none}
.mp-volume input{vertical-align:middle}
@media (max-width:300px){ .mp-brand{display:none} .mp-volume{gap:4px} #mpVol{width:60px} }

/* Outer Wilds / game entry page styles */
.game-page{width:100%;max-width:920px;margin:0 auto;padding:22px 28px;background:linear-gradient(180deg,#0f0d12,#08070a);border-left:1px solid rgba(255,255,255,0.04);border-right:1px solid rgba(255,255,255,0.04);flex:1;display:flex;flex-direction:column}
.game-hero{display:flex;align-items:flex-end;gap:12px;background:transparent;padding:8px 0;border-radius:0;border:none}
.game-hero .title{font-size:1.5rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px}
.game-meta{color:var(--muted);font-size:0.95rem}
.game-body{display:block;margin-top:8px;flex:1}
.game-content{background:transparent;padding:6px 0;color:#e9f3f7;column-count:1;flex:1}
.game-content h2{margin-top:6px;color:var(--accent)}
.game-content p{line-height:1.7;color:#e9f3f7;margin:0 0 12px 0;font-size:1rem}
.inline-img{display:block;margin:14px auto;width:100%;height:auto;border:0;box-shadow:0 6px 18px rgba(0,0,0,0.6)}

/* scrollable stack used on game entry pages when showing multiple images in one area */
.image-stack{max-height:520px;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 auto 12px;width:100%;max-width:520px}
.image-stack .inline-img{margin:6px auto}

/* Carousel used on entry pages */
.image-carousel{display:flex;align-items:center;justify-content:center;gap:40px;margin:20px auto 26px;max-width:1200px}
.carousel-view{flex:1;display:flex;align-items:center;justify-content:center;max-width:1000px;aspect-ratio:16/9;overflow:hidden}
.carousel-view .carousel-img{width:100%;height:100%;display:block;object-fit:contain;cursor:pointer}
.carousel-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:12px 14px;cursor:pointer;font-size:1.25rem}
.carousel-btn:hover{background:rgba(255,255,255,0.03)}
.carousel-sources{display:none}

/* small touch-friendly hit area on narrow screens */
@media (max-width:520px){
    .carousel-btn{padding:10px 12px;font-size:1.1rem}
    .image-carousel{gap:12px}
    .carousel-view{max-width:100%;aspect-ratio:4/3}
}
.game-content p, .game-content li, .game-content span{color:#e9f3f7;text-shadow:0.3px 0.3px 0 rgba(0,0,0,0.6)}
.game-content h1,.game-content h2,.game-content h3{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.6)}
.game-content, .game-page{overflow-wrap:break-word}

/* Small Disco Elysium nicety */
.disco-page h2{ text-align:center }

/* 404 page styles moved from inline */
.nf-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.nf-card{max-width:720px;text-align:center}
.nf-gif{max-width:80%;height:auto;margin:18px auto;display:block}
.nf-cta{display:inline-block;padding:10px 16px;background:var(--accent);color:#041018;text-decoration:none;font-weight:bold}
.nf-return{margin-top:18px}

.sitebar-segment h2{margin:0 0 8px 0}

/* Utilities added during refactor */
.video-wrap{width:100%;max-width:560px;margin:8px auto;visibility:hidden;position:relative;padding-top:56.25%;height:0;overflow:hidden}
.video-wrap iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0}
.pet-image{height:auto;padding:20px}

/* end of extracted styles */

/* Small helper classes used by sidebar iframe markup */
.widget-iframe-72{width:100%;height:72px;border:none;padding:0 5px}
.widget-iframe-120{width:100%;height:120px;border:none;padding:0 5px}
.full-link{display:block;text-decoration:none;color:inherit}
.sitebar-segment--transparent{border:0;padding:0;background:transparent}