:root{
  /* Neon PixelPlay palette to match background artwork */
  --brand-main: #00e5ff;    /* neon cyan */
  --brand-accent: #b36bff;  /* neon magenta */
  --bg-fallback: #0b0810;   /* fallback dark */
  --frame-overlay: rgba(6,6,10,0.55);
  --board-overlay: rgba(3,3,6,0.28);
  --muted: #d7eaf0;
}
*{box-sizing:border-box}
.html,body{height:100%;margin:0;font-family:Inter, 'Segoe UI', Roboto, Arial, sans-serif;background-color:var(--bg-fallback);color:var(--muted)}

/* Background image (save the attached image as assets/background.png) */
body{background-image:url('assets/background.png');background-size:cover;background-position:center center;background-attachment:fixed}
.page-bg{background:var(--bg);min-height:100vh;display:flex;flex-direction:column;padding:8px}
.page-bg > .frame{flex:0 0 auto;margin:auto}
#frame{ }
.frame{width:1200px;max-width:98vw;background:linear-gradient(var(--frame-overlay), rgba(8,8,12,0.45));padding:8px;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,0.7);position:relative;border:1px solid rgba(255,255,255,0.04)}
#topbar .left-controls{}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}
.topbar h1{margin:0;font-size:42px;font-weight:700;color:var(--muted);letter-spacing:0.2px}
.badge{display:none}
.badge span{margin-left:0;font-weight:800}
.left-controls{display:flex;gap:10px;align-items:center}
.leaderboard{background:var(--brand-accent);color:#041018;padding:8px 12px;border-radius:8px;font-weight:700}

/* PixelPlay brand badge (subtle) */
.brand{position:absolute;right:18px;bottom:10px;background:rgba(255,255,255,0.02);color:var(--muted);padding:6px 8px;border-radius:6px;font-size:12px;display:inline-flex;align-items:center;gap:8px}
.brand .mark{width:14px;height:14px;border-radius:2px;background:linear-gradient(45deg,var(--brand-main),var(--brand-accent));box-shadow:0 1px 0 rgba(255,255,255,0.02) inset}


#newGame{background:#2b2f33;color:var(--muted);padding:10px 16px;border-radius:8px;border:none;font-weight:700;cursor:pointer}
#boardCanvas{display:block;margin:0;background:transparent;border-radius:6px;box-shadow:none;width:100%;height:100%}
.board{background:var(--board-overlay);border-radius:10px;padding:0;margin:0;border:1px solid rgba(255,255,255,0.04);box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);aspect-ratio:1/1;width:100%;max-width:100%}
.tray{height:52px;margin-top:14px;display:flex;align-items:center;gap:10px}
.tray{height:52px;margin-top:14px;display:flex;align-items:center;gap:10px}
.marker{width:140px;height:10px;border-radius:6px;background:linear-gradient(#fff,#ddd);box-shadow:0 2px 0 rgba(0,0,0,0.2)}
.marker.small{width:90px;background:linear-gradient(#fff,#e9e9e9)}
.marker.thin{width:60px;height:8px;background:linear-gradient(#fff,#f3f3f3)}
.eraser{width:120px;height:28px;border-radius:4px;background:#222;margin-left:auto}

/* Canvas container sizing */
.board { display:flex; align-items:center; justify-content:center; position:relative; }
/* Square playfield (larger, responsive) - canvas fills the board container */
#boardCanvas { max-width:100%; max-height:100%; border-radius:8px; cursor:crosshair; display:block }

/* Small responsive */
@media (max-width:1200px){ 
  .frame{width:98vw;padding:6px}
  .page-bg{padding:4px}
  .topbar{padding:6px 8px}
}

/* Footer Styles - Unified Design */
.site-footer {
  padding: 0.6rem 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.28), rgba(2, 6, 23, 0.18));
  backdrop-filter: blur(6px) saturate(120%);
  color: rgba(234, 246, 255, 0.86);
  margin-top: auto;
}
.site-footer a {
  color: rgba(0, 212, 255, 1);
  text-decoration: none;
  font-weight: 600;
}
.footer-inner {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0.5rem;
}
.footer-left {
  flex: 0 0 auto;
  color: #99b8d1;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.footer-left > a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.footer-left .powered-logo {
  height: 20px;
  width: auto;
  max-height: 20px;
  max-width: 120px;
  display: inline-block;
  margin-left: 0;
  vertical-align: middle;
  filter: drop-shadow(0 6px 12px rgba(124, 92, 255, 0.06));
  object-fit: contain;
  flex-shrink: 0;
}
.footer-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.footer-center a {
  color: #99b8d1;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.18s, border-color 0.18s;
  font-size: 0.95rem;
}
.footer-center a:hover {
  color: rgba(0, 212, 255, 1);
  border-color: rgba(0, 212, 255, 0.25);
}
.footer-right {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.social-icon {
  height: 28px;
  width: 28px;
  display: inline-block;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(124, 92, 255, 0.1));
}
.logo-footer {
  height: 40px;
  margin-right: 12px;
  filter: drop-shadow(0 8px 22px rgba(124, 92, 255, 0.08));
}
@media (max-width:720px){
  .footer-inner {
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    padding: 0;
  }
  .footer-center {
    order: 3;
  }
  .footer-left {
    justify-content: center;
  }
  .site-footer {
    padding: 1rem 0;
  }
}