:root{
  color-scheme: dark;
  --bg:#05060a;
  --panel:rgba(255,255,255,0.06);
  --panel2:rgba(255,255,255,0.04);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.68);
  --ring:rgba(255,255,255,0.14);
  --focus:rgba(120,180,255,0.35);
  --shadow:0 18px 60px rgba(0,0,0,.62);
  --radius:0px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;width:100%}
html{overflow:auto}
body{overflow-x:hidden}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }


body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  background:
    radial-gradient(1100px 700px at 18% 10%, rgba(120,180,255,0.10), transparent 62%),
    radial-gradient(1000px 720px at 80% 85%, rgba(255,130,180,0.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 35%),
    var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color: transparent;
  overflow-x:hidden;
  overscroll-behavior-y:none;

}

a{color:inherit}

.wrap{
min-height: 100dvh;
height: auto;
display:grid;
  grid-template-rows:auto 1fr auto;
  gap:12px;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(12px + env(safe-area-inset-right))
    calc(12px + env(safe-area-inset-bottom))
    calc(12px + env(safe-area-inset-left));
  max-width:1200px;
  margin:0 auto;
  overflow:hidden;
}

/* Top bar */
.topbar{
  display:grid;
  grid-template-rows:auto auto;
  gap:10px;
  padding:12px 14px;
  border-radius:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  box-shadow:var(--shadow);
  border:1px solid var(--ring);
  backdrop-filter:blur(10px);
}

.topRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.subRow{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.10);
}
.subRow:empty{display:none; padding-top:0; border-top:0;}

.brand a{
  text-decoration:none;
  font-weight:750;
  letter-spacing:.2px;
  font-size:14px;
}
.brand .sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.navLink{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,0.86);
  padding:10px 10px;
  border-radius:0;
  text-decoration:none;
  font-size:13px;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease;
  border:1px solid transparent;
}
.navLink:hover{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.10)}
.navLink.active{background:rgba(120,180,255,0.16); border-color:rgba(120,180,255,0.28); color:rgba(255,255,255,0.92)}

.navSep{color:rgba(255,255,255,0.45); user-select:none; padding:0 2px}

/* Buttons / inputs */
.btn, select, input[type="number"], input[type="text"], input[type="password"]{
  border:1px solid var(--ring);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  border-radius:0;
  padding:11px 12px;
  font-size:13px;
  outline:none;
  transition:transform .08s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  min-height: 44px;
}
.btn{
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  text-decoration:none;
}
.btn:hover{background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.22)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:rgba(120,180,255,0.20); border-color:rgba(120,180,255,0.35)}
.btn.primary:hover{background:rgba(120,180,255,0.28)}
.btn.danger{background:rgba(255,120,120,0.14); border-color:rgba(255,120,120,0.28)}
.btn.danger:hover{background:rgba(255,120,120,0.20)}

select{
  background-color:#0f141e;
  border-color:rgba(255,255,255,0.20);
  color:rgba(255,255,255,0.92);
}
option{background:#0f141e; color:rgba(255,255,255,0.92)}

select:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="password"]:focus, .btn:focus, .navLink:focus{
  box-shadow:0 0 0 3px var(--focus);
  border-color:rgba(120,180,255,0.55);
}

.langSelect{min-width:86px}

main{
  border-radius:0;
  border:1px solid var(--ring);
  background:rgba(255,255,255,0.03);
  box-shadow:var(--shadow);
  overflow:visible;
  padding:10px;
  min-height:0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Generator */
.gen{
  display:grid;
  gap:12px;
}
.genTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.genTop b{font-size:14px; letter-spacing:.2px}

.controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  padding:0 2px;
  white-space:nowrap;
}
input[type="number"]{width:92px; padding:9px 10px}

.canvasWrap{
  display:grid;
  place-items:center;
  padding:6px 0;
}
canvas{
  /* Landscape preview: keep the full image visible on phones (no forced scrolling) */
  max-width: min(94vw,960px);
  max-height: 62vh;
  width: auto;
  height: auto;
  display:block;
  border-radius:0;
  box-shadow:0 10px 50px rgba(0,0,0,0.35);
  touch-action: manipulation;
  background:#000;
}

.metaRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--muted);
  font-size:12px;
}

