*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
}

body{
  font-family:Arial,sans-serif;
  background:radial-gradient(circle at top,#fff7b2 0%,#87ceeb 45%,#4aa3df 100%);
  background-attachment:fixed;
  color:#222;
  user-select:none;
  -webkit-user-select:none;
  padding-top:56px;
}

button{
  font-family:inherit;
  -webkit-appearance:none;
  appearance:none;
}

/* ===================== Topbar ===================== */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:56px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 12px rgba(0,0,0,.1);
  display:flex;
  align-items:center;
  padding:0 10px;
  z-index:50;
}

.menu-btn{
  width:44px;height:44px;
  border:0;background:transparent;
  font-size:26px;line-height:1;
  cursor:pointer;
  border-radius:10px;
  color:#333;
  transition:background .15s ease;
}
.menu-btn:active{background:rgba(0,0,0,.08)}

.topbar-title{
  margin-left:6px;
  font-weight:900;
  font-size:20px;
  letter-spacing:.5px;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

/* ===================== Drawer ===================== */
.drawer{
  position:fixed;
  top:0;left:0;bottom:0;
  width:280px;
  max-width:82vw;
  background:#fff;
  transform:translateX(-100%);
  transition:transform .25s ease;
  z-index:70;
  box-shadow:4px 0 24px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  padding:14px 12px 20px;
  overflow-y:auto;
}
.drawer.open{transform:translateX(0)}

.drawer-close{
  align-self:flex-end;
  width:38px;height:38px;
  border:0;background:transparent;
  font-size:20px;line-height:1;
  cursor:pointer;
  border-radius:9px;
  color:#333;
}
.drawer-close:active{background:rgba(0,0,0,.08)}

.drawer-title{
  font-weight:900;
  font-size:21px;
  margin:2px 0 14px;
  padding:0 10px;
  color:#5a3a1a;
}

.drawer nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.drawer nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 12px;
  border-radius:12px;
  color:#222;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  transition:background .15s ease,color .15s ease;
}
.drawer nav a:hover{background:rgba(0,0,0,.05)}
.drawer nav a.active{
  background:linear-gradient(135deg,#ffd98a,#ffb347);
  color:#5a3a1a;
}

/* ===================== Overlay ===================== */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.overlay.open{opacity:1;pointer-events:auto}

/* ===================== Pages ===================== */
.page{
  display:none;
  padding:16px 12px 40px;
  max-width:900px;
  margin:0 auto;
}
.page.active{display:block}

/* ===================== Home ===================== */
.home-hero{
  text-align:center;
  padding:20px 8px 0;
}
.home-hero h1{
  margin:0 0 6px;
  font-size:clamp(36px,9vw,64px);
  text-shadow:3px 4px 0 rgba(255,255,255,.7);
}
.home-sub{
  font-size:16px;
  opacity:.75;
  max-width:520px;
  margin:0 auto 24px;
}
.home-cards{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
}
.home-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  width:min(92vw,260px);
  padding:22px 18px;
  background:rgba(255,255,255,.75);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease,box-shadow .2s ease;
}
.home-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.2)}
.home-card:active{transform:scale(.98)}
.home-card-emoji{font-size:58px;line-height:1}
.home-card-title{font-size:20px;font-weight:900}
.home-card-desc{font-size:14px;opacity:.75;line-height:1.4}
.home-foot{
  margin-top:26px;
  font-size:13px;
  opacity:.65;
}

/* ===================== О сайте ===================== */
.about{
  max-width:640px;
  margin:0 auto;
  background:rgba(255,255,255,.75);
  border-radius:22px;
  padding:24px 22px 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  font-size:15px;
  line-height:1.6;
}
.about h1{
  margin:0 0 14px;
  font-size:clamp(26px,6vw,38px);
  text-shadow:2px 3px 0 rgba(255,255,255,.7);
}
.about h2{
  margin:22px 0 8px;
  font-size:18px;
}
.about p{margin:0 0 10px}
.about ul{margin:0 0 10px;padding-left:22px}
.about li{margin-bottom:4px}
.about code{
  background:rgba(0,0,0,.07);
  padding:1px 6px;
  border-radius:6px;
  font-size:13px;
}
.about-foot{
  margin-top:20px;
  font-size:13px;
  opacity:.65;
  text-align:center;
}

/* ===================== Общие кнопки (в играх) ===================== */
.control{
  border:0;
  padding:12px 22px;
  border-radius:14px;
  background:rgba(255,255,255,.9);
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 5px 15px rgba(0,0,0,.15);
  transition:opacity .15s ease,transform .1s ease;
  color:#222;
}
.control:active:not(:disabled):not(.is-disabled){transform:scale(.96)}
.control:disabled,
.control.is-disabled{
  opacity:.4;
  cursor:not-allowed;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}