1:root {2 font-family: "Space Grotesk", system-ui, sans-serif;3 color: #302e2a;4 background: #e9e1d4;5 font-synthesis: none;6}7* {8 box-sizing: border-box;9}10body {11 margin: 0;12 min-width: 320px;13 background:14 radial-gradient(circle at 12% 8%, #f8f2e9 0 20%, transparent 46%), #e9e1d4;15}16.app-shell {17 max-width: 1480px;18 margin: auto;19 padding: 28px 38px 22px;20}21.topbar {22 height: 57px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 border-bottom: 1px solid #c9bca9;27}28.brand-mark {29 display: flex;30 align-items: center;31 gap: 13px;32 letter-spacing: 0.06em;33}34.brand-mark > span {35 font-size: 25px;36 color: #e76556;37}38.brand-mark strong {39 display: block;40 font-size: 14px;41 line-height: 1.1;42}43.brand-mark small {44 display: block;45 margin-top: 3px;46 font:47 10px "DM Mono",48 monospace;49 letter-spacing: 0.13em;50 color: #817768;51}52.top-actions {53 display: flex;54 align-items: center;55 gap: 9px;56 color: #807464;57 font:58 10px "DM Mono",59 monospace;60 letter-spacing: 0.08em;61}62.status-dot {63 width: 7px;64 height: 7px;65 border-radius: 50%;66 background: #e6af47;67 box-shadow: 0 0 0 4px #f2e8d3;68}69.status-dot.won {70 background: #2d9c88;71}72.icon-button,73.soft-button {74 border: 1px solid #d0c3b2;75 background: #f5eee4;76 color: #776f64;77 border-radius: 8px;78 cursor: pointer;79}80.icon-button {81 font-size: 17px;82 width: 32px;83 height: 30px;84 margin-left: 14px;85}86.app-layout {87 display: grid;88 grid-template-columns: minmax(0, 1fr) 330px;89 gap: 30px;90 padding-top: 28px;91}92.level-strip {93 display: flex;94 align-items: flex-end;95 justify-content: space-between;96 padding: 0 2px 18px;97}98.eyebrow {99 font:100 10px "DM Mono",101 monospace;102 letter-spacing: 0.13em;103 color: #9b8c7a;104}105.level-strip h1 {106 font-size: 28px;107 line-height: 1;108 margin: 7px 0 0;109 font-weight: 600;110 letter-spacing: -0.04em;111}112.level-nav {113 display: flex;114 align-items: center;115 gap: 11px;116 font:117 10px "DM Mono",118 monospace;119 color: #847969;120}121.soft-button {122 width: 29px;123 height: 27px;124 font-size: 16px;125}126.board-wrap {127 position: relative;128 border: 1px solid #cabdac;129 border-radius: 15px;130 background: #fbf7ef;131 padding: 14px;132 box-shadow: 0 11px 26px rgba(103, 80, 53, 0.07);133}134canvas {135 display: block;136 width: 100%;137 height: auto;138 max-height: calc(100vh - 270px);139 border-radius: 8px;140}141.under-board {142 display: flex;143 justify-content: space-between;144 align-items: center;145 padding: 17px 3px 0;146 color: #857a6c;147 font:148 10px "DM Mono",149 monospace;150 letter-spacing: 0.08em;151}152.legend {153 display: flex;154 gap: 18px;155}156.legend span {157 display: flex;158 align-items: center;159 gap: 6px;160}161.legend-swatch {162 width: 7px;163 height: 7px;164 border-radius: 50%;165 display: inline-block;166 background: #766f64;167}168.legend-swatch.you {169 background: #e76556;170}171.legend-swatch.word {172 background: #e5af47;173}174.legend-swatch.object {175 background: #6f9ca8;176}177.move-counter {178 display: flex;179 gap: 10px;180 align-items: center;181}182.move-counter strong {183 font:184 500 16px "DM Mono",185 monospace;186 color: #302e2a;187}188.sidebar {189 display: flex;190 flex-direction: column;191 gap: 15px;192}193.panel {194 background: #f6efe5;195 border: 1px solid #d6c8b5;196 border-radius: 12px;197 padding: 19px 19px 18px;198 box-shadow: 0 5px 14px rgba(104, 83, 59, 0.035);199}200.panel-heading {201 display: flex;202 justify-content: space-between;203 align-items: flex-start;204}205.panel h2 {206 font-size: 17px;207 line-height: 1;208 margin: 7px 0 0;209 letter-spacing: -0.03em;210}211.pulse {212 width: 8px;213 height: 8px;214 background: #e6af47;215 border-radius: 50%;216 box-shadow: 0 0 0 5px #f0dfc5;217 margin: 5px;218}219.rules-list {220 display: flex;221 flex-wrap: wrap;222 gap: 7px;223 margin: 17px 0 13px;224}225.rule-chip {226 display: flex;227 align-items: center;228 gap: 7px;229 padding: 8px 9px;230 border: 1px solid #ded2c1;231 border-radius: 7px;232 background: #fffaf2;233 font:234 11px "DM Mono",235 monospace;236}237.rule-chip b {238 font-size: 9px;239 color: #ab9c89;240}241.rule-predicate {242 color: var(--rule-color);243 font-weight: 500;244}245.empty-rules {246 font:247 11px "DM Mono",248 monospace;249 color: #9e9180;250 padding: 13px 0;251}252.panel-note {253 margin: 0;254 font-size: 12px;255 line-height: 1.55;256 color: #8c7f70;257}258.key-row {259 display: flex;260 align-items: center;261 gap: 5px;262 flex-wrap: wrap;263 margin-top: 14px;264 font:265 11px "DM Mono",266 monospace;267 color: #766c60;268}269.key-row span {270 margin-left: 4px;271}272.key-row em {273 font-style: normal;274 color: #aa9b88;275}276.key-row kbd {277 display: inline-flex;278 align-items: center;279 justify-content: center;280 width: 24px;281 height: 23px;282 background: #fffaf2;283 border: 1px solid #d7cab8;284 border-radius: 5px;285 font-size: 10px;286 color: #6c645a;287}288.level-list {289 margin-top: 12px;290 display: grid;291 gap: 4px;292}293.level-choice {294 display: grid;295 grid-template-columns: 28px 1fr;296 grid-template-rows: 16px 15px;297 column-gap: 7px;298 text-align: left;299 border: 0;300 border-left: 2px solid transparent;301 background: transparent;302 padding: 8px 7px;303 color: #5e574d;304 cursor: pointer;305 border-radius: 0 6px 6px 0;306}307.level-choice span {308 grid-row: 1/3;309 font:310 11px "DM Mono",311 monospace;312 color: #b2a28d;313 padding-top: 2px;314}315.level-choice strong {316 font-size: 12px;317 font-weight: 500;318}319.level-choice small {320 font-size: 10px;321 color: #a19382;322 white-space: nowrap;323 overflow: hidden;324 text-overflow: ellipsis;325}326.level-choice.active {327 background: #efe4d4;328 border-left-color: #e76556;329}330.level-choice.active span {331 color: #e76556;332}333.mod-panel p {334 font-size: 11px;335 line-height: 1.5;336 color: #897d70;337 margin: 13px 0;338}339.file-button {340 display: inline-flex;341 align-items: center;342 justify-content: center;343 border: 1px solid #d1c1ac;344 background: #fff9ef;345 border-radius: 7px;346 padding: 8px 11px;347 font:348 10px "DM Mono",349 monospace;350 color: #6b6257;351 cursor: pointer;352}353.file-button input {354 display: none;355}356.mod-badge {357 font:358 9px "DM Mono",359 monospace;360 color: #e76556;361 border: 1px solid #ebbfad;362 border-radius: 4px;363 padding: 4px 5px;364}365.mod-status {366 font:367 10px "DM Mono",368 monospace;369 color: #a29483;370 margin-top: 10px;371 white-space: nowrap;372 overflow: hidden;373 text-overflow: ellipsis;374}375.win-toast {376 position: absolute;377 left: 50%;378 top: 50%;379 transform: translate(-50%, -50%);380 display: grid;381 gap: 3px;382 text-align: center;383 background: rgba(48, 46, 42, 0.94);384 color: #fffaf2;385 border-radius: 10px;386 padding: 18px 23px;387 box-shadow: 0 10px 24px rgba(48, 46, 42, 0.2);388}389.win-toast span {390 font-size: 22px;391 color: #e6b14d;392}393.win-toast strong {394 font-size: 14px;395 letter-spacing: 0.05em;396}397.win-toast small {398 font:399 10px "DM Mono",400 monospace;401 color: #d5c7b5;402}403.mobile-controls {404 display: none;405}406footer {407 display: flex;408 justify-content: space-between;409 border-top: 1px solid #c9bca9;410 margin-top: 30px;411 padding-top: 14px;412 color: #9b8e7d;413 font:414 9px "DM Mono",415 monospace;416 letter-spacing: 0.08em;417}418@media (max-width: 850px) {419 .app-shell {420 padding: 18px 15px;421 }422 .topbar {423 height: 48px;424 }425 .top-actions > span:not(.status-dot) {426 display: none;427 }428 .app-layout {429 display: block;430 padding-top: 18px;431 }432 .sidebar {433 margin-top: 20px;434 }435 .level-strip h1 {436 font-size: 23px;437 }438 .under-board {439 padding-top: 12px;440 }441 .mobile-controls {442 display: flex;443 flex-direction: column;444 align-items: center;445 gap: 5px;446 margin: 17px auto 0;447 }448 .mobile-controls > button,449 .mobile-controls div button {450 width: 45px;451 height: 37px;452 border: 1px solid #cbbda9;453 background: #f7efe4;454 color: #655d51;455 border-radius: 7px;456 font-size: 18px;457 }458 .mobile-controls div {459 display: flex;460 gap: 5px;461 }462 .legend {463 gap: 9px;464 }465 .legend span {466 font-size: 9px;467 }468 footer {469 margin-top: 23px;470 }471 .sidebar {472 gap: 11px;473 }474 .panel {475 padding: 16px;476 }477 .controls-panel {478 display: none;479 }480}481@media (min-width: 851px) {482 .play-column {483 min-width: 0;484 }485}