/* ===== Theme ===== */
:root{
  --bg:#fff9ed;
  --bg-2:#fff4db;
  --ink:#1b1b1b;
  --muted:#6b6b6b;
  --brand:#ff8c1a;
  --brand-2:#ffb347;
  --brand-3:#ff6a00;
  --card:#ffffff;
  --ring: rgba(255,140,26,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.5 system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Background */
.bg{
  background:
    radial-gradient(1100px 600px at 70% -10%, rgba(255,140,26,.20), transparent 60%),
    radial-gradient(800px 400px at -10% 20%, rgba(255,179,71,.18), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* ===== Layout ===== */
.bar{
  position:sticky; top:0; z-index:10;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:12px; padding:14px 20px;
  background:var(--brand); color:#2b1600; box-shadow:0 2px 0 rgba(0,0,0,.04);
}
.brand{ margin:0; font-weight:800; letter-spacing:.2px; } /* no emoji prefix */

.wrap{ max-width:1100px; margin:24px auto; padding:0 20px; }
.center{ text-align:center; }

.card{
  background:var(--card); border-radius:22px; padding:28px;
  box-shadow:var(--shadow); backdrop-filter: blur(6px);
  animation: pop .35s ease-out both;
}
.grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  border:0; border-radius:14px; padding:12px 16px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  color:#2b1600; font-weight:700; cursor:pointer; user-select:none;
  box-shadow: var(--shadow);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:active{ transform: translateY(1px) scale(.995); filter:saturate(.95); }
.btn:hover{ filter: saturate(1.1) brightness(1.02); }
.btn.outline{
  background:#fff; color:var(--brand-3);
  border:2px solid var(--brand-2); box-shadow:0 8px 24px rgba(255,140,26,.15);
}
.btn.ghost{ background:transparent; color:#2b1600; border:2px solid rgba(0,0,0,.06); box-shadow:none; }
.btn.big{ padding:16px 22px; font-size:1.05rem; }

/* ===== Game cards ===== */
.game{
  overflow:hidden; border-radius:18px; background:#fff; box-shadow:var(--shadow);
  display:grid; grid-template-rows:140px auto; cursor:pointer; border:0; text-align:left;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.game:hover{ transform: translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.12); }
.game:active{ transform: translateY(-1px); }
.game img{ width:100%; height:100%; object-fit:cover; display:block; }
.game .info{ padding:14px 16px; }
.tag{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:rgba(255,140,26,.13); color:#7a3d00; font-weight:600; font-size:.78rem;
}

/* ===== Chat layout ===== */
.chat{
  display:grid; gap:16px;
  grid-template-rows: 1fr auto;  /* large messages area, compact input row */
  min-height: 70vh;
}
.messages{
  background:#fff; border-radius:22px; padding:18px;
  box-shadow:var(--shadow);
  overflow:auto;
}
.msg{
  max-width: 70ch;
  padding:10px 14px; border-radius:16px; margin:8px 0;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.msg.user{
  margin-left:auto; background:linear-gradient(180deg,#ffd3a4,#ffb864); color:#2b1600;
}
.msg.bot{
  background:#fff; border:1px solid rgba(0,0,0,.06);
}
.inputrow{
  display:grid; grid-template-columns: 1fr auto; gap:12px;
}
.inputrow input{
  width:100%; padding:14px 16px; border-radius:14px;
  border:1px solid rgba(0,0,0,.08); outline:none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
.inputrow input:focus{ border-color: var(--brand-2); box-shadow: 0 0 0 4px var(--ring); }

/* ===== Typo ===== */
h1,h2,h3{ margin:0 0 10px; line-height:1.25 }
h1{ font-size: clamp(1.4rem, 2.4vw + .5rem, 2.1rem); }
p{ margin:0 0 12px; color:var(--muted) }

/* ===== Footer ===== */
.footer{
  text-align:center; color:var(--muted); margin:18px 0 28px;
}

/* ===== Animations ===== */
@keyframes pop{ from{ opacity:0; transform: translateY(6px) scale(.98);} to{opacity:1; transform:none;} }