.brand-mark {border: 0; flex: 0 0 38px;}
@media (any-pointer: fine) {
  html, body, dialog {cursor: url("assets/tea-leaf-cursor.svg") 3 3, auto;}
  a, button, [role="button"] {cursor: url("assets/tea-leaf-pointer.svg") 3 3, pointer;}
  textarea, input {cursor: url("assets/tea-leaf-cursor.svg") 3 3, text;}
}
.share-section {max-width: 964px; margin: 12px auto 42px; padding-top: 28px; border-top: 1px solid var(--line);}
.share-intro {text-align: center;}
.share-intro h2 {margin: 14px 0 10px; color: var(--jade);}
.share-intro > p:last-child {color: var(--muted); font-size: 15px; margin-bottom: 25px;}
.share-card {display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; padding: 25px; border: 1px solid var(--line); background: #0c231d;}
.button-preview {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;}
.button-preview img {display: block; width: 88px; height: 31px; image-rendering: pixelated;}
.button-preview > span {font-size: 12px; color: var(--muted);}
.share-code label {display: block; margin-bottom: 10px; font-size: 15px; color: var(--paper);}
.share-code textarea {display: block; width: 100%; min-height: 100px; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 0; background: var(--ink); color: var(--jade); font: 14px/1.6 "DungGeunMo", monospace; overflow-wrap: anywhere;}
.share-code textarea:focus-visible {outline: 1px solid var(--gold); outline-offset: 3px;}
.share-code .enter-button {font-size: 15px; min-height: 38px; margin-top: 12px;}
#copy-status {min-height: 1.5em; margin: 8px 0 0; color: var(--muted); font-size: 13px;}
.friends-section {margin-top: 24px; padding: 22px 24px; border: 1px solid var(--line); background: #0c231d;}
.friends-section h2 {margin: 0 0 18px; text-align: center; font-family: "DungGeunMo", monospace; font-size: 20px; color: var(--jade);}
.friends-empty {margin: 0; text-align: center; font-size: 14px; color: var(--muted);}
.friends-window {overflow-x: auto; padding: 7px 0; scrollbar-width: thin; scrollbar-color: var(--line) var(--ink);}
.friends-window:focus-visible {outline: 1px solid var(--gold); outline-offset: 4px;}
.friends-track {display: flex; gap: 16px; width: max-content;}
.friends-list {display: flex; flex: none; gap: 16px; margin: 0; padding: 0; list-style: none;}
.friends-list li, .friends-list a, .friends-list img {display: block; width: 88px; height: 31px; flex: none;}
.friends-list img {image-rendering: pixelated; object-fit: contain; font-size: 11px;}
.friends-list a:focus-visible {outline-offset: 3px;}
@media(max-width:700px) {
  .share-card {grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px 16px;}
  .share-section {margin-bottom: 30px;}
}
.brand-mark img {width: 38px; height: 38px; image-rendering: pixelated;}
.dragon-frame .seal {font-size: 22px; line-height: 1; padding: 6px;}
.enter-button {background: #17372c; color: #d3ddbc; border: 1px solid #89936b; box-shadow: none; min-height: 46px; gap: 23px; padding: 0 26px; transition: background-color .15s, border-color .15s, color .15s;}
.enter-button:hover {background: #214638; border-color: #bdba8b; color: #f0ead0; transform: none; box-shadow: none;}
.enter-button:active {background: #10291f; border-color: #d9cda1; transform: none; box-shadow: none;}
.enter-button:focus-visible {outline: 1px solid #dfd5a9; outline-offset: 4px;}
.moonlit-scene {position: relative; overflow: hidden; isolation: isolate;}
.dragon-frame .scene-background {display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: contain;}
.character-layer {position: absolute; inset: 0; pointer-events: none;}
.dragon-frame .character-sprite {position: absolute; display: block; height: auto; aspect-ratio: auto; object-fit: contain; image-rendering: pixelated;}
.dragon-frame .matchoi-sprite {left: 12%; top: 20%; width: 28%; animation: matchoi-float 5s ease-in-out infinite;}
@keyframes matchoi-float {
  0%, 100% {transform: translateY(2%);}
  50% {transform: translateY(-4%);}
}
.sky-effects {position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;}
.moon-glow {position: absolute; left: 50.3%; top: 38.5%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #fff3be88 0%, #ffebae60 27%, #e9d99425 47%, transparent 70%); opacity: .4; animation: moon-shimmer 7s ease-in-out infinite;}
.star-glow {position: absolute; left: var(--x); top: var(--y); width: clamp(4px, .8vw, 11px); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .25; filter: drop-shadow(0 0 4px #ffe6a0); animation: star-shimmer 5s ease-in-out var(--delay) infinite;}
.star-glow::before {content: ""; position: absolute; inset: 0; background: #fff8da; clip-path: polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);}
@keyframes moon-shimmer {0%,100% {opacity: .2;} 50% {opacity: .7;}}
@keyframes star-shimmer {0%,100% {opacity: .12;} 45% {opacity: .95;} 65% {opacity: .3;}}
@media(max-width:700px) {
  .brand-mark {flex-basis: 32px;}
  .brand-mark img {width: 32px; height: 32px;}
  .dragon-frame .art-caption {left: 13px; bottom: 13px;}
  .dragon-frame .art-caption span:first-child {font-size: 11px;}
  .dragon-frame .seal {right: 12px; bottom: 12px; font-size: 16px; padding: 4px;}
}