clone

a browser grid puzzle game where you push words around to rewrite the rules of each level

main
miau-is-true / src / overrides.css
overrides.css 4.4K
1.status-dot.blocked {2 background: #d26e57;3}4.icon-button {5 margin-left: 6px;6}7.move-counter {8 gap: 7px;9}10.action-button {11 border: 1px solid #d2c4b2;12 background: #f6eee2;13 color: #706659;14 border-radius: 6px;15 padding: 6px 8px;16 font:17 9px "DM Mono",18 monospace;19 letter-spacing: 0.02em;20 cursor: pointer;21}22.action-button:hover:not(:disabled) {23 background: #eee1d0;24}25.action-button:disabled {26 opacity: 0.42;27 cursor: not-allowed;28}29.action-button kbd {30 font:31 9px "DM Mono",32 monospace;33 color: #a29482;34}35.win-toast[hidden] {36 display: none;37}38.toast-button {39 margin-top: 9px;40 border: 1px solid #756b5d;41 background: #e8b34e;42 color: #302e2a;43 border-radius: 5px;44 padding: 7px 10px;45 font:46 10px "DM Mono",47 monospace;48 cursor: pointer;49}50.sr-only {51 position: absolute;52 width: 1px;53 height: 1px;54 padding: 0;55 margin: -1px;56 overflow: hidden;57 clip: rect(0, 0, 0, 0);58 white-space: nowrap;59 border: 0;60}61.pack-list {62 display: grid;63 gap: 4px;64 margin-top: 12px;65}66.pack-choice {67 display: flex;68 align-items: baseline;69 justify-content: space-between;70 gap: 8px;71 border: 1px solid transparent;72 border-radius: 6px;73 background: transparent;74 text-align: left;75 padding: 7px;76 color: #675e52;77 cursor: pointer;78}79.pack-choice:hover,80.pack-choice.active {81 background: #efe4d4;82 border-color: #e0d0ba;83}84.pack-choice strong {85 font-size: 11px;86 font-weight: 500;87}88.pack-choice small {89 font:90 9px "DM Mono",91 monospace;92 color: #9b8c7b;93}94.mod-actions {95 display: flex;96 gap: 6px;97 margin-top: 10px;98}99.mod-actions .file-button {100 font-size: 9px;101 padding: 7px 8px;102}103.share-url-input {104 display: block;105 width: 100%;106 margin-top: 8px;107 border: 1px solid #d6c8b5;108 background: #fffaf2;109 color: #8c7e6d;110 border-radius: 5px;111 padding: 7px 8px;112 font:113 9px "DM Mono",114 monospace;115 overflow: hidden;116 text-overflow: ellipsis;117}118.stage-shell {119 position: fixed;120 inset: 0;121 z-index: 20;122 display: grid;123 place-items: center;124 background: rgba(15, 14, 13, 0.92);125 color: #f2eee6;126 touch-action: none;127}128.stage-shell[hidden] {129 display: none;130}131.stage-card {132 min-width: min(86vw, 520px);133 padding: 42px 46px;134 border: 1px solid #4a4640;135 background: #191816;136 box-shadow: 10px 10px 0 #000;137 text-align: center;138}139.stage-eyebrow {140 font:141 11px "DM Mono",142 monospace;143 letter-spacing: 0.18em;144 color: #ff4b3e;145}146.stage-title {147 margin: 16px 0 28px;148 font:149 600 clamp(27px, 5vw, 52px)/1.05 "Space Grotesk",150 sans-serif;151 letter-spacing: -0.05em;152}153.stage-prompt {154 display: inline-block;155 padding: 10px 15px;156 border: 1px solid #f2eee6;157 font:158 600 12px "DM Mono",159 monospace;160 letter-spacing: 0.08em;161}162.stage-help {163 margin-top: 28px;164 color: #8e877c;165 font:166 10px "DM Mono",167 monospace;168 letter-spacing: 0.08em;169}170.stage-sr {171 position: absolute;172 width: 1px;173 height: 1px;174 padding: 0;175 margin: -1px;176 overflow: hidden;177 clip: rect(0, 0, 0, 0);178 white-space: nowrap;179 border: 0;180}181.stage-player {182 background: #0f0e0d;183 overflow: hidden;184 height: 100%;185 overscroll-behavior: none;186}187html:has(body.stage-player) {188 height: 100%;189 overflow: hidden;190 overscroll-behavior: none;191}192.stage-player .app-shell {193 display: none;194}195.stage-player .stage-canvas {196 display: block;197 position: fixed;198 inset: 0;199 width: 100vw;200 height: 100vh;201 max-height: none;202 border-radius: 0;203 background: #0f0e0d;204 outline: none;205}206.stage-player .sidebar {207 display: none;208}209.stage-player .app-layout {210 display: block;211 max-width: 1080px;212 margin: 0 auto;213}214.stage-player .play-column {215 width: 100%;216}217.stage-player .board-wrap {218 background: #191816;219 border-color: #4a4640;220}221.stage-player .board-wrap canvas {222 background: #191816;223}224.stage-player .level-strip {225 color: #f2eee6;226}227.stage-player .level-strip h1 {228 color: #f2eee6;229}230.stage-player .under-board {231 color: #8e877c;232}233@media (max-width: 760px) {234 .stage-player .stage-canvas {235 touch-action: none;236 }237 .stage-card {238 min-width: 88vw;239 padding: 30px 22px;240 }241}242.stage-choices {243 display: flex;244 justify-content: center;245 gap: 10px;246 margin: 16px 0 4px;247}248.stage-choice {249 border: 1px solid #8e877c;250 background: #191816;251 color: #f2eee6;252 padding: 10px 12px;253 font:254 600 10px "DM Mono",255 monospace;256 letter-spacing: 0.06em;257 cursor: pointer;258}259.stage-choice-primary {260 background: #ff4b3e;261 border-color: #ff4b3e;262 color: #0f0e0d;263}