/* Gikopoi-inspired theme: silver canvas, restrained graphite UI, original fish artwork. */
:root {
  color-scheme: light;
  --giko-bg: #c0c0c0;
  --giko-deep: #747474;
  --giko-panel: rgba(151, 151, 151, 0.96);
  --giko-reply: rgba(225, 225, 225, 0.96);
  --giko-border: #727272;
  --giko-text: #252525;
  --giko-panel-text: #202020;
  --giko-muted: #626262;
  --giko-link: #762c38;
  --giko-accent: #8a3040;
  --giko-name: #355e46;
}

html {
  min-height: 100%;
  background: var(--giko-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--giko-text);
  background-color: var(--giko-bg);
  background-image: linear-gradient(to bottom, #929292 0, #a6a6a6 62px, #b4b4b4 118px, var(--giko-bg) 190px);
  background-repeat: no-repeat;
  background-size: 100% 190px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
}

.gikopoi-fish {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 50vw;
  height: 50vh;
  background: url("gikopoi-fish.svg?v=2") right bottom / contain no-repeat;
  opacity: 0.2;
  pointer-events: none;
  filter: saturate(0.7) contrast(0.85);
  mask-image: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.28) 30%, #000 72%);
}

header,
main,
footer {
  position: relative;
  z-index: 1;
}

a,
a:visited {
  color: var(--giko-link);
}

a:hover {
  color: #a11732;
  text-decoration-thickness: 2px;
}

.boardlist {
  position: sticky;
  top: 0;
  z-index: 20;
  box-sizing: border-box;
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: 0;
  border-bottom: 1px solid #909090;
  background: #e1e1e1;
  color: #3f3f3f;
  box-shadow: none;
}

header {
  margin: 1.25rem auto 0.8rem;
  text-align: center;
}

header h1,
.home h1 {
  margin-bottom: 0.2rem;
  color: var(--giko-accent);
  font-family: "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

header h1 {
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.55);
}

.home h1 {
  text-shadow: 0 1px 0 #f0f0f0;
}

.subtitle,
.unimportant,
.fileinfo,
.omitted {
  color: var(--giko-muted);
}

main {
  box-sizing: border-box;
  min-height: 65vh;
  padding: 0 1rem;
}

.home,
.error {
  max-width: 720px;
  margin: 3rem auto;
  padding: 1.5rem 2rem;
  border: 1px solid var(--giko-border);
  border-radius: 4px;
  background: var(--giko-panel);
  color: var(--giko-panel-text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.post-form {
  width: min(620px, calc(100% - 2rem));
  margin: 1rem auto;
}

.post-form details {
  border: 1px solid var(--giko-border);
  border-radius: 4px;
  background: var(--giko-panel);
  color: var(--giko-panel-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.post-form summary {
  padding: 0.55rem 0.8rem;
  color: #4e1721;
  font-weight: bold;
  cursor: pointer;
}

.post-form table {
  margin: 0 auto 0.8rem;
}

.post-form th {
  padding: 0.35rem 0.55rem;
  border: 1px solid #737373;
  background: #adadad;
  color: #242424;
}

input,
textarea,
select,
button {
  border: 1px solid var(--giko-border);
  border-radius: 2px;
  background: #f4f4f4;
  color: #202020;
  font: inherit;
}

button {
  padding: 0.25rem 0.65rem;
  background: #dedede;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background: #ffffff;
}

.thread {
  margin-right: 0;
}

div.post.reply {
  /* Avoid the OP thumbnail and contain thumbnails floated inside this reply. */
  display: flow-root;
  box-sizing: border-box;
  width: min(720px, calc(100% - 8px));
  max-width: none;
  margin: 0.2em 4px;
  padding: 0.2em 0.3em 0.5em 0.6em;
  border-width: 1px;
  border-style: none solid solid none;
  border-color: #909090;
  border-radius: 0;
  background: var(--giko-reply);
  color: var(--giko-text);
  box-shadow: none;
  vertical-align: top;
}

div.post.reply.has-multiple-files {
  width: fit-content;
  max-width: calc(100% - 8px);
}

.post.op {
  padding: 0.35rem 0.45rem;
  color: var(--giko-text);
}

.intro {
  margin: 0.5em 0;
  padding: 0 0 0.2em;
  line-height: normal;
}

.controls.op { font-size: 100%; }

span.name {
  color: var(--giko-name);
  font-weight: bold;
}

span.subject {
  color: var(--giko-accent);
  font-weight: bold;
}

.trip,
.capcode {
  color: #555555;
}

.quote {
  color: #496b35 !important;
}

.body {
  color: var(--giko-text);
  line-height: normal;
  white-space: pre-wrap;
}

div.post.reply .body {
  margin: 0.8em 3em 0 1.8em;
  padding-bottom: 0.3em;
}

.fileinfo {
  margin-bottom: 0.25rem;
}

.post-image,
img.board_image {
  border: 1px solid var(--giko-border);
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.32);
}

.post .post-image {
  box-sizing: content-box;
  margin: 0 20px 0 0;
  padding: 5px;
  border: 0;
  box-shadow: none;
}

/* Vichan-style media flow: post text and preview replies occupy the space beside
   a thumbnail, then continue at full width beneath it. */
.post .files {
  float: left;
  max-width: 100%;
}

.post .files.single-file,
.post .files.single-file .file {
  display: contents;
  float: none;
}

.post .files.single-file .fileinfo {
  display: block;
  width: 100%;
}

.post .files.single-file .post-image {
  float: left;
}

.post .file {
  min-width: 0;
  max-width: 100%;
}

.post .fileinfo {
  overflow-wrap: anywhere;
}

.thread > .omitted {
  width: fit-content;
  margin: 0.65em 0 0.35em;
}

div.post.reply .body,
div.post.reply .intro {
  overflow-wrap: break-word;
  word-break: normal;
}

.thread-status {
  display: inline-block;
  margin: 0 0.25rem 0.3rem 0;
  padding: 0.15rem 0.4rem;
  border: 1px solid #6f2935;
  border-radius: 2px;
  background: #8a3040;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

hr {
  height: 1px;
  border: 0;
  background: rgba(70, 70, 70, 0.34);
}

footer {
  box-sizing: border-box;
  min-height: 110px;
  margin-top: 2rem;
  padding: 1rem 1rem 1.5rem;
  border: 0;
  background: transparent;
  color: #242424;
  text-align: center;
}

.boardlist a,
.home a,
.error a,
footer a {
  color: #651f2c;
}

.boardlist a:hover,
.home a:hover,
.error a:hover,
footer a:hover {
  color: #96172f;
}

@media (max-width: 720px) {
  body {
    min-width: 0;
  }

  .gikopoi-fish {
    width: 62vw;
    height: 42vh;
    opacity: 0.16;
  }

  main {
    padding: 0 0.45rem;
  }

  .thread {
    margin-right: 0;
  }

  div.post.reply {
    width: calc(100% - 8px);
    max-width: none;
  }

  .post .files {
    float: none;
  }

  .post .files.single-file .post-image {
    float: none;
  }

  div.post.reply .body {
    clear: both;
    margin-right: 1.8em;
  }

  footer {
    padding-right: 1rem;
  }
}