@font-face { font-family: MinecraftJP; src: url('../assets/font-jp.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: MinecraftEN; src: url('../assets/font-en.ttf') format('truetype'); font-display: swap; }

:root {
  --ink: #f5f2dc;
  --muted: #bdc7b6;
  --green-4: #62c543;
  --green-5: #3c9c2c;
  --green-6: #236b20;
  --deep: #142c1c;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--deep); }
body { color: var(--ink); font-family: MinecraftJP, sans-serif; }
.invite-page { isolation: isolate; position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; min-height: 100svh; overflow: clip; background: linear-gradient(180deg, rgba(4, 16, 23, .62) 0%, rgba(4, 18, 12, .68) 52%, rgba(3, 13, 9, .76) 100%), #142c1c url('../assets/Wallpaper.png') center center / cover no-repeat; }
.invite-page::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, .18) 100%); }
.content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3vh 20px 7vh; text-align: center; }
.content::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .46) 0%, rgba(0, 0, 0, .28) 38%, rgba(0, 0, 0, .1) 68%, transparent 100%); }
.content > * { position: relative; z-index: 1; }
.brand-mark { width: min(440px, 72vw); margin-bottom: clamp(12px, 2.2vh, 25px); filter: drop-shadow(0 10px 0 rgba(0,0,0,.28)) drop-shadow(0 0 26px rgba(105, 209, 78, .18)); }
.brand-mark img { display: block; width: 100%; height: auto; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; color: #c1f39e; font: 11px/1 MinecraftEN, sans-serif; letter-spacing: .2em; text-shadow: 2px 2px 0 rgba(0, 0, 0, .75); }
.eyebrow span, .footer-block { display: inline-block; width: 28px; height: 3px; background: var(--green-5); box-shadow: 0 2px 0 var(--green-6); }
h1 { max-width: 760px; margin: 0; color: #fffce9; font-size: clamp(23px, 3.4vw, 44px); font-weight: 400; line-height: 1.35; letter-spacing: .04em; text-shadow: 3px 3px 0 rgba(0,0,0,.78); }
h1 strong { color: #8ee56c; font-weight: 400; }
.tagline { margin: clamp(15px, 2.1vh, 25px) 0 0; color: #f5f7e9; font-family: MinecraftJP, sans-serif; font-size: clamp(15px, 1.6vw, 20px); letter-spacing: .12em; text-shadow: 2px 2px 0 rgba(0,0,0,.78); }
.tagline.is-changing { animation: tagline-fade 600ms ease-in-out; }
.intro { margin: 11px 0 0; color: #e3eadc; font-size: clamp(11px, 1.2vw, 14px); line-height: 1.9; letter-spacing: .08em; text-shadow: 2px 2px 0 rgba(0,0,0,.72); }
.mobile-only { display: none; }
.discord-button {
  --btn-border: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(460px, calc(100vw - 48px));
  min-height: 78px;
  margin-top: clamp(22px, 3.4vh, 35px);
  padding: 14px 54px;
  border-radius: 0;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  text-decoration: none;
  box-shadow: none;
  transition: none;

  /* 非ホバー時（設定ボタンのデザイン） */
  border: var(--btn-border) solid #111111;
  background-color: #c6c6c6;
  background-image:
    linear-gradient(to right, #f7f7f7, #f7f7f7),
    linear-gradient(to bottom, #f7f7f7, #f7f7f7),
    linear-gradient(to right, #646464, #646464),
    linear-gradient(to bottom, #646464, #646464);
  background-size:
    calc(100% - var(--btn-border)) var(--btn-border),
    var(--btn-border) calc(100% - var(--btn-border)),
    calc(100% - var(--btn-border)) var(--btn-border),
    var(--btn-border) calc(100% - var(--btn-border));
  background-position:
    top left,
    top left,
    bottom right,
    bottom right;
  background-repeat: no-repeat;
  color: #4c4c4c;
  text-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .discord-button:hover {
    border-color: #ffffff;
    background-color: #248208;
    background-image:
      linear-gradient(to right, #37c426, #37c426),
      linear-gradient(to bottom, #37c426, #37c426),
      linear-gradient(to right, #025000, #025000),
      linear-gradient(to bottom, #025000, #025000);
    color: #ffffff;
    text-shadow: 2px 2px 0 #025000;
  }
  .discord-button:hover .button-copy small {
    opacity: 1;
    text-shadow: 1px 1px 0 #025000;
  }
}
.discord-button:active {
  transform: translateY(2px);
}
.discord-button:focus-visible {
  outline: 3px solid #d7f56c;
  outline-offset: 5px;
}
.button-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.button-copy small {
  font: 9px/1 MinecraftEN, sans-serif;
  letter-spacing: .13em;
  opacity: .85;
}
.button-copy b {
  font-family: MinecraftJP, sans-serif;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 400;
  letter-spacing: .06em;
}
.brand-word {
  font-family: MinecraftEN, sans-serif;
}
.button-arrow {
  position: absolute;
  right: 22px;
  font: 26px/1 MinecraftJP, sans-serif;
}
.side-items { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.item { position: absolute; width: clamp(50px, 9vw, 110px); height: auto; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 14px 5px rgba(0,0,0,.27)); opacity: .92; }
.side-items--left .item--grass { left: 6vw; top: 18%; animation: float-a 4.3s ease-in-out infinite; }
.side-items--left .item--pickaxe { left: 13vw; top: 49%; width: clamp(60px, 10vw, 125px); animation: float-b 4.8s ease-in-out -1.2s infinite; }
.side-items--left .item--sapling { left: 5vw; bottom: 14%; width: clamp(45px, 7vw, 82px); animation: float-c 4.1s ease-in-out -2.2s infinite; }
.side-items--left .item--tnt { left: 20vw; bottom: 20%; width: clamp(42px, 6vw, 75px); animation: float-a 5.2s ease-in-out -3s infinite; }
.side-items--right .item--emerald { right: 7vw; top: 17%; animation: float-c 4.6s ease-in-out -.8s infinite; }
.side-items--right .item--apple { right: 14vw; top: 45%; width: clamp(52px, 8vw, 100px); animation: float-a 4.2s ease-in-out -2.4s infinite; }
.side-items--right .item--table { right: 5vw; bottom: 13%; width: clamp(55px, 8vw, 100px); animation: float-b 4.9s ease-in-out -1.5s infinite; }
.side-items--right .item--carrot { right: 22vw; bottom: 22%; width: clamp(42px, 6vw, 75px); animation: float-c 4.4s ease-in-out -3.5s infinite; }
@keyframes float-a { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-17px) rotate(4deg); } }
@keyframes float-b { 0%,100% { transform: translateY(0) rotate(7deg); } 50% { transform: translateY(14px) rotate(-6deg); } }
@keyframes float-c { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-22px) rotate(-4deg); } }
@keyframes tagline-fade { 0%, 100% { opacity: 1; } 45% { opacity: 0; } }
@media (max-width: 620px) {
  .content { padding: 2vh 16px 8vh; }
  .content::before { inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .3) 42%, rgba(0, 0, 0, .1) 72%, transparent 100%); }
  .brand-mark { width: min(340px, 82vw); margin-bottom: 13px; }
  .eyebrow { margin-bottom: 10px; font-size: 8px; gap: 7px; }
  .eyebrow span { width: 17px; height: 2px; }
  h1 { font-size: clamp(19px, 6vw, 29px); }
  .tagline { font-size: 13px; letter-spacing: .08em; }
  .intro { font-size: 10px; }
  .mobile-only { display: initial; }
  .discord-button { --btn-border: 3px; margin-top: 21px; padding: 15px 17px 18px; gap: 12px; }
  .button-copy b { font-size: 14px; }
  .button-copy small { font-size: 7px; }
  .side-items--left .item--pickaxe, .side-items--right .item--apple { opacity: .5; }
}
@media (max-height: 680px) and (min-width: 621px) {
  .content { justify-content: center; padding-top: 2vh; padding-bottom: 5vh; }
  .brand-mark { width: 310px; margin-bottom: 10px; }
  .tagline { margin-top: 12px; }
  .discord-button { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }