/* Plain pages (privacy, terms, stats): the pier's colours and type on a calm reading layout. */
:root {
  --night: #0e2235; --harbor: #17405a; --candy: #ff5c8a; --butter: #ffd166; --cream: #fff4e0;
  --glass: #5cc8b4; --ink: #3a4a5e; --line: #e6d7bb; --paper: #fffaf0;
  --f-display: "Lilita One", "Fredoka", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--night); font: 600 17px/1.6 var(--f-body); }
.top { background: linear-gradient(180deg, #ffd166, #ff7a59 70%, #ff5c8a); padding: 28px max(16px, env(safe-area-inset-left, 0px)) 0; }
.top a.home { display: inline-flex; align-items: center; gap: 10px; color: var(--night); text-decoration: none; font: 400 1.4rem/1 var(--f-display); }
.top a.home img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 0 3px var(--cream); }
.top h1 { margin: 20px 0 0; font: 400 clamp(2.2rem, 8vw, 3rem)/1.05 var(--f-display); color: var(--cream); text-shadow: 0 4px 0 var(--candy), 0 7px 0 rgba(14, 34, 53, 0.25); }
.top p { margin: 6px 0 0; padding-bottom: 26px; font-weight: 800; }
.awning { height: 22px; background: repeating-linear-gradient(90deg, var(--candy) 0 30px, #fff 30px 60px); }
main { max-width: 720px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 18px; }
section { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; box-shadow: 0 5px 0 rgba(120, 80, 40, 0.12); }
h2 { margin: 0 0 6px; font: 400 1.45rem/1.2 var(--f-display); }
p, li { color: var(--ink); max-width: 66ch; }
p { margin: 8px 0 0; }
ul { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; }
a { color: #c23a64; }
button {
  font: 400 1.1rem/1 var(--f-display); letter-spacing: 0.02em; border: 0; border-radius: 999px; padding: 13px 20px 11px; min-height: 48px;
  cursor: pointer; background: var(--night); color: var(--cream); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
}
button.danger { background: #e63946; color: #fff; box-shadow: 0 5px 0 #a3222c; }
button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
button:disabled { opacity: 0.5; cursor: default; }
.row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.note { font-size: 0.95rem; }
.status { font-weight: 900; color: var(--night); }
:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; }
footer { text-align: center; color: var(--ink); font-size: 0.9rem; padding-bottom: 32px; }