/* Neon Sky — site-wide common styles (light game lounge) */

:root {
  /* Neon Sky tokens */
  --ns-bg: #f7fbff;
  --ns-bg-soft: #eef4ff;
  --ns-surface: #ffffff;
  --ns-surface-strong: #f3f7fd;
  --ns-surface-hover: #eaf3fc;
  --ns-text: #16233b;
  --ns-muted: #66758f;
  --ns-line: rgba(88, 122, 168, .16);
  --ns-line-strong: rgba(37, 166, 235, .45);
  --ns-cyan: #1fc4e8;
  --ns-blue: #1f8ee6;
  --ns-purple: #8a5cf0;
  --ns-magenta: #e85ec8;
  --ns-orange: #e8953a;
  --ns-shadow: 0 14px 36px rgba(62, 88, 130, .1);
  --ns-radius: 22px;
  --page-width: 1180px;

  /* Game-page compatibility (Material-style aliases → Neon Sky light) */
  --md-sys-color-primary: #1f8ee6;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e8f5ff;
  --md-sys-color-on-primary-container: #0c2d4a;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #16233b;
  --md-sys-color-surface-variant: #f3f7fd;
  --md-sys-color-on-surface-variant: #66758f;
  --md-sys-color-outline: #94a3b8;
  --md-sys-color-outline-variant: #d8e3f0;
  --md-sys-elevation-1: 0 1px 2px rgba(62, 88, 130, .08), 0 4px 14px rgba(62, 88, 130, .08);
  --md-sys-elevation-2: 0 2px 6px rgba(62, 88, 130, .1), 0 10px 28px rgba(62, 88, 130, .1);
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --error: #c53b3b;
  --success: #2e7d32;
  --content-width: 960px;
  --danger: #b3261e;
  --danger-container: #f9dedc;
  --danger-outline: #f2b8b5;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans JP", "Roboto", sans-serif;
  font-size: 16px;
  color: var(--ns-text);
  background:
    radial-gradient(circle at 12% 0%, rgba(73, 195, 255, .1), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(161, 114, 255, .09), transparent 26rem),
    linear-gradient(180deg, #f7fbff 0%, #eef5ff 48%, #f8f9ff 100%);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.page-shell {
  width: min(calc(100% - 40px), var(--page-width));
  margin-inline: auto;
}

/* ——— Header ——— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(61, 103, 167, .12);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 30px rgba(62, 88, 130, .06);
}

.site-header__inner {
  width: min(calc(100% - 40px), var(--page-width));
  min-height: 72px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand__mark {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(31, 174, 235, .88);
  border-left-color: transparent;
  border-bottom-color: rgba(152, 90, 255, .72);
  border-radius: 50%;
  transform: rotate(-18deg);
  box-shadow: 0 0 18px rgba(48, 194, 255, .2);
}

.brand__text {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.045em;
  background: linear-gradient(100deg, #172a52 0%, #1677c8 42%, #815ce1 72%, #d057c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-nav {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 72px;
  padding: 0 14px;
  color: #677795;
  font-size: .9rem;
  font-weight: 600;
  transition: color .18s ease, background .18s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--ns-text);
  background: rgba(36, 151, 236, .055);
  outline: none;
}

.site-nav__link.is-active {
  color: var(--ns-text);
  background: rgba(36, 151, 236, .055);
}

.site-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--ns-cyan), var(--ns-blue));
  box-shadow: 0 0 12px rgba(62, 219, 255, .55);
}

.site-nav .material-symbols-outlined { font-size: 20px; }

/* ——— Footer ——— */
.site-footer {
  margin-top: auto;
  border-top: 1px solid rgba(91, 124, 168, .13);
  background: #edf3f9;
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-block: 34px 26px;
}

.site-footer__brand p {
  margin: 8px 0 0;
  color: #697990;
  font-size: .86rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 18px;
  color: #617189;
  font-size: .84rem;
}

.site-footer__links a:hover { color: #178dbf; }

.site-footer__bottom {
  padding: 14px 0 20px;
  border-top: 1px solid rgba(92, 124, 165, .11);
  color: #7e899b;
  font-size: .78rem;
  text-align: center;
}

.site-footer__bottom p { margin: 0; }
.site-footer__bottom a:hover { color: #178dbf; }

/* ——— Shared button / card helpers ——— */
.ns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(37, 166, 235, .65);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #1a8ee8, #25c6ed);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(34, 159, 221, .18);
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}

.ns-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }

.ns-card {
  border: 1px solid var(--ns-line);
  border-radius: var(--ns-radius);
  background: var(--ns-surface);
  box-shadow: var(--ns-shadow);
}

/* ——— Game page shell ——— */
body.game-page main {
  flex: 1;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 32px 24px 48px;
  width: 100%;
}

body.game-page .hero {
  text-align: center;
  padding: 36px 0 40px;
  background: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(31, 142, 230, .1) 0%, transparent 58%);
}

body.game-page .hero__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 20px;
  padding-bottom: 18px;
  max-width: min(100%, 520px);
}

body.game-page .hero h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ns-text);
  line-height: 1.2;
}

body.game-page .hero__tagline {
  margin: 0 auto;
  font-size: clamp(.95rem, 2.2vw, 1.1rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ns-muted);
  max-width: 28em;
}

.how-to-list {
  margin: 0;
  padding-left: 1.25em;
  color: var(--ns-muted);
  font-size: .875rem;
  line-height: 1.8;
}

.related-tools h2 {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ns-text);
}

.related-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.related-tools__grid--two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.related-tool-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--ns-surface);
  border: 1px solid var(--ns-line);
  color: var(--ns-text);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .04s ease;
}

