/* ------------------ Theme ------------------ */
:root{
  --pink: #ffd3ec;
  --pink-2: #ffd3ec;
  --lav:#e9ddff;
  --lav-2:#d9ccff;
  --violet:#a88ff4;
  --ink:#2c2137;
  --white:#fff;
  --shadow:#c1b3ff;
  --dark: #5a5493;
  --bg-url: url('/assets/backgrounds/planets.jpeg');
  --link: #C683E6;
  --dark-link: #dec2ee;
  --title-text: #4e096e;
  --win-pink-dark:   #d79ad0;
  --win-pink-light:  #eadae8;;
  --win-lav:         #bfb3e8;
  --win-lav-light:   #d4cdf5;
  --win-lav-dark:    #9b8fd4;
}

/* ------------------ Dark mode ------------------ */

:root[data-theme="dark"]{
  --bg-url: url('/assets/backgrounds/dark.jpeg');
}

:root[data-theme="dark"] body {
  background-size: cover;
}

:root[data-theme="dark"] .nav-pill-active{
  background: var(--win-lav-dark);
}

:root[data-theme="dark"] .content, :root[data-theme="dark"] #logo, :root[data-theme="dark"] td {
  background-color: var(--dark);
  color: var(--white);
}

:root[data-theme="dark"] .content a:not(.pill) {
  color: var(--dark-link);
}

:root[data-theme="dark"] .card {
  background-color: var(--dark);
}

:root[data-theme="dark"] #badges {
  background-color: var(--dark);
}
/* dark mode leaderboard */

:root[data-theme="dark"] .lb-score, :root[data-theme="dark"] .lb-footer {
  color: var(--dark-link);
}

:root[data-theme="dark"] .lb-date {
  color: var(--lav);
}

:root[data-theme="dark"] .lb-row-alt {
  background: rgba(255,255,255,0.05);
}

@font-face {
  font-family: "Harnold Pixel";
  src: url("/assets/HarnoldPixel-Regular_demo.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { 
  box-sizing: border-box; 
}
html,body{ 
  height:100%; 
  cursor: url("/assets/cursors/Normal_Select2.ani"),
        url("/assets/cursors/Normal_Select.cur"),
        auto;
}
.content a:not(.pill) {
  color: var(--link);
}

.content a:not(.pill):hover {
  color: var(--link-hover);
}

a,
button,input,.btn
[role="button"],
.clickable {
  cursor: url("/assets/cursors/Link_Select.cur"), 
  url("/assets/cursors/Link_Select.ani"),
          pointer;
}
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
[contenteditable="true"],
.selectableText {
  cursor: url("/assets/cursors/Text_Select.cur"),
          text;
}
body{
  margin:0;
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 300;                
  letter-spacing: 0.15px;         
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background-image: var(--bg-url);
  background-size: initial;
  overflow-x:hidden;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px);
  pointer-events:none;
  mix-blend-mode: soft-light;
}

/* crt effect */
.crt {
  position: relative;
  filter: contrast(1.1) brightness(0.9) saturate(1.2);
  image-rendering: pixelated; 
}
.crt::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    linear-gradient(
      rgba(18,16,16,0) 50%,
      rgba(0,0,0,0.25) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255,0,0,0.06),
      rgba(0,255,0,0.02),
      rgba(0,0,255,0.06)
    );
  background-size: 100% 2px, 3px 100%;
  animation: crt-flicker 1.2s infinite;
}

@keyframes crt-flicker {
  0%   { opacity: 0.95; }
  50%  { opacity: 1;    }
  100% { opacity: 0.9;  }
}

/* Light/dark mode button styling */
#mode-toggle{
  margin: 10px;
}

#mode-toggle:hover{ 
  transform: translate(-1px, -1px); 
}
:root[data-theme="dark"] .mode-toggle {
  background: var(--dark);
  color: var(--white);
}

