/* assets/style.css */
*{box-sizing:border-box}
:root{--mc-green:#3aa541;--mc-dark:#0b0f0c;--mc-light:#d9f7c8;--mc-brown:#6b4f2a}
html,body{height:100%;margin:0;background:#000;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}

/* video background */
#bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#000}
.overlay{position:fixed;inset:0;background:#000;z-index:1}

.center{position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;z-index:2}
h1{font-size:clamp(1.8rem,4vw,3.5rem);text-shadow:2px 2px 0 #000,4px 4px 0 #1a1a1a;margin:0 0 .5rem}
.invite-text{opacity:.95;margin:0 0 1.25rem;max-width:60ch}

/* ===== Minecraft frame + characters overlay ===== */
:root{
  /* Thickness of the decorative frame; tweak as you like */
  --frame-pad: clamp(24px, 7vw, 96px);
}

/* Adjust stacking layers */
#bg-video { z-index: 0; }
.overlay  { z-index: 1; }

/* Fixed full-viewport frame image with transparent center */
.frame-overlay{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url("mc_border.png") center / cover no-repeat;
}

/* Bottom-left character art (fixed) */
.corner-characters{
  position: fixed;
  left: clamp(8px, calc(var(--frame-pad) * 0.35), 80px);
  bottom: clamp(8px, calc(var(--frame-pad) * 0.2), 60px);
  width: min(44vw, 520px);
  max-width: 48rem;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));
}

/* Make sure the main content sits inside the frame */
.center{
  z-index: 3;
  padding:
    calc(var(--frame-pad) + 0.75rem)
    var(--frame-pad)
    var(--frame-pad);
}

/* Modal still sits on top of everything */
.modal{ z-index: 4; }

/* Optional: tighten the big green fieldset look if needed */
fieldset.attendance{ padding: .5rem .75rem; }

/* minecraft-ish button */
.mc-btn{background:var(--mc-green);color:#102410;border:none;padding:0.9rem 1.25rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;border-radius:10px;cursor:pointer;box-shadow:0 6px 0 #1e6b25, 0 10px 18px rgba(0,0,0,.35);transition:transform .05s ease, box-shadow .05s ease}
.mc-btn:hover{transform:translateY(-1px);box-shadow:0 7px 0 #1e6b25, 0 12px 20px rgba(0,0,0,.4)}
.mc-btn:active{transform:translateY(2px);box-shadow:0 3px 0 #1e6b25, 0 8px 14px rgba(0,0,0,.3)}
.mc-btn.wide{width:100%}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;padding:1rem;z-index:3}
.modal.hidden{display:none}
.modal-inner{width:min(640px,96vw);background:#101410dd;border:1px solid #243424;border-radius:16px;padding:1rem 1rem 1.25rem;backdrop-filter: blur(8px);position:relative}
.modal-inner h2{margin:.25rem 0 1rem}
.close{position:absolute;margin-left:auto;right:1.25rem;top:1rem;background:transparent;border:none;color:#fff;font-size:2rem;cursor:pointer}

/* form */
.form{display:grid;gap:.75rem}
.form label{display:grid;gap:.4rem;text-align:left}
/* radios use natural size */
.form input[type="radio"]{
  width:auto;
  height:auto;
  margin:0 .5rem 0 0;   /* space between dot and text */
  background:none;
  border:0;
  padding:0;
  accent-color:#3aa541; /* optional: Minecraft green for supported browsers */
}

/* keep the text right next to the dot */
.form fieldset.attendance label.radio{
  display:inline-flex;   /* not full-width */
  align-items:center;
  gap:.5rem;
}

/* small vertical spacing between the two options */
.form fieldset.attendance label.radio + label.radio{
  margin-top:.4rem;
}

/* optional: tighten the green box padding a bit */
fieldset.attendance{ padding:.6rem .8rem; }fieldset.attendance{border:1px solid #294129;border-radius:10px;padding:.75rem}
legend{opacity:.85}
label.radio{display:flex;align-items:center;gap:.5rem}
.hp{display:none !important}

.container{max-width:1100px;margin:2rem auto;padding:0 1rem}
.thankyou .center{min-height:70vh}
.checkbox{display:flex;gap:.5rem;align-items:center}

/* Bigger single-line fields */
.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form select{
  padding: 0.95rem 1rem;   /* increase vertical padding */
  min-height: 52px;        /* optional: enforce a floor */
}

/* Multi-line textareas (if you add one later) */
.form textarea{
  min-height: 140px;       /* set your preferred height */
  line-height: 1.4;
  padding: 0.95rem 1rem;
  resize: vertical;        /* or: resize: none; */
}

/* iOS consistency (prevents odd default styling) */
.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form textarea{
  -webkit-appearance: none;
  appearance: none;
}

/* Make selects the same tall size on mobile */
.form select{
  /* turn off native iOS/Android styling so our height/padding apply */
  -webkit-appearance: none;
  appearance: none;

  height: 56px;                 /* target height */
  padding: 0 .95rem 0 1rem;     /* keep text away from edges */
  font-size: 16px;              /* prevents iOS zoom + helps height */
  line-height: 56px;            /* some browsers center with line-height; harmless elsewhere */

  background: #fff;
  color: #000;
  border: 1px solid #294129;
  border-radius: 10px;
  width: 100%;

  /* add a simple dropdown chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  background-size: 18px 18px;
}

/* hide default arrow in old Edge/IE (harmless elsewhere) */
.form select::-ms-expand{ display:none; }

/* Slightly larger on small phones if you want */
@media (max-width: 480px){
  .form select{ height: 60px; line-height: 60px; }
}