- commit
- 2dfb250ac86e455a26f248dba4edf37db5fa805e
- parent
- f014da595a471c42b0711719e5dc724730cd0b96
- author
- Dami <dami.etoile@gmail.com>
| M | src/ | 262 | ++++++++++++++++- |
| M | src/ | 486 | ++++++++++++++++++++++++++++++- |
@@ -1,6 +1,256 @@
1-.status-dot.blocked{background:#d26e57}.icon-button{margin-left:6px}.move-counter{gap:7px}.action-button{border:1px solid #d2c4b2;background:#f6eee2;color:#706659;border-radius:6px;padding:6px 8px;font:9px 'DM Mono',monospace;letter-spacing:.02em;cursor:pointer}.action-button:hover:not(:disabled){background:#eee1d0}.action-button:disabled{opacity:.42;cursor:not-allowed}.action-button kbd{font:9px 'DM Mono',monospace;color:#a29482}.win-toast[hidden]{display:none}.toast-button{margin-top:9px;border:1px solid #756b5d;background:#e8b34e;color:#302e2a;border-radius:5px;padding:7px 10px;font:10px 'DM Mono',monospace;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pack-list{display:grid;gap:4px;margin-top:12px}.pack-choice{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border:1px solid transparent;border-radius:6px;background:transparent;text-align:left;padding:7px;color:#675e52;cursor:pointer}.pack-choice:hover,.pack-choice.active{background:#efe4d4;border-color:#e0d0ba}.pack-choice strong{font-size:11px;font-weight:500}.pack-choice small{font:9px 'DM Mono',monospace;color:#9b8c7b}.mod-actions{display:flex;gap:6px;margin-top:10px}.mod-actions .file-button{font-size:9px;padding:7px 8px}.share-url-input{display:block;width:100%;margin-top:8px;border:1px solid #d6c8b5;background:#fffaf2;color:#8c7e6d;border-radius:5px;padding:7px 8px;font:9px 'DM Mono',monospace;overflow:hidden;text-overflow:ellipsis}2-.stage-shell{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(15,14,13,.92);color:#f2eee6;touch-action:none}.stage-shell[hidden]{display:none}.stage-card{min-width:min(86vw,520px);padding:42px 46px;border:1px solid #4a4640;background:#191816;box-shadow:10px 10px 0 #000;text-align:center}.stage-eyebrow{font:11px 'DM Mono',monospace;letter-spacing:.18em;color:#ff4b3e}.stage-title{margin:16px 0 28px;font:600 clamp(27px,5vw,52px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-.05em}.stage-prompt{display:inline-block;padding:10px 15px;border:1px solid #f2eee6;font:600 12px 'DM Mono',monospace;letter-spacing:.08em}.stage-help{margin-top:28px;color:#8e877c;font:10px 'DM Mono',monospace;letter-spacing:.08em}3-.stage-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}4-.stage-player{background:#0F0E0D;overflow:hidden}.stage-player .app-shell{display:none}.stage-player .stage-canvas{display:block;position:fixed;inset:0;width:100vw;height:100vh;max-height:none;border-radius:0;background:#0F0E0D;outline:none}.stage-player .sidebar{display:none}.stage-player .app-layout{display:block;max-width:1080px;margin:0 auto}.stage-player .play-column{width:100%}.stage-player .board-wrap{background:#191816;border-color:#4a4640}.stage-player .board-wrap canvas{background:#191816}.stage-player .level-strip{color:#f2eee6}.stage-player .level-strip h1{color:#f2eee6}.stage-player .under-board{color:#8e877c}5-@media (max-width:760px){.stage-player .stage-canvas{touch-action:none}.stage-card{min-width:88vw;padding:30px 22px}}6-.stage-choices{display:flex;justify-content:center;gap:10px;margin:16px 0 4px}.stage-choice{border:1px solid #8e877c;background:#191816;color:#f2eee6;padding:10px 12px;font:600 10px 'DM Mono',monospace;letter-spacing:.06em;cursor:pointer}.stage-choice-primary{background:#ff4b3e;border-color:#ff4b3e;color:#0f0e0d}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+}185+.stage-player .app-shell {186+ display: none;187+}188+.stage-player .stage-canvas {189+ display: block;190+ position: fixed;191+ inset: 0;192+ width: 100vw;193+ height: 100vh;194+ max-height: none;195+ border-radius: 0;196+ background: #0f0e0d;197+ outline: none;198+}199+.stage-player .sidebar {200+ display: none;201+}202+.stage-player .app-layout {203+ display: block;204+ max-width: 1080px;205+ margin: 0 auto;206+}207+.stage-player .play-column {208+ width: 100%;209+}210+.stage-player .board-wrap {211+ background: #191816;212+ border-color: #4a4640;213+}214+.stage-player .board-wrap canvas {215+ background: #191816;216+}217+.stage-player .level-strip {218+ color: #f2eee6;219+}220+.stage-player .level-strip h1 {221+ color: #f2eee6;222+}223+.stage-player .under-board {224+ color: #8e877c;225+}226+@media (max-width: 760px) {227+ .stage-player .stage-canvas {228+ touch-action: none;229+ }230+ .stage-card {231+ min-width: 88vw;232+ padding: 30px 22px;233+ }234+}235+.stage-choices {236+ display: flex;237+ justify-content: center;238+ gap: 10px;239+ margin: 16px 0 4px;240+}241+.stage-choice {242+ border: 1px solid #8e877c;243+ background: #191816;244+ color: #f2eee6;245+ padding: 10px 12px;246+ font:247+ 600 10px "DM Mono",248+ monospace;249+ letter-spacing: 0.06em;250+ cursor: pointer;251+}252+.stage-choice-primary {253+ background: #ff4b3e;254+ border-color: #ff4b3e;255+ color: #0f0e0d;256+}@@ -1 +1,485 @@
1-:root{font-family:'Space Grotesk',system-ui,sans-serif;color:#302e2a;background:#e9e1d4;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 12% 8%,#f8f2e9 0 20%,transparent 46%),#e9e1d4}.app-shell{max-width:1480px;margin:auto;padding:28px 38px 22px}.topbar{height:57px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c9bca9}.brand-mark{display:flex;align-items:center;gap:13px;letter-spacing:.06em}.brand-mark>span{font-size:25px;color:#e76556}.brand-mark strong{display:block;font-size:14px;line-height:1.1}.brand-mark small{display:block;margin-top:3px;font:10px 'DM Mono',monospace;letter-spacing:.13em;color:#817768}.top-actions{display:flex;align-items:center;gap:9px;color:#807464;font:10px 'DM Mono',monospace;letter-spacing:.08em}.status-dot{width:7px;height:7px;border-radius:50%;background:#e6af47;box-shadow:0 0 0 4px #f2e8d3}.status-dot.won{background:#2d9c88}.icon-button,.soft-button{border:1px solid #d0c3b2;background:#f5eee4;color:#776f64;border-radius:8px;cursor:pointer}.icon-button{font-size:17px;width:32px;height:30px;margin-left:14px}.app-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;padding-top:28px}.level-strip{display:flex;align-items:flex-end;justify-content:space-between;padding:0 2px 18px}.eyebrow{font:10px 'DM Mono',monospace;letter-spacing:.13em;color:#9b8c7a}.level-strip h1{font-size:28px;line-height:1;margin:7px 0 0;font-weight:600;letter-spacing:-.04em}.level-nav{display:flex;align-items:center;gap:11px;font:10px 'DM Mono',monospace;color:#847969}.soft-button{width:29px;height:27px;font-size:16px}.board-wrap{position:relative;border:1px solid #cabdac;border-radius:15px;background:#fbf7ef;padding:14px;box-shadow:0 11px 26px rgba(103,80,53,.07)}canvas{display:block;width:100%;height:auto;max-height:calc(100vh - 270px);border-radius:8px}.under-board{display:flex;justify-content:space-between;align-items:center;padding:17px 3px 0;color:#857a6c;font:10px 'DM Mono',monospace;letter-spacing:.08em}.legend{display:flex;gap:18px}.legend span{display:flex;align-items:center;gap:6px}.legend-swatch{width:7px;height:7px;border-radius:50%;display:inline-block;background:#766f64}.legend-swatch.you{background:#e76556}.legend-swatch.word{background:#e5af47}.legend-swatch.object{background:#6f9ca8}.move-counter{display:flex;gap:10px;align-items:center}.move-counter strong{font:500 16px 'DM Mono',monospace;color:#302e2a}.sidebar{display:flex;flex-direction:column;gap:15px}.panel{background:#f6efe5;border:1px solid #d6c8b5;border-radius:12px;padding:19px 19px 18px;box-shadow:0 5px 14px rgba(104,83,59,.035)}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start}.panel h2{font-size:17px;line-height:1;margin:7px 0 0;letter-spacing:-.03em}.pulse{width:8px;height:8px;background:#e6af47;border-radius:50%;box-shadow:0 0 0 5px #f0dfc5;margin:5px}.rules-list{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0 13px}.rule-chip{display:flex;align-items:center;gap:7px;padding:8px 9px;border:1px solid #ded2c1;border-radius:7px;background:#fffaf2;font:11px 'DM Mono',monospace}.rule-chip b{font-size:9px;color:#ab9c89}.rule-predicate{color:var(--rule-color);font-weight:500}.empty-rules{font:11px 'DM Mono',monospace;color:#9e9180;padding:13px 0}.panel-note{margin:0;font-size:12px;line-height:1.55;color:#8c7f70}.key-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:14px;font:11px 'DM Mono',monospace;color:#766c60}.key-row span{margin-left:4px}.key-row em{font-style:normal;color:#aa9b88}.key-row kbd{display:inline-flex;align-items:center;justify-content:center;width:24px;height:23px;background:#fffaf2;border:1px solid #d7cab8;border-radius:5px;font-size:10px;color:#6c645a}.level-list{margin-top:12px;display:grid;gap:4px}.level-choice{display:grid;grid-template-columns:28px 1fr;grid-template-rows:16px 15px;column-gap:7px;text-align:left;border:0;border-left:2px solid transparent;background:transparent;padding:8px 7px;color:#5e574d;cursor:pointer;border-radius:0 6px 6px 0}.level-choice span{grid-row:1/3;font:11px 'DM Mono',monospace;color:#b2a28d;padding-top:2px}.level-choice strong{font-size:12px;font-weight:500}.level-choice small{font-size:10px;color:#a19382;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.level-choice.active{background:#efe4d4;border-left-color:#e76556}.level-choice.active span{color:#e76556}.mod-panel p{font-size:11px;line-height:1.5;color:#897d70;margin:13px 0}.file-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d1c1ac;background:#fff9ef;border-radius:7px;padding:8px 11px;font:10px 'DM Mono',monospace;color:#6b6257;cursor:pointer}.file-button input{display:none}.mod-badge{font:9px 'DM Mono',monospace;color:#e76556;border:1px solid #ebbfad;border-radius:4px;padding:4px 5px}.mod-status{font:10px 'DM Mono',monospace;color:#a29483;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.win-toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;gap:3px;text-align:center;background:rgba(48,46,42,.94);color:#fffaf2;border-radius:10px;padding:18px 23px;box-shadow:0 10px 24px rgba(48,46,42,.2)}.win-toast span{font-size:22px;color:#e6b14d}.win-toast strong{font-size:14px;letter-spacing:.05em}.win-toast small{font:10px 'DM Mono',monospace;color:#d5c7b5}.mobile-controls{display:none}footer{display:flex;justify-content:space-between;border-top:1px solid #c9bca9;margin-top:30px;padding-top:14px;color:#9b8e7d;font:9px 'DM Mono',monospace;letter-spacing:.08em}@media(max-width:850px){.app-shell{padding:18px 15px}.topbar{height:48px}.top-actions>span:not(.status-dot){display:none}.app-layout{display:block;padding-top:18px}.sidebar{margin-top:20px}.level-strip h1{font-size:23px}.under-board{padding-top:12px}.mobile-controls{display:flex;flex-direction:column;align-items:center;gap:5px;margin:17px auto 0}.mobile-controls>button,.mobile-controls div button{width:45px;height:37px;border:1px solid #cbbda9;background:#f7efe4;color:#655d51;border-radius:7px;font-size:18px}.mobile-controls div{display:flex;gap:5px}.legend{gap:9px}.legend span{font-size:9px}footer{margin-top:23px}.sidebar{gap:11px}.panel{padding:16px}.controls-panel{display:none}}@media(min-width:851px){.play-column{min-width:0}}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+}10+body {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+}134+canvas {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+}406+footer {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+}