/* Chronex Works site: matches CHRONEX — night-blue leather, antique gold, ivory text, mincho type.
   TetoRisu blocks keep their own warm paper look through .warm. */
:root {
  --night: #0e1325;
  --leather: #161c33;
  --leather-2: #1d2541;
  --ivory: #f2ead8;
  --soft: #b8ab90;
  --gold: #c9a45c;
  --gold-hi: #f0d998;
  --gold-lo: #8a6a2e;
  --line: rgba(201, 164, 92, .38);
  --crystal: #a9c4ff;
  --radius: 10px;
  --font: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --latin: "Cinzel", "Shippori Mincho B1", serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ivory); font-family: var(--font); line-height: 1.9; letter-spacing: .02em;
  background: radial-gradient(1200px 600px at 50% -10%, #1f2a52 0%, rgba(14, 19, 37, 0) 70%), var(--night);
}
a { color: var(--gold-hi); }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--leather); color: var(--ivory); padding: 6px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }

header.site { position: sticky; top: 0; z-index: 10; background: rgba(14, 19, 37, .88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; flex-wrap: wrap; }
.brand { font-family: var(--latin); font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: .14em; color: var(--gold-hi); }
.brand span { color: var(--ivory); font-weight: 600; }
nav.main ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
nav.main a { display: block; padding: 8px 12px; border-radius: 6px; text-decoration: none; font-size: .95rem; color: var(--ivory); }
nav.main a:hover, nav.main a[aria-current="page"] { color: var(--gold-hi); box-shadow: inset 0 -2px 0 var(--gold); }

main { padding: 36px 0 64px; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.4; margin: 0 0 14px; color: var(--gold-hi); font-weight: 700; }
h2 { font-size: 1.35rem; margin: 48px 0 14px; color: var(--gold-hi); font-weight: 700; display: flex; align-items: center; gap: 12px; }
h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.hero h2::after, h2:has(> img)::after { display: none; }
h3 { font-size: 1.1rem; margin: 0 0 4px; }
p.lead { color: var(--soft); margin: 0 0 24px; }
.latin { font-family: var(--latin); letter-spacing: .12em; }

/* Gold-framed leather surfaces, like the in-game Gilded UI */
.panel, .card, .hero {
  background: linear-gradient(180deg, var(--leather-2), var(--leather));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 0 0 3px rgba(14, 19, 37, .7), inset 0 0 0 4px rgba(201, 164, 92, .18), 0 10px 30px rgba(0, 0, 0, .35);
}
.panel { padding: 22px 26px; }
.panel + .panel { margin-top: 16px; }
ul.points { padding-left: 1.2em; margin: 8px 0 0; }
ul.points li::marker { color: var(--gold); }

.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.btn {
  display: inline-block; padding: 11px 24px; border-radius: 6px; text-decoration: none; font-weight: 700; color: #2a1d08;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px #5b4419, 0 4px 14px rgba(0, 0, 0, .35);
}
.btn:hover { filter: brightness(1.08); }
.btn.sub { background: transparent; color: var(--gold-hi); box-shadow: inset 0 0 0 1.5px var(--gold); }
.btn.soon { background: rgba(255, 255, 255, .06); color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { padding: 18px; display: flex; gap: 14px; align-items: flex-start; color: var(--ivory); }
a.card { text-decoration: none; transition: border-color .2s; }
a.card:hover { border-color: var(--gold); }
.card img.icon { width: 72px; height: 72px; border-radius: 14px; flex: none; box-shadow: 0 0 0 1px var(--line); }
.card .tag { display: inline-block; font-size: .78rem; color: var(--gold); border: 1px solid var(--line); border-radius: 4px; padding: 0 8px; margin-bottom: 4px; }
.card p { margin: 4px 0 0; font-size: .92rem; color: var(--soft); }

/* Home: full-width key visual */
.key { position: relative; min-height: min(78vh, 720px); display: grid; place-items: center; text-align: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.key > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.key::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 19, 37, .1) 0%, rgba(14, 19, 37, 0) 35%, rgba(14, 19, 37, .55) 72%, var(--night) 100%); }
.key .inner { position: relative; z-index: 1; padding: 48px 16px 40px; max-width: 900px; align-self: end; }
.key .logo { width: min(92vw, 760px); margin: 0 auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); }
.key .kana { margin: 10px 0 0; font-size: clamp(1rem, 2.4vw, 1.25rem); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.key .sub { margin: 2px 0 0; font-size: clamp(1.05rem, 2.8vw, 1.45rem); font-weight: 700; color: var(--gold-hi); text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.key .btns { justify-content: center; }
.key .note { color: var(--ivory); font-size: .9rem; margin: 10px 0 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
main.home { padding-top: 0; }

.feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 32px; align-items: center; margin-top: 40px; }
.feature .portrait { width: min(70%, 300px); margin: 0 auto; filter: drop-shadow(0 0 30px rgba(169, 196, 255, .25)); }
@media (min-width: 760px) { .feature { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .feature .portrait { width: 100%; max-width: 340px; } }

.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px; }
.hero .logo { width: min(100%, 360px); }
.hero .squirrels { width: min(100%, 560px); }
@media (min-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 32px; } }

/* TetoRisu keeps its picture-book paper look */
.warm { background: #fbf7ee; color: #3f3128; border-color: #e6dccb; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif; }
.warm h2, .warm h3 { color: #3f3128; }
.warm .btn { background: #e0705e; color: #fff; box-shadow: none; border-radius: 999px; }
.warm .btn.soon { background: #eee6d8; color: #7a6a5d; }
.warm p { color: #3f3128; }
.card.warm p, .card.warm .tag { color: #7a6a5d; border-color: #e6dccb; }

/* store badges (Google Play etc.) */
.btns { align-items: center; }
.store-badge { display: inline-block; line-height: 0; border-radius: 8px; }
.store-badge img { height: 48px; width: auto; display: block; }
.store-badge:hover { filter: brightness(1.15); }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card > a:first-child { flex: none; line-height: 0; }
.card p.store { margin-top: 10px; }

.todo { background: #5a4a14; color: #fff3c4; border-radius: 4px; padding: 0 6px; }

footer.site { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: .9rem; color: var(--soft); }
footer.site ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer.site a { text-decoration: none; color: var(--soft); }
footer.site a:hover { color: var(--gold-hi); text-decoration: underline; }
footer.site ul.social { margin-bottom: 14px; gap: 10px; }
footer.site ul.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--gold); box-shadow: inset 0 0 0 1px var(--line); }
footer.site ul.social a:hover, footer.site ul.social a:focus-visible { color: var(--gold-hi); box-shadow: inset 0 0 0 1.5px var(--gold); text-decoration: none; }
footer.site ul.social svg { width: 18px; height: 18px; fill: currentColor; }
footer.site small { font-family: var(--latin); letter-spacing: .1em; }

.prose h2 { font-size: 1.15rem; margin-top: 28px; }
.prose ol, .prose ul { padding-left: 1.4em; }