/* ==========================================================================
   flash.chaosmen.gg — 1999 Bedroom CRT PC & Win98 Shareware Arcade Shell
   CLEAN-SLATE DESIGN: 100% Net-New 90s Hardware & CRT Phosphor Aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Tahoma:wght@400;700&display=swap');

:root {
  --bezel-light: #e7dfc6;
  --bezel-mid: #d3c7a4;
  --bezel-dark: #a69874;
  --bezel-shadow: #6e6347;
  --win-gray: #c0c0c0;
  --win-light: #dfdfdf;
  --win-white: #ffffff;
  --win-dark: #808080;
  --win-black: #000000;
  --win-navy: #000080;
  --win-teal: #008080;
  --win-blue-grad: #1084d0;
  --crt-bg: #041008;
  --crt-phosphor: #33ff66;
  --crt-phosphor-dim: #1b8c38;
  --crt-amber: #ffb000;
  --crt-cyan: #00e5ff;
  --crt-red: #ff3b30;
}

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #090604;
  font-family: "Tahoma", "MS Sans Serif", Geneva, sans-serif;
  font-size: 12px;
  color: var(--win-black);
  overflow-x: hidden;
  user-select: none;
}

/* 1999 Kid's Bedroom Desk Environment Backdrop */
.bedroom-environment {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-image:
    radial-gradient(circle at 50% 46%, rgba(16, 48, 36, 0.25) 0%, rgba(6, 4, 3, 0.86) 78%),
    url('/static/img/crt_bedroom_bg.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 18px 22px;
}

/* Physical Beige 90s CRT Monitor Chassis */
.crt-monitor-chassis {
  position: relative;
  width: min(1480px, 98vw);
  background:
    linear-gradient(145deg, var(--bezel-light) 0%, var(--bezel-mid) 52%, var(--bezel-dark) 100%);
  border-radius: 28px 28px 20px 20px;
  padding: 22px 26px 16px;
  box-shadow:
    inset 3px 3px 6px rgba(255, 255, 255, 0.72),
    inset -6px -8px 14px rgba(70, 58, 34, 0.65),
    0 28px 70px rgba(0, 0, 0, 0.92),
    0 0 60px rgba(51, 255, 102, 0.12);
  border: 3px solid #8c7f5e;
}

/* Top Bezel Vent & Model Badge */
.crt-bezel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 10px;
}

.crt-brand-plate {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crt-brand-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: #3a3222;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
}

.crt-model-tag {
  background: #2b261d;
  color: #e9dec0;
  font-family: 'VT323', monospace;
  font-size: 16px;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px inset #6e6347;
  letter-spacing: 0.5px;
}

/* 90s Vinyl Sticker Strip on Bezel Corner */
.crt-sticker-strip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bezel-sticker-thumb {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(60, 50, 30, 0.45);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.35);
  transform: rotate(-3deg);
}