.strip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:thin;
  -webkit-overflow-scrolling: touch;
}
.thumb{
  width:86px; height:86px;
  border-radius:0;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  overflow:hidden;
  flex:0 0 auto;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease;
}
.thumb:hover{transform:translateY(-2px); border-color:rgba(255,255,255,0.24)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* Pages */
.page{padding:10px 4px}
.page h1{margin:0 0 10px 0; font-size:20px}
.page p{margin:0 0 10px 0; color:rgba(255,255,255,0.80)}

/* Footer */
footer{
  padding:10px 12px;
  border-radius:0;
  border:1px solid var(--ring);
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.footerLeft{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:12px}
.footerRight{display:flex; gap:12px; flex-wrap:wrap; font-size:12px}
.footerRight a{color:rgba(255,255,255,0.80); text-decoration:none}
.footerRight a:hover{text-decoration:underline}

kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  padding: 2px 6px;
  border-radius:0;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

/* Modal */
.modalOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.78);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index: 50;
  backdrop-filter: blur(2px);
}
.modalOverlay.open{display:flex}
.modal{
  width:min(720px, 96vw);
  max-height: 86vh;
  overflow:auto;
  border-radius:0;
  border:1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  box-shadow: var(--shadow);
}
.modalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.modalBody{padding:14px 16px; color:rgba(255,255,255,0.82); font-size:14px; line-height:1.5}
.modalBody a{color:rgba(120,180,255,0.92)}

/* Mobile */

/* ===== Mobile: lock page scroll, scroll only inside <main> (iPhone/Android) ===== */
@media (hover: none) and (pointer: coarse){
  html,body{overflow:hidden;height:100%}
  body{position:fixed; inset:0; overflow:hidden}
  .wrap{
    height: calc(var(--vh, 1vh) * 100);
    overflow:hidden;
  }
  main{ overflow:auto; }
}

@media (max-width: 860px){
  .topRow{align-items:stretch; flex-direction:column}
  .nav{justify-content:flex-start}
  .subRow{justify-content:flex-start}
  canvas{width:94vw; height:auto}
  /* Touch-friendly sizes (prevents iOS zoom on inputs) */
  .btn, select, input[type="number"], input[type="text"], input[type="password"]{ font-size:16px; min-height:44px; }
  label{ font-size:13px; }
  /* Horizontal nav scrolling on very small screens */
  .nav{ flex-wrap:wrap; overflow-x:hidden; gap:8px; }
  .navLink{ flex:0 0 auto; padding:12px 12px; }
  /* Modal fits small screens */
  .modal{ max-height: calc(100dvh - 40px); }
  /* Gallery adapts */
  .galleryGrid{ grid-template-columns: repeat(2, 1fr); }
  .gItem img{ height:160px; }

}


/* no-radius */
:root{ --radius:0px; }


/* ===== Art Gallery ===== */
.galleryWrap{
  display:grid;
  gap:12px;
}

.galleryGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.gItem{
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.03);
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:left;
}
.gItem:hover{background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.22)}

.gItem img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  background:#000;
}

.gCap{
  padding:10px 10px;
  font-size:12px;
  color:rgba(255,255,255,0.82);
  border-top:1px solid rgba(255,255,255,0.10);
  font-variant-numeric: tabular-nums;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.emptyNote{
  color:rgba(255,255,255,0.70);
  font-size:13px;
  padding:10px;
  border:1px dashed rgba(255,255,255,0.20);
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.86);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}
.lightbox.open{display:flex;}

.lbPanel{
  width:min(1100px, 98vw);
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(10,10,12,0.92);
  box-shadow:var(--shadow);
  display:grid;
  grid-template-rows:auto 1fr auto;
}

.lbHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}

.lbBody{
  display:grid;
  place-items:center;
  padding:10px;
  min-height: 240px;
}

.lbBody img{
  width:100%;
  height:auto;
  max-height:72vh;
  object-fit:contain;
  background:#000;
}

.lbFoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border-top:1px solid rgba(255,255,255,0.10);
}

.lbCap{
  color:rgba(255,255,255,0.82);
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width: 900px){
  .galleryGrid{grid-template-columns: repeat(2, 1fr);}
  .gItem img{height:200px;}
}

@media (max-width: 560px){
  .galleryGrid{grid-template-columns: 1fr;}
  .gItem img{height:220px;}
  .lbBody img{max-height:68vh;}
}


/* Content helpers */
.modalBody a{word-break:break-all}
.page a{word-break:break-word}
.embed{margin: 12px 0 16px 0}
.sep{border:0; border-top:1px solid var(--ring); margin:16px 0}

/* ===== Contact Modal Background ===== */
#contactModal .modal{
  position:relative;
  background:#06070b;
  background-image: url("../img/contact-bg.jpg");
  background-size:cover;
  background-position:center;
}
#contactModal .modal::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.72);
  pointer-events:none;
}
#contactModal .modal > *{
  position:relative;
}

