/* Mid-00s retro styling */
@font-face {
  font-family: 'PixelOperator';
  src: url('/font/pixeloperator.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Corporation Games Straight';
  src: url('/font/corporation games straight.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
:root{
  --bg1:#0b1020;
  --accent:#ffffff;
  --panel:#f6f3e8;
  --muted:#333;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'PixelOperator', monospace;
  font-size: 16px;
  background:#0b1020;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(102,153,255,0.05) 0%, transparent 50%),
    linear-gradient(180deg,var(--bg1) 0%, #16223a 100%);
  color:#fff;
  /* Use custom arrow cursor with a safe fallback */
  cursor: url('/cur/arrow.cur'), auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Use custom hand cursor for pointer-style interactables */
a, button, input[type="button"], input[type="submit"], input[type="reset"], .filter-controls select, select {
  cursor: url('/cur/hand.cur'), pointer;
}
header{
  padding:18px 24px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px),
    linear-gradient(90deg, rgba(255,255,255,0.1) 0%, transparent 30%, rgba(102,153,255,0.1) 70%, transparent 100%);
  background-size: auto, 200% 100%;
  animation: headerShimmer 8s ease-in-out infinite;
  border-bottom:3px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 -2px 8px rgba(255,255,255,0.1);
}
@keyframes headerShimmer{
  0%, 100%{background-position: 0 0, 0% 0}
  50%{background-position: 0 0, 100% 0}
}
.header h1{}
header h1{margin:0;font-size:28px;color:var(--accent);font-family:'Corporation Games Straight', sans-serif;letter-spacing:0.1em;text-shadow:0 0 2px rgba(255,255,255,0.12), 0 1px 1px rgba(0,0,0,0.6);font-weight:400}
header .tag{margin:4px 0 0;color:#bfc8d6;font-size:13px;text-shadow:0 1px 2px rgba(0,0,0,0.6)}

/* Layout for logo left of the title */
.site-header{display:flex;align-items:center;gap:12px}
.site-logo{width:40px;height:40px;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,0.45)}
.site-title-wrap{display:flex;flex-direction:column}

main{flex:1;overflow:auto;padding:18px;position:relative}
#grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 18px;
  justify-content: center;
  align-content: flex-start;
}

/* Year filter slider (desktop only) */
#controls{display:flex;justify-content:center;padding:12px 18px 0}
.year-filter{width:100%;max-width:820px;display:flex;justify-content:center}
/* Filter controls (left of the year slider) */
.filter-controls{display:flex;gap:12px;align-items:center;margin-right:12px}
.filter-controls label{color:#dfe7f3;font-size:13px}
.filter-controls select{
  background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
  color: var(--muted);
  padding: 6px 8px;
  border-radius: 4px;
  font-family: inherit;
  transition: all 160ms ease;
}
.filter-controls select:hover{
  background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.3);
}
.year-slider{position:relative;flex:1;height:52px;display:flex;align-items:center}
/* Selected year display at the right of the bar */
.year-selected{
  display: none; /* hidden since year now appears above thumb */
}
.year-track{position:absolute;left:12px;right:12px;height:6px;background:linear-gradient(90deg,#b8b8b8,#e0e0e0);border-radius:4px;box-shadow:inset 0 2px 4px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3)}
.year-tick{position:absolute;top:50%;transform:translateY(-50%);width:2px;height:14px;background:rgba(0,0,0,0.14)}
.year-label{position:absolute;top:38px;font-size:12px;color:#ddd;text-align:center;transform:translateX(-50%)}
.year-thumb{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:18px;
  height:18px;
  background:radial-gradient(circle at 30% 30%, #ff4444, #d40000 60%, #a00000);
  border-radius:50%;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
  box-shadow:0 0 0 2px rgba(0,0,0,0.4), 0 3px 6px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.4);
  transition: transform 160ms ease, box-shadow 160ms ease;
  z-index:10;
}
.year-thumb:hover{
  transform:translate(-50%,-50%) scale(1.15);
  box-shadow:0 0 0 2px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.4), 0 0 12px rgba(255,68,68,0.6), inset 0 1px 2px rgba(255,255,255,0.5);
}
.year-thumb:active{cursor:grabbing}
.year-thumb .knob{
  width:100%;
  height:100%;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
}
.thumb-label{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  margin-bottom:8px;
  color:#fff;
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(255,255,255,0.4);
  pointer-events:none;
}

/* Subtle pulse animation for year labels */
@keyframes labelGlow{
  0%, 100%{text-shadow: 0 0 8px rgba(255,255,255,0.6)}
  50%{text-shadow: 0 0 12px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.6)}
}
.year-label{
  transition: color 200ms ease, text-shadow 200ms ease;
}
@media (max-width:640px){
  #controls{display:none}
}
.tile{
  width:200px;height:200px;
  background:var(--panel);
  color:var(--muted);
  display:block;
  text-decoration:none;
  /* remove outer border for blocky look */
  border:0;
  position:relative;
  overflow:hidden;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease;
}
.tile:hover{
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255,255,255,0.6), 0 0 40px rgba(255,255,255,0.3);
  z-index:20;
}
/* Shadow layer placed behind the overlay SVG */
.tile::before{
  content:'';
  position:absolute;
  inset:0;
  box-shadow: 8px 8px 0 rgba(0,0,0,0.3);
  z-index:5;
  pointer-events:none;
}
/* Glossy reflection overlay - classic Flash effect */
.tile::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:50%;
  background:linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 40%, transparent 100%);
  z-index:8;
  pointer-events:none;
  opacity:0.6;
}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.info{
  position:absolute;left:6px;bottom:6px;right:6px;padding:6px;background:linear-gradient(180deg,rgba(0,0,0,0.0),rgba(0,0,0,0.8));color:#fff;font-size:13px;border-radius:0;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.info strong{
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(255,255,255,0.3);
}

.tile:hover .info,
.tile:focus-within .info{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Full-viewport SVG for overlay connector line */
.overlay-svg{
  position:fixed;
  top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:6;
}
.overlay-svg line{
  stroke:#ffffff;stroke-width:3;stroke-linecap:round;opacity:0.95;transition:stroke-dashoffset 90ms ease-out;
}

/* Ensure tiles/images render above the connector SVG */
.tile img{position:relative;z-index:7}
.meta{font-size:11px;opacity:0.9}
.desc{display:block;margin-top:6px;font-size:12px}

footer{padding:12px 18px;background:transparent;color:#dfe7f3;border-top:1px dashed rgba(255,255,255,0.02)}

@media (max-width:520px){
  .tile{width:45vw;height:45vw}
  #grid{
    grid-template-columns: repeat(auto-fill, 45vw);
  }
}

/* Staggered fade-in animation - classic Flash entrance effect */
@keyframes tileEnter{
  0%{opacity:0;transform:scale(0.85) translateY(20px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
.tile{
  animation: tileEnter 400ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Hover info panel */
/* Overlay that replaces an adjacent tile visually */
.hover-overlay{
  position:absolute;
  background: linear-gradient(135deg, #0b1020 0%, #16223a 50%, #0b1020 100%);
  border: 1px solid rgba(255,255,255,0.3);
  /* Remove external drop shadow; keep subtle inset separation */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.3);
  color:#ffffff;
  padding:10px;
  border-radius:0;
  pointer-events:none;
  z-index:9999;
  font-size:13px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.hover-overlay strong{display:block;color:#ffffff;font-size:15px;margin-bottom:6px}
.hover-overlay .meta{font-size:12px;opacity:0.95;color:#ffffff}
.hover-overlay .desc{margin-top:8px;font-size:13px;color:#ffffff}
/* Selected tile state */
.tile.selected{
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 
    0 0 20px rgba(255,255,255,0.8),
    0 0 40px rgba(255,255,255,0.5),
    0 0 60px rgba(255,255,255,0.3);
  z-index: 25;
}

/* Detail overlay container and pieces */
.detail-overlay-container{
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 15;
}

.detail-overlay-piece{
  position: absolute;
  border: none;
  /* Make pieces fully opaque and avoid glow effects */
  box-shadow: none;
  background-color: #fff;
  transition: opacity 200ms ease;
}