* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, "Segoe UI", sans-serif;
  background: linear-gradient(135deg, #ffd6e8, #e8d6ff);
  color: #4a2040;
  text-align: center;
}

.page {
  display: none;
  min-height: 100vh;
  padding: 40px 16px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.page.active { display: flex; animation: fade 0.6s; }

@keyframes fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
.name { color: #e0457b; }
.sub { max-width: 420px; }

button {
  font-size: 1.1rem;
  padding: 12px 26px;
  margin: 8px;
  border: none;
  border-radius: 30px;
  background: #e0457b;
  color: white;
  cursor: pointer;
  transition: transform 0.2s;
}
button:hover { transform: scale(1.08); }
#noBtn { background: #999; }
#yesBtn { max-width: 92vw; }
#hint { min-height: 1.5em; font-size: 1.2rem; font-weight: bold; color: #c2185b; }
.buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

/* gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 480px;
  width: 100%;
  margin: 20px 0;
}
.gallery figure { margin: 0; background: white; padding: 8px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
.gallery figure:nth-child(odd) { transform: rotate(-2deg); }
.gallery figure:nth-child(even) { transform: rotate(2deg); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #f3d9e6; }
.gallery figcaption { font-size: 0.85rem; margin-top: 6px; }

.viral { background: rgba(255, 255, 255, 0.6); padding: 12px 18px; border-radius: 14px; max-width: 420px; }

/* тоглогчийн тооны шошго */
.players-tag { display: block; font-size: 0.7rem; opacity: 0.85; margin-top: 2px; font-weight: normal; }
.game-grid button:disabled { background: #c9b4c4; cursor: not-allowed; }

/* дүрмийн самбар */
.rules { text-align: left; background: rgba(255, 255, 255, 0.75); border-radius: 12px; padding: 8px 14px; margin: 10px 0; font-size: 0.85rem; }
.rules summary { font-weight: bold; cursor: pointer; }
.rules ul { margin: 6px 0 0; padding-left: 18px; }
.rules li { margin-bottom: 4px; }
@media (min-width: 900px) {
  /* өргөн дэлгэц: тоглоом зүүн талд, дүрэм баруун талд */
  #pageG { align-items: center; }
  #lobby.ingame { max-width: 780px; display: grid; grid-template-columns: minmax(0, 1fr) 270px; column-gap: 18px; align-items: start; }
  #lobby.ingame > * { grid-column: 1; }
  #lobby.ingame > .rules { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 12px; margin-top: 0; }
}

/* тоглоомын цэс */
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.game-grid button { margin: 0; padding: 14px 8px; font-size: 0.95rem; }
.game-grid button.picked { background: #37b24d; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #37b24d; }

/* Memory */
.memory-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(92vw, 320px); margin: 10px auto; }
.mem { aspect-ratio: 1; font-size: 2rem; padding: 0; margin: 0; background: #fff; border-radius: 12px; }
.mem.mine { background: #d3f9d8; }
.mem.theirs { background: #ffe3e3; }

/* Othello */
.othello { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; width: min(94vw, 380px); margin: 10px auto; background: #2b8a3e; padding: 4px; border-radius: 10px; }
.ocell { aspect-ratio: 1; min-width: 0; padding: 0; margin: 0; border-radius: 4px; background: #37b24d; font-size: clamp(14px, 5vw, 28px); line-height: 1; color: #fff; }
.ocell.legal { background: #69db7c; }

/* Mancala */
.mmid { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0; }
.mrows { display: flex; flex-direction: column; gap: 8px; }
.mrow { display: flex; gap: 6px; }
.pit { width: min(11vw, 44px); height: min(11vw, 44px); border-radius: 50%; padding: 0; margin: 0; background: #f3d9a4; color: #4a2040; font-size: 1rem; cursor: default; }
.pit.active { background: #ffd43b; box-shadow: 0 0 0 3px #e0457b; cursor: pointer; }
.store { width: min(12vw, 48px); height: 110px; border-radius: 24px; background: #e6b673; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #4a2040; }
.store.mine { background: #ffc078; }

/* Даам */
.checkers { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); width: min(94vw, 380px); margin: 10px auto; border: 4px solid #8d5524; }
.ck { aspect-ratio: 1; min-width: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(16px, 6vw, 30px); line-height: 1; }
.ck.dark { background: #8d5524; }
.ck.light { background: #f1d9b5; }
.ck.red { color: #e03131; }
.ck.white { color: #fff; text-shadow: 0 0 2px #000; }
.ck.sel { outline: 3px solid #ffd43b; outline-offset: -3px; }
.ck.movable { cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 212, 59, 0.8); }

/* Цэг-Дөрвөлжин */
.dots { display: grid; grid-template-columns: repeat(4, 10px minmax(0, 1fr)) 10px; grid-template-rows: repeat(4, 10px minmax(0, 1fr)) 10px; width: min(90vw, 320px); aspect-ratio: 1; margin: 12px auto; }
.dot { background: #4a2040; border-radius: 50%; }
.hline, .vline { background: rgba(74, 32, 64, 0.18); border-radius: 5px; cursor: pointer; }
.hline { margin: 2px 0; }
.vline { margin: 0 2px; }
.hline.on, .vline.on { background: #e0457b; cursor: default; }
.dbox { display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; }
.dbox.mine { background: #d3f9d8; }
.dbox.theirs { background: #ffe3e3; }

/* Дүүжин */
.hang { font-size: 1.5rem; min-height: 2em; }
.hangword { font-size: 1.8rem; letter-spacing: 0.2em; font-weight: bold; min-height: 1.4em; }
.keys { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.key { width: 38px; height: 38px; padding: 0; margin: 0; font-size: 1rem; border-radius: 8px; }
.key:disabled { background: #bbb; }

/* Хурдан даралт */
.react-pad { width: min(90vw, 320px); height: 190px; border-radius: 20px; font-size: 1.6rem; margin: 10px 0; background: #868e96; }
.react-pad.wait { background: #e03131; }
.react-pad.go { background: #37b24d; }

/* Зураг зурж таах */
.draw-pad { background: #fff; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); width: min(92vw, 300px); height: auto; aspect-ratio: 1; touch-action: none; margin: 8px auto; display: block; }

/* Хөзрийн тоглоомууд */
.cd-table { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 6px 0; width: 100%; }
.cd-row { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cd-cards { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 4px 0; }
.pcard { width: 48px; height: 68px; padding: 0; margin: 0; background: #fff; color: #212529; border-radius: 8px; border: 2px solid #ced4da; font-size: 1rem; font-weight: bold; cursor: default; }
.pcard.red { color: #e03131; }
.pcard.back { background: #364fc7; color: #fff; }
.pcard.empty { background: rgba(255, 255, 255, 0.35); border-style: dashed; }
.pcard.sel { border-color: #e0457b; transform: translateY(-6px); }
.pcard.playable { border-color: #37b24d; cursor: pointer; }
.pcard.melded { border-color: #37b24d; box-shadow: 0 0 0 2px #37b24d; }
.pcard.mine { box-shadow: 0 0 0 3px #37b24d; }
.pcard.theirs { box-shadow: 0 0 0 3px #e03131; }
.pcard.slot { background: rgba(255, 255, 255, 0.5); font-size: 0.7rem; border-style: dashed; cursor: pointer; }
.dk-pair { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.dk-pair .over { margin-top: -26px; margin-left: 14px; }
.cd-cards .pcard { cursor: pointer; }
.cd-row .pcard, .cd-table .cd-cards:first-child .pcard { cursor: default; }

/* Battleship */
.bs-area { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bs-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; width: min(92vw, 300px); padding: 4px; background: #1c7ed6; border-radius: 10px; margin-bottom: 6px; }
.bcell { aspect-ratio: 1; min-width: 0; background: rgba(255, 255, 255, 0.75); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; }
.bcell.ship { background: #495057; }
.bcell.sunk { background: #fa5252; }
.bcell.live { cursor: pointer; }
.bcell.live:hover { background: #fff3bf; }

/* Guess Who */
.gw-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; width: min(96vw, 400px); margin: 8px auto; }
.gw-card { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; margin: 0; background: #fff; border-radius: 10px; color: #4a2040; min-width: 0; }
.gw-face { font-size: 1.5rem; line-height: 1.1; }
.gw-name { font-size: 0.72rem; font-weight: bold; }
.gw-acc { font-size: 0.8rem; min-height: 1em; }
.gw-card.crossed { opacity: 0.25; background: #ced4da; }
.gw-card.sel { box-shadow: 0 0 0 3px #e0457b; }
.gw-card.mine { box-shadow: 0 0 0 3px #37b24d; }

/* Love Letter */
.ll-table { display: flex; flex-direction: column; gap: 3px; font-size: 0.85rem; background: rgba(255, 255, 255, 0.6); padding: 8px 12px; border-radius: 12px; margin-bottom: 8px; text-align: left; }
.ll-table small { font-size: 0.8rem; }
.ll-hand { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.ll-card { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100px; padding: 10px 4px; margin: 0; background: #fff; color: #4a2040; border-radius: 12px; border: 3px solid transparent; }
.ll-card.sel { border-color: #e0457b; transform: translateY(-6px); }
.ll-icon { font-size: 2rem; line-height: 1; }
.ll-name { font-weight: bold; font-size: 0.85rem; }
.ll-en { font-size: 0.7rem; color: #8a5a7a; }

/* Latice */
.latice-info { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.latice-info small { font-size: 0.78rem; color: #6a3a5a; }
.latice-board { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; width: min(96vw, 420px); padding: 4px; margin: 6px auto; background: rgba(255, 255, 255, 0.5); border-radius: 12px; }
.lcell { min-width: 0; min-height: 0; overflow: hidden; aspect-ratio: 1; border-radius: 6px; background: rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; font-size: clamp(12px, 4.4vw, 24px); cursor: pointer; }
.lcell.special { background: rgba(255, 224, 130, 0.65); }
.tile { display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: inherit; line-height: 1; user-select: none; }
.lcell .tile { width: 100%; height: 100%; }
.tile.pick { outline: 3px solid #fff; box-shadow: 0 0 0 3px #e0457b; }
.tile.lc0 { background: #e03131; } .tile.lc1 { background: #f08c00; } .tile.lc2 { background: #fcc419; }
.tile.lc3 { background: #37b24d; } .tile.lc4 { background: #1c7ed6; } .tile.lc5 { background: #9c36b5; }
.tile.wind { background: #dee2e6; }
.latice-rack { display: flex; gap: 6px; justify-content: center; margin: 8px 0; }
.latice-rack .tile { width: 54px; height: 54px; font-size: 1.7rem; cursor: pointer; border: 3px solid transparent; }
.latice-rack .tile.sel { border-color: #fff; box-shadow: 0 0 0 3px #e0457b; transform: translateY(-6px); }
.latice-rack .tile.xsel { border-color: #333; opacity: 0.6; }
.latice-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.latice-tools button { margin: 0; padding: 8px 12px; font-size: 0.85rem; }
.latice-tools button:disabled { background: #bbb; }
.sticks { font-size: 1.4rem; line-height: 1.5; word-break: break-all; margin: 8px 0; }

/* онлайн тоглоом */
#lobby { max-width: 420px; width: 100%; }
.online-note { color: #c2185b; font-weight: bold; }
.room-code { font-size: 2.6rem; font-weight: bold; letter-spacing: 0.35em; padding: 14px 10px 14px 24px; margin: 10px 0; background: #fff; border-radius: 16px; color: #c2185b; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.code-input { width: 110px; text-align: center; text-transform: uppercase; letter-spacing: 0.2em; font-weight: bold; }
.room-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.7); padding: 8px 14px; border-radius: 14px; margin-bottom: 8px; font-size: 0.9rem; }
.mini-text { font-size: 0.8rem; padding: 4px 12px; margin: 0; background: #999; }
.game-info { font-weight: bold; min-height: 1.4em; }
.board3 { display: grid; grid-template-columns: repeat(3, 86px); gap: 8px; justify-content: center; margin: 12px 0; }
.cell { width: 86px; height: 86px; font-size: 2.4rem; border-radius: 14px; background: #fff; color: #c2185b; margin: 0; padding: 0; }
.c4 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: #3b5bdb; padding: 8px; border-radius: 14px; width: min(92vw, 380px); margin: 12px auto; }
.c4 .slot { aspect-ratio: 1; border-radius: 50%; background: #fff; cursor: pointer; }
.c4 .slot.r { background: #e0457b; }
.c4 .slot.y { background: #ffd43b; }
.rps-choices { display: flex; gap: 10px; justify-content: center; margin: 12px 0; }
.rps-btn { font-size: 2.2rem; padding: 14px 18px; margin: 0; background: #fff; }
.rps-btn:disabled { opacity: 0.5; }

/* бие биедээ: хоёр хэсэг */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tab, .ctab { background: transparent; color: #4a2040; border: 2px solid #e0457b; font-size: 0.95rem; }
.tab.active, .ctab.active { background: #e0457b; color: white; }
.card-wrap { display: flex; flex-direction: column; align-items: center; }
.card-wrap .card { width: 100%; }
.cards .sub { grid-column: 1 / -1; text-align: center; }
.photo-form[hidden] { display: none; }
.photo-form .check { flex-direction: row; align-items: center; gap: 8px; font-weight: normal; font-size: 0.9rem; }
.photo-form .check input { width: 18px; height: 18px; }

/* зураг нэмэх */
.photo-form {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  margin: 12px 0; padding: 16px; max-width: 420px; width: 100%;
  background: rgba(255, 255, 255, 0.7); border-radius: 18px;
  box-shadow: 0 4px 14px rgba(120, 40, 90, 0.15);
}
.photo-form h3 { margin: 0 0 2px; text-align: center; }
.photo-form input[type="text"], .photo-form input[type="date"] { width: 100%; }
.photo-form button[type="submit"] { width: 100%; margin: 4px 0 0; }
.photo-form p { margin: 0; text-align: center; font-size: 0.9rem; }

/* "Зураг сонгох" гоё товч (Choose File-ийн оронд) */
.file-pick {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border: 2px dashed #e0457b; border-radius: 12px;
  color: #c2185b; font-weight: bold; cursor: pointer; background: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-pick:hover { background: #fff0f6; }
.file-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gallery figure .mini { margin: 6px 0 0; }

/* цэс */
.menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; max-width: 420px; width: 100%; }
.menu button { font-size: 1rem; padding: 16px 10px; margin: 0; }
.menu button:last-child { grid-column: 1 / -1; }
/* өдрийн төлөвлөгөө */
#planner { max-width: 480px; width: 100%; }
.idea { background: white; border-radius: 16px; padding: 22px 18px; margin: 14px auto; font-size: 1.25rem; font-weight: bold; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); animation: pop 0.4s; }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
.choices { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 12px 0; }
.choices .card { width: 140px; }
.own { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.own input { width: 220px; max-width: 70vw; }
.saved { max-width: 420px; width: 100%; margin-top: 20px; }
.saved li small { display: block; }
/* засах, устгах: жижиг дугуй дүрс товч */
.mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin: 6px 0 0;
  font-size: 1rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); color: #4a2040; border: 1px solid #e8b4cc;
  box-shadow: 0 1px 4px rgba(120, 40, 90, 0.2);
}
.mini:hover { transform: scale(1.12); background: #ffe3ef; }

/* жагсаалт, замнал, чухал өдөр, хүсэл */
.list { list-style: none; padding: 0; margin: 16px 0; max-width: 420px; width: 100%; text-align: left; }
.list li { background: rgba(255, 255, 255, 0.7); padding: 10px 14px; border-radius: 12px; margin-bottom: 8px; }
.timeline li b, #plan li b { color: #c2185b; display: block; }
.list small { color: #8a5a7a; }
.handle { cursor: grab; touch-action: none; user-select: none; padding: 6px 8px; font-size: 1.3rem; color: #c2185b; }
.card-tools { display: flex; align-items: center; gap: 6px; }
.card-tools .mini { margin: 0; }
.ghost { position: fixed; transform: translate(-50%, -120%); pointer-events: none; z-index: 50; background: white; padding: 8px 12px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); max-width: 200px; font-size: 0.9rem; }
.dragging { opacity: 0.45; }
.tab.copied, .ctab.copied { background: #7ed957; border-color: #7ed957; color: #1d3b0f; }
.tab.drop, .ctab.drop { background: #ffd1e3; transform: scale(1.12); }
.coupon-item { display: flex; flex-direction: column; }
.coupon-state { display: block; margin-top: 4px; font-size: 0.75rem; color: #8a5a7a; text-decoration: none; }
.coupon-details { margin: 6px 0 4px 36px; padding: 10px 14px; background: rgba(255, 255, 255, 0.7); border-radius: 12px; font-size: 0.9rem; text-align: left; }
.coupon-details p { margin: 4px 0; }
.coupon-details button { margin: 6px 0 0; padding: 8px 18px; }
.coupon-details button:disabled { background: #bbb; cursor: not-allowed; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.two-cols label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: normal; }
.two-cols input { width: 100%; }
.photo-form .hint { font-size: 0.75rem; color: #8a5a7a; }
.coupon-row { display: flex; gap: 8px; align-items: center; }
.coupon-row .coupon { flex: 1; padding: 12px; }
.coupon-row .mini { margin: 0; }
.wishes li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wishes .mini { margin: 0; }
.wishes label { display: flex; align-items: center; gap: 10px; flex-direction: row; font-weight: normal; cursor: pointer; }
.wishes input { width: 20px; height: 20px; }
.wishes li.done span { text-decoration: line-through; opacity: 0.6; }

/* тоглоом */
#quizBox { max-width: 420px; width: 100%; }
.opt { display: block; width: 100%; margin: 8px 0; background: white; color: #4a2040; border: 2px solid #e0457b; }
.opt.good { background: #7ed957; border-color: #7ed957; }
.opt.bad { background: #ff8a8a; border-color: #ff8a8a; }

/* купон */
.coupons { display: flex; flex-direction: column; gap: 10px; max-width: 420px; width: 100%; margin: 12px 0; }
.coupon { background: white; color: #4a2040; border: 2px dashed #e0457b; border-radius: 12px; font-size: 1.05rem; margin: 0; }
.coupon.used { opacity: 0.5; }
.coupon.used span { text-decoration: line-through; }

/* хөгжмийн товч */
#musicBtn { position: fixed; top: 10px; right: 10px; z-index: 20; padding: 8px 12px; margin: 0; }
#musicBtn.off { background: #999; }
.back { background: transparent; color: #4a2040; border: 2px solid #4a2040; font-size: 0.95rem; margin-top: 16px; }

/* хамтдаа өнгөрүүлсэн өдөр */
.days { font-size: 1.3rem; font-weight: bold; color: #c2185b; }

/* эргэдэг карт */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 480px; width: 100%; margin: 16px 0; }
.card { height: 130px; perspective: 600px; cursor: pointer; }
.card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.card.flipped .card-inner { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 10px; border-radius: 14px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.card-front { background: #e0457b; color: white; font-size: 1.6rem; font-weight: bold; }
.card-back { background: white; transform: rotateY(180deg); font-size: 0.95rem; }

/* form */
form { display: flex; flex-direction: column; gap: 12px; align-items: center; }
label { display: flex; flex-direction: column; font-weight: bold; gap: 4px; }
#place { width: 300px; max-width: 90vw; }
input[type="text"], input[type="date"], input[type="time"], input[type="number"], select {
  font: inherit; font-size: 1rem; padding: 11px 14px; border-radius: 12px;
  border: 1px solid #e2a9c6; background: #fff; color: #4a2040;
}
input[type="text"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="number"]:focus, select:focus {
  outline: 2px solid #e0457b; outline-offset: 1px; border-color: transparent;
}
input::placeholder { color: #a98aa0; }

#noBtn.dodge { position: fixed; }
#confetti { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10; }