@font-face{font-family:"Faculty Glyphic";font-style:normal;font-weight:400;font-display:swap;src:url(faculty-glyphic.woff2) format("woff2")}

:root{
  --gold:#efdd88;
  --accent:#e5225d;
  --brown:#4a3d26;
  --brown-deep:#2a2316;
  --ink:#120f0a;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;min-height:100%}
body{
  background:var(--ink) url(bg.jpg) center top / cover no-repeat fixed;
  color:var(--gold);
  font-family:"Faculty Glyphic",Georgia,serif;font-weight:400;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:24px 16px 48px;
}
.display{
  font-family:"Faculty Glyphic",Georgia,serif;font-weight:400;
  color:var(--gold);
  -webkit-text-stroke:3px #000;
  paint-order:stroke fill;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  letter-spacing:.04em;
}
.mh-logo{width:min(320px,70vw);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}
.event-logo{width:min(440px,80vw);height:auto;margin-top:clamp(16px,5vh,56px);
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.75))}
.subtitle{margin:12px 0 22px;font-size:clamp(16px,2.4vw,22px);text-align:center}

/* the arrows in banner.webp frame 25.5%-68.7% of it: zoom 110% + shift centers that gap, .slot sits in it */
.banner{
  width:min(720px,100%);
  aspect-ratio:1222/282;
  background:url(banner.webp) 18.1% center / 110% 100% no-repeat;
  display:grid;grid-template-columns:27.9% minmax(0,1fr) 27.9%;align-items:center;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.55));
}
.slot{grid-column:2;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;
  height:40px;padding:0 12px;border:0;border-radius:6px;cursor:pointer;
  background:var(--accent);color:#fff;text-decoration:none;white-space:nowrap;
  font:400 14px "Faculty Glyphic",Georgia,serif;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 0 0 2px var(--brown) inset, 0 3px 0 var(--brown);
  transition:transform .08s, filter .15s;
}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(2px)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn:disabled{opacity:.55;cursor:default;filter:none;transform:none}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor}
.swap{display:grid}
.swap > *{grid-area:1/1}
.swap > :last-child,.alt .swap > :first-child{visibility:hidden}
.alt .swap > :last-child{visibility:visible}
.btn-big{height:44px;padding:0 16px;font-size:15px}

.msg{min-height:28px;margin:14px 0 0;font-size:19px;text-align:center}
.msg.error{color:var(--accent);-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:0 2px 8px rgba(0,0,0,.9)}
.msg.info{color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.9)}

.account{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:16px;
  text-shadow:0 2px 8px rgba(0,0,0,.9)}
.account img{width:30px;height:30px;border-radius:50%;border:2px solid var(--brown);background:var(--brown-deep)}
.account b{font-weight:400;color:#fff}

.result{display:flex;flex-direction:column;align-items:center;width:min(720px,100%);margin-top:10px}
.result:not([hidden]){animation:rise .35s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.result h2{margin:0 0 10px;font-size:clamp(20px,3vw,26px);text-align:center;outline:none}
.code{
  flex:1;min-width:0;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:rgba(42,35,22,.92);border:2px solid var(--brown);border-radius:6px;
  font:400 18px "Faculty Glyphic",Georgia,serif;
  letter-spacing:.04em;color:var(--gold);padding:6px 8px;min-height:40px;
  overflow-wrap:anywhere;
}
.code .value{user-select:all}
.code .reward{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(239,221,136,.7)}
.code.empty{font-size:15px;letter-spacing:.02em;line-height:1.25}
.code-list{display:flex;flex-direction:column;gap:12px;width:100%}
.link{margin-top:12px;background:none;border:0;color:var(--gold);text-decoration:underline;
  font:400 15px "Faculty Glyphic",Georgia,serif;cursor:pointer;opacity:.85}
.account .link{margin:0 0 0 6px;font-size:14px}
.link:hover{opacity:1}
footer{margin-top:auto;padding-top:40px;font-size:12px;color:rgba(239,221,136,.55);text-align:center}

/* phones: edge to edge, art zoomed to 170% so the gap between the arrows is 68% of the screen */
@media (max-width:680px){
  .banner{
    align-self:stretch;width:auto;margin-inline:-16px;
    aspect-ratio:1222/435;
    background-position:43% center;background-size:170% 100%;
    grid-template-columns:15.83% minmax(0,1fr) 15.83%;
  }
  .btn{height:36px;padding:0 10px;font-size:13px}
  .btn-big{height:40px;padding:0 12px;font-size:13px}
  .btn svg{width:16px;height:16px}
  .code{font-size:15px;letter-spacing:.03em;min-height:36px}
  .slot.stack{flex-direction:column}
  .slot.stack .code{flex:none;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .result:not([hidden]){animation:none}
  .btn{transition:none}
}