/* ~ console: Quake-style drop-down terminal. Always a dark screen, whatever the theme. */
.con { --c-bg: var(--bg); --c-bar: rgba(var(--bg-rgb), .72); --c-line: var(--line); --c-edge: var(--accent);
  --c-txt: var(--text-2); --c-hi: var(--accent); --c-ok: var(--ok); --c-warn: var(--alert); --c-pink: var(--pink); --c-dim: var(--text-5);
  --c-gold: var(--hilite); --c-title: var(--title); --c-echo: var(--title); --c-art: url(/assets/img/console/kraken.jpg); --c-art-filter: none;
  position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: min(540px, 82vh); display: flex; flex-direction: column; overflow: hidden;
  border-bottom: 2px solid var(--c-edge); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); background-color: var(--c-bg);
  font-family: "Share Tech Mono", ui-monospace, monospace; text-shadow: 0 0 6px color-mix(in srgb, var(--c-hi) 38%, transparent);
  animation: con-drop .4s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .25s; }
.con[hidden] { display: none; }
.con.closing { animation: con-up .25s ease-in both; }
@keyframes con-drop { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes con-up { to { transform: translateY(-100%); } }
.con.noclip { opacity: .9; }   /* /noclip: see-through console */

/* the art (logo bottom right) + scanlines + vignette */
.con-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; box-shadow: inset 0 0 120px rgba(0, 0, 0, .7); }
.con-bg::before { content: ""; position: absolute; inset: 0; background: var(--c-art) right bottom / 3125px auto no-repeat; filter: var(--c-art-filter); }
.con-bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); }

.con-lines { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; padding: 24px 40px 10px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--c-line) transparent;
  font-size: 16px; line-height: 1.5; }
.con-lines > :first-child { margin-top: auto; }   /* new lines sit at the bottom; scroll up for older ones */
.con-lines::-webkit-scrollbar { width: 6px; } .con-lines::-webkit-scrollbar-thumb { background: var(--c-line); }
.cl { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--c-txt); }
.cl a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cl a:hover { color: var(--c-gold); }
.c-txt { color: var(--c-txt); } .c-hi { color: var(--c-hi); } .c-ok { color: var(--c-ok); } .c-warn { color: var(--c-warn); }
.c-pink { color: var(--c-pink); } .c-dim { color: var(--c-dim); } .c-gold { color: var(--c-gold); } .c-title { color: var(--c-title); }
.cl.echo { color: var(--c-echo); }
.cl-bea { display: flex; align-items: flex-end; gap: 12px; white-space: pre; }
.cl-bea.is-zero { opacity: .45; }
.cl-bea-pic { width: 34px; height: 26px; flex: none; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; color: var(--c-hi); }
.cl-bea-pic svg { width: 34px !important; height: auto; }
.cl-bea-pic img { width: 30px; height: auto; }
.cl-img { display: block; align-self: flex-start; width: auto; height: auto; max-height: 180px; max-width: min(100%, 360px); margin: 4px 0; }
.cl-img.cl-img-sm { max-height: 40px; max-width: 120px; }   /* 'image_size' => 'small' */
.cl-inl { display: inline-block; height: 1.3em; width: auto; vertical-align: -.15em; margin: -.35em 0 0 -.1em; }   /* its bottom on the text's baseline (-.08em = the logo's own transparent margin) */
.cl-art { display: inline-block; height: 1.7em; vertical-align: -.21em; margin: -.7em 0 0; color: var(--c-pink); }   /* her dots sit on the text baseline (-.14em = the empty space under the drawing) */   /* a line's braille drawing ('art' => …), e.g. Freya */
.cl-art svg { display: block; width: auto !important; height: 100% !important; stroke-width: 3.2 !important; }   /* a line's own little image ('img' => …) */

.con-in { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 40px 10px; font-size: 17px; }
.con-in label { color: var(--c-gold); }
.con-cmd { flex: 1; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--c-echo); caret-color: var(--c-gold);
  font-family: inherit; font-size: 17px; text-shadow: inherit; }
.con-cmd:focus { outline: none; }
.con-cmd::placeholder { color: var(--c-dim); opacity: .8; }

.con-bar { position: relative; height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 40px;
  border-top: 1px solid var(--c-line); background: var(--c-bar); }
.con-chips { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.con-right { display: flex; align-items: center; gap: 16px; }
.con-ver { font-size: 13px; letter-spacing: .12em; color: var(--c-dim); white-space: nowrap; }
.con-hint { min-height: 36px; padding: 0 12px; border: 1px solid var(--c-line); background: transparent; color: var(--text-3); font-family: inherit; font-size: 13px;
  cursor: pointer; text-shadow: none; white-space: nowrap; }
.con-hint:hover, .con-hint:focus-visible { border-color: var(--c-hi); color: var(--c-hi); }

/* the header's ~ key */
.hdr-con[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

/* per theme: art and (for the light theme) a dark screen */
:root[data-theme="bea-peach"] .con { --c-art: url(/assets/img/console/bea-peach.jpg); }
:root[data-theme="bea-mauve"] .con { --c-art: url(/assets/img/console/bea-mauve.jpg); }
:root[data-theme="hax"] .con { --c-art: url(/assets/img/console/peach.jpg); }   /* Peach: the kraken art in the old HAX console's colours */
:root[data-theme="mono"] .con { --c-art-filter: grayscale(1) brightness(.9); }
:root[data-theme="hacker"] .con { --c-art-filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(3) brightness(.7); }
:root[data-theme="flashbang"] .con { --c-bg: #0a0816; --c-bar: rgba(6, 5, 14, .72); --c-line: #2b2750; --c-edge: #7c3aed;
  --c-txt: #bac2de; --c-hi: #cba6f7; --c-ok: #a6e3a1; --c-warn: #f38ba8; --c-pink: #f5c2e7; --c-dim: #7f849c; --c-gold: #f9e2af; --c-title: #f5e0dc; --c-echo: #f5e0dc; }
:root[data-theme="flashbang"] .con-hint { color: #a6adc8; }

/* quit: the screen powers off */
.con-off { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: #000; color: #7f849c;
  font-family: "Share Tech Mono", ui-monospace, monospace; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; animation: con-off .6s ease-in both; cursor: pointer; }
.con-off span { opacity: 0; animation: con-fade .4s 1s forwards; }
@keyframes con-off { 0% { clip-path: inset(0 0 0 0); background: #fff; } 40% { clip-path: inset(49.6% 0 49.6% 0); background: #fff; } 70% { clip-path: inset(49.6% 49% 49.6% 49%); background: #fff; } 100% { clip-path: inset(0 0 0 0); background: #000; } }
@keyframes con-fade { to { opacity: 1; } }

@media (max-width: 900px) {
  .con-bar { padding: 0 16px; gap: 12px; }
  .con-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .con-chips::-webkit-scrollbar { display: none; }
  .con-ver { display: none; }
  .con-lines { padding: 24px 16px 10px; font-size: 14px; }
  .con-in { padding: 6px 16px 10px; }
}
@media (prefers-reduced-motion: reduce) { .con, .con.closing, .con-off, .con-off span { animation: none; } .con-off span { opacity: 1; } }