/* ============================================================== FC77 KIOSK
   Built for a large landscape touchscreen. Everything scales from viewport
   units so the same file works on a 1080p 43" panel or a 4K 75" one.
   ======================================================================== */

:root{
  --ink:#0a0a0a; --ink-2:#161616; --ink-3:#222; --line:#333;
  --paper:#f4f4f3; --white:#fff;
  --yellow:#FFC700; --yellow-lo:#e0ae00;
  --display:'Shrikhand',Georgia,serif;
  --body:'Bitter',Georgia,serif;
  --gap:clamp(14px,1.6vmin,44px);
  --pad:clamp(20px,3vmin,93px);
  --r:clamp(14px,1.6vmin,41px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink)}
html{font-size:clamp(15px,0.55vw + 0.55vh,44px)}
body{
  font-family:var(--body); color:var(--paper);
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
img{display:block;max-width:100%}
body.hide-cursor, body.hide-cursor *{cursor:none !important}

/* --------------------------------------------------------------- screens */
.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.on{display:flex;animation:fade .28s ease both}
@keyframes fade{from{opacity:0;transform:scale(.995)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen.on{animation:none}}

/* ------------------------------------------------------------------ home */
#home{
  padding:var(--pad);
  background:
    radial-gradient(120% 80% at 50% -10%, #1e1c14 0%, transparent 60%),
    repeating-linear-gradient(90deg, #0d0d0d 0 6vw, #0a0a0a 6vw 12vw),
    var(--ink);
}
.brand{display:flex;align-items:center;gap:clamp(14px,2vmin,49px);justify-content:center;text-align:left}
.brand img{width:clamp(70px,11vmin,276px);height:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.7))}
.brand h1{
  font-family:var(--display);font-weight:400;line-height:.92;
  font-size:clamp(30px,7.2vmin,160px);color:var(--white);
}
.brand h1 em{font-style:normal;color:var(--yellow)}
.brand p{
  margin-top:.35em;font-size:clamp(11px,1.55vmin,35px);letter-spacing:.22em;
  text-transform:uppercase;color:#9a9a94;font-weight:600;
}
.welcome{
  text-align:center;margin:clamp(10px,2.2vmin,49px) auto 0;
  font-size:clamp(13px,1.85vmin,42px);color:#c9c9c2;max-width:46ch;line-height:1.45;
}
.welcome b{color:var(--yellow);font-weight:800}

/* tiles */
.tiles{
  flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;
  gap:var(--gap);margin-top:clamp(14px,2.6vmin,67px);min-height:0;
}
/* portrait panel: one column, and centre each tile's content so the icon
   is not left floating above a void */
@media (max-aspect-ratio:9/10){
  .tiles{grid-template-columns:1fr}
  .tile{justify-content:center}
  .tile .ico{margin-bottom:clamp(8px,1.4vmin,26px)}
  .tile h2{margin-top:0}
}
.tile{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--ink-2);border:2px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(16px,2.6vmin,70px);text-align:left;
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
}
.tile::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(6px,.9vmin,20px);
  background:var(--yellow);transform:scaleX(.18);transform-origin:left;
  transition:transform .22s ease;z-index:2;
}
.tile:active{transform:scale(.975);border-color:var(--yellow);background:#1d1b12}
.tile:active::after{transform:scaleX(1)}
/* ghosted club number fills the upper half so tiles do not read as empty */
.tile:not(#tile-gallery)::before{
  content:'77';position:absolute;right:-.08em;top:-.34em;z-index:0;
  font-family:var(--display);font-size:clamp(90px,20vmin,493px);line-height:1;
  color:#fff;opacity:.035;pointer-events:none;
}
.tile > *{position:relative;z-index:1}
.tile .ico{
  width:clamp(44px,7.4vmin,174px);height:clamp(44px,7.4vmin,174px);
  color:var(--yellow);margin-bottom:auto;flex:none;
}
.tile .ico svg{width:100%;height:100%;display:block}
.tile h2{
  font-family:var(--display);font-weight:400;color:var(--white);
  font-size:clamp(21px,4.1vmin,93px);line-height:1;margin-top:clamp(10px,1.8vmin,44px);
}
.tile p{margin-top:.5em;color:#a9a9a2;font-size:clamp(12px,1.7vmin,38px);line-height:1.35;max-width:26ch}
.tile .cta{
  margin-top:clamp(10px,1.7vmin,41px);display:inline-flex;align-items:center;gap:.55em;
  color:var(--yellow);font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(11px,1.4vmin,30px);
}
.tile .cta svg{width:1.1em;height:1.1em}

/* the gallery tile sits on a photo bed */
#tile-gallery{border-color:#4a4128}
#tile-gallery .bed{position:absolute;inset:0;z-index:0}
#tile-gallery .bed img{width:100%;height:100%;object-fit:cover;opacity:.45}
#tile-gallery .bed::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.42) 0%,rgba(10,10,10,.72) 45%,rgba(10,10,10,.94) 100%);
}
#tile-gallery > *:not(.bed){position:relative;z-index:1}

.foot{
  margin-top:clamp(10px,1.8vmin,44px);text-align:center;color:#5c5c57;
  font-size:clamp(10px,1.25vmin,28px);letter-spacing:.16em;text-transform:uppercase;
}

/* ------------------------------------------------------------ topbar/nav */
.topbar{
  flex:none;display:flex;align-items:center;gap:var(--gap);
  padding:clamp(12px,1.7vmin,41px) var(--pad);
  border-bottom:2px solid var(--line);background:var(--ink);
}
.back{
  display:inline-flex;align-items:center;gap:.6em;flex:none;
  background:var(--yellow);color:#000;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;border-radius:999px;
  padding:clamp(12px,1.5vmin,38px) clamp(20px,2.4vmin,61px);
  font-size:clamp(13px,1.6vmin,35px);
}
.back:active{background:var(--yellow-lo);transform:scale(.97)}
.back svg{width:1.15em;height:1.15em}
.topbar .ttl{
  font-family:var(--display);font-weight:400;color:var(--white);
  font-size:clamp(16px,2.6vmin,58px);line-height:1;
}
.topbar .sub{color:#8b8b84;font-size:clamp(11px,1.4vmin,30px);margin-top:.3em;letter-spacing:.1em;text-transform:uppercase}
.topbar .grow{flex:1;min-width:0}

/* --------------------------------------------------------------- gallery */
#gallery{background:#050505}
.stage{flex:1;position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stage img{
  position:absolute;max-width:calc(100% - clamp(90px,15vmin,377px));max-height:100%;
  width:auto;height:auto;object-fit:contain;opacity:0;transition:opacity .3s ease;
  box-shadow:0 10px 60px rgba(0,0,0,.8);
}
.stage img.on{opacity:1}
.nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:clamp(58px,9vmin,203px);height:clamp(58px,9vmin,203px);border-radius:999px;
  background:rgba(255,199,0,.94);color:#000;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 30px rgba(0,0,0,.6);
}
.nav svg{width:52%;height:52%}
.nav:active{background:var(--yellow-lo);transform:translateY(-50%) scale(.93)}
#prev{left:clamp(10px,1.8vmin,49px)}
#next{right:clamp(10px,1.8vmin,49px)}
.cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:clamp(40px,7vmin,174px) var(--pad) clamp(16px,2.2vmin,52px);
  background:linear-gradient(180deg,transparent,rgba(5,5,5,.9) 55%);
  display:flex;align-items:flex-end;gap:var(--gap);
}
.cap .tag{
  flex:none;background:var(--yellow);color:#000;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;border-radius:6px;
  padding:.4em .8em;font-size:clamp(10px,1.3vmin,29px);white-space:nowrap;
}
.cap .txt{flex:1;font-size:clamp(14px,2.05vmin,46px);line-height:1.3;color:var(--white);text-shadow:0 2px 12px #000}
.cap .num{flex:none;font-family:var(--display);color:var(--yellow);font-size:clamp(15px,2.4vmin,55px);line-height:1}
.rail{
  flex:none;display:flex;gap:clamp(6px,.9vmin,20px);overflow-x:auto;overflow-y:hidden;
  padding:clamp(10px,1.4vmin,32px) var(--pad);background:var(--ink);
  border-top:2px solid var(--line);scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail button{
  flex:none;width:clamp(56px,7.4vmin,180px);height:clamp(42px,5.6vmin,133px);
  border-radius:8px;overflow:hidden;border:3px solid transparent;opacity:.5;
  transition:opacity .15s,border-color .15s;
}
.rail button img{width:100%;height:100%;object-fit:cover}
.rail button.on{opacity:1;border-color:var(--yellow)}

/* ------------------------------------------------------------ newsletter */
#news{background:var(--ink)}
.news-body{
  flex:1;display:grid;grid-template-columns:1fr 1.15fr;gap:var(--pad);
  padding:var(--pad);min-height:0;overflow:hidden;
}
@media (max-aspect-ratio:1/1){
  .news-body{grid-template-columns:1fr}
  .pitch{display:none}
}
.pitch{display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.6vmin,38px)}
.pitch img{width:clamp(64px,10vmin,246px)}
.pitch h2{font-family:var(--display);font-weight:400;color:var(--white);font-size:clamp(24px,5vmin,113px);line-height:1}
.pitch h2 em{font-style:normal;color:var(--yellow)}
.pitch p{color:#b0b0a8;font-size:clamp(13px,1.85vmin,41px);line-height:1.45;max-width:30ch}
.pitch ul{list-style:none;display:flex;flex-direction:column;gap:.5em;margin-top:.3em}
.pitch li{display:flex;gap:.7em;align-items:flex-start;color:#d6d6cf;font-size:clamp(12px,1.7vmin,36px);line-height:1.35}
.pitch li svg{width:1.15em;height:1.15em;flex:none;color:var(--yellow);margin-top:.15em}

.form{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(10px,1.5vmin,35px);min-height:0;overflow-y:auto;
  width:100%;max-width:34em;margin-inline:auto;
}
/* the on-screen keyboard steals a lot of height — give the form the full
   width and drop the sales pitch while it is up */
#news.kb .news-body{grid-template-columns:1fr}
#news.kb .pitch{display:none}
.field label{
  display:block;text-transform:uppercase;letter-spacing:.16em;font-weight:800;
  color:#8b8b84;font-size:clamp(10px,1.25vmin,28px);margin-bottom:.45em;
}
.field input{
  width:100%;font-family:var(--body);font-size:clamp(17px,2.5vmin,58px);font-weight:600;
  color:var(--white);background:var(--ink-2);border:3px solid var(--line);
  border-radius:var(--r);padding:clamp(12px,1.8vmin,44px) clamp(14px,2vmin,46px);
  outline:none;transition:border-color .15s,background .15s;
}
.field input::placeholder{color:#55554f}
.field input:focus{border-color:var(--yellow);background:#191710}
.field.bad input{border-color:#ff5a4d}
.field .err{color:#ff8078;font-size:clamp(11px,1.4vmin,30px);margin-top:.4em;display:none}
.field.bad .err{display:block}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.5vmin,35px)}
.domains{display:flex;flex-wrap:wrap;gap:clamp(6px,.9vmin,20px);margin-top:.55em}
.domains button{
  background:var(--ink-3);border:2px solid var(--line);border-radius:999px;
  padding:.5em 1em;font-size:clamp(11px,1.45vmin,32px);color:#c9c9c2;font-weight:600;
}
.domains button:active{background:var(--yellow);color:#000;border-color:var(--yellow)}
.submit{
  margin-top:clamp(8px,1.4vmin,32px);
  background:var(--yellow);color:#000;border-radius:var(--r);
  font-family:var(--display);font-weight:400;font-size:clamp(20px,3.4vmin,78px);
  padding:clamp(16px,2.4vmin,58px);text-align:center;line-height:1;
  box-shadow:0 8px 0 var(--yellow-lo);
}
.submit:active{transform:translateY(5px);box-shadow:0 3px 0 var(--yellow-lo)}
.submit[disabled]{opacity:.5;box-shadow:0 8px 0 #555}
.privacy{color:#63635d;font-size:clamp(10px,1.3vmin,28px);text-align:center;line-height:1.4}

/* on-screen keyboard */
#kb{
  flex:none;background:#111;border-top:3px solid var(--yellow);
  padding:clamp(8px,1.1vmin,26px);display:none;gap:clamp(5px,.7vmin,16px);
  flex-direction:column;
}
#kb.on{display:flex}
#kb .krow{display:flex;gap:clamp(5px,.7vmin,16px);justify-content:center}
#kb button{
  flex:1;max-width:clamp(52px,6.4vmin,160px);
  height:clamp(40px,5.6vmin,139px);border-radius:8px;background:#2a2a2a;
  color:var(--white);font-size:clamp(15px,2.1vmin,49px);font-weight:600;
  display:flex;align-items:center;justify-content:center;border:1px solid #3a3a3a;
}
#kb button:active{background:var(--yellow);color:#000}
#kb button.wide{max-width:clamp(90px,12vmin,319px);flex:2}
#kb button.space{max-width:clamp(200px,40vmin,900px);flex:6}
#kb button.act{background:var(--yellow);color:#000;font-weight:800}
#kb button.util{
  background:#3a3a3a;font-size:clamp(12px,1.6vmin,36px);font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;
  /* Bitter has no ⌫ glyph — fall back to a UI font that does */
  font-family:system-ui,'Segoe UI',sans-serif;
}
#kb button.on{background:var(--yellow);color:#000}

/* ----------------------------------------------------- overlays / veils */
.veil{
  position:fixed;inset:0;z-index:60;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:var(--pad);gap:clamp(12px,2vmin,46px);
}
.veil.on{display:flex;animation:fade .25s ease both}

#done{background:var(--yellow);color:#000}
#done .mark{width:clamp(70px,12vmin,290px);height:clamp(70px,12vmin,290px)}
#done h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,6.4vmin,145px);line-height:1}
#done p{font-size:clamp(14px,2.1vmin,46px);max-width:32ch;line-height:1.4;font-weight:600}
#done .tick{font-size:clamp(11px,1.45vmin,32px);text-transform:uppercase;letter-spacing:.18em;font-weight:800;opacity:.65}

#leaving{background:rgba(5,5,5,.97);justify-content:flex-start}
#leaving .bar{
  width:100%;background:var(--yellow);color:#000;border-radius:var(--r);
  padding:clamp(18px,2.6vmin,64px);display:flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--display);font-size:clamp(20px,3.4vmin,78px);line-height:1;
  box-shadow:0 8px 40px rgba(255,199,0,.35);
}
#leaving .bar:active{background:var(--yellow-lo);transform:scale(.985)}
#leaving .bar svg{width:1.05em;height:1.05em}
#leaving .note{margin-top:clamp(20px,4vmin,102px);color:#c9c9c2;font-size:clamp(14px,2.1vmin,46px);max-width:36ch;line-height:1.5}
#leaving .note b{color:var(--yellow)}

/* attract loop */
#attract{background:#000;z-index:70;padding:0;justify-content:flex-end}
#attract .slides{position:absolute;inset:0;overflow:hidden}
#attract .slides img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease;
}
#attract .slides img.on{opacity:.6;animation:ken 9s linear both}
@keyframes ken{from{transform:scale(1.02)}to{transform:scale(1.13)}}
#attract .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.2) 32%,rgba(0,0,0,.82) 72%,rgba(0,0,0,.97))}
#attract .inner{position:relative;z-index:2;padding:var(--pad);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vmin,44px);width:100%}
#attract img.crest{width:clamp(80px,13vmin,319px);filter:drop-shadow(0 8px 30px #000)}
#attract h2{font-family:var(--display);font-weight:400;color:var(--white);font-size:clamp(30px,7vmin,160px);line-height:1;text-shadow:0 4px 30px #000}
#attract h2 em{font-style:normal;color:var(--yellow)}
#attract .tap{
  background:var(--yellow);color:#000;border-radius:999px;font-weight:800;
  text-transform:uppercase;letter-spacing:.2em;font-size:clamp(13px,1.9vmin,42px);
  padding:clamp(14px,2vmin,49px) clamp(30px,4.5vmin,116px);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.045);opacity:.85}}

