/* The Plot (#75): a virtual-pet CD-ROM from 1997, patched for years — a bevelled frame around the world, LED bars, a log. */
.pl { color: var(--nx-text); }
.pl-intro .pl-lead { line-height: 1.55; margin: 0 0 10px; } .pl-rules { margin: 0 0 14px; padding-left: 18px; line-height: 1.5; } .pl-rules li { margin: 0 0 6px; }
.pl-stage { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .pl-stage { grid-template-columns: 1fr; } }
.pl-frame { position: relative; border: 3px solid #3a4470; border-radius: 6px; box-shadow: inset 0 0 0 2px #0a0e1a, 0 0 18px rgba(0, 0, 0, .6), 0 0 0 1px #6b78b8; background: #05070e; padding: 4px; }
.pl-canvas { display: block; width: 100%; height: auto; aspect-ratio: 246 / 147; background: #0a1020; border: 1px solid #1c2440; cursor: crosshair; outline: none; touch-action: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.pl-canvas:focus-visible { box-shadow: 0 0 0 2px var(--nx-cyan); } .pl-canvas.carry { cursor: grabbing; }
.pl-hud { display: flex; justify-content: space-between; gap: 8px; padding: 4px 4px 0; font: 11px var(--nx-font-console); letter-spacing: .1em; text-transform: uppercase; color: var(--nx-text-dim); }
.pl-room { color: var(--nx-cyan); } .pl-link::before { content: '●'; margin-right: 4px; color: #a33; } .pl-link.on::before { color: var(--nx-acid); text-shadow: 0 0 6px rgba(170, 255, 0, .6); }
.pl-help { padding: 2px 4px 0; font-size: 11px; } .pl-help kbd { font: 10px var(--nx-font-console); border: 1px solid #2a3350; border-radius: 3px; padding: 0 3px; }
.pl-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pl-box { padding: 10px 12px; border: 1px solid #2a3350; border-radius: 8px; background: rgba(8, 12, 24, .6); min-width: 0; }
.pl-box h2 { margin: 0 0 6px; font: 600 14px var(--nx-font-console); letter-spacing: .08em; text-transform: uppercase; color: var(--nx-cyan); overflow-wrap: anywhere; }
.pl-box h3 { margin: 10px 0 4px; font: 600 12px var(--nx-font-console); letter-spacing: .06em; text-transform: uppercase; color: var(--nx-magenta); }
.pl-card { border-color: var(--nx-acid); } .pl-card .flash { color: var(--nx-magenta); }
.pl-bars { display: grid; gap: 3px; margin: 6px 0; }
.pl-bar { display: grid; grid-template-columns: 92px 1fr; gap: 6px; align-items: center; font: 11px var(--nx-font-console); }
.pl-bar-k { color: var(--nx-text-dim); text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bar-t { height: 8px; background: #0a0e1a; border: 1px solid #2a3350; border-radius: 2px; overflow: hidden; }
.pl-bar-v { display: block; height: 100%; background: linear-gradient(90deg, var(--nx-acid), #ff6); box-shadow: 0 0 6px rgba(170, 255, 0, .5); transition: width .4s linear; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.pl-said { margin: 6px 0; font-style: italic; color: var(--nx-acid); overflow-wrap: anywhere; }
.pl-teach, .pl-say { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; font-size: 12px; }
.pl-teach input, .pl-say input, .pl-teach select { background: var(--nx-void); color: var(--nx-text); border: 1px solid #2a3350; border-radius: 4px; padding: 4px 6px; font: 12px var(--nx-font-console); }
.pl-teach input { width: 90px; } .pl-say input { flex: 1; min-width: 120px; }
.pl-orders { display: grid; gap: 4px; font-size: 12px; } .pl-orders label { display: flex; gap: 6px; align-items: center; }
.pl-residents, .pl-graves { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.pl-residents li { padding: 3px 4px; border-bottom: 1px dotted #2a3350; cursor: pointer; border-radius: 3px; } .pl-residents li:hover { background: rgba(0, 255, 255, .06); } .pl-residents li.on { background: rgba(170, 255, 0, .1); } .pl-residents li.seed { cursor: default; }
.pl-logbox { margin-top: 12px; } .pl-log { margin: 0; padding-left: 0; list-style: none; max-height: 180px; overflow: auto; font: 12px var(--nx-font-console); }
.pl-log li { padding: 2px 0; border-bottom: 1px dotted #1c2440; } .pl-log li .dim { display: inline-block; min-width: 54px; }
.pl-log li[data-kind="hatched"], .pl-log li[data-kind="laid"] { color: var(--nx-acid); } .pl-log li[data-kind="died"] { color: #f88; } .pl-log li[data-kind="said"], .pl-log li[data-kind="keeper"] { color: var(--nx-cyan); }
.pl-foot { margin: 10px 0 0; font-size: 12px; }
.nx-btn.small { padding: 2px 8px; font-size: 11px; }