:root{
  --bg:#0b0b0f; --panel:#111219; --accent:#ffcc00; --text:#e6e6e6; --tile:#222;
  --tile-wall:#0f4b4b; --ghost-red:#ff4b4b; --ghost-cyan:#4be6ff; --ghost-orange:#ff9b4b; --ghost-pink:#ff7bc1;
}

*{
    box-sizing:border-box
}

html, body{
    /*height:100%;*/
    margin:0;
    font-family:monospace,ui-monospace,Menlo,monaco,Consolas,'Courier New',monospace;
    background:var(--bg);color:var(--text);
    overscroll-behavior: none;
    touch-action: none;
}

.wrap{
    max-width:620px;
    margin:10px auto;
    padding:8px
}

.hud{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:6px 10px;
    background:var(--panel);
    border-radius:6px;
    margin-bottom:8px
}

.hud .center{
    font-weight:700
}

.controls-inline button{
    margin-left:6px
}

canvas{
    background: #040408;
    image-rendering: pixelated;
    border:4px solid #111;
    display:block;
    max-width:100%;
    height:auto
}

.mobile-controls{
    position:absolute;
    right:8px;
    bottom:8px;
    display:none;
    gap:6px
}

.mobile-controls .row{
    display:flex;
    gap:6px
}

.mobile-controls button{
    padding:8px;
    border-radius:6px;
    border:none;
    background:#222;
    color:var(--text);
    min-width:44px
}

.overlay{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.5);
}

/*.overlay .hidden{
    display:none
}*/

.hidden{
    display:none
}

#overlay-content{
    background:var(--panel);
    padding:18px;
    border-radius:8px;
    color:var(--text);
    text-align:center
}

.debug-bar{
    margin-top:8px;
    color:#aaa
}

button{
    cursor:pointer
}

#overlay-message {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-family: monospace;
    font-size: 22px;
    text-align: center;
    padding: 20px 30px;
    border-radius: 8px;
    z-index: 1000;
    white-space: pre-line;
}

@media (max-width:600px){
  .mobile-controls{display:flex}
  .hud{font-size:14px}
}