:root {
  --bg: radial-gradient(ellipse at center, #000 0%, #0a0a0a 30%, #1a1a1a 60%, #333 85%, #555 100%);
  --fg: #111; --muted: #6b7280; --line: #000000; --danger: #ef4444; --accent: #111;
}

*{box-sizing:border-box} html, body{height:100%}
body{
  margin:0;
  background:url('/background.jpg') no-repeat center/cover fixed;
  color:var(--fg);
  font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x: hidden;
}
.app-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:2px solid var(--line);background:rgb(0 0 0 / 40%);backdrop-filter:blur(4px);z-index:10}
.app-header .game-title{
  height:44px;
  margin:0 auto;
  font-size: 32px;
  font-weight: 800;
  color: #00e5ff;
  text-shadow: 
    0 0 10px rgba(0, 229, 255, 0.8),
    0 0 20px rgba(0, 229, 255, 0.6),
    0 0 30px rgba(0, 229, 255, 0.4),
    0 0 40px rgba(0, 229, 255, 0.2);
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(45deg, #00e5ff, #00ffcc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: squishdrift-glow 2s ease-in-out infinite alternate;
}
.app-header h1{font-size:16px;margin:0;letter-spacing:.2px}
.app-header .ghost{padding:8px 10px;border-radius:10px;border:2px solid var(--line);background:transparent;cursor:pointer}
.debug{position:absolute;right:20px;top:20px;width:260px;max-height:50vh;overflow:auto;padding:10px;background:#f8fafc;border:2px solid var(--line);border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.app-footer{padding:16px 14px;border-top:2px solid var(--line);color :var(--muted);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;background:rgb(0 0 0 / 40%);backdrop-filter:blur(4px);margin-top:auto;width:100%}
.app-footer div{color:#ccc}.app-footer small{font-size:12px;opacity:.8;line-height:1.4}.app-footer em{font-style:italic;color:rgba(255,255,255,.9)}.app-footer strong{color:rgba(255,255,255,.95);font-weight:600}
.panel{border:2px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.panel-header{display:flex;align-items:center;justify-content :space-between;padding:12px;border-bottom:2px solid var(--line);gap:12px}
.panel-header h2{margin:0;font-size:16px}.actions{display:flex;gap:8px;align-items:center;width:100%;justify-content:flex-end}
input[type="text"]{flex:1 1 340px;min-width:180px;padding:10px 12px;border:2px solid var(--line);border-radius:10px;outline:none}
input[type="text"]:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent-2) 20%,transparent)}
button{padding:10px 14px;border-radius:10px;border:2px solid var(--line);background:#fff;cursor:pointer;transition:transform .06s ease,box-shadow .12s ease}
button:hover{transform:translateY(-1px);box-shadow:0 2px 10px rgba(0,0,0,.06)}
button.primary{background:var(--fg);color:#fff;border-color :var(--fg)}
button.ghost{background:transparent;border:2px solid var(--line)}
button.danger{color:var(--danger);border-color:color-mix(in oklab,var(--danger) 30%,var(--line))}
.list{list-style:none;margin:0;padding:6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.item{border:2px solid var(--line);border-radius:10px;padding:10px;display:flex;gap:8px;align-items:flex-start}
.item input[type="checkbox"]{margin-top:3px}.item .text{flex:1}.item .meta{display:flex;gap:8px;align-items:center;color :var(--muted);font-size:12px}.item .trash{border:none;background:transparent;color :var(--muted);padding:6px}
.dev-panel{position:fixed;right:12px;bottom:12px;width:360px;max-width:calc(100% - 24px);border:2px solid var(--line);background:#fff;border-radius:12px;padding:12px;box-shadow:0 8px 40px rgba(0,0,0,.1)}
.dev-row{display:flex;align-items:center;justify-content :space-between;gap:8px;margin-bottom:8px}.label{color :var(--muted)}.mono{font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace}.dump{margin:8px 0 0;max-height:240px;overflow:auto;background:#f8fafc;border:2px solid var(--line);border-radius:8px;padding:8px}
.hud,.interaction-prompt,.app-header{pointer-events:none}.app-header button,.app-header input[type="range"],.audio-controls{pointer-events:auto}

/* Styles moved from index.html */
.canvas-wrap {
  position: relative;
  width: 100%;
  display: block;
  max-width: 1280px;
  margin: 0 auto;
}

.canvas-wrap #game {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

@keyframes squishdrift-glow {
  0% {
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.6)) brightness(1);
  }
  100% {
    filter: drop-shadow(0 0 15px rgba(0, 229, 255, 1)) brightness(1.2);
  }
}