:root{
  --bg1: #0f1724;
  --bg2: #1b2330;
  --glass: rgba(255,255,255,0.07);
  --glass-2: rgba(255,255,255,0.06);
  --accent: #7ee7c6;
  --accent-2: #9b7ef5;
  --glass-border: rgba(255,255,255,0.12);
}
/* Make selection background transparent and prevent selecting the cookie */
::selection{background:transparent}
.cookie, .cookie *{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial}
html,body{height:100%;margin:0}
body{
  background:linear-gradient(160deg,var(--bg1),var(--bg2));
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.bg{position:fixed;inset:0;filter:blur(60px);opacity:0.5;background:radial-gradient(circle at 10% 20%, rgba(127,90,255,0.12), transparent 10%), radial-gradient(circle at 80% 80%, rgba(34,211,238,0.08), transparent 12%)}
.app{max-width:1100px;margin:32px auto;padding:20px;position:relative}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.topbar h1{font-size:20px;margin:0}
.topbar .controls button{margin-left:8px;padding:8px 12px;border-radius:10px;border:1px solid var(--glass-border);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));color:inherit;backdrop-filter: blur(6px);}
.game{display:flex;gap:20px}
.left{flex:1}
.right{width:320px;padding:18px}
.glass{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border:1px solid var(--glass-border);border-radius:16px;padding:16px;backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(2,6,23,0.6)}
.cookie-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px}
.cookie{font-size:96px;cursor:pointer;display:flex;align-items:center;justify-content:center;width:180px;height:180px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.06));border:1px solid rgba(255,255,255,0.06);box-shadow:inset 0 -8px 20px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.35);transition:transform .08s ease}
.cookie:active{transform:scale(.96)}
.stats{display:flex;flex-direction:column;align-items:center}
#cookiesCount{font-size:28px;font-weight:600}
#cps{color:rgba(230,238,248,0.7);font-size:13px}
.upgrades{margin-top:18px}
.upgrade{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:12px;margin-bottom:8px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
.upgrade button{padding:8px 10px;border-radius:10px;border:none;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#012;cursor:pointer;font-weight:600}
.upgrade .meta{max-width:60%}
.upgrade small{display:block;color:rgba(230,238,248,0.7)}
.right h2{margin-top:0}
#achievements .ach{padding:10px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);margin-bottom:8px}
.prestige{margin-top:12px;display:flex;flex-direction:column;gap:8px}
#prestigeBtn{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,#ffd79a,#ffb36b);font-weight:700;cursor:pointer}
.footer{margin-top:18px;padding:10px;text-align:center}
@media (max-width:880px){.game{flex-direction:column}.right{width:100%}}

/* Theme variants for levels */
.theme-1 .bg{background:radial-gradient(circle at 10% 20%, rgba(127,90,255,0.12), transparent 10%), radial-gradient(circle at 80% 80%, rgba(34,211,238,0.08), transparent 12%)}
.theme-2 body, .theme-2 .app{color:#031523}
.theme-2 .bg{background:radial-gradient(circle at 20% 20%, rgba(255,183,77,0.12), transparent 8%), radial-gradient(circle at 85% 80%, rgba(255,99,132,0.06), transparent 10%)}
.theme-2 .glass{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));box-shadow:0 8px 26px rgba(255,170,120,0.06)}
.theme-3 .bg{background:radial-gradient(circle at 10% 20%, rgba(80,255,200,0.08), transparent 10%), radial-gradient(circle at 80% 80%, rgba(120,80,255,0.06), transparent 12%)}
.theme-3 .cookie{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.04));box-shadow:inset 0 -12px 30px rgba(0,0,0,0.25), 0 12px 28px rgba(40,40,60,0.45);}

/* Music control styles */
.music-controls button, #musicPlayBtn, #musicMuteBtn{margin-right:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));color:inherit;cursor:pointer}

/* Home page styles */
.home{max-width:1100px;margin:28px auto;color:inherit}
.home-header{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.home-header{position:relative}
.home-left{position:absolute;left:0;top:0}
.open-btn{padding:8px 10px;border-radius:10px;border:none;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#012;cursor:pointer;font-weight:700}
.home-center{display:flex;flex-direction:column;align-items:center;width:100%}
.subtitle{color:rgba(230,238,248,0.7);margin:0}
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.game-card{padding:18px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.game-card h3{margin:0}
.card-actions{margin-top:auto;display:flex;justify-content:flex-end}
.play-btn{padding:8px 10px;border-radius:10px;border:none;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#012;cursor:pointer;font-weight:700}

/* hide/show views */
.view-hidden{display:none !important}

/* Tetris styles */
.tetris-panel{display:flex;gap:18px;max-width:1100px;margin:20px auto;padding:18px}
.tetris-left{width:400px;flex:0 0 400px}
.tetris-right{flex:1;display:flex;flex-direction:column;padding-left:12px}
.tetris-info{display:flex;flex-direction:column;gap:8px;font-weight:600}
.tetris-controls button{margin-top:12px;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));cursor:pointer}

.tetris-controls .toggle-control{margin-top:12px;display:inline-flex;align-items:center;gap:8px;color:inherit;font-weight:600}
.tetris-controls .toggle-control input{width:16px;height:16px;cursor:pointer}

.tetris-back{padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));cursor:pointer}

