/* =========================================================
   ST22 OS — SHOWTIME22
   Un desktop retro pe un monitor CRT vechi, monocrom, verde.
   ========================================================= */

:root {
  --phosphor: #39ff6a;
  --phosphor-dim: #1f8f42;
  --phosphor-bright: #b6ffcf;
  --amber: #ffb02e;
  --bg: #010402;
  --mono: Consolas, "Courier New", "Lucida Console", monospace;
  --app-vh: 1vh;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: var(--mono);
}

/* ---------- Physical monitor ---------- */

.monitor {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #14140f 0%, #000 70%);
  padding: 2vh 2vw;
}

.bezel {
  position: relative;
  width: min(96vw, 1400px);
  height: min(calc(var(--app-vh) * 88), 900px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    linear-gradient(155deg, #2b2924 0%, #17150f 40%, #0c0b08 100%);
  border-radius: 26px;
  padding: 1.6% 3.2%;
  box-shadow:
    0 30px 60px rgba(0,0,0,.7),
    inset 0 2px 4px rgba(255,255,255,.08),
    inset 0 -6px 14px rgba(0,0,0,.7);
}

.bezel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.05);
  pointer-events: none;
}

.screen {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 12px / 16px;
  background: radial-gradient(ellipse at 50% 45%, #041006 0%, #000502 78%, #000 100%);
  overflow: hidden;
  box-shadow:
    inset 0 0 40px 10px rgba(0,0,0,.9),
    inset 0 0 120px rgba(0,0,0,.85);
  transition: transform .15s ease-out, filter .4s ease;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='32'%20viewBox='0%200%2012%2016'%3E%3Cpath%20d='M1,1L1,13L4,10.3L6,15L8,14L6,9.5L10,9.5Z'%20fill='%2339ff6a'%20stroke='%2303210f'%20stroke-width='1'%20stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto;
}

.screen-off-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #010302;
  pointer-events: none;
}
.screen:not(.is-off) .screen-off-overlay,
.screen:not(.is-off) .standby-hint {
  display: none;
}

/* ---------- Logo SHOWTIME (mască colorabilă) ---------- */

.brand-mark {
  display: inline-block;
  background-color: var(--phosphor);
  -webkit-mask-image: url("../assets/showtime-logo.png");
  mask-image: url("../assets/showtime-logo.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.start__logo {
  width: 34px;
  aspect-ratio: 5992 / 1687;
  vertical-align: -3px;
  margin-right: 2px;
}

.about-logo {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 5992 / 1687;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 8px rgba(57,255,106,.5));
}

.boot-splash {
  position: absolute;
  inset: 0;
  z-index: 16;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000502;
  pointer-events: none;
}
.boot-splash.is-visible {
  display: flex;
  animation: splash-fade-in .4s ease;
}
.boot-splash.is-leaving {
  animation: splash-fade-out .5s ease forwards;
}
.boot-splash__logo {
  width: min(60vw, 460px);
  aspect-ratio: 5992 / 1687;
  background-color: var(--phosphor);
  -webkit-mask-image: url("../assets/showtime-logo.png");
  mask-image: url("../assets/showtime-logo.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 0 22px rgba(57,255,106,.7));
  animation: splash-glow 1.2s ease-in-out;
}
@keyframes splash-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-fade-out { to { opacity: 0; } }
@keyframes splash-glow {
  0% { opacity: 0; transform: scale(.9); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

.standby-hint {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--phosphor);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(57,255,106,.6);
  pointer-events: none;
  animation: standby-pulse 2.4s ease-in-out infinite;
}
.standby-hint__arrow {
  font-size: 22px;
  animation: standby-arrow 1.6s ease-in-out infinite;
}
@keyframes standby-pulse {
  0%, 100% { opacity: .35; }
  50% { opacity: .95; }
}
@keyframes standby-arrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.screen.is-poweron {
  animation: power-flicker .45s ease;
}
@keyframes power-flicker {
  0% { filter: brightness(4) saturate(0); }
  15% { filter: brightness(.2); }
  30% { filter: brightness(3); }
  45% { filter: brightness(.4); }
  100% { filter: brightness(1) saturate(1); }
}

.screen.is-degauss {
  animation: degauss-wobble .75s ease;
}
@keyframes degauss-wobble {
  0% { transform: scale(1); filter: hue-rotate(0deg) saturate(1); }
  20% { transform: scale(1.02) skewX(1deg); filter: hue-rotate(40deg) saturate(2); }
  40% { transform: scale(.985) skewX(-1.5deg); filter: hue-rotate(-30deg) saturate(1.8); }
  60% { transform: scale(1.01) skewX(1deg); filter: hue-rotate(20deg) saturate(1.4); }
  80% { transform: scale(.995); filter: hue-rotate(0deg) saturate(1.1); }
  100% { transform: scale(1); filter: hue-rotate(0) saturate(1); }
}

.monitor__label {
  margin-top: 14px;
  color: #4a4737;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
}

/* ---------- Bezel hardware details ---------- */

.screw {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b6a63, #201f1a 72%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.6);
  pointer-events: none;
  z-index: 1;
}
.screw::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12%;
  width: 76%;
  height: 1px;
  background: rgba(0,0,0,.65);
  transform: translateY(-50%) rotate(35deg);
}
.screw--tl { top: 10px; left: 10px; }
.screw--tr { top: 10px; right: 10px; }
.screw--bl { bottom: 10px; left: 10px; }
.screw--br { bottom: 10px; right: 10px; }

.vents {
  position: absolute;
  top: 14%;
  right: 7px;
  width: 10px;
  height: 20%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.55) 0px,
    rgba(0,0,0,.55) 2px,
    transparent 2px,
    transparent 6px
  );
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

