/* ======================================================================
   CUSTOMIZE YOUR WHOLE SITE FROM HERE — every page links to this file.
   Look: late-night arcade. Dark violet room, chunky pressable buttons,
   and every game board sits in a glowing violet bezel.
   ====================================================================== */
:root{
  --bg:#14112e;       /* page background */
  --ink:#f3f0ff;      /* main text */
  --muted:#a9a3d6;    /* secondary text */
  --board:#0d0b22;   /* game board background (dark in both themes) */
  --cell:#272255;     /* empty squares on the board */
  --panel:#201b45;    /* score boxes, cards */
  --line:rgba(255,255,255,.12);
  --accent:#ff5c93;   /* pink — logo, buttons, snake head */
  --accent2:#8f7bff;  /* violet — board bezel, snake body, card backs */
  --accent3:#3ef0c0;  /* mint — food, matches */
  --accent4:#ffd166;  /* butter — second player color */
  --sq1:#d9d4ff;--sq2:#6a5ec4; /* chess squares */
  --g:10px;
  font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){--bg:#f3f0ff;--ink:#1a1540;--muted:#5d5890;--panel:#fff;--line:rgba(26,21,64,.14)}
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);min-height:100vh;min-height:100dvh;
  background-image:radial-gradient(var(--line) 1px,transparent 1.5px);background-size:24px 24px;
  padding:env(safe-area-inset-top,0px) 16px env(safe-area-inset-bottom,0px)}
.wrap{max-width:520px;margin:0 auto;padding:20px 0 48px}
.wrap.wide{max-width:1000px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.logo,h1,.over h2{font-family:'Bricolage Grotesque','Sora',system-ui,sans-serif}
.logo{font-weight:800;font-size:1.45rem;letter-spacing:-.03em;text-decoration:none;color:inherit}
.logo i{font-style:normal;color:var(--accent)}
.nav{font-size:.85rem;color:var(--muted)}
.nav a{color:var(--ink);text-decoration:none;background:var(--panel);border:2px solid var(--line);border-radius:99px;padding:6px 12px;display:inline-block}
.nav a:hover{border-color:var(--accent2)}
h1{font-size:clamp(2.4rem,10vw,3.6rem);line-height:.95;margin:0 0 8px;letter-spacing:-.045em;font-weight:800}
.sub{color:var(--muted);margin:0 0 20px;font-size:.95rem;line-height:1.55;max-width:46ch}
.bar{display:flex;gap:8px;align-items:stretch;margin-bottom:14px;flex-wrap:wrap}
.stat{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:6px 14px;min-width:84px}
.stat.grow{flex:1}
.stat small{display:block;color:var(--muted);font-size:.7rem}
.stat b{font-size:1.2rem;font-variant-numeric:tabular-nums}
.sp{flex:1}
button,select{font:inherit;color:inherit}
.btn{background:var(--accent);color:#1a0b1f;border:0;border-radius:12px;padding:0 18px;height:42px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.45);transition:transform .06s,box-shadow .06s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.btn.alt{background:var(--panel);color:var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 0 0 2px var(--line)}
.btn:focus-visible,select:focus-visible,a:focus-visible,.q:focus-visible,.col:focus-visible,.cell:focus-visible{outline:3px solid var(--accent4);outline-offset:2px}
select{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:0 10px;height:42px}
option{color:#1a1540}
.help{color:var(--muted);font-size:.85rem;margin-top:16px;line-height:1.5}

/* Every game board gets the same arcade bezel */
#board{box-shadow:0 0 0 3px var(--accent2),0 0 28px rgba(143,123,255,.35),0 10px 0 3px rgba(0,0,0,.4)}

/* Game-over / win modal, reused by every game */
.over{position:absolute;inset:0;border-radius:18px;background:rgba(13,11,34,.9);color:#f3f0ff;backdrop-filter:blur(3px);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px}
.over.show{display:flex;animation:in .2s ease-out}
.over.low{inset:auto 0 0 0;border-radius:0;padding:14px;gap:6px}
.over.low h2{font-size:1.5rem}
.over h2{margin:0;font-size:2.1rem;letter-spacing:-.03em}
.over p{margin:0;font-size:.95rem}
.over .btn{height:44px;padding:0 22px}
@keyframes in{from{opacity:0;transform:scale(.94)}}

/* Homepage */
.hero{margin:18px 0 28px}
.grid-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin-top:4px}
.card{--c:var(--accent);display:flex;flex-direction:column;gap:5px;background:var(--panel);border:2px solid var(--c);border-radius:20px;
  padding:12px 12px 16px;text-decoration:none;color:inherit;box-shadow:6px 6px 0 var(--c);transition:transform .12s,box-shadow .12s}
.card:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--c)}
.card:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--c)}
.card .art{height:104px;border-radius:12px;display:grid;place-items:center;font-size:2.6rem;font-weight:800;background:var(--c);color:#14112e;margin-bottom:8px;
  font-family:'Bricolage Grotesque','Sora',sans-serif;overflow:hidden}