/* Falling petals/stars layer */
.rain{
  position: fixed; 
  inset: 0; 
  pointer-events: none; 
  z-index: 0;
}
.petal{
  position: absolute;
  top: -10%;
  font-size: 14px;            
  opacity: .9;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.6));
  animation: fall linear forwards;
}

/* Floating twinkle stars */
.stars{ 
  position:fixed; inset:0; 
  pointer-events:none; 
  z-index:0;
}
.star{
  position:absolute; 
  background:var(--white); 
  border-radius:50%;
  box-shadow:0 0 8px 2px rgba(255,255,255,.7);
  animation: twinkle 3.6s ease-in-out infinite alternate;
}
@keyframes twinkle { 
  from{opacity:.35; transform:scale(.75)} 
  to{opacity:1; transform:scale(1.2)}
}
@keyframes fall{
  to{
    transform: translateY(120vh) rotate(360deg);
    opacity: .95;
  }
}

.btn-petal {
  position: absolute;
  top: -10%;
  pointer-events: none;
  opacity: 0.9;
  animation: fall linear forwards;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.5));
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .petal{ animation: none; }
}

/* ------------------ Layout ------------------ */
.links-body{
  background-size:cover;
}
.minimal-wrap {
  transform: translateY(-20px);
  position: relative;
  z-index: 1;
  min-height: 100svh;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 24px 16px;
}
.wrap{
  position:relative; 
  z-index:1;
  max-width:1200px; 
  margin:40px auto; 
  padding:0 16px;
  display:grid; 
  gap:16px;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - 80px);
}
header.site{
  grid-column:1 / -1;
  display:flex; 
  align-items:center; 
  justify-content:center;
}
#logo{
  font-family:"Harnold Pixel", cursive;
  color: var(--ink);
  text-align: center;
  letter-spacing:1px;
  padding:20px 14px; 
  margin: 30px 0;
  border-top:    3px solid var(--win-pink-light);
  border-left:   3px solid var(--win-pink-light);
  border-right:  3px solid var(--win-pink-dark);
  border-bottom: 3px solid var(--win-pink-dark);
  background: var(--white);
  min-height: 79px;
}
.site-links #logo{
  margin:0;
  border: none;
  padding: 10px 14px;
}

.title{
  font-size: 50px;
  text-shadow: 2px 2px var(--violet);
}
.minimal-title{
  font-weight: bold;
}
.subtitle{
  font-size:18px;
  text-shadow: 1px 1px var(--violet);
}
aside.left { 
  grid-column:1; 
  display:flex; 
  flex-direction:column; 
  gap:16px;
}
main.right { 
  grid-column:2; 
  display:flex; 
  flex-direction:column; 
  gap:16px;
}
footer.site { 
  grid-column:1 / -1; 
}