/* ---------- On-screen HUD ---------- */

.rec-hud {
  position: absolute;
  top: 3%;
  right: 2.5%;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--phosphor-bright);
  text-shadow: 0 0 4px rgba(57,255,106,.6);
  opacity: .85;
  pointer-events: none;
  z-index: 8;
}
.rec-hud__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 5px rgba(255,59,59,.9);
  animation: rec-blink 1.6s ease-in-out infinite;
}
@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

@media (max-width: 760px) {
  .vents, .screw { display: none; }
  .rec-hud { font-size: 9px; top: 2%; }
}

/* ---------- Control panel (hardware) ---------- */

.panel {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
}

.knob {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 35% 30%, #3a362c, #17150f 70%);
  border: 1px solid rgba(0,0,0,.7);
  box-shadow: 0 2px 3px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.15);
  cursor: ns-resize;
  touch-action: none;
}
.knob__dial {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 2px;
  height: 11px;
  background: var(--amber);
  transform-origin: 50% 14px;
  transform: translateX(-50%) rotate(var(--knob-rot, 0deg));
  box-shadow: 0 0 4px rgba(255,176,46,.8);
}
.knob__label {
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: #6b6551;
  letter-spacing: .1em;
  white-space: nowrap;
}

.panel__btn {
  height: 26px;
  padding: 0 10px;
  background: linear-gradient(180deg, #2c2820, #17150f);
  border: 1px solid #000;
  border-radius: 3px;
  color: #cfc9b8;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}
.panel__btn:active { transform: translateY(1px); }
.panel__btn--mute.is-muted { color: #6b6551; }

.power {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-left: auto;
  background: radial-gradient(circle at 35% 30%, #3a362c, #17150f 70%);
  border: 1px solid #000;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 3px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.15);
}
.power__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5a1414;
  box-shadow: 0 0 3px rgba(255,0,0,.4);
  transition: background .3s, box-shadow .3s;
}
.power[aria-pressed="false"] .power__led {
  animation: led-standby 1.8s ease-in-out infinite;
}
@keyframes led-standby {
  0%, 100% { background: #5a1414; box-shadow: 0 0 3px rgba(255,0,0,.4); }
  50% { background: #ff3b3b; box-shadow: 0 0 10px rgba(255,59,59,.9); }
}
.power[aria-pressed="true"] .power__led {
  animation: none;
  background: var(--phosphor);
  box-shadow: 0 0 8px rgba(57,255,106,.9);
}

/* ---------- Boot sequence ---------- */

.boot {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 4% 5%;
  color: var(--phosphor);
  font-size: clamp(11px, 1.6vw, 15px);
  line-height: 1.55;
  white-space: pre-wrap;
  text-shadow: 0 0 6px rgba(57, 255, 106, 0.65);
  z-index: 3;
}

.boot .ok { color: var(--phosphor-bright); }
.boot .cursor {
  display: inline-block;
  width: .55em;
  background: var(--phosphor);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* ---------- Desktop ---------- */

.desktop {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--phosphor);
}

.icons {
  position: absolute;
  top: 3%;
  left: 1.5%;
  right: 1.5%;
  bottom: 8%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 92px);
  grid-auto-rows: min-content;
  justify-content: start;
  align-content: start;
  gap: 4px 8px;
}

.icon {
  width: 92px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--phosphor);
  text-align: center;
}

.icon:hover { border-color: rgba(57,255,106,.25); }

.icon.is-selected {
  background: rgba(57, 255, 106, 0.14);
  border: 1px dashed rgba(57, 255, 106, 0.55);
}

.icon__glyph {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 22px;
  border: 1px solid var(--phosphor-dim);
  box-shadow: 0 0 10px rgba(57,255,106,.25) inset;
}

.icon__label {
  font-size: 10.5px;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.icon__file {
  font-size: 9px;
  color: var(--phosphor-dim);
}

/* ---------- Burn-in / phosphor ghosts ---------- */

.burnin-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.ghost {
  position: absolute;
  border: 1px solid rgba(57, 255, 106, 0.22);
  color: rgba(57, 255, 106, 0.22);
  font-size: 11px;
  padding: 5px 8px;
  opacity: .5;
  overflow: hidden;
  transition: opacity 22s linear;
}
.ghost.is-fading { opacity: 0; }
.ghost__title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Windows ---------- */

.windows { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.app-window {
  position: absolute;
  min-width: 200px;
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  background: #01130a;
  border: 1px solid var(--phosphor);
  box-shadow: 0 0 0 1px #000, 0 0 30px rgba(57,255,106,.2), 0 20px 40px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.app-window.is-hidden { display: none; }

.app-window__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: linear-gradient(180deg, #123a20, #06210f);
  border-bottom: 1px solid var(--phosphor-dim);
  cursor: move;
  user-select: none;
  font-size: 12px;
  letter-spacing: .04em;
}

.app-window__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-window__controls button {
  position: relative;
  width: 20px;
  height: 18px;
  margin-left: 12px;
  background: #06210f;
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.app-window__controls button::after {
  content: "";
  position: absolute;
  inset: -6px;
}
.app-window__controls button:hover {
  background: rgba(57,255,106,.2);
}

.app-window__body {
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
  overflow-y: auto;
  min-height: 0;
}

.app-window__meta {
  color: var(--phosphor-dim);
  font-size: 11px;
  margin-bottom: 10px;
}

.app-window__open {
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--phosphor);
  color: var(--phosphor);
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  cursor: pointer;
}
.app-window__open:hover {
  background: rgba(57,255,106,.18);
  box-shadow: 0 0 12px rgba(57,255,106,.4);
}

/* Terminal window specifics */

.term {
  background: #010b05;
  padding: 10px 12px;
  font-size: 13px;
  height: 320px;
  max-height: 50vh;
  overflow-y: auto;
}
.term__line { white-space: pre-wrap; margin: 0 0 2px; }
.term__input-row {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--phosphor-dim);
}
.term__prompt { color: var(--phosphor-bright); white-space: nowrap; }
.term__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--phosphor);
  font-family: var(--mono);
  font-size: 13px;
}

/* ---------- Taskbar ---------- */

.taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #0a2412, #010b05);
  border-top: 1px solid var(--phosphor-dim);
  font-size: 12px;
  z-index: 5;
}

.start {
  background: transparent;
  border: none;
  border-right: 1px solid var(--phosphor-dim);
  color: var(--phosphor-bright);
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  cursor: pointer;
}
.start:hover, .start.is-active { background: rgba(57,255,106,.15); }
.start__glyph { margin-right: 4px; }

.taskbar__tabs {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 6px;
  overflow-x: auto;
}

.taskbar__tab {
  flex: 0 0 auto;
  background: rgba(57,255,106,.08);
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 10px;
  min-width: 64px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.taskbar__tab.is-active { background: rgba(57,255,106,.22); }

.taskbar__tray {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  color: var(--phosphor-dim);
  border-left: 1px solid var(--phosphor-dim);
}

/* ---------- Start menu ---------- */

.start-menu {
  position: absolute;
  left: 0;
  bottom: 34px;
  width: 220px;
  background: #06210f;
  border: 1px solid var(--phosphor);
  box-shadow: 0 -10px 30px rgba(0,0,0,.5);
  z-index: 6;
}
.start-menu__header {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--phosphor-dim);
  border-bottom: 1px solid var(--phosphor-dim);
}
.start-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--phosphor);
  font-family: var(--mono);
  font-size: 12px;
  padding: 9px 12px;
  cursor: pointer;
}
.start-menu__item:hover { background: rgba(57,255,106,.15); }