/* admin */
#admin{background:rgba(0,0,0,.96);z-index:80;justify-content:center}
#admin .card{
  background:var(--ink-2);border:2px solid var(--line);border-radius:var(--r);
  padding:var(--pad);max-width:62ch;width:100%;text-align:left;
  display:flex;flex-direction:column;gap:1em;
}
#admin h2{font-family:var(--display);font-weight:400;color:var(--yellow);font-size:clamp(20px,3vmin,64px)}
#admin dl{display:grid;grid-template-columns:auto 1fr;gap:.55em 1.2em;font-size:clamp(12px,1.6vmin,35px)}
#admin dt{color:#8b8b84;text-transform:uppercase;letter-spacing:.1em;font-weight:800;font-size:.85em;align-self:center}
#admin dd{color:var(--white);font-weight:600;word-break:break-all}
#admin .btns{display:flex;flex-wrap:wrap;gap:.6em}
#admin .btns button{background:var(--ink-3);border:2px solid var(--line);border-radius:10px;padding:.7em 1.2em;font-weight:700;font-size:clamp(12px,1.6vmin,35px)}
#admin .btns button:active{background:var(--yellow);color:#000}
#admin .btns button.pri{background:var(--yellow);color:#000;border-color:var(--yellow)}
.ok{color:#7ee08a}
.warn{color:#ffb020}