/* iborygame.com: shared by every page. Colors are the game's own. */
:root{
  --slate:#252a27; --slate-up:#2e3430; --slate-deep:#1c201e; --rule:#3d4540;
  --ink:#e9ece6; --dim:#a9b1aa; --gold:#c99a3a; --gold-hi:#e0b552; --seal:#9e3b32;
  --display:"Cinzel", Georgia, serif; --body:"Alegreya Sans", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{background:var(--slate)}
body{margin:0;background:var(--slate);color:var(--ink);font:18px/1.6 var(--body);-webkit-text-size-adjust:100%}
a{color:var(--gold-hi);text-underline-offset:3px}
a:hover{color:#f0c96a}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto;display:block}

/* top bar */
.bar{display:flex;align-items:center;gap:20px;padding:14px 24px;max-width:1120px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 1.35rem var(--display);letter-spacing:.04em}
.brand img{width:34px;height:34px;image-rendering:pixelated;border-radius:6px}
.bar nav{margin-left:auto;display:flex;gap:22px;font-size:1rem}
.bar nav a{color:var(--dim);text-decoration:none}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--ink)}

/* buttons */
.btn{display:inline-block;font:700 1.05rem var(--body);padding:12px 22px;border-radius:8px;text-decoration:none;border:2px solid var(--gold);cursor:pointer}
.btn.main{background:var(--gold);color:#1c201e}
.btn.main:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:#1c201e}
.btn.quiet{background:transparent;color:var(--ink)}
.btn.quiet:hover{background:rgba(201,154,58,.14);color:var(--ink)}
.btn.seal{background:var(--seal);border-color:var(--seal);color:#fff;width:100%}
.btn.seal:hover{background:#b44539;border-color:#b44539;color:#fff}
.btn:disabled{opacity:.6;cursor:default}

/* reading pages (privacy, account) */
.page{max-width:720px;margin:0 auto;padding:24px 24px 80px}
.page h1{font:700 clamp(1.9rem,5vw,2.5rem)/1.15 var(--display);margin:24px 0 6px}
.page h2{font:700 1.25rem/1.3 var(--display);margin:36px 0 8px;color:var(--gold-hi)}
.page p,.page li{max-width:68ch}
.page .when{color:var(--dim);margin:0 0 20px}
.note{background:var(--slate-up);border-left:4px solid var(--gold);border-radius:0 8px 8px 0;padding:14px 18px;margin:18px 0}
.page table{width:100%;border-collapse:collapse;font-size:.95rem;margin:10px 0}
.page th,.page td{border-bottom:1px solid var(--rule);padding:9px 8px 9px 0;text-align:left;vertical-align:top}
.page th{color:var(--dim);font-weight:500}
.form label{display:block;color:var(--dim);font-size:.95rem;margin:14px 0 5px}
.form input{width:100%;font:inherit;padding:11px 13px;border-radius:8px;border:1px solid #57605a;background:var(--slate-deep);color:var(--ink)}
.msg{min-height:1.6em;margin-top:12px}
.bad{color:#ff9a8a}.good{color:#8fd19e}

/* footer */
.foot{border-top:1px solid var(--rule);margin-top:40px}
.foot div{max-width:1120px;margin:0 auto;padding:22px 24px 40px;display:flex;flex-wrap:wrap;gap:10px 26px;color:var(--dim);font-size:.95rem}
.foot a{color:var(--dim)}
.foot span{margin-left:auto}

@media (max-width:560px){
  body{font-size:17px}
  .bar{padding:12px 16px;gap:12px}
  .bar nav{gap:16px}
  .bar nav .wide{display:none}
  .page{padding:16px 16px 60px}
  .foot div{padding:20px 16px 34px}
  .foot span{margin-left:0;width:100%}
}