:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }

#game { position: relative; width: 100vw; height: 100vh; background: #000; overflow: hidden; }
#gameVideo { width: 100%; height: 100%; display: block; object-fit: contain; }

/* The source video is 1920x1080. This invisible button tracks its Code button. */
#codeButton {
  position: absolute; z-index: 2; border: 0; padding: 0; cursor: pointer;
  background: transparent; left: calc(50% - min(100vw, 177.7778vh) / 2 + min(100vw, 177.7778vh) * .169);
  top: calc(50% - min(56.25vw, 100vh) / 2 + min(56.25vw, 100vh) * .006);
  width: calc(min(100vw, 177.7778vh) * .038);
  height: calc(min(56.25vw, 100vh) * .048);
  border-radius: 999px;
}
#codeButton:focus-visible { outline: 3px solid #fff; background: rgba(255,255,255,.15); }

.overlay {
  position: absolute; inset: 0; z-index: 10; display: grid; place-items: center;
  background: rgba(0,0,0,.08); backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.hidden { display: none !important; }
.code-card, .gift-card { position: relative; max-width: 100%; max-height: 100%; }
.code-card { height: min(100vh, 150vw); aspect-ratio: 2 / 3; }
.gift-card {
  width: min(64vw, 96vh, 1050px); aspect-ratio: 3 / 2;
  filter: drop-shadow(0 14px 36px rgba(0,0,0,.32));
  animation: gift-drop .3s cubic-bezier(.22, .8, .32, 1) both;
}

@keyframes gift-drop {
  from {
    transform: translateY(-110vh);
    opacity: .96;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.code-card > img { width: 100%; height: 100%; display: block; object-fit: contain; user-select: none; }
.gift-template {
  width: 100%; height: 100%; display: block; object-fit: contain; user-select: none;
  /* Hide the rectangular purple canvas outside the popup's real rounded frame. */
  clip-path: inset(.8% 7.05% 1.05% 7.05% round 5.5%);
}
.hotspot { position: absolute; border: 0; padding: 0; cursor: pointer; background: transparent; }
.hotspot:focus-visible { outline: 3px solid #fff; }

.close-code { left: 82.4%; top: 5.7%; width: 15.4%; height: 10.2%; border-radius: 18%; }
#codeInput {
  position: absolute; left: 7.45%; top: 74.75%; width: 51.4%; height: 6.25%;
  border: 0; outline: 0; border-radius: 16px; padding: 0 3%;
  background: transparent; color: #fff; font-size: clamp(18px, 3.4vh, 42px);
  font-weight: 700; text-align: center; text-shadow: 0 2px 3px #000;
}
#codeInput:focus { box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); }
.ok-code { left: 61.4%; top: 74.75%; width: 30.4%; height: 6.25%; border-radius: 16px; }
.close-gift { left: 81.4%; top: 5.1%; width: 9.2%; height: 13%; border-radius: 18%; }

.gift-title {
  position: absolute; left: 20%; top: 6.6%; width: 59%; height: 10.5%;
  display: grid; place-items: center; color: #fff; font-size: clamp(17px, 3.2vw, 43px);
  font-weight: 900; text-align: center; text-shadow: 0 0 8px #ff24ff, 0 3px 2px #53106e;
  white-space: nowrap; overflow: hidden;
}
.sender-avatar {
  position: absolute; left: 16.55%; top: 18.85%; width: 15%; height: 19.8%;
  object-fit: cover; border-radius: 50%; border: 0;
  background: #16002e; box-shadow: 0 0 9px rgba(139,29,255,.7);
}
.sender-copy {
  position: absolute; left: 34.8%; top: 21.5%; width: 42%; color: #fff;
  text-align: left; text-shadow: 0 3px 2px #000;
}
.sender-copy span { display: block; font-size: clamp(13px, 2.3vw, 34px); font-weight: 700; }
.sender-copy strong { display: block; font-size: clamp(18px, 3.2vw, 48px); font-weight: 900; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; }
.gift-image {
  position: absolute; left: 40.55%; top: 44.05%; width: 18.9%; height: 22.6%;
  object-fit: contain; padding: 1.1%; border: clamp(2px, .25vw, 4px) solid #7f24df;
  border-radius: 9%; background: radial-gradient(circle, #35105f 0%, #140326 78%);
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.5));
}
.gift-name {
  position: absolute; left: 40%; top: 67.3%; width: 19.8%; height: 5.1%; padding: 0 1%;
  display: grid; place-items: center; color: #fff; direction: auto;
  font-size: clamp(11px, 1.7vw, 26px); font-weight: 800; text-align: center;
  text-shadow: 0 2px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#settingsButton {
  position: absolute; z-index: 30; left: 18px; bottom: 18px; width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%; cursor: pointer;
  background: rgba(13,8,25,.62); color: #fff; font-size: 25px; line-height: 1;
  box-shadow: 0 5px 18px rgba(0,0,0,.35); backdrop-filter: blur(8px);
}
#settingsButton:hover { background: rgba(103,24,174,.8); transform: rotate(18deg); }
.settings-panel {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  padding: 18px; background: rgba(0,0,0,.22); backdrop-filter: blur(8px);
}
.settings-box {
  position: relative; width: min(92vw, 520px); max-height: 94vh; overflow: auto;
  padding: 25px; border: 2px solid #a238ff; border-radius: 24px;
  background: linear-gradient(145deg, rgba(24,4,49,.97), rgba(58,8,91,.97));
  box-shadow: 0 0 35px rgba(160,35,255,.55); color: #fff;
}
.settings-box h2 { margin: 0 0 4px; font-size: 26px; }
.settings-box p { margin: 0 0 18px; color: #d8c8e9; }
.settings-close { position: absolute; left: 15px; top: 12px; border: 0; background: none; color: #fff; font-size: 33px; cursor: pointer; }
.settings-box label { display: block; margin: 11px 0; font-weight: 700; }
.settings-box input[type="text"] {
  width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid #7542a1;
  border-radius: 11px; outline: none; background: #10031e; color: #fff;
}
.settings-box input[type="text"]:focus { border-color: #d06cff; box-shadow: 0 0 0 3px rgba(183,58,255,.18); }
.file-label input { display: block; width: 100%; margin-top: 7px; padding: 9px; border-radius: 10px; background: #160627; color: #ddd; }
.settings-actions { display: flex; gap: 9px; margin-top: 18px; }
.settings-actions button, .saved-codes button {
  border: 0; border-radius: 10px; padding: 11px 14px; cursor: pointer; color: #fff;
  font-weight: 800; background: linear-gradient(180deg, #9c38ff, #6512bd);
}
.settings-actions .danger { background: #76203a; }
.saved-codes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.saved-codes button { padding: 7px 11px; background: #28113d; border: 1px solid #7b3cab; }
.settings-status { min-height: 22px; margin-top: 12px; color: #66ffa3; font-weight: 700; }

@media (max-aspect-ratio: 2/3) {
  .code-card { width: 100vw; height: auto; }
}