.emote-menu{
  position:fixed;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));
  background:radial-gradient(ellipse at 50% 42%,#1a3358cc 0%,#07101ee8 72%);
  backdrop-filter:blur(10px);
  pointer-events:auto;
}
.emote-menu.hidden{display:none}
.emote-shell{
  width:min(420px,100%);
  border:1px solid #9fd2ff55;
  border-radius:28px;
  background:linear-gradient(165deg,#214876f2,#122845f8 55%,#0c1a32fa);
  box-shadow:0 24px 60px #000a,0 0 0 1px #78b7ff33 inset;
  overflow:hidden;
  transform:scale(.94);
  opacity:0;
  animation:emoteIn .22s ease forwards;
}
@keyframes emoteIn{to{transform:scale(1);opacity:1}}
.emote-shell header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 10px;
}
.emote-shell header div{min-width:0}
.emote-shell header small{
  display:block;
  color:#8eb6e8;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.emote-shell header h2{
  margin:2px 0 0;
  color:#fff;
  font-size:20px;
  font-weight:800;
}
.emote-shell header p{
  margin:4px 0 0;
  color:#a8c4e8;
  font-size:12px;
}
.emote-close{
  width:36px;
  height:36px;
  border:1px solid #9fd2ff66;
  border-radius:50%;
  background:#1d4a7ccc;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}
.emote-tabs{
  display:flex;
  gap:6px;
  padding:0 14px 10px;
  direction:rtl;
}
.emote-tabs button{
  flex:1;
  min-height:36px;
  border:1px solid #ffffff22;
  border-radius:999px;
  background:#16345a;
  color:#cfe4ff;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
}
.emote-tabs button.active{
  background:linear-gradient(180deg,#4f9dff,#2a6fd6);
  border-color:#9fd2ffaa;
  color:#fff;
  box-shadow:0 6px 16px #1a4ea866;
}
.emote-tabs button:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.emote-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:4px 14px 16px;
  direction:rtl;
}
.emote-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:86px;
  padding:10px 8px;
  border:1px solid #ffffff1f;
  border-radius:18px;
  background:radial-gradient(circle at 30% 20%,#2a5688,#163454 70%);
  color:#eaf3ff;
  cursor:pointer;
  transition:transform .15s ease,filter .15s ease,border-color .15s ease;
}
.emote-btn:hover{transform:translateY(-2px);filter:brightness(1.08);border-color:#9fd2ff88}
.emote-btn.active{
  border-color:#ffe28aaa;
  box-shadow:0 0 0 1px #ffe28a55 inset,0 8px 18px #0006;
  background:radial-gradient(circle at 30% 20%,#6a5a2a,#3a2f14 70%);
}
.emote-btn span{font-size:26px;line-height:1;filter:drop-shadow(0 2px 2px #0006)}
.emote-btn b{font-size:12px;font-weight:800}
.emote-btn.emote-clear{
  grid-column:1 / -1;
  min-height:48px;
  flex-direction:row;
  background:linear-gradient(180deg,#3a4f6e,#243650);
}
.emote-hint{
  padding:0 18px 16px;
  color:#91b4dc;
  font-size:11px;
  text-align:center;
}
@media (max-width:520px){
  .emote-grid{grid-template-columns:repeat(2,1fr)}
  .emote-btn{min-height:78px}
}