.y2k-foil-badge {
  background: linear-gradient(135deg, #ff00cc, #33ffcc, #ffff00);
  color: #111;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #222;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  transform: rotate(2deg);
}

.pentium-turbo-badge {
  background: linear-gradient(180deg, #d8c898, #9c8c60);
  color: #1c1810;
  font-weight: 700;
  font-size: 10px;
  padding: 3px 7px;
  border: 1px outset #eee;
}

/* Deep Recessed Inner Bezel Lip around the Glass Tube */
.crt-inner-recess {
  background: #1c1914;
  padding: 12px;
  border-radius: 20px;
  box-shadow:
    inset 6px 6px 16px rgba(0, 0, 0, 0.95),
    inset -4px -4px 10px rgba(80, 70, 50, 0.4),
    0 2px 0 rgba(255, 255, 255, 0.65);
}

/* Curved Glass CRT Tube Screen */
.crt-glass-screen {
  position: relative;
  width: 100%;
  min-height: 700px;
  background-color: var(--win-teal);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: filter 0.25s ease, transform 0.2s ease;
}

.crt-glass-screen.curvature-on {
  border-radius: 22px;
  box-shadow:
    inset 0 0 55px rgba(0, 0, 0, 0.72),
    inset 0 2px 12px rgba(255, 255, 255, 0.12);
}

/* CRT Power-Off Tube Collapse Effect */
.crt-glass-screen.power-off {
  filter: brightness(0) contrast(4);
  background: #000 !important;
}

/* Mechanical Degauss Screen Wobble Animation */
@keyframes crt-degauss-pulse {
  0%   { transform: scale(1) skew(0deg, 0deg); filter: hue-rotate(0deg) saturate(1); }
  15%  { transform: scale(1.03, 0.94) skew(3deg, -2deg); filter: hue-rotate(140deg) saturate(3) contrast(1.5); }
  30%  { transform: scale(0.96, 1.04) skew(-3deg, 2deg); filter: hue-rotate(-110deg) saturate(2.5); }
  50%  { transform: scale(1.015, 0.985) skew(1.5deg, -1deg); filter: hue-rotate(60deg) saturate(1.8); }
  75%  { transform: scale(0.995, 1.005) skew(-0.6deg, 0.4deg); filter: hue-rotate(-25deg); }
  100% { transform: scale(1) skew(0deg, 0deg); filter: hue-rotate(0deg) saturate(1); }
}

.crt-glass-screen.degaussing {
  animation: crt-degauss-pulse 0.85s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ==========================================================================
   Windows 98 SE / ChaosOS 99 Workspace Grid inside the CRT Tube
   ========================================================================== */

.win98-desktop-workspace {
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  gap: 8px;
  padding: 8px;
  flex: 1;
  min-height: 650px;
}

/* Classic Win98 3D Beveled Window Frame */
.win98-window {
  min-width: 0;
  background-color: var(--win-gray);
  border-top: 2px solid var(--win-light);
  border-left: 2px solid var(--win-light);
  border-right: 2px solid var(--win-black);
  border-bottom: 2px solid var(--win-black);
  box-shadow:
    inset 1px 1px 0 var(--win-white),
    inset -1px -1px 0 var(--win-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.win98-titlebar {
  background: linear-gradient(90deg, var(--win-navy) 0%, var(--win-blue-grad) 100%);
  color: var(--win-white);
  font-weight: 700;
  font-size: 12px;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  letter-spacing: 0.2px;
}

.win98-titlebar.amber-header {
  background: linear-gradient(90deg, #4b1d00 0%, #9e4700 100%);
}

.win98-titlebar-text {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win98-window-controls {
  display: flex;
  gap: 2px;
}

.win98-ctrl-btn {
  width: 16px;
  height: 14px;
  background: var(--win-gray);
  border-top: 1px solid var(--win-white);
  border-left: 1px solid var(--win-white);
  border-right: 1px solid var(--win-black);
  border-bottom: 1px solid var(--win-black);
  font-size: 9px;
  font-weight: 700;
  line-height: 11px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  color: #000;
}

/* Classic Raised & Sunken Buttons / Inputs */
.win98-btn {
  background: var(--win-gray);
  color: var(--win-black);
  border-top: 2px solid var(--win-white);
  border-left: 2px solid var(--win-white);
  border-right: 2px solid var(--win-black);
  border-bottom: 2px solid var(--win-black);
  box-shadow: inset -1px -1px 0 var(--win-dark);
  padding: 4px 10px;
  font-family: "Tahoma", sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.win98-btn:active, .win98-btn.active {
  border-top: 2px solid var(--win-black);
  border-left: 2px solid var(--win-black);
  border-right: 2px solid var(--win-white);
  border-bottom: 2px solid var(--win-white);
  box-shadow: inset 1px 1px 0 var(--win-dark);
  transform: translate(1px, 1px);
}

.win98-btn.primary-green {
  background: #145a28;
  color: #66ff99;
}

.win98-sunken {
  background: var(--win-white);
  border-top: 2px solid var(--win-dark);
  border-left: 2px solid var(--win-dark);
  border-right: 2px solid var(--win-white);
  border-bottom: 2px solid var(--win-white);
  box-shadow: inset 1px 1px 0 var(--win-black);
}

/* Left Column: 20-Game Program Manager Explorer */
.explorer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--win-dark);
}

.explorer-filter-btn {
  flex: 1 1 45%;
  font-size: 10px;
  padding: 3px 6px;
  justify-content: center;
}

.game-program-list {
  flex: 1;
  overflow-y: auto;
  margin: 6px;
  padding: 4px;
  max-height: 495px;
}

.game-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 6px;
  border-bottom: 1px dotted #d0d0d0;
  cursor: pointer;
  color: #000;
}

.game-list-item:hover {
  background: #e4ecff;
}

.game-list-item.selected {
  background: var(--win-navy);
  color: var(--win-white);
}

.game-list-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.game-glyph {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.game-meta-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.game-item-title {
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-item-sub {
  font-size: 10px;
  opacity: 0.8;
}

.game-item-record-pill {
  font-family: 'VT323', monospace;
  font-size: 14px;
  background: #081c0e;
  color: var(--crt-phosphor);
  padding: 1px 5px;
  border: 1px solid #1f6b32;
  white-space: nowrap;
}

/* Shareware CD Mini Banner in Left Column */
.cdrom-promo-box {
  margin: 0 6px 6px;
  padding: 6px;
  background: #12101b;
  color: #fff;
  border: 2px inset var(--win-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.cdrom-promo-box img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border: 1px solid #00e5ff;
}

.cdrom-promo-text {
  font-family: 'VT323', monospace;
  font-size: 15px;
  line-height: 1.15;
  color: #66ffff;
}

/* Center Column: Ruffle SWF Stage & ChaosScoreHook Telemetry Deck */
.stage-menubar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: #d6d3ce;
  border-bottom: 1px solid var(--win-dark);
  gap: 8px;
}

.stage-game-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.exe-badge {
  font-family: 'VT323', monospace;
  font-size: 16px;
  background: #000;
  color: var(--crt-amber);
  padding: 1px 7px;
  border: 1px inset #666;
}

.ruffle-viewport-wrapper {
  position: relative;
  flex: 1;
  margin: 6px;
  background: #000;
  border: 3px inset #666;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#ruffle-stage {
  width: 100%;
  height: 100%;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ruffle-stage ruffle-player,
#ruffle-stage ruffle-embed,
#ruffle-stage object,
#ruffle-stage embed {
  width: 100% !important;
  height: 440px !important;
  display: block;
}

/* Score Hook & Submission Action Deck below Game Stage */
.score-hook-deck {
  margin: 0 6px 6px;
  padding: 7px 9px;
  background: #101812;
  border: 2px inset #4c584e;
  color: var(--crt-phosphor);
  font-family: 'VT323', monospace;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hook-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 16px;
}

.hook-led-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.led-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--crt-phosphor);
  box-shadow: 0 0 8px var(--crt-phosphor);
}

.hook-submit-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.crt-score-input {
  background: #020904;
  color: var(--crt-phosphor);
  border: 2px inset #1f6b32;
  font-family: 'VT323', monospace;
  font-size: 19px;
  padding: 2px 8px;
  width: 135px;
}

.telemetry-console {
  background: #030a05;
  border: 1px solid #164422;
  padding: 4px 7px;
  height: 54px;
  overflow-y: auto;
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: #7dff9e;
  line-height: 1.2;
}

/* Right Column: Glowing Green-Phosphor CRT Leaderboard Terminal */
.phosphor-terminal {
  flex: 1;
  margin: 6px;
  padding: 8px;
  background: var(--crt-bg);
  color: var(--crt-phosphor);
  border: 3px inset #4a5a4e;
  font-family: 'VT323', monospace;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.player-identity-card {
  background: #081d0f;
  border: 1px solid var(--crt-phosphor-dim);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.identity-inputs-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
}

.crt-tag-input {
  min-width: 0;
  width: 100%;
  background: #000;
  color: var(--crt-amber);
  border: 1px solid var(--crt-phosphor-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 2px;
}

.crt-name-input {
  min-width: 0;
  width: 100%;
  background: #000;
  color: var(--crt-phosphor);
  border: 1px solid var(--crt-phosphor-dim);
  font-family: 'VT323', monospace;
  font-size: 17px;
  padding: 2px 6px;
}

.terminal-tabs {
  display: flex;
  gap: 4px;
}

.terminal-tab-btn {
  flex: 1;
  background: #081d0f;
  color: var(--crt-phosphor);
  border: 1px solid var(--crt-phosphor-dim);
  font-family: 'VT323', monospace;
  font-size: 16px;
  padding: 3px 6px;
  cursor: pointer;
}

.terminal-tab-btn.active {
  background: var(--crt-phosphor);
  color: #021006;
  font-weight: 700;
}

.leaderboard-scroll {
  flex: 1;
  overflow-y: auto;
  max-height: 390px;
  border-top: 1px dashed var(--crt-phosphor-dim);
  padding-top: 6px;
}

.crt-score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}

.crt-score-table th {
  text-align: left;
  color: var(--crt-amber);
  border-bottom: 1px solid var(--crt-phosphor-dim);
  padding: 2px 4px;
  font-size: 15px;
}

.crt-score-table td {
  padding: 3px 4px;
  border-bottom: 1px dotted rgba(51, 255, 102, 0.2);
}

.crt-score-table tr.rank-1 td {
  color: var(--crt-amber);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.55);
}

.arcade-tag-chip {
  display: inline-block;
  background: #0f3319;
  color: var(--crt-cyan);
  padding: 0 4px;
  border: 1px solid rgba(0, 229, 255, 0.4);
  margin-right: 4px;
}

.arcade-king-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0b2412;
  border: 1px solid var(--crt-amber);
  padding: 5px 7px;
}

.arcade-king-banner img {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  object-fit: cover;
}

/* Windows 98 Bottom Taskbar */
.win98-taskbar {
  background: var(--win-gray);
  border-top: 2px solid var(--win-white);
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 60;
}

.taskbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.start-btn {
  font-weight: 700;
  font-size: 12px;
  padding: 3px 8px;
}

.taskbar-tray {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px;
  font-size: 11px;
}

/* Physical Bottom CRT Monitor Controls Deck */
.crt-bezel-bottom-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 2px;
  gap: 12px;
  flex-wrap: wrap;
}

.hardware-buttons-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hw-bezel-btn {
  background: linear-gradient(180deg, #dfd6bc 0%, #b8ab86 100%);
  color: #2b2416;
  border: 2px outset #f3ebd4;
  border-radius: 5px;
  padding: 5px 11px;
  font-family: "Tahoma", sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.hw-bezel-btn:active {
  border-style: inset;
  transform: translateY(1px);
}

.power-button-assembly {
  display: flex;
  align-items: center;
  gap: 8px;
}

.power-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #28ff55;
  box-shadow: 0 0 10px #28ff55;
  border: 1px solid #0b4d1a;
}

.power-led.off {
  background: #ff8800;
  box-shadow: 0 0 6px #ff8800;
}

/* ==========================================================================
   Native <dialog> Rules (Modern Web Guidance Compliant)
   ========================================================================== */
dialog:modal {
  overscroll-behavior: contain;
  padding: 0;
  border: none;
  background: transparent;
  max-width: min(560px, 94vw);
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(0, 0, 0, 0.72);
}

.dialog-body-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.splash-cover-img {
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  background: #000;
  border: 2px inset var(--win-dark);
}

@media (max-width: 1180px) {
  .win98-desktop-workspace {
    grid-template-columns: 1fr;
  }
}