* { box-sizing: border-box; }

html {
  width: 100%;
  height: 100%;
}

:root {
  --retro-bg: #05070d;
  --retro-panel: #07090f;
  --retro-panel-2: #0b1020;
  --retro-yellow: #ffea00;
  --retro-cyan: #43f7ff;
  --retro-magenta: #ff4fd8;
  --retro-green: #77ff59;
  --retro-red: #ff4d4d;
  --retro-text: #f9fbff;
  --retro-muted: #a8b8cf;
  --retro-border: 3px solid var(--retro-yellow);
  --retro-shadow: 5px 5px 0 rgba(67, 247, 255, 0.55);
  --retro-font: "Courier New", "Lucida Console", Consolas, monospace;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(67, 247, 255, 0.08), transparent 22%),
    radial-gradient(circle at 50% 0%, #1a2140 0%, #0b1020 38%, var(--retro-bg) 100%);
  color: var(--retro-text);
  font-family: var(--retro-font);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.07) 0,
      rgba(255, 255, 255, 0.07) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity: 0.16;
  z-index: 20;
}

.hud,
.controls,
.code-guess {
  width: 100%;
  position: relative;
  z-index: 2;
}

.canvas-stage {
  flex: 1;
  width: 100%;
  min-height: 0;
  position: relative;
  display: flex;
}

.startup-canvas-actions {
  display: none;
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 28px;
  transform: translateX(-50%);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: min(760px, calc(100% - 48px));
  z-index: 6;
}

body.startup-canvas.menu-unlocked .startup-canvas-actions {
  left: 28px;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translateY(-50%);
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: min(230px, calc(100% - 56px));
  gap: 12px;
}

.achievements-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.blocks-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.settings-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.multiplayer-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.achievements-panel[hidden] {
  display: none !important;
}

.blocks-panel[hidden] {
  display: none !important;
}

.settings-panel[hidden] {
  display: none !important;
}

.multiplayer-panel[hidden] {
  display: none !important;
}

.multiplayer-card {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  background: rgba(6, 6, 8, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.multiplayer-view[hidden] {
  display: none !important;
}

.multiplayer-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.multiplayer-heading span {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffcb65;
}

.multiplayer-heading strong {
  font-size: 16px;
  color: #d7dff0;
  font-weight: 600;
}

#multiplayerWaitingView {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 4px;
}

.multiplayer-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.multiplayer-field span {
  font-size: 14px;
  color: #cfd7eb;
}

.multiplayer-field input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #f3f6fb;
  padding: 14px 16px;
  font-size: 16px;
  text-transform: uppercase;
}

.multiplayer-note {
  margin: 0 0 18px;
  font-size: 14px;
  color: #aebbd4;
  line-height: 1.45;
}

.multiplayer-room-code {
  border-radius: 14px;
  border: 1px solid rgba(255, 203, 101, 0.3);
  background: rgba(255, 203, 101, 0.08);
  color: #fff2bf;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 16px 20px;
  margin-bottom: 18px;
}

.multiplayer-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.multiplayer-actions button {
  border: 0;
  border-radius: 14px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #ff7446, #ffc146);
  color: #181818;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.multiplayer-actions button:hover {
  filter: brightness(1.06);
}

.lobby-room-code {
  width: min(360px, 100%);
  margin: 0 auto 12px;
  border-radius: 0;
  border: 4px solid #ffea00;
  background: #000;
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.16em;
  padding: 14px 18px;
  text-transform: uppercase;
}

.lobby-board {
  position: relative;
  flex: 1;
  border: 4px solid #ffea00;
  background: #000;
  padding: 24px;
  margin-bottom: 16px;
  min-height: 0;
}

.lobby-players-box {
  width: min(420px, 100%);
  min-height: 130px;
  border: 4px solid #ffea00;
  background: rgba(0, 0, 0, 0.85);
  padding: 18px 20px;
}

.lobby-players-box span {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  text-transform: lowercase;
  margin-bottom: 14px;
}

.lobby-players-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lobby-player-entry {
  color: #d8e0f0;
  font-size: 18px;
  text-transform: lowercase;
}

