/* petscii.nw — sysop room / my setup view */



.petscii-room {

  max-width: 1200px;

  margin: 0 auto;

  padding: 1.5rem 1.5rem 3rem;

  color: var(--nw-text, #d5d5ff);

}



.petscii-room-header {

  margin-bottom: 1.5rem;

}

.petscii-room-header h1 {

  font: 600 1.8rem ui-monospace, 'Courier New', monospace;

  margin: 0 0 0.3rem;

  letter-spacing: -0.5px;

  color: var(--nw-heading, #f0f0ff);

}

.petscii-room-subtitle {

  margin: 0;

  font-size: 0.95rem;

  opacity: 0.75;

  color: var(--nw-dim, #9999cc);

}



.petscii-room-scene {

  background: linear-gradient(180deg, #15102a 0%, #0a0818 100%);

  border: 1px solid #2a2438;

  border-radius: 6px;

  padding: 1.5rem;

  margin-bottom: 1.5rem;

  min-height: 320px;

}



.petscii-room-stage {

  display: flex;

  align-items: center;

  justify-content: center;

}



.petscii-room-placeholder {

  text-align: center;

}

.petscii-room-ascii {

  font: 13px/1.4 ui-monospace, 'Courier New', monospace;

  color: #9999cc;

  background: none;

  padding: 0;

  margin: 0 0 1rem;

  white-space: pre;

  display: inline-block;

  text-align: left;

}

.petscii-room-note {

  font-size: 0.85rem;

  color: #7a7aa0;

  font-style: italic;

  margin: 0;

}



/* Ops panel (sysop only) */

.petscii-room-ops {

  margin-top: 2rem;

}

.petscii-room-ops h2 {

  font: 600 1.2rem ui-monospace, 'Courier New', monospace;

  margin: 0 0 1rem;

  color: var(--nw-heading, #f0f0ff);

}

.petscii-room-empty {

  color: #7a7aa0;

  font-style: italic;

}

.petscii-room-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 0.9rem;

}

.petscii-room-table thead {

  border-bottom: 1px solid #2a2438;

}

.petscii-room-table th {

  text-align: left;

  padding: 0.6rem 0.8rem;

  font-weight: 600;

  color: var(--nw-heading, #c0c0e8);

  font-size: 0.82rem;

  letter-spacing: 0.5px;

}

.petscii-room-table td {

  padding: 0.5rem 0.8rem;

  border-bottom: 1px solid #1a1626;

  color: #c0c0e0;

  font-variant-numeric: tabular-nums;

}

.petscii-room-table tr.is-active {

  background: rgba(80,160,255,0.06);

}

.petscii-room-active {

  color: #50e090;

  font-weight: 600;

}



/* === Basement scene SVG === */

.petscii-room-stage--sysop {

  position: relative;

  width: 100%;

}

.petscii-basement-svg {

  width: 100%;

  height: auto;

  display: block;

  border-radius: 6px;

  background: linear-gradient(180deg, #1a1410 0%, #0a0810 100%);

}



/* Fullscreen button — top-right corner of scene */

.petscii-fullscreen-btn {

  position: absolute;

  top: 1rem;

  right: 1rem;

  z-index: 10;

  padding: 0.7rem 1.3rem;

  background: linear-gradient(180deg, #5040c8 0%, #3530a0 100%);

  border: 1px solid #8070e0;

  color: #f0f0ff;

  font: 700 0.85rem ui-monospace, 'Courier New', monospace;

  border-radius: 5px;

  cursor: pointer;

  letter-spacing: 0.8px;

  box-shadow: 0 3px 8px rgba(0,0,0,0.45);

  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;

}

.petscii-fullscreen-btn:hover {

  background: linear-gradient(180deg, #6050d8 0%, #4540b0 100%);

  transform: translateY(-1px);

  box-shadow: 0 5px 12px rgba(0,0,0,0.5);

}

.petscii-fullscreen-btn:active { transform: translateY(0); }



.petscii-fullscreen-exit-hint {

  position: fixed;

  top: 1rem;

  right: 1rem;

  z-index: 10001;

  padding: 0.5rem 1rem;

  background: rgba(0,0,0,0.7);

  color: #f0f0ff;

  font: 600 0.85rem ui-monospace, 'Courier New', monospace;

  border-radius: 4px;

  display: none;

  pointer-events: none;

}

.petscii-fullscreen-exit-hint kbd {

  display: inline-block;

  padding: 1px 6px;

  background: #444;

  border: 1px solid #777;

  border-radius: 2px;

  font: inherit;

  font-size: 0.8rem;

  margin: 0 2px;

}



/* === FULLSCREEN MODE === */

body.petscii-fullscreen-room { overflow: hidden; }

body.petscii-fullscreen-room header,

body.petscii-fullscreen-room .nw-shell-header,

body.petscii-fullscreen-room .nw-topbar,

body.petscii-fullscreen-room .nw-sidebar,

body.petscii-fullscreen-room aside,

body.petscii-fullscreen-room .nw-tabs,

body.petscii-fullscreen-room .petscii-room-header,

body.petscii-fullscreen-room .petscii-room-ops,

body.petscii-fullscreen-room .petscii-fullscreen-btn {

  display: none !important;

}

body.petscii-fullscreen-room .nw-content,

body.petscii-fullscreen-room main {

  padding: 0 !important;

  margin: 0 !important;

}

body.petscii-fullscreen-room .petscii-room {

  max-width: none !important;

  padding: 0 !important;

  margin: 0 !important;

}

body.petscii-fullscreen-room .petscii-room-scene {

  position: fixed !important;

  inset: 0 !important;

  padding: 0 !important;

  border-radius: 0 !important;

  background: linear-gradient(180deg, #1a1410 0%, #0a0810 100%) !important;

  z-index: 9999 !important;

  display: flex;

  align-items: center;

  justify-content: center;

}

body.petscii-fullscreen-room .petscii-basement-svg {

  width: 100vw !important;

  height: 100vh !important;

  border-radius: 0 !important;

  max-width: 100vw;

  max-height: 100vh;

}

body.petscii-fullscreen-room .petscii-fullscreen-exit-hint { display: block; }



/* Hide static CRT text when iframe is active */

body.petscii-fullscreen-room .bm-crt-static { display: none; }



/* The iframe that overlays the CRT screen in fullscreen */

#petscii-crt-iframe {

  position: fixed;

  border: none;

  background: #2a206a;

  z-index: 10000;

  border-radius: 12px;

  box-shadow: 0 0 40px rgba(80,80,200,0.4), inset 0 0 0 2px rgba(0,0,0,0.6);

}



/* Live LED color on the CRT power indicator */

.bm-led-on {

  filter: drop-shadow(0 0 4px #20e040);

}



/* Clickable elements get a subtle hover */

[data-clickable]:hover { filter: brightness(1.1); }



/* === INFRAME MODE: when the BBS is rendered inside the CRT iframe === */

/* Hide the dApp chrome, force the BBS pane to fill the iframe viewport */



body.petscii-inframe {

  margin: 0 !important;

  padding: 0 !important;

  background: #4040a0 !important;

  overflow: hidden !important;

}



/* Hide chrome via display:none on specific known elements only */

body.petscii-inframe .nw-topnav,

body.petscii-inframe header.nw-topnav,

body.petscii-inframe .nw-sidebar,

body.petscii-inframe aside.nw-sidebar,

body.petscii-inframe .nw-divider,

body.petscii-inframe #nw-divider,

body.petscii-inframe .nw-tabs,

body.petscii-inframe .petscii-modem-wrap,

body.petscii-inframe #petscii-modem-panel-wrap,

body.petscii-inframe .petscii-info-btn {

  display: none !important;

}



/* Force the app grid + body + content to fill the iframe viewport */

body.petscii-inframe .nw-app {

  display: block !important;

  grid-template-columns: none !important;

  grid-template-rows: none !important;

  height: 100vh !important;

  width: 100vw !important;

}

body.petscii-inframe .nw-body {

  display: block !important;

  grid-template-columns: none !important;

  height: 100vh !important;

  width: 100vw !important;

}

body.petscii-inframe .nw-content,

body.petscii-inframe main.nw-content {

  display: block !important;

  padding: 0 !important;

  margin: 0 !important;

  width: 100vw !important;

  height: 100vh !important;

  overflow: hidden !important;

}



/* The BBS pane should fill it */

body.petscii-inframe .nw-pane,

body.petscii-inframe #petscii-crt,

body.petscii-inframe .petscii-crt,

body.petscii-inframe .petscii-crt--pane {

  position: static !important;

  width: 100vw !important;

  height: 100vh !important;

  max-width: none !important;

  max-height: none !important;

  margin: 0 !important;

  border-radius: 0 !important;

  display: block !important;

}



body.petscii-inframe .petscii-stream {

  width: 100% !important;

  height: 100% !important;

  overflow-y: auto !important;

  padding: 1rem !important;

  box-sizing: border-box !important;

}



/* === INFRAME: BBS text scaling inside the small CRT viewport === */

/* Default PETSCII font is sized for the full BBS pane. Inside the iframe

   the viewport is ~360x240 (SVG units that scale further). Shrink the font

   so a full 40-column line fits without wrapping/scrolling. */

body.petscii-inframe .petscii-stream,

body.petscii-inframe .petscii-stream * {

  font-size: 10px !important;

  line-height: 1.05 !important;

  letter-spacing: 0 !important;

}



/* Smaller padding inside iframe so more screen real estate is text */

body.petscii-inframe .petscii-stream {

  padding: 0.4rem 0.5rem !important;

}



/* The PETSCII pre block (ASCII art banner) — shrink dramatically */

body.petscii-inframe pre,

body.petscii-inframe .petscii-frame,

body.petscii-inframe .petscii-banner {

  font-size: 9px !important;

  line-height: 1 !important;

}



/* Command prompt + input line stays readable */

body.petscii-inframe .petscii-prompt,

body.petscii-inframe .petscii-input {

  font-size: 11px !important;

}






/* ---------- Datasette tape backup ritual ---------- */

.petscii-tape-modal {

  position: fixed; inset: 0; z-index: 10000;

  display: flex; align-items: center; justify-content: center;

  background: rgba(10, 8, 30, 0.72); padding: 16px;

}

.petscii-tape-box {

  background: #352879; color: #a59cf0;

  border: 18px solid #6f3d86;

  font-family: 'C64 Pro Mono', ui-monospace, monospace;

  font-size: 14px; line-height: 1.35; text-transform: uppercase;

  width: min(640px, 100%); max-height: 90vh; overflow: auto;

  padding: 18px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

}

.petscii-tape-out { margin: 0; min-height: 12em; white-space: pre-wrap; font: inherit; color: inherit; }

.petscii-tape-counter { color: #ffff7b; }

.petscii-tape-actions { display: flex; gap: 12px; margin-top: 14px; }

.petscii-tape-actions button {

  font: inherit; text-transform: uppercase; cursor: pointer;

  background: #a59cf0; color: #352879; border: 0; padding: 6px 14px;

}

.petscii-tape-actions button:hover,

.petscii-tape-actions button:focus { background: #ffff7b; outline: none; }

.bm-datasette.is-saving { animation: bmTapePulse 0.24s steps(2) infinite; }

@keyframes bmTapePulse { 50% { opacity: 0.8; } }

@media (max-width: 480px) { .petscii-tape-box { border-width: 10px; font-size: 12px; } }