/* Midnight Cafe BBS - C64-ish look */

@font-face {
  font-family: "BESCII";
  src: url("../fonts/bescii.woff2") format("woff2"),
       url("../fonts/bescii.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --c64-bg: #0000aa;
  --c64-border: #000000;
  --c64-text: #a0a0ff;
  --c64-white: #ffffff;
  --c64-black: #000000;
  --c64-red: #880000;
  --c64-cyan: #aaffee;
  --c64-purple: #cc44cc;
  --c64-green: #00cc55;
  --c64-blue: #0000aa;
  --c64-yellow: #eeee77;
  --c64-orange: #dd8855;
  --c64-brown: #664400;
  --c64-pink: #ff7777;
  --c64-gray: #333333;
  --c64-ltgray: #777777;
  --c64-ltblue: #a0a0ff;
  --c64-ltgreen: #aaff66;
  --c64-ltred: #ff7777;
}

html, body{
  height: 100%;
  margin: 0;
}

body{
  background: #111;
  color: var(--c64-text);
  font-family: "BESCII", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 12px;
}

a{ color: var(--c64-cyan); text-decoration: none; }
a:hover{ text-decoration: underline; }

.c64-wrap{
  width: min(900px, 96vw);
}

.c64-frame{
  background: var(--c64-bg);
  border: 6px solid #222;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.c64-topbar{
  display:flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: #000088;
  border-bottom: 2px solid rgba(255,255,255,0.06);
}

.c64-topbar-left{
  color: var(--c64-white);
  letter-spacing: 0.08em;
}

.c64-topbar-right{
  color: var(--c64-ltblue);
  opacity: 0.9;
}

.c64-screen{
  padding: 14px;
}

.c64-screen-inner{
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.c64-screen-title{
  color: var(--c64-yellow);
  letter-spacing: 0.06em;
}

/* 40-column-ish width */
.c64-screen-title,
.c64-menu,
.c64-body,
.c64-prompt{
  width: min(40ch, 100%);
}


.c64-menu{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0;
}

.c64-menu-item{
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.05);
  display:inline-block;
}

.c64-hotkey{
  color: var(--c64-yellow);
}

.c64-body{
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 12px;
}

.c64-pre{
  margin: 0;
  white-space: pre-wrap; /* allow wrap on small screens */
  word-break: break-word;
  line-height: 1.3;
  font-size: 18px;
}

@media (max-width: 480px){
  .c64-pre{ font-size: 16px; }
}

.c64-prompt{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.c64-form-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.c64-input, .c64-textarea, .c64-select{
  font-family: inherit;
  font-size: 16px;
  background: rgba(0,0,0,0.12);
  color: var(--c64-white);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px;
  outline: none;
}

.c64-input{ width: 280px; max-width: 90vw; }
.c64-textarea{ width: min(740px, 90vw); height: 180px; }

.c64-btn{
  font-family: inherit;
  font-size: 16px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--c64-yellow);
  cursor: pointer;
}

.c64-btn:hover{
  background: rgba(255,255,255,0.10);
}

.c64-statusbar{
  display:flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: #000088;
  border-top: 2px solid rgba(255,255,255,0.06);
}

.c64-footer-note{
  font-size: 14px;
  opacity: 0.8;
  margin-top: 10px;
  text-align: center;
}

.c64-flash-info{ color: var(--c64-cyan); }
.c64-flash-error{ color: var(--c64-ltred); }
.c64-flash-ok{ color: var(--c64-ltgreen); }

/* Color spans */
.c64-black{ color: var(--c64-black); }
.c64-white{ color: var(--c64-white); }
.c64-red{ color: var(--c64-red); }
.c64-cyan{ color: var(--c64-cyan); }
.c64-purple{ color: var(--c64-purple); }
.c64-green{ color: var(--c64-green); }
.c64-blue{ color: var(--c64-blue); }
.c64-yellow{ color: var(--c64-yellow); }
.c64-orange{ color: var(--c64-orange); }
.c64-brown{ color: var(--c64-brown); }
.c64-pink{ color: var(--c64-pink); }
.c64-gray{ color: var(--c64-gray); }
.c64-ltgray{ color: var(--c64-ltgray); }
.c64-ltblue{ color: var(--c64-ltblue); }
.c64-ltgreen{ color: var(--c64-ltgreen); }
.c64-ltred{ color: var(--c64-ltred); }


/* Thread/posts */
.c64-post{
  padding: 10px 0;
  border-top: 1px dashed rgba(255,255,255,0.14);
}
.c64-post:first-child{ border-top: none; }
.c64-post-head{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 15px;
}
.c64-post-body{
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.3;
  font-size: 17px;
}
.c64-small{
  font-size: 14px;
  opacity: 0.9;
}