body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}.heading{font-size:2rem;line-height:1;font-style:normal;margin:0}.hero{display:flex;flex-direction:column;text-align:left}.hero a{color:#141414;text-decoration:none}.header .level{font-size:1rem;height:24px;line-height:24px}.settings{display:flex;gap:10px;align-items:center}.settings .clickable{border:none;background:transparent;color:#141414;border-radius:5px;cursor:pointer;width:36px;height:36px;display:flex;justify-content:center;align-items:center}#app{display:grid;grid-template-areas:"header header" "main main" "player1 player2";grid-template-columns:1fr 1fr;align-items:center;justify-content:center;width:100%;gap:10px}#app.train{grid-template-areas:"header header" "main main" "player1 player1"}.header{grid-area:header;display:flex;justify-content:space-between;align-items:center;padding:16px 16px 0}#player-1{grid-area:player1;color:red}#player-2{grid-area:player2;color:#007bff}.maze{grid-area:main;height:100%;padding:16px 16px 0;box-sizing:border-box}.hearts{display:flex;gap:5px;justify-content:center}.active{color:red}.timer{text-align:center;grid-area:timer;font-size:24px;display:flex;gap:10px;justify-content:center;align-items:center;font-variant-numeric:tabular-nums;align-self:flex-start}.timer button{padding:10px 20px;border:none;background:#141414;color:#fff;border-radius:5px;cursor:pointer}.control{display:grid;grid-template-areas:"nil1 up nil2" "left nil3 right" "nil4 down nil5";grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);justify-content:center}.control button{width:40px;height:40px;padding:10px;box-sizing:border-box;border:none;display:flex;justify-content:center;align-items:center;background:#141414;color:#fff;border-radius:100%;cursor:pointer}.control button:disabled{background:#ccc;cursor:not-allowed}.control button.up{grid-area:up}.control button.down{grid-area:down}.control button.left{grid-area:left}.control button.right{grid-area:right}.player{text-align:center}.player h2{font-size:1rem;margin-top:0;margin-bottom:0}.player .hearts{margin-bottom:20px}.player-score{font-size:.8rem;color:#444}.player .score{margin-bottom:10px;font-variant-numeric:tabular-nums}.resultModal .result{margin-top:0;text-align:center;white-space:nowrap}.resultModal .content{display:flex;align-items:center;justify-content:center}.resultModal .card{display:flex;align-self:center;max-width:200px;align-items:center;flex-direction:column}.room-message{position:fixed;bottom:0;top:0;left:0;right:0;flex-direction:column;display:flex}.room-message .message{font-size:.8em;margin:10px auto 0;padding:8px 16px;background:#141414;color:#fff;border-radius:5px}.room-id{font-weight:700;color:gold}@media (min-width: 1024px){#app{grid-template-areas:"null1 header null2" "player1 main player2"!important;grid-template-columns:1fr 1fr 1fr;gap:20px}.header{padding:0}.heading{font-size:3rem}.maze{padding:0}.level,.timer{height:48px;line-height:48px;font-size:32px}.player h2{font-size:1.3rem}.player-score{font-size:1rem}}