:root{
  --bg:#fff7fb; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --brand:#ff80b3; --brand-2:#a78bfa; --accent:#60a5fa;
  --radius:16px; --shadow:0 10px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{font-size:16px}
@media (max-width:480px){html{font-size:15px}} @media (min-width:1440px){html{font-size:18px}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;line-height:1.5;}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
a.skip:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;padding:10px;border-radius:10px;box-shadow:var(--shadow)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
header{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow)}
.header-inner{max-width:1100px;margin:0 auto;padding:clamp(12px,2vw,18px);display:flex;gap:16px;align-items:center;justify-content:space-between}
.brand{font-weight:800;font-size:clamp(18px,2.6vw,28px)}
nav ul{list-style:none;display:flex;gap:clamp(10px,2.2vw,22px);margin:0;padding:0;flex-wrap:wrap}
nav a{color:#fff;font-weight:700;font-size:clamp(14px,1.6vw,18px)}
.container{max-width:1100px;margin:0 auto;padding:clamp(12px,4vw,28px)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(12px,2.4vw,20px)}
.section-title{font-size:clamp(18px,2.4vw,24px);margin:.2rem 0 .6rem 0}
.muted{color:var(--muted);font-size:clamp(13px,1.4vw,15px)}
#chatContainer{display:flex;flex-direction:column;gap:10px}
#chat{min-height:clamp(160px,28vh,280px);max-height:52vh;overflow:auto;padding:10px;background:#ffeaf3;border:2px solid #ffd1e4;border-radius:12px}
.message{margin:.35rem 0}
.chat-input{display:flex;gap:8px;align-items:center}
.chat-input input{flex:1;padding:12px 14px;font-size:clamp(14px,2.4vw,16px);border:1px solid #e5e7eb;border-radius:12px}
button{padding:12px 16px;font-weight:700;border:none;border-radius:12px;background:#ff5da2;color:#fff;cursor:pointer}
button:disabled{opacity:.6;cursor:not-allowed}
button:hover{filter:brightness(.97)}
.games-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.memory-game{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));max-width:min(520px,92vw);margin:0 auto}
.memory-card{background:#ffeaf3;border-radius:12px;display:grid;place-items:center;aspect-ratio:1/1;font-size:clamp(24px,8vw,42px);cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform .4s}
.memory-card.flip{transform:rotateY(180deg)}
.memory-card .front,.memory-card .back{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;border-radius:12px}
.memory-card .front{background:#ffd1e4}
.memory-card .back{background:#fff;transform:rotateY(180deg)}
.tictactoe-grid{display:grid;gap:clamp(6px,2vw,10px);grid-template-columns:repeat(3,minmax(72px,16vw));justify-content:center;margin:clamp(8px,2vw,16px) auto}
.cell{aspect-ratio:1/1;background:#fff;border-radius:12px;display:grid;place-items:center;font-size:clamp(30px,8vw,46px);box-shadow:var(--shadow);cursor:pointer}
.snakes-board{display:grid;gap:clamp(3px,1vw,6px);grid-template-columns:repeat(6,minmax(40px,64px));justify-content:center;margin:clamp(8px,2vw,16px) auto}
.snakes-cell{aspect-ratio:1/1;background:#fff;border-radius:10px;display:grid;place-items:center;font-size:clamp(11px,2.4vw,14px);border:1px solid #f3e5ef}
.snakes-cell.player{background:#ff80b3;color:#fff}
.product-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.product{background:#fff;border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.product h3{margin:.3rem 0}
.badge{display:inline-block;padding:8px 10px;border-radius:999px;background:#ffe3f0;color:#83214f;font-weight:700}
footer{padding:20px;color:var(--muted);text-align:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (prefers-color-scheme:dark){
  :root{--bg:#0b0b10;--card:#10121a;--ink:#eef1f6;--muted:#9aa3b2;--brand:#ff6aa9;--brand-2:#7b6dff}
  .memory-card .front{background:#241d2b}.memory-card .back{background:#151823}.snakes-cell{border-color:#222739}
}