/*
 * Responsive visual refresh for the legacy subSilver templates.
 * The rules deliberately override presentation only; existing table structure,
 * links, form names and application behavior remain unchanged.
 */

:root {
  color-scheme: light;
  --ns-bg: #eef2f7;
  --ns-surface: #ffffff;
  --ns-surface-soft: #f7f9fc;
  --ns-border: #d7e0eb;
  --ns-border-strong: #bcc9d8;
  --ns-text: #172033;
  --ns-muted: #5d6a7e;
  --ns-primary: #2457c5;
  --ns-primary-dark: #173f99;
  --ns-primary-soft: #e9f0ff;
  --ns-success: #157347;
  --ns-shadow: 0 18px 50px rgba(28, 45, 75, 0.12);
  --ns-radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--ns-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 24px 16px;
  color: var(--ns-text) !important;
  background:
    radial-gradient(circle at top left, rgba(36, 87, 197, 0.12), transparent 34rem),
    linear-gradient(180deg, #f5f8fc 0, var(--ns-bg) 34rem) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.5;
}

font,
th,
td,
p,
input,
textarea,
select,
button {
  font-family: inherit !important;
}

img {
  max-width: 100%;
  height: auto;
}

/*
 * Keep legacy GIF controls at their intrinsic pixel dimensions. The original
 * phpBB artwork is used as clickable UI, and responsive max-width rules can
 * otherwise shrink it inside narrow table cells at high display scaling.
 * Layout GIFs (spacers and poll bars) are intentionally not matched here.
 */
img[src*="templates/subSilver/images/"][src*="icon_"][src$=".gif"],
img[src*="templates/subSilver/images/"][src*="folder"][src$=".gif"],
img[src*="templates/subSilver/images/"][src*="topic_"][src$=".gif"],
img[src*="templates/subSilver/images/"][src*="msg_"][src$=".gif"],
img[src*="templates/subSilver/images/"][src$="/post.gif"],
img[src*="templates/subSilver/images/"][src$="/reply.gif"],
img[src*="templates/subSilver/images/"][src$="/reply-locked.gif"],
img[src*="templates/subSilver/images/"][src$="/whosonline.gif"],
img[src*="images/smiles/"][src$=".gif"] {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

a:link,
a:visited,
a:active {
  color: var(--ns-primary) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--ns-primary-dark) !important;
}

a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(36, 87, 197, 0.28) !important;
  outline-offset: 2px;
}

.bodyline {
  width: 100% !important;
  max-width: 1240px;
  margin: 0 auto !important;
  border: 1px solid rgba(188, 201, 216, 0.72) !important;
  border-radius: 18px;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: var(--ns-shadow);
}

.bodyline > tbody > tr > td {
  padding-left: clamp(10px, 2.4vw, 28px);
  padding-right: clamp(10px, 2.4vw, 28px);
}

.forumline {
  width: 100% !important;
  border: 1px solid var(--ns-border) !important;
  border-radius: var(--ns-radius);
  border-spacing: 0;
  overflow: hidden;
  background: var(--ns-surface) !important;
  box-shadow: 0 8px 24px rgba(28, 45, 75, 0.07);
}

.forumline th:first-child,
.forumline tr:first-child td:first-child {
  border-top-left-radius: calc(var(--ns-radius) - 1px);
}

.forumline th:last-child,
.forumline tr:first-child td:last-child {
  border-top-right-radius: calc(var(--ns-radius) - 1px);
}