.related-tool-card:hover,
.related-tool-card:focus {
  background: var(--md-sys-color-primary-container);
  border-color: rgba(31, 142, 230, .28);
  box-shadow: var(--md-sys-elevation-1);
  outline: none;
}

.related-tool-card:active { transform: translateY(1px); }

.related-tool-card .material-symbols-outlined {
  color: var(--ns-blue);
  font-size: 24px;
}

.related-tool-card strong {
  display: block;
  margin-bottom: 3px;
  font-size: .9rem;
}

.related-tool-card small {
  display: block;
  color: var(--ns-muted);
  font-size: .78rem;
  line-height: 1.45;
}

.tool-card {
  background: var(--ns-surface);
  border: 1px solid var(--ns-line);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--ns-shadow);
  padding: 24px;
  margin-bottom: 16px;
}

.tool-card__title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ns-text);
}

.tool-card__desc {
  margin: 0 0 18px;
  color: var(--ns-muted);
  font-size: .875rem;
  line-height: 1.5;
}

.tool-card__desc--help {
  margin-top: 20px;
  margin-bottom: 0;
}

.section-note {
  margin: 0;
  color: var(--ns-muted);
  font-size: .875rem;
  line-height: 1.6;
}

.inline-link {
  color: var(--ns-blue);
}

.inline-link:hover {
  text-decoration: underline;
}

.field-label {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: .875rem;
  color: var(--ns-text);
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.btn {
  appearance: none;
  border: none;
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  transition: transform .04s ease, opacity .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: .55; }

.btn--primary {
  background: linear-gradient(135deg, #1a8ee8, #25c6ed);
  color: #fff;
  box-shadow: 0 8px 18px rgba(34, 159, 221, .2);
}

.btn--primary:hover { filter: brightness(1.04); }

.btn--secondary {
  background: #fff;
  color: #1d3a5c;
  border: 1px solid rgba(31, 142, 230, .28);
}

.btn--secondary:hover {
  background: var(--md-sys-color-primary-container);
}

.tool-error {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: color-mix(in srgb, var(--error) 8%, var(--ns-surface));
  border: 1px solid color-mix(in srgb, var(--error) 35%, var(--md-sys-color-outline-variant));
  color: var(--error);
}

.tool-help h2 {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ns-text);
}

.tool-help p {
  margin: 0;
  color: var(--ns-muted);
  font-size: .875rem;
  line-height: 1.65;
}

.tool-help p + p { margin-top: 10px; }

summary { cursor: pointer; }

.seo-details { interpolate-size: allow-keywords; }

.seo-details > summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  overflow-wrap: break-word;
  list-style: none;
  cursor: pointer;
  color: var(--ns-text);
  font-weight: 600;
}

.seo-details > summary::-webkit-details-marker { display: none; }

.seo-details > summary::before {
  content: "\e5cc";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: .1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--md-sys-color-primary-container);
  color: var(--ns-blue);
  font-family: "Material Symbols Outlined";
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  transition: transform 180ms ease, background-color 150ms ease, color 150ms ease;
}

.seo-details[open] > summary::before { transform: rotate(90deg); }

.seo-details::details-content {
  height: 0;
  overflow: clip;
  opacity: 0;
  transition: height 200ms ease, opacity 180ms ease, content-visibility 200ms allow-discrete;
}

.seo-details[open]::details-content {
  height: auto;
  opacity: 1;
}

@media (hover: hover) {
  .seo-details > summary:hover::before {
    background-color: color-mix(in srgb, var(--ns-blue) 14%, var(--md-sys-color-primary-container));
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-details > summary::before,
  .seo-details::details-content { transition: none; }
}

.tool-help details summary + p { margin-top: 14px; }
.seo-details summary + .faq-list { margin-top: 14px; }

.faq-list { display: grid; gap: 14px; }

.faq-item {
  padding-top: 14px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.faq-item:first-child {
  padding-top: 0;
  border-top: none;
}

.faq-item h3 {
  margin: 0 0 6px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ns-text);
}

/* Legacy bare footer (fallback if a page still uses it) */
footer:not(.site-footer) {
  margin-top: auto;
  padding: 18px 24px 20px;
  text-align: center;
  font-size: .875rem;
  color: var(--ns-muted);
  border-top: 1px solid var(--ns-line);
  background: #edf3f9;
  letter-spacing: -.02em;
}

footer:not(.site-footer) p { margin: 0; line-height: 1.35; }
footer:not(.site-footer) a { color: var(--ns-blue); }
footer:not(.site-footer) a:hover { text-decoration: underline; }

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 10px;
}

.footer-links a { line-height: 1.4; padding: 4px 6px; }

/* ——— Responsive ——— */
@media (max-width: 760px) {
  .page-shell,
  .site-header__inner { width: min(calc(100% - 28px), var(--page-width)); }

  .site-header__inner { min-height: 62px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__text { font-size: 1.45rem; }

  .site-nav { gap: 2px; }
  .site-nav__link {
    min-height: 62px;
    padding: 0 9px;
  }
  .site-nav__link span:last-child { display: none; }
  .site-nav__link.is-active::after { left: 8px; right: 8px; }

  .site-footer__inner { flex-direction: column; }
  .site-footer__links { justify-content: flex-start; }
}

@media (max-width: 600px) {
  body.game-page main { padding: 24px 16px 40px; }
  body.game-page .hero { padding: 28px 0 32px; }
  .related-tools__grid { grid-template-columns: 1fr; }
  .footer-links {
    flex-direction: column;
    gap: 6px;
  }
  .tool-card { padding: 18px; }
}