.lobby-start-button {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(0, 0);
  border: 4px solid #ffea00;
  background: #000;
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  text-transform: lowercase;
  padding: 18px 46px;
  cursor: pointer;
}

.lobby-start-button:hover {
  filter: brightness(1.06);
}

.lobby-start-button:disabled {
  opacity: 1;
  cursor: pointer;
  filter: none;
}

.lobby-message {
  position: absolute;
  left: 28px;
  right: 220px;
  bottom: 28px;
  margin: 0;
  color: #d7dff0;
  max-width: 520px;
}

.lobby-bottom-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}

.lobby-bottom-actions button {
  flex: 1;
  border: 4px solid #ffea00;
  background: #000;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  text-transform: lowercase;
  padding: 18px 20px;
  cursor: pointer;
}

.lobby-bottom-actions button:hover {
  filter: brightness(1.06);
}

.achievements-card {
  width: min(760px, calc(100% - 48px));
  max-height: calc(100% - 48px);
  overflow: auto;
  background: rgba(6, 6, 8, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.achievements-card[data-tier="bronze"] {
  --tier-main: #d49536;
  --tier-bright: #ffcb65;
  --tier-soft: rgba(212, 149, 54, 0.14);
  --tier-border: rgba(255, 203, 101, 0.32);
}

.achievements-card[data-tier="silver"] {
  --tier-main: #cfd6e4;
  --tier-bright: #f8fbff;
  --tier-soft: rgba(207, 214, 228, 0.14);
  --tier-border: rgba(248, 251, 255, 0.3);
}

.achievements-card[data-tier="gold"] {
  --tier-main: #f2c335;
  --tier-bright: #ffe78a;
  --tier-soft: rgba(242, 195, 53, 0.16);
  --tier-border: rgba(255, 231, 138, 0.34);
}

.achievements-card[data-tier="platinum"] {
  --tier-main: #84e7ff;
  --tier-bright: #c6f6ff;
  --tier-soft: rgba(132, 231, 255, 0.16);
  --tier-border: rgba(198, 246, 255, 0.34);
}

.achievements-card[data-tier="diamond"] {
  --tier-main: #72b7ff;
  --tier-bright: #d1e7ff;
  --tier-soft: rgba(114, 183, 255, 0.16);
  --tier-border: rgba(209, 231, 255, 0.34);
}

.achievements-card[data-tier="hard-core"] {
  --tier-main: #ff5d5d;
  --tier-bright: #ffb3b3;
  --tier-soft: rgba(255, 93, 93, 0.16);
  --tier-border: rgba(255, 179, 179, 0.34);
}

.achievements-card[data-tier="codes-"] {
  --tier-main: #b477ff;
  --tier-bright: #dcc0ff;
  --tier-soft: rgba(180, 119, 255, 0.16);
  --tier-border: rgba(220, 192, 255, 0.34);
}

.achievements-card[data-tier="funny"] {
  --tier-main: #7dff94;
  --tier-bright: #c7ffd0;
  --tier-soft: rgba(125, 255, 148, 0.16);
  --tier-border: rgba(199, 255, 208, 0.34);
}

.achievements-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.achievements-heading span {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--tier-main, #d49536);
}

.achievements-heading strong {
  font-size: 15px;
  color: #cfd7eb;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.achievement-progress {
  margin-bottom: 18px;
}

.achievement-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: #d8e0f0;
  font-size: 14px;
}

.achievement-progress-top strong {
  color: #ffffff;
  font-size: 15px;
}

.achievement-progress-bar {
  width: 100%;
  height: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

#achievementProgressFill {
  width: 0%;
  height: 100%;
  background: linear-gradient(135deg, var(--tier-main, #c77a1f), var(--tier-bright, #ffcb65));
  transition: width 0.25s ease;
}

.achievement-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px 16px;
}

.achievement-item.unlocked {
  background: var(--tier-soft, rgba(199, 122, 31, 0.14));
  border-color: var(--tier-border, rgba(255, 203, 101, 0.32));
}

.achievement-item strong {
  display: block;
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 4px;
}

.achievement-item p {
  margin: 0;
  font-size: 14px;
  color: #c9d2e6;
}

.achievement-item small {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--tier-bright, #ffcf79);
}

.achievement-item-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #cbd5e9;
  letter-spacing: 0.04em;
}

.achievement-item-progress-top strong {
  margin: 0;
  font-size: 13px;
  color: #ffffff;
}

.achievement-item-progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.achievement-item-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(135deg, var(--tier-main, #ff8f39), var(--tier-bright, #ffd870));
  transition: width 0.25s ease;
}

.achievements-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}

.achievements-footer button {
  border: 0;
  border-radius: 12px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #ff7446, #ffc146);
  color: #181818;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  min-width: 110px;
}

.achievements-footer button:disabled {
  cursor: default;
  opacity: 0.45;
  filter: grayscale(0.25);
}

.achievement-toast {
  position: absolute;
  right: 24px;
  bottom: 24px;
  min-width: 260px;
  max-width: 340px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(255, 203, 101, 0.32);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}

.achievement-toast[hidden] {
  display: none !important;
}

.achievement-toast.active {
  display: flex;
}

.achievement-toast span {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffcf79;
}

.achievement-toast strong {
  font-size: 18px;
  color: #ffffff;
}

.blocks-card {
  width: min(760px, calc(100% - 48px));
  background: rgba(6, 6, 8, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.blocks-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.blocks-heading span {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffcb65;
}

.blocks-heading strong {
  font-size: 15px;
  color: #cfd7eb;
}

.blocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.block-option {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  padding: 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.block-option:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 203, 101, 0.45);
  background: rgba(255, 203, 101, 0.08);
}

.block-option.selected {
  border-color: rgba(255, 203, 101, 0.55);
  background: rgba(255, 203, 101, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 203, 101, 0.18);
}

.block-option.locked {
  opacity: 0.56;
  cursor: default;
  filter: grayscale(0.12);
}

.block-option.locked:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.block-option strong {
  font-size: 20px;
}

.block-option small {
  color: #cdd7e9;
  font-size: 13px;
}

.block-preview {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: auto;
}

.preview-blue {
  background: #71d9ff;
}

.preview-red {
  background-color: #7f001b;
  background-image: url("player-unlocked-clean.png");
}

.preview-sirius {
  background-color: #0b3555;
  background-image: url("sirius.png");
}

.preview-plushikos {
  background-color: #d779ff;
  background-image: url("plushikos.png");
}

.preview-heartstar {
  background-color: #ff55df;
  background-image: url("heartstar.png");
}

.preview-blueorbit {
  background-color: #65e7f1;
  background-image: url("blue-orbit.png");
}

.preview-greenline {
  background-color: #153b26;
  background-image: url("greenline.png");
}

.preview-watcher {
  background-color: #1e1e1e;
  background-image: url("watcher.png");
}

.preview-heartfang {
  background-color: #34143f;
  background-image: url("heartfang.png");
}

.blocks-footer {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.blocks-footer button {
  border: 0;
  border-radius: 12px;
  padding: 12px 26px;
  background: linear-gradient(135deg, #ff7446, #ffc146);
  color: #181818;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  min-width: 120px;
}

.settings-card {
  width: min(760px, calc(100% - 48px));
  max-height: calc(100% - 48px);
  overflow: auto;
  background: rgba(6, 6, 8, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.settings-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.settings-heading span {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffcb65;
}

.settings-heading strong {
  font-size: 15px;
  color: #cfd7eb;
}

.settings-section {
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 16px;
}

.settings-section h3 {
  margin: 0 0 14px;
  font-size: 20px;
  color: #ffffff;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  color: #d8e0f0;
}

.setting-row strong {
  color: #ffffff;
}

.settings-card input[type="range"] {
  width: 100%;
  margin: 0 0 16px;
  accent-color: #ffb84e;
}

.controls-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 18px;
}

.controls-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.controls-list strong {
  color: #ffffff;
}

.controls-list span {
  color: #cdd7e9;
  text-align: right;
}

.settings-footer {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.settings-footer button {
  border: 0;
  border-radius: 12px;
  padding: 12px 26px;
  background: linear-gradient(135deg, #ff7446, #ffc146);
  color: #181818;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  min-width: 120px;
}

.pause-panel,
.gameover-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.pause-panel[hidden],
.gameover-panel[hidden] {
  display: none !important;
}

.pause-actions,
.gameover-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 6;
}

.pause-panel {
  align-items: stretch;
  justify-content: stretch;
  pointer-events: none;
}

.pause-actions {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  width: min(320px, calc(100% - 48px));
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.gameover-panel {
  align-items: stretch;
  justify-content: stretch;
  pointer-events: none;
}

.gameover-actions {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  width: min(320px, calc(100% - 48px));
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.pause-actions button,
.gameover-actions button {
  border: 0;
  border-radius: 12px;
  padding: 14px 22px;
  background: linear-gradient(135deg, #ff7446, #ffc146);
  color: #181818;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  min-width: 140px;
  width: min(220px, 100%);
}

.pause-actions button {
  min-width: 180px;
}

.gameover-actions button {
  min-width: 170px;
}

.ending-blocks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.ending-blocks.active {
  opacity: 1;
}

.ending-float {
  position: absolute;
  width: 28px;
  height: 28px;
  opacity: 0.68;
  animation: endingFloat linear infinite;
}

.ending-float.red { background: #ff5151; }
.ending-float.green { background: #4fd067; }
.ending-float.yellow { background: #ffd64a; }
.ending-float.knife {
  background: #cfd6de;
}
.ending-float.knife::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 10px;
  width: 14px;
  height: 6px;
  background: #dfe6ef;
}
.ending-float.bounty {
  width: 34px;
  height: 42px;
  background: #5a3206;
}
.ending-float.bounty::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: 50px;
  height: 10px;
  border-radius: 999px;
  background: #111;
}
.ending-float.dead-star {
  width: 34px;
  height: 34px;
  background: #8e0019;
  clip-path: polygon(50% 0%, 61% 30%, 95% 20%, 73% 50%, 95% 80%, 61% 70%, 50% 100%, 39% 70%, 5% 80%, 27% 50%, 5% 20%, 39% 30%);
}
.ending-float.player {
  background: #71d9ff;
}

.hud-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.panel {
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 16px;
  min-width: 150px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.panel span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #aebbd4;
}

.panel strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
}

.panel.large {
  flex: 1;
  min-width: 300px;
  display: flex;
  align-items: center;
  font-size: 15px;
}

#startButton {
  display: none;
}

.code-guess button:hover {
  filter: brightness(1.06);
}

#gameCanvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  aspect-ratio: auto;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(32, 43, 65, 0.92), rgba(14, 18, 28, 0.98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

#canvasStartButton,
#canvasPlayButton {
  border: 0;
  border-radius: 14px;
  padding: 18px 36px;
  background: linear-gradient(135deg, #ff7446, #ffc146);
  color: #181818;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  min-width: 210px;
}

#canvasStartButton:hover,
#canvasPlayButton:hover,
#canvasAchievementsButton:hover,
#canvasBlocksButton:hover,
#canvasSettingsButton:hover {
  filter: brightness(1.06);
}

body.startup-canvas .startup-canvas-actions {
  display: flex;
}

body.startup-canvas.multiplayer-open .startup-canvas-actions {
  display: flex;
}

body.startup-canvas.multiplayer-open .multiplayer-panel {
  display: flex;
}

body:not(.startup-canvas) .multiplayer-panel {
  display: none !important;
}

body.multiplayer-match-running .multiplayer-panel {
  display: none !important;
}

body.startup-canvas.achievements-open .startup-canvas-actions {
  display: flex;
}

body.startup-canvas.achievements-open .achievements-panel {
  display: flex;
}

body.startup-canvas.blocks-open .startup-canvas-actions {
  display: flex;
}

body.startup-canvas.blocks-open .blocks-panel {
  display: flex;
}

body.startup-canvas.settings-open .startup-canvas-actions {
  display: flex;
}

body.startup-canvas.settings-open .settings-panel {
  display: flex;
}

#canvasAchievementsButton {
  border: 0;
  border-radius: 14px;
  padding: 18px 36px;
  background: linear-gradient(135deg, #ff7446, #ffc146);
  color: #181818;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  min-width: 210px;
}

#canvasBlocksButton {
  border: 0;
  border-radius: 14px;
  padding: 18px 36px;
  background: linear-gradient(135deg, #ff7446, #ffc146);
  color: #181818;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  min-width: 210px;
}

#canvasSettingsButton {
  border: 0;
  border-radius: 14px;
  padding: 18px 36px;
  background: linear-gradient(135deg, #ff7446, #ffc146);
  color: #181818;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  min-width: 210px;
}

body.startup-canvas #canvasStartButton,
body.startup-canvas #canvasPlayButton,
body.startup-canvas #canvasAchievementsButton,
body.startup-canvas #canvasBlocksButton,
body.startup-canvas #canvasSettingsButton {
  align-items: center;
  justify-content: center;
}

body.startup-canvas:not(.menu-unlocked) #canvasPlayButton,
body.startup-canvas:not(.menu-unlocked) #canvasAchievementsButton,
body.startup-canvas:not(.menu-unlocked) #canvasBlocksButton,
body.startup-canvas:not(.menu-unlocked) #canvasSettingsButton {
  display: none;
}

body.startup-canvas.menu-unlocked #canvasStartButton {
  display: none;
}

body.startup-canvas.menu-unlocked #canvasPlayButton,
body.startup-canvas.menu-unlocked #canvasAchievementsButton,
body.startup-canvas.menu-unlocked #canvasBlocksButton,
body.startup-canvas.menu-unlocked #canvasSettingsButton {
  display: flex;
  width: 100%;
  min-width: 0;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.controls span {
  background: rgba(8, 12, 20, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  color: #d5dcef;
}

.code-guess {
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.code-guess label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #d5dcef;
}

.code-guess-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.code-guess input {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #f3f6fb;
  padding: 12px 14px;
  font-size: 16px;
}

.code-guess button {
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #9eff86, #e7ff6c);
  color: #171717;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.code-guess p {
  margin: 10px 0 0;
  color: #aebbd4;
  font-size: 14px;
}

.hud,
.controls,
.code-guess,
.multiplayer-card,
.achievements-card,
.blocks-card,
.settings-card,
.pause-actions,
.gameover-actions {
  font-family: var(--retro-font);
}

#gameCanvas {
  border-radius: 0;
  border: 4px solid var(--retro-cyan);
  background: #020409;
  box-shadow:
    0 0 0 4px #000,
    0 0 0 7px var(--retro-yellow),
    0 22px 0 rgba(0, 0, 0, 0.35);
  image-rendering: auto;
}

.panel,
.code-guess,
.multiplayer-card,
.achievements-card,
.blocks-card,
.settings-card,
.achievement-toast {
  background: linear-gradient(180deg, rgba(9, 12, 20, 0.98), rgba(1, 2, 6, 0.98));
  border: var(--retro-border);
  border-radius: 4px;
  box-shadow: var(--retro-shadow);
}

.panel {
  min-width: 150px;
  padding: 10px 14px;
}

.panel span,
.code-guess label,
.multiplayer-field span,
.achievement-toast span {
  color: var(--retro-cyan);
  letter-spacing: 0;
  text-shadow: 2px 2px 0 #000;
}

.panel strong,
.panel.large,
.multiplayer-heading span,
.blocks-heading span,
.settings-heading span,
.achievements-heading span,
.achievement-toast strong {
  color: var(--retro-text);
  letter-spacing: 0;
  text-shadow:
    2px 2px 0 #000,
    0 0 10px rgba(67, 247, 255, 0.5);
}

.panel strong {
  color: var(--retro-green);
}

.panel.large {
  border-color: var(--retro-cyan);
  color: var(--retro-text);
}

.controls span,
.settings-section,
.block-option,
.achievement-item,
.controls-list div {
  background: rgba(0, 0, 0, 0.76);
  border: 2px solid rgba(67, 247, 255, 0.55);
  border-radius: 4px;
}

.controls span {
  color: var(--retro-cyan);
  text-transform: uppercase;
}

.multiplayer-card,
.achievements-card,
.blocks-card,
.settings-card {
  padding: 24px;
}

.multiplayer-heading strong,
.blocks-heading strong,
.settings-heading strong,
.achievements-heading strong,
.multiplayer-note,
.lobby-message,
.code-guess p,
.block-option small,
.achievement-item p,
.controls-list span,
.setting-row {
  color: var(--retro-muted);
}

.multiplayer-room-code,
.lobby-room-code {
  border: var(--retro-border);
  border-radius: 4px;
  background: #000;
  color: var(--retro-yellow);
  box-shadow: var(--retro-shadow);
  text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255, 234, 0, 0.45);
}

.lobby-board,
.lobby-players-box,
.lobby-start-button,
.lobby-bottom-actions button {
  border-color: var(--retro-yellow);
  box-shadow: 4px 4px 0 rgba(255, 79, 216, 0.45);
}

.lobby-start-button,
.lobby-bottom-actions button,
.multiplayer-actions button,
.achievements-footer button,
.blocks-footer button,
.settings-footer button,
.pause-actions button,
.gameover-actions button,
#canvasStartButton,
#canvasPlayButton,
#canvasAchievementsButton,
#canvasBlocksButton,
#canvasSettingsButton,
.code-guess button {
  border: 3px solid var(--retro-yellow);
  border-radius: 4px;
  background: #000;
  color: var(--retro-text);
  font-family: var(--retro-font);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--retro-magenta);
  text-shadow: 2px 2px 0 #000;
}

.multiplayer-actions button:hover,
.achievements-footer button:hover,
.blocks-footer button:hover,
.settings-footer button:hover,
.pause-actions button:hover,
.gameover-actions button:hover,
#canvasStartButton:hover,
#canvasPlayButton:hover,
#canvasAchievementsButton:hover,
#canvasBlocksButton:hover,
#canvasSettingsButton:hover,
.code-guess button:hover,
.lobby-start-button:hover,
.lobby-bottom-actions button:hover {
  filter: none;
  color: var(--retro-yellow);
  border-color: var(--retro-cyan);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--retro-magenta);
}

.lobby-start-button:disabled,
.achievements-footer button:disabled {
  color: var(--retro-muted);
  border-color: #5c5c37;
  box-shadow: none;
}

.multiplayer-field input,
.code-guess input {
  background: #000;
  border: 2px solid var(--retro-cyan);
  border-radius: 4px;
  color: var(--retro-green);
  font-family: var(--retro-font);
  outline: none;
}

.multiplayer-field input:focus,
.code-guess input:focus {
  border-color: var(--retro-yellow);
  box-shadow: 0 0 0 3px rgba(255, 234, 0, 0.2);
}

.achievement-progress-bar,
.achievement-item-progress-bar {
  background: #000;
  border: 2px solid var(--retro-cyan);
  border-radius: 4px;
}

#achievementProgressFill,
.achievement-item-progress-fill {
  background: linear-gradient(90deg, var(--retro-green), var(--retro-yellow), var(--retro-magenta));
}

.block-option:hover,
.block-option.selected {
  border-color: var(--retro-yellow);
  background: rgba(255, 234, 0, 0.08);
  box-shadow: inset 0 0 0 2px rgba(255, 234, 0, 0.18);
}

.block-preview {
  border-radius: 2px;
  border: 3px solid #000;
  box-shadow: 0 0 0 2px var(--retro-cyan);
}

@keyframes endingFloat {
  0% {
    transform: translate3d(0, 110vh, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(45px, 48vh, 0) rotate(180deg);
  }
  100% {
    transform: translate3d(-35px, -18vh, 0) rotate(360deg);
  }
}

@media (max-width: 900px) {
  .panel { min-width: 120px; }
  .panel strong { font-size: 18px; }
  #startButton { width: 100%; }
}