1:root {2 font-synthesis: none;3}45* {6 box-sizing: border-box;7}89html,10body {11 width: 100%;12 height: 100%;13 margin: 0;14 overflow: hidden;15}1617body {18 overflow: hidden;19 background: #008080;20}2122.desktop {23 width: 100%;24 height: 100dvh;25 min-height: 0;26 display: grid;27 place-items: center;28 padding: 3px;29 overflow: hidden;30}3132.game-window {33 width: min(100%, 1120px);34 height: 100%;35 min-height: 0;36 display: flex;37 flex-direction: column;38 overflow: hidden;39}4041.window-body {42 min-height: 0;43 flex: 1;44 display: grid;45 grid-template-rows: auto minmax(180px, 1fr);46 margin: 7px;47 overflow: hidden;48}4950.game-area {51 min-width: 0;52 min-height: 0;53 display: grid;54 grid-template-columns: minmax(0, 1fr) clamp(200px, 30%, 280px);55 gap: 7px;56 overflow: hidden;57}5859.game-main {60 min-width: 0;61 min-height: 0;62 display: grid;63 grid-template-rows: auto minmax(0, 1fr);64 overflow: hidden;65}6667.board-column {68 min-width: 0;69 min-height: 0;70 display: grid;71 grid-template-rows: minmax(0, 1fr) auto auto;72 overflow: hidden;73}7475.side-panel {76 min-width: 0;77 min-height: 0;78 display: grid;79 grid-template-rows: minmax(0, 1fr) auto auto;80 gap: 7px;81 padding-left: 7px;82 border-left: 2px groove #fff;83 overflow: hidden;84}8586.menu-bar {87 display: flex;88 align-items: center;89 min-height: 25px;90 margin: -2px 0 5px;91}9293.menu-item {94 min-width: 0;95 min-height: 0;96 padding: 3px 7px;97 border: 0;98 box-shadow: none;99 background: transparent;100}101102.menu-item:active,103.menu-item:focus {104 padding: 3px 7px;105 box-shadow: none;106 outline: 1px dotted #000;107 outline-offset: -3px;108}109110.hud {111 display: grid;112 grid-template-columns: 1fr auto 1fr;113 align-items: center;114 min-height: 62px;115 margin-bottom: 7px;116 padding: 9px 12px;117 background: #c0c0c0;118}119120.led-counter {121 display: block;122 width: 82px;123 padding: 2px 5px 1px;124 border: 2px inset #fff;125 background: #050505;126 color: #ff1717;127 font-family: "Courier New", ui-monospace, monospace;128 font-size: 35px;129 font-weight: 700;130 line-height: 39px;131 letter-spacing: 2px;132 text-align: center;133 text-shadow: 0 0 3px #8a0000;134}135136.led-counter.wide-counter {137 width: 126px;138 font-size: 31px;139 letter-spacing: 1px;140}141142#batch-counter {143 justify-self: end;144}145146.face-button {147 min-width: 48px;148 min-height: 48px;149 padding: 2px;150}151152.face-glyph {153 position: relative;154 display: block;155 width: 29px;156 height: 29px;157 margin: auto;158 border: 1px solid #000;159 border-radius: 50%;160 background: #ffff00;161}162163.face-glyph::before {164 position: absolute;165 top: 7px;166 left: 7px;167 width: 3px;168 height: 5px;169 background: #000;170 box-shadow: 11px 0 #000;171 content: "";172}173174.face-glyph::after {175 position: absolute;176 top: 13px;177 left: 7px;178 width: 13px;179 height: 7px;180 border-bottom: 2px solid #000;181 border-radius: 0 0 13px 13px;182 content: "";183}184185.face-paused::before {186 top: 9px;187 height: 2px;188}189190.face-lost::before {191 top: 8px;192 width: 4px;193 height: 2px;194 transform: rotate(35deg);195 box-shadow: 10px -7px #000;196}197198.face-lost::after {199 top: 17px;200 border-top: 2px solid #000;201 border-bottom: 0;202 border-radius: 13px 13px 0 0;203}204205.face-won::before {206 top: 7px;207 left: 4px;208 width: 9px;209 height: 4px;210 box-shadow: 11px 0 #000;211}212213.board-frame {214 width: 100%;215 height: auto;216 min-height: 0;217 overflow: auto;218 background: #808080;219 overscroll-behavior: contain;220}221222.board-stage {223 width: max-content;224 height: max-content;225 min-width: 100%;226 min-height: 100%;227 display: grid;228 place-items: center;229}230231canvas {232 display: block;233 width: 100%;234 height: auto;235 aspect-ratio: 1;236 max-width: none;237 image-rendering: pixelated;238}239240.status-bar {241 margin-top: 6px;242}243244.board-timeline {245 margin-top: 6px;246}247248.status-bar-field {249 min-height: 20px;250 margin: 0;251 overflow: hidden;252 white-space: nowrap;253 text-overflow: ellipsis;254}255256.intent-field {257 flex: 1;258}259260.connection-field {261 flex: 0 0 74px;262 text-align: center;263 font-weight: 700;264}265266.replay-panel {267 min-height: 0;268 display: flex;269 flex-direction: column;270 padding: 6px;271 background: #c0c0c0;272 overflow: hidden;273}274275.replay-heading {276 display: flex;277 align-items: center;278 justify-content: space-between;279 margin-bottom: 5px;280}281282#comparison-phase {283 min-width: 54px;284 padding: 1px 3px;285 background: #000080;286 color: #fff;287 font-weight: 700;288 text-align: center;289}290291.timeline-row {292 display: grid;293 grid-template-columns: 36px minmax(50px, 1fr) 64px;294 gap: 5px;295 align-items: center;296}297298.timeline-row input {299 width: 100%;300 margin: 0;301}302303#replay-position {304 font-family: "Courier New", ui-monospace, monospace;305 font-weight: 700;306 text-align: right;307}308309.intent-header {310 display: grid;311 grid-template-columns: 38px 46px minmax(0, 1fr);312 gap: 3px;313 margin-top: 6px;314 padding: 0 5px;315 font-weight: 700;316}317318.intent-log {319 min-height: 42px;320 flex: 1;321 margin: 5px 0 0;322 padding: 2px;323 overflow-y: auto;324 border: 2px inset #fff;325 background: #fff;326 list-style: none;327}328329.intent-log li {330 margin: 0;331}332333.intent-log button {334 display: block;335 width: 100%;336 min-width: 0;337 min-height: 0;338 padding: 2px 4px;339 overflow: hidden;340 border: 0;341 background: transparent;342 box-shadow: none;343 color: #000;344 text-align: left;345 text-overflow: ellipsis;346 white-space: nowrap;347}348349.intent-log button {350 display: grid;351 grid-template-columns: 38px 46px minmax(0, 1fr);352 gap: 3px;353}354355.intent-log button span:last-child {356 overflow: hidden;357 text-overflow: ellipsis;358}359360.intent-log button:active,361.intent-log button:focus {362 padding: 2px 4px;363 box-shadow: none;364}365366.intent-log button[aria-current="step"] {367 background: #000080;368 color: #fff;369}370371.intent-empty {372 padding: 3px 4px;373 color: #808080;374}375376.controls {377 display: grid;378 grid-template-columns: 1fr 1fr;379 gap: 6px;380}381382#pause-btn {383 grid-column: auto;384}385386.replay-link {387 grid-column: 1 / -1;388 min-height: 23px;389 padding: 3px 8px;390 border: 2px outset #fff;391 background: #c0c0c0;392 color: #000;393 text-align: center;394 text-decoration: none;395}396397.replay-link:active {398 border-style: inset;399 padding: 4px 7px 2px 9px;400}401402.replay-link[aria-disabled="true"] {403 color: #808080;404 pointer-events: none;405}406407.zoom-slider {408 width: 100%;409 margin: 0;410}411412.controls button {413 min-width: 0;414}415416@media (max-width: 560px) {417 .desktop {418 padding: 2px;419 }420421 .window-body {422 margin: 4px;423 }424425 .hud {426 min-height: 58px;427 padding: 6px 8px;428 }429430 .led-counter {431 width: 68px;432 font-size: 28px;433 line-height: 33px;434 }435436 .face-button {437 min-width: 40px;438 min-height: 40px;439 font-size: 21px;440 }441442 .controls {443 flex-wrap: wrap;444 }445446}447448@media (max-height: 700px) {449 .menu-bar {450 min-height: 20px;451 margin-bottom: 3px;452 }453454 .hud {455 min-height: 48px;456 margin-bottom: 4px;457 padding: 4px 8px;458 }459460 .led-counter {461 width: 66px;462 font-size: 26px;463 line-height: 31px;464 }465466 .face-button {467 min-width: 38px;468 min-height: 38px;469 }470471 .face-glyph {472 width: 25px;473 height: 25px;474 }475476 .intent-log {477 height: 42px;478 }479480 .controls {481 margin-top: 3px;482 }483}