:root{
  --bg:#0e1b27;
  --bg2:#0b1a26;
  --panel:#09131d;
  --accent:#6cc6ff;
  --topbar-h:52px;
  --footer-h:32px;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:#d7e9f7;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  overflow:hidden; /* sin scroll en toda la app */
}
.ellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Topbar */
#topbar{
  height:var(--topbar-h);
  background:#071521;
  border-bottom:1px solid #0b2538;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px
}
.brand{font-weight:900; letter-spacing:1px; color:#6cf; font-size:18px}
#levelInfo{flex:1; color:#9bd; opacity:.95}
#timerBadge{
  background:#0a2a3f; border:1px solid #154a6b; padding:6px 10px; border-radius:10px; color:#cfe;
  font-variant-numeric:tabular-nums; margin-right:6px
}
.btns{display:flex; align-items:center; gap:6px; overflow-x:auto; padding-bottom:2px}
.btns button{
  background:#113349; border:1px solid #174a6b; color:#cce; padding:6px 10px;
  border-radius:8px; margin-right:0; cursor:pointer; white-space:nowrap
}
.btns button:hover{background:#16405c}
.btns button:disabled{opacity:.45; cursor:not-allowed; filter:grayscale(.35)}
.btns button:disabled:hover{background:#113349}
.btns button.mode-active{outline:2px solid #4af; background:#17507a; border-color:#206898}

/* Layout principal */
#container{
  height:calc(100vh - var(--topbar-h) - var(--footer-h));
  width:100vw;
  display:flex;
  align-items:stretch;
}

/* Canvas: permitir que se encoja para que el sidebar no quede cortado */
#game{
  background:var(--bg2);
  flex:1 1 auto;     /* puede crecer y encogerse */
  min-width:0;       /* <-- CLAVE para que el canvas no empuje al sidebar */
  height:100%;
  width:auto;
  display:block;
  z-index:1;
}

/* Sidebar: nunca se encoje y queda por encima del canvas si hubiera solapes */
#sidebar{
  flex:0 0 260px;    /* <-- ancho fijo dentro del flex */
  width:260px;
  min-width:260px;
  background:var(--panel);
  border-left:1px solid #0b2538;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
  overflow:hidden;   /* sin scroll en la columna */
  position:relative;
  z-index:2;         /* por si algún navegador apila mal con el canvas */
}
#sidebar h3{margin:0 0 6px 0; color:#8cdf}

/* Paleta */
.palette{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.tool{
  user-select:none; border:1px solid #114; background:#0f2333; padding:10px;
  text-align:center; cursor:pointer; border-radius:10px; color:#cce; min-height:62px
}
.tool span{display:block; font-size:12px; margin-top:2px; opacity:.85}
.tool.active{outline:2px solid #4af; background:#13344d}
.tool:focus{outline:2px solid #4af}
.tool.locked{opacity:.45; filter:grayscale(0.6)}
.tool.locked:hover{background:#0f2333; cursor:not-allowed}

/* Tips */
.tips{font-size:12px; color:#9bd; opacity:.9}
kbd{background:#123; border:1px solid #2a4; border-radius:4px; padding:1px 4px; font-family:monospace; color:#cfe}

/* Footer sin scroll */
#footer{
  height:var(--footer-h);
  display:flex; align-items:center; justify-content:center;
  background:#071521; border-top:1px solid #0b2538; color:#89c
}

/* Modal */
#modal.hidden{display:none}
#modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:20}
.modal-bg{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.modal-card{
  position:relative; background:#0f2232; border:1px solid #1a3b54; border-radius:16px; padding:18px 18px 14px;
  width:min(520px, calc(100vw - 40px)); box-shadow:0 20px 60px rgba(0,0,0,.5)
}
.modal-card h3{margin:0 0 8px 0; color:#8cdf}
#modalBody{color:#cfe; line-height:1.45}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:14px}
.modal-actions button{
  background:#113349; border:1px solid #174a6b; color:#cce; padding:8px 12px;
  border-radius:8px; cursor:pointer
}
.modal-actions button.primary{background:#17507a; border-color:#206898}
.modal-actions button:hover{background:#16405c}

/* Toast */
#toast.hidden{display:none}
#toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--footer-h) + 14px); background:#0f2232; border:1px solid #1a3b54; color:#cfe;
  padding:8px 12px; border-radius:10px; z-index:25; box-shadow:0 10px 30px rgba(0,0,0,.4)
}

/* Compactar sin perder herramientas si la pantalla es baja */
@media (max-height: 720px){
  #sidebar{padding:10px}
  .tool{min-height:56px; padding:8px}
  .tips{display:none}
}
@media (max-height: 620px){
  .tool{min-height:50px; padding:6px; font-size:14px}
}


/* Creador / niveles personalizados */
.form-row{display:flex; flex-direction:column; gap:4px; margin:8px 0}
.form-row label{font-size:12px; color:#9bd}
.form-row input,.form-row textarea,.form-row select{
  width:100%; background:#071521; color:#d7e9f7; border:1px solid #174a6b; border-radius:8px; padding:8px 10px;
}
.share-box{word-break:break-all; background:#071521; border:1px solid #174a6b; border-radius:10px; padding:10px; font-size:12px; color:#cfe}
.record-pill{display:inline-block; padding:2px 8px; border-radius:999px; background:#12344d; border:1px solid #206898; margin-left:6px; font-size:12px}
.modal-card.wide{width:min(760px, calc(100vw - 40px))}
@media (max-width: 900px){
  #topbar{gap:8px}
  .brand{font-size:15px}
  #timerBadge{padding:5px 8px}
  .btns button{padding:6px 8px}
}