/* Snake styles (reuse tetris) */
.snake-panel{display:flex;gap:18px;max-width:900px;margin:20px auto;padding:18px}
.snake-left{width:420px;flex:0 0 420px}
.snake-right{flex:1;display:flex;flex-direction:column;padding-left:12px}
.snake-info{display:flex;flex-direction:column;gap:8px;font-weight:600}
.snake-controls button{margin-top:12px;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));cursor:pointer}

/* Arrow-key style controls (3D cover + buttons) */
.tetris-left, .snake-left { position: relative; }
/* Arrow keys layout under the controls hint: render like real keyboard arrows */
.arrow-keys{display:grid;grid-template-columns:40px 40px 40px;grid-template-rows:40px 40px 40px;gap:8px;justify-content:center;align-items:center;margin-top:12px}
.arrow-keys .spacer{grid-column:2 / 3;grid-row:2 / 3}
.arrow-key{cursor:pointer;border:none;background:#ddd;border-radius:6px;height:40px;width:40px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;box-shadow:0 4px 0 rgba(0,0,0,0.2);transition:transform .08s}
.arrow-key:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,0.15)}
.arrow-key.btn-up{grid-column:2;grid-row:1}
.arrow-key.btn-left{grid-column:1;grid-row:2}
.arrow-key.btn-right{grid-column:3;grid-row:2}
.arrow-key.btn-down{grid-column:2;grid-row:3}

@media (max-width:640px){ .arrow-keys{grid-template-columns:32px 32px 32px;grid-template-rows:32px 32px 32px;gap:6px} .arrow-key{height:32px;width:32px;font-size:14px} }

/* Duck Hunt styles */
.duckhunt-panel{display:flex;gap:18px;max-width:1100px;margin:20px auto;padding:18px}
.duckhunt-left{flex:1}
.duckhunt-right{width:320px;display:flex;flex-direction:column;padding-left:12px}
#duckCanvas{cursor:none}


/* From Uiverse.io by aguerquin */
.github-fab{position:fixed;right:16px;bottom:16px;z-index:1000}
.button-icon {
  display: flex;
  border: 3px #fff solid;
  width: fit-content;
  height: fit-content;
  cursor: pointer;
}

.icon {
  background-color: #fff;
  padding: 10px 10px 5px 10px;
}

.icon svg {
  width: 25px;
  height: 25px;
}

.cube {
  transition: all 0.4s;
  transform-style: preserve-3d;
  width: 200px;
  height: 20px;
}

.button-icon:hover {
  border-color: #ff98a2b6;
}

.button-icon:hover .cube {
  transform: rotateX(90deg);
}

.side {
  position: absolute;
  height: 47px;
  width: 200px;
  display: flex;
  font-size: 0.8em;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
}

.top {
  background: #c898ff;
  color: #fff;
  transform: rotateX(-90deg) translate3d(0, 13.5px, 2em);
}

.front {
  background: rgb(25, 38, 52);
  color: #fff;
  transform: translate3d(0, 0, 1em);
}

/* Layout: make games page fit and hide visible scrollbar while preserving scrolling */
html, body { overflow: hidden; height: 100%; }
.app { height: calc(100vh - 40px); overflow: auto; -ms-overflow-style: none; scrollbar-width: none; }
.app::-webkit-scrollbar { display: none; }

/* move GitHub FAB a bit higher and ensure it sits above toasts */
.github-fab{position:fixed;right:16px;bottom:64px;z-index:10001}

/* Cookie banner styles (match site look) */
.cookie-banner{position:fixed;right:16px;bottom:120px;left:16px;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--glass-border);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter:blur(6px);color:inherit;z-index:10002;display:flex;transform:translateY(12px);opacity:0;pointer-events:none;transition:transform 320ms cubic-bezier(.2,.9,.2,1),opacity 320ms ease}
.cookie-banner p{margin:0;flex:1;color:rgba(230,238,248,0.9)}
.cookie-banner .cookie-actions{display:flex;gap:8px;margin-left:12px}
.cookie-banner .btn{padding:8px 12px;border-radius:10px;border:none;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#012;cursor:pointer;font-weight:700}
.cookie-banner .btn.tertiary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:inherit}
.cookie-banner.visible{transform:translateY(0);opacity:1;pointer-events:auto}