/* ==========================================================================
   PIXEL TRADING FLOOR — style.css
   레트로 픽셀아트 게임 오피스. border-radius 최소화, 계단식 그림자, CRT.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:        #1a1a24;
  --panel:     #12121c;
  --ink:       #ffffff;
  --ink-dim:   #9a9ab4;
  --shadow:    #0a0a12;
  --green:     #3fb950;
  --red:       #f85149;
  --amber:     #d29922;
  --gold:      #e8c84a;
  --wood:      #8b6f47;
  --navy:      #2c3e6b;
  --purple:    #4a2c6b;
  --teal:      #1f4a44;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Galmuri11', monospace;
  font-size: 12px;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

body { overflow-x: hidden; }

canvas, .sprite, #chart { image-rendering: pixelated; }

/* --- CRT scanline overlay --- */
.crt {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.06;
  background: repeating-linear-gradient(
    to bottom,
    #000 0, #000 2px,
    transparent 2px, transparent 4px
  );
}

/* --- App shell --- */
#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ==========================================================================
   TOP BAR
   ========================================================================== */
#topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px;
  background: var(--panel);
  border-bottom: 2px solid #000;
  flex-shrink: 0;
}

#logo {
  font-size: 13px;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 1px;
  white-space: nowrap;
}

#controls { display: flex; gap: 8px; }

#symbol-input {
  width: 160px;
  background: #0a0a10;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.6);
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 7px;
  outline: none;
}
#symbol-input::placeholder { color: #5a5a72; }
#symbol-input:focus { border-color: var(--gold); }

/* 모드 토글 — 픽셀 세그먼트 버튼 */
#mode-toggle { display: flex; }
.mode-btn {
  background: #0a0a10;
  color: #8a8aa4;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 7px;
  cursor: pointer;
}
.mode-btn + .mode-btn { border-left: none; }
.mode-btn.active {
  background: var(--gold);
  color: #1a1408;
  font-weight: bold;
}
.mode-btn:not(.active):hover { color: #cfcfe0; }
/* 공격 모드 — 방향 강제 런임을 영상에서 한눈에 구분하려고 붉게 표시한다 */
#mode-attack.active { background: var(--red); color: #fff; }
body.attack-mode #topbar { border-bottom-color: var(--red); }
body.attack-mode #logo::after {
  content: ' ⚔ ATTACK';
  color: var(--red);
  animation: attack-blink 1.1s steps(2, start) infinite;
}
@keyframes attack-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
body.attack-mode .dp-scalp-head { color: var(--red); }
body.attack-mode #dp-scalp::after {
  content: '공격 모드 — 관망 없이 방향을 강제한 판정. 확신도와 무효화 레벨을 함께 볼 것.';
  display: block;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.5;
  color: #d08a8a;
}

/* 모드에서 제외된 방/자리 흐리게 */
.room.idle { opacity: .45; filter: saturate(.4); }
.desk.idle { opacity: .35; filter: saturate(.3); }

#analyze-btn {
  background: var(--green);
  color: #08160b;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 4px 10px;
  cursor: pointer;
}
#analyze-btn:hover { filter: brightness(1.1); }
#analyze-btn:active { transform: translate(3px, 3px); box-shadow: none; }
#analyze-btn:disabled {
  background: #444; color: #888;
  cursor: not-allowed; transform: none; box-shadow: 3px 3px 0 #000;
  filter: none;
}

/* Clocks — pixel LED green */
#clocks { display: flex; gap: 10px; margin-left: auto; }
.clock { display: flex; flex-direction: column; align-items: center; }
.clabel { font-size: 8px; color: #4a7a55; letter-spacing: 1px; }
.clock span:last-child {
  color: var(--green);
  font-size: 11px;
  text-shadow: 0 0 5px rgba(63,185,80,.7);
  letter-spacing: 1px;
}

/* ==========================================================================
   BOARD (전광판)
   ========================================================================== */
#board {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin: 4px 10px 0;
  padding: 5px 8px;
  background: #08080e;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 var(--shadow);
  flex-shrink: 0;
}
#board-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 160px;
  gap: 1px;
}
#board-symbol { font-size: 14px; color: var(--gold); letter-spacing: 1px; }
#board-price  { font-size: 18px; color: #f2f2f8; }
#board-change { font-size: 12px; color: var(--ink-dim); }
#board-change.up   { color: var(--green); }
#board-change.down { color: var(--red); }

#chart {
  flex: 1;
  height: 56px;
  background: #000;
  border: 2px solid #1c1c28;
}

/* ==========================================================================
   VENUE BOARD (다중 거래소 전광판)
   ========================================================================== */