/* ------------------ Window styling ------------------ */
.window {
  background: var(--win-pink-light);
  border-top:    3px solid var(--white);
  border-left:   3px solid var(--white);
  border-right:  3px solid var(--win-pink-dark);
  border-bottom: 3px solid var(--win-pink-dark);
  padding: 4px;
  box-shadow: none;
  outline: none;
  overflow: visible;
}
.window::before {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  z-index: 1;
}
.window {
  position: relative;
}
.titlebar.pixel {
  background: linear-gradient(180deg,
    var(--win-lav-light) 0%,
    var(--win-lav)       60%,
    var(--win-lav-dark)  100%
  );
}
.titlebar {
  background: linear-gradient(180deg,
    var(--win-lav-light) 0%,
    var(--win-lav)       60%,
    var(--win-lav-dark)  100%
  );
  color: var(--title-text);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  margin: 0 0 3px 0;
  border: none;
  font-family: "Press Start 2P", cursive;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.titlebar .icons {
  margin-left: auto;
  display: flex;
  gap: 3px;
}

.window .content {
  padding: 10px 12px 14px;
  border: none;
  margin: 0;
  background: var(--white);
  border-top:    3px solid var(--win-pink-dark);
  border-left:   3px solid var(--win-pink-dark);
  border-right:  3px solid var(--win-pink-light);
  border-bottom: 3px solid var(--win-pink-light);
}

/* Nav pills */
.nav-grid{
  display:flex; 
  flex-wrap:wrap; 
  gap:8px;
}
.pill{
  display: flex;
  align-items: center;
  border-top:    3px solid var(--lav-2);
  border-left:   3px solid var(--lav-2);
  border-right:  3px solid var(--dark);
  border-bottom: 3px solid var(--dark);
  background: linear-gradient(180deg,
    var(--win-lav-light) 0%,
    var(--win-lav)       60%,
    var(--win-lav-dark)  100%
  );
  padding:6px 10px; 
  font-weight:600; 
  text-decoration:none; 
  color:var(--ink);
  /* box-shadow: 3px 3px 0 0 var(--win-pink-dark); */
  transition: transform .12s ease, background .12s ease;
  overflow: hidden; 
  justify-content: center;
}
.pill:hover{ 
  transform: translate(-2px, -2px); 
  background: var(--win-lav-dark); 
  color: var(--white);
}

dl{ 
  display:grid; 
  grid-template-columns: auto 1fr; 
  gap:16px 10px; 
  margin:0;
}
dt{ 
  font-weight:700;
}
dd{ 
  margin:0; 
}
.card{
  border:2px dashed var(--violet);
  background: rgba(255,255,255,.6);
  padding:12px;
}
.player .cover{
  width:64px; 
  height:64px; 
  border:2px solid var(--violet); 
  border-radius:8px;
  background-repeat: no-repeat;      
  background-position: center;       
  background-size: cover;            
}
.buttons-row{ 
  display:flex; 
  gap:8px; 
  align-items:center; 
  flex-wrap:wrap; 
}
.btn{
  border:2px solid var(--violet); 
  background:var(--lav-2);
  padding:6px 10px; 
  font-weight:700; 
  box-shadow: 3px 3px 0 0 var(--shadow);
}

.game-scene{
  display: flex;
}
.game-text{
  padding: 20px;
}
.dog-frame {
  display: flex;
  justify-content: center;
  background: rgba(255,255,255,.7);
  padding: 8px;
  margin-bottom: 12px;
}

/*404*/
.not-found{
  display: flex; 
  flex-direction: column; 
  gap: 16px;
}

/* Footer */
#badges{
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
  justify-content:center;
  padding:14px;
  border-top:    3px solid var(--win-pink-light);
  border-left:   3px solid var(--win-pink-light);
  border-right:  3px solid var(--win-pink-dark);
  border-bottom: 3px solid var(--win-pink-dark);
  background: var(--white);
  box-shadow: 6px 6px 0 0 var(--shadow);
  align-items: center;
}
.badges img{
  height:50px; 
  image-rendering: pixelated;
  border:2px solid var(--violet);
  background:var(--white);
  box-shadow: 3px 3px 0 0 var(--shadow);
}

/* music player */
.progress{
  width: 200px; 
  height: 10px; 
  margin:10px 0;
  border:2px solid var(--violet); 
  border-radius:8px;
  background:
    repeating-linear-gradient(90deg, rgba(168,143,244,.2) 0 8px, rgba(255,211,236,.2) 8px 16px);
  box-shadow: 2px 2px 0 0 var(--shadow);
  cursor: url("/assets/cursors/Link_Select.cur"), 
    url("/assets/cursors/Link_Select.ani"),
            pointer;
}
.progress .bar{
  height: 100%; 
  width: 0%;
  background: linear-gradient(90deg, var(--pink-2), var(--lav-2));
  border-radius:6px;
}
.time{ 
  font-size: .9rem; 
  opacity: .9;
}
.vol { 
  display:inline-flex; 
  align-items:center; 
  gap:6px; 
  font-size:.85rem; 
  margin-top:6px;
}
.vol input{ 
  accent-color: var(--violet); 
}