.card h3{margin:0;font-size:1.15rem;display:flex;align-items:center;gap:8px;padding:0 4px}
.card p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.45;padding:0 4px}
.tag{font-size:.68rem;font-weight:700;background:var(--c);color:#14112e;border-radius:99px;padding:2px 9px}
.card.feat{grid-column:1/-1;flex-direction:row;align-items:center;gap:18px;padding:14px}
.card.feat .art{width:38%;height:150px;margin:0;flex:none}
.card.feat h3{font-size:1.5rem;margin-bottom:4px}
.card.feat p{font-size:.95rem}
.more{margin-top:40px;color:var(--muted);font-size:.88rem;border-top:2px dashed var(--line);padding-top:16px}
@media (max-width:560px){.card.feat{flex-direction:column;align-items:stretch}.card.feat .art{width:auto;height:110px;margin-bottom:8px}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Secret golden mode — switched on by the hidden button at the bottom of the home page (assets/gold.js) ===== */
:root[data-gold="1"]{
  --bg:#1c1505;--ink:#fff7da;--muted:#dcc57f;--board:#120d03;--cell:#3a2c0d;--panel:#2b200a;--line:rgba(255,215,0,.2);
  --accent:#ffc928;--accent2:#e0a818;--accent3:#fff1a8;--accent4:#ffdf6b;--sq1:#f6e3a1;--sq2:#b8860b;
}
[data-gold="1"] .btn{color:#2a1c00}
[data-gold="1"] .card{--c:#ffc928!important}
[data-gold="1"] h1,[data-gold="1"] .logo{background:linear-gradient(100deg,#ffe58a,#ffc928 40%,#fff6c9 55%,#e0a818);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 4s linear infinite}
[data-gold="1"] .logo i{-webkit-text-fill-color:transparent}
[data-gold="1"] #board{box-shadow:0 0 0 3px #ffc928,0 0 34px rgba(255,201,40,.55),0 10px 0 3px rgba(0,0,0,.4)}
[data-gold="1"] #board:has(.cols){background:#8a6508}
[data-gold="1"] .tile{filter:sepia(1) saturate(2.4) hue-rotate(-8deg)}
[data-gold="1"] .k:not(.o){background:#e0a818}
@keyframes shine{to{background-position:-200% 0}}

/* the hidden part at the bottom of the home page */
.secret{margin-top:40px;color:var(--muted);font-size:.8rem;opacity:.55}
.secret .trail{display:block;text-align:center;padding-top:1800px;opacity:.5}
.secret .end{display:flex;flex-direction:column;align-items:center;gap:14px;padding:2400px 0 120px;text-align:center}
.secret .end p{margin:0;opacity:1;font-size:.95rem;color:var(--ink)}

/* ===== Polish: floating background, card entrance, best-score badges, hero ===== */
.wrap{position:relative;z-index:1}
.floaty{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.floaty span{position:absolute;bottom:-60px;font-size:2rem;opacity:.13;animation:floatup linear infinite}
@keyframes floatup{to{transform:translateY(-115vh) rotate(40deg)}}
.hero h1{font-size:clamp(3rem,13vw,5.6rem)}
.hero .btn{margin-top:6px}
.grid-games .card{animation:rise .5s ease-out backwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.card .best{display:block;margin:4px 4px 0;color:var(--c);font-weight:700;font-size:.78rem}
a.card:focus-visible{outline:3px solid var(--accent4);outline-offset:4px}

/* Pizza button */
.pizza{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;text-decoration:none;
  background:var(--panel);border:2px solid var(--accent4);box-shadow:0 4px 0 rgba(0,0,0,.45);transition:transform .1s,box-shadow .1s}
.pizza:hover{transform:translateY(-2px) rotate(-12deg);box-shadow:0 6px 0 rgba(0,0,0,.45)}
.pizza:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.pizza:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ===== Disco mode (Surprise me button) ===== */
.disco-wash{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.3;
  background:radial-gradient(circle at 20% 30%,#ff5c93 0,transparent 40%),radial-gradient(circle at 80% 25%,#3ef0c0 0,transparent 40%),radial-gradient(circle at 50% 85%,#ffd166 0,transparent 45%),radial-gradient(circle at 10% 90%,#8f7bff 0,transparent 40%);
  animation:washhue 6s linear infinite,washmove 4s ease-in-out infinite alternate}
@keyframes washhue{to{filter:hue-rotate(360deg)}}
@keyframes washmove{to{transform:scale(1.25) rotate(8deg)}}
.discoball{position:fixed;top:0;left:50%;z-index:60;pointer-events:none;font-size:5rem;line-height:1;margin-left:-2.5rem;padding-top:3.5rem;
  transform-origin:50% 0;animation:swing 2.2s ease-in-out infinite alternate}
.discoball::before{content:"";position:absolute;left:50%;top:0;width:2px;height:3.5rem;background:var(--muted)}
@keyframes swing{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.flyer{position:fixed;z-index:50;pointer-events:none;font-size:2.4rem;line-height:1;animation:fly var(--t,3s) linear forwards}
@keyframes fly{from{transform:translate(0,0) rotate(0) scale(.6)}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.5)}}
body.disco .grid-games .card{animation:bop .5s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * 80ms)}
body.disco h1,body.disco .logo{animation:bop .5s ease-in-out infinite alternate}
@keyframes bop{from{transform:rotate(-2deg) scale(1)}to{transform:rotate(2deg) scale(1.03)}}

/* How-to-play sections */
.howto{margin-top:34px;border-top:2px dashed var(--line);padding-top:6px}.howto h2{font-size:1.15rem;margin:18px 0 6px}.howto p,.howto li{color:var(--muted);line-height:1.6;font-size:.92rem}
.mute{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:5;width:48px;height:48px;border-radius:50%;border:2px solid var(--line);background:var(--panel);font-size:1.25rem;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.45)}
.mute:focus-visible{outline:3px solid var(--accent4);outline-offset:3px}