/* =========================================================
   CRT overlay effects — intens / autentic
   ========================================================= */

.crt-vignette {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.92) 100%);
}

.crt-scanlines {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,.28) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 3px
  );
  mix-blend-mode: multiply;
  animation: scan-drift 9s linear infinite;
}
@keyframes scan-drift {
  from { background-position-y: 0; }
  to { background-position-y: 200px; }
}

.crt-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03) 0px,
    rgba(255,255,255,0) 1px
  );
}

.crt-aberration {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  box-shadow:
    2px 0 0 rgba(255,0,80,.10) inset,
    -2px 0 0 rgba(0,180,255,.10) inset;
  mix-blend-mode: screen;
}

.crt-noise {
  position: absolute;
  inset: -20%;
  z-index: 12;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(1px 1px at 10% 15%, #fff, transparent),
    radial-gradient(1px 1px at 27% 62%, #fff, transparent),
    radial-gradient(1px 1px at 55% 30%, #fff, transparent),
    radial-gradient(1px 1px at 73% 80%, #fff, transparent),
    radial-gradient(1px 1px at 88% 45%, #fff, transparent),
    radial-gradient(1px 1px at 40% 90%, #fff, transparent),
    radial-gradient(1px 1px at 15% 70%, #fff, transparent);
  background-size: 180px 180px;
  animation: noise-jump 0.2s steps(2) infinite;
}
@keyframes noise-jump {
  0% { transform: translate(0,0); }
  50% { transform: translate(-2%, 1%); }
  100% { transform: translate(1%, -2%); }
}

.crt-flicker {
  position: absolute;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  background: rgba(57,255,106,.02);
  animation: flicker 6s infinite;
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 1; background: rgba(57,255,106,.015); }
  97% { opacity: .82; background: rgba(57,255,106,.06); }
  98% { opacity: 1; }
  98.4% { opacity: .7; }
  98.6% { opacity: 1; }
}

.crt-glow {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  box-shadow: inset 0 0 60px 12px rgba(57,255,106,.06);
  background: radial-gradient(ellipse at 50% 20%, rgba(180,255,210,.05), transparent 60%);
}

/* subtle random glitch jump */
.screen.is-glitching { animation: glitch-jump .18s steps(2); }
@keyframes glitch-jump {
  0% { transform: translateX(0); }
  30% { transform: translateX(-6px) skewX(1deg); }
  60% { transform: translateX(4px) skewX(-1deg); }
  100% { transform: translateX(0); }
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  .bezel { border-radius: 16px; padding: 4vw; height: calc(var(--app-vh) * 92); }
  .icons { top: 2%; grid-template-columns: repeat(auto-fill, 86px); }
  .icon { width: 86px; }
  .taskbar__tray span:first-child { display: none; }
  .panel { gap: 10px; padding: 0 10px; }
  .knob { width: 36px; height: 36px; }
  .panel__btn { height: 34px; }
  .power { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .crt-scanlines, .crt-noise, .crt-flicker { animation: none !important; }
}

/* =========================================================
   Mini-jocuri
   ========================================================= */

.hack-status {
  margin-top: 10px;
  font-size: 12px;
  color: var(--phosphor-dim);
}
.hack-status.is-success { color: var(--phosphor-bright); }
.hack-status.is-fail { color: #ff5d5d; }

.hack-grid {
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .02em;
  max-height: 45vh;
  overflow-y: auto;
}
.hack-addr {
  color: var(--phosphor-dim);
  opacity: .6;
}
.hack-noise {
  color: var(--phosphor-dim);
  opacity: .55;
}
.hack-word {
  color: var(--phosphor-bright);
  cursor: pointer;
  padding: 0 1px;
}
.hack-word:hover:not(.is-tried) {
  background: rgba(57,255,106,.2);
}
.hack-word.is-tried { cursor: default; opacity: .4; }
.hack-word.is-wrong { color: #ff5d5d; }
.hack-word.is-correct {
  color: var(--phosphor-bright);
  background: rgba(57,255,106,.3);
  opacity: 1;
}

.portscan-grid {
  display: grid;
  gap: 3px;
}
.portscan-cell {
  aspect-ratio: 1;
  background: rgba(57,255,106,.08);
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
  font-family: var(--mono);
  font-size: 11px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.portscan-cell:hover:not(.is-revealed) {
  background: rgba(57,255,106,.18);
}
.portscan-cell.is-revealed {
  background: rgba(0,0,0,.4);
  cursor: default;
}
.portscan-cell.is-mine {
  background: rgba(255,60,60,.25);
  border-color: #ff5d5d;
  color: #ff5d5d;
}
.portscan-cell.is-flagged {
  color: var(--amber);
  border-color: var(--amber);
}

.snake-canvas {
  display: block;
  border: 1px solid var(--phosphor-dim);
  outline: none;
  box-shadow: 0 0 14px rgba(57,255,106,.15) inset;
}

.snake-pad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 4px;
  justify-content: center;
  margin-top: 10px;
}
.snake-pad__btn {
  background: linear-gradient(180deg, #123a20, #06210f);
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
}
.snake-pad__btn:active { background: rgba(57,255,106,.25); }
.snake-pad__restart { font-size: 11px; letter-spacing: .06em; }
.snake-pad__up { grid-column: 2; grid-row: 1; }
.snake-pad__left { grid-column: 1; grid-row: 2; }
.snake-pad__restart { grid-column: 2; grid-row: 2; }
.snake-pad__right { grid-column: 3; grid-row: 2; }
.snake-pad__down { grid-column: 2; grid-row: 3; }

.irc-log {
  background: #010b05;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  height: 260px;
  max-height: 45vh;
  overflow-y: auto;
}
.irc-line { margin: 0 0 3px; }
.irc-nick { color: var(--amber); margin-right: 4px; }
.irc-line--self .irc-nick { color: var(--phosphor-bright); }