#feature-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
#feature-nav button, #feature-nav .import-label, .feature-button, #feature-panel select {
  border: 1px solid #1e655f; background: #07191a; color: #bafff4; padding: 9px 12px;
  font: 600 12px Arial, sans-serif; cursor: pointer; border-radius: 0;
}
#feature-nav .import-label { display: inline-block; }
.feature-button:hover, #feature-nav button:hover { border-color: #50ffe1; background: #0b2e2c; }
.feature-button:disabled { opacity: .45; cursor: default; }
#save-status { min-height: 15px; text-align: center; margin: 0; font: 11px Arial, sans-serif; color: #9abcb9; }
#feature-panel { width: min(94vw, 760px); max-height: 92svh; margin: auto; padding: 20px; overflow: auto;
  border: 1px solid #50ffe1; background: #020607; color: #bafff4; font: 14px/1.5 Arial, sans-serif; }
#feature-panel::backdrop { background: rgb(0 0 0 / .85); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-header h2 { margin: 0; font-size: 22px; color: #50ffe1; }
.panel-close { border: 1px solid #1e655f; background: #07191a; color: #bafff4; padding: 9px; cursor: pointer; }
.panel-message { color: #a9c6c3; }
.panel-message.error { color: #ff8fa1; }
.result-score { color: #50ffe1; font-size: 36px; font-weight: 900; margin: 18px 0 8px; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.panel-content input { display: block; width: 100%; background: #07191a; color: #bafff4; border: 1px solid #1e655f; padding: 10px; }
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); gap: 8px; }
.run-list { display: grid; gap: 12px; }
.run-card { border-top: 1px solid #164143; padding: 12px 0; }
.run-card p { margin: 5px 0 10px; font-size: 12px; color: #a9c6c3; }
.run-card .feature-button { margin-right: 8px; }
.personal-records { border-bottom: 1px solid #164143; color: #50ffe1; padding: 8px 0; }
.replay-stage canvas { width: 100%; height: auto; display: block; }
.replay-stage button, .replay-stage select { min-height: 36px; }
.replay-stage input[type="range"] { padding: 0; }
:focus-visible { outline: 2px solid #50ffe1; outline-offset: 3px; }
#replay-area[hidden] { display: none; }
#game.replay-mode { width: min(92vw, 560px) !important; gap: 6px; }
.replay-mode #board, .replay-mode #feature-nav, .replay-mode #controls, .replay-mode #save-status { display: none; }
#replay-area { min-width: 0; }
#replay-area .panel-actions { margin: 5px 0 0; justify-content: center; gap: 4px; }
#replay-area .feature-button { padding: 5px 7px; font-size: 11px; }
#replay-area .panel-message { margin: 6px 0; font: 11px/1.4 Arial, sans-serif; color: #bafff4; }
#replay-area input[type="url"] { width: 100%; min-width: 0; }
.cf-replay-controls { display: grid; gap: 5px; margin-top: 5px; font: 11px Arial, sans-serif; color: #bafff4; }
.cf-replay-controls button, .cf-replay-controls select, .cf-replay-controls input[type="number"] { min-width: 0; min-height: 28px; border: 1px solid #1e655f; background: #07191a; color: #bafff4; padding: 4px; font: inherit; }
.cf-replay-transport { display: flex; gap: 4px; align-items: center; }
.cf-replay-transport select { max-width: 95px; }
.cf-replay-timing { display: grid; grid-template-columns: 1fr .65fr 1.4fr; gap: 5px; }
.cf-replay-timing label { display: grid; gap: 2px; min-width: 0; }
.cf-replay-timing select, .cf-replay-timing input { width: 100%; }
.cf-replay-timing :disabled { opacity: .5; }
.cf-replay-controls input[type="range"] { width: 100%; min-width: 0; height: 15px; margin: 0; accent-color: #50ffe1; }
.cf-replay-controls output { margin-left: auto; }
.cf-replay-options summary { width: fit-content; margin: auto; padding: 5px 12px; border: 1px solid #1e655f; background: #07191a; color: #bafff4; font-weight: 600; cursor: pointer; }
.cf-replay-options summary:hover, .cf-replay-options[open] summary { border-color: #50ffe1; background: #0b2e2c; color: #50ffe1; }
.cf-replay-options summary[aria-disabled="true"] { opacity: .5; cursor: default; }
.cf-replay-options-content { display: grid; gap: 5px; padding-top: 3px; }
.cf-replay-guidance { margin: 0; color: #a9c6c3; font: 11px/1.3 Arial,sans-serif; text-align: center; }
.cf-replay-audio { display: grid; grid-template-columns: minmax(0,1fr) 65px 72px; gap: 5px; align-items: center; }
.cf-replay-audio label { display: grid; gap: 2px; min-width: 0; }
.cf-replay-audio select { width: 100%; }
.cf-replay-audio input[type="checkbox"] { margin: 4px auto; accent-color: #50ffe1; }
@media (min-width: 520px) and (max-height: 380px) {
  #replay-area { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4px; }
  #replay-area .replay-stage, #replay-area .panel-message { grid-column: 1 / -1; }
  #replay-area .panel-actions { margin: 0; }
  .replay-stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 8px; align-items: center; }
  .replay-stage canvas { max-width: 100% !important; }
  #game.replay-mode { gap: 2px; }
  .cf-replay-controls { gap: 1px; margin-top: 1px; }
  .cf-replay-options summary { padding: 2px 6px; }
  #replay-area .feature-button { padding: 2px 6px; }
  .cf-replay-options-content { gap: 3px; }
  .cf-replay-audio { grid-template-columns: minmax(0,1fr) 45px 75px; }
}
@media (max-width: 700px), (pointer: coarse) {
  #feature-nav { margin: 0 8px; }
  #feature-nav button, #feature-nav .import-label { padding: 7px 9px; font-size: 11px; }
  #feature-panel { padding: 14px; }
}
@media (max-height: 540px) {
  .replay-mode h1 { font-size: 26px; margin: 0; }
  #game.replay-mode { gap: 3px; }
  #replay-area .feature-button { padding: 3px 6px; font-size: 10px; }
  .cf-replay-controls button, .cf-replay-controls select, .cf-replay-controls input[type="number"] { min-height: 24px; padding: 2px; }
}

.cf-replay-board { position:relative; width:100%; max-width:720px; margin:auto; min-width:0; padding-bottom:26px; }
.cf-replay-credits { position:absolute; right:2px; bottom:2px; max-width:calc(100% - 4px); color:#eafff9; font:10px/11px system-ui,sans-serif; text-align:right; pointer-events:none; }
.cf-replay-credits > div:first-child { font-weight:600; }
.cf-replay-credits > div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }