@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');
body{font-family:'Mountains of Christmas',cursive,system-ui;background:#0f3e3e;background:radial-gradient(circle at center,#0f3e3e 0%,#051616 100%);color:#fff;margin:0;min-height:100vh;}
.wrap{max-width:600px;margin:0 auto;padding:40px 20px;position:relative;z-index:10;}
h1{font-size:3.5rem;text-align:center;color:#e43d40;text-shadow:2px 2px 0 #fff;margin:0 0 30px;}
.card{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border:2px solid #e43d40;border-radius:20px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,0.3);margin-top:20px;}
label{display:block;margin:0 0 10px;font-size:1.5rem;font-weight:700;color:#ffc107;text-shadow:1px 1px 0 #000;}
input{width:100%;padding:15px;border-radius:12px;border:2px solid #6d9773;background:#fff;color:#0f3e3e;font-size:1.5rem;box-sizing:border-box;font-family:sans-serif;}
button{width:100%;padding:15px;margin-top:20px;border-radius:12px;border:none;background:#e43d40;color:#fff;font-size:1.5rem;font-weight:700;cursor:pointer;box-shadow:0 5px 0 #a01a1d;transition:all 0.1s;font-family:'Mountains of Christmas',cursive;}
button:active{transform:translateY(5px);box-shadow:none;}
button:disabled{background:#ccc;box-shadow:none;cursor:not-allowed;transform:none;}
.error{color:#fecaca;margin-top:15px;font-weight:bold;font-size:1.2rem;background:rgba(255,0,0,0.2);padding:10px;border-radius:8px;text-align:center;}
.result{font-size:1.5rem;line-height:1.4;text-align:center;}
.big{font-size:2.5rem;color:#ffc107;text-shadow:2px 2px 0 #000;font-weight:700;margin:10px 0;}
.muted{opacity:.9;font-size:1.3rem;}
.note{margin-top:20px;padding:15px;border-radius:12px;background:rgba(0,0,0,0.3);border:1px solid #6d9773;}
a{color:#ffc107;text-decoration:underline;}
.gift-tag {
  background: #fdf6e3;
  border: 4px solid #e43d40;
  border-radius: 4px;
  padding: 20px;
  margin: 20px 0;
  color: #0f3e3e;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  position: relative;
}
/* Little hole for the tag string */
.gift-tag::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  width: 15px;
  height: 15px;
  background: #0f3e3e;
  border-radius: 50%;
  border: 2px solid #ccb;
  transform: translateY(-50%);
}
.tag-content {
  margin-left: 30px; /* Space for the hole */
  text-align: center;
}
.tag-label {
  font-family: sans-serif;
  font-size: 1.2rem;
  color: #555;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: block;
}
.tag-name {
  font-family: 'Mountains of Christmas', cursive;
  font-size: 3.5rem;
  font-weight: 700;
  color: #d32f2f;
  line-height: 1;
  display: block;
}
.tag-note {
  display: block;
  font-family: sans-serif;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
  margin-top: 8px;
}

/* Festive Decorations */
.decorations-container {
  pointer-events: none; /* Let clicks pass through */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 5;
}

.character {
  position: absolute;
  font-size: 4rem;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3));
  user-select: none;
}

.elf { animation: bounce 2s infinite ease-in-out; }
.santa { animation: sway 3s infinite ease-in-out; font-size: 5rem; }
.deer { animation: hop 1.5s infinite ease-in-out; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
@keyframes sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
@keyframes hop {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

/* Music Player */
.music-control {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  background: #e43d40;
  color: white;
  border: 4px solid white;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  padding: 0;
  font-family: 'Mountains of Christmas', cursive;
  font-size: 2.5rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 -4px 0 rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.music-control:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0,0,0,0.6), inset 0 -4px 0 rgba(0,0,0,0.2);
}
.music-control:active {
  transform: scale(0.95);
  box-shadow: 0 2px 10px rgba(0,0,0,0.4), inset 0 2px 0 rgba(0,0,0,0.2);
}
.music-inline {
  position: static;
  margin: 0 auto 20px auto;
  display: flex;
}

.snowflake{color:#fff;font-size:1em;font-family:Arial;text-shadow:0 0 1px #000;position:fixed;top:-10%;z-index:1;user-select:none;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running;}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}
@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}
.snowflake:nth-of-type(0){left:1%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}