/* Reset and element defaults */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); background:var(--bg); }
body{
  margin:0; min-height:100vh; min-height:100dvh;
  font-family:var(--font-body); font-size:var(--fs-md); line-height:var(--lh-body);
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.modal-open{ overflow:hidden; }
img,svg{ max-width:100%; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:var(--lh-snug); margin:0; letter-spacing:-0.02em; text-wrap:balance; }
p{ margin:0 0 var(--s-4); text-wrap:pretty; }
a{ color:var(--green-strong); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ text-decoration-thickness:2px; }
abbr{ text-decoration:none; }
::selection{ background:var(--gold-fill); color:var(--on-gold); }
hr{ border:0; border-top:var(--bw) solid var(--border); margin:var(--s-5) 0; }

:focus{ outline:none; }
:focus-visible{ outline:2px solid transparent; box-shadow:var(--focus); border-radius:var(--r-sm); }

/* Scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:var(--r-pill); border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }

.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hidden{ display:none !important; }
.muted{ color:var(--text-muted); font-size:var(--fs-sm); }
.small{ font-size:var(--fs-sm); }
.skip-link{
  position:fixed; left:var(--s-4); top:var(--s-4); z-index:calc(var(--z-modal) + 10);
  background:var(--green); color:var(--on-green); padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  font-weight:700; transform:translateY(-200%); transition:transform var(--dur-2) var(--ease-out); text-decoration:none;
}
.skip-link:focus{ transform:translateY(0); }

/* Buttons: bare <button> elements (used by game templates) share the primary style */
button, .btn{
  font:inherit; font-weight:700; font-size:var(--fs-sm); line-height:1.2;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:44px; padding:0 var(--s-5); border:var(--bw) solid transparent; border-radius:var(--r-md);
  background:var(--green); color:var(--on-green); cursor:pointer; text-decoration:none;
  transition:transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
button:hover:not(:disabled), .btn:hover{ transform:translateY(-1px); box-shadow:var(--glow); }
button:active:not(:disabled), .btn:active{ transform:translateY(0) scale(.98); box-shadow:none; }
button:disabled{ opacity:.45; cursor:not-allowed; }
button.secondary, .btn-secondary{
  background:var(--surface); color:var(--text); border-color:var(--border-strong);
}
button.secondary:hover:not(:disabled), .btn-secondary:hover{ border-color:var(--green); box-shadow:var(--shadow-1); }
button.danger{ background:var(--error); color:#fff; }
.btn-lg{ min-height:56px; padding:0 var(--s-6); font-size:var(--fs-md); border-radius:var(--r-lg); }
.btn-gold{ background:var(--gold-fill); color:var(--on-gold); }

/* Form controls */
.field{ display:flex; flex-direction:column; gap:var(--s-1); min-width:0; }
.field.grow{ flex:1 1 140px; }
.field-label{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
input[type=text], input[type=number], select{
  font:inherit; font-size:var(--fs-sm); color:var(--text); width:100%; min-height:44px; padding:0 var(--s-3);
  background:var(--bg-raised); border:var(--bw) solid var(--border-strong); border-radius:var(--r-md);
  transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
select{ appearance:none; padding-right:2.2rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a9a90' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; }
input:hover, select:hover{ border-color:var(--green); }
input:focus-visible, select:focus-visible{ box-shadow:var(--focus); border-color:var(--green); }
input[type=checkbox]{ width:20px; height:20px; accent-color:var(--green); flex-shrink:0; }
fieldset{ border:var(--bw) solid var(--border); border-radius:var(--r-md); padding:var(--s-3); margin:0; min-width:0; }
legend{ font-size:var(--fs-xs); font-weight:700; padding:0 var(--s-2); color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.check{ display:flex; align-items:center; gap:var(--s-2); min-height:36px; font-size:var(--fs-sm); cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
@media (forced-colors: active){
  button, .btn{ border-color:ButtonText; }
  :focus-visible{ outline:2px solid Highlight; }
}