/* ===== Tool Links ===== */
.toolLinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.toolLinks .btn{
  text-decoration:none;
}

/* ===== Subtle Buttons (Contact) ===== */
.btn.subtle{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.14);
}
.btn.subtle:hover{
  background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.22);
}
#contactModal .contactBtn{ pointer-events:auto; 
  padding:10px 12px;
  min-height:40px;
}
#contactModal .contactLinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

/* Cards / forms (no rounding) */
.card{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 20px;
  max-width: 520px;
  margin: 20px auto;
}
.card h1, .card h2{
  margin: 0 0 10px 0;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.card p{ line-height: 1.7; }
.field{
  display: block;
  margin: 12px 0;
}
.field span{
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input{
  width: 100%;
  padding: 12px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--text);
  outline: none;
}
.field input:focus{
  border-color: rgba(255,255,255,0.35);
}
.formRow{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
}
.statusLine{
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* --- Page specific --- */
.golfVideo{
  width:100%;
  height:auto;
  max-height:400px;
  border:1px solid var(--line);
  background:#000;
}
@media (max-width: 640px){
  .golfVideo{ max-height: 320px; }
}
.toolPreviewWrap{ margin: 12px 0 16px; }
.toolPreview{
  display:block;
  width:100%;
  max-width:300px;
  height:auto;
  border:1px solid var(--line);
}

/* Contact modal background inside the popup box */
.modal.contactModal{
  position:relative;
  overflow:hidden;
}
.modal.contactModal .modalBg{
  position:absolute;
  inset:0;
  background:url("../img/contact-bg.jpg") center / cover no-repeat;
  filter:grayscale(1) contrast(1.05) brightness(0.65);
  opacity:0.28;
  pointer-events:none;
  z-index:0;
}

/* Contact modal: no background image */
#contactModal .modalBg{ display:none !important; }
.modal.contactModal .modalHeader,
.modal.contactModal .modalBody,
.modal.contactModal .modalActions{
  position:relative;
  z-index:1;
}
.contactBtn{ display:inline-flex; }

/* Golf page */
.golfMedia{display:grid;gap:12px;}
.golfVideo{width:100%;max-height:400px;object-fit:contain;background:#000;border:1px solid var(--line);}
.golfGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.golfGrid a{display:block;border:1px solid var(--line);background:#0b0b0b;}
.golfGrid img{display:block;width:100%;height:auto;}

/* Collapsible generator menu (index) */
.fold{
  width:100%;
}
.foldSummary{
  width:100%;
  justify-content:space-between;
  display:flex;
  align-items:center;
  gap:10px;
}
.foldSummary::-webkit-details-marker{display:none}
.foldChev{
  opacity:0.75;
  transition:transform .12s ease;
}
details[open] .foldChev{
  transform:rotate(180deg);
}
.fold > .controls{
  margin-top:10px;
  justify-content:flex-start;
}


/* Image lightbox modal (Golf) */
.modal.modalImage{
  width:min(1100px, 96vw);
}
.imageModalBody{padding:10px}
.imageModalBody img{
  width:100%;
  height:auto;
  max-height:70vh;
  object-fit:contain;
  display:block;
}


/* History strip inside generator fold */
#genFold .strip{margin-top:10px}

@media (max-width: 420px){
  .galleryGrid{ grid-template-columns: 1fr; }
  .thumb{ width:72px; height:72px; }
}

@media (max-height: 520px){
  canvas{ max-height: 58vh; }
}


.soundEmbed{max-width:980px;margin:0 auto}
.soundEmbed iframe{width:100%;max-width:980px;display:block}



/* ===== Index: center generator canvas vertically within main panel ===== */
.mainGen{display:flex; align-items:stretch; min-height:0;}
.mainGen .gen{flex:1; display:flex; flex-direction:column; min-height:0;}
.mainGen .canvasWrap{flex:1; display:flex; align-items:center; justify-content:center; padding:0; min-height:0;}
.mainGen canvas{max-width:100%; max-height:100%;}

/* ===== Mobile refinements (iOS/Android) ===== */
@supports (height: 100dvh){
  .wrap{min-height:100dvh;}
}
@media (max-width: 760px){
  /* Prevent iOS zoom-on-focus by using 16px+ controls */
  .btn, select, input, textarea{font-size:16px;}
  .nav{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .nav a, .nav button{min-height:44px;}
}

/* iOS/Android: lock page scroll, scroll only inside <main> */
body{touch-action: manipulation;}


.topbar, .topRow, .subRow, main, footer{min-width:0}