th,
th.thHead,
th.thSides,
th.thTop,
th.thLeft,
th.thRight,
th.thBottom,
th.thCornerL,
th.thCornerR {
  height: auto !important;
  min-height: 38px;
  padding: 10px 12px !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(135deg, var(--ns-primary-dark), var(--ns-primary)) !important;
  background-image: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

td.row1,
td.row2,
td.row3,
td.row3Right,
td.spaceRow {
  padding: 10px 12px;
  color: var(--ns-text) !important;
  border-color: var(--ns-border) !important;
  background-image: none !important;
}

td.row1 {
  background: var(--ns-surface) !important;
}

td.row2 {
  background: var(--ns-surface-soft) !important;
}

td.row3,
td.row3Right,
td.spaceRow {
  background: #edf2f8 !important;
}

td.cat,
td.catHead,
td.catSides,
td.catLeft,
td.catRight,
td.catBottom,
td.rowpic {
  height: auto !important;
  min-height: 38px;
  padding: 9px 12px !important;
  border-color: var(--ns-border) !important;
  background: linear-gradient(180deg, #f1f5fa, #e8eef6) !important;
  background-image: none !important;
}

.maintitle {
  color: var(--ns-text) !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.025em;
}

.forumlink,
.cattitle,
.topictitle,
.nav,
.name {
  color: var(--ns-text) !important;
}

a.forumlink,
a.cattitle,
a.topictitle,
a.nav,
a.name {
  color: var(--ns-primary) !important;
}

.forumlink {
  font-size: 15px !important;
  font-weight: 700 !important;
}

.gen,
.genmed,
.gensmall,
.mainmenu,
.nav,
.name,
.postdetails,
.postbody,
.copyright {
  color: var(--ns-text) !important;
}

.gen {
  font-size: 14px !important;
}

.genmed,
.mainmenu,
.nav,
.name {
  font-size: 13px !important;
}

.gensmall,
.postdetails,
.copyright {
  color: var(--ns-muted) !important;
  font-size: 12px !important;
}

.postbody {
  font-size: 15px !important;
  line-height: 1.68 !important;
  overflow-wrap: anywhere;
}

.code,
.quote {
  display: block;
  max-width: 100%;
  margin: 10px 0;
  padding: 12px 14px !important;
  border: 1px solid var(--ns-border) !important;
  border-left: 4px solid var(--ns-primary) !important;
  border-radius: 9px;
  background: #f7f9fc !important;
  color: var(--ns-text) !important;
  line-height: 1.55 !important;
  overflow-x: auto;
}

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 12px !important;
}

input,
textarea,
select {
  max-width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  color: var(--ns-text) !important;
  border: 1px solid var(--ns-border-strong) !important;
  border-radius: 8px;
  background: #ffffff !important;
  font-size: 14px !important;
  box-shadow: inset 0 1px 2px rgba(28, 45, 75, 0.04);
}

textarea {
  min-height: 120px;
  line-height: 1.5;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  min-height: auto;
  padding: 0;
  accent-color: var(--ns-primary);
}

input.button,
input.mainoption,
input.liteoption,
input[type="submit"],
input[type="button"],
button {
  min-height: 36px;
  padding: 8px 14px !important;
  border: 1px solid var(--ns-primary) !important;
  border-radius: 8px;
  background: var(--ns-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-indent: 0;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(36, 87, 197, 0.18);
}

input.liteoption,
input.button {
  border-color: var(--ns-border-strong) !important;
  background: #ffffff !important;
  color: var(--ns-primary-dark) !important;
  box-shadow: none;
}

input.button:hover,
input.mainoption:hover,
input.liteoption:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  filter: brightness(0.96);
}

.helpline {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
}

hr {
  border: 0 !important;
  border-top: 1px solid var(--ns-border) !important;
}

.spoiler {
  border-radius: 5px;
}

@media (max-width: 820px) {
  body {
    padding: 10px 6px;
    font-size: 13px;
  }

  .bodyline {
    border-radius: 12px;
  }

  .bodyline > tbody > tr > td {
    padding-left: 8px;
    padding-right: 8px;
  }

  .forumline {
    display: block;
    max-width: calc(100vw - 28px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  th,
  td.row1,
  td.row2,
  td.row3,
  td.row3Right,
  td.cat,
  td.catHead,
  td.catSides,
  td.catLeft,
  td.catRight,
  td.catBottom {
    padding: 8px !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .maintitle {
    font-size: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}