#venue-board {
  margin: 3px 10px 0;
  background: #08080e;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 var(--shadow);
  font-size: 10px;
  flex-shrink: 0;
}
#vb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  background: #11111c;
  border-bottom: 1px solid #000;
}
#vb-title { color: var(--gold); letter-spacing: 1px; }
#vb-sub { color: var(--ink-dim); flex: 1; }
#vb-stamp { color: #55556a; font-size: 10px; }
#vb-toggle {
  font: inherit;
  background: #1c1c28;
  color: var(--ink-dim);
  border: 2px solid #000;
  padding: 2px 8px;
  cursor: pointer;
}
#vb-toggle:hover { color: var(--gold); }
#venue-board.collapsed #vb-rows { display: none; }

#vb-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.vb-row {
  display: grid;
  grid-template-columns: 140px 100px 56px 1fr;
  align-items: baseline;
  gap: 6px;
  padding: 2px 8px;
  border-bottom: 1px solid #15151f;
  border-right: 1px solid #15151f;
}
.vb-row .vb-label { color: #b9b9cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-row .vb-price { color: #f2f2f8; font-size: 13px; text-align: right; }
.vb-row .vb-pct { text-align: right; }
.vb-row .vb-note { color: #55556a; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-row .up { color: var(--green); }
.vb-row .down { color: var(--red); }
.vb-row.vb-dead .vb-price { color: #44445a; }
.vb-row.vb-est .vb-price { color: var(--gold); }
/* 괴리 행 — 전광판에서 제일 중요한 숫자 */
.vb-row.vb-premium {
  grid-column: 1 / -1;
  background: #12121e;
  border-top: 2px solid #000;
}
.vb-row.vb-premium .vb-label { color: var(--gold); }
.vb-row.vb-premium .vb-price { font-size: 15px; }

/* ==========================================================================
   FLOOR
   ========================================================================== */
#floor {
  flex: 1;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  padding: 4px 6px;
  min-height: 0;
}

.room {
  position: relative;
  border: 2px solid #0c0c14;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    3px 3px 0 var(--shadow);
  padding: 24px 6px 4px;
  overflow: hidden;
  min-height: 0;
}

/* wood-tone analyst room + pixel plank pattern */
#room-analyst {
  grid-row: 1;
  grid-column: 1;
  padding-top: 28px;
  background-color: var(--wood);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 54px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.10) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 1px, transparent 1px 30px);
}
#room-research {
  grid-row: 1; grid-column: 2;
  background-color: var(--navy);
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 26px);
}
#room-trading {
  grid-row: 2; grid-column: 2;
  background-color: var(--purple);
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 26px);
}
#room-scalp {
  grid-row: 2; grid-column: 1;
  padding-top: 28px;
  background-color: var(--teal);
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 26px);
}

.room-label {
  position: absolute;
  top: 3px; left: 5px;
  font-size: 9px;
  color: #fff;
  background: rgba(0,0,0,.45);
  border: 1px solid #000;
  box-shadow: 1px 1px 0 rgba(0,0,0,.5);
  padding: 1px 5px;
  letter-spacing: 1px;
  z-index: 3;
}

