/*
 * Discord's #申請協助 channel (js/ticket.js): the ticket bot's message, the mouse clicking its buttons,
 * the 贊助 form, and the bot's reply. On the 規範 and 贊助 pages.
 */
.dc-msg { display: flex; gap: 14px; }
.dc {
  position: relative; max-width: 560px; margin: 12px 0 14px; padding: 14px 16px;
  background: #313338; color: #dbdee1; border-radius: 10px; font-size: 14.5px; line-height: 1.4;
  font-family: "gg sans", "Noto Sans TC", system-ui, sans-serif;
}
.dc-ava { width: 40px; height: 40px; border-radius: 50%; flex: none; background: #1e1f22; object-fit: contain; padding: 4px; box-sizing: border-box; }
.dc-body { min-width: 0; flex: 1; }
.dc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dc-head b { color: #f0b232; font-weight: 600; }
.dc-app { padding: 0 5px; font-size: 10.5px; font-weight: 700; color: #fff; background: #5865f2; border-radius: 4px; }
.dc-head time { font-size: 11.5px; color: #949ba4; }
.dc-embed { margin-top: 6px; padding: 10px 14px; background: #2b2d31; border-left: 4px solid #1e1f22; border-radius: 4px; }
.dc-embed b { color: #f2f3f5; }
.dc-embed p { margin: 6px 0 0; }
.dc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dc-btn {
  padding: 5px 14px; color: #fff; background: #5865f2; border-radius: 4px; font-weight: 600; font-size: 13.5px;
  transition: background 0.15s, transform 0.08s;
}
.dc-btn.hover { background: #4752c4; }
.dc-btn.press { transform: translateY(1px) scale(0.97); }
/* The bot's answer to the click: only the clicker sees it */
.dc-reply { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s, opacity 0.35s, margin-top 0.35s; }
.dc-reply.show { max-height: 160px; opacity: 1; margin-top: 12px; }
.dc-ref { display: flex; align-items: center; gap: 5px; margin: 0 0 4px 20px; font-size: 12.5px; color: #b5bac1; white-space: nowrap; overflow: hidden; }
.dc-ref::before { content: ""; width: 26px; height: 10px; margin-top: 8px; border: solid #4e5058; border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; flex: none; }
.dc-ref img { width: 16px; height: 16px; object-fit: contain; }
.dc-ref i { color: #949ba4; }
.dc-text { margin: 2px 0 0; }
.dc-chan { padding: 0 3px; color: #c9cdfb; background: rgba(88, 101, 242, 0.3); border-radius: 3px; font-weight: 500; }
.dc-only { margin: 4px 0 0; font-size: 11.5px; color: #949ba4; }
.dc-only u { color: #00a8fc; text-decoration: none; }
.dc-mouse {
  position: absolute; left: 0; top: 0; width: 16px; height: 24px; pointer-events: none;
  translate: 60% 120%; transition: translate 0.7s ease-in-out;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' shape-rendering='crispEdges'%3E%3Cpath d='M0.5 0.5v10l2.5-2.5 2 3.5 1.5-0.8-2-3.4h3.3z' fill='white' stroke='black'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
}

/* The form a button opens (贊助): over the whole message, like Discord's modal */
.dc.has-form { min-height: 430px; }
.dc-modal {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 12px;
  background: rgba(0, 0, 0, 0.6); border-radius: 10px; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;
}
.dc-modal.show { opacity: 1; visibility: visible; }
.dc-form { width: min(420px, 100%); padding: 16px; background: #313338; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.dc-form-head { display: flex; align-items: center; gap: 8px; font-size: 19.5px; color: #f2f3f5; }
.dc-form-head img { width: 26px; height: 26px; object-fit: contain; }
.dc-form-head i { margin-left: auto; font-style: normal; color: #b5bac1; }
.dc-warn { margin: 14px 0; padding: 8px 12px; font-size: 12.5px; color: #dbdee1; border: 1px solid #f0b232; border-radius: 8px; background: rgba(240, 178, 50, 0.1); }
.dc-form label { display: block; margin: 12px 0 6px; font-weight: 700; color: #f2f3f5; font-size: 13.5px; }
.dc-form label i { font-style: normal; color: #f23f43; }
.dc-input { height: 38px; padding: 0 10px; display: flex; align-items: center; background: #1e1f22; border: 1px solid #1e1f22; border-radius: 8px; transition: border-color 0.15s; }
.dc-input.focus { border-color: #5865f2; }
.dc-input span:empty + em { display: inline; }
.dc-input em { display: none; font-style: normal; color: #6d6f78; }
.dc-form-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.dc-form-btns span { padding: 9px; text-align: center; font-weight: 600; color: #fff; border-radius: 8px; background: #4e5058; transition: transform 0.08s, background 0.15s; }
.dc-form-btns .dc-submit { background: #5865f2; }
.dc-form-btns .hover { background: #4752c4; }
.dc-form-btns .press { transform: scale(0.97); }
.dc-mouse { z-index: 2; }

/* 贊助 page: the begging 夢米 by the intro (js/beg.js); feet at the bottom right of the section */
.guide-head:has(.beg-spirit) { position: relative; padding-right: 200px; min-height: 180px; }
.beg-spirit { position: absolute; right: 100px; bottom: 40px; width: 0; height: 0; cursor: pointer; }
.beg-spirit .squash, .beg-spirit .mv { position: absolute; left: 0; top: 0; }
.beg-spirit .spr { position: absolute; image-rendering: pixelated; }
.beg-sparkle {
  position: absolute; width: var(--size, 12px); height: var(--size, 12px); margin: calc(var(--size, 12px) / -2) 0 0 calc(var(--size, 12px) / -2);
  background: center / contain no-repeat; image-rendering: pixelated; pointer-events: none;
  filter: brightness(0.85) sepia(1) saturate(8) brightness(1.15); /* gold, like the game's tinted glitter */
}
@media (max-width: 560px) {
  .guide-head:has(.beg-spirit) { padding-right: 16px; padding-bottom: 150px; }
  .beg-spirit { right: 50%; }
}

/* 最後: the game's love hearts rising through the section (js/beg.js) */
#thanks { position: relative; overflow: hidden; }
.love-heart {
  position: absolute; bottom: -20px; width: var(--size, 14px); height: var(--size, 14px); pointer-events: none;
  background: url("../packs/vanilla/assets/minecraft/textures/particle/heart.png") center / contain no-repeat;
  image-rendering: pixelated; animation: love-rise 3.2s ease-out forwards;
}
@keyframes love-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--drift, 0), -180px); opacity: 0; }
}