/* Shared seaside palette and reading surfaces for the entrance, maps and all records. */
:root {
  color-scheme: light dark;
  --site-paper: light-dark(#faf6e9, #242a29);
  --site-ink: light-dark(#284b48, #e1ebe1);
  --site-muted: light-dark(#5a7068, #b1c2b5);
  --site-line: light-dark(#d5dfcd, #47594d);
  --site-green: light-dark(#e7edda, #34443a);
  --site-sea: light-dark(#d2eae4, #223e41);
  --site-ocean: light-dark(#99c7c2, #426c70);
  --site-sand: light-dark(#e5d5a6, #a79566);
  --site-mincho: "Hiragino Mincho ProN", "Yu Mincho", serif;
  --site-gothic: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --ground: var(--site-paper); --bg: var(--site-paper); --paper: var(--site-paper);
  --ink: var(--site-ink); --muted: var(--site-muted); --rule: var(--site-line); --line: var(--site-line);
  --accent: var(--site-ink); --accent-soft: var(--site-green);
  --land: var(--site-green); --land-edge: var(--site-line);
  --sea: var(--site-sea); --sea-line: var(--site-ocean);
  --mincho: var(--site-mincho); --gothic: var(--site-gothic); --mono: var(--site-gothic);
}
body { background: var(--site-paper); color: var(--site-ink); }
.site-header { max-width:1080px; margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--site-line); }
.site-brand { display:flex; align-items:center; gap:8px; color:var(--site-ink); text-decoration:none; font:500 21px/1.4 var(--site-mincho); letter-spacing:.1em; white-space:nowrap; }
.site-brand span { font:22px/1.2 serif; }
.site-header nav { display:flex; gap:18px; margin:0; font:400 12px/1.7 var(--site-gothic); flex-wrap:wrap; }
.site-header nav a { color:var(--site-ink); text-decoration:none; padding:4px 0; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--site-ink); outline-offset:4px; }
/* The map keeps its replay and drag controls in a paper-framed sea. */
.island-map .site-header { height:68px; }
.island-map .app { height:calc(100dvh - 68px); padding:12px; background:radial-gradient(ellipse at 50% 35%,var(--site-paper),var(--site-sea)); }
.island-map .frame { height:calc(100dvh - 92px); background:var(--site-ocean); border:1px solid var(--site-line); border-radius:14px; box-shadow:0 5px 22px color-mix(in srgb,var(--site-ink) 10%,transparent); }
.hud { background:color-mix(in srgb,var(--site-paper) 96%,transparent); color:var(--site-ink); border:1px solid var(--site-line); border-radius:8px; font-family:var(--site-gothic); box-shadow:0 2px 8px color-mix(in srgb,var(--site-ink) 10%,transparent); }
.title h1 { display:grid; gap:.3cqw; font-family:var(--site-mincho); font-size:clamp(14px,4.2cqw,22px); font-weight:500; overflow-wrap:anywhere; }
.title h1 small { font:400 clamp(11px,2.8cqw,15px)/1.5 var(--site-gothic); color:var(--site-muted); letter-spacing:.08em; }
.title .dateline { gap:0 1.3cqw; font-size:clamp(11px,2.8cqw,15px); }
.title .dateline span { white-space:nowrap; }
.title .dateline,.title .dateline b,.win .at,.clock small { color:var(--site-muted); }
.menu:hover,.words:hover,.play:hover { background:var(--site-green); }
.menu:focus-visible,.words:focus-visible,.play:focus-visible { background:var(--site-green); outline:2px solid var(--site-ink); outline-offset:2px; }
.words[aria-pressed="false"] { color:var(--site-muted); }
.win { font-family:var(--site-gothic); }
.win b { color:color-mix(in srgb,var(--c) 55%,var(--site-ink)); font-weight:500; }
.win .news { color:var(--site-ink); }
.controls { border-top:1px dashed var(--site-line); }
.play { border:1px solid var(--site-line); background:var(--site-green); color:var(--site-ink); border-radius:6px; }
#scene { accent-color:var(--site-ink); }
.daycap { font-family:var(--site-mincho); }
/* Newspaper, diary, board and accounts share the entrance's warm paper. */
dialog.sheet {
  --paper:var(--site-paper); --ink:var(--site-ink); --muted:var(--site-muted); --rule:var(--site-line);
  --accent:var(--site-ink); --accent-soft:var(--site-green); --land:var(--site-green); --land-edge:var(--site-line);
  --mincho:var(--site-mincho); --mono:var(--site-gothic);
  font-family:var(--site-gothic); background:var(--site-paper); border:1px solid var(--site-line);
  border-radius:12px; width:min(680px,calc(100% - 28px)); height:fit-content; box-shadow:0 14px 50px color-mix(in srgb,var(--site-ink) 20%,transparent);
}
dialog.sheet::backdrop { background:color-mix(in srgb,var(--site-ink) 45%,transparent); }
.sheet-inner { padding:22px 26px 30px; gap:18px; }
.sheet-top { top:-22px; margin:-22px -26px 0; padding:15px 26px; background:var(--site-sea); border-bottom:1px solid var(--site-line); }
.sheet-top .label { font:400 12px/1.5 var(--site-gothic); letter-spacing:.1em; }
.sheet .read,.sheet .days select,.sheet .people button,.sheet .issues button,.sheet .see,.sheet .close { font-family:var(--site-gothic); }
.sheet a { color:var(--site-ink); text-underline-offset:.2em; }
.sheet .read,.sheet .days select,.close { border:1px solid var(--site-line); background:var(--site-paper); color:var(--site-ink); }
.close { font:400 12px/1.2 var(--site-gothic); padding:9px 13px; }
.sheet .read:hover,.sheet .people button:hover { background:var(--site-green); }
.sheet h2 { font:500 clamp(23px,5vw,30px)/1.6 var(--site-mincho); }
.sheet h3 { font:500 14px/1.5 var(--site-gothic); }
.edition { font:500 14px/1.6 var(--site-mincho); }
.kicker { font-family:var(--site-gothic); border-bottom:2px solid var(--site-ink); line-height:1.5; flex-wrap:wrap; }
.sheet .prose { font:400 16px/2.1 var(--site-mincho); }
.person .job,.entry .when { font-family:var(--site-gothic); }
.entry { border-top:1px solid var(--site-line); padding-top:18px; }
.entry p { font:400 15px/2 var(--site-mincho); }
.face { border-radius:50%; font-family:var(--site-gothic); }
.people .dot,.ledger .dot { font-family:var(--site-gothic); border-radius:50%; }
.notices li,.ledger li { background:var(--site-green); border:1px solid var(--site-line); border-radius:8px; }
.empty { line-height:1.9; }
/* Every completed island uses the same site header and postcard-like record panels. */
.island-archive { background:var(--site-paper); font-family:var(--site-gothic); }
.island-archive main { padding-top:32px; }
.island-archive main>nav { padding-bottom:18px; border-bottom:1px solid var(--site-line); margin-bottom:30px; font-size:12px; }
.island-archive h1,.island-archive h2 { color:var(--site-ink); font-family:var(--site-mincho); font-weight:500; letter-spacing:.05em; }
.island-archive .eyebrow { letter-spacing:.12em; }
.island-archive article { background:var(--site-green); border:1px solid var(--site-line); border-radius:45px 45px 9px 9px; padding-top:32px; }
.island-archive article::before { content:"～　～　～"; display:block; color:var(--site-muted); font:400 17px/1.4 serif; padding-bottom:14px; }
.island-archive section { background:var(--site-paper); border:1px solid var(--site-line); border-radius:10px; }
.island-archive .numbers { background:var(--site-sea); padding:0 20px; border-radius:10px; }
.island-archive .numbers div { border:0; }
.island-archive .primary { background:var(--site-ink); color:var(--site-paper); }
.island-archive .residents a { background:var(--site-green); border:0; border-radius:8px; padding:14px; }
.island-archive footer { background:var(--site-sea); padding:24px; border-radius:40% 40% 0 0/12px 12px 0 0; line-height:1.9; }
/* Reuse the same tokens on the existing entrance. */
#island-home-seaside .sh-page { --sh-paper:var(--site-paper); --sh-ink:var(--site-ink); --sh-muted:var(--site-muted); --sh-line:var(--site-line); --sh-green:var(--site-green); --sh-sea:var(--site-sea); --sh-ocean:var(--site-ocean); --sh-sand:var(--site-sand); }
@media(max-width:600px) {
  .site-header { padding:14px 16px; gap:10px; }
  .site-brand { font-size:18px; letter-spacing:.05em; }
  .site-header nav { gap:12px; font-size:11px; }
  .title .dateline { display:grid; grid-template-columns:auto auto; }
  .island-map .app { padding:8px; }
  .island-map .frame { height:calc(100dvh - 84px); }
  .sheet-inner { padding:18px 18px 24px; }
  .sheet-top { top:-18px; margin:-18px -18px 0; padding:14px 18px; }
  .island-archive article { border-radius:28px 28px 8px 8px; }
}