/* --- Pixel props (decor) --- */
.prop { position: absolute; z-index: 2; width: 10px; height: 14px; }
.prop-tr { top: 4px; right: 6px; }
.prop-tl { top: 4px; left: 6px; }
.prop.plant {
  width: 16px; height: 20px;
  background:
    linear-gradient(#4caf50, #4caf50) 3px 0 / 10px 10px no-repeat,   /* leaves */
    linear-gradient(#8a5a34, #8a5a34) 2px 11px / 12px 9px no-repeat;  /* pot */
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.prop.monitor {
  width: 22px; height: 18px;
  background:
    linear-gradient(#101018,#101018) 0 0 / 22px 14px no-repeat,       /* frame */
    linear-gradient(#2f9e6a,#2f9e6a) 2px 2px / 18px 10px no-repeat,   /* screen */
    linear-gradient(#333,#333) 8px 14px / 6px 4px no-repeat;          /* stand */
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
  border: 1px solid #000;
}

/* wall decor per room (pure CSS pixel props) */
#room-analyst::before {
  content: '';
  position: absolute;
  top: 10px; right: 46px;
  width: 46px; height: 30px;
  z-index: 2;
  background:
    /* shelf books */
    linear-gradient(#d05a5a,#d05a5a) 4px 4px  / 6px 10px no-repeat,
    linear-gradient(#5a8ad0,#5a8ad0) 11px 4px / 6px 10px no-repeat,
    linear-gradient(#d0b45a,#d0b45a) 18px 4px / 6px 10px no-repeat,
    linear-gradient(#6ab06a,#6ab06a) 25px 6px / 6px 8px  no-repeat,
    linear-gradient(#b06ab0,#b06ab0) 32px 4px / 6px 10px no-repeat,
    /* shelf frame */
    linear-gradient(#4e3a22,#4e3a22) 0 0 / 46px 18px no-repeat,
    linear-gradient(#3a2a16,#3a2a16) 0 18px / 46px 4px no-repeat;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
#room-research::before {
  content: '';
  position: absolute;
  top: 34px; left: 50%;
  transform: translateX(-50%);
  width: 54px; height: 34px;
  z-index: 2;
  background:
    /* chart line on wall poster */
    linear-gradient(#3fb950,#3fb950) 6px 22px / 8px 3px no-repeat,
    linear-gradient(#3fb950,#3fb950) 13px 17px / 8px 3px no-repeat,
    linear-gradient(#f85149,#f85149) 20px 20px / 8px 3px no-repeat,
    linear-gradient(#3fb950,#3fb950) 27px 12px / 8px 3px no-repeat,
    linear-gradient(#3fb950,#3fb950) 34px 8px  / 8px 3px no-repeat,
    linear-gradient(#41527f,#41527f) 3px 3px / 48px 28px no-repeat,
    linear-gradient(#0d1730,#0d1730) 0 0 / 54px 34px no-repeat;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
#room-trading::before {
  content: '';
  position: absolute;
  top: 34px; right: 14px; left: auto;
  width: 40px; height: 26px;
  z-index: 2;
  background:
    /* wall screen with candles */
    linear-gradient(#3fb950,#3fb950) 6px 8px  / 3px 12px no-repeat,
    linear-gradient(#f85149,#f85149) 12px 5px / 3px 12px no-repeat,
    linear-gradient(#3fb950,#3fb950) 18px 10px / 3px 10px no-repeat,
    linear-gradient(#3fb950,#3fb950) 24px 4px / 3px 14px no-repeat,
    linear-gradient(#f85149,#f85149) 30px 7px / 3px 9px  no-repeat,
    linear-gradient(#05050c,#05050c) 2px 2px / 36px 22px no-repeat,
    linear-gradient(#1c1c2c,#1c1c2c) 0 0 / 40px 26px no-repeat;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
#room-scalp::before {
  content: '';
  position: absolute;
  top: 34px; right: 16px; left: auto;
  width: 28px; height: 32px;
  z-index: 2;
  background:
    /* 노란 번개 표지판 (bolt) */
    linear-gradient(#ffd60a,#ffd60a) 15px 5px  / 5px 8px no-repeat,
    linear-gradient(#ffd60a,#ffd60a) 9px 12px  / 9px 5px no-repeat,
    linear-gradient(#ffd60a,#ffd60a) 8px 15px  / 5px 11px no-repeat,
    /* 표지판 판 */
    linear-gradient(#123c35,#123c35) 3px 3px / 22px 26px no-repeat,
    linear-gradient(#0a221e,#0a221e) 0 0 / 28px 32px no-repeat;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
  border: 1px solid #000;
}

/* --- Scalp desk pixel prop: 빨간 LED 타이머 --- */
.prop.led-timer {
  width: 28px; height: 15px;
  background:
    /* red LED digits */
    linear-gradient(#f85149,#f85149) 3px 4px  / 4px 7px no-repeat,
    linear-gradient(#f85149,#f85149) 9px 4px  / 4px 7px no-repeat,
    linear-gradient(#f85149,#f85149) 15px 4px / 2px 7px no-repeat,
    linear-gradient(#f85149,#f85149) 19px 4px / 4px 7px no-repeat,
    /* bezel */
    linear-gradient(#05050a,#05050a) 0 0 / 28px 15px no-repeat;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,.55), 0 0 4px rgba(248,81,73,.4);
}

/* room bodies */
.room-body { position: relative; z-index: 1; height: 100%; }
.analyst-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  gap: 4px;
  align-items: end;
  justify-items: center;
}
.scalp-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 6px;
  height: 100%;
}
.research-body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}
.round-table {
  width: 44px; height: 26px;
  background: #1c2a4d;
  border: 2px solid #0d1730;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 2px 2px 0 rgba(0,0,0,.4);
  align-self: center;
}
.trading-body {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
}

/* ==========================================================================
   DESK / CHARACTER
   ========================================================================== */
.desk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px;
}
.sprite {
  width: 32px; height: 32px;
  display: block;
  order: 1;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.35));
}
.nametag { order: 3; }
.badge   { order: 4; }

/* pixel desk + monitor in front of analysts, scalpers, and the head trader */
#room-analyst .desk::after,
#room-scalp .desk::after,
#desk-ace::after {
  content: '';
  order: 2;
  width: 56px;
  height: 24px;
  margin-top: -6px;
  z-index: 2;
  background:
    /* monitor screen */
    linear-gradient(#37c96b, #1f7a3f) 21px 1px / 14px 7px no-repeat,
    /* monitor frame */
    linear-gradient(#0e0e16, #0e0e16) 19px 0   / 18px 9px no-repeat,
    /* monitor stand */
    linear-gradient(#23232f, #23232f) 26px 9px / 4px 2px no-repeat,
    /* desk top */
    linear-gradient(#a8845c, #a8845c) 0 11px / 56px 5px no-repeat,
    /* desk front */
    linear-gradient(#6e5233, #6e5233) 0 16px / 56px 8px no-repeat,
    /* desk front shading */
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)) 3px 19px / 50px 3px no-repeat;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.35));
}
.desk.mirror .sprite { transform: scaleX(-1); }
.desk.mirror.bounce .sprite,
.desk.bounce.mirror .sprite { /* keep mirror during bounce handled below */ }

.nametag {
  font-size: 9px;
  color: #fffbe6;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 1px;
}
.badge {
  font-size: 8px;
  color: #dfe4f0;
  background: rgba(0,0,0,.4);
  border: 1px solid #000;
  padding: 0px 4px;
  letter-spacing: .5px;
}

/* bounce (thinking) */
.desk.bounce .sprite { animation: bounce .5s steps(2) infinite; }
.desk.mirror.bounce .sprite { animation: bounce-m .5s steps(2) infinite; }
@keyframes bounce   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bounce-m { 0%,100% { transform: translateY(0) scaleX(-1); } 50% { transform: translateY(-4px) scaleX(-1); } }

/* ==========================================================================
   SPEECH BUBBLE
   ========================================================================== */
.bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  min-width: 70px;
  max-width: 140px;
  background: #f5f2e6;
  color: #16161f;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,.55);
  padding: 3px 5px;
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  display: none;
  cursor: pointer;
  z-index: 60;
}
.bubble.show { display: block; }
.bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border: 7px solid transparent;
  border-top-color: #000;
}
/* mirrored desks: keep bubble upright */
.desk.mirror .bubble { transform: translateX(-50%); }

.bubble .dots { letter-spacing: 2px; font-size: 16px; }
.bubble .dots i { font-style: normal; animation: blink 1s infinite; }
.bubble .dots i:nth-child(2) { animation-delay: .2s; }
.bubble .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,100% { opacity: .2; } 50% { opacity: 1; } }

/* ==========================================================================
   DECISION PANEL
   ========================================================================== */
#decision-panel {
  flex: 1;
  min-width: 140px;
  max-height: 100%;
  overflow-y: auto;
  background: rgba(10,8,18,.55);
  border: 2px solid #0c0c14;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 2px 2px 0 var(--shadow);
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dp-head { font-size: 9px; color: var(--ink-dim); letter-spacing: 2px; }
#dp-action {
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--amber);
  text-shadow: 2px 2px 0 #000;
  line-height: 1;
}
#decision-panel:not(.active) #dp-action { font-size: 12px; color: var(--ink-dim); letter-spacing: 1px; }

#dp-gauge {
  position: relative;
  height: 10px;
  background: #000;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.6);
}
#dp-gauge-fill {
  height: 100%;
  width: 0;
  background: var(--amber);
  transition: width .6s steps(12);
}
#dp-conf {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
#dp-levels { display: flex; flex-direction: column; gap: 3px; }
.dp-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.dp-key { color: var(--ink-dim); flex-shrink: 0; white-space: nowrap; }
.dp-row span:last-child { text-align: right; word-break: keep-all; }
#dp-rationale { font-size: 11px; line-height: 1.5; color: #e2e2ee; }

/* --- 스캘핑 플랜 소섹션 --- */
#dp-scalp {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.12);
}
#dp-scalp.hidden { display: none; }
.dp-scalp-head {
  font-size: 8px;
  color: var(--amber);
  letter-spacing: 1px;
}
.dp-scalp-top { display: flex; }
.scalp-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
  background: var(--ink-dim);
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #000;
  padding: 1px 8px;
}
.scalp-badge.long  { background: var(--green); color: #08160b; }
.scalp-badge.short { background: var(--red);   color: #fff; }
.scalp-badge.pass  { background: #4a4a5a;      color: #cfcfe0; }
#dp-scalp-note {
  font-size: 10px;
  line-height: 1.5;
  color: var(--gold);
}
#dp-scalp-note:empty { display: none; }

/* ==========================================================================
   TICKER TAPE
   ========================================================================== */
#tape {
  overflow: hidden;
  white-space: nowrap;
  background: #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  flex-shrink: 0;
}
#tape-track {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-tape 45s linear infinite;
  will-change: transform;
}
@keyframes scroll-tape {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tape-item {
  display: inline-block;
  padding: 3px 12px;
  font-size: 10px;
  color: #cfcfe0;
  border-right: 1px solid #1c1c28;
}
.tape-item b { color: var(--gold); }
.up   { color: var(--green); }
.down { color: var(--red); }

/* ==========================================================================
   DISCLAIMER
   ========================================================================== */
#disclaimer {
  text-align: center;
  font-size: 9px;
  color: #6a6a82;
  padding: 3px;
  background: var(--panel);
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* ==========================================================================
   MODAL
   ========================================================================== */
#modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.7);
}
#modal.hidden { display: none; }
.modal-box {
  position: relative;
  width: 480px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  background: #14141e;
  border: 3px solid #000;
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 18px 20px;
}
#modal-close {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--red);
  color: #fff;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 7px;
}
#modal-close:active { transform: translate(2px,2px); box-shadow: none; }
#modal-title {
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 12px;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 1px;
}
#modal-body { font-size: 13px; line-height: 1.7; color: #e6e6f0; white-space: pre-wrap; }

/* ==========================================================================
   TOASTS
   ========================================================================== */
#toasts {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.toast {
  background: #14141e;
  color: #eee;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 8px 12px;
  font-size: 12px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .25s, transform .25s;
  max-width: 320px;
}
.toast.in { opacity: 1; transform: translateX(0); }
.toast.ok  { border-left: 5px solid var(--green); }
.toast.err { border-left: 5px solid var(--red); }

/* ==========================================================================
   v1.2 — 8비트 그래픽 강화 + 에이전트 콘솔 (레퍼런스 릴스 재현)
   ========================================================================== */

/* --- 전광판: LED 가격 + MARKET 배지 + 차트 범례 --- */
#board-price {
  font-size: 20px;
  color: #fff8e0;
  text-shadow: 0 0 6px rgba(232,200,74,.45), 2px 2px 0 #000;
  letter-spacing: 1px;
}
#market-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 1px 5px;
  font-size: 8px;
  letter-spacing: 1px;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 rgba(0,0,0,.55);
  width: fit-content;
}
#market-badge .dot {
  width: 6px; height: 6px; display: inline-block;
  background: currentColor;
  animation: mb-blink 1.6s steps(2, start) infinite;
}
#market-badge.open   { background: #10301a; color: var(--green); }
#market-badge.closed { background: #22222c; color: #7a7a90; }
#market-badge.closed .dot { animation: none; }
@keyframes mb-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

#chart-wrap { position: relative; flex: 1; display: flex; }
#chart-wrap #chart { flex: 1; }
#chart-legend {
  position: absolute;
  top: 5px; right: 8px;
  display: flex; gap: 10px;
  font-size: 9px; color: #8a8aa4;
  pointer-events: none;
}
#chart-legend .lg { display: inline-flex; align-items: center; gap: 3px; }
#chart-legend .lg i { width: 8px; height: 3px; display: inline-block; }

/* --- 벽면 이퀄라이저 (8비트 장식) --- */
.eq {
  position: absolute;
  top: 3px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 14px;
  padding: 1px 2px;
  background: #05050c;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 rgba(0,0,0,.5);
  z-index: 2;
}
.eq i {
  width: 3px;
  display: block;
  background: var(--green);
  animation: eq-bounce 1s steps(4, end) infinite;
}
.eq i.r { background: var(--red); }
@keyframes eq-bounce {
  0%, 100% { height: 20%; }
  25%      { height: 75%; }
  50%      { height: 40%; }
  75%      { height: 95%; }
}
@media (prefers-reduced-motion: reduce) {
  .eq i { animation: none; }
}

/* --- STAGE: 플로어 + 콘솔 좌우 분할 --- */
#stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 6px;
  padding: 0 6px 0 0;
  min-height: 0;
  overflow: hidden;
}
#stage #floor { padding-right: 0; }

/* --- 에이전트 콘솔 --- */
#console {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 4px 0;
  background: #06060c;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 3px 3px 0 var(--shadow);
  min-height: 0;
}
#console-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 6px;
  background: #11111c;
  border-bottom: 1px solid #000;
}
#console-title { color: var(--gold); font-size: 9px; letter-spacing: 1px; }
#console-tabs { display: flex; }
.ctab {
  font: inherit;
  font-size: 9px;
  background: #0a0a10;
  color: #7a7a90;
  border: 1px solid #000;
  padding: 2px 6px;
  cursor: pointer;
  letter-spacing: 1px;
}
.ctab + .ctab { border-left: none; }
.ctab.active { background: #2c2c3c; color: var(--gold); }
.ctab:not(.active):hover { color: #cfcfe0; }

#console-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px 4px;
  font-size: 10px;
  line-height: 1.45;
  scrollbar-width: thin;
}
#console-body::-webkit-scrollbar { width: 8px; }
#console-body::-webkit-scrollbar-track { background: #0a0a12; }
#console-body::-webkit-scrollbar-thumb { background: #2c2c3c; border: 2px solid #0a0a12; }

.clog { margin-bottom: 5px; word-break: break-word; }
.clog.sys   { color: #6fb3c4; }
.clog.news  { color: #b39a3c; padding-left: 2px; }
.clog.stage {
  color: var(--gold);
  margin: 9px 0 6px;
  letter-spacing: 1px;
  border-bottom: 1px solid #24242e;
  padding-bottom: 3px;
}
.clog.verdict {
  margin: 9px 0;
  padding: 6px 8px;
  background: #12121e;
  border-left: 3px solid var(--gold);
  font-size: 13px;
  letter-spacing: 1px;
}
/* 에이전트 브리핑 — 이름 배지 + 세로 컬러바 + 전문 */
.clog.agent {
  margin: 7px 0 9px;
  padding-left: 8px;
  border-left: 3px solid var(--tint, #555);
  color: #dcdce6;
}
.clog.agent .who {
  display: inline-block;
  background: var(--tint, #555);
  color: #0a0a10;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 6px;
  margin-right: 5px;
  letter-spacing: 1px;
}
.clog.agent .role { color: #7a7a90; font-size: 10px; }
.clog.agent .body { display: block; margin-top: 4px; }
.clog .cur { color: var(--gold); }

#console-jump {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  font: inherit;
  font-size: 10px;
  background: var(--gold);
  color: #1a1408;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  padding: 3px 10px;
  cursor: pointer;
  z-index: 5;
}
#console-jump.hidden { display: none; }

#console-status {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 6px;
  background: #11111c;
  border-top: 1px solid #000;
  font-size: 9px;
  color: #7a7a90;
}
#cs-stage { color: #9a9ab4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- 긴 말풍선 (레퍼런스처럼 여러 줄) --- */
.bubble {
  max-width: 160px;
  min-width: 70px;
  text-align: left;
  line-height: 1.35;
  max-height: 60px;
  overflow: hidden;
}

/* --- 모드별 좌석 표시 (algo=리스크 위원회 / scalp·attack=스캘핑) --- */
.desk.risk-only, .desk.pm-only { display: none; }
body.mode-algo  .desk.risk-only { display: flex; }
body.mode-algo  .desk.pm-only   { display: flex; }
body.mode-algo  #desk-blitz,
body.mode-algo  #desk-guard     { display: none; }

.scalp-body { display: flex; align-items: flex-end; justify-content: space-around; gap: 6px; height: 100%; }
.trading-seats { display: flex; align-items: flex-end; gap: 10px; }

/* 리스크 위원회 3인이 들어오면 방이 좁아지므로 스프라이트를 조금 줄인다 */
body.mode-algo #room-scalp .sprite { width: 28px; height: 28px; }
body.mode-algo #room-scalp .desk::after { width: 48px; }

/* --- 판정 패널: PM 승인 표시 --- */
#dp-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 10px;
  margin-top: 2px;
}
#dp-verdict.hidden { display: none; }
#dp-verdict-badge {
  background: #2c2c3c;
  border: 2px solid #000;
  padding: 1px 7px;
  letter-spacing: 1px;
  color: var(--gold);
}
#dp-verdict-badge.approve { background: #10301a; color: var(--green); }
#dp-verdict-badge.amend   { background: #33280c; color: var(--amber); }
#dp-verdict-badge.reject  { background: #33120f; color: var(--red); }
#dp-sizing { color: #b9b9cc; }

/* --- 레이아웃 높이 고정: 콘솔 로그가 늘어나도 페이지가 커지지 않게 --- */
html, body { height: 100%; }
#app { height: 100vh; min-height: 0; overflow: hidden; }
#stage { min-height: 0; overflow: hidden; }
#floor { min-height: 0; }
#room-analyst, #room-scalp, #room-research, #room-trading { min-height: 0; }
#console { min-height: 0; }
#console-body { min-height: 0; }
#decision-panel { overflow-y: auto; }

/* --- 말풍선이 방 라벨·이퀄라이저를 덮지 않게 (라벨이 위) --- */
.bubble { z-index: 5; font-size: 9px; max-height: 56px; }
.room-label { z-index: 8; }
.eq { z-index: 8; }
.prop { z-index: 8; }

/* --- 방 상단 여유 확보: 말풍선이 라벨을 덜 가리게 --- */
.room { padding-top: 26px; }
#room-analyst, #room-scalp { padding-top: 28px; }
.bubble { max-height: 52px; }
/* 판정 패널 — 좁은 방에 스캘핑 플랜까지 들어가므로 조금 더 촘촘하게 */
#dp-action { font-size: 18px; }
#dp-rationale { font-size: 9px; line-height: 1.35; }
.dp-row { font-size: 10px; }
#dp-scalp-note { font-size: 8.5px; }

/* ==========================================================================
   v1.3 — DASHBOARD PANELS (Paper Trader, Signal, Regime, Grade)
   ========================================================================== */

/* --- 앱 높이: 100vh 고정, 스크롤 없음 --- */
#app { height: 100vh; min-height: 0; overflow: hidden; }

#dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  padding: 4px 10px;
  flex-shrink: 0;
}

.dash-panel {
  background: #08080e;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 var(--shadow);
  display: flex;
  flex-direction: column;
  max-height: 180px;
  overflow: hidden;
}
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 6px;
  background: #11111c;
  border-bottom: 1px solid #000;
}
.dash-title {
  color: var(--gold);
  font-size: 9px;
  letter-spacing: 1px;
}
.dash-refresh {
  font-size: 8px;
  color: var(--green);
  letter-spacing: 1px;
  animation: mb-blink 1.6s steps(2, start) infinite;
}
.dash-body {
  padding: 4px 6px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

/* --- Capital Gauge --- */
.dash-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dash-label {
  font-size: 8px;
  color: var(--ink-dim);
  letter-spacing: 1px;
  flex-shrink: 0;
}
.capital-gauge {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.capital-gauge-track {
  flex: 1;
  height: 10px;
  background: #000;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.6);
  position: relative;
}
.capital-gauge-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width .6s steps(12);
}
.capital-gauge-val {
  font-size: 10px;
  color: var(--gold);
  white-space: nowrap;
}
.capital-gauge-max {
  font-size: 8px;
  color: #55556a;
  white-space: nowrap;
}

/* --- Stat boxes --- */
.dash-stats {
  display: flex;
  gap: 4px;
}
.dash-stat-box {
  flex: 1;
  background: #0a0a12;
  border: 1px solid #000;
  padding: 3px 4px;
  text-align: center;
}
.dash-stat-label {
  font-size: 8px;
  color: #55556a;
  letter-spacing: 1px;
  margin-bottom: 1px;
}
.dash-stat-val {
  font-size: 11px;
  color: #f2f2f8;
}
.dash-stat-val.up   { color: var(--green); }
.dash-stat-val.down { color: var(--red); }

/* --- Sub-sections --- */
.dash-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-sub-head {
  font-size: 8px;
  color: #55556a;
  letter-spacing: 1px;
  border-bottom: 1px solid #15151f;
  padding-bottom: 1px;
}
.dash-list {
  font-size: 9px;
  color: #b9b9cc;
  line-height: 1.4;
}
.dash-list .pos-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  border-bottom: 1px solid #0f0f18;
}
.dash-list .trade-row {
  display: inline-block;
  padding: 1px 4px;
  margin: 1px 1px;
  border: 1px solid #000;
  font-size: 8px;
  letter-spacing: .5px;
}
.trade-row.win  { background: #10301a; color: var(--green); border-color: #1a4028; }
.trade-row.loss { background: #33120f; color: var(--red); border-color: #4a1a16; }

/* --- Signal Score --- */
.signal-score-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.signal-score-bar {
  width: 100%;
  height: 10px;
  display: flex;
  position: relative;
  border: 1px solid #000;
  overflow: hidden;
}
.signal-score-zone {
  flex: 1;
  height: 100%;
}
.signal-score-zone.neg { background: linear-gradient(90deg, #4a1a16, #1a1a24); }
.signal-score-zone.pos { background: linear-gradient(90deg, #1a1a24, #10301a); }
.signal-needle {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 4px;
  background: var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(232,200,74,.6);
  transition: left .6s steps(8);
}
.signal-score-labels {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #44445a;
}
.signal-score-num {
  font-size: 16px;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(232,200,74,.3), 2px 2px 0 #000;
}

/* Direction badge */
.direction-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 2px 8px;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #000;
}
.direction-badge.long    { background: var(--green); color: #08160b; }
.direction-badge.short   { background: var(--red);   color: #fff; }
.direction-badge.neutral { background: #4a4a5a;      color: #cfcfe0; }

/* Indicator grid */
.indicator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.indicator-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  background: #0a0a12;
  border: 1px solid #15151f;
}
.ind-name {
  font-size: 8px;
  color: #55556a;
  letter-spacing: 1px;
}
.ind-val {
  font-size: 10px;
  color: #b9b9cc;
}
.ind-val.up   { color: var(--green); }
.ind-val.down { color: var(--red); }

/* --- Market Regime Badge --- */
.regime-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 3px 10px;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
.regime-badge.trending-up   { background: var(--green); color: #08160b; }
.regime-badge.trending-down { background: var(--red);   color: #fff; }
.regime-badge.ranging        { background: var(--amber); color: #1a1408; }
.regime-badge.volatile       { background: #e87040;      color: #1a0e08; }

/* --- Trade Grade Legend --- */
.grade-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.grade-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.grade-letter {
  display: inline-block;
  width: 18px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #000;
  flex-shrink: 0;
}
.grade-a { background: var(--green); color: #08160b; }
.grade-b { background: #4a9de8;      color: #081628; }
.grade-c { background: var(--amber); color: #1a1408; }
.grade-d { background: #8a6a2a;      color: #1a1408; }
.grade-f { background: var(--red);   color: #fff; }
.grade-desc {
  font-size: 9px;
  color: #b9b9cc;
}

/* --- Mobile console toggle (hidden on desktop) --- */
#mobile-console-toggle {
  display: none;
}

/* ==========================================================================
   MOBILE RESPONSIVE — max-width: 768px
   Desktop layout is untouched. Only mobile overrides below.
   ========================================================================== */
@media (max-width: 768px) {
  /* --- Reset constraints --- */
  body { min-width: 0; }
  #app { height: auto; min-height: 100vh; overflow: auto; }

  /* --- Adaptive font sizes --- */
  html { font-size: clamp(11px, 2.8vw, 13px); }

  /* --- TOP BAR: wrap to 2 lines --- */
  #topbar {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 6px 8px;
  }
  #logo {
    font-size: 11px;
    order: 0;
  }
  #clocks {
    order: 1;
    margin-left: auto;
    gap: 6px;
  }
  #controls {
    order: 2;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
  #symbol-input {
    flex: 1;
    min-width: 100px;
    padding: 8px 10px;
    font-size: 14px;
  }
  #analyze-btn {
    padding: 8px 14px;
    font-size: 12px;
    min-height: 44px;
  }
  .mode-btn {
    padding: 6px 8px;
    font-size: 9px;
    min-height: 44px;
  }

  /* --- BOARD: stack vertically --- */
  #board {
    flex-direction: column;
    margin: 4px 6px 0;
    gap: 6px;
  }
  #board-info {
    min-width: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  #board-price { font-size: 18px; }
  #chart { height: 48px; }

  /* --- VENUE BOARD: single column --- */
  #vb-rows {
    grid-template-columns: 1fr;
  }
  .vb-row {
    grid-template-columns: 1fr 80px 50px;
    gap: 4px;
    padding: 3px 6px;
  }
  .vb-row .vb-note { display: none; }
  #vb-head { flex-wrap: wrap; gap: 4px; }
  #vb-sub { font-size: 9px; }

  /* --- STAGE: full width, stack vertically, console hidden --- */
  #stage {
    grid-template-columns: 1fr;
    padding: 0 6px;
    overflow: visible;
  }

  /* --- FLOOR: 1 column stack --- */
  #floor {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 6px;
    padding: 4px 0;
  }
  #room-analyst  { grid-row: auto; grid-column: auto; }
  #room-research { grid-row: auto; grid-column: auto; }
  #room-scalp    { grid-row: auto; grid-column: auto; }
  #room-trading  { grid-row: auto; grid-column: auto; }

  .room {
    min-height: 140px;
    padding-top: 28px;
  }

  /* --- Agent cards: 2 columns --- */
  .analyst-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 8px;
  }

  /* --- Scalp body: wrap 2 columns --- */
  .scalp-body {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .scalp-body .desk { flex: 0 0 calc(50% - 8px); }

  /* --- Research body --- */
  .research-body { gap: 8px; }
  .round-table { width: 30px; height: 18px; }

  /* --- Trading body: stack --- */
  .trading-body {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .trading-seats {
    justify-content: center;
    gap: 12px;
  }
  #decision-panel {
    min-width: 0;
    max-height: none;
  }

  /* --- Bubbles: wider on mobile --- */
  .bubble {
    max-width: 180px;
    font-size: 10px;
  }

  /* --- CONSOLE: hidden by default, shown as bottom sheet --- */
  #console {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60vh;
    z-index: 9000;
    margin: 0;
    border-radius: 8px 8px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  #console.mobile-open {
    transform: translateY(0);
  }

  /* --- Mobile console toggle button --- */
  #mobile-console-toggle {
    display: block;
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 8999;
    background: var(--gold);
    color: #1a1408;
    border: 2px solid #000;
    box-shadow: 2px 2px 0 #000;
    font-family: 'Galmuri11', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 10px 14px;
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
  }
  #mobile-console-toggle:active {
    transform: translate(2px, 2px);
    box-shadow: none;
  }

  /* --- DASHBOARD: 2 columns --- */
  #dashboard {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px 6px;
  }
  .dash-panel {
    max-height: 200px;
  }

  /* --- TICKER TAPE --- */
  #tape { font-size: 9px; }
  .tape-item { padding: 3px 8px; font-size: 9px; }

  /* --- MODAL: full width on mobile --- */
  .modal-box {
    width: 95vw;
    max-height: 85vh;
    padding: 14px 12px;
  }
  #modal-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Toasts: wider on mobile --- */
  #toasts {
    left: 12px;
    right: 12px;
    bottom: 60px;
    align-items: stretch;
  }
  .toast {
    max-width: none;
    font-size: 11px;
  }

  /* --- Auth gate mobile adjustments --- */
  #auth-gate input {
    min-height: 44px;
  }
  #auth-gate button {
    min-height: 44px;
    min-width: 44px;
  }

  /* --- Sprites: slightly larger touch targets --- */
  .desk {
    padding: 4px;
    min-width: 60px;
  }
  .nametag { font-size: 9px; }
  .badge { font-size: 8px; }

  /* --- Wall decorations: hide some on mobile to save space --- */
  #room-analyst::before,
  #room-research::before,
  #room-trading::before,
  #room-scalp::before {
    display: none;
  }

  /* --- CRT effect: lighter on mobile for readability --- */
  .crt { opacity: 0.03; }
}

/* ==========================================================================
   SMALL MOBILE — max-width: 380px (extra small screens)
   ========================================================================== */
@media (max-width: 380px) {
  #logo { font-size: 10px; letter-spacing: 0; }
  .clock span:last-child { font-size: 9px; }
  .clabel { font-size: 7px; }
  #dashboard { grid-template-columns: 1fr; }
  .analyst-grid { gap: 4px; }
  .mode-btn { padding: 6px 5px; font-size: 8px; }
}