/* Pixel-style SVG icons */
.icon {
  width: 16px;
  height: 16px;
  fill: currentColor;      
  vertical-align: -2px;        
}
.icon.pixel path {
  shape-rendering: crispEdges;   
}

.titlebar .label-with-icon,
.pill .label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Marquee */
.marquee-container {
  grid-column: 1 / -1;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: scroll-left 40s linear infinite;
  align-items: center;
}
.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Leaderboard */
.lb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.lb-body {
  font-size: 20px;
  min-height: 200px;
}
.lb-footer {
  margin-top: 12px;
  font-size: 15px;
  color: var(--violet);
  text-align: right;
}
.lb-scroll {
  max-height: 265px;
  overflow-y: auto;
  border: 1px solid var(--lav-2);
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
}

.lb-head {
  background: #7964a7;
  color: #ffffff;
  border-bottom: 2px solid var(--violet);
  position: sticky;
  top: 0;
}

.lb-cell {
  padding: 7px 10px;
  text-align: left;
  font-size: 15px;
}

.lb-row {
  border-bottom: 1px dashed var(--lav-2);
}

.lb-row-alt {
  background: rgba(233,221,255,0.2);
}

.lb-rank {
  font-family: "Press Start 2P", cursive;
  font-size: 9px;
}

.lb-name {
  font-weight: 600;
}

.lb-score {
  font-weight: 700;
  color: var(--dark);
}

.lb-date {
  font-size: 12px;
  color: var(--violet);
}

.lb-message {
  color: var(--violet);
  font-family: "Press Start 2P", cursive;
  font-size: 10px;
  text-align: center;
  padding: 20px;
}

.lb-pill-active {
  background: var(--dark) !important;
  color: #fff !important;
}


/* Navigation */
.nav-grid-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pill.nav-pill-active {
  background: var(--dark);
  color: var(--white);
}

.nav-icon{
  padding-right: 10px;
}

/* Gallery */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.gallery-item {
  border: 2px solid var(--violet);
  box-shadow: 3px 3px 0 0 var(--shadow);
  overflow: hidden;
  background: var(--white);
}

.gallery-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
}

.gallery-item .gallery-caption {
  font-size: 11px;
  padding: 6px 8px;
  border-top: 2px solid var(--violet);
  font-family: "Press Start 2P", cursive;
  color: var(--dark);
}

/* lightbox overlay */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 90vw;
  max-height: 80vh;
  border: 3px solid var(--violet);
  box-shadow: 6px 6px 0 0 var(--shadow);
}
.lightbox-caption {
  font-family: "Press Start 2P", cursive;
  font-size: 10px;
  color: var(--white);
}
.lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  font-family: "Press Start 2P", cursive;
  font-size: 10px;
}

/* Videos */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.video-grid--short {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.video-item {
  border: 2px solid var(--violet);
  box-shadow: 3px 3px 0 0 var(--shadow);
  overflow: hidden;
  background: var(--white);
}

.video-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-wrap--short {
  padding-bottom: 177.77%; /* 9:16 for vertical video */
}

.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-caption {
  font-size: 11px;
  padding: 6px 8px;
  border-top: 2px solid var(--violet);
  font-family: "Press Start 2P", cursive;
  color: var(--dark);
}

/* Links page */
.links-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 16px;
}

.links-card {
  width: 100%;
  max-width: 520px; 
}

.links  {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.links .pill {
  width: 100%;
  padding: 10px;
}

.links-footer {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  display: flex;
  justify-content: center;
}

/* Responsive */
@media only screen and (max-width: 700px) {
  .game-scene{
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 860px){
  .wrap { grid-template-columns: 1fr; }
  aside.left, main.right { grid-column: 1; }
}
@media only screen and (max-width: 700px) {
  .game-scene {
    flex-direction: column;
    align-items: center;
  }
  .game-scene iframe {
    width: 100% !important;
    min-height: 400px;
  }
  .game-text {
    width: 100%;
  }
}