/* GE-dle theme: shared by the landing page and every game page.
   The palette borrows the clan quiz's interface browns and gold. A parchment
   and font pass comes later, so this stays deliberately plain. */

:root{
  --stone:#1d1913;
  --panel:#3e3529;
  --panel2:#4a4033;
  --panel3:#2e2822;
  --bevel-hi:#6a5f4c;
  --bevel-lo:#241f19;
  --line:#5d5447;

  --gold:#ff981f;
  --coin:#ffe14d;
  --text:#d8ccb4;
  --bright:#fff4d6;
  --muted:#ada189;
  --dim:#6f6552;
  --bad:#ffb4ab;

  /* Guess bands. Each pairs a fill with a light top-left bevel. */
  --win:#24561c;
  --win-hi:#5fd34a;
  --close:#5e4c0e;
  --close-hi:#e8c23a;
  --miss:#36302a;
  --miss-hi:#5d5447;

  --shadow:1px 1px 0 #000;
  --font:'Trebuchet MS',Verdana,Geneva,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(1100px 700px at 50% -15%,#3a3226 0%,rgba(0,0,0,0) 70%),
    var(--stone);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.4;
  text-shadow:var(--shadow);
}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--gold)}
main{flex:1}

.wrap{width:100%;max-width:600px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:.85rem}
.muted{color:var(--muted)}

/* ---------- Top bar ---------- */
.top{background:var(--panel);border-bottom:2px solid var(--bevel-lo)}
.top-in{display:flex;align-items:center;gap:12px;min-height:52px}
.brand{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:var(--gold);text-decoration:none;
  font-size:1.1rem;letter-spacing:1px;
}
.brand img{display:block}
.top-title{color:var(--bright);margin-left:auto;font-size:.95rem}

/* ---------- Bevelled boxes ---------- */
.panel{
  background:var(--panel);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  padding:14px;
}
.sunk{
  background:var(--panel3);
  border:2px solid;
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
}

/* ---------- Buttons and inputs ---------- */
.btn{
  min-height:44px;
  padding:8px 16px;
  background:var(--panel2);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  color:var(--bright);
  text-shadow:var(--shadow);
  letter-spacing:.4px;
}
.btn:hover:not(:disabled){filter:brightness(1.15)}
.btn:active:not(:disabled){border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-gold{background:#6b4a17;color:var(--coin)}
.btn-go{background:#2f5c22;color:#d9ffcf}
.btn-wide{width:100%}

.inp{
  min-height:44px;
  min-width:0;
  padding:9px 12px;
  background:#14110d;
  border:2px solid;
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  color:var(--bright);
  text-shadow:var(--shadow);
  /* Under 16px, iOS zooms the page when the field takes focus. */
  font-size:1.1rem;
}
.inp:focus{outline:none;border-color:var(--gold) var(--bevel-hi) var(--bevel-hi) var(--gold)}
.inp[readonly]{color:var(--muted)}

.badge{
  display:inline-block;
  padding:1px 8px;
  border:1px solid var(--bevel-lo);
  background:var(--panel3);
  font-size:.75rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  white-space:nowrap;
}

/* ---------- Mode tabs and two-way toggles ---------- */
.tabs{display:flex;gap:4px;margin:16px 0 0;border-bottom:2px solid var(--bevel-lo)}
.tabs button{
  flex:1;min-height:44px;
  background:var(--panel3);
  border:2px solid;border-bottom:none;
  border-color:var(--bevel-hi) var(--bevel-lo) transparent var(--bevel-hi);
  color:var(--muted);
  letter-spacing:.5px;
}
.tabs button[aria-selected="true"]{background:var(--panel);color:var(--gold)}

.seg{display:inline-flex}
.seg button{
  min-height:40px;min-width:72px;padding:6px 14px;
  background:var(--panel3);
  border:2px solid;
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  color:var(--muted);
}
.seg button[aria-pressed="true"]{
  background:#6b4a17;color:var(--coin);
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
}

/* ---------- Footer ---------- */
.foot{
  margin-top:32px;
  padding:16px 0 24px;
  border-top:1px solid var(--bevel-lo);
  color:var(--muted);
  font-size:.78rem;
  line